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',
    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').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 & (item.type !== 'unit')) {
                    this.dimension(item.children);
                } else {
                    if (item.name.indexOf('单元') === -1) {
                        item.name = 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 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 = thisObj.parent.parent.parent.data.name;
                unitPa.communityId = thisObj.parent.parent.parent.data.value;
                unitPa.buildingName = thisObj.parent.parent.data.name;
                unitPa.buildingId = thisObj.parent.parent.data.value;
                unitPa.unitName = thisObj.parent.data.name;
                unitPa.unitId = 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);
        }
    },
    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>