@@ -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, | pageNo: 1, | ||||
pageSize: 100, | 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: [], | selectedList: [], | ||||
}; | }; | ||||
}, | }, | ||||
@@ -63,20 +63,23 @@ | |||||
<base-dialog | <base-dialog | ||||
dialogTitle="选择设备" | dialogTitle="选择设备" | ||||
:dialogVisible="open" | :dialogVisible="open" | ||||
width="45%" | |||||
@close="cancel" | @close="cancel" | ||||
@cancel="cancel" | @cancel="cancel" | ||||
@confirm="submitForm"> | @confirm="submitForm"> | ||||
<CustomTransfer /> | |||||
<!-- <CustomTransfer /> --> | |||||
<BomSelector /> | |||||
</base-dialog> | </base-dialog> | ||||
</section> | </section> | ||||
</template> | </template> | ||||
<script> | <script> | ||||
import CustomTransfer from './CustomTransfer.vue'; | import CustomTransfer from './CustomTransfer.vue'; | ||||
import BomSelector from './BomSelector.vue'; | |||||
export default { | export default { | ||||
name: 'ProcessBom', | name: 'ProcessBom', | ||||
components: { CustomTransfer }, | |||||
components: { BomSelector }, | |||||
props: { | props: { | ||||
currentDet: { | currentDet: { | ||||
type: Object, | type: Object, | ||||
@@ -26,6 +26,14 @@ export class Candidate { | |||||
get selected() { | get selected() { | ||||
return this.children.filter((child) => child.selected).length; | 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 { | export class CandidateList { | ||||