projects/mes-test #133
							
								
								
									
										123
									
								
								src/views/extend/processFlowView/components/BomSelector.vue
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										123
									
								
								src/views/extend/processFlowView/components/BomSelector.vue
									
									
									
									
									
										Normal file
									
								
							@@ -0,0 +1,123 @@
 | 
			
		||||
<!-- 
 | 
			
		||||
    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">
 | 
			
		||||
			<el-col :span="8">
 | 
			
		||||
				<div class="select-list">
 | 
			
		||||
					<div class="sl__header" style="background: #f3f4fb; padding: 12px">
 | 
			
		||||
						<span style="">可分配设备</span>
 | 
			
		||||
						<span>1/24</span>
 | 
			
		||||
					</div>
 | 
			
		||||
					<el-checkbox-group v-model="selectedEquipments" class="sl__body">
 | 
			
		||||
						<el-checkbox
 | 
			
		||||
							v-for="n in 10"
 | 
			
		||||
							:key="n"
 | 
			
		||||
							:label="'设备' + n"
 | 
			
		||||
                            :true-label="n"
 | 
			
		||||
							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" class="sl__body">
 | 
			
		||||
						<el-checkbox
 | 
			
		||||
							v-for="n in 10"
 | 
			
		||||
							:key="n"
 | 
			
		||||
							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" class="sl__body">
 | 
			
		||||
						<el-checkbox
 | 
			
		||||
							v-for="n in 10"
 | 
			
		||||
							:key="n"
 | 
			
		||||
							class="sl__body-item"></el-checkbox>
 | 
			
		||||
					</el-checkbox-group>
 | 
			
		||||
				</div>
 | 
			
		||||
			</el-col>
 | 
			
		||||
		</el-row>
 | 
			
		||||
	</div>
 | 
			
		||||
</template>
 | 
			
		||||
 | 
			
		||||
<script>
 | 
			
		||||
export default {
 | 
			
		||||
	name: 'BomSelector',
 | 
			
		||||
	components: {},
 | 
			
		||||
	props: {},
 | 
			
		||||
	data() {
 | 
			
		||||
		return {
 | 
			
		||||
			searchText: '',
 | 
			
		||||
			selectedEquipments: [],
 | 
			
		||||
			selectedMBom: [],
 | 
			
		||||
			selectedPBom: [],
 | 
			
		||||
		};
 | 
			
		||||
	},
 | 
			
		||||
    watch: {
 | 
			
		||||
        selectedEquipments: {
 | 
			
		||||
            handler(val) {
 | 
			
		||||
                console.log(val);
 | 
			
		||||
            },
 | 
			
		||||
            deep: true,
 | 
			
		||||
        },
 | 
			
		||||
    },
 | 
			
		||||
	computed: {},
 | 
			
		||||
	methods: {},
 | 
			
		||||
};
 | 
			
		||||
</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>
 | 
			
		||||
@@ -51,65 +51,7 @@ export default {
 | 
			
		||||
				pageNo: 1,
 | 
			
		||||
				pageSize: 100,
 | 
			
		||||
			},
 | 
			
		||||
			candidate: {
 | 
			
		||||
				total: 0,
 | 
			
		||||
				tree: [
 | 
			
		||||
					{
 | 
			
		||||
						id: 1,
 | 
			
		||||
						name: '设备1',
 | 
			
		||||
						paramBomList: [
 | 
			
		||||
							{ name: '参数BOM1', type: 'param', id: 1 },
 | 
			
		||||
							{ name: '参数BOM2', type: 'param', id: 2 },
 | 
			
		||||
							{ name: '参数BOM3', type: 'param', id: 3 },
 | 
			
		||||
							{ name: '参数BOM4', type: 'param', id: 4 },
 | 
			
		||||
							{ name: '参数BOM5', type: 'param', id: 5 },
 | 
			
		||||
						],
 | 
			
		||||
						materialBomList: [
 | 
			
		||||
							{ name: '物料BOM1', type: 'material', id: 1 },
 | 
			
		||||
							{ name: '物料BOM2', type: 'material', id: 2 },
 | 
			
		||||
							{ name: '物料BOM3', type: 'material', id: 3 },
 | 
			
		||||
							{ name: '物料BOM4', type: 'material', id: 4 },
 | 
			
		||||
							{ name: '物料BOM5', type: 'material', id: 5 },
 | 
			
		||||
						],
 | 
			
		||||
					},
 | 
			
		||||
					{
 | 
			
		||||
						id: 2,
 | 
			
		||||
						name: '设备2',
 | 
			
		||||
						paramBomList: [
 | 
			
		||||
							{ name: '参数BOM1', type: 'param', id: 1 },
 | 
			
		||||
							{ name: '参数BOM2', type: 'param', id: 2 },
 | 
			
		||||
							{ name: '参数BOM3', type: 'param', id: 3 },
 | 
			
		||||
							{ name: '参数BOM4', type: 'param', id: 4 },
 | 
			
		||||
							{ name: '参数BOM5', type: 'param', id: 5 },
 | 
			
		||||
						],
 | 
			
		||||
						materialBomList: [
 | 
			
		||||
							{ name: '物料BOM1', type: 'material', id: 1 },
 | 
			
		||||
							{ name: '物料BOM2', type: 'material', id: 2 },
 | 
			
		||||
							{ name: '物料BOM3', type: 'material', id: 3 },
 | 
			
		||||
							{ name: '物料BOM4', type: 'material', id: 4 },
 | 
			
		||||
							{ name: '物料BOM5', type: 'material', id: 5 },
 | 
			
		||||
						],
 | 
			
		||||
					},
 | 
			
		||||
					{
 | 
			
		||||
						id: 3,
 | 
			
		||||
						name: '设备3',
 | 
			
		||||
						paramBomList: [
 | 
			
		||||
							{ name: '参数BOM1', type: 'param', id: 1 },
 | 
			
		||||
							{ name: '参数BOM2', type: 'param', id: 2 },
 | 
			
		||||
							{ name: '参数BOM3', type: 'param', id: 3 },
 | 
			
		||||
							{ name: '参数BOM4', type: 'param', id: 4 },
 | 
			
		||||
							{ name: '参数BOM5', type: 'param', id: 5 },
 | 
			
		||||
						],
 | 
			
		||||
						materialBomList: [
 | 
			
		||||
							{ name: '物料BOM1', type: 'material', id: 1 },
 | 
			
		||||
							{ name: '物料BOM2', type: 'material', id: 2 },
 | 
			
		||||
							{ name: '物料BOM3', type: 'material', id: 3 },
 | 
			
		||||
							{ name: '物料BOM4', type: 'material', id: 4 },
 | 
			
		||||
							{ name: '物料BOM5', type: 'material', id: 5 },
 | 
			
		||||
						],
 | 
			
		||||
					},
 | 
			
		||||
				],
 | 
			
		||||
			},
 | 
			
		||||
			candidate: [],
 | 
			
		||||
			selectedList: [],
 | 
			
		||||
		};
 | 
			
		||||
	},
 | 
			
		||||
 
 | 
			
		||||
@@ -63,20 +63,23 @@
 | 
			
		||||
		<base-dialog
 | 
			
		||||
			dialogTitle="选择设备"
 | 
			
		||||
			:dialogVisible="open"
 | 
			
		||||
			width="45%"
 | 
			
		||||
			@close="cancel"
 | 
			
		||||
			@cancel="cancel"
 | 
			
		||||
			@confirm="submitForm">
 | 
			
		||||
			<CustomTransfer />
 | 
			
		||||
			<!-- <CustomTransfer /> -->
 | 
			
		||||
			<BomSelector />
 | 
			
		||||
		</base-dialog>
 | 
			
		||||
	</section>
 | 
			
		||||
</template>
 | 
			
		||||
 | 
			
		||||
<script>
 | 
			
		||||
import CustomTransfer from './CustomTransfer.vue';
 | 
			
		||||
import BomSelector from './BomSelector.vue';
 | 
			
		||||
 | 
			
		||||
export default {
 | 
			
		||||
	name: 'ProcessBom',
 | 
			
		||||
	components: { CustomTransfer },
 | 
			
		||||
	components: { BomSelector },
 | 
			
		||||
	props: {
 | 
			
		||||
		currentDet: {
 | 
			
		||||
			type: Object,
 | 
			
		||||
 
 | 
			
		||||
@@ -26,6 +26,14 @@ export class Candidate {
 | 
			
		||||
	get selected() {
 | 
			
		||||
		return this.children.filter((child) => child.selected).length;
 | 
			
		||||
	}
 | 
			
		||||
 | 
			
		||||
	get paramBom() {
 | 
			
		||||
		return this.children.filter((child) => child.type === 'param');
 | 
			
		||||
	}
 | 
			
		||||
 | 
			
		||||
	get materialBom() {
 | 
			
		||||
		return this.children.filter((child) => child.type === 'material');
 | 
			
		||||
	}
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
export class CandidateList {
 | 
			
		||||
 
 | 
			
		||||
		Reference in New Issue
	
	Block a user