{"remainingRequest":"C:\\Users\\100zone\\Desktop\\baizong\\community\\SmartCommunity\\videoSurveillance\\node_modules\\vue-loader\\lib\\index.js??vue-loader-options!C:\\Users\\100zone\\Desktop\\baizong\\community\\SmartCommunity\\videoSurveillance\\node_modules\\style-vw-loader\\index.js??ref--0-2!C:\\Users\\100zone\\Desktop\\baizong\\community\\SmartCommunity\\videoSurveillance\\src\\components\\common\\treeHouse.vue?vue&type=style&index=0&id=4e583fe4&lang=scss&scoped=true&","dependencies":[{"path":"C:\\Users\\100zone\\Desktop\\baizong\\community\\SmartCommunity\\videoSurveillance\\src\\components\\common\\treeHouse.vue","mtime":1663828782927},{"path":"C:\\Users\\100zone\\Desktop\\baizong\\community\\SmartCommunity\\videoSurveillance\\node_modules\\css-loader\\index.js","mtime":499162500000},{"path":"C:\\Users\\100zone\\Desktop\\baizong\\community\\SmartCommunity\\videoSurveillance\\node_modules\\vue-loader\\lib\\loaders\\stylePostLoader.js","mtime":499162500000},{"path":"C:\\Users\\100zone\\Desktop\\baizong\\community\\SmartCommunity\\videoSurveillance\\node_modules\\postcss-loader\\src\\index.js","mtime":499162500000},{"path":"C:\\Users\\100zone\\Desktop\\baizong\\community\\SmartCommunity\\videoSurveillance\\node_modules\\sass-loader\\dist\\cjs.js","mtime":499162500000},{"path":"C:\\Users\\100zone\\Desktop\\baizong\\community\\SmartCommunity\\videoSurveillance\\node_modules\\cache-loader\\dist\\cjs.js","mtime":499162500000},{"path":"C:\\Users\\100zone\\Desktop\\baizong\\community\\SmartCommunity\\videoSurveillance\\node_modules\\vue-loader\\lib\\index.js","mtime":499162500000},{"path":"C:\\Users\\100zone\\Desktop\\baizong\\community\\SmartCommunity\\videoSurveillance\\node_modules\\style-vw-loader\\index.js","mtime":1540864632000}],"contextDependencies":[],"result":["\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\r\n/deep/ .gm-scroll-view {\r\n    width: 568px !important;\r\n    height: 510px !important;\r\n    // /deep/ .gm-scrollbar.-horizontal .thumb {\r\n    //     height: 0;\r\n    // }\r\n}\r\n.organ-trees-view {\r\n    box-sizing: border-box;\r\n    float: left;\r\n    &::before {\r\n        clear: both;\r\n    }\r\n    .tree-house-style-box {\r\n        position: absolute;\r\n        top: 38px;\r\n        left: 0%;\r\n        background: #fff;\r\n        width: 568px;\r\n        height: 510px;\r\n        z-index: 999;\r\n        padding: 10px 10px 50px 10px;\r\n        z-index: 99;\r\n        box-shadow: 0px 2px 10px 0px #e6ebf4;\r\n    }\r\n    .transfer-style-box {\r\n        position: absolute;\r\n        top: 68px;\r\n        left: 0%;\r\n        background: #fff;\r\n        width: 568px;\r\n        height: 480px;\r\n        z-index: 999;\r\n        padding: 10px 10px 50px 10px;\r\n        z-index: 99;\r\n        box-shadow: 0px 2px 10px 0px #e6ebf4;\r\n    }\r\n    .end-btn {\r\n        position: absolute;\r\n        right: 30px;\r\n        bottom: 10px;\r\n    }\r\n}\r\n",{"version":3,"sources":["treeHouse.vue"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2UA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA","file":"treeHouse.vue","sourceRoot":"src/components/common","sourcesContent":["<template>\r\n    <div class=\"organ-trees-view\">\r\n        <div v-if=\"showHouseTree\">\r\n            <div>\r\n                <el-input v-model=\"filterText\" v-if=\"!showCheckboxTree\" placeholder=\"请输入关键字\" suffix-icon=\"el-icon-search\"></el-input>\r\n                <el-input\r\n                    v-model=\"selectHouse\"\r\n                    placeholder=\"选择的房间\"\r\n                    @focus=\"inputFocue('house')\"\r\n                    maxlength=\"10\"\r\n                    suffix-icon=\"el-icon-search\"\r\n                    v-else\r\n                ></el-input>\r\n            </div>\r\n            <div class=\"tree-house-style-box\" v-show=\"inputFocueHouse\" :style=\"{ 'z-index': inputFocueHouse ? index : 0 }\">\r\n                <GeminiScrollbar class=\"my-scroll-bar\" :autoshow=\"true\">\r\n                    <el-tree\r\n                        :data=\"organList\"\r\n                        ref=\"tree\"\r\n                        node-key=\"id\"\r\n                        :highlight-current=\"true\"\r\n                        :props=\"defaultProps\"\r\n                        :expand-on-click-node=\"false\"\r\n                        @check=\"clickCheckTree\"\r\n                        :default-expand-all=\"defaultExpandAllTree\"\r\n                        :filter-node-method=\"filterNode\"\r\n                        :show-checkbox=\"showCheckboxTree\"\r\n                        :accordion=\"accordion\"\r\n                        :prevDetailData=\"prevDetailData\"\r\n                        :default-expanded-keys=\"defaultSelectAll\"\r\n                        :check-on-click-node=\"true\"\r\n                    >\r\n                    </el-tree>\r\n                </GeminiScrollbar>\r\n                <div class=\"end-btn\">\r\n                    <el-button type=\"plain\" @click=\"endBtn\" size=\"mini\">取消</el-button>\r\n                    <el-button type=\"primary\" @click=\"endBtn\" size=\"mini\">确定</el-button>\r\n                </div>\r\n            </div>\r\n        </div>\r\n        <div>\r\n            <el-input\r\n                v-show=\"!showHouseTree\"\r\n                v-model=\"selectPeople\"\r\n                placeholder=\"选择的人员\"\r\n                maxlength=\"10\"\r\n                @focus=\"inputFocues()\"\r\n                suffix-icon=\"el-icon-search\"\r\n            ></el-input>\r\n            <div class=\"transfer-style-box\" v-show=\"inputFocuePeople\" :style=\"{ 'z-index': inputFocuePeople ? index : 0 }\">\r\n                <GeminiScrollbar class=\"my-scroll-bar\" :autoshow=\"true\">\r\n                    <el-tree\r\n                        :data=\"dataPeopleList\"\r\n                        ref=\"treePeople\"\r\n                        node-key=\"id\"\r\n                        :highlight-current=\"true\"\r\n                        :props=\"defaultPropsPeople\"\r\n                        :expand-on-click-node=\"false\"\r\n                        @check=\"clickCheckTreePeople\"\r\n                        :default-expand-all=\"defaultExpandAllTree\"\r\n                        :filter-node-method=\"filterNodePeople\"\r\n                        :show-checkbox=\"showCheckboxTree\"\r\n                        :accordion=\"accordionPeople\"\r\n                        :selectAll=\"selectAll\"\r\n                        :prevDetailData=\"prevDetailData\"\r\n                        :check-on-click-node=\"true\"\r\n                    >\r\n                    </el-tree>\r\n                </GeminiScrollbar>\r\n                <div class=\"end-btn\">\r\n                    <el-button type=\"plain\" @click=\"endBtn\" size=\"mini\">取消</el-button>\r\n                    <el-button type=\"primary\" @click=\"endBtn\" size=\"mini\">确定</el-button>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</template>\r\n\r\n<script>\r\nexport default {\r\n    name: 'treeHouse',\r\n    props: {\r\n        buildingType: { type: String, default: 'buildingType' },\r\n        showCheckboxTree: {\r\n            //显示多选框\r\n            type: Boolean,\r\n            default: false\r\n        },\r\n        disabledHouse: {\r\n            type: Boolean,\r\n            default: true\r\n        },\r\n        disabledPeople: {\r\n            type: Boolean,\r\n            default: true\r\n        },\r\n        defaultExpandAllTree: {\r\n            //是否默认展开所有节点\r\n            type: Boolean,\r\n            default: true\r\n        },\r\n        showHouseTree: {\r\n            //显示房间树\r\n            type: Boolean,\r\n            default: true\r\n        },\r\n\r\n        accordion: {\r\n            //房间展开手风琴\r\n            type: Boolean,\r\n            default: false\r\n        },\r\n        accordionPeople: {\r\n            //人员展开手风琴\r\n            type: Boolean,\r\n            default: false\r\n        },\r\n        prevDetailData: {\r\n            type: Array,\r\n            default() {\r\n                return [];\r\n            }\r\n        }\r\n    },\r\n    data() {\r\n        return {\r\n            //输入框获得焦点\r\n            inputFocueHouse: false,\r\n            inputFocuePeople: false,\r\n            index: 99,\r\n            filterText: '',\r\n            selectHouse: '',\r\n            selectPeople: '',\r\n            organList: [],\r\n            dataPeopleList: [],\r\n            defaultSelectAll: [],\r\n            defaultProps: {\r\n                children: 'children',\r\n                label: 'name'\r\n            },\r\n            defaultPropsPeople: {\r\n                children: 'children',\r\n                label: 'label'\r\n            }\r\n        };\r\n    },\r\n    watch: {\r\n        selectHouse(val) {\r\n            // this.$refs.tree.filter(val);\r\n        }\r\n        // dataPeopleList(val) {\r\n        //     console.log('====================================');\r\n        //     console.log('dataPeopleList', val);\r\n        //     console.log('====================================');\r\n        //     this.$refs.tree.filter(val);\r\n        // }\r\n    },\r\n    computed: {},\r\n    methods: {\r\n        // 输入框获得焦点\r\n        inputFocue(val) {\r\n            this.index++;\r\n            console.log('输入框获得焦点', val);\r\n            this.inputFocueHouse = true;\r\n            this.inputFocuePeople = false;\r\n        },\r\n        inputFocues() {\r\n            this.index++;\r\n            console.log('输入框获得焦点inputFocues');\r\n            this.inputFocueHouse = false;\r\n            this.inputFocuePeople = true;\r\n        },\r\n        endBtn() {\r\n            this.inputFocueHouse = false;\r\n            this.inputFocuePeople = false;\r\n        },\r\n        // 过滤选中的社区下的房间\r\n        filterhouse(val, datas) {\r\n            let array = datas;\r\n            let data;\r\n            for (let index = 0; index < array.length; index++) {\r\n                const element = array[index];\r\n                if (element.id == val && element.children) {\r\n                    data = element.children;\r\n                }\r\n            }\r\n            this.organList = data;\r\n            // this.defaultSelectAll = data;\r\n            // this.selectAllHouse();\r\n            // this.clickCheckTree();\r\n            console.log('this.$refs.tree.setCheckedNodes(this.organList);', this.organList);\r\n        },\r\n\r\n        // 选中所有房间\r\n        selectAllHouse() {\r\n            this.$nextTick(() => {\r\n                this.$refs.tree.setCheckedNodes(this.organList);\r\n                this.clickCheckTree();\r\n            });\r\n        },\r\n        // 选中指定房间\r\n        selectHouseOr() {\r\n            this.$nextTick(() => {\r\n                this.$refs.tree.setCheckedKeys([]);\r\n                this.clickCheckTree();\r\n            });\r\n        },\r\n        // 选中所有人员\r\n        selectAllPeople() {\r\n            this.$nextTick(() => {\r\n                this.$refs.treePeople.setCheckedNodes(this.dataPeopleList);\r\n                this.clickCheckTreePeople();\r\n            });\r\n        },\r\n        // 选中指定人员\r\n        selectPeopleOr() {\r\n            this.$nextTick(() => {\r\n                this.$refs.treePeople.setCheckedKeys([]);\r\n                this.clickCheckTreePeople();\r\n            });\r\n        },\r\n        // 获取房间\r\n        getOrgTreeList() {\r\n            this.houseNames = [];\r\n            this.$http\r\n                .get('/sc-community/assets/tree/community/find', { buildingType: this.buildingType })\r\n                .then(({ status, data, msg }) => {\r\n                    if (status === 0 && data) {\r\n                        this.organList = data;\r\n                    }\r\n                });\r\n        },\r\n        // 获取人员\r\n        getPeopleList() {\r\n            this.$http.get('/sc-user-center/user/findUserList').then(({ status, data, msg }) => {\r\n                if (status === 0) {\r\n                    this.dataPeopleList = data;\r\n                    this.$emit('dataPeople', data);\r\n                } else {\r\n                    this.$message(warning, msg);\r\n                }\r\n                // console.log('获取人员', data);\r\n            });\r\n        },\r\n        getSelect(data) {\r\n            var str = [];\r\n            const getStr = function (list) {\r\n                list.forEach(function (row) {\r\n                    if (row.children) {\r\n                        getStr(row.children);\r\n                    } else {\r\n                        str.push(row.value);\r\n                    }\r\n                });\r\n            };\r\n            getStr(data);\r\n            return str;\r\n            console.log('getStr', str);\r\n        },\r\n        // 多选框返回选中房间的数据\r\n        clickCheckTree(val) {\r\n            let tree = this.$refs.tree;\r\n            let nameArr = [];\r\n            let array = tree.getCheckedNodes();\r\n            for (let index = 0; index < array.length; index++) {\r\n                const element = array[index];\r\n                nameArr.push(element.name);\r\n                if (Array.isArray(element) && element.length > 0) {\r\n                    nameArr.push(element.name);\r\n                }\r\n            }\r\n            // 输入框显示的房间\r\n            this.selectHouse = nameArr;\r\n            var arr = [];\r\n            array.forEach(function (item) {\r\n                if (item.type === 'room' && Number(item.value) !== String) {\r\n                    arr.push(Number(item.value));\r\n                }\r\n            });\r\n            let obj = {};\r\n            obj.userList = arr;\r\n            obj.checkData = array;\r\n            // console.log('多选框返回选中房间的数据', array);\r\n            // 选中的房间id\r\n            this.$emit('selectData', obj);\r\n        },\r\n        // 多选框返回选中人员的数据\r\n        clickCheckTreePeople(val) {\r\n            let nameArr = [];\r\n            let tree = this.$refs.treePeople;\r\n            let array = tree.getCheckedNodes();\r\n            for (let index = 0; index < array.length; index++) {\r\n                const element = array[index];\r\n                nameArr.push(element.label);\r\n                if (Array.isArray(element) && element.length > 0) {\r\n                    nameArr.push(element.label);\r\n                }\r\n            }\r\n            let checkDatas = tree.getCheckedNodes();\r\n            var a = [];\r\n            for (let i in checkDatas) {\r\n                if (checkDatas[i].children == null) {\r\n                    a.push(checkDatas[i].id);\r\n                }\r\n            }\r\n            let obj = {};\r\n            obj.userList = a;\r\n            obj.checkData = array;\r\n            // console.log('多选框返回选中人员的数据', JSON.stringify(checkDatas));\r\n            // 输入框显示的人员\r\n            this.selectPeople = nameArr.toString();\r\n            // 选中的人员id\r\n            this.$emit('selectPeople', obj);\r\n        },\r\n        filterNode(value, data) {\r\n            if (!value) return true;\r\n            return data.name.indexOf(value) !== -1;\r\n        },\r\n        filterNodePeople(value, data) {\r\n            if (!value) return true;\r\n            return data.label.indexOf(value) !== -1;\r\n        }\r\n    },\r\n    created() {\r\n        this.getOrgTreeList();\r\n        this.getPeopleList();\r\n    }\r\n};\r\n</script>\r\n\r\n<style lang=\"scss\" scoped>\r\n/deep/ .gm-scroll-view {\r\n    width: 568px !important;\r\n    height: 510px !important;\r\n    // /deep/ .gm-scrollbar.-horizontal .thumb {\r\n    //     height: 0;\r\n    // }\r\n}\r\n.organ-trees-view {\r\n    box-sizing: border-box;\r\n    float: left;\r\n    &::before {\r\n        clear: both;\r\n    }\r\n    .tree-house-style-box {\r\n        position: absolute;\r\n        top: 38px;\r\n        left: 0%;\r\n        background: #fff;\r\n        width: 568px;\r\n        height: 510px;\r\n        z-index: 999;\r\n        padding: 10px 10px 50px 10px;\r\n        z-index: 99;\r\n        box-shadow: 0px 2px 10px 0px #e6ebf4;\r\n    }\r\n    .transfer-style-box {\r\n        position: absolute;\r\n        top: 68px;\r\n        left: 0%;\r\n        background: #fff;\r\n        width: 568px;\r\n        height: 480px;\r\n        z-index: 999;\r\n        padding: 10px 10px 50px 10px;\r\n        z-index: 99;\r\n        box-shadow: 0px 2px 10px 0px #e6ebf4;\r\n    }\r\n    .end-btn {\r\n        position: absolute;\r\n        right: 30px;\r\n        bottom: 10px;\r\n    }\r\n}\r\n</style>\r\n"]}]}