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