Project-Annex/operationSupport/src/components/common/buildingTree.vue

<template>
    <div class="organ-tree">
        <div>
            <el-input v-model="filterText" placeholder="请输入关键字" suffix-icon="el-icon-search"></el-input>
        </div>
        <div class="tree-style-box no-scrollbar" v-if="organList">
            <el-tree
                class="tree-style"
                :data="organList"
                ref="tree"
                node-key="id"
                :highlight-current="true"
                :props="defaultProps"
                :expand-on-click-node="false"
                @node-click="treeClick"
                @check="clickCheckTree"
                :default-expand-all="defaultExpandAllTree"
                :filter-node-method="filterNode"
                :show-checkbox="showCheckboxTree"
                :accordion="accordion"
            >
            </el-tree>
        </div>
    </div>
</template>

<script>
export default {
    name: 'buildingTree',
    props: {
        buildingType: { type: String, default: 'buildingType' },
        showCheckboxTree: {
            //显示多选框
            type: Boolean,
            default: false
        },
        defaultExpandAllTree: {
            //是否默认展开所有节点
            type: Boolean,
            default: true
        },
        accordion: {
            //房间展开手风琴
            type: Boolean,
            default: false
        },
        accordionPeople: {
            //人员展开手风琴
            type: Boolean,
            default: false
        }
    },
    data() {
        return {
            filterText: '',
            organList: [],
            defaultProps: {
                children: 'children',
                label: 'name'
            }
        };
    },
    watch: {
        filterText(val) {
            this.$refs.tree.filter(val);
        }
    },
    computed: {},
    methods: {
        dimension(arr) {
            arr.map((item, index) => {
                if (!!item.children && item.type !== 'unit' && item.type !== 'building') {
                    this.dimension(item.children);
                } else {
                    if (item.type === 'unit') {
                        item.name = this.CheckChinese(item.name, '单元');
                    } else if (item.type === 'building') {
                        item.name = this.CheckChinese(item.name, '楼栋');
                    }
                }
            });
        },
        getOrgTreeList() {
            this.$http
                .get('/sc-community/assets/tree/community/find', { buildingType: this.buildingType })
                .then(({ status, data, msg }) => {
                    if (status === 0 && data) {
                        this.organList = data;
                        this.dimension(data);
                        this.$nextTick().then(() => {
                            const firstNode = document.querySelector('.el-tree-node');
                            firstNode.click();
                        });
                    }
                });
        },
        filterNode(value, data) {
            if (!value) return true;
            return data.name.indexOf(value) !== -1;
        },
        filterNodePeople(value, data) {
            if (!value) return true;
            return data.label.indexOf(value) !== -1;
        },
        treeClick(e) {
            if (e.value == 0) return;
            let onData = '';
            let newValueIds = e.id.split('-');
            let thisE = this.$refs.tree.getNode(e);
            if (e.type == 'building') {
                onData = {
                    communityId: thisE.parent.data.value,
                    buildingId: e.value,
                    unitId: '',
                    roomId: ''
                };
                this.$emit('buildingInformation', onData);
            } else if (e.type == 'unit') {
                onData = {
                    communityId: thisE.parent.parent.data.value,
                    buildingId: thisE.parent.data.value,
                    unitId: e.value,
                    roomId: ''
                };
                this.$emit('buildingInformation', onData);
            } else if (e.type == 'room') {
                onData = {
                    communityId: newValueIds.length == 4 ? thisE.parent.parent.parent.data.value : thisE.parent.parent.data.value,
                    buildingId: newValueIds.length == 4 ? thisE.parent.parent.data.value : thisE.parent.data.value,
                    unitId: newValueIds.length == 4 ? thisE.parent.data.value : '',
                    roomId: e.value
                };
                this.$emit('buildingInformation', onData);
            } else {
                this.$emit('buildingInformation', e);
            }
        },
        CheckChinese(val, name) {
            var reg = new RegExp('[\\u4E00-\\u9FFF]+', 'g');
            let newVal = val;
            if (!reg.test(val)) {
                newVal = val + name;
            }
            return newVal;
        }
    },
    created() {
        this.getOrgTreeList();
    }
};
</script>

<style lang="scss" scoped>
.organ-tree {
    width: 260px;
    background: #ffffff;
    padding: 20px;
    box-sizing: border-box;
    float: left;
    height: 100%;
    overflow: auto;
    &::before {
        clear: both;
    }
    .tree-style-box {
        margin-top: 20px;
        max-height: calc(100vh - 200px);
        overflow: scroll;
    }
}
</style>