update bom-selector v1

src/views/extend/processFlowView/components/BomSelection.vue

@@ -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>

src/views/extend/processFlowView/components/BomSelector.vue

@@ -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"
+							v-for="eq in filteredBomList"
-							:key="eq.id"
+							: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);
 		},
 	},
 };

src/views/extend/processFlowView/components/CustomBomList.vue

@@ -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-list—wrapper {
-//     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>

src/views/extend/processFlowView/components/CustomTransfer.vue

@@ -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' },
-				];
-			}
-		},
-		// 点击设备时获取对应的参数bom和物料bom
-		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>

src/views/extend/processFlowView/components/CustomTransferBox.vue

@@ -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>

src/views/extend/processFlowView/components/CustomTree.vue

@@ -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>

src/views/extend/processFlowView/components/ProcessBomList.vue

@@ -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 }));
-
-				// 获取参数bom和物料bom
-				// 需调用参数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;