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