代码优化

vue/src/component/AbstractForm/FormAnchor.vue

@@ -3,11 +3,12 @@
         <div
             v-for="i in data"
             :key="i.ref"
-            :class="{'active':i.ref === cur}"
+            :class="{'form-anchor-item': true,'active': i.ref === cur}"
             @click="() => click(i.ref)"
         >
             {{ i.label }}
         </div>
+        <div class="form-anchor-item" @click="close">关闭导航</div>
     </div>
 </template>
 
@@ -32,6 +33,11 @@ export default {
     data: () => ({cur: null}),
 
     methods: {
+        close() {
+            this.$el.remove()
+            this.$destroy()
+        },
+
         getCur(offsetTop, bounds) {
             const sections = []
             const container = this.getContainer()
@@ -98,13 +104,12 @@ export default {
     right: 0;
     top: 200px;
     min-width: 72px;
-    overflow: hidden;
     border-radius: 4px 0 0 4px;
     background: #fff;
     box-shadow: 0 2px 12px 0 rgba(166, 167, 173, 0.5);
     z-index: 100;
 
-    > div {
+    &-item {
         width: inherit;
         height: 28px;
         line-height: 28px;

vue/src/component/FormDialog/index.vue

@@ -15,11 +15,10 @@ export default {
     },
 
     render(h, context) {
-        const {value, title, loading, top, width} = context.props
-        const l = context.listeners
+        const {data, children, listeners, props: {value, title, loading, top, width}} = context
 
         function onClose() {
-            l.input && l.input(false)
+            listeners.input && listeners.input(false)
         }
 
         return (
@@ -30,7 +29,7 @@ export default {
                 top={top}
                 width={width}
                 on-close={onClose}
-                {...context.data}
+                {...data}
             >
                 <slot slot="title" name="title">{title}</slot>
 
@@ -38,7 +37,7 @@ export default {
                     <LoadingMask show={loading}/>
                     <el-scrollbar>
                         <div class="form-dialog-body">
-                            {context.children}
+                            {children}
                         </div>
                         <div style="margin-bottom: 17px"/>
                     </el-scrollbar>

vue/src/component/RegionSelector/Tab/index.vue

@@ -64,9 +64,46 @@ import {createLimitTree, getNodeId} from "@/util/tree"
 import {store, init} from '../store'
 import common from '../mixin'
 
-const PROVINCE_CITIES = ['北京市', '天津市', '上海市', '重庆市']
+const PROVINCE_CITIES = [
+    {id: '11', name: '北京市'},
+    {id: '12', name: '天津市'},
+    {id: '31', name: '上海市'},
+    {id: '50', name: '重庆市'}
+]
 const DEFAULT_TABS = [{name: '省/直辖市'}, {name: '市'}, {name: '区/县'}, {name: '乡/镇/街道'}]
 
+//根据node的类型生成查找断言，支持{id:'10',...}、{name:'北京市',...}、'10'、'北京市' 等四种类型
+function predicate(node) {
+    if (typeof node === 'object') {
+        const key = node.hasOwnProperty('id') ? 'id' : 'name'
+        return item => item[key] === node[key]
+    }
+    else {
+        const firstCharCode = node.charCodeAt(0)
+        const key = 48 <= firstCharCode && firstCharCode <= 57 ? 'id' : 'name'
+        return item => item[key] === node
+    }
+}
+
+//根据叶子id获取树节点
+function topDownById(tree, id) {
+    //判断深度，深度=id.length/2
+    const depth = Math.floor(id.length / 2)
+    if (depth < 1) return []
+    const result = []
+    for (let i = 1; i <= depth; i++) {
+        const parentId = id.substring(0, i * 2)
+        const parent = tree.find(node => node.id === parentId)
+        if (!parent) return result
+        result.push(parent)
+        if (i === 1 && PROVINCE_CITIES.some(i => i.id === parentId)) {
+            i++
+        }
+        tree = parent.children || []
+    }
+    return result
+}
+
 export default {
     name: "RegionTabSelector",
 
@@ -131,7 +168,6 @@ export default {
 
         clickItem(item) {
             this.setTabs(item, this.currentLevel)
-
             this.nextTab()
         },
 
@@ -142,7 +178,7 @@ export default {
 
             if (level === 1) {
                 //选择直辖市的时候，最大深度-1，移除'市'tab
-                if (PROVINCE_CITIES.includes(item.name)) {
+                if (PROVINCE_CITIES.some(i => i.id === item.id)) {
                     next.splice(1, 1)
                     this.realMaxLevel = this.maxLevel - 1
                 }
@@ -189,10 +225,9 @@ export default {
                     : this.value.split(this.separation).filter(Boolean)
 
             for (let i = 0; i < loopArray.length; i++) {
-                const str = loopArray[i],
-                    parent = result[i - 1] || {children: this.treeData}
-
+                const str = loopArray[i], parent = result[i - 1] || {children: this.treeData}
                 const node = parent.children.find(predicate(str))
+
                 //只要有一次不满足就退出，保留之前的查找结果
                 if (!node) break
 
@@ -256,19 +291,6 @@ export default {
         this.init()
     }
 }
-
-//根据node的类型生成查找断言，支持{id:'10',...}、{name:'北京市',...}、'10'、'北京市' 等四种类型
-function predicate(node) {
-    if (typeof node === 'object') {
-        const key = node.hasOwnProperty('id') ? 'id' : 'name'
-        return item => item[key] === node[key]
-    }
-    else {
-        const firstCharCode = node.charCodeAt(0)
-        const key = 48 <= firstCharCode && firstCharCode <= 57 ? 'id' : 'name'
-        return item => item[key] === node
-    }
-}
 </script>
 
 <style lang="scss" src="./style.scss"></style>

vue/src/layout/component/TagsView/ScrollPane.vue

@@ -1,5 +1,5 @@
 <template>
-    <el-scrollbar :vertical="false" @wheel.native.prevent="handleScroll" ref="scrollContainer">
+    <el-scrollbar ref="scrollContainer" native @wheel.native.prevent="handleScroll">
         <slot/>
     </el-scrollbar>
 </template>
@@ -12,24 +12,24 @@ export default {
 
     data: () => ({rAF: null}),
 
-    computed: {
-        scrollWrapper() {
+    methods: {
+        getWrapper() {
             return this.$refs.scrollContainer.$refs.wrap
         },
-    },
 
-    methods: {
         handleScroll(e) {
             const eventDelta = e.wheelDelta || -(e.detail || 0) * 40
-            if (eventDelta > 0 && this.scrollWrapper.scrollLeft === 0) return
-            if (eventDelta < 0 && this.scrollWrapper.scrollWidth <= this.scrollWrapper.scrollLeft + this.scrollWrapper.clientWidth) return
+            const {scrollLeft, scrollWidth, clientWidth} = this.getWrapper()
+            if (eventDelta > 0 && scrollLeft === 0
+                || eventDelta < 0 && scrollWidth <= scrollLeft + clientWidth) {
+                return
+            }
             this.smoothScroll(-eventDelta * 2)
         },
 
         moveToTarget(currentTag) {
-            const $container = this.$refs.scrollContainer.$el
-            const $containerWidth = $container.offsetWidth
-            const $scrollWrapper = this.scrollWrapper
+            const $containerWidth = this.$refs.scrollContainer.$el.offsetWidth
+            const {scrollWidth, scrollLeft} = this.getWrapper()
             const tagList = this.$parent.$refs.tag
 
             let firstTag = null
@@ -45,7 +45,7 @@ export default {
                 this.scrollLeft(0)
             }
             else if (lastTag === currentTag) {
-                this.scrollLeft($scrollWrapper.scrollWidth - $containerWidth)
+                this.scrollLeft(scrollWidth - $containerWidth)
             }
             else {
                 // find preTag and nextTag
@@ -59,17 +59,17 @@ export default {
                 // the tag's offsetLeft before of prevTag
                 const beforePrevTagOffsetLeft = prevTag.$el.offsetLeft - tagAndTagSpacing
 
-                if (afterNextTagOffsetLeft > $scrollWrapper.scrollLeft + $containerWidth) {
+                if (afterNextTagOffsetLeft > scrollLeft + $containerWidth) {
                     this.scrollLeft(afterNextTagOffsetLeft - $containerWidth)
                 }
-                else if (beforePrevTagOffsetLeft < $scrollWrapper.scrollLeft) {
+                else if (beforePrevTagOffsetLeft < scrollLeft) {
                     this.scrollLeft(beforePrevTagOffsetLeft)
                 }
             }
         },
 
         scrollLeft(val) {
-            this.scrollWrapper.scrollTo({
+            this.getWrapper().scrollTo({
                 left: val,
                 behavior: 'smooth'
             })
@@ -80,7 +80,7 @@ export default {
             let cost = 300, times = cost / 16, gap = val / times + 1
             const frameFunc = () => {
                 if (times > 0) {
-                    this.scrollWrapper.scrollLeft += gap
+                    this.getWrapper().scrollLeft += gap
                     this.rAF = window.requestAnimationFrame(frameFunc)
                     times--
                 }

vue/src/layout/component/TagsView/index.vue

@@ -1,6 +1,6 @@
 <template>
     <nav class="tags-view-container">
-        <scroll-pane class="tags-view-wrapper" ref="scrollPane">
+        <scroll-pane ref="scrollPane" class="tags-view-wrapper">
             <router-link
                 ref="tag"
                 v-for="tag in visitedViews"
@@ -18,7 +18,7 @@
 
         <context-menu v-model="contextmenu.show" :left="contextmenu.left" :top="contextmenu.top">
             <context-menu-item @click="() => refreshSelectedTag(selectedTag)">刷新</context-menu-item>
-            <context-menu-item v-show="!isAffix(selectedTag)" @click="() => closeSelectedTag(selectedTag)">
+            <context-menu-item v-if="!isAffix(selectedTag)" @click="() => closeSelectedTag(selectedTag)">
                 关闭
             </context-menu-item>
             <context-menu-item @click="closeOthersTags">关闭其他</context-menu-item>

vue/src/layout/component/TagsView/style.scss

@@ -69,18 +69,8 @@
             }
         }
 
-        .el-scrollbar__bar {
-            display: none;
-        }
-
         .el-scrollbar__wrap {
             height: 57px;
         }
     }
-
-    .flip-list-move {
-        transition: transform 0.3s;
-    }
 }
-
-