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

<template>
    <div class="organ-tree">
        <div v-show="showHouseTree">
            <div>
                <el-input v-model="filterText" v-if="!showCheckboxTree" placeholder="请输入关键字" suffix-icon="el-icon-search"></el-input>
                <el-input
                    v-model="selectHouse"
                    disabled
                    placeholder="选择的房间"
                    maxlength="10"
                    suffix-icon="el-icon-search"
                    v-else
                ></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"
                    @check="clickCheckTree"
                    :default-expand-all="defaultExpandAllTree"
                    :filter-node-method="filterNode"
                    :show-checkbox="showCheckboxTree"
                    :accordion="accordion"
                    :prevDetailData="prevDetailData"
                    :default-expanded-keys="defaultSelectAll"
                    :check-on-click-node="true"
                >
                </el-tree>
            </div>
        </div>
        <div v-show="!showHouseTree" v-if="dataPeopleList">
            <el-input v-model="selectPeople" disabled placeholder="选择的人员" maxlength="10" suffix-icon="el-icon-search"></el-input>
            <div class="tree-style-box no-scrollbar">
                <el-tree
                    class="tree-style"
                    :data="dataPeopleList"
                    ref="treePeople"
                    node-key="id"
                    :highlight-current="true"
                    :props="defaultPropsPeople"
                    :expand-on-click-node="false"
                    @check="clickCheckTreePeople"
                    :default-expand-all="defaultExpandAllTree"
                    :filter-node-method="filterNodePeople"
                    :show-checkbox="showCheckboxTree"
                    :accordion="accordionPeople"
                    :selectAll="selectAll"
                    :prevDetailData="prevDetailData"
                    :check-on-click-node="true"
                >
                </el-tree>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'treeHouse',
    props: {
        buildingType: { type: String, default: 'buildingType' },
        showCheckboxTree: {
            //显示多选框
            type: Boolean,
            default: false
        },
        defaultExpandAllTree: {
            //是否默认展开所有节点
            type: Boolean,
            default: true
        },
        showHouseTree: {
            //显示房间树
            type: Boolean,
            default: true
        },

        accordion: {
            //房间展开手风琴
            type: Boolean,
            default: false
        },
        accordionPeople: {
            //人员展开手风琴
            type: Boolean,
            default: false
        },
        prevDetailData: {
            type: Array,
            default() {
                return [];
            }
        }
    },
    data() {
        return {
            filterText: '',
            selectHouse: '',
            selectPeople: '',
            organList: [],
            dataPeopleList: [],
            defaultSelectAll: [],
            defaultProps: {
                children: 'children',
                label: 'name'
            },
            defaultPropsPeople: {
                children: 'children',
                label: 'label'
            }
        };
    },
    watch: {
        filterText(val) {
            this.$refs.tree.filter(val);
        },
        dataPeopleList(val) {
            console.log('====================================');
            console.log('dataPeopleList', val);
            console.log('====================================');
            this.$refs.tree.filter(val);
        }
    },
    computed: {},
    methods: {
        // 过滤选中的社区下的房间
        filterhouse(val, datas) {
            let array = datas;
            let data;
            for (let index = 0; index < array.length; index++) {
                const element = array[index];
                if (element.id == val && element.children) {
                    data = element.children;
                }
            }
            this.$nextTick(() => {
                this.organList = data;
                this.defaultSelectAll = data;
                this.selectAllHouse();
                this.clickCheckTree();
                // this.$refs.tree.setCheckedNodes('C1栋');
            });
            console.log('   this.$refs.tree.setCheckedNodes(this.organList);', this.organList);
        },

        // 选中所有房间
        selectAllHouse() {
            this.$nextTick(() => {
                this.$refs.tree.setCheckedNodes(this.organList);
                this.clickCheckTree();
            });
        },
        // 选中指定房间
        selectHouseOr() {
            this.$nextTick(() => {
                this.$refs.tree.setCheckedKeys([]);
                this.clickCheckTree();
            });
        },
        // 选中所有人员
        selectAllPeople() {
            this.$nextTick(() => {
                this.$refs.treePeople.setCheckedNodes(this.dataPeopleList);
                this.clickCheckTreePeople();
            });
        },
        // 选中指定人员
        selectPeopleOr() {
            this.$nextTick(() => {
                this.$refs.treePeople.setCheckedKeys([]);
                this.clickCheckTreePeople();
            });
        },
        // 获取人员
        getPeopleList() {
            this.$http.get('/sc-user-center/user/findUserList').then(({ status, data, msg }) => {
                if (status === 0) {
                    this.dataPeopleList = data;
                    this.$emit('dataPeople', data);
                } else {
                    this.$message(warning, '获取人员失败,请稍后重试');
                }
                console.log('获取人员', data);
            });
        },
        getSelect(data) {
            var str = [];
            const getStr = function (list) {
                list.forEach(function (row) {
                    if (row.children) {
                        getStr(row.children);
                    } else {
                        str.push(row.value);
                    }
                });
            };
            getStr(data);
            return str;
            console.log('getStr', str);
        },
        // 多选框返回选中房间的数据
        clickCheckTree(val) {
            let tree = this.$refs.tree;
            let nameArr = [];
            let array = tree.getCheckedNodes();
            let arrays = tree.getCheckedKeys();
            for (let index = 0; index < array.length; index++) {
                const element = array[index];
                nameArr.push(element.name);
                if (Array.isArray(element) && element.length > 0) {
                    nameArr.push(element.name);
                }
            }
            // 输入框显示的房间
            this.selectHouse = nameArr;
            var arr = [];
            array.forEach(function (item) {
                if (item.type === 'room' && Number(item.value) !== String) {
                    arr.push(Number(item.value));
                }
            });
            let obj = {};
            obj.userList = arr;
            obj.checkData = array;
            console.log('多选框返回选中房间的数据', array);
            // 选中的房间id
            this.$emit('selectData', obj);
        },
        // 多选框返回选中人员的数据
        clickCheckTreePeople(val) {
            let nameArr = [];
            let tree = this.$refs.treePeople;
            let array = tree.getCheckedNodes();
            let arrays = tree.getCheckedKeys();
            for (let index = 0; index < array.length; index++) {
                const element = array[index];
                nameArr.push(element.label);
                if (Array.isArray(element) && element.length > 0) {
                    nameArr.push(element.label);
                }
            }
            let obj = {};
            obj.userList = arrays;
            obj.checkData = array;
            let checkDatas = tree.getCheckedNodes();
            // let data = tree.getCheckedKeys();
            // [
            //     {
            //         id: 1,
            //         label: 'xxx',
            //         parentId: 0,
            //         children: [
            //             {
            //                 id: 2,
            //                 label: 'xxx',
            //                 parentId: 1
            //             }
            //         ]
            //     }
            // ];
            // array.map((t) => {});

            console.log('多选框返回选中人员的数据', JSON.stringify(checkDatas));

            console.log('====================================');
            // 输入框显示的人员
            this.selectPeople = nameArr.toString();
            // 选中的人员id
            this.$emit('selectPeople', obj);
        },
        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, '楼栋');
                    }
                }
            });
        },
        CheckChinese(val, name) {
            var reg = new RegExp('[\\u4E00-\\u9FFF]+', 'g');
            let newVal = val;
            if (!reg.test(val)) {
                newVal = val + name;
            }
            return newVal;
        },
        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);
        //     }
        // }
    },
    created() {
        // this.getOrgTreeList();
        this.getPeopleList();
    }
};
</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>