| 1 |
- {"remainingRequest":"C:\\Users\\100zone\\Desktop\\baizong\\community\\SmartCommunity\\videoSurveillance\\node_modules\\babel-loader\\lib\\index.js!C:\\Users\\100zone\\Desktop\\baizong\\community\\SmartCommunity\\videoSurveillance\\node_modules\\cache-loader\\dist\\cjs.js??ref--0-0!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=script&lang=js&","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\\babel.config.js","mtime":1663828782900},{"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\\babel-loader\\lib\\index.js","mtime":315532800000},{"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//\nexport default {\n name: 'SelectTree',\n props: {\n // 接收绑定参数\n value: String,\n // 输入框宽度\n width: String,\n // selectTreeTitle\n selectTreeTitle: String,\n // 选项数据\n options: {\n type: Array,\n required: true\n },\n // 输入框占位符\n placeholder: {\n type: String,\n required: false,\n default: '请选择'\n },\n // 树节点配置选项\n props: {\n type: Object,\n required: false,\n default: function _default() {\n return {\n parent: 'parentId',\n value: 'id',\n label: 'label',\n children: 'children'\n };\n }\n },\n disabled: {\n type: Boolean,\n required: false,\n default: function _default() {\n return false;\n }\n }\n },\n // 设置绑定参数\n model: {\n prop: 'value',\n event: 'selected'\n },\n computed: {\n // 是否为树状结构数据\n dataType: function dataType() {\n var jsonStr = JSON.stringify(this.options);\n return jsonStr.indexOf(this.props.children) !== -1;\n },\n // 若非树状结构，则转化为树状结构数据\n data: function data() {\n return this.dataType ? this.options : this.switchTree();\n }\n },\n watch: {\n labelModel: function labelModel(val) {\n if (this.disabled) {\n return;\n } else {\n if (!val) {\n this.valueModel = '';\n }\n\n this.$refs.tree.filter(val);\n }\n },\n value: function value(val) {\n this.labelModel = this.queryTree(this.data, val);\n }\n },\n data: function data() {\n return {\n // 树状菜单显示状态\n showStatus: false,\n // 菜单宽度\n treeWidth: 'auto',\n // 输入框显示值\n labelModel: '',\n // 实际请求传值\n valueModel: ''\n };\n },\n created: function created() {\n var _this = this;\n\n // 检测输入框原有值并显示对应 label\n if (this.value) {\n this.labelModel = this.queryTree(this.data, this.value);\n }\n\n if (this.disabled) {\n return;\n } else {\n // 获取输入框宽度同步至树状菜单宽度\n this.$nextTick(function () {\n _this.treeWidth = \"\".concat((_this.width || _this.$refs.input.$refs.input.clientWidth) - 24, \"px\");\n });\n }\n },\n methods: {\n // 单击节点\n onClickNode: function onClickNode(node) {\n this.labelModel = node[this.props.label];\n this.valueModel = node[this.props.value];\n this.onCloseTree();\n },\n // 偏平数组转化为树状层级结构\n switchTree: function switchTree() {\n return this.cleanChildren(this.buildTree(this.options, '0'));\n },\n // 隐藏树状菜单\n onCloseTree: function onCloseTree() {\n this.$refs.popover.showPopper = false;\n },\n // 显示时触发\n onShowPopover: function onShowPopover() {\n // if(this.disabled)\n this.showStatus = true;\n this.$refs.tree.filter(false);\n },\n // 隐藏时触发\n onHidePopover: function onHidePopover() {\n this.showStatus = false;\n this.$emit('selected', this.valueModel);\n this.$emit('selectedLable', this.labelModel);\n },\n // 树节点过滤方法\n filterNode: function filterNode(query, data) {\n if (!query) return true;\n return data[this.props.label].indexOf(query) !== -1;\n },\n // 搜索树状数据中的 ID\n queryTree: function queryTree(tree, id) {\n var stark = [];\n stark = stark.concat(tree);\n\n while (stark.length) {\n var temp = stark.shift();\n\n if (temp[this.props.children]) {\n stark = stark.concat(temp[this.props.children]);\n }\n\n if (temp[this.props.value] === id) {\n return temp[this.props.label];\n }\n }\n\n return '';\n },\n // 将一维的扁平数组转换为多层级对象\n buildTree: function buildTree(data) {\n var _this2 = this;\n\n var id = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '0';\n\n var fa = function fa(parentId) {\n var temp = [];\n\n for (var i = 0; i < data.length; i++) {\n var n = data[i];\n\n if (n[_this2.props.parent] === parentId) {\n n.children = fa(n.rowGuid);\n temp.push(n);\n }\n }\n\n return temp;\n };\n\n return fa(id);\n },\n // 清除空 children项\n cleanChildren: function cleanChildren(data) {\n var fa = function fa(list) {\n list.map(function (e) {\n if (e.children.length) {\n fa(e.children);\n } else {\n delete e.children;\n }\n\n return e;\n });\n return list;\n };\n\n return fa(data);\n }\n }\n};",{"version":3,"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+CA;AACAA,oBADA;AAEAC;AACA;AACAC,iBAFA;AAGA;AACAC,iBAJA;AAKA;AACAC,2BANA;AAOA;AACAC;AACAC,iBADA;AAEAC;AAFA,KARA;AAYA;AACAC;AACAF,kBADA;AAEAC,qBAFA;AAGAE;AAHA,KAbA;AAkBA;AACAR;AACAK,kBADA;AAEAC,qBAFA;AAGAE;AAAA;AACAC,4BADA;AAEAR,qBAFA;AAGAS,wBAHA;AAIAC;AAJA;AAAA;AAHA,KAnBA;AA6BAC;AACAP,mBADA;AAEAC,qBAFA;AAGAE;AACA;AACA;AALA;AA7BA,GAFA;AAuCA;AACAK;AACAC,iBADA;AAEAC;AAFA,GAxCA;AA4CAC;AACA;AACAC,YAFA,sBAEA;AACA;AACA;AACA,KALA;AAMA;AACAC,QAPA,kBAOA;AACA;AACA;AATA,GA5CA;AAuDAC;AACAC,cADA,sBACAC,GADA,EACA;AACA;AACA;AACA,OAFA,MAEA;AACA;AACA;AACA;;AACA;AACA;AACA,KAVA;AAWApB,SAXA,iBAWAoB,GAXA,EAWA;AACA;AACA;AAbA,GAvDA;AAsEAH,MAtEA,kBAsEA;AACA;AACA;AACAI,uBAFA;AAGA;AACAC,uBAJA;AAKA;AACAH,oBANA;AAOA;AACAI;AARA;AAUA,GAjFA;AAkFAC,SAlFA,qBAkFA;AAAA;;AACA;AACA;AACA;AACA;;AACA;AACA;AACA,KAFA,MAEA;AACA;AACA;AACA;AACA,OAFA;AAGA;AACA,GA/FA;AAgGAC;AACA;AACAC,eAFA,uBAEAC,IAFA,EAEA;AACA;AACA;AACA;AACA,KANA;AAOA;AACAC,cARA,wBAQA;AACA;AACA,KAVA;AAWA;AACAC,eAZA,yBAYA;AACA;AACA,KAdA;AAeA;AACAC,iBAhBA,2BAgBA;AACA;AACA;AACA;AACA,KApBA;AAqBA;AACAC,iBAtBA,2BAsBA;AACA;AACA;AACA;AACA,KA1BA;AA2BA;AACAC,cA5BA,sBA4BAC,KA5BA,EA4BAhB,IA5BA,EA4BA;AACA;AACA;AACA,KA/BA;AAgCA;AACAiB,aAjCA,qBAiCAC,IAjCA,EAiCAC,EAjCA,EAiCA;AACA;AACAC;;AACA;AACA;;AACA;AACAA;AACA;;AACA;AACA;AACA;AACA;;AACA;AACA,KA9CA;AA+CA;AACAC,aAhDA,qBAgDArB,IAhDA,EAgDA;AAAA;;AAAA;;AACA;AACA;;AACA;AACA;;AACA;AACAsB;AACAC;AACA;AACA;;AACA;AACA,OAVA;;AAWA;AACA,KA7DA;AA8DA;AACAC,iBA/DA,yBA+DAxB,IA/DA,EA+DA;AACA;AACAyB;AACA;AACAC;AACA,WAFA,MAEA;AACA;AACA;;AACA;AACA,SAPA;AAQA;AACA,OAVA;;AAWA;AACA;AA5EA;AAhGA","names":["name","props","value","width","selectTreeTitle","options","type","required","placeholder","default","parent","label","children","disabled","model","prop","event","computed","dataType","data","watch","labelModel","val","showStatus","treeWidth","valueModel","created","methods","onClickNode","node","switchTree","onCloseTree","onShowPopover","onHidePopover","filterNode","query","queryTree","tree","id","stark","buildTree","n","temp","cleanChildren","list","fa"],"sourceRoot":"src/components/common","sources":["SelectTree.vue"],"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"]}]}
|
