suojin
/
jonhon-mes-web
24
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

基础数据-分派规则维护-优化编辑功能

Browse Source
dev-scheduling
ysn 2 days ago
parent 7cbb7f38ef
commit c4624518e6
2 changed files with 425 additions and 351 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 11
      src/api/basicData/ruleMaintenance.js
  2. 765
      src/views/basicData/components/addRuleDialog.vue

11
src/api/basicData/ruleMaintenance.js
Unescape View File

@ -57,7 +57,7 @@ export const getLimitRule = () => {
}); });
}; };
// 保存分派规则 // 新增保存分派规则
export const saveRules = (data) => { export const saveRules = (data) => {
return request({ return request({
url: '/api/blade-desk/bsAssign/saveBat', url: '/api/blade-desk/bsAssign/saveBat',
@ -65,7 +65,14 @@ export const saveRules = (data) => {
data, data,
}); });
}; };
// 修改分派规则
export const updateRules = (data) => {
return request({
url: '/api/blade-desk/bsAssign/update',
method: 'post',
data,
});
};
// 删除分派规则 // 删除分派规则
export const deleteRules = (params) => { export const deleteRules = (params) => {
return request({ return request({

765
src/views/basicData/components/addRuleDialog.vue
Unescape View File

@ -1,370 +1,437 @@
<template> <template>
<el-dialog title="新增" append-to-body :modelValue="openShow" fullscreen @close="closeDialog"> <el-dialog
<div style="margin-bottom: 12px" v-if="moldAddMore"> :title="row.id ? '编辑' : '新增'"
<el-button type="primary" @click="addTable">插入一行</el-button> append-to-body
<el-button type="danger" @click="delTable">删除选中行</el-button> :modelValue="openShow"
</div> fullscreen
<!-- 单个 Form 包裹整个表格 --> @close="closeDialog"
<el-form >
ref="tableForm" <div style="margin-bottom: 12px" v-if="moldAddMore">
:model="form" <el-button type="primary" @click="addTable">插入一行</el-button>
:rules="formRules" <el-button type="danger" @click="delTable">删除选中行</el-button>
label-width="0px" </div>
> <!-- 单个 Form 包裹整个表格 -->
<!-- 全局错误提示 --> <el-form ref="tableForm" :model="form" :rules="formRules" label-width="0px">
<div v-if="formError" class="error-message" style="color: #f56c6c; margin-bottom: 10px;"> <!-- 全局错误提示 -->
{{ formError }} <div v-if="formError" class="error-message" style="color: #f56c6c; margin-bottom: 10px">
</div> {{ formError }}
<el-table :data="form.tableData" @select="selectChange" border> </div>
<el-table-column type="selection" width="55"></el-table-column> <el-table :data="form.tableData" @select="selectChange" border>
<el-table-column align="center" label="工艺能力" prop="craftAbilityId"> <el-table-column type="selection" width="55"></el-table-column>
<template #header> <el-table-column align="center" label="工艺能力" prop="craftAbilityId">
<span><i style="color: red">*</i>工艺能力</span> <template #header>
</template> <span><i style="color: red">*</i>工艺能力</span>
<template #default="scope"> </template>
<el-form-item :prop="`tableData[${scope.$index}].craftAbilityId`" :rules="formRules.craftAbilityId"> <template #default="scope">
<el-select <el-form-item
v-model="scope.row.craftAbilityId" :prop="`tableData[${scope.$index}].craftAbilityId`"
placeholder="请选择" :rules="formRules.craftAbilityId"
style="width: 100%" >
filterable <el-select
v-model="scope.row.craftAbilityId"
> placeholder="请选择"
<el-option style="width: 100%"
v-for="item in capabilityData" filterable
:key="item.id" >
:value="item.id" <el-option
:label="item.caName" v-for="item in capabilityData"
></el-option> :key="item.id"
</el-select> :value="item.id"
</el-form-item> :label="item.caName"
</template> ></el-option>
</el-table-column> </el-select>
<el-table-column align="center" label="零件号" prop="partCode"> </el-form-item>
<template #default="scope"> </template>
<el-form-item :prop="`tableData[${scope.$index}].partCode`" :rules="formRules.partCode"> </el-table-column>
<el-input v-model="scope.row.partCode" placeholder="请输入零件号"></el-input> <el-table-column align="center" label="零件号" prop="partCode">
</el-form-item> <template #default="scope">
</template> <el-form-item :prop="`tableData[${scope.$index}].partCode`" :rules="formRules.partCode">
</el-table-column> <el-input v-model="scope.row.partCode" placeholder="请输入零件号"></el-input>
<el-table-column align="center" label="生产标识" prop="prodMarkId"> </el-form-item>
<template #default="scope"> </template>
<el-form-item :prop="`tableData[${scope.$index}].prodMarkId`" :rules="formRules.prodMarkId"> </el-table-column>
<el-select <el-table-column align="center" label="生产标识" prop="prodMarkIds">
multiple <template #default="scope">
v-model="scope.row.prodMarkId" <el-form-item
placeholder="请选择生产标识" :prop="`tableData[${scope.$index}].prodMarkIds`"
style="width: 100%" :rules="formRules.prodMarkIds"
filterable >
> <el-select
<el-option multiple
v-for="item in identificationData" v-model="scope.row.prodMarkIds"
:key="item.id" placeholder="请选择生产标识"
:value="item.id" style="width: 100%"
:label="item.qualityGrade" filterable
></el-option> >
</el-select> <el-option
</el-form-item> v-for="item in identificationData"
</template> :key="item.id"
</el-table-column> :value="item.id"
<el-table-column align="center" label="单件面积下限(dm²)" prop="lowArea"> :label="item.qualityGrade"
<template #default="scope"> ></el-option>
<el-form-item :prop="`tableData[${scope.$index}].lowArea`" :rules="formRules.lowArea"> </el-select>
<el-input v-model="scope.row.lowArea" placeholder="请输入单件面积下限"></el-input> </el-form-item>
</el-form-item> </template>
</template> </el-table-column>
</el-table-column> <el-table-column align="center" label="单件面积下限(dm²)" prop="lowArea">
<el-table-column align="center" label="单件面积上限(dm²)" prop="upArea"> <template #default="scope">
<template #default="scope"> <el-form-item :prop="`tableData[${scope.$index}].lowArea`" :rules="formRules.lowArea">
<el-form-item :prop="`tableData[${scope.$index}].upArea`" :rules="formRules.upArea"> <el-input v-model="scope.row.lowArea" placeholder="请输入单件面积下限"></el-input>
<el-input v-model="scope.row.upArea" placeholder="请输入单件面积上限"></el-input> </el-form-item>
</el-form-item> </template>
</template> </el-table-column>
</el-table-column> <el-table-column align="center" label="单件面积上限(dm²)" prop="upArea">
<el-table-column align="center" label="单批面积下限(dm²)" prop="singleDownArea"> <template #default="scope">
<template #default="scope"> <el-form-item :prop="`tableData[${scope.$index}].upArea`" :rules="formRules.upArea">
<el-form-item :prop="`tableData[${scope.$index}].singleDownArea`" :rules="formRules.singleDownArea"> <el-input v-model="scope.row.upArea" placeholder="请输入单件面积上限"></el-input>
<el-input v-model="scope.row.singleDownArea" placeholder="请输入单批面积下限"></el-input> </el-form-item>
</el-form-item> </template>
</template> </el-table-column>
</el-table-column> <el-table-column align="center" label="单批面积下限(dm²)" prop="singleDownArea">
<el-table-column align="center" label="单批面积上限(dm²)" prop="singleUpArea"> <template #default="scope">
<template #default="scope"> <el-form-item
<el-form-item :prop="`tableData[${scope.$index}].singleUpArea`" :rules="formRules.singleUpArea"> :prop="`tableData[${scope.$index}].singleDownArea`"
<el-input v-model="scope.row.singleUpArea" placeholder="请输入单批面积上限"></el-input> :rules="formRules.singleDownArea"
</el-form-item> >
</template> <el-input
</el-table-column> v-model="scope.row.singleDownArea"
<el-table-column align="center" label="限制类型" prop="limitType"> placeholder="请输入单批面积下限"
<template #header> ></el-input>
<span><i style="color: red">*</i>限制类型</span> </el-form-item>
</template> </template>
<template #default="scope"> </el-table-column>
<el-form-item :prop="`tableData[${scope.$index}].limitType`" :rules="formRules.limitType"> <el-table-column align="center" label="单批面积上限(dm²)" prop="singleUpArea">
<el-select <template #default="scope">
v-model="scope.row.limitType" <el-form-item
placeholder="请选择限制类型" :prop="`tableData[${scope.$index}].singleUpArea`"
style="width: 100%" :rules="formRules.singleUpArea"
> >
<el-option v-for="item in limitRule" :key="item.id" :value="item.dictKey" :label="item.dictValue"></el-option> <el-input
<!-- <el-option label="必须" :value="1"></el-option> --> v-model="scope.row.singleUpArea"
</el-select> placeholder="请输入单批面积上限"
</el-form-item> ></el-input>
</template> </el-form-item>
</el-table-column> </template>
<el-table-column align="center" label="指定类型" prop="pointType"> </el-table-column>
<template #header> <el-table-column align="center" label="限制类型" prop="limitType">
<span><i style="color: red">*</i>指定类型</span> <template #header>
</template> <span><i style="color: red">*</i>限制类型</span>
<template #default="scope"> </template>
<el-form-item :prop="`tableData[${scope.$index}].pointType`" :rules="formRules.pointType"> <template #default="scope">
<el-select <el-form-item
v-model="scope.row.pointType" :prop="`tableData[${scope.$index}].limitType`"
placeholder="请选择指定类型" :rules="formRules.limitType"
style="width: 100%" >
> <el-select
<el-option v-for="item in pointRule" :key="item.id" :value="item.dictKey" :label="item.dictValue"></el-option> v-model="scope.row.limitType"
<!-- <el-option label="厂内" value="1"></el-option> placeholder="请选择限制类型"
style="width: 100%"
>
<el-option
v-for="item in limitRule"
:key="item.id"
:value="item.dictKey"
:label="item.dictValue"
></el-option>
<!-- <el-option label="必须" :value="1"></el-option> -->
</el-select>
</el-form-item>
</template>
</el-table-column>
<el-table-column align="center" label="指定类型" prop="pointType">
<template #header>
<span><i style="color: red">*</i>指定类型</span>
</template>
<template #default="scope">
<el-form-item
:prop="`tableData[${scope.$index}].pointType`"
:rules="formRules.pointType"
>
<el-select
v-model="scope.row.pointType"
placeholder="请选择指定类型"
style="width: 100%"
>
<el-option
v-for="item in pointRule"
:key="item.id"
:value="item.dictKey"
:label="item.dictValue"
></el-option>
<!-- <el-option label="厂内" value="1"></el-option>
<el-option label="外协" value="2"></el-option> --> <el-option label="外协" value="2"></el-option> -->
</el-select> </el-select>
</el-form-item> </el-form-item>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column align="center" label="外协厂商" prop="oemId"> <el-table-column align="center" label="外协厂商" prop="oemId">
<!-- <template #header v-if="showOem"> <!-- <template #header v-if="showOem">
<span><i style="color: red">*</i>外协厂商</span> <span><i style="color: red">*</i>外协厂商</span>
</template> --> </template> -->
<template #default="scope"> <template #default="scope">
<el-form-item :prop="`tableData[${scope.$index}].oemId`" :rules="formRules.oemId"> <el-form-item :prop="`tableData[${scope.$index}].oemId`" :rules="formRules.oemId">
<el-select <el-select
v-model="scope.row.oemId" v-model="scope.row.oemId"
placeholder="请选择外协厂商" placeholder="请选择外协厂商"
style="width: 100%" style="width: 100%"
filterable filterable
clearable clearable
> >
<el-option v-for="item in companyData" :label="item.ocName" :key="item.id" :value="item.id"></el-option> <el-option
</el-select> v-for="item in companyData"
</el-form-item> :label="item.ocName"
</template> :key="item.id"
</el-table-column> :value="item.id"
<el-table-column align="center" label="作业中心" prop="centerId"> ></el-option>
<!-- <template #header v-if="showCenter"> </el-select>
</el-form-item>
</template>
</el-table-column>
<el-table-column align="center" label="作业中心" prop="centerId">
<!-- <template #header v-if="showCenter">
<span><i style="color: red">*</i>作业中心</span> <span><i style="color: red">*</i>作业中心</span>
</template> --> </template> -->
<template #default="scope"> <template #default="scope">
<el-form-item :prop="`tableData[${scope.$index}].centerId`" :rules="formRules.centerId"> <el-form-item :prop="`tableData[${scope.$index}].centerId`" :rules="formRules.centerId">
<el-select <el-select
v-model="scope.row.centerId" v-model="scope.row.centerId"
placeholder="请选择作业中心" placeholder="请选择作业中心"
style="width: 100%" style="width: 100%"
filterable filterable
clearable clearable
> >
<el-option v-for="item in workCenterData" :label="item.wcName" :key="item.id" :value="item.id"></el-option> <el-option
</el-select> v-for="item in workCenterData"
</el-form-item> :label="item.wcName"
</template> :key="item.id"
</el-table-column> :value="item.id"
<el-table-column align="center" label="备注" prop="remark"> ></el-option>
<template #default="scope"> </el-select>
<el-form-item :prop="`tableData[${scope.$index}].remark`" :rules="formRules.remark"> </el-form-item>
<el-input v-model="scope.row.remark" placeholder="请输入备注"></el-input> </template>
</el-form-item> </el-table-column>
</template> <el-table-column align="center" label="备注" prop="remark">
</el-table-column> <template #default="scope">
</el-table> <el-form-item :prop="`tableData[${scope.$index}].remark`" :rules="formRules.remark">
</el-form> <el-input v-model="scope.row.remark" placeholder="请输入备注"></el-input>
<template #footer> </el-form-item>
<span class="dialog-footer"> </template>
<el-button @click="closeDialog">取 消</el-button> </el-table-column>
<el-button type="primary" @click="submit">保 存</el-button> </el-table>
</span> </el-form>
</template> <template #footer>
</el-dialog> <span class="dialog-footer">
<el-button @click="closeDialog">取 消</el-button>
<el-button type="primary" @click="submit">保 存</el-button>
</span>
</template>
</el-dialog>
</template> </template>
<script> <script>
import {getCapability,getProduction,getOutsourcing,getWorkCenter,getLimitRule, import {
getPointRule,saveRules} from "@/api/basicData/ruleMaintenance" getCapability,
getProduction,
getOutsourcing,
getWorkCenter,
getLimitRule,
getPointRule,
saveRules,
updateRules,
} from '@/api/basicData/ruleMaintenance';
export default { export default {
props:{ props: {
isOpen:{ isOpen: {
type:Boolean, type: Boolean,
default:false default: false,
},
moldAddMore:{
type:Boolean,
default:false
},
row:{
type:Object,
default:{}
}
}, },
data(){ moldAddMore: {
return{ type: Boolean,
openShow:false, default: false,
formError:'',
showOem:false,
showCenter:false,
form:{
tableData:[]
},
craftloading:false,
formRules:{
craftAbilityId:[
{ required: true, message: '请选择工艺能力', trigger: ['change', 'submit'] }
],
limitType:[
{ required: true, message: '请选择限制类型', trigger: ['change', 'submit'] }
],
pointType:[
{ required: true, message: '请选择指定类型', trigger: ['change', 'submit'] }
],
},
capabilityData:[],
identificationData:[],
companyData:[],
workCenterData:[],
pointRule:[],
limitRule:[]
}
}, },
async mounted(){ row: {
// this.getCapability(); type: Object,
// this.getProduction(); default: {},
// this.getOutsourcing();
// this.getWorkCenter();
// this.getPointRule()
// this.getLimitRule()
const pointData = await getPointRule()
this.pointRule = pointData.data.data
const limitData = await getLimitRule()
this.limitRule = limitData.data.data
const capaRes = await getCapability()
this.capabilityData = capaRes.data.data
const companyRes = await getOutsourcing()
this.companyData = companyRes.data.data
const idenRes = await getProduction()
this.identificationData = idenRes.data.data
const worlRes = await getWorkCenter()
this.workCenterData = worlRes.data.data
if(JSON.stringify(this.row) != '{}'){
this.row.craftAbilityId = this.row.craftAbilityId + ''
this.row.centerId = this.row.centerId == -1 ? '' : this.row.centerId + ''
this.row.oemId = this.row.oemId == -1 ? '' : this.row.oemId + ''
this.form.tableData[0] = this.row
}
console.log('this.row', this.row)
this.openShow = this.isOpen;
}, },
methods:{ },
// remoteMethodCraft(query){ data() {
// console.log('query', query) return {
// if(query){ openShow: false,
formError: '',
showOem: false,
showCenter: false,
form: {
tableData: [],
},
craftloading: false,
formRules: {
craftAbilityId: [
{ required: true, message: '请选择工艺能力', trigger: ['change', 'submit'] },
],
limitType: [{ required: true, message: '请选择限制类型', trigger: ['change', 'submit'] }],
pointType: [{ required: true, message: '请选择指定类型', trigger: ['change', 'submit'] }],
},
capabilityData: [],
identificationData: [],
companyData: [],
workCenterData: [],
pointRule: [],
limitRule: [],
};
},
async mounted() {
// this.getCapability();
// this.getProduction();
// this.getOutsourcing();
// this.getWorkCenter();
// this.getPointRule()
// this.getLimitRule()
const pointData = await getPointRule();
this.pointRule = pointData.data.data;
const limitData = await getLimitRule();
this.limitRule = limitData.data.data;
const capaRes = await getCapability();
this.capabilityData = capaRes.data.data;
const companyRes = await getOutsourcing();
this.companyData = companyRes.data.data;
const idenRes = await getProduction();
this.identificationData = idenRes.data.data;
const worlRes = await getWorkCenter();
this.workCenterData = worlRes.data.data;
if (JSON.stringify(this.row) != '{}') {
this.row.craftAbilityId = this.row.craftAbilityId + '';
this.row.centerId = this.row.centerId == -1 ? '' : this.row.centerId + '';
this.row.oemId = this.row.oemId == -1 ? '' : this.row.oemId + '';
// 容错处理：确保prodMarkId在各种情况下都能正确处理
if (this.row.prodMarkId && this.row.prodMarkId !== '') {
this.row.prodMarkIds = this.row.prodMarkId.split(',');
} else {
this.row.prodMarkIds = [];
}
this.form.tableData[0] = this.row;
}
console.log('this.row', this.row);
this.openShow = this.isOpen;
},
methods: {
// remoteMethodCraft(query){
// console.log('query', query)
// if(query){
// }else{ // }else{
// getCapability().then(res =>{ // getCapability().then(res =>{
// this.capabilityData = res.data.data // this.capabilityData = res.data.data
// }) // })
// }
// },
getPointRule() {
getPointRule().then(res => {
this.pointRule = res.data.data;
});
},
getLimitRule() {
getLimitRule().then(res => {
this.limitRule = res.data.data;
});
},
getCapability() {
getCapability().then(res => {
this.capabilityData = res.data.data;
});
},
getProduction() {
getProduction().then(res => {
this.identificationData = res.data.data;
});
},
getOutsourcing() {
getOutsourcing().then(res => {
this.companyData = res.data.data;
});
},
getWorkCenter() {
getWorkCenter().then(res => {
this.workCenterData = res.data.data;
});
},
selectChange(list, row) {
row._select = !row._select;
},
// 删除选中行
delTable() {
this.form.tableData = this.form.tableData.filter(row => !row._select);
},
addTable() {
this.form.tableData.push({
_select: false,
});
},
submit() {
this.formError = '';
// 调用单个 Form 的校验方法
this.$refs.tableForm.validate((isValid, invalidFields) => {
if (!isValid) {
// 校验失败：显示提示并滚动到第一个错误字段
this.formError = '存在未完善的字段，请检查表格中的红色提示';
this.$nextTick(() => {
// 找到第一个错误字段并滚动到视图
const firstError = document.querySelector('.el-form-item.is-error');
if (firstError) {
firstError.scrollIntoView({ behavior: 'smooth', block: 'center' });
}
});
return;
}
// this.form.tableData.map(item =>{
// if(item.pointType == 1 && (!item.oemId || item.oemId == '')){
// this.formError = '指定类型为外协时，请选择外协厂商';
// return
// } // }
// }, // if(item.pointType == 0 && (!item.centerId || item.centerId == '')){
getPointRule(){ // this.formError = '指定类型为厂内时，请选择作业中心';
getPointRule().then(res =>{ // return
this.pointRule = res.data.data // }
}) // })
}, // 校验通过：准备提交数据（过滤无用字段）
getLimitRule(){ const submitData = this.form.tableData.map(row => {
getLimitRule().then(res =>{ if (Array.isArray(row.prodMarkIds) && row.prodMarkIds.length > 0) {
this.limitRule = res.data.data row.prodMarkId = row.prodMarkIds.join(',');
}) } else {
}, row.prodMarkId = '';
getCapability(){ }
getCapability().then(res =>{ const { _select, ...validData } = row; // 剔除选择状态字段
this.capabilityData = res.data.data; return validData;
}) });
}, console.log('submitData', submitData, this.row);
getProduction(){ if (this.row.id) {
getProduction().then(res =>{ // 修改
this.identificationData = res.data.data; updateRules(submitData[0]).then(res => {
}) if (res.data.code == 200) {
}, this.$message.success('修改成功');
getOutsourcing(){ this.closeDialog(true);
getOutsourcing().then(res =>{ }
this.companyData = res.data.data; });
}) } else {
}, // 新增
getWorkCenter(){ saveRules(submitData).then(res => {
getWorkCenter().then(res =>{ if (res.data.code == 200) {
this.workCenterData = res.data.data; this.$message.success('保存成功');
}) this.closeDialog(true);
}, }
selectChange(list, row) { });
row._select = !row._select;
},
// 删除选中行
delTable() {
this.form.tableData = this.form.tableData.filter(row => !row._select);
},
addTable(){
this.form.tableData.push({
_select:false
})
},
submit(){
this.formError = '';
// 调用单个 Form 的校验方法
this.$refs.tableForm.validate((isValid, invalidFields) => {
if (!isValid) {
// 校验失败：显示提示并滚动到第一个错误字段
this.formError = '存在未完善的字段，请检查表格中的红色提示';
this.$nextTick(() => {
// 找到第一个错误字段并滚动到视图
const firstError = document.querySelector('.el-form-item.is-error');
if (firstError) {
firstError.scrollIntoView({ behavior: 'smooth', block: 'center' });
}
});
return;
}
// this.form.tableData.map(item =>{
// if(item.pointType == 1 && (!item.oemId || item.oemId == '')){
// this.formError = '指定类型为外协时，请选择外协厂商';
// return
// }
// if(item.pointType == 0 && (!item.centerId || item.centerId == '')){
// this.formError = '指定类型为厂内时，请选择作业中心';
// return
// }
// })
console.log('form----------',this.form.tableData)
// 校验通过：准备提交数据（过滤无用字段）
const submitData = this.form.tableData.map(row => {
row.prodMarkId = row.prodMarkId && row.prodMarkId.length != 0 && row.prodMarkId.join(',')
const { _select, ...validData } = row; // 剔除选择状态字段
return validData;
});
saveRules(submitData).then(res =>{
if(res.data.code == 200){
this.$message.success('保存成功');
this.closeDialog(true);
}
})
})
},
closeDialog(val){
this.openShow = false;
this.$emit('closeDialog',val);
} }
} });
} },
closeDialog(val) {
this.openShow = false;
this.$emit('closeDialog', val);
},
},
};
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
::v-deep .el-form-item{ ::v-deep .el-form-item {
margin-top: 15px !important; margin-top: 15px !important;
} }
</style> </style>
Write Preview
Loading…
Cancel
Save