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

@@ -0,0 +1,112 @@
+<!-- 
+    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="设备列表" />
+		<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" />
+	</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,
+			},
+		};
+	},
+	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;
+		},
+	},
+};
+</script>
+
+<style scoped lang="scss">
+.custom-transfer {
+	background: '#cfc2';
+	display: flex;
+}
+
+.btns {
+	border: 1px solid #ccc;
+	padding: 10px;
+}
+
+.left-ctb {
+	flex: 1;
+}
+
+.right-ctb {
+	flex: 1;
+}
+</style>

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

@@ -0,0 +1,78 @@
+<!-- 
+    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"></div>
+		<div class="ctb-footer"></div>
+	</div>
+</template>
+
+<script>
+export default {
+	name: 'CustomTransferBox',
+	components: {},
+	props: {
+		title: {
+			type: String,
+			default: '',
+		},
+		candidateList: {
+			type: Array,
+			default: () => [],
+		},
+		selectedList: {
+			type: Array,
+			default: () => [],
+		},
+	},
+	data() {
+		return {};
+	},
+	computed: {},
+	methods: {},
+};
+</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 {
+	min-height: 12px;
+	padding: 12px;
+	border-top: 1px solid #ccc;
+}
+</style>

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

@@ -66,19 +66,17 @@
 			@close="cancel"
 			@cancel="cancel"
 			@confirm="submitForm">
-			<el-transfer v-model="choosedEquipments" :data="eqList">
+			<CustomTransfer />
-				<!-- <span slot-scope="{ option }">
-					{{ option.key }} - {{ option.label }}
-				</span> -->
-			</el-transfer>
 		</base-dialog>
 	</section>
 </template>
 
 <script>
+import CustomTransfer from './CustomTransfer.vue';
+
 export default {
 	name: 'ProcessBom',
-	components: {},
+	components: { CustomTransfer },
 	props: {
 		currentDet: {
 			type: Object,
@@ -104,7 +102,7 @@ export default {
 				pageNo: 1,
 				pageSize: 10,
 			},
-			searchText: ''
+			searchText: '',
 		};
 	},
 	watch: {