yudao-dev/src/views/quality/base/basicData/qualityInspectionBoxPermissions/BomSelection.vue
‘937886381’ 5098555a5e 修改bug
2024-02-01 16:48:58 +08:00

125 lines
2.3 KiB
Vue

<!--
* @Author: zhp
* @Date: 2024-01-30 10:54:51
* @LastEditTime: 2024-02-01 14:46:19
* @LastEditors: zhp
* @Description:
-->
<template>
<div>
<div class="bom-selection" v-for="item in list__inner" :key="item.id + randomKey">
<el-checkbox :label="item.name" :checked="item.choose" @change="(e) => handleChange(item, e)"
class="sl__body-item"></el-checkbox>
</div>
</div>
</template>
<script>
export default {
name: 'BomSelection',
components: {},
// model: {
// prop: 'selected',
// event: 'update',
// },
props: {
currentSelect: {
type: Array,
default: ()=>[],
},
list: {
type: Array,
default: () => [],
},
equipmentId: {
type: String,
default: '',
},
},
data() {
return {
list__inner: [],
selected: null,
randomKey: Math.random(),
};
},
watch: {
list: {
handler(val) {
console.log(val)
if (val) {
this.list__inner = val.map((item) => ({ ...item, choose: false }));
}
},
deep: true,
immediate: true,
},
currentSelect: {
handler(val) {
console.log(val)
// val: string
this.selected = val;
this.randomKey = Math.random();
// 更新选中状态
if (val) {
this.list__inner.forEach((item,index) => {
val.forEach((ele) => {
console.log(ele)
if (item.id == ele.id) item.choose = true;console.log(ele.id)
// else item.choose = false;
})
});
}
},
immediate: true,
},
},
methods: {
handleChange(bomItem, selected) {
this.list__inner = this.list__inner.map((item) => ({
...item,
disabled: selected ? item.id !== bomItem.id : false,
}));
if (selected) this.selected = null;
this.$emit('change', this.equipmentId, bomItem.id, selected);
this.$nextTick(() => {
this.$forceUpdate();
});
},
clearSelected() {
console.log('clearSelected');
this.selected = null;
this.randomKey = Math.random();
// this.$emit('update', null);
// this.$nextTick(() => {
// this.$forceUpdate();
// });
},
},
};
</script>
<style scoped lang="scss">
.bom-selection {
display: flex;
flex-direction: column;
gap: 6px;
padding: 6px;
}
.sl__body-item {
margin: 0;
padding: 3px 6px;
border-radius: 4px;
transition: background 0.3s ease-in-out;
&:hover {
background: #0001;
}
}
</style>