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

<template>
    <div class="organ-trees-view">
        <div v-if="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-house-style-box" v-show="inputFocueHouse" :style="{ 'z-index': inputFocueHouse ? index : 0 }">
                <GeminiScrollbar class="my-scroll-bar" :autoshow="true">
                    <el-tree
                        :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>
                </GeminiScrollbar>
                <div class="end-btn">
                    <el-button type="plain" @click="endBtn" size="mini">取消</el-button>
                    <el-button type="primary" @click="endBtn" size="mini">确定</el-button>
                </div>
            </div>
        </div>
        <div>
            <el-input
                v-show="!showHouseTree"
                v-model="selectPeople"
                placeholder="选择的人员"
                maxlength="10"
                @focus="inputFocues()"
                suffix-icon="el-icon-search"
            ></el-input>
            <div class="transfer-style-box" v-show="inputFocuePeople" :style="{ 'z-index': inputFocuePeople ? index : 0 }">
                <GeminiScrollbar class="my-scroll-bar" :autoshow="true">
                    <el-tree
                        :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>
                </GeminiScrollbar>
                <div class="end-btn">
                    <el-button type="plain" @click="endBtn" size="mini">取消</el-button>
                    <el-button type="primary" @click="endBtn" size="mini">确定</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,
            index: 99,
            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) {
            this.index++;
            console.log('输入框获得焦点', val);
            this.inputFocueHouse = true;
            this.inputFocuePeople = false;
        },
        inputFocues() {
            this.index++;
            console.log('输入框获得焦点inputFocues');
            this.inputFocueHouse = false;
            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.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();
            });
        },
        // 获取房间
        getOrgTreeList() {
            this.houseNames = [];
            this.$http
                .get('/sc-community/assets/tree/community/find', { buildingType: this.buildingType })
                .then(({ status, data, msg }) => {
                    if (status === 0 && data) {
                        this.organList = data;
                    }
                });
        },
        // 获取人员
        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>
/deep/ .gm-scroll-view {
    width: 568px !important;
    height: 510px !important;
    // /deep/ .gm-scrollbar.-horizontal .thumb {
    //     height: 0;
    // }
}
.organ-trees-view {
    box-sizing: border-box;
    float: left;
    &::before {
        clear: both;
    }
    .tree-house-style-box {
        position: absolute;
        top: 38px;
        left: 0%;
        background: #fff;
        width: 568px;
        height: 510px;
        z-index: 999;
        padding: 10px 10px 50px 10px;
        z-index: 99;
        box-shadow: 0px 2px 10px 0px #e6ebf4;
    }
    .transfer-style-box {
        position: absolute;
        top: 68px;
        left: 0%;
        background: #fff;
        width: 568px;
        height: 480px;
        z-index: 999;
        padding: 10px 10px 50px 10px;
        z-index: 99;
        box-shadow: 0px 2px 10px 0px #e6ebf4;
    }
    .end-btn {
        position: absolute;
        right: 30px;
        bottom: 10px;
    }
}
</style>