697 lines
20 KiB
Vue

<template>
<div class="fullHeight whiteBlock">
<div style="padding: 15px 15px 0">
<p class="pageTitle">用料出库</p>
<el-form
:inline="true"
ref="searchForm"
:model="searchForm"
size="medium"
>
<el-form-item label="单号">
<el-input
v-model="searchForm.warehouseName"
placeholder="请输入"
></el-input>
</el-form-item>
<el-form-item label="客户">
<el-input
v-model="searchForm.warehouseName"
placeholder="请输入"
></el-input>
</el-form-item>
<el-form-item label="仓库">
<el-input
v-model="searchForm.warehouseName"
placeholder="请输入"
></el-input>
</el-form-item>
<el-form-item label="部门">
<el-input
v-model="searchForm.warehouseName"
placeholder="请输入"
></el-input>
</el-form-item>
<el-form-item label="经手人">
<el-input
v-model="searchForm.warehouseName"
placeholder="请输入"
></el-input>
</el-form-item>
<el-form-item label="日期">
<el-date-picker
v-model="searchForm.warehouseName"
type="daterange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
>
</el-date-picker>
</el-form-item>
<el-form-item label="批号">
<el-input
v-model="searchForm.warehouseName"
placeholder="请输入"
></el-input>
</el-form-item>
<el-form-item label="类型">
<el-select v-model="searchForm.warehouseName" placeholder="请选择">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
</el-form-item>
<el-form-item label="货号">
<el-input
v-model="searchForm.warehouseName"
placeholder="请输入"
></el-input>
</el-form-item>
<el-form-item label="品名">
<el-select v-model="searchForm.warehouseName" placeholder="请选择">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
</el-form-item>
<el-form-item label="助查码">
<el-input
v-model="searchForm.warehouseName"
placeholder="请输入"
></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" plain @click="getList">{{
$t('message.energyManage.waybill.query')
}}</el-button>
<el-button type="warning" plain @click="refresh">{{
$t('message.deviceManage.refresh')
}}</el-button>
<el-button type="primary" size="medium" @click="add">新增</el-button>
</el-form-item>
</el-form>
</div>
<div class="table_wrap whiteBlock">
<el-table class="tables" :data="List">
<el-table-column
prop="warehouseName"
label="编号"
align="center"
></el-table-column>
<el-table-column
prop="warehousePos"
align="center"
label="单号"
></el-table-column>
<el-table-column
prop="header"
align="center"
label="日期"
></el-table-column>
<el-table-column
prop="headerPhone"
align="center"
label="仓库"
></el-table-column>
<el-table-column
prop="headerPhone"
align="center"
label="方向"
></el-table-column>
<el-table-column
prop="headerPhone"
align="center"
label="类别"
></el-table-column>
<el-table-column
prop="headerPhone"
align="center"
label="部门"
></el-table-column>
<el-table-column
prop="headerPhone"
align="center"
label="供应商"
></el-table-column>
<el-table-column
prop="headerPhone"
align="center"
label="经手人"
></el-table-column>
<el-table-column
prop="headerPhone"
align="center"
label="批号"
></el-table-column>
<el-table-column
prop="headerPhone"
align="center"
label="制单人"
></el-table-column>
<el-table-column
prop="headerPhone"
align="center"
label="制单时间"
></el-table-column>
<el-table-column label="操作" align="center">
<template slot-scope="scope">
<div class="tableBtns" style="margin-left: -14px !important">
<div @click="edit(scope.row)" class="operationText">
<img
src="@/assets/images/icon-edit.png"
width="15px"
height="15px"
/>
<span>编辑</span>
</div>
<div @click="deleteDev(scope.row)" class="operationText">
<img
src="@/assets/images/icon-delete.png"
width="15px"
height="15px"
/>
<span>删除</span>
</div>
</div>
</template>
</el-table-column>
</el-table>
<el-pagination
class="pagerBox"
@size-change="SizeChange"
@current-change="CurrentChange"
:current-page="pagInfo.pageNo"
:page-sizes="$store.state.PAGESIZRS"
:page-size="pagInfo.pageSize"
layout="total, sizes, prev, pager, next"
:total="Number(pagInfo.total)"
background
></el-pagination>
</div>
<!--新增入库单信息弹框-->
<el-dialog
:modal-append-to-body="false"
:title="title"
:visible.sync="dialogShow"
width="1167px"
>
<p>出库单信息</p>
<div class="dialog_content">
<el-form
style="margin: 0 28px"
size="medium"
:model="contractForm"
ref="contractForm"
:rules="contractFormRules"
:inline="true"
>
<el-form-item label="日期" prop="arrivalTime">
<el-date-picker
v-model="value1"
type="date"
placeholder="选择日期"
value-format="yyyy-MM-dd HH:mm"
>
</el-date-picker>
</el-form-item>
<el-form-item label="仓库" prop="enterpriseId">
<el-input
v-model="searchForm.warehouseName"
placeholder="请输入"
></el-input>
</el-form-item>
<el-form-item label="类型" prop="enterpriseId">
<el-input
v-model="searchForm.warehouseName"
placeholder="请输入"
></el-input>
</el-form-item>
<el-form-item label="客户" prop="enterpriseId">
<el-input
v-model="searchForm.warehouseName"
placeholder="请输入"
></el-input>
</el-form-item>
<el-form-item
label="方向"
prop="enterpriseId"
style="margin-left: 15px"
>
<el-input
v-model="searchForm.warehouseName"
placeholder="请输入"
></el-input>
</el-form-item>
<el-form-item label="编号" prop="orderNumber">
<el-input
v-model="contractForm.orderNumber"
placeholder="请输入"
></el-input>
</el-form-item>
<el-form-item label="单号" prop="orderNumber">
<el-input
v-model="contractForm.orderNumber"
placeholder="请输入"
></el-input>
</el-form-item>
<el-form-item label="批号" prop="orderNumber">
<el-input
v-model="contractForm.orderNumber"
placeholder="请输入"
></el-input>
</el-form-item>
<el-form-item label="部门" prop="enterpriseId">
<el-input
v-model="searchForm.warehouseName"
placeholder="请输入"
></el-input>
</el-form-item>
<el-form-item label="经手人" prop="enterpriseId">
<el-input
v-model="searchForm.warehouseName"
placeholder="请输入"
></el-input>
</el-form-item>
<el-form-item label="制单人" prop="enterpriseId">
<el-input
v-model="searchForm.warehouseName"
placeholder="请输入"
></el-input>
</el-form-item>
<el-form-item label="备注" prop="remarks">
<el-input
style="width: 790px"
type="textarea"
:rows="1"
v-model="contractForm.remarks"
placeholder="请输入"
></el-input>
</el-form-item>
</el-form>
<div class="importMaterialBox">
<el-button
style="margin-bottom: 15px; margin-left: 990px"
type="primary"
size="medium"
@click="importMaterial"
>
增加明细
</el-button>
<el-table
class="tables"
:data="orderMaterialList"
height="360"
style="min-height: auto"
>
<el-table-column prop="name" label="品名" align="center">
<template slot-scope="scope">
<el-input
style="width: 122px"
size="mini"
v-model="scope.row.name"
></el-input>
</template>
</el-table-column>
<el-table-column prop="specifications" label="规格" align="center">
<template slot-scope="scope">
<el-input
style="width: 122px"
size="mini"
v-model="scope.row.specifications"
></el-input>
</template>
</el-table-column>
<el-table-column prop="unit" label="单位" align="center">
<template slot-scope="scope">
<el-input
style="width: 122px"
size="mini"
v-model="scope.row.unit"
></el-input>
</template>
</el-table-column>
<el-table-column prop="materialNum" label="数量" align="center">
<template slot-scope="scope">
<el-input
style="width: 122px"
size="mini"
v-model="scope.row.materialNum"
></el-input>
</template>
</el-table-column>
<el-table-column prop="unitPrice" label="单价" align="center">
<template slot-scope="scope">
<el-input
style="width: 122px"
size="mini"
v-model="scope.row.unitPrice"
></el-input>
</template>
</el-table-column>
<el-table-column prop="computeUnit" label="金额" align="center">
<template slot-scope="scope">
<el-input
style="width: 122px"
size="mini"
v-model="scope.row.computeUnit"
></el-input>
</template>
</el-table-column>
<el-table-column prop="remark" label="备注" align="center">
<template slot-scope="scope">
<el-input
style="width: 122px"
size="mini"
v-model="scope.row.remark"
></el-input>
</template>
</el-table-column>
<el-table-column label="操作" align="center">
<template slot-scope="scope">
<div class="tableBtns" style="margin-left: 35px !important">
<div
@click="deleteTable(scope.row, scope.index)"
class="operationText"
>
<img
src="@/assets/images/icon-delete.png"
width="15px"
height="15px"
/>
<span>删除</span>
</div>
</div>
</template>
</el-table-column>
</el-table>
</div>
<div class="dialog-footer" style="text-align: center">
<el-button
class="cancleBtn"
@click="dialogShow = false"
icon="el-icon-circle-close"
size="medium"
>取消
</el-button>
<!-- <el-button
type="primary"
icon="el-icon-circle-check"
@click="saveContractInfoFn(1)"
size="medium"
>
暂存
</el-button> -->
<el-button
type="primary"
icon="el-icon-circle-check"
@click="saveContractInfoFn(2)"
size="medium"
>
保存
</el-button>
</div>
</div>
</el-dialog>
</div>
</template>
<script>
import {
addStuffWarehouseApi,
deleteStuffWarehouseApi,
editStuffWarehouseApi,
getStuffWarehousePageApi
} from '@/assets/js/api/warehouseManagement.js'
export default {
mounted() {
this.getList()
},
data() {
return {
orderMaterialList: [
{
name: "",
specifications: "",
unit: "",
materialNum: "",
unitPrice: "",
computeUnit: "",
remark: "",
}
],
contractForm: {},
title: "",
dialogShow: false,
pagInfo: {
pageNo: 1, //页数
pageSize: 10, //条数
total: 0 //总条数
},
List: [],
addEditForm: {
warehouseName: '',//仓库名称
warehousePos: '',//warehousePos
header: '',//负责人
headerPhone: '',//负责人电话
remark: '',//备注
},
addEditRules: {
warehouseName: [
{
required: true,
message: this.$t('message.carManage.required'),
trigger: 'blur'
},
{
required: true,
message: this.$t('message.carManage.required'),
trigger: 'change'
}
],
warehousePos: [
{
required: true,
message: this.$t('message.carManage.required'),
trigger: 'blur'
},
{
required: true,
message: this.$t('message.carManage.required'),
trigger: 'change'
}
],
header: [
{
required: true,
message: this.$t('message.carManage.required'),
trigger: 'blur'
},
{
required: true,
message: this.$t('message.carManage.required'),
trigger: 'change'
}
],
headerPhone: [
{
required: true,
message: this.$t('message.carManage.required'),
trigger: 'blur'
},
{
required: true,
message: this.$t('message.carManage.required'),
trigger: 'change'
}
],
},
searchForm: {
warehouseName: '',
warehouseNumber: '',
warehousePos: '',
},
}
},
methods: {
//表格动态添加
importMaterial() {
let statusType = true;
this.orderMaterialList.forEach((item) => {
if (item.name == "" || item.specifications == "" || item.unit == "" || item.materialNum == "" || item.unitPrice == "" || item.computeUnit == "" || item.remark == "") {
this.$message({
message: "请完善信息后在添加",
type: "warning",
});
statusType = false;
}
})
if (statusType) {
this.orderMaterialList.push({
name: "",
specifications: "",
unit: "",
materialNum: "",
unitPrice: "",
computeUnit: "",
remark: "",
});
}
},
//删除表格动态操作
deleteTable(item, index) {
this.orderMaterialList.splice(index, 1)
this.$message({
message: "删除成功",
type: "success",
});
},
//查询仓库数据
getList() {
getStuffWarehousePageApi({
pageNo: this.pagInfo.pageNo,
pageSize: this.pagInfo.pageSize,
projectSn: this.$store.state.projectSn,
warehouseName: this.searchForm.warehouseName,
warehousePos: this.searchForm.warehousePos,
}).then((result) => {
if (result.success) {
this.List = result.result.records
this.pagInfo.total = result.result.total
}
})
},
add() {
this.title = '新增'
this.dialogShow = true
this.orderMaterialList = []
this.close()
},
edit(obj) {
this.title = '编辑'
this.dialogShow = true
this.addEditForm = JSON.parse(JSON.stringify(obj))
},
submit() {
let params = JSON.parse(JSON.stringify(this.addEditForm))
params.projectSn = this.$store.state.projectSn
this.$refs.addEditForm.validate((valid) => {
if (valid) {
if (this.title == '新增仓库') {
addStuffWarehouseApi(params).then((result) => {
if (result.success) {
this.$message.success(result.message)
this.getList()
}
})
} else if (this.title === '编辑仓库') {
console.log('编辑信息', this.addEditForm)
editStuffWarehouseApi(params).then((result) => {
if (result.success) {
this.$message.success(result.message)
this.getList()
}
})
}
this.dialogShow = false
} else {
return false
}
})
},
deleteDev(obj) {
this.$confirm("此操作将永久删除, 是否继续?", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
})
.then(() => {
deleteStuffWarehouseApi({ id: obj.id }).then((res) => {
if (res.success) {
this.getList()
this.$message({
type: "success",
message: "删除成功!",
});
} else {
this.$message({
type: "error",
message: res.message,
});
}
});
})
.catch(() => {
this.$message({
type: "info",
message: "已取消删除",
});
});
},
close() {
this.addEditForm = {}
this.$nextTick(() => {
this.$refs.addEditForm.clearValidate()
})
},
SizeChange(val) {
this.pagInfo.pageSize = val
this.getList()
},
CurrentChange(val) {
this.pagInfo.pageNo = val
this.getList()
},
refresh() {
this.searchForm = {}
this.pagInfo.pageNo = 1 //页数
this.pagInfo.pageSize = 10 //条数
this.getList()
},
}
}
</script>
<style lang="less" scoped>
.tables2 {
min-height: auto;
}
.dialog_content {
padding: 25px 0 !important;
}
::v-deep .el-select {
width: 160px;
}
::v-deep .el-date-editor {
width: 260px;
}
::v-deep .el-input {
width: 160px;
}
::v-deep .el-dialog__body {
padding: 30px 15px !important;
}
</style>