.env.dev

@@ -12,8 +12,8 @@ ENV = 'development'
 VUE_APP_TITLE = MES系统
 
 # 芋道管理系统/开发环境
-# VUE_APP_BASE_API = 'http://100.64.0.26:48082'
+VUE_APP_BASE_API = 'http://100.64.0.26:48082'
-VUE_APP_BASE_API = 'http://192.168.0.33:48082'
+# VUE_APP_BASE_API = 'http://192.168.0.33:48082'
 # VUE_APP_BASE_API = 'http://192.168.4.173:48080'
 # VUE_APP_BASE_API = 'http://192.168.2.173:48080'
 # VUE_APP_BASE_API = 'http://192.168.1.49:48080'

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

@@ -1,107 +0,0 @@
-<!-- 
-    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 + randomKey"
-			:label="item.name"
-			:disabled="item.disabled"
-			:checked="item.id === selected"
-			@change="(e) => handleChange(item, e)"
-			class="sl__body-item"></el-checkbox>
-	</div>
-</template>
-
-<script>
-export default {
-	name: 'BomSelection',
-	components: {},
-	// model: {
-	// 	prop: 'selected',
-	// 	event: 'update',
-	// },
-	props: {
-		// selected: {
-		// 	type: String,
-		// 	default: '',
-		// },
-		list: {
-			type: Array,
-			default: () => [],
-		},
-		equipmentId: {
-			type: String,
-			default: '',
-		},
-	},
-	data() {
-		return {
-			list__inner: [],
-			selected: null,
-            randomKey: Math.random()
-		};
-	},
-	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,
-			}));
-
-			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>
-
-<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>

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

@@ -12,45 +12,40 @@
 				<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>
 			</el-col>
 		</el-row>
 
-		<el-row style="border: 1px solid #ccc; display: flex">
+		<el-row style="border: 1px solid #ccc; display: flex;">
 			<el-col :span="8">
 				<div class="select-list">
 					<div class="sl__header" style="background: #f3f4fb; padding: 12px">
 						<span style="">可分配设备</span>
-						<span>
+						<span>1/24</span>
-							{{ selectedEquipments.length }}/{{ filteredBomList.length }}
-						</span>
 					</div>
-					<div class="sl__body">
+					<el-checkbox-group v-model="selectedEquipments" class="sl__body">
 						<el-checkbox
-							v-for="eq in filteredBomList"
+							v-for="n in 10"
-							:key="eq.id + refreshKey"
+							:key="n"
-							:label="eq.name"
+							:label="'设备' + n"
-							:checked="selectedEquipments.includes(eq.id)"
+							@change="() => handleChange(n)"
-							@change="(e) => handleEquipmentChange(eq, e)"
 							class="sl__body-item"></el-checkbox>
-					</div>
+					</el-checkbox-group>
 				</div>
 			</el-col>
-			<el-col :span="8" style="border-left: 1px solid #ccc">
+			<el-col :span="8" style="border-left: 1px solid #ccc;">
 				<div class="select-list">
 					<div class="sl__header" style="background: #f3f4fb; padding: 12px">
 						<span style="">物料BOM</span>
 					</div>
-
+					<el-checkbox-group v-model="selectedMBom" class="sl__body">
-					<BomSelection
+						<el-checkbox
-						ref="materialsBomList"
+							v-for="n in materialBomList"
-						key="materialsBomList"
+							:key="n"
-						:list="materialsBomList"
+							class="sl__body-item"></el-checkbox>
-						:equipment-id="materialsBomList.equipmentId"
+					</el-checkbox-group>
-						@change="handleMaterialBomChange" />
 				</div>
 			</el-col>
 			<el-col :span="8" style="border-left: 1px solid #ccc">
@@ -58,13 +53,12 @@
 					<div class="sl__header" style="background: #f3f4fb; padding: 12px">
 						<span style="">参数BOM</span>
 					</div>
-
+					<el-checkbox-group v-model="selectedPBom" class="sl__body">
-					<BomSelection
+						<el-checkbox
-						ref="valuesBomList"
+							v-for="n in paramBomList"
-						key="valuesBomList"
+							:key="n"
-						:list="valuesBomList"
+							class="sl__body-item"></el-checkbox>
-						:equipment-id="valuesBomList.equipmentId"
+					</el-checkbox-group>
-						@change="handleValueBomChange" />
 				</div>
 			</el-col>
 		</el-row>
@@ -72,121 +66,48 @@
 </template>
 ;
 <script>
-import BomSelection from './BomSelection.vue';
 export default {
 	name: 'BomSelector',
-	components: { BomSelection },
+	components: {},
-	model: {
+	props: {},
-		prop: 'value',
-		event: 'update',
-	},
-	props: {
-		bomList: {
-			type: Array,
-			default: () => [],
-		},
-		value: {
-			type: Array,
-			default: () => [],
-		},
-	},
 	data() {
 		return {
 			searchText: '',
 			selectedEquipments: [],
+			selectedMBom: [],
+			selectedPBom: [],
 			selected: [],
-			materialsBomList: [],
+            materialBomList: [],
-			valuesBomList: [],
+            paramBomList: [],
-			refreshKey: Math.random(),
 		};
 	},
 	watch: {
-		value: {
+		selected: {
 			handler(val) {
-				console.log('value', val);
+				console.log(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);
-			});
 		},
 	},
+	computed: {},
 	methods: {
-		handleEquipmentChange(eq, selected) {
+		handleChange(id) {
-			this.currentEquipment = eq.id;
+            this.materialBomList = [];
-			this.materialsBomList = eq.materialsBom;
+            this.paramBomList = [];
-			this.valuesBomList = eq.valuesBom;
-
-			if (selected) {
-				this.selectedEquipments.push(eq.id);
 			this.selected.push({
-					equipmentId: eq.id,
+				id: id,
-					equValueBomId: null,
-					equMaterialBomId: null,
 			});
-				this.$emit('update', this.selected);
+		},
+		handleBomChange(eqId, id, type) {
+			const record = this.selected.find((item) => item.id === eqId);
+			if (record) {
+				record[type == 'param' ? 'paramBomId' : 'materialBomId'] = id;
 			} 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);
-			}
-		},
-
-		handleMaterialBomChange(equipmentId, bomId, selected) {
-			const selectedItem = this.selected.find(
-				(item) => item.equipmentId == equipmentId
-			);
-			if (selected && !selectedItem) {
-				// 如果没找到这个
-				this.selectedEquipments.push(equipmentId);
 				this.selected.push({
-					equipmentId,
+					id: eqId,
-					equValueBomId: null,
+					[type == 'param' ? 'paramBomId' : 'materialBomId']: id,
-					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
-			);
-			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

@@ -0,0 +1,111 @@
+<!-- 
+    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

@@ -0,0 +1,127 @@
+<!-- 
+    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

@@ -0,0 +1,110 @@
+<!-- 
+    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

@@ -0,0 +1,53 @@
+<!-- 
+    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,12 +68,13 @@
 			@cancel="cancel"
 			@confirm="submitForm">
 			<!-- <CustomTransfer /> -->
-			<BomSelector :bom-list="bomList" v-model="selectedBoms" />
+			<BomSelector />
 		</base-dialog>
 	</section>
 </template>
 
 <script>
+import CustomTransfer from './CustomTransfer.vue';
 import BomSelector from './BomSelector.vue';
 
 export default {
@@ -89,7 +90,6 @@ export default {
 		return {
 			open: false,
 			eqList: [],
-			bomList: [],
 			finalList: [],
 			choosedEquipments: [],
 			searchBarFormConfig: [{ label: '工序下设备' }],
@@ -106,13 +106,11 @@ export default {
 				pageSize: 10,
 			},
 			searchText: '',
-			selectedBoms: [],
 		};
 	},
 	watch: {
 		currentDet: {
 			handler(val) {
-				console.log('currentDet', val);
 				if (val != null) {
 					this.getList(val);
 				} else {
@@ -124,6 +122,49 @@ 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) {
@@ -146,36 +187,8 @@ export default {
 				data: method !== 'get' ? payload : null,
 			});
 		},
-		async submitForm() {
+		submitForm() {},
-			console.log('selectedBoms', this.selectedBoms);
+		async getList({ detId, detName, detDesc, flowId, sectionName } = {}) {
-			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,
-			detDesc,
-			flowId,
-			sectionName,
-			sectionId,
-		} = {}) {
 			console.log('get list', detId, detName, flowId);
 			const { data, code } = await this.http(
 				'/extend/process-flow-det-equipment/page',
@@ -189,27 +202,10 @@ export default {
 				this.list.splice(0);
 				this.total = 0;
 			}
-
-			// 获取设备及bom列表
-			this.http(
-				'/extend/process-flow-det/getEquipmentDetBySectionId?id=' + sectionId,
-				'post'
-			).then(({ code, data }) => {
-				if (code == 0) {
-					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 {
-					this.bomList.splice(0);
-				}
-			});
 		},
 		async handleAddEquipment() {
 			this.open = true;
+			await this.getEqList();
 		},
 		cancel() {
 			this.open = false;