From 5794f76fe09dce82f828a4f89c541442b4e20435 Mon Sep 17 00:00:00 2001
From: toesbieya <1647775459@qq.com>
Date: Tue, 9 Jun 2020 00:22:46 +0800
Subject: [PATCH] =?UTF-8?q?popper=E5=A2=9E=E5=8A=A0v1=E7=89=88=E6=9C=AC=20?=
 =?UTF-8?q?=E7=9C=81=E5=B8=82=E5=8C=BA=E5=9F=9F=E7=BB=84=E4=BB=B6=E5=B0=81?=
 =?UTF-8?q?=E8=A3=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/Message/main.vue               |   2 +-
 .../components/Popover/index.vue              | 217 ++++++++++++++++++
 .../components/Select/Select.vue              |  22 +-
 .../components/Select/SelectDropdown.vue      |   5 +-
 vue/element-ui-personal/index.js              |  13 ++
 vue/element-ui-personal/mixins/vue-popper.js  | 135 +++++------
 vue/package-lock.json                         |  11 +-
 vue/package.json                              |   3 +-
 vue/src/assets/styles/element-ui.scss         | 162 ++++++-------
 vue/src/components/LoadingMask/index.vue      |   2 +-
 vue/src/components/RegionSelector/Tree.vue    |  92 --------
 .../RegionSelector/Tree/TreeDialog.vue        |  82 +++++++
 .../components/RegionSelector/Tree/index.vue  |  85 +++++++
 vue/src/components/ZoomControl/index.vue      |   2 +-
 vue/src/directive/ripple/main.js              |   2 +-
 vue/src/main.js                               |   9 +-
 .../index/components/PanelGroup/index.vue     |   4 +-
 .../index/components/TotalProfitGoods.vue     |   4 +-
 .../order/components/CategorySelector.vue     |   2 +-
 vue/src/views/system/customer/EditDialog.vue  |   7 +-
 .../department/components/OrgTreeView.vue     |   2 +-
 vue/src/views/system/supplier/EditDialog.vue  |   7 +-
 22 files changed, 585 insertions(+), 285 deletions(-)
 create mode 100644 vue/element-ui-personal/components/Popover/index.vue
 create mode 100644 vue/element-ui-personal/index.js
 delete mode 100644 vue/src/components/RegionSelector/Tree.vue
 create mode 100644 vue/src/components/RegionSelector/Tree/TreeDialog.vue
 create mode 100644 vue/src/components/RegionSelector/Tree/index.vue

diff --git a/vue/element-ui-personal/components/Message/main.vue b/vue/element-ui-personal/components/Message/main.vue
index c56a20a..097f9b0 100644
--- a/vue/element-ui-personal/components/Message/main.vue
+++ b/vue/element-ui-personal/components/Message/main.vue
@@ -87,7 +87,7 @@
             clearTimer(reset) {
                 this.pause = true
                 this.remainTime = reset === true ? this.duration : this.remainTime - (Date.now() - this.startAt)
-                clearTimeout(this.timer)
+                window.clearTimeout(this.timer)
             },
             startTimer() {
                 if (this.duration > 0 && !this.closed) {
diff --git a/vue/element-ui-personal/components/Popover/index.vue b/vue/element-ui-personal/components/Popover/index.vue
new file mode 100644
index 0000000..0a5e25b
--- /dev/null
+++ b/vue/element-ui-personal/components/Popover/index.vue
@@ -0,0 +1,217 @@
+<template>
+    <div>
+        <slot name="reference"/>
+        <transition :name="transition" @after-enter="handleAfterEnter" @after-leave="handleAfterLeave">
+            <div
+                    ref="popper"
+                    v-show="!disabled && showPopper"
+                    class="el-popover el-popper"
+                    :class="[popperClass, content && 'el-popover--plain']"
+                    :style="{ width: width + 'px' }"
+                    :id="tooltipId"
+            >
+                <div class="el-popover__title" v-if="title">
+                    <slot name="title">{{title}}</slot>
+                </div>
+                <slot>{{ content }}</slot>
+            </div>
+        </transition>
+    </div>
+</template>
+
+<script>
+    import Popper from '@ele/mixins/vue-popper'
+    import {on, off} from 'element-ui/lib/utils/dom'
+    import {addClass, removeClass} from 'element-ui/lib/utils/dom'
+    import {generateId} from 'element-ui/lib/utils/util'
+
+    export default {
+        name: "ElPopover",
+
+        mixins: [Popper],
+
+        props: {
+            trigger: {
+                type: String,
+                default: 'click',
+                validator: value => ['click', 'focus', 'hover', 'manual'].indexOf(value) > -1
+            },
+            openDelay: {type: Number, default: 0},
+            closeDelay: {type: Number, default: 200},
+            transition: {type: String, default: 'fade-in-liner'},
+            popperClass: String,
+            title: String,
+            disabled: Boolean,
+            content: String,
+            width: {},
+            arrowOffset: {type: Number, default: 0}
+        },
+
+        data() {
+            return {}
+        },
+
+        computed: {
+            tooltipId() {
+                return `el-popover-${generateId()}`
+            }
+        },
+
+        watch: {
+            showPopper(val) {
+                if (this.disabled) return
+                this.$emit(val ? 'show' : 'hide')
+            }
+        },
+
+        methods: {
+            doToggle() {
+                this.showPopper = !this.showPopper
+            },
+
+            doShow() {
+                this.showPopper = true
+            },
+
+            doClose() {
+                this.showPopper = false
+            },
+
+            handleFocus() {
+                addClass(this.referenceElm, 'focusing')
+                if (this.trigger === 'click' || this.trigger === 'focus') this.showPopper = true
+            },
+
+            handleClick() {
+                removeClass(this.referenceElm, 'focusing')
+            },
+
+            handleBlur() {
+                removeClass(this.referenceElm, 'focusing')
+                if (this.trigger === 'click' || this.trigger === 'focus') this.showPopper = false
+            },
+
+            handleMouseEnter() {
+                window.clearTimeout(this._timer)
+                if (this.openDelay) {
+                    this._timer = setTimeout(() => this.showPopper = true, this.openDelay)
+                }
+                else this.showPopper = true
+            },
+
+            handleKeydown(ev) {
+                if (ev.keyCode === 27 && this.trigger !== 'manual') { // esc
+                    this.doClose()
+                }
+            },
+
+            handleMouseLeave() {
+                window.clearTimeout(this._timer)
+                if (this.closeDelay) {
+                    this._timer = setTimeout(() => this.showPopper = false, this.closeDelay)
+                }
+                else this.showPopper = false
+            },
+
+            handleDocumentClick(e) {
+                let reference = this.reference || this.$refs.reference
+                const popper = this.popper || this.$refs.popper
+
+                if (!reference && this.$slots.reference && this.$slots.reference[0]) {
+                    reference = this.referenceElm = this.$slots.reference[0].elm
+                }
+                if (!this.$el ||
+                    !reference ||
+                    this.$el.contains(e.target) ||
+                    reference.contains(e.target) ||
+                    !popper ||
+                    popper.contains(e.target)) return
+                this.showPopper = false
+            },
+
+            handleAfterEnter() {
+                this.$emit('after-enter')
+            },
+
+            handleAfterLeave() {
+                this.$emit('after-leave')
+                this.doDestroy()
+            },
+
+            cleanup() {
+                if (this.openDelay || this.closeDelay) {
+                    window.clearTimeout(this._timer)
+                }
+            }
+        },
+
+        mounted() {
+            let reference = this.referenceElm = this.reference || this.$refs.reference
+            const popper = this.popper || this.$refs.popper
+
+            if (!reference && this.$slots.reference && this.$slots.reference[0]) {
+                reference = this.referenceElm = this.$slots.reference[0].elm
+            }
+
+            if (reference) {
+                addClass(reference, 'el-popover__reference')
+
+                if (this.trigger !== 'click') {
+                    on(reference, 'focusin', () => {
+                        this.handleFocus()
+                        const instance = reference.__vue__
+                        if (instance && typeof instance.focus === 'function') {
+                            instance.focus()
+                        }
+                    })
+                    on(popper, 'focusin', this.handleFocus)
+                    on(reference, 'focusout', this.handleBlur)
+                    on(popper, 'focusout', this.handleBlur)
+                }
+                on(reference, 'keydown', this.handleKeydown)
+                on(reference, 'click', this.handleClick)
+            }
+            if (this.trigger === 'click') {
+                on(reference, 'click', this.doToggle)
+                on(document, 'click', this.handleDocumentClick)
+            }
+            else if (this.trigger === 'hover') {
+                on(reference, 'mouseenter', this.handleMouseEnter)
+                on(popper, 'mouseenter', this.handleMouseEnter)
+                on(reference, 'mouseleave', this.handleMouseLeave)
+                on(popper, 'mouseleave', this.handleMouseLeave)
+            }
+            else if (this.trigger === 'focus') {
+                if (reference.querySelector('input, textarea')) {
+                    on(reference, 'focusin', this.doShow)
+                    on(reference, 'focusout', this.doClose)
+                }
+                else {
+                    on(reference, 'mousedown', this.doShow)
+                    on(reference, 'mouseup', this.doClose)
+                }
+            }
+        },
+
+        beforeDestroy() {
+            this.cleanup()
+
+            const reference = this.reference
+
+            off(reference, 'click', this.doToggle)
+            off(reference, 'mouseup', this.doClose)
+            off(reference, 'mousedown', this.doShow)
+            off(reference, 'focusin', this.doShow)
+            off(reference, 'focusout', this.doClose)
+            off(reference, 'mousedown', this.doShow)
+            off(reference, 'mouseup', this.doClose)
+            off(reference, 'mouseleave', this.handleMouseLeave)
+            off(reference, 'mouseenter', this.handleMouseEnter)
+            off(document, 'click', this.handleDocumentClick)
+        },
+
+        deactivated() {
+            this.cleanup()
+        },
+    }
+</script>
diff --git a/vue/element-ui-personal/components/Select/Select.vue b/vue/element-ui-personal/components/Select/Select.vue
index e1b90c0..80dffd4 100644
--- a/vue/element-ui-personal/components/Select/Select.vue
+++ b/vue/element-ui-personal/components/Select/Select.vue
@@ -106,7 +106,7 @@
                    @click="handleClearClick"/>
             </template>
         </el-input>
-        <transition name="el-zoom-in-top" @before-enter="handleMenuEnter" @after-leave="doDestroy">
+        <transition :name="transition" @before-enter="handleMenuEnter" @after-leave="doDestroy">
             <el-select-menu
                     v-show="visible && emptyText !== false"
                     placement="bottom"
@@ -176,13 +176,9 @@
         props: {
             name: String,
             id: String,
-            value: {
-                required: true
-            },
-            autocomplete: {
-                type: String,
-                default: 'off'
-            },
+            value: {required: true},
+            transition: {type: String, default: 'el-zoom-in-top'},
+            autocomplete: {type: String, default: 'off'},
             automaticDropdown: Boolean,
             size: String,
             disabled: Boolean,
@@ -198,10 +194,7 @@
             remoteMethod: Function,
             filterMethod: Function,
             multiple: Boolean,
-            multipleLimit: {
-                type: Number,
-                default: 0
-            },
+            multipleLimit: {type: Number, default: 0},
             placeholder: {
                 type: String,
                 default() {
@@ -210,10 +203,7 @@
             },
             defaultFirstOption: Boolean,
             reserveKeyword: Boolean,
-            valueKey: {
-                type: String,
-                default: 'value'
-            },
+            valueKey: {type: String, default: 'value'},
             collapseTags: Boolean,
             popperAppendToBody: Boolean
         },
diff --git a/vue/element-ui-personal/components/Select/SelectDropdown.vue b/vue/element-ui-personal/components/Select/SelectDropdown.vue
index 989e59c..f5f591c 100644
--- a/vue/element-ui-personal/components/Select/SelectDropdown.vue
+++ b/vue/element-ui-personal/components/Select/SelectDropdown.vue
@@ -1,9 +1,9 @@
 <template>
     <div
-            ref="popper"
             class="el-select-dropdown el-popper"
             :class="[{ 'is-multiple': $parent.multiple }, popperClass]"
-            :style="{ minWidth }">
+            :style="{ minWidth }"
+    >
         <slot/>
     </div>
 </template>
@@ -42,6 +42,7 @@
             this.$on('updatePopper', () => {
                 this.$parent.visible && this.updatePopper()
             })
+            this.$on('destroyPopper', this.destroyPopper)
         }
     }
 </script>
diff --git a/vue/element-ui-personal/index.js b/vue/element-ui-personal/index.js
new file mode 100644
index 0000000..6612258
--- /dev/null
+++ b/vue/element-ui-personal/index.js
@@ -0,0 +1,13 @@
+import Message from "./components/Message"
+import Popover from './components/Popover'
+import Select from './components/Select/Select'
+
+const components = [Popover, Select]
+
+export default function (Vue) {
+    components.forEach(component => {
+        Vue.component(component.name, component)
+    })
+
+    Vue.prototype.$message = Message
+}
diff --git a/vue/element-ui-personal/mixins/vue-popper.js b/vue/element-ui-personal/mixins/vue-popper.js
index 4bdea74..bc2efca 100644
--- a/vue/element-ui-personal/mixins/vue-popper.js
+++ b/vue/element-ui-personal/mixins/vue-popper.js
@@ -1,51 +1,33 @@
 import {PopupManager} from 'element-ui/lib/utils/popup'
 
-const PopperJS = require('@popperjs/core')
+import PopperJS from 'popper.js'
+//import * as PopperJS from '@popperjs/core'
+
+const POPPER_VERSION = 'v1'
+
+if (POPPER_VERSION === 'v2') {
+    console.warn = () => ({})
+}
 
 const stop = e => e.stopPropagation()
 
-/**
- * @param {HTMLElement} [reference=$refs.reference] - The reference element used to position the popper.
- * @param {HTMLElement} [popper=$refs.popper] - The HTML element used as popper, or a configuration used to generate the popper.
- * @param {String} [placement=button] - Placement of the popper accepted values: top(-start, -end), right(-start, -end), bottom(-start, -end), left(-start, -end)
- * @param {Number} [offset=0] - Amount of pixels the popper will be shifted (can be negative).
- * @param {Boolean} [visible=false] Visibility of the popup element.
- * @param {Boolean} [visible-arrow=false] Visibility of the arrow, no style.
- */
+const defaultOptions = () => {
+    return POPPER_VERSION === 'v2' ? {modifiers: []} : {modifiers: {computeStyle: {gpuAcceleration: false}}}
+}
+
 export default {
     props: {
-        transformOrigin: {
-            type: [Boolean, String],
-            default: true
-        },
-        placement: {
-            type: String,
-            default: 'bottom'
-        },
-        boundariesPadding: {
-            type: Number,
-            default: 5
-        },
+        transformOrigin: {type: [Boolean, String], default: true},
+        placement: {type: String, default: 'bottom'},
+        boundariesPadding: {type: Number, default: 5},
         reference: {},
         popper: {},
-        offset: {
-            type: Number,
-            default: 12
-        },
+        offset: {type: Number, default: POPPER_VERSION === 'v2' ? 12 : 0},
         value: Boolean,
-        visibleArrow: {
-            type: Boolean,
-            default: true
-        },
-        arrowOffset: {
-            type: Number,
-            default: 35
-        },
-        appendToBody: Boolean,
-        popperOptions: {
-            type: Object,
-            default: () => ({modifiers: []})
-        }
+        visibleArrow: {type: Boolean, default: true},
+        arrowOffset: {type: Number, default: 35},
+        appendToBody: {type: Boolean, default: true},
+        popperOptions: {type: Object, default: defaultOptions}
     },
 
     data() {
@@ -58,10 +40,10 @@ export default {
         value: {
             immediate: true,
             handler(val) {
-                if (this.disabled) return
-                val && this.updatePopper()
                 this.showPopper = val
                 this.$emit('input', val)
+                if (this.disabled) return
+                val && this.updatePopper()
             }
         }
     },
@@ -88,16 +70,19 @@ export default {
 
             if (this.appendToBody) document.body.appendChild(this.popperElm)
             if (this.visibleArrow) this.setArrow()
-            this.setOffset()
+            this.setOffset(options)
 
             options.placement = this.placement
-            options.onFirstUpdate = () => {
+            const createEvent = POPPER_VERSION === 'v2' ? 'onFirstUpdate' : 'onCreate'
+            options[createEvent] = () => {
                 this.$emit('created', this)
+                this.resetTransformOrigin()
                 this.$nextTick(this.updatePopper)
             }
 
-
-            this.popperJS = PopperJS.createPopper(reference, popper, options)
+            this.popperJS = POPPER_VERSION === 'v2' ?
+                PopperJS.createPopper(reference, popper, options)
+                : new PopperJS(reference, popper, options)
 
             popper.style.zIndex = PopupManager.nextZIndex()
             this.popperElm.addEventListener('click', stop)
@@ -118,46 +103,64 @@ export default {
             this.popperJS = null
         },
 
+        destroyPopper() {
+            this.popperJS && this.resetTransformOrigin()
+        },
+
+        setOffset(options) {
+            if (POPPER_VERSION === 'v2') {
+                const modifier = this.popperOptions.modifiers.find(modifier => modifier.name === 'offset'),
+                    offset = {offset: [0, this.offset]}
+
+                if (!modifier) {
+                    this.popperOptions.modifiers.push({name: 'offset', options: offset})
+                }
+                else modifier.options = offset
+            }
+            else {
+                if (!options.modifiers.offset) {
+                    options.modifiers.offset = {}
+                }
+                options.modifiers.offset.offset = this.offset
+            }
+        },
+
         setArrow() {
             if (this.appended) return
             this.appended = true
 
             const arrow = document.createElement('div')
             arrow.className = 'popper__arrow'
-            arrow.setAttribute('data-popper-arrow', '')
+            arrow.setAttribute(POPPER_VERSION === 'v2' ? 'data-popper-arrow' : 'x-arrow', '')
+            const attributes = this.popperElm.attributes
+            const key = Object.keys(attributes).find(key => /^_v-/.test(attributes[key].name))
+            if (key) arrow.setAttribute(attributes[key].name, '')
 
             this.popperElm.appendChild(arrow)
-
-            const modifier = this.popperOptions.modifiers.find(modifier => modifier.name === 'arrow'),
-                options = {element: '[data-popper-arrow]', padding: this.arrowOffset}
-
-            if (!modifier) {
-                this.popperOptions.modifiers.push({name: 'arrow', options})
-            }
-            else modifier.options = options
         },
 
-        setOffset() {
-            const modifier = this.popperOptions.modifiers.find(modifier => modifier.name === 'offset'),
-                options = {offset: [0, this.offset]}
-
-            if (!modifier) {
-                this.popperOptions.modifiers.push({name: 'offset', options})
-            }
-            else modifier.options = options
+        resetTransformOrigin() {
+            if (!this.transformOrigin) return
+            const placementMap = {top: 'bottom', bottom: 'top', left: 'right', right: 'left'}
+            const attr = POPPER_VERSION === 'v2' ? 'data-popper-placement' : 'x-placement'
+            const placement = this.popperElm.getAttribute(attr).split('-')[0]
+            const origin = placementMap[placement]
+            this.popperElm.style.transformOrigin =
+                typeof this.transformOrigin === 'string'
+                    ? this.transformOrigin
+                    : ['top', 'bottom'].includes(placement) ? `center ${origin}` : `${origin} center`
         }
     },
 
+    deactivated() {
+        this.$options.beforeDestroy[0].call(this)
+    },
+
     beforeDestroy() {
         this.doDestroy(true)
         if (this.popperElm && this.popperElm.parentNode === document.body) {
             this.popperElm.removeEventListener('click', stop)
             document.body.removeChild(this.popperElm)
         }
-    },
-
-    // call destroy in keep-alive mode
-    deactivated() {
-        this.$options.beforeDestroy[0].call(this)
     }
 }
diff --git a/vue/package-lock.json b/vue/package-lock.json
index 9b2193d..be6f6f2 100644
--- a/vue/package-lock.json
+++ b/vue/package-lock.json
@@ -1135,9 +1135,9 @@
       "dev": true
     },
     "@popperjs/core": {
-      "version": "2.4.0",
-      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.4.0.tgz",
-      "integrity": "sha512-NMrDy6EWh9TPdSRiHmHH2ye1v5U0gBD7pRYwSwJvomx7Bm4GG04vu63dYiVzebLOx2obPpJugew06xVP0Nk7hA=="
+      "version": "2.4.1",
+      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.4.1.tgz",
+      "integrity": "sha512-hdRh4Xul0S4VVJz8/T2EXuaVGnRp+bC/AksVp2DGtmvE4X4OKYsiZC4H2PlZmVhJZT58KFb5+xIog8BE3hpiSA=="
     },
     "@soda/friendly-errors-webpack-plugin": {
       "version": "1.7.1",
@@ -8416,6 +8416,11 @@
         "ts-pnp": "^1.1.6"
       }
     },
+    "popper.js": {
+      "version": "1.16.1",
+      "resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.16.1.tgz",
+      "integrity": "sha512-Wb4p1J4zyFTbM+u6WuO4XstYx4Ky9Cewe4DWrel7B0w6VVICvPwdOpotjzcf6eD8TsckVnIMNONQyPIUFOUbCQ=="
+    },
     "portfinder": {
       "version": "1.0.26",
       "resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.26.tgz",
diff --git a/vue/package.json b/vue/package.json
index 48c0d59..f4e5eed 100644
--- a/vue/package.json
+++ b/vue/package.json
@@ -8,7 +8,7 @@
     "svgo": "svgo -f src/assets/icons/svg --config=src/assets/icons/svgo.yml"
   },
   "dependencies": {
-    "@popperjs/core": "^2.4.0",
+    "@popperjs/core": "^2.4.1",
     "axios": "^0.19.2",
     "core-js": "^3.6.5",
     "decimal.js": "^10.2.0",
@@ -19,6 +19,7 @@
     "nprogress": "^0.2.0",
     "pako": "^1.0.11",
     "path-to-regexp": "^6.1.0",
+    "popper.js": "^1.16.1",
     "socket.io-client": "^2.3.0",
     "v-viewer": "^1.5.1",
     "vue": "^2.6.11",
diff --git a/vue/src/assets/styles/element-ui.scss b/vue/src/assets/styles/element-ui.scss
index bc48d07..b79a82a 100644
--- a/vue/src/assets/styles/element-ui.scss
+++ b/vue/src/assets/styles/element-ui.scss
@@ -19,54 +19,64 @@
     }
 }
 
-.el-form {
-    .el-row {
-        display: flex;
-        flex-direction: row;
-        flex-wrap: wrap;
+.el-card {
+    .el-card__body {
+        height: 100%;
     }
-}
 
-.el-table {
-    thead {
-        color: rgba(0, 0, 0, .85)
+    .el-card__header + .el-card__body {
+        height: calc(100% - 55px);
     }
+}
 
-    thead > tr > th {
-        background: #fbfbfb;
-    }
+.el-date-editor.el-input,
+.el-date-editor--daterange {
+    width: 100% !important;
+}
 
-    .el-table__body tr.current-row > td {
-        background-color: $--color-primary;
-        color: #fff;
+.el-dialog {
+    @include deep-shadow;
 
-        .el-table__expand-icon {
-            color: #fff;
+    margin-bottom: 0;
+    min-width: 384px;
+
+    .el-dialog__header {
+        border-bottom: 1px solid #ebeef5;
+        padding: 17px;
+
+        .el-dialog__title {
+            line-height: inherit;
+            color: inherit;
+            font-size: inherit;
         }
-    }
-}
 
-.el-pagination {
-    padding-top: 20px;
-}
+        .el-dialog__headerbtn {
+            top: 18px;
+        }
+    }
 
-.el-scrollbar {
-    height: 100%;
+    .el-dialog__footer {
+        border-top: 1px solid #ebeef5;
+        padding: 10px 16px;
+    }
 
     .el-scrollbar__wrap {
-        -webkit-overflow-scrolling: touch;
+        //53 for dialog header,53 for dialog footer,100 for up+down
+        max-height: calc(100vh - 53px - 53px - 100px);
     }
 }
 
-.el-tree {
-    &.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
-        background-color: $--color-primary;
-        color: #fff;
+.el-form {
+    .el-row {
+        display: flex;
+        flex-direction: row;
+        flex-wrap: wrap;
     }
 }
 
-.el-select {
-    width: 100%;
+.el-loading-mask {
+    background: #fff;
+    color: $--color-primary;
 }
 
 .el-message {
@@ -109,45 +119,49 @@
     }
 }
 
-.el-card {
-    .el-card__body {
-        height: 100%;
-    }
+.el-pagination {
+    padding-top: 20px;
+    text-align: right;
 
-    .el-card__header + .el-card__body {
-        height: calc(100% - 55px);
+    .el-pagination__editor.el-input {
+        margin: 0 5px;
     }
 }
 
-.el-dialog {
-    @include deep-shadow;
+.el-scrollbar {
+    height: 100%;
 
-    margin-bottom: 0;
-    min-width: 384px;
+    .el-scrollbar__wrap {
+        -webkit-overflow-scrolling: touch;
+    }
+}
 
-    .el-dialog__header {
-        border-bottom: 1px solid #ebeef5;
-        padding: 17px;
+.el-select {
+    width: 100%;
+}
 
-        .el-dialog__title {
-            line-height: inherit;
-            color: inherit;
-            font-size: inherit;
-        }
+.el-table {
+    thead {
+        color: rgba(0, 0, 0, .85)
+    }
 
-        .el-dialog__headerbtn {
-            top: 18px;
-        }
+    thead > tr > th {
+        background: #fbfbfb;
     }
 
-    .el-dialog__footer {
-        border-top: 1px solid #ebeef5;
-        padding: 10px 16px;
+    .el-table__body tr.current-row > td {
+        background-color: $--color-primary;
+        color: #fff;
+
+        .el-table__expand-icon {
+            color: #fff;
+        }
     }
+}
 
-    .el-scrollbar__wrap {
-        //53 for dialog header,53 for dialog footer,100 for up+down
-        max-height: calc(100vh - 53px - 53px - 100px);
+.el-textarea {
+    .el-input__count {
+        background: transparent;
     }
 }
 
@@ -172,33 +186,9 @@
     }
 }
 
-.el-textarea {
-    .el-input__count {
-        background: transparent;
-    }
-}
-
-.el-pagination {
-    text-align: right;
-
-    .el-pagination__editor.el-input {
-        margin: 0 5px;
+.el-tree {
+    &.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
+        background-color: $--color-primary;
+        color: #fff;
     }
 }
-
-.el-loading-mask {
-    background: #fff;
-    color: $--color-primary;
-}
-
-.el-date-editor.el-input,
-.el-date-editor--daterange {
-    width: 100% !important;
-}
-
-
-
-
-
-
-
diff --git a/vue/src/components/LoadingMask/index.vue b/vue/src/components/LoadingMask/index.vue
index 5eae649..dcf5895 100644
--- a/vue/src/components/LoadingMask/index.vue
+++ b/vue/src/components/LoadingMask/index.vue
@@ -13,7 +13,7 @@
                         <svg viewBox="25 25 50 50" class="circular">
                             <circle cx="50" cy="50" r="20" fill="none" class="path"/>
                         </svg>
-                        <p>拼命加载中</p>
+                        <p>加载中...</p>
                     </div>
                 </div>
             )
diff --git a/vue/src/components/RegionSelector/Tree.vue b/vue/src/components/RegionSelector/Tree.vue
deleted file mode 100644
index c362b71..0000000
--- a/vue/src/components/RegionSelector/Tree.vue
+++ /dev/null
@@ -1,92 +0,0 @@
-<template>
-    <div>
-        <el-input :value="value" :readonly="readonly" clearable @clear="$emit('clear')" @focus="dialogVisible=true"/>
-        <dialog-form
-                v-drag-dialog
-                v-model="dialogVisible"
-                :loading="loading"
-                append-to-body
-                title="选择行政区域"
-                @close="closeDialog"
-        >
-            <el-tree
-                    ref="tree"
-                    :data="limit ? limitTree : regionTree"
-                    :expand-on-click-node="false"
-                    node-key="id"
-                    @node-click="nodeClick"
-            >
-                <span slot-scope="{data}" class="el-tree-node__label">
-                    {{limit ? data.name + `(${data.value})` : data.name}}
-                </span>
-            </el-tree>
-        </dialog-form>
-    </div>
-</template>
-
-<script>
-    import {mapState} from 'vuex'
-    import DialogForm from '@/components/DialogForm'
-    import {createLimitTree, getNodeId} from "@/utils/tree"
-
-    export default {
-        name: "RegionTreeSelector",
-
-        components: {DialogForm},
-
-        props: {
-            value: String,
-            readonly: Boolean,
-            getChildrenOnClick: Boolean,
-            limit: Boolean,
-            limitApi: Function
-        },
-
-        data() {
-            return {
-                loading: false,
-                dialogVisible: false,
-                limitTree: []
-            }
-        },
-
-        computed: {
-            ...mapState('dataCache', {
-                regionTree: state => state.regionTree
-            })
-        },
-
-        methods: {
-            closeDialog() {
-                this.dialogVisible = false
-            },
-
-            nodeClick(obj) {
-                const payload = [obj]
-                if (this.getChildrenOnClick) {
-                    let ids = getNodeId(obj.children)
-                    ids.unshift(obj.id)
-                    payload.push(ids)
-                }
-
-                this.$emit('select', ...payload)
-
-                this.closeDialog()
-            },
-
-            init() {
-                this.loading = true
-                const hasInit = this.regionTree.length > 0
-                const promise = () => hasInit ? Promise.resolve() : this.$store.dispatch('dataCache/initRegion')
-                promise()
-                    .then(() => this.limit ? this.limitApi() : Promise.resolve())
-                    .then(data => data && (this.limitTree = createLimitTree(this.regionTree, data)))
-                    .finally(() => this.loading = false)
-            }
-        },
-
-        mounted() {
-            this.init()
-        }
-    }
-</script>
diff --git a/vue/src/components/RegionSelector/Tree/TreeDialog.vue b/vue/src/components/RegionSelector/Tree/TreeDialog.vue
new file mode 100644
index 0000000..afb1a3f
--- /dev/null
+++ b/vue/src/components/RegionSelector/Tree/TreeDialog.vue
@@ -0,0 +1,82 @@
+<script type="text/jsx">
+    import DialogForm from "@/components/DialogForm"
+    import {createLimitTree, getNodeId} from "@/utils/tree"
+
+    export default {
+        components: {DialogForm},
+
+        data() {
+            return {
+                loading: false,
+                visible: false,
+                handler: null,
+                limitTree: [],
+                getChildrenOnClick: false,
+                limit: false,
+                limitApi: null
+            }
+        },
+
+        computed: {
+            regionTree() {
+                return this.$store.state.dataCache.regionTree
+            }
+        },
+
+        methods: {
+            closeDialog() {
+                this.visible = false
+            },
+
+            nodeClick(obj) {
+                const payload = [obj]
+                if (this.getChildrenOnClick) {
+                    let ids = getNodeId(obj.children)
+                    ids.unshift(obj.id)
+                    payload.push(ids)
+                }
+
+                this.handler(payload)
+
+                this.closeDialog()
+            },
+
+            init() {
+                this.loading = true
+                const hasInit = this.regionTree.length > 0
+                const promise = () => hasInit ? Promise.resolve() : this.$store.dispatch('dataCache/initRegion')
+                return promise()
+                    .then(() => this.limit ? this.limitApi() : Promise.resolve())
+                    .then(data => data && (this.limitTree = createLimitTree(this.regionTree, data)))
+                    .finally(() => this.loading = false)
+            }
+        },
+
+        render() {
+            return (
+                <dialog-form
+                    v-model={this.visible}
+                    directives={[{name: 'drag-dialog'}]}
+                    class="tree-dialog"
+                    title="选择行政区域"
+                    loading={this.loading}
+                    appendToBody={true}
+                    v-on:close={this.closeDialog}
+                >
+                    <el-tree
+                        data={this.limit ? this.limitTree : this.regionTree}
+                        expand-on-click-node={false}
+                        node-key="id"
+                        v-on:node-click={this.nodeClick}
+                    >
+                        {({data}) => (
+                            <span className="el-tree-node__label">
+                                {this.limit ? data.name + `(${data.value})` : data.name}
+                            </span>
+                        )}
+                    </el-tree>
+                </dialog-form>
+            )
+        }
+    }
+</script>
diff --git a/vue/src/components/RegionSelector/Tree/index.vue b/vue/src/components/RegionSelector/Tree/index.vue
new file mode 100644
index 0000000..6f4e3ce
--- /dev/null
+++ b/vue/src/components/RegionSelector/Tree/index.vue
@@ -0,0 +1,85 @@
+<script type="text/jsx">
+    import Vue from 'vue'
+    import TreeDialog from "./TreeDialog"
+
+    const TreeDialogConstructor = Vue.extend(TreeDialog)
+
+    let limit, full
+
+    export default {
+        name: "RegionTreeSelector",
+
+        props: {
+            value: String,
+            readonly: Boolean,
+            size: String,
+            getChildrenOnClick: Boolean,
+            limit: Boolean,
+            limitApi: Function
+        },
+
+        data() {
+            return {
+                dialogVisible: false,
+                limitTree: []
+            }
+        },
+
+        methods: {
+            openDialog() {
+                if (this.limit) {
+                    this.initLimit()
+                    return limit.visible = true
+                }
+                else {
+                    !full && this.initFull()
+                    full.visible = true
+                }
+            },
+
+            handler(payload) {
+                this.$emit('select', ...payload)
+            },
+
+            initLimit() {
+                if (limit) {
+                    limit.getChildrenOnClick = this.getChildrenOnClick
+                    limit.limit = this.limit
+                    limit.limitApi = this.limitApi
+                    return limit.init()
+                }
+
+                const data = {...this.$props, handler: this.handler}
+                limit = new TreeDialogConstructor({data}).$mount()
+                document.body.appendChild(limit.$el)
+
+                return limit.init()
+            },
+
+            initFull() {
+                if (full) {
+                    return full.getChildrenOnClick = this.getChildrenOnClick
+                }
+
+                const data = {getChildrenOnClick: this.getChildrenOnClick, handler: this.handler}
+                full = new TreeDialogConstructor({data}).$mount()
+                document.body.appendChild(full.$el)
+
+                return full.init()
+            }
+        },
+
+        render() {
+            return (
+                <el-input
+                    value={this.value}
+                    readonly={this.readonly}
+                    size={this.size}
+                    clearable
+                    v-on:clear={() => this.$emit('clear')}
+                    v-on:focus={this.openDialog}
+                />
+            )
+        }
+    }
+</script>
diff --git a/vue/src/components/ZoomControl/index.vue b/vue/src/components/ZoomControl/index.vue
index 4f7b5a0..2448f1d 100644
--- a/vue/src/components/ZoomControl/index.vue
+++ b/vue/src/components/ZoomControl/index.vue
@@ -6,7 +6,7 @@
     </div>
 </template>
 
-<script type="text/jsx">
+<script>
     export default {
         name: "ZoomControl",
         props: {
diff --git a/vue/src/directive/ripple/main.js b/vue/src/directive/ripple/main.js
index 8d32cf7..d35cb56 100644
--- a/vue/src/directive/ripple/main.js
+++ b/vue/src/directive/ripple/main.js
@@ -82,7 +82,7 @@ function showRipple(evt, el, ctx, forceCenter) {
 
     const abort = () => {
         node.remove()
-        clearTimeout(timer)
+        window.clearTimeout(timer)
     }
     ctx.abort.push(abort)
 
diff --git a/vue/src/main.js b/vue/src/main.js
index 8a5ebdc..8a652ab 100644
--- a/vue/src/main.js
+++ b/vue/src/main.js
@@ -1,6 +1,7 @@
 import Vue from 'vue'
 import 'normalize.css/normalize.css' // a modern alternative to CSS resets
 import Element from 'element-ui'
+import ElementPersonal from '@ele'
 import '@/assets/styles/index.scss' // global css
 import App from '@/App'
 import store from '@/store'
@@ -12,16 +13,11 @@ import * as filters from './filter'
 import BottomTip from '@/components/BottomTip'
 import Guide from '@/components/Guide'
 import ImageViewer from '@/components/ImageViewer'
-import Message from '@ele/components/Message'
-import Select from '@ele/components/Select/Select'
 import PuzzleVerify from '@/components/PuzzleVerify'
 import Signature from '@/components/SignautreBoard'
 
-//popper老是弹，我还不知道咋整，只能这样，吔屎啦
-console.warn = () => ({})
-
 Vue.use(Element)
-Vue.component('el-select', Select)
+Vue.use(ElementPersonal)
 
 //注册过滤器
 Object.keys(filters).forEach(key => {
@@ -35,7 +31,6 @@ store.dispatch('socket/init', store.state.user).then()
 Vue.prototype.$bottomTip = BottomTip
 Vue.prototype.$guide = Guide
 Vue.prototype.$image = ImageViewer
-Vue.prototype.$message = Message
 Vue.prototype.$puzzleVerify = PuzzleVerify
 Vue.prototype.$signature = Signature
 
diff --git a/vue/src/views/index/components/PanelGroup/index.vue b/vue/src/views/index/components/PanelGroup/index.vue
index 5638b62..ee470ca 100644
--- a/vue/src/views/index/components/PanelGroup/index.vue
+++ b/vue/src/views/index/components/PanelGroup/index.vue
@@ -6,10 +6,10 @@
     </el-row>
 </template>
 
-<script type="text/jsx">
+<script>
     import PanelGroupItem from './PanelGroupItem'
     import variables from '@/assets/styles/variables.scss'
-    import {getFourBlock} from '@/api/statistic/index'
+    import {getFourBlock} from '@/api/statistic'
     import {isEmpty, mergeObj} from "@/utils"
     import {auth} from "@/utils/auth"
 
diff --git a/vue/src/views/index/components/TotalProfitGoods.vue b/vue/src/views/index/components/TotalProfitGoods.vue
index 0c60c2b..7b48194 100644
--- a/vue/src/views/index/components/TotalProfitGoods.vue
+++ b/vue/src/views/index/components/TotalProfitGoods.vue
@@ -8,9 +8,9 @@
     </el-row>
 </template>
 
-<script type="text/jsx">
+<script>
     import PieChart from "@/components/Charts/PieChart"
-    import {getTotalProfitGoods} from '@/api/statistic/index'
+    import {getTotalProfitGoods} from '@/api/statistic'
 
     export default {
         name: "TotalProfitGoods",
diff --git a/vue/src/views/purchase/order/components/CategorySelector.vue b/vue/src/views/purchase/order/components/CategorySelector.vue
index 30390ab..9af7678 100644
--- a/vue/src/views/purchase/order/components/CategorySelector.vue
+++ b/vue/src/views/purchase/order/components/CategorySelector.vue
@@ -1,5 +1,5 @@
 <template>
-    <el-select :value="value" :disabled="disabled" size="small" @change="change" @input="emit">
+    <el-select :value="value" :disabled="disabled" size="small" popper-append-to-body @change="change" @input="emit">
         <el-option
                 v-for="item in selectableCategories"
                 :key="item.id"
diff --git a/vue/src/views/system/customer/EditDialog.vue b/vue/src/views/system/customer/EditDialog.vue
index 3430bdd..4e1a494 100644
--- a/vue/src/views/system/customer/EditDialog.vue
+++ b/vue/src/views/system/customer/EditDialog.vue
@@ -15,7 +15,8 @@
                 <region-selector
                         :value="form.region_name"
                         get-children-on-click
-                        readonly
+                        :readonly="!canEdit"
+                        @clear="clearRegion"
                         @select="selectRegion"
                 />
             </el-form-item>
@@ -123,6 +124,10 @@
             }
         },
         methods: {
+            clearRegion() {
+                this.form.region = null
+                this.form.region_name = null
+            },
             selectRegion(obj) {
                 this.form.region = obj.id
                 this.form.region_name = obj.fullname
diff --git a/vue/src/views/system/department/components/OrgTreeView.vue b/vue/src/views/system/department/components/OrgTreeView.vue
index 27a38ed..ddd2510 100644
--- a/vue/src/views/system/department/components/OrgTreeView.vue
+++ b/vue/src/views/system/department/components/OrgTreeView.vue
@@ -13,7 +13,7 @@
     </div>
 </template>
 
-<script type="text/jsx">
+<script>
     import OrgTree from '@/components/OrgTree'
 
     export default {
diff --git a/vue/src/views/system/supplier/EditDialog.vue b/vue/src/views/system/supplier/EditDialog.vue
index eb0d8a9..d1ee1f0 100644
--- a/vue/src/views/system/supplier/EditDialog.vue
+++ b/vue/src/views/system/supplier/EditDialog.vue
@@ -15,7 +15,8 @@
                 <region-selector
                         :value="form.region_name"
                         get-children-on-click
-                        readonly
+                        :readonly="!canEdit"
+                        @clear="clearRegion"
                         @select="selectRegion"
                 />
             </el-form-item>
@@ -123,6 +124,10 @@
             }
         },
         methods: {
+            clearRegion() {
+                this.form.region = null
+                this.form.region_name = null
+            },
             selectRegion(obj) {
                 this.form.region = obj.id
                 this.form.region_name = obj.fullname