| 1 |
- {"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"]}]}
|
