update bom-selector v1

This commit is contained in:
lb 2023-11-20 15:51:47 +08:00
parent dd23c49ba0
commit ac041c2f4a
7 changed files with 126 additions and 457 deletions

View File

@ -9,9 +9,10 @@
<div class="bom-selection">
<el-checkbox
v-for="item in list__inner"
:key="item.id"
:key="item.id + randomKey"
:label="item.name"
:disabled="item.disabled"
:checked="item.id === selected"
@change="(e) => handleChange(item, e)"
class="sl__body-item"></el-checkbox>
</div>
@ -21,7 +22,15 @@
export default {
name: 'BomSelection',
components: {},
// model: {
// prop: 'selected',
// event: 'update',
// },
props: {
// selected: {
// type: String,
// default: '',
// },
list: {
type: Array,
default: () => [],
@ -34,7 +43,8 @@ export default {
data() {
return {
list__inner: [],
selected: '',
selected: null,
randomKey: Math.random()
};
},
watch: {
@ -54,11 +64,24 @@ export default {
...item,
disabled: selected ? item.id !== bomItem.id : false,
}));
if (selected) this.selected = null;
else this.clearSelected();
this.$emit('change', this.equipmentId, bomItem.id, selected);
this.$nextTick(() => {
this.$forceUpdate();
});
},
clearSelected() {
console.log('clearSelected');
this.selected = null;
this.randomKey = Math.random()
// this.$emit('update', null);
// this.$nextTick(() => {
// this.$forceUpdate();
// });
},
},
};
</script>

View File

@ -12,6 +12,7 @@
<el-input
v-model="searchText"
placeholder="搜索"
clearable
style="margin-bottom: 12px; user-select: none">
<i slot="prefix" class="el-input__icon el-icon-search"></i>
</el-input>
@ -23,16 +24,19 @@
<div class="select-list">
<div class="sl__header" style="background: #f3f4fb; padding: 12px">
<span style="">可分配设备</span>
<span>{{ selectedEquipments.length }}/{{ bomList.length }}</span>
<span>
{{ selectedEquipments.length }}/{{ filteredBomList.length }}
</span>
</div>
<el-checkbox-group v-model="selectedEquipments" class="sl__body">
<div class="sl__body">
<el-checkbox
v-for="eq in bomList"
:key="eq.id"
v-for="eq in filteredBomList"
:key="eq.id + refreshKey"
:label="eq.name"
:checked="selectedEquipments.includes(eq.id)"
@change="(e) => handleEquipmentChange(eq, e)"
class="sl__body-item"></el-checkbox>
</el-checkbox-group>
</div>
</div>
</el-col>
<el-col :span="8" style="border-left: 1px solid #ccc">
@ -42,6 +46,7 @@
</div>
<BomSelection
ref="materialsBomList"
key="materialsBomList"
:list="materialsBomList"
:equipment-id="materialsBomList.equipmentId"
@ -55,6 +60,7 @@
</div>
<BomSelection
ref="valuesBomList"
key="valuesBomList"
:list="valuesBomList"
:equipment-id="valuesBomList.equipmentId"
@ -70,11 +76,19 @@ import BomSelection from './BomSelection.vue';
export default {
name: 'BomSelector',
components: { BomSelection },
model: {
prop: 'value',
event: 'update',
},
props: {
bomList: {
type: Array,
default: () => [],
},
value: {
type: Array,
default: () => [],
},
},
data() {
return {
@ -83,8 +97,29 @@ export default {
selected: [],
materialsBomList: [],
valuesBomList: [],
refreshKey: Math.random(),
};
},
watch: {
value: {
handler(val) {
console.log('value', val);
if (val) {
this.selectedEquipments = val.map((item) => item.equipmentId);
this.selected = val;
}
},
deep: true,
immediate: true,
},
},
computed: {
filteredBomList() {
return this.bomList.filter((item) => {
return item.name.includes(this.searchText);
});
},
},
methods: {
handleEquipmentChange(eq, selected) {
this.currentEquipment = eq.id;
@ -92,16 +127,24 @@ export default {
this.valuesBomList = eq.valuesBom;
if (selected) {
this.selectedEquipments.push(eq.id);
this.selected.push({
equipmentId: eq.id,
equValueBomId: null,
equMaterialBomId: null,
});
this.$emit('update', this.selected);
} else {
//
this.selectedEquipments = this.selectedEquipments.filter(
(id) => id !== eq.id
);
this.$refs.materialsBomList.clearSelected();
this.$refs.valuesBomList.clearSelected();
this.selected = this.selected.filter(
(item) => item.equipmentId !== eq.id
);
this.$emit('update', this.selected);
}
},
@ -109,14 +152,41 @@ export default {
const selectedItem = this.selected.find(
(item) => item.equipmentId == equipmentId
);
selectedItem.equMaterialBomId = selected ? bomId : null;
if (selected && !selectedItem) {
//
this.selectedEquipments.push(equipmentId);
this.selected.push({
equipmentId,
equValueBomId: null,
equMaterialBomId: bomId,
});
// ''
this.refreshKey = Math.random();
this.$emit('update', this.selected);
return;
}
selectedItem && (selectedItem.equMaterialBomId = selected ? bomId : null);
this.$emit('update', this.selected);
},
handleValueBomChange(equipmentId, bomId, selected) {
const selectedItem = this.selected.find(
(item) => item.equipmentId == equipmentId
);
selectedItem.equValueBomId = selected ? bomId : null;
if (selected && !selectedItem) {
//
this.selectedEquipments.push(equipmentId);
this.selected.push({
equipmentId,
equValueBomId: bomId,
equMaterialBomId: null,
});
this.refreshKey = Math.random();
this.$emit('update', this.selected);
return;
}
selectedItem && (selectedItem.equValueBomId = selected ? bomId : null);
this.$emit('update', this.selected);
},
},
};

View File

@ -1,111 +0,0 @@
<!--
filename: CustomBomList.vue
author: liubin
date: 2023-11-17 14:06:04
description:
-->
<template>
<div class="custom-bom-list—wrapper">
<div
class="ct__equipment-name"
@click.prevent="
() => {
$emit('open', equipment.id);
}
">
{{ equipment.name }}
</div>
<div
class="ct__bom-list"
:class="{
hidden: active && bomListLength > 0 ? false : true,
}">
<ul class="param-bom">
<li v-for="bom in equipment.paramBomList" :key="bom.name">
{{ bom.name }}
</li>
</ul>
<ul class="material-bom">
<li v-for="bom in equipment.materialBomList" :key="bom.name">
{{ bom.name }}
</li>
</ul>
</div>
</div>
</template>
<script>
export default {
name: 'CustomBomList',
components: {},
props: {
equipment: {
type: Object,
default: () => ({}),
},
active: {
type: Boolean,
default: false,
},
},
computed: {
bomListLength() {
return (
(this.equipment.paramBomList?.length || 0) +
(this.equipment.materialBomList?.length || 0)
);
},
},
data() {
return {
showList: false,
};
},
methods: {},
};
</script>
<style scoped lang="scss">
// .custom-bom-listwrapper {
// height: auto;
// transition: height .2s ease-in-out;
// }
.ct__equipment-name {
background: #0001;
padding: 8px;
border-radius: 4px;
cursor: pointer;
transition: all 0.3s;
&:hover {
background: #0002;
}
}
.hidden {
display: none;
}
ul,
li {
margin: 0;
padding: 0;
list-style: none;
}
ul {
display: flex;
flex-direction: column;
gap: 4px;
margin-top: 4px;
}
.material-bom > li,
.param-bom > li {
padding: 4px 24px;
background: #0001;
border-radius: 4px;
}
</style>

View File

@ -1,127 +0,0 @@
<!--
filename: CustomTransfer.vue
author: liubin
date: 2023-11-17 10:22:28
description:
-->
<template>
<div class="custom-transfer">
<CustomTransferBox
key="left"
class="left-ctb"
title="设备列表"
:candidate-list="candidateList"
:selected-list="selectedList"
@selected-list-change="handleChange" />
<div
class="btns"
style="
display: flex;
flex-direction: column;
gap: 12px;
justify-content: center;
align-items: center;
">
<el-button style="margin: 0">&gt;</el-button>
<el-button style="margin: 0" disabled>&lt;</el-button>
</div>
<CustomTransferBox
key="right"
class="right-ctb"
title="已选BOM"
:candidate-list="[]"
:selected-list="[]"
@selected-list-change="handleChange" />
</div>
</template>
<script>
import CustomTransferBox from './CustomTransferBox.vue';
export default {
name: 'CustomTransfer',
components: { CustomTransferBox },
props: ['sectionId', 'selectedBoms'],
data() {
return {
pageUrl: '',
list: [],
bomLoading: false,
queryParams: {
pageNo: 1,
pageSize: 100,
},
candidate: [],
selectedList: [],
};
},
computed: {},
methods: {
http(url, method, payload) {
return this.$axios({
url,
method,
params: method === 'get' ? payload : null,
data: method !== 'get' ? payload : null,
});
},
//
async getList() {
const res = await this.http.get(this.pageUrl, {
workshopSectionId: this.sectionId,
...this.queryParams,
});
if (res.code === 200) {
// this.list = res.data;
this.list = [
{ equipmentId: 1, equipmentName: '设备1' },
{ equipmentId: 2, equipmentName: '设备2' },
{ equipmentId: 3, equipmentName: '设备3' },
];
}
},
// bombom
async getMaterialBom(eqId) {},
async getParamBom(eqId) {},
async handleEquipmentClick(eqItem) {
this.bomLoading = true;
eqItem.children = [];
const { code: materialCode, data: materialData } =
await this.getMaterialBom(eqItem.equipmentId);
const { code: paramCode, data: paramData } = await this.getParamBom(
eqItem.equipmentId
);
if (materialCode == 0) {
eqItem.children.push(...materialData);
}
if (paramCode == 0) {
eqItem.children.push(...paramData);
}
this.bomLoading = false;
},
//
handleChange() {},
},
};
</script>
<style scoped lang="scss">
.custom-transfer {
background: '#cfc2';
display: flex;
}
.btns {
padding: 10px;
}
.left-ctb {
flex: 1;
}
.right-ctb {
flex: 1;
}
</style>

View File

@ -1,110 +0,0 @@
<!--
filename: CustomTrasferBox.vue
author: liubin
date: 2023-11-17 10:49:08
description:
-->
<template>
<div class="custom-transfer-box">
<div class="ctb-header">
<span>
{{ title }}
</span>
<span>
<b>{{ selectedList.length }}</b>
/
<b>{{ candidateList.length }}</b>
</span>
</div>
<div class="ctb-main">
<el-input
v-model="searchText"
placeholder="搜索"
style="margin-bottom: 12px; user-select: none">
<i slot="prefix" class="el-input__icon el-icon-search"></i>
</el-input>
<custom-tree :raw-data="candidateList" />
</div>
<div class="ctb-footer">
<pagination
v-show="1"
style="padding: 0"
:total="total"
:page.sync="queryParams.pageNo"
:limit.sync="queryParams.pageSize"
@pagination="getList" />
</div>
</div>
</template>
<script>
import CustomTree from './CustomTree.vue';
export default {
name: 'CustomTransferBox',
components: { CustomTree },
props: {
title: {
type: String,
default: '',
},
candidateList: {
type: Array,
default: () => [],
},
selectedList: {
type: Array,
default: () => [],
},
},
data() {
return {
queryParams: {
pageNo: 1,
pageSize: 10,
},
total: 0,
searchText: '',
};
},
computed: {},
methods: {
getList() {
this.$emit('get-list', this.queryParams);
},
},
};
</script>
<style scoped lang="scss">
.custom-transfer-box {
margin: 0 8px;
flex: 1;
border: 1px solid #ccc;
border-radius: 8px;
min-height: 240px;
display: flex;
flex-direction: column;
}
.ctb-header {
min-height: 12px;
padding: 12px;
border-bottom: 1px solid #ccc;
display: flex;
justify-content: space-between;
}
.ctb-main {
flex: 1;
padding: 12px;
}
.ctb-footer {
user-select: none;
min-height: 12px;
padding: 12px;
border-top: 1px solid #ccc;
}
</style>

View File

@ -1,53 +0,0 @@
<!--
filename: CustomTree.vue
author: liubin
date: 2023-11-17 13:53:16
description:
-->
<template>
<div class="custom-tree">
<div v-for="equipment in rawData" :key="eq.id">
<CustomBomList
@open="closeOthers"
:active="activeId == eq.id"
:equipment="equipment" />
</div>
</div>
</template>
<script>
import CustomBomList from './CustomBomList.vue';
export default {
name: 'CustomTree',
components: { CustomBomList },
props: {
rawData: {
type: Array,
default: () => [],
},
},
data() {
return {
showList: false,
activeId: null,
};
},
computed: {},
methods: {
closeOthers(id) {
this.activeId = id;
},
},
};
</script>
<style scoped lang="scss">
.custom-tree {
// background: #0001;
display: flex;
flex-direction: column;
gap: 8px;
}
</style>

View File

@ -68,13 +68,12 @@
@cancel="cancel"
@confirm="submitForm">
<!-- <CustomTransfer /> -->
<BomSelector :bom-list="bomList" />
<BomSelector :bom-list="bomList" v-model="selectedBoms" />
</base-dialog>
</section>
</template>
<script>
import CustomTransfer from './CustomTransfer.vue';
import BomSelector from './BomSelector.vue';
export default {
@ -107,6 +106,7 @@ export default {
pageSize: 10,
},
searchText: '',
selectedBoms: [],
};
},
watch: {
@ -124,49 +124,6 @@ export default {
},
},
methods: {
renderFn(h, option) {
console.log(option);
return <span>1</span>;
},
async getEqList() {
console.log('currentDet', this.currentDet);
const { sectionId } = this.currentDet;
const { code, data } = await this.http(
'base/core-equipment-bind-section/page',
'get',
{ workshopSectionId: sectionId, pageNo: 1, pageSize: 100 }
);
if (code == 0) {
console.log('workshopSectionId', data);
//
this.eqList = [
{ equipmentId: 1, equipmentName: '设备1' },
{ equipmentId: 2, equipmentName: '设备2' },
{ equipmentId: 3, equipmentName: '设备3' },
{ equipmentId: 4, equipmentName: '设备4' },
{ equipmentId: 5, equipmentName: '设备5' },
{ equipmentId: 6, equipmentName: '设备6' },
]; // ].map((item) => ({ label: item.equipmentName, key: item.equipmentId }));
// bombom
// bom bom
this.finalList = this.eqList.map((item) => {
item.sub = [];
// key: equipmentId-bomId
item.sub.push({
key: item.equipmentId + '-' + '101',
label: '参数bom1',
});
item.sub.push({
key: item.equipmentId + '-' + '201',
label: '物料bom1',
});
return item;
});
}
},
handleEmitFun() {},
handleTableBtnClick() {},
put(payload) {
@ -189,7 +146,28 @@ export default {
data: method !== 'get' ? payload : null,
});
},
submitForm() {},
async submitForm() {
console.log('selectedBoms', this.selectedBoms);
if (this.selectedBoms.length) {
const { code, data } = await this.http(
'/extend/process-flow-det-equipment/createList',
'post',
this.selectedBoms.map((item) => ({
...item,
flowDetId: this.currentDet.detId,
}))
);
if (code == 0) {
this.$message.success('操作成功');
this.getList(this.currentDet);
this.cancel();
} else {
this.$message.error('操作失败');
}
} else {
this.$message.info('请选择设备');
}
},
async getList({
detId,
detName,
@ -232,7 +210,6 @@ export default {
},
async handleAddEquipment() {
this.open = true;
await this.getEqList();
},
cancel() {
this.open = false;