tft-fe/src/views/consumablesManagement/components/inAndOutManagementAdd.vue
2023-05-25 15:16:14 +08:00

378 lines
11 KiB
Vue

<template>
<el-form ref="form" :rules="rules" label-width="110px" :model="form">
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="产线" prop="proLineId">
<el-select
v-model="form.proLineId"
placeholder="产线"
style="width: 100%"
:disabled="showEdit || showOutput"
@change="getSideLibaryList"
>
<el-option
v-for="item in proLineIdList"
:key="item.id"
:label="item.name"
:value="item.id"
></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="所属线边库" prop="sideLibaryId">
<el-select
v-model="form.sideLibaryId"
placeholder="所属线边库"
style="width: 100%"
:disabled="showEdit || showOutput"
>
<el-option
v-for="(item, i) in sideLibaryIdList"
:key="i"
:label="item.name"
:value="item.sideLibaryId"
></el-option>
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="耗材名称" prop="name">
<el-select
v-model="form.name"
filterable
placeholder="耗材名称"
style="width: 100%"
:disabled="showEdit || showOutput"
@change="selectMeta"
>
<el-option
v-for="(item, i) in consumablesNameList"
:key="i"
:label="item.name"
:value="item.name"
></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="规格" prop="spec">
<el-select
v-model="form.spec"
placeholder="规格"
style="width: 100%"
:disabled="showEdit || showOutput"
>
<el-option
v-for="(item, i) in consumablesSpecList"
:key="i"
:label="item.spec"
:value="item.spec"
></el-option>
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="批次编码" prop="batchCode" v-if="!showEdit">
<el-input
v-if="!showOutput"
v-model="form.batchCode"
:disabled="showEdit"
placeholder="批次编码"
></el-input>
<el-select
v-if="showOutput"
v-model="form.batchCode"
placeholder="批次编码"
style="width: 100%"
@change="toggleSupplier"
>
<el-option
v-for="item in batchCodeList"
:key="item.batchCode"
:label="item.batchCode"
:value="item.batchCode"
></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item
:label="showOutput ? '出库数量' : '入库数量'"
prop="num"
v-if="!showEdit"
>
<el-input-number
v-model="form.num"
:min="0"
:max="999999999"
style="width: 100%"
:disabled="showEdit"
></el-input-number>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="供应商" prop="supplier" v-if="!showEdit">
<el-input
v-model="form.supplier"
:disabled="showEdit || showOutput"
placeholder="供应商"
></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="单位" prop="unit">
<el-input v-model="form.unit" placeholder="单位" disabled></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20" v-if="showEdit">
<el-col :span="12">
<el-form-item label="最低安全库存" prop="minNum">
<el-input-number
v-model="form.minNum"
:min="0"
:max="999999999"
style="width: 100%"
></el-input-number>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="最高安全库存" prop="maxNum">
<el-input-number
v-model="form.maxNum"
:min="0"
:max="9999999999"
style="width: 100%"
></el-input-number>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20" v-if="showOutput">
<el-col :span="12">
<el-form-item label="领取人" prop="recipient">
<el-input v-model="form.recipient" placeholder="领取人"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="24">
<el-form-item label="备注" prop="remark">
<el-input v-model="form.remark" placeholder="备注"></el-input>
</el-form-item>
</el-col>
</el-row>
</el-form>
</template>
<script>
import {
getMaterialDetail,
getMaterialManageByid,
materialManageUpdate,
materialManageInsert,
materialManageDelete
} from '@/api/consumablesManagement'
import {
sideLibraryList,
getMaterialArr,
materialList
} from '@/api/basicConfig'
export default {
name: 'inAndOutManagementAdd',
data() {
return {
form: {
id: '',
proLineId: '',
sideLibaryId: '',
name: '',
spec: '',
batchCode: '',
num: '',
supplier: '',
unit: '',
remark: '',
minNum: '',
maxNum: '',
recipient: ''
},
rules: {
proLineId: [
{ required: true, message: '请选择产线', trigger: 'change' }
],
sideLibaryId: [
{ required: true, message: '请选择所属线边库', trigger: 'change' }
],
name: [
{ required: true, message: '请选择耗材名称', trigger: 'change' }
],
spec: [{ required: true, message: '请选择规格', trigger: 'change' }],
batchCode: [
{ required: true, message: '请输入批次编码', trigger: 'blur' }
],
num: [{ required: true, message: '请输入入库数量', trigger: 'blur' }],
minNum: [
{ required: true, message: '请输入最低安全库存', trigger: 'blur' }
],
maxNum: [
{ required: true, message: '请输入最高安全库存', trigger: 'blur' }
]
},
proLineIdList: JSON.parse(localStorage.getItem('publicList'))
.proLineVoList,
sideLibaryIdList: [],
consumablesNameList: [],
consumablesSpecList: [],
showEdit: false, // 编辑
showOutput: false, // 出库
batchCodeList: []
}
},
methods: {
init(param) {
this.getMaterialList()
if (param) {
this.form.id = param.id
getMaterialManageByid({ id: this.form.id }).then((res) => {
this.form.proLineId = '1'
// this.form.proLineId = res.data.lineID
this.getSideLibaryList(this.form.proLineId)
this.form.sideLibaryId = res.data.sideLibaryId
this.form.name = res.data.materialName
this.selectMeta(this.form.name)
this.form.spec = res.data.spec
this.form.minNum = res.data.minNum ? res.data.minNum : 0
this.form.maxNum = res.data.maxNum ? res.data.maxNum : 0
this.form.remark = res.data.remark
this.form.recipient = this.$store.getters.username
? this.$store.getters.username
: ''
})
if (param.type === 'edit') {
this.showEdit = true
this.showOutput = false
console.log('编辑')
} else {
this.showOutput = true
this.showEdit = false
this.getBatch(this.form.id)
console.log('出库')
}
} else {
this.form.id = ''
}
},
getSideLibaryList(id) {
this.form.sideLibaryId = ''
sideLibraryList({ id }).then((res) => {
if (res.code === 0) {
this.sideLibaryIdList = res.data
}
})
},
getMaterialList() {
getMaterialArr().then((res) => {
if (res.code === 0) {
this.consumablesNameList = res.data
}
})
},
selectMeta(val) {
this.consumablesNameList &&
this.consumablesNameList.map((item) => {
if (item.name === val) {
this.form.unit = item.unit
}
})
materialList({ name: val }).then((res) => {
console.log(res)
if (res.code === 0) {
this.consumablesSpecList = res.data
if (!this.showEdit && !this.showOutput) {
this.form.spec = ''
}
}
})
},
getBatch(id) {
getMaterialDetail({ id }).then((res) => {
if (res.code === 0) {
this.batchCodeList = res.data
}
})
},
submitForm() {
this.$refs['form'].validate((valid) => {
if (valid) {
if (this.form.id) {
if (this.showEdit) {
materialManageUpdate({
id: this.form.id,
minNum: this.form.minNum,
maxNum: this.form.maxNum,
remark: this.form.remark
}).then((res) => {
if (res.code === 0) {
this.$message({
message: '操作成功',
type: 'success',
duration: 1500
})
this.$emit('successSubmit')
}
})
} else {
materialManageDelete({ ...this.form }).then((res) => {
if (res.code === 0) {
this.$message({
message: '操作成功',
type: 'success',
duration: 1500
})
this.$emit('successSubmit')
}
})
}
} else {
materialManageInsert({ ...this.form }).then((res) => {
if (res.code === 0) {
this.$message({
message: '操作成功',
type: 'success',
duration: 1500
})
this.$emit('successSubmit')
}
})
}
} else {
return false
}
})
},
formClear() {
this.showEdit = false
this.showOutput = false
this.batchCodeList = []
this.sideLibaryIdList = []
this.consumablesSpecList = []
this.$refs.form.resetFields()
},
toggleSupplier(val) {
this.batchCodeList &&
this.batchCodeList.map((item) => {
if (val === item.batchCode) {
this.form.supplier = item.supplier
}
})
}
}
}
</script>