projects/mes-test #132
84
src/views/extend/processFlowView/components/BomSelection.vue
Normal file
84
src/views/extend/processFlowView/components/BomSelection.vue
Normal file
@ -0,0 +1,84 @@
|
||||
<!--
|
||||
filename: BomSelection.vue
|
||||
author: liubin
|
||||
date: 2023-11-20 13:23:36
|
||||
description:
|
||||
-->
|
||||
|
||||
<template>
|
||||
<div class="bom-selection">
|
||||
<el-checkbox
|
||||
v-for="item in list__inner"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:disabled="item.disabled"
|
||||
@change="(e) => handleChange(item, e)"
|
||||
class="sl__body-item"></el-checkbox>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'BomSelection',
|
||||
components: {},
|
||||
props: {
|
||||
list: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
equipmentId: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
list__inner: [],
|
||||
selected: '',
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
list: {
|
||||
handler(val) {
|
||||
if (val) {
|
||||
this.list__inner = val.map((item) => ({ ...item, disabled: false }));
|
||||
}
|
||||
},
|
||||
deep: true,
|
||||
immediate: true,
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
handleChange(bomItem, selected) {
|
||||
this.list__inner = this.list__inner.map((item) => ({
|
||||
...item,
|
||||
disabled: selected ? item.id !== bomItem.id : false,
|
||||
}));
|
||||
this.$emit('change', this.equipmentId, bomItem.id, selected);
|
||||
this.$nextTick(() => {
|
||||
this.$forceUpdate();
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.bom-selection {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
padding: 6px;
|
||||
}
|
||||
|
||||
.sl__body-item {
|
||||
margin: 0;
|
||||
padding: 3px 6px;
|
||||
border-radius: 4px;
|
||||
transition: background 0.3s ease-in-out;
|
||||
|
||||
&:hover {
|
||||
background: #0001;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -29,10 +29,7 @@
|
||||
<el-checkbox
|
||||
v-for="eq in bomList"
|
||||
:key="eq.id"
|
||||
:label="`${eq.name} (${
|
||||
selectedMBom[currentEquipment].length +
|
||||
selectedPBom[currentEquipment].length
|
||||
} / 2)`"
|
||||
:label="eq.name"
|
||||
@change="(e) => handleEquipmentChange(eq, e)"
|
||||
class="sl__body-item"></el-checkbox>
|
||||
</el-checkbox-group>
|
||||
@ -43,20 +40,12 @@
|
||||
<div class="sl__header" style="background: #f3f4fb; padding: 12px">
|
||||
<span style="">物料BOM</span>
|
||||
</div>
|
||||
<el-checkbox-group
|
||||
v-model="selectedMBom[currentEquipment]"
|
||||
class="sl__body">
|
||||
<el-checkbox
|
||||
v-for="mb in materialsBomList"
|
||||
:key="mb.id"
|
||||
:label="mb.name"
|
||||
:disabled="mb.disabled || false"
|
||||
@change="
|
||||
(e) =>
|
||||
handleMaterialBomChange(mb, materialsBomList.equipmentId, e)
|
||||
"
|
||||
class="sl__body-item"></el-checkbox>
|
||||
</el-checkbox-group>
|
||||
|
||||
<BomSelection
|
||||
key="materialsBomList"
|
||||
:list="materialsBomList"
|
||||
:equipment-id="materialsBomList.equipmentId"
|
||||
@change="handleMaterialBomChange" />
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="8" style="border-left: 1px solid #ccc">
|
||||
@ -64,19 +53,12 @@
|
||||
<div class="sl__header" style="background: #f3f4fb; padding: 12px">
|
||||
<span style="">参数BOM</span>
|
||||
</div>
|
||||
<el-checkbox-group
|
||||
v-model="selectedPBom[currentEquipment]"
|
||||
class="sl__body">
|
||||
<el-checkbox
|
||||
v-for="vb in valuesBomList"
|
||||
:key="vb.id"
|
||||
:label="vb.name"
|
||||
:disabled="vb.disabled || false"
|
||||
@change="
|
||||
(e) => handleValueBomChange(vb, valuesBomList.equipmentId, e)
|
||||
"
|
||||
class="sl__body-item"></el-checkbox>
|
||||
</el-checkbox-group>
|
||||
|
||||
<BomSelection
|
||||
key="valuesBomList"
|
||||
:list="valuesBomList"
|
||||
:equipment-id="valuesBomList.equipmentId"
|
||||
@change="handleValueBomChange" />
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
@ -84,9 +66,10 @@
|
||||
</template>
|
||||
;
|
||||
<script>
|
||||
import BomSelection from './BomSelection.vue';
|
||||
export default {
|
||||
name: 'BomSelector',
|
||||
components: {},
|
||||
components: { BomSelection },
|
||||
props: {
|
||||
bomList: {
|
||||
type: Array,
|
||||
@ -97,56 +80,17 @@ export default {
|
||||
return {
|
||||
searchText: '',
|
||||
selectedEquipments: [],
|
||||
selectedMBom: { default: [] },
|
||||
selectedPBom: { default: [] },
|
||||
selected: [],
|
||||
materialsBomList: [],
|
||||
valuesBomList: [],
|
||||
currentEquipment: 'default',
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
selected: {
|
||||
handler(val) {
|
||||
console.log(val);
|
||||
},
|
||||
deep: true,
|
||||
},
|
||||
},
|
||||
computed: {},
|
||||
created() {},
|
||||
mounted() {
|
||||
// 准备v-model
|
||||
this.bomList.forEach((item) => {
|
||||
this.$set(this.selectedMBom, item.id, []);
|
||||
this.$set(this.selectedPBom, item.id, []);
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
handleEquipmentChange(eq, selected) {
|
||||
this.currentEquipment = eq.id;
|
||||
this.materialsBomList =
|
||||
// [
|
||||
// {
|
||||
// id: 1,
|
||||
// name: 'mb-1',
|
||||
// },
|
||||
// {
|
||||
// id: 2,
|
||||
// name: 'mb-2',
|
||||
// },
|
||||
// {
|
||||
// id: 3,
|
||||
// name: 'mb-3',
|
||||
// },
|
||||
// ] ||
|
||||
eq.materialsBom || [];
|
||||
this.valuesBomList = eq.valuesBom || [];
|
||||
// 重新确保equipmentId已经被加载上去了
|
||||
this.materialsBomList.equipmentId = eq.id;
|
||||
this.valuesBomList.equipmentId = eq.id;
|
||||
this.materialsBomList = eq.materialsBom;
|
||||
this.valuesBomList = eq.valuesBom;
|
||||
|
||||
console.log('eq', selected, eq, this.selectedEquipments);
|
||||
if (selected) {
|
||||
this.selected.push({
|
||||
equipmentId: eq.id,
|
||||
@ -158,28 +102,21 @@ export default {
|
||||
this.selected = this.selected.filter(
|
||||
(item) => item.equipmentId !== eq.id
|
||||
);
|
||||
this.selectedMBom[eq.id] = [];
|
||||
this.selectedPBom[eq.id] = [];
|
||||
}
|
||||
},
|
||||
handleValueBomChange(vb, equipmentId, selected) {
|
||||
|
||||
handleMaterialBomChange(equipmentId, bomId, selected) {
|
||||
const selectedItem = this.selected.find(
|
||||
(item) => item.equipmentId == equipmentId
|
||||
);
|
||||
selectedItem.equValueBomId = selected ? vb.id : null;
|
||||
this.valuesBomList.forEach((item) => {
|
||||
item.disabled = selected ? item.id !== vb.id : false;
|
||||
});
|
||||
selectedItem.equMaterialBomId = selected ? bomId : null;
|
||||
},
|
||||
handleMaterialBomChange(mb, equipmentId, selected) {
|
||||
debugger;
|
||||
|
||||
handleValueBomChange(equipmentId, bomId, selected) {
|
||||
const selectedItem = this.selected.find(
|
||||
(item) => item.equipmentId == equipmentId
|
||||
);
|
||||
selectedItem.equMaterialBomId = selected ? mb.id : null;
|
||||
this.materialsBomList.forEach((item) => {
|
||||
item.disabled = selected ? item.id !== mb.id : false;
|
||||
});
|
||||
selectedItem.equValueBomId = selected ? bomId : null;
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
@ -218,9 +218,11 @@ export default {
|
||||
'post'
|
||||
).then(({ code, data }) => {
|
||||
if (code == 0) {
|
||||
this.bomList = data.map(eq => {
|
||||
if (eq.materialsBom) eq.materialsBom.equipmentId = eq.id
|
||||
if (eq.valuesBom) eq.valuesBom.equipmentId = eq.id
|
||||
this.bomList = data.map((eq) => {
|
||||
eq.materialsBom = eq.materialsBom || [];
|
||||
eq.valuesBom = eq.valuesBom || [];
|
||||
eq.materialsBom.equipmentId = eq.id;
|
||||
eq.valuesBom.equipmentId = eq.id;
|
||||
return eq;
|
||||
});
|
||||
} else {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user