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

<template>
    <div class="organ-trees">
        <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('house')"
                    maxlength="10"
                    suffix-icon="el-icon-search"
                    v-else
                ></el-input>
            </div>
            <div class="tree-style-box no-scrollbar" v-show="inputFocueHouse">
                <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 class="end-btn" @click="endBtn">
                    <el-button type="primary">确定</el-button>
                </div>
            </div>
        </div>
        <div>
            <el-input
                v-show="!showHouseTree"
                v-model="selectPeople"
                placeholder="选择的人员"
                maxlength="10"
                @focus="inputFocue()"
                suffix-icon="el-icon-search"
            ></el-input>
            <div class="tree-style-box no-scrollbar" v-show="inputFocuePeople">
                <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 class="end-btn">
                    <el-button type="primary" @click="endBtn">确定</el-button>
                </div>
            </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 {
            //输入框获得焦点
            inputFocueHouse: false,
            inputFocuePeople: false,
            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(val) {
            if (val) {
                this.inputFocueHouse = true;
            } else {
                this.inputFocuePeople = true;
            }
        },
        endBtn() {
            this.inputFocueHouse = false;
            this.inputFocuePeople = false;
        },
        // 过滤选中的社区下的房间
        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);
        },
        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-trees {
    box-sizing: border-box;
    float: left;
    z-index: 99999;
    &::before {
        clear: both;
    }
    .tree-style-box {
        // margin-top: 20px;
        // max-height: calc(100vh - 200px);
        // overflow: scroll;
    }
    .end-btn {
        position: absolute;
        right: 30px;
        top: 10px;
    }
    .el-tree {
        background: #fafcff;
        max-height: 50vh;
        overflow: scroll;
        padding: 10px;
    }
}
</style>