rt-sim-training-client/src/views/newMap/newMapdraft/configMap.vue

<template>
  <el-dialog v-dialogDrag title="隐藏元素" :visible.sync="dialogTableVisible" class="view_box" width="460px" :before-close="doClose" :modal-append-to-body="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>