| 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\\SelectTree.vue?vue&type=style&index=0&lang=css&","dependencies":[{"path":"C:\\Users\\100zone\\Desktop\\baizong\\community\\SmartCommunity\\videoSurveillance\\src\\components\\common\\SelectTree.vue","mtime":1663828782922},{"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\\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\r\n.selecttree-box .el-input.el-input--suffix {\r\n cursor: pointer;\r\n overflow: hidden;\r\n}\r\n.el-input.el-input--suffix.rotate .el-input__suffix {\r\n transform: rotate(180deg);\r\n}\r\n.select-tree {\r\n max-height: 350px;\r\n overflow-y: scroll;\r\n}\r\n/* 菜单滚动条 */\r\n.select-tree::-webkit-scrollbar {\r\n z-index: 11;\r\n width: 6px;\r\n}\r\n.select-tree::-webkit-scrollbar-track,\r\n.select-tree::-webkit-scrollbar-corner {\r\n background: #fff;\r\n}\r\n.select-tree::-webkit-scrollbar-thumb {\r\n border-radius: 5px;\r\n width: 6px;\r\n background: #b4bccc;\r\n}\r\n.select-tree::-webkit-scrollbar-track-piece {\r\n background: #fff;\r\n width: 6px;\r\n}\r\n.select-tree-title {\r\n background: #f7fbff;\r\n height: 40px;\r\n line-height: 40px;\r\n padding-left: 8px;\r\n}\r\n",{"version":3,"sources":["SelectTree.vue"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiOA;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":"SelectTree.vue","sourceRoot":"src/components/common","sourcesContent":["<!-- 树状选择器 -->\r\n<template>\r\n <div>\r\n <el-popover\r\n v-if=\"!disabled\"\r\n class=\"selecttree-box\"\r\n ref=\"popover\"\r\n placement=\"bottom-start\"\r\n trigger=\"click\"\r\n @show=\"onShowPopover\"\r\n @hide=\"onHidePopover\"\r\n >\r\n <p class=\"select-tree-title\">{{ selectTreeTitle }}</p>\r\n <el-scrollbar>\r\n <el-tree\r\n ref=\"tree\"\r\n class=\"select-tree\"\r\n highlight-current\r\n :style=\"`min-width: ${treeWidth}`\"\r\n :data=\"data\"\r\n :props=\"props\"\r\n :expand-on-click-node=\"false\"\r\n :filter-node-method=\"filterNode\"\r\n :default-expand-all=\"true\"\r\n @node-click=\"onClickNode\"\r\n >\r\n </el-tree>\r\n </el-scrollbar>\r\n <el-input\r\n slot=\"reference\"\r\n ref=\"input\"\r\n v-model=\"labelModel\"\r\n clearable\r\n :style=\"`width: ${width}px`\"\r\n :class=\"{ rotate: showStatus }\"\r\n suffix-icon=\"el-icon-arrow-down\"\r\n :placeholder=\"placeholder\"\r\n >\r\n </el-input>\r\n </el-popover>\r\n <div v-else>\r\n <el-input type=\"text\" :disabled=\"disabled\" :value=\"labelModel\"></el-input>\r\n </div>\r\n </div>\r\n</template>\r\n\r\n<script>\r\nexport default {\r\n name: 'SelectTree',\r\n props: {\r\n // 接收绑定参数\r\n value: String,\r\n // 输入框宽度\r\n width: String,\r\n // selectTreeTitle\r\n selectTreeTitle: String,\r\n // 选项数据\r\n options: {\r\n type: Array,\r\n required: true\r\n },\r\n // 输入框占位符\r\n placeholder: {\r\n type: String,\r\n required: false,\r\n default: '请选择'\r\n },\r\n // 树节点配置选项\r\n props: {\r\n type: Object,\r\n required: false,\r\n default: () => ({\r\n parent: 'parentId',\r\n value: 'id',\r\n label: 'label',\r\n children: 'children'\r\n })\r\n },\r\n disabled: {\r\n type: Boolean,\r\n required: false,\r\n default: () => {\r\n return false;\r\n }\r\n }\r\n },\r\n // 设置绑定参数\r\n model: {\r\n prop: 'value',\r\n event: 'selected'\r\n },\r\n computed: {\r\n // 是否为树状结构数据\r\n dataType() {\r\n const jsonStr = JSON.stringify(this.options);\r\n return jsonStr.indexOf(this.props.children) !== -1;\r\n },\r\n // 若非树状结构，则转化为树状结构数据\r\n data() {\r\n return this.dataType ? this.options : this.switchTree();\r\n }\r\n },\r\n watch: {\r\n labelModel(val) {\r\n if (this.disabled) {\r\n return;\r\n } else {\r\n if (!val) {\r\n this.valueModel = '';\r\n }\r\n this.$refs.tree.filter(val);\r\n }\r\n },\r\n value(val) {\r\n this.labelModel = this.queryTree(this.data, val);\r\n }\r\n },\r\n data() {\r\n return {\r\n // 树状菜单显示状态\r\n showStatus: false,\r\n // 菜单宽度\r\n treeWidth: 'auto',\r\n // 输入框显示值\r\n labelModel: '',\r\n // 实际请求传值\r\n valueModel: ''\r\n };\r\n },\r\n created() {\r\n // 检测输入框原有值并显示对应 label\r\n if (this.value) {\r\n this.labelModel = this.queryTree(this.data, this.value);\r\n }\r\n if (this.disabled) {\r\n return;\r\n } else {\r\n // 获取输入框宽度同步至树状菜单宽度\r\n this.$nextTick(() => {\r\n this.treeWidth = `${(this.width || this.$refs.input.$refs.input.clientWidth) - 24}px`;\r\n });\r\n }\r\n },\r\n methods: {\r\n // 单击节点\r\n onClickNode(node) {\r\n this.labelModel = node[this.props.label];\r\n this.valueModel = node[this.props.value];\r\n this.onCloseTree();\r\n },\r\n // 偏平数组转化为树状层级结构\r\n switchTree() {\r\n return this.cleanChildren(this.buildTree(this.options, '0'));\r\n },\r\n // 隐藏树状菜单\r\n onCloseTree() {\r\n this.$refs.popover.showPopper = false;\r\n },\r\n // 显示时触发\r\n onShowPopover() {\r\n // if(this.disabled)\r\n this.showStatus = true;\r\n this.$refs.tree.filter(false);\r\n },\r\n // 隐藏时触发\r\n onHidePopover() {\r\n this.showStatus = false;\r\n this.$emit('selected', this.valueModel);\r\n this.$emit('selectedLable', this.labelModel);\r\n },\r\n // 树节点过滤方法\r\n filterNode(query, data) {\r\n if (!query) return true;\r\n return data[this.props.label].indexOf(query) !== -1;\r\n },\r\n // 搜索树状数据中的 ID\r\n queryTree(tree, id) {\r\n let stark = [];\r\n stark = stark.concat(tree);\r\n while (stark.length) {\r\n const temp = stark.shift();\r\n if (temp[this.props.children]) {\r\n stark = stark.concat(temp[this.props.children]);\r\n }\r\n if (temp[this.props.value] === id) {\r\n return temp[this.props.label];\r\n }\r\n }\r\n return '';\r\n },\r\n // 将一维的扁平数组转换为多层级对象\r\n buildTree(data, id = '0') {\r\n const fa = (parentId) => {\r\n const temp = [];\r\n for (let i = 0; i < data.length; i++) {\r\n const n = data[i];\r\n if (n[this.props.parent] === parentId) {\r\n n.children = fa(n.rowGuid);\r\n temp.push(n);\r\n }\r\n }\r\n return temp;\r\n };\r\n return fa(id);\r\n },\r\n // 清除空 children项\r\n cleanChildren(data) {\r\n const fa = (list) => {\r\n list.map((e) => {\r\n if (e.children.length) {\r\n fa(e.children);\r\n } else {\r\n delete e.children;\r\n }\r\n return e;\r\n });\r\n return list;\r\n };\r\n return fa(data);\r\n }\r\n }\r\n};\r\n</script>\r\n\r\n<style>\r\n.selecttree-box .el-input.el-input--suffix {\r\n cursor: pointer;\r\n overflow: hidden;\r\n}\r\n.el-input.el-input--suffix.rotate .el-input__suffix {\r\n transform: rotate(180deg);\r\n}\r\n.select-tree {\r\n max-height: 350px;\r\n overflow-y: scroll;\r\n}\r\n/* 菜单滚动条 */\r\n.select-tree::-webkit-scrollbar {\r\n z-index: 11;\r\n width: 6px;\r\n}\r\n.select-tree::-webkit-scrollbar-track,\r\n.select-tree::-webkit-scrollbar-corner {\r\n background: #fff;\r\n}\r\n.select-tree::-webkit-scrollbar-thumb {\r\n border-radius: 5px;\r\n width: 6px;\r\n background: #b4bccc;\r\n}\r\n.select-tree::-webkit-scrollbar-track-piece {\r\n background: #fff;\r\n width: 6px;\r\n}\r\n.select-tree-title {\r\n background: #f7fbff;\r\n height: 40px;\r\n line-height: 40px;\r\n padding-left: 8px;\r\n}\r\n</style>\r\n"]}]}
|
