168 lines
4.1 KiB
Vue
168 lines
4.1 KiB
Vue
<template>
|
|
<el-dialog v-dialogDrag title="隐藏元素" :visible.sync="dialogTableVisible" class="view_box" width="460px" :before-close="doClose" :modal-append-to-body="false" append-to-body :modal="false">
|
|
<el-row type="flex" justify="center" class="content_box">
|
|
<el-form label-width="80px" class="demo-ruleForm">
|
|
<el-form-item :label="$t('map.contentShows')">
|
|
<el-checkbox v-model="checkAll" :indeterminate="isIndeterminate" @change="handleCheckAllChange">全选</el-checkbox>
|
|
<el-row class="physical-view" type="flex" justify="center" style="width: 100%;">
|
|
<el-checkbox-group v-model="physicalLevelsSelect" @change="handleSelectPhysicalView">
|
|
<el-checkbox v-for="view in PhysicalViewTypeList" :key="view.code" :label="view.code">
|
|
{{ view.name }}</el-checkbox>
|
|
</el-checkbox-group>
|
|
</el-row>
|
|
</el-form-item>
|
|
</el-form>
|
|
</el-row>
|
|
</el-dialog>
|
|
</template>
|
|
|
|
<script>
|
|
import { ViewMode } from '@/scripts/ConstDic';
|
|
|
|
export default {
|
|
name: 'ConfigMap',
|
|
data () {
|
|
return {
|
|
ViewMode: ViewMode,
|
|
dialogTableVisible: false,
|
|
viewSelect: [ViewMode.LOGIC, ViewMode.PHYSICAL],
|
|
PhysicalViewTypeList: [
|
|
{ code: 'Section', name: this.$t('map.section') },
|
|
{ code: 'Signal', name: this.$t('map.signal') },
|
|
{ code: 'Switch', name: this.$t('map.switch') }
|
|
],
|
|
checkAll: false,
|
|
isIndeterminate: false,
|
|
physicalLevelsSelect: [] // 选中list
|
|
};
|
|
},
|
|
mounted() {
|
|
this.initPage();
|
|
},
|
|
methods: {
|
|
doShow() {
|
|
this.dialogTableVisible = true;
|
|
},
|
|
doClose() {
|
|
this.dialogTableVisible = false;
|
|
},
|
|
initPage() {
|
|
this.$Dictionary.physicalViewType().then(list => {
|
|
this.PhysicalViewTypeList = list;
|
|
});
|
|
},
|
|
handleSelectPhysicalView(handle) {
|
|
this.$emit('handleSelectPhysicalView', handle);
|
|
const checkedCount = handle.length;
|
|
this.checkAll = checkedCount === this.PhysicalViewTypeList.length;
|
|
this.isIndeterminate = checkedCount > 0 && checkedCount < this.PhysicalViewTypeList.length;
|
|
},
|
|
handleCheckAllChange(val) {
|
|
this.physicalLevelsSelect = val ? this.PhysicalViewTypeList.map(item => item.code) : [];
|
|
this.isIndeterminate = this.physicalLevelsSelect.length > 0 && this.physicalLevelsSelect.length < this.PhysicalViewTypeList.length;
|
|
this.$emit('handleSelectPhysicalView', this.physicalLevelsSelect);
|
|
}
|
|
}
|
|
};
|
|
|
|
</script>
|
|
|
|
<style rel="stylesheet/scss" lang="scss" scoped>
|
|
.demo-ruleForm{
|
|
width: 100%;
|
|
|
|
/deep/{
|
|
.el-form-item__label{
|
|
text-align: left;
|
|
height: 30px;
|
|
line-height: 30px;
|
|
}
|
|
.el-checkbox-group{
|
|
width: 100%;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
}
|
|
}
|
|
}
|
|
|
|
.view_box{
|
|
/deep/ {
|
|
.el-dialog{
|
|
position: absolute;
|
|
right: 26px;
|
|
left: auto;
|
|
top: 7px;
|
|
}
|
|
|
|
.el-dialog__body{
|
|
padding: 0 15px;
|
|
}
|
|
|
|
.el-dialog__header{
|
|
padding: 10px 20px
|
|
}
|
|
|
|
.el-checkbox{
|
|
margin-right: 10px;
|
|
width: 75px;
|
|
height: 30px;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.el-form-item{
|
|
margin-bottom: 6px;
|
|
}
|
|
|
|
// ckect框选中颜色
|
|
.content_box .el-checkbox__input.is-checked .el-checkbox__inner,
|
|
.content_box .el-checkbox__input.is-indeterminate .el-checkbox__inner {
|
|
background-color: #85bef9;
|
|
border-color: #85bef9;
|
|
}
|
|
// 文字选中颜色
|
|
.content_box .el-checkbox__input.is-checked+.el-checkbox__label {
|
|
color: #3c93ec;
|
|
}
|
|
}
|
|
}
|
|
.dialog-box{
|
|
background-color: #fff;
|
|
width: 460px;
|
|
box-shadow: 2px 2px 4px #c5c5c5;
|
|
position: absolute;
|
|
left: auto;
|
|
right: 24px;
|
|
top: 43px;
|
|
z-index: 10;
|
|
|
|
.title{
|
|
overflow: hidden;
|
|
border-bottom: 1px solid #ccc;
|
|
padding: 8px 15px;
|
|
.fl-title{
|
|
float: left;
|
|
}
|
|
.fr-title{
|
|
float: right;
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
|
|
.content_box{
|
|
padding: 15px;
|
|
padding-top: 4px;
|
|
}
|
|
|
|
}
|
|
|
|
.fade-enter-active, .fade-leave-active {
|
|
transition: opacity 0.5s;
|
|
}
|
|
|
|
.fade-enter, .fade-leave-to {
|
|
opacity: 0;
|
|
}
|
|
|
|
</style>
|