Project-Annex/operationSupport/src/views/deviceManagement/popups/poptreeSelect.vue

<template>
    <el-scrollbar class="el-scrollbar-byself thisColor" style="width: 100%">
        <el-tree
            :data="tenantsTree"
            show-checkbox
            node-key="value"
            :props="treedefaultProps"
            check-strictly
            :default-checked-keys="defaultcheckedkeys"
            ref="tenantstree"
            @check="checkChange"
        >
        </el-tree>
    </el-scrollbar>
</template>
<script>
export default {
    props: ['params'],
    data() {
        return {
            tenantsTree: [],
            treedefaultProps: {
                children: 'children',
                label: 'name'
            },
            defaultcheckedkeys: [],
            unitPa: {
                buildingId: '',
                buildingName: '',
                unitId: '',
                unitName: '',
                houseId: '',
                houseName: '',
                type: ''
            }
        };
    },
    computed: {},
    mounted() {},
    methods: {
        submit() {
            if (this.$refs.tenantstree.getCheckedNodes().length) {
                let thisRoom = this.$refs.tenantstree.getCheckedNodes()[0];
                let thisObj = this.$refs.tenantstree.getNode(thisRoom);
                this.unitPa.type = thisRoom.type;
                let newValueIds = thisRoom.id.split('-');
                if (thisRoom.type == 'room') {
                    this.unitPa.buildingName = newValueIds.length == 4 ? thisObj.parent.parent.data.name : thisObj.parent.data.name;
                    this.unitPa.buildingId = newValueIds.length == 4 ? thisObj.parent.parent.data.value : thisObj.parent.data.value;
                    this.unitPa.unitName = newValueIds.length == 4 ? thisObj.parent.data.name : '';
                    this.unitPa.unitId = newValueIds.length == 4 ? thisObj.parent.data.value : '';
                    this.unitPa.houseName = thisRoom.name;
                    this.unitPa.houseId = thisRoom.value;
                }
                this.params.callback && this.params.callback(this.unitPa);
                this.$emit('close');
            } else {
                this.$message.error('请选择房间或取消');
            }
        },
        dimension(arr) {
            arr.map((item, index) => {
                if (!!item.children) {
                    this.dimension(item.children);
                    if (item.type == 'unit') {
                        item.name = this.CheckChinese(item.name, '单元');
                    } else if (item.type == 'building') {
                        item.name = this.CheckChinese(item.name, '楼栋');
                    }
                }
            });
        },
        checkChange(data, checked) {
            if (checked) {
                if (this.$refs.tenantstree.getCheckedNodes().length > 1) {
                    this.$message({
                        message: '只能选择一个房间！',
                        type: 'error',
                        showClose: true
                    });
                    this.$refs.tenantstree.setChecked(data, false);
                }
            }
        },
        CheckChinese(val, name) {
            var reg = new RegExp('[\\u4E00-\\u9FFF]+', 'g');
            let newVal = val;
            if (!reg.test(val)) {
                newVal = val + name;
            }
            return newVal;
        },
        filterTreeData(trData) {
            trData.map((item, index) => {
                if (this.isNotEmpty(item.children)) {
                    item.disabled = true;
                    this.filterTreeData(item.children);
                } else {
                    item.disabled = false;
                }
            });
        },
        isNotEmpty(arr) {
            return arr && Array.isArray(arr) && arr.length > 0;
        }
    },
    created() {
        this.dimension(this.params.tenantsTree);
        this.filterTreeData(this.params.tenantsTree);
        this.tenantsTree = this.params.tenantsTree;
    }
};
</script>
<style lang="scss" scoped>
// .thisColor /deep/ .el-tree .is-current {
//     color: #56c6ff;
// }
</style>