|
|
|
|
@ -1,29 +1,43 @@ |
|
|
|
|
<template> |
|
|
|
|
<el-dialog title="新增" append-to-body :modelValue="openShow" width="90%" @close="closeDialog" fullscreen> |
|
|
|
|
<el-dialog |
|
|
|
|
title="新增" |
|
|
|
|
append-to-body |
|
|
|
|
:modelValue="openShow" |
|
|
|
|
width="90%" |
|
|
|
|
@close="closeDialog" |
|
|
|
|
fullscreen |
|
|
|
|
> |
|
|
|
|
<div style="margin-bottom: 12px" v-if="moldAddMore"> |
|
|
|
|
<el-button type="primary" @click="addTable">插入一行</el-button> |
|
|
|
|
<el-button type="danger" @click="delTable">删除选中行</el-button> |
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
<el-form ref="tableForm" :model="form" :rules="formRules" label-width="0px"> |
|
|
|
|
<div v-if="formError" class="error-message" style="color: #f56c6c; margin-bottom: 10px;"> |
|
|
|
|
<div v-if="formError" class="error-message" style="color: #f56c6c; margin-bottom: 10px"> |
|
|
|
|
{{ formError }} |
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
<el-table :data="form.tableData" @select="selectChange" style="width: 100%" border> |
|
|
|
|
<el-table :data="form.moldPlan" @select="selectChange" style="width: 100%" border> |
|
|
|
|
<el-table-column type="selection" width="55" v-if="moldAddMore"></el-table-column> |
|
|
|
|
<el-table-column type="index" width="80" label="序号" align="center"></el-table-column> |
|
|
|
|
|
|
|
|
|
<el-table-column prop="partCode" label="零件编码" align="center"> |
|
|
|
|
<template #header> |
|
|
|
|
<span><i style="color:red">*</i>零件编码</span> |
|
|
|
|
<span><i style="color: red">*</i>零件编码</span> |
|
|
|
|
</template> |
|
|
|
|
<template #default="scope"> |
|
|
|
|
<el-form-item :prop="`tableData[${scope.$index}].partCode`" :rules="formRules.partCode"> |
|
|
|
|
<el-select v-model="scope.row.partCode" :filterable="true" allow-create |
|
|
|
|
@change="partCodeChange(scope.row)"> |
|
|
|
|
<el-option label="零件一" value="1" /> |
|
|
|
|
<el-option label="零件二" value="2" /> |
|
|
|
|
<el-form-item :prop="`moldPlan[${scope.$index}].partCode`" :rules="formRules.partCode"> |
|
|
|
|
<el-select |
|
|
|
|
v-model="scope.row.partCode" |
|
|
|
|
:filterable="true" |
|
|
|
|
allow-create |
|
|
|
|
@change="partCodeChange(scope.row.partCode, scope.$index)" |
|
|
|
|
> |
|
|
|
|
<el-option |
|
|
|
|
v-for="(item, index) in partCodeList" |
|
|
|
|
:key="index" |
|
|
|
|
:label="item.label" |
|
|
|
|
:value="item.value" |
|
|
|
|
></el-option> |
|
|
|
|
</el-select> |
|
|
|
|
</el-form-item> |
|
|
|
|
</template> |
|
|
|
|
@ -37,14 +51,22 @@ |
|
|
|
|
|
|
|
|
|
<el-table-column prop="moCode" label="工装号" align="center"> |
|
|
|
|
<template #header> |
|
|
|
|
<span><i style="color:red">*</i>工装号</span> |
|
|
|
|
<span><i style="color: red">*</i>工装号</span> |
|
|
|
|
</template> |
|
|
|
|
<template #default="scope"> |
|
|
|
|
<el-form-item :prop="`tableData[${scope.$index}].moCode`" :rules="formRules.moCode"> |
|
|
|
|
<el-select v-model="scope.row.moCode" :filterable="true" allow-create |
|
|
|
|
@change="frockChange(scope.row)"> |
|
|
|
|
<el-option label="工装一" value="1" /> |
|
|
|
|
<el-option label="工装二" value="2" /> |
|
|
|
|
<el-form-item :prop="`moldPlan[${scope.$index}].moCode`" :rules="formRules.moCode"> |
|
|
|
|
<el-select |
|
|
|
|
v-model="scope.row.moCode" |
|
|
|
|
:filterable="true" |
|
|
|
|
allow-create |
|
|
|
|
@change="frockChange(scope.row.moCode, scope.$index)" |
|
|
|
|
> |
|
|
|
|
<el-option |
|
|
|
|
v-for="(item, index) in moCodeList" |
|
|
|
|
:key="index" |
|
|
|
|
:label="item.label" |
|
|
|
|
:value="item.value" |
|
|
|
|
></el-option> |
|
|
|
|
</el-select> |
|
|
|
|
</el-form-item> |
|
|
|
|
</template> |
|
|
|
|
@ -58,22 +80,27 @@ |
|
|
|
|
|
|
|
|
|
<el-table-column prop="quantity" label="数量" align="center"> |
|
|
|
|
<template #header> |
|
|
|
|
<span><i style="color:red">*</i>数量</span> |
|
|
|
|
<span><i style="color: red">*</i>数量</span> |
|
|
|
|
</template> |
|
|
|
|
<template #default="scope"> |
|
|
|
|
<el-form-item :prop="`tableData[${scope.$index}].shuliang`" :rules="formRules.shuliang"> |
|
|
|
|
<el-input-number v-model="scope.row.shuliang" :min="1" controls-position="right" |
|
|
|
|
style="width: 90%;" @change="handleChange" /> |
|
|
|
|
<el-form-item :prop="`moldPlan[${scope.$index}].shuliang`" :rules="formRules.shuliang"> |
|
|
|
|
<el-input-number |
|
|
|
|
v-model="scope.row.shuliang" |
|
|
|
|
:min="1" |
|
|
|
|
controls-position="right" |
|
|
|
|
style="width: 90%" |
|
|
|
|
@change="handleChange" |
|
|
|
|
/> |
|
|
|
|
</el-form-item> |
|
|
|
|
</template> |
|
|
|
|
</el-table-column> |
|
|
|
|
|
|
|
|
|
<el-table-column prop="planType" label="计划类型" align="center"> |
|
|
|
|
<template #header> |
|
|
|
|
<span><i style="color:red">*</i>计划类型</span> |
|
|
|
|
<span><i style="color: red">*</i>计划类型</span> |
|
|
|
|
</template> |
|
|
|
|
<template #default="scope"> |
|
|
|
|
<el-form-item :prop="`tableData[${scope.$index}].planType`" :rules="formRules.planType"> |
|
|
|
|
<el-form-item :prop="`moldPlan[${scope.$index}].planType`" :rules="formRules.planType"> |
|
|
|
|
<el-select v-model="scope.row.planType" :filterable="true" allow-create> |
|
|
|
|
<el-option label="计划类型一" value="1" /> |
|
|
|
|
<el-option label="计划类型二" value="2" /> |
|
|
|
|
@ -84,34 +111,40 @@ |
|
|
|
|
|
|
|
|
|
<el-table-column prop="needDate" label="需求日期" align="center"> |
|
|
|
|
<template #header> |
|
|
|
|
<span><i style="color:red">*</i>需求日期</span> |
|
|
|
|
<span><i style="color: red">*</i>需求日期</span> |
|
|
|
|
</template> |
|
|
|
|
<template #default="scope"> |
|
|
|
|
<el-form-item :prop="`tableData[${scope.$index}].needDate`" :rules="formRules.needDate"> |
|
|
|
|
<el-date-picker v-model="scope.row.needDate" type="date" placeholder="请选择" |
|
|
|
|
style="width: 80%;" /> |
|
|
|
|
<el-form-item :prop="`moldPlan[${scope.$index}].needDate`" :rules="formRules.needDate"> |
|
|
|
|
<el-date-picker |
|
|
|
|
v-model="scope.row.needDate" |
|
|
|
|
type="date" |
|
|
|
|
format="YYYY-MM-DD" |
|
|
|
|
value-format="YYYY-MM-DD" |
|
|
|
|
placeholder="请选择" |
|
|
|
|
style="width: 80%" |
|
|
|
|
/> |
|
|
|
|
</el-form-item> |
|
|
|
|
</template> |
|
|
|
|
</el-table-column> |
|
|
|
|
|
|
|
|
|
<el-table-column prop="quaLevel" label="生产标识" align="center"> |
|
|
|
|
<template #header> |
|
|
|
|
<span><i style="color:red">*</i>生产标识</span> |
|
|
|
|
<span><i style="color: red">*</i>生产标识</span> |
|
|
|
|
</template> |
|
|
|
|
<template #default="scope"> |
|
|
|
|
<el-form-item :prop="`tableData[${scope.$index}].quaLevel`" :rules="formRules.quaLevel"> |
|
|
|
|
<el-form-item :prop="`moldPlan[${scope.$index}].quaLevel`" :rules="formRules.quaLevel"> |
|
|
|
|
<el-input v-model="scope.row.quaLevel" /> |
|
|
|
|
</el-form-item> |
|
|
|
|
</template> |
|
|
|
|
</el-table-column> |
|
|
|
|
|
|
|
|
|
<el-table-column prop="keeper.userName" label="保管员" align="center"> |
|
|
|
|
<el-table-column prop="keeper" label="保管员" align="center"> |
|
|
|
|
<template #header> |
|
|
|
|
<span><i style="color:red">*</i>保管员</span> |
|
|
|
|
<span><i style="color: red">*</i>保管员</span> |
|
|
|
|
</template> |
|
|
|
|
<template #default="scope"> |
|
|
|
|
<el-form-item :prop="`tableData[${scope.$index}].userName`" :rules="formRules.userName"> |
|
|
|
|
<el-select v-model="scope.row.userName" :filterable="true" allow-create> |
|
|
|
|
<el-form-item :prop="`moldPlan[${scope.$index}].keeper`" :rules="formRules.keeper"> |
|
|
|
|
<el-select v-model="scope.row.keeper" :filterable="true" allow-create> |
|
|
|
|
<el-option label="人员一" value="1" /> |
|
|
|
|
<el-option label="人员二" value="2" /> |
|
|
|
|
</el-select> |
|
|
|
|
@ -127,7 +160,9 @@ |
|
|
|
|
|
|
|
|
|
<el-table-column fixed="right" label="操作" width="100" align="left" v-if="moldAddMore"> |
|
|
|
|
<template #default="scope"> |
|
|
|
|
<el-button type="text" @click.prevent="delTable(scope.row, scope.$index)">删除</el-button> |
|
|
|
|
<el-button type="text" @click.prevent="delTable(scope.row, scope.$index)" |
|
|
|
|
>删除</el-button |
|
|
|
|
> |
|
|
|
|
</template> |
|
|
|
|
</el-table-column> |
|
|
|
|
</el-table> |
|
|
|
|
@ -143,79 +178,92 @@ |
|
|
|
|
</template> |
|
|
|
|
|
|
|
|
|
<script> |
|
|
|
|
import { add } from '@/api/orderManagement/moldPlan'; |
|
|
|
|
import { index } from '@/views/plugin/workflow/api/statistics'; |
|
|
|
|
|
|
|
|
|
export default { |
|
|
|
|
props: { |
|
|
|
|
showDialog: { |
|
|
|
|
type: Boolean, |
|
|
|
|
default: false |
|
|
|
|
default: false, |
|
|
|
|
}, |
|
|
|
|
moldAddMore: { |
|
|
|
|
type: Boolean, |
|
|
|
|
default: false |
|
|
|
|
} |
|
|
|
|
default: false, |
|
|
|
|
}, |
|
|
|
|
}, |
|
|
|
|
data() { |
|
|
|
|
return { |
|
|
|
|
moCodeList: [ |
|
|
|
|
{ label: '工装一', value: 1 }, |
|
|
|
|
{ |
|
|
|
|
label: '工装二', |
|
|
|
|
value: 2, |
|
|
|
|
}, |
|
|
|
|
], |
|
|
|
|
partCodeList: [ |
|
|
|
|
{ label: '零件一', value: 1 }, |
|
|
|
|
{ |
|
|
|
|
label: '零件二', |
|
|
|
|
value: 2, |
|
|
|
|
}, |
|
|
|
|
], |
|
|
|
|
openShow: false, |
|
|
|
|
formError: '', |
|
|
|
|
form: { |
|
|
|
|
tableData: [] |
|
|
|
|
moldPlan: [], |
|
|
|
|
}, |
|
|
|
|
formRules: { |
|
|
|
|
tableData: [ |
|
|
|
|
{ |
|
|
|
|
required: true, |
|
|
|
|
message: '请至少添加一行数据', |
|
|
|
|
trigger: 'submit', |
|
|
|
|
type: 'array' |
|
|
|
|
// moldPlan: [ |
|
|
|
|
// { |
|
|
|
|
// required: true, |
|
|
|
|
// message: '请至少添加一行数据', |
|
|
|
|
// trigger: 'submit', |
|
|
|
|
// type: 'array', |
|
|
|
|
// }, |
|
|
|
|
// { |
|
|
|
|
// validator: (rule, value, callback) => { |
|
|
|
|
// if (value.length === 0) { |
|
|
|
|
// callback(new Error('请至少添加一行数据')); |
|
|
|
|
// } else { |
|
|
|
|
// callback(); |
|
|
|
|
// } |
|
|
|
|
// }, |
|
|
|
|
// trigger: 'submit', |
|
|
|
|
// }, |
|
|
|
|
// ], |
|
|
|
|
// partCode: [{ required: true, message: '请选择零件编码', trigger: ['change', 'submit'] }], |
|
|
|
|
// moCode: [{ required: true, message: '请选择工装号', trigger: ['change', 'submit'] }], |
|
|
|
|
// shuliang: [ |
|
|
|
|
// { required: true, message: '请输入数量', trigger: ['change', 'submit'] }, |
|
|
|
|
// { type: 'number', min: 1, message: '数量不能小于1', trigger: ['change', 'submit'] }, |
|
|
|
|
// ], |
|
|
|
|
// planType: [{ required: true, message: '请选择计划类型', trigger: ['change', 'submit'] }], |
|
|
|
|
// needDate: [{ required: true, message: '请选择需求日期', trigger: ['change', 'submit'] }], |
|
|
|
|
// quaLevel: [{ required: true, message: '请输入生产标识', trigger: ['blur', 'submit'] }], |
|
|
|
|
// keeper: [{ required: true, message: '请选择保管员', trigger: ['change', 'submit'] }], |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
validator: (rule, value, callback) => { |
|
|
|
|
if (value.length === 0) { |
|
|
|
|
callback(new Error('请至少添加一行数据')); |
|
|
|
|
} else { |
|
|
|
|
callback(); |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
trigger: 'submit' |
|
|
|
|
} |
|
|
|
|
], |
|
|
|
|
partCode: [ |
|
|
|
|
{ required: true, message: '请选择零件编码', trigger: ['change', 'submit'] } |
|
|
|
|
], |
|
|
|
|
moCode: [ |
|
|
|
|
{ required: true, message: '请选择工装号', trigger: ['change', 'submit'] } |
|
|
|
|
], |
|
|
|
|
shuliang: [ |
|
|
|
|
{ required: true, message: '请输入数量', trigger: ['change', 'submit'] }, |
|
|
|
|
{ type: 'number', min: 1, message: '数量不能小于1', trigger: ['change', 'submit'] } |
|
|
|
|
], |
|
|
|
|
planType: [ |
|
|
|
|
{ required: true, message: '请选择计划类型', trigger: ['change', 'submit'] } |
|
|
|
|
], |
|
|
|
|
needDate: [ |
|
|
|
|
{ required: true, message: '请选择需求日期', trigger: ['change', 'submit'] } |
|
|
|
|
], |
|
|
|
|
quaLevel: [ |
|
|
|
|
{ required: true, message: '请输入生产标识', trigger: ['blur', 'submit'] } |
|
|
|
|
], |
|
|
|
|
userName: [ |
|
|
|
|
{ required: true, message: '请选择保管员', trigger: ['change', 'submit'] } |
|
|
|
|
] |
|
|
|
|
} |
|
|
|
|
}; |
|
|
|
|
}, |
|
|
|
|
mounted() { |
|
|
|
|
this.openShow = this.showDialog; |
|
|
|
|
if (this.moldAddMore && this.form.tableData.length === 0) { |
|
|
|
|
if (this.moldAddMore && this.form.moldPlan.length === 0) { |
|
|
|
|
this.addTable(); |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
watch: { |
|
|
|
|
showDialog(newVal) { |
|
|
|
|
this.openShow = newVal; |
|
|
|
|
if (newVal && this.moldAddMore && this.form.moldPlan.length === 0) { |
|
|
|
|
this.addTable(); |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
}, |
|
|
|
|
methods: { |
|
|
|
|
closeDialog() { |
|
|
|
|
this.openShow = false; |
|
|
|
|
this.$emit('closeDialog'); |
|
|
|
|
this.form.tableData = []; |
|
|
|
|
this.form.moldPlan = []; |
|
|
|
|
this.formError = ''; |
|
|
|
|
this.$refs.tableForm?.resetFields(); |
|
|
|
|
}, |
|
|
|
|
@ -223,7 +271,7 @@ export default { |
|
|
|
|
row._select = !row._select; |
|
|
|
|
}, |
|
|
|
|
addTable() { |
|
|
|
|
this.form.tableData.push({ |
|
|
|
|
this.form.moldPlan.push({ |
|
|
|
|
_select: false, |
|
|
|
|
partCode: '', |
|
|
|
|
partName: '', |
|
|
|
|
@ -234,28 +282,31 @@ export default { |
|
|
|
|
needDate: '', |
|
|
|
|
quaLevel: '', |
|
|
|
|
userName: '', |
|
|
|
|
memo: '' |
|
|
|
|
memo: '', |
|
|
|
|
}); |
|
|
|
|
}, |
|
|
|
|
delTable(row, index) { |
|
|
|
|
if (index !== undefined) { |
|
|
|
|
this.form.tableData.splice(index, 1); |
|
|
|
|
this.form.moldPlan.splice(index, 1); |
|
|
|
|
} else { |
|
|
|
|
this.form.tableData = this.form.tableData.filter(item => !item._select); |
|
|
|
|
this.form.moldPlan = this.form.moldPlan.filter(item => !item._select); |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
partCodeChange(row) { |
|
|
|
|
// 保留原逻辑,可根据实际需求完善 |
|
|
|
|
partCodeChange(val, i) { |
|
|
|
|
this.form.moldPlan[i].partName = |
|
|
|
|
this.partCodeList.find(item => item.value === val)?.label || ''; |
|
|
|
|
}, |
|
|
|
|
frockChange(row) { |
|
|
|
|
frockChange(val, i) { |
|
|
|
|
// 保留原逻辑,可根据实际需求完善 |
|
|
|
|
this.form.moldPlan[i].moName = this.moCodeList.find(item => item.value === val)?.label || ''; |
|
|
|
|
}, |
|
|
|
|
handleChange() { |
|
|
|
|
// 数量变化处理 |
|
|
|
|
}, |
|
|
|
|
submitForm() { |
|
|
|
|
// 快照打印 |
|
|
|
|
this.formError = ''; |
|
|
|
|
this.$refs.tableForm.validate((isValid) => { |
|
|
|
|
this.$refs.tableForm.validate(isValid => { |
|
|
|
|
if (!isValid) { |
|
|
|
|
this.formError = '存在未完善的字段,请检查表格中的红色提示'; |
|
|
|
|
this.$nextTick(() => { |
|
|
|
|
@ -265,21 +316,31 @@ export default { |
|
|
|
|
} |
|
|
|
|
}); |
|
|
|
|
return; |
|
|
|
|
} else { |
|
|
|
|
console.log('submitForm after validate', JSON.parse(JSON.stringify(this.form))); |
|
|
|
|
add(JSON.parse(JSON.stringify(this.form))).then(res => { |
|
|
|
|
if (res.code === 200) { |
|
|
|
|
this.$message.success('提交成功'); |
|
|
|
|
this.closeDialog(); |
|
|
|
|
} |
|
|
|
|
}); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
// 处理提交数据 |
|
|
|
|
const submitData = this.form.tableData.map(row => { |
|
|
|
|
const { _select, ...validData } = row; |
|
|
|
|
return validData; |
|
|
|
|
}); |
|
|
|
|
// const submitData = this.form.moldPlan.map(row => { |
|
|
|
|
// const { _select, ...validData } = row; |
|
|
|
|
// return validData; |
|
|
|
|
// }); |
|
|
|
|
|
|
|
|
|
// 验证通过后再打印一次快照,便于对比 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 实际提交逻辑 |
|
|
|
|
this.$message.success('提交成功'); |
|
|
|
|
this.closeDialog(); |
|
|
|
|
this.$emit('submitSuccess', submitData); |
|
|
|
|
|
|
|
|
|
// this.$emit('submitSuccess', submitData); |
|
|
|
|
}); |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
}, |
|
|
|
|
}; |
|
|
|
|
</script> |
|
|
|
|
|
|
|
|
|
|