<template>
|
<div class="select-group params-dialog">
|
<div class="select-content">
|
<el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
|
<el-button class="btn-reverse" size="mini" type="primary" @click="reverse">反选</el-button>
|
<div style="margin: 15px 0;"></div>
|
<el-checkbox-group v-model="testList">
|
<el-checkbox v-for="idx in 9" :label="idx - 1" :key="'select_' + idx">{{ '组' + idx }}</el-checkbox>
|
</el-checkbox-group>
|
</div>
|
<div class="select-footer">
|
<three-btn @click="cancel">取消</three-btn>
|
<three-btn @click="ok">{{ 'start' == type ? '启动' : '停止' }}测试</three-btn>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
|
export default {
|
props: {
|
type: {
|
type: String,
|
default: 'start'
|
},
|
},
|
data() {
|
const list = [0, 1, 2, 3, 4, 5, 6, 7, 8];
|
return {
|
list,
|
isIndeterminate: false,
|
checkAll: false,
|
testList: [],
|
};
|
},
|
watch: {
|
},
|
methods: {
|
reverse() {
|
let list = this.testList;
|
let res = this.list.filter((v) => !list.some(vv => vv == v));
|
this.testList = res;
|
this.checkAll = res.length === 9;
|
this.isIndeterminate = res.length > 0 && res.length < 9;
|
},
|
handleCheckAllChange(val) {
|
this.testList = val ? this.list : [];
|
this.isIndeterminate = false;
|
},
|
handleCheckedChange(value) {
|
let checkedCount = value.length;
|
this.checkAll = checkedCount === 9;
|
this.isIndeterminate = checkedCount > 0 && checkedCount < 9;
|
},
|
ok() {
|
if (!this.testList.length) {
|
this.$message.error('请选择电池组');
|
return false;
|
}
|
this.$emit('ok', this.testList);
|
},
|
cancel() {
|
this.$emit('cancel');
|
}
|
},
|
computed: {
|
},
|
mounted() {
|
},
|
};
|
</script>
|
|
<style scoped>
|
|
.select-content {
|
padding: 0 10px 10px;
|
}
|
|
.select-content label {
|
color: #153953;
|
font-weight: bold;
|
margin-bottom: 0.8em;
|
}
|
|
.select-content /deep/ .el-checkbox__input.is-checked+.el-checkbox__label {
|
color: #409EFF;
|
}
|
|
.select-content /deep/ .el-checkbox__input.is-checked .el-checkbox__inner,
|
|
.select-content /deep/ .el-checkbox__input.is-indeterminate .el-checkbox__inner {
|
background-color: #409EFF;
|
border-color: #409EFF;
|
}
|
|
.select-footer {
|
text-align: right;
|
}
|
|
.select-footer .three-btn {
|
margin-left: 1em;
|
}
|
|
.btn-reverse {
|
margin-left: 1em;
|
}
|
</style>
|
