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