<!-- 异常复选框组件
|
自动获取异常表中不同异常类型
|
将选中的多个异常以数组形式返回给父组件
|
-->
|
<script>
|
// import axiosInstance from 'axiosInstance';
|
import axiosInstanceInstance from '../utils/request.js'
|
export default {
|
emits:['submitExceptionType'],
|
data() {
|
return {
|
//异常表所有的异常类型
|
exceptionType: [],
|
//已勾选的异常
|
checkedList: []
|
};
|
},
|
methods: {
|
//获取不同的异常类型
|
getShopName() {
|
axiosInstanceInstance.get('/fume/exceptiontype').then(result => {
|
this.exceptionType = result.data.data
|
|
});
|
}
|
//根据异常个数渲染checkbox
|
},
|
mounted(){
|
this.getShopName()
|
setTimeout(() => {
|
console.log(this.exceptionType);
|
}, 1000);
|
}
|
};
|
</script>
|
|
<template>
|
|
<div class="container">
|
<span class="text">异常类型：</span>
|
<div class="exception-type">
|
<el-checkbox-group v-model="checkedList" :change="$emit('submitExceptionType',checkedList)">
|
<el-checkbox :label="item.exceptionType" v-for="(item,index) in exceptionType" :key="index">
|
<template #default>
|
<span v-if="item.exceptionType== '0'">油烟超标</span>
|
<span v-else-if="item.exceptionType == '1'">供电异常</span>
|
<span v-else-if="item.exceptionType == '2'">掉线</span>
|
</template>
|
</el-checkbox>
|
</el-checkbox-group>
|
</div>
|
</div>
|
</template>
|
|
<style scoped>
|
/* 不能对 */
|
.container {
|
display: flex;
|
/* flex-wrap: wrap; */
|
}
|
.text {
|
margin-top: 5px;
|
margin-right: 10px;
|
margin-left: 20px;
|
font-weight: bolder;
|
white-space: nowrap;
|
}
|
.exception-type {
|
white-space: nowrap;
|
}
|
</style>
|
