Project-Annex/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"
                    placeholder="选择的房间"
                    @focus="inputFocue"
                    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
        },
        disabledHouse: {
            type: Boolean,
            default: true
        },
        disabledPeople: {
            type: Boolean,
            default: true
        },
        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: {
        selectHouse(val) {
            // this.$refs.tree.filter(val);
        },
        dataPeopleList(val) {
            console.log('====================================');
            console.log('dataPeopleList', val);
            console.log('====================================');
            this.$refs.tree.filter(val);
        }
    },
    computed: {},
    methods: {
        // 输入框获得焦点
        inputFocue() {},
        // 过滤选中的社区下的房间
        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();
            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();
            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 checkDatas = tree.getCheckedNodes();
            var a = [];
            for (let i in checkDatas) {
                if (checkDatas[i].children == null) {
                    a.push(checkDatas[i].id);
                }
            }
            let obj = {};
            obj.userList = a;
            obj.checkData = array;
            console.log('多选框返回选中人员的数据', JSON.stringify(checkDatas));
            // 输入框显示的人员
            this.selectPeople = nameArr.toString();
            // 选中的人员id
            this.$emit('selectPeople', obj);
        },
        // filterPeoPle(arr) {
        //     arr.map((item) => {
        //         if (item.children) {
        //             this.filterPeoPle(item.children);
        //         } else if (item.children == null) {
        //             item.id.concat(+',' + item.id);
        //         }
        //     });
        // },
        // 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;
        }
    },
    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>