yudao-dev/src/views/extend/processFlowView/components/BomSelector.vue

<!-- 
    filename: BomSelector.vue
    author: liubin
    date: 2023-11-17 16:23:28
    description: 
-->

<template>
	<div class="bom-selector">
		<el-row>
			<el-col :span="8">
				<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>
			</el-col>
		</el-row>

		<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>{{ selectedEquipments.length }}/{{ bomList.length }}</span>
					</div>
					<el-checkbox-group v-model="selectedEquipments" class="sl__body">
						<el-checkbox
							v-for="eq in bomList"
							:key="eq.id"
							:label="`${eq.name} (${
								selectedMBom[currentEquipment].length +
								selectedPBom[currentEquipment].length
							} / 2)`"
							@change="(e) => handleEquipmentChange(eq, e)"
							class="sl__body-item"></el-checkbox>
					</el-checkbox-group>
				</div>
			</el-col>
			<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[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>
				</div>
			</el-col>
			<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="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>
				</div>
			</el-col>
		</el-row>
	</div>
</template>
;
<script>
export default {
	name: 'BomSelector',
	components: {},
	props: {
		bomList: {
			type: Array,
			default: () => [],
		},
	},
	data() {
		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;

			console.log('eq', selected, eq, this.selectedEquipments);
			if (selected) {
				this.selected.push({
					equipmentId: eq.id,
					equValueBomId: null,
					equMaterialBomId: null,
				});
			} else {
				// 清空选择状态
				this.selected = this.selected.filter(
					(item) => item.equipmentId !== eq.id
				);
				this.selectedMBom[eq.id] = [];
				this.selectedPBom[eq.id] = [];
			}
		},
		handleValueBomChange(vb, equipmentId, 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;
			});
		},
		handleMaterialBomChange(mb, equipmentId, selected) {
			debugger;
			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;
			});
		},
	},
};
</script>

<style scoped lang="scss">
.bom-selector {
	min-height: 200px;
}

.select-list {
}

.sl__body {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 6px;

	> .el-checkbox {
		margin: 0;
		padding: 3px 6px;
		border-radius: 4px;
		transition: background 0.3s ease-in-out;

		&:hover {
			background: #0001;
		}
	}
}

.sl__header {
	border-bottom: 1px solid #ccc;
}
</style>