SmartCommunity/operationSupport/src/components/common/organTree.vue

<template>
    <div class="organ-tree">
        <el-input v-model="filterText" placeholder="请输入关键字" suffix-icon="el-icon-search"></el-input>
        <div class="tree-style-box no-scrollbar">
            <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"
                default-expand-all
                :filter-node-method="filterNode"
            >
            </el-tree>
        </div>
    </div>
</template>

<script>
export default {
    name: 'organTree',
    props: ['buildingType'],
    data() {
        return {
            filterText: '',
            organList: [],
            defaultProps: {
                children: 'children',
                label: 'name'
            }
        };
    },
    watch: {
        filterText(val) {
            this.$refs.tree.filter(val);
        }
    },
    methods: {
        getOrgTreeList() {
            this.$http
                .get('/sc-community/assets/tree/community/find', { buildingType: this.buildingType })
                .then(({ status, data, msg }) => {
                    if (status === 0 && data) {
                        this.dimension(data);
                        this.organList = data;
                        this.$nextTick().then(() => {
                            const firstNode = document.querySelector('.el-tree-node');
                            firstNode.click();
                        });
                    }
                });
        },
        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, '楼栋');
                    }
                }
            });
        },
        filterNode(value, data) {
            if (!value) return true;
            return data.name.indexOf(value) !== -1;
        },
        treeClick(e) {
            let unitPa = {
                id: e.id,
                communityName: '',
                communityId: '',
                buildingName: '',
                buildingId: '',
                unitName: '',
                unitId: '',
                houseName: '',
                houseId: '',
                type: e.type
            };
            let newValueIds = e.id.split('-');
            let thisObj = this.$refs.tree.getNode(e);
            if (e.type == 'building') {
                unitPa.communityName = thisObj.parent.data.name;
                unitPa.communityId = thisObj.parent.data.value;
                unitPa.buildingName = e.name;
                unitPa.buildingId = e.value;
            } else if (e.type == 'unit') {
                unitPa.communityName = thisObj.parent.parent.data.name;
                unitPa.communityId = thisObj.parent.parent.data.value;
                unitPa.buildingName = thisObj.parent.data.name;
                unitPa.buildingId = thisObj.parent.data.value;
                unitPa.unitName = e.name;
                unitPa.unitId = e.value;
            } else if (e.type == 'room') {
                unitPa.communityName = newValueIds.length == 4 ? thisObj.parent.parent.parent.data.name : thisObj.parent.parent.data.name;
                unitPa.communityId = newValueIds.length == 4 ? thisObj.parent.parent.parent.data.value : thisObj.parent.parent.data.value;
                unitPa.buildingName = newValueIds.length == 4 ? thisObj.parent.parent.data.name : thisObj.parent.data.name;
                unitPa.buildingId = newValueIds.length == 4 ? thisObj.parent.parent.data.value : thisObj.parent.data.value;
                unitPa.unitName = newValueIds.length == 4 ? thisObj.parent.data.name : '';
                unitPa.unitId = newValueIds.length == 4 ? thisObj.parent.data.value : '';
                unitPa.houseName = e.name;
                unitPa.houseId = e.value;
            } else {
                unitPa.communityName = e.name;
                unitPa.communityId = e.value;
            }

            this.$emit('organId', unitPa);
        },
        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>