124 lines
2.6 KiB
Vue
124 lines
2.6 KiB
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">
|
||
|
|
<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>
|