update 进行了一系列优化

Web/src/components/yoTreeLayout/index.js

@@ -1,3 +1,7 @@
+import Swiper from 'swiper'
+
+let timer, swiper
+
 export default {
   props: {
     loadData: {
@@ -20,6 +24,7 @@ export default {
 
       searchValue: '',
 
+      selectedKeys: [],
       expandedKeys: [],
       autoExpandParent: true
     }
@@ -29,7 +34,64 @@ export default {
     this.onLoadData()
   },
 
+  mounted() {
+    const container = this.$refs.swiper,
+      scrollBar = container.querySelector('.swiper-scrollbar')
+
+    const swiperOptions = {
+      direction: 'vertical',
+      slidesPerView: 'auto',
+      freeMode: true,
+      scrollbar: {
+        el: scrollBar,
+      },
+      mousewheel: true,
+    }
+
+    swiper = new Swiper(container, swiperOptions)
+
+    window.addEventListener('resize', () => {
+      this.onUpdateSwiper()
+    })
+
+  },
+
   methods: {
+
+    renderBreadcrumbItem() {
+
+      const path = ['顶级']
+
+      const findPath = (data, level) => {
+        level = level || 1
+        for (let i = 0; i < data.length; i++) {
+          const item = data[i]
+
+          path[level] = item.title
+
+          if (item.id === this.selectedKeys[0]) {
+            path.length = level + 1
+            return true
+          }
+
+          if (item.children && item.children.length) {
+            const found = findPath(item.children, level + 1)
+            if (found) {
+              return true
+            }
+          }
+        }
+      }
+
+      if (this.selectedKeys.length) {
+        findPath(this.data)
+      }
+
+      return path.map(p => (
+        <a-breadcrumb-item>{p}</a-breadcrumb-item>
+      ))
+    },
+
     onLoadData() {
       this.loading = true
 
@@ -42,6 +104,10 @@ export default {
         }
         this.data = data
 
+        this.$nextTick(() => {
+          this.onUpdateSwiper()
+        })
+
         this.loading = false
       })
     },
@@ -51,8 +117,9 @@ export default {
     },
 
     onExpand(expandedKeys) {
-      this.expandedKeys = expandedKeys;
-      this.autoExpandParent = false;
+      this.expandedKeys = expandedKeys
+      this.autoExpandParent = false
+      this.onUpdateSwiper()
     },
 
     onSearch(value) {
@@ -77,9 +144,18 @@ export default {
         const data = this.list.find(m => m.key === p)
         selectedIds.push(data.id)
       })
+      this.selectedKeys = selectedIds
       this.$emit('select', selectedIds)
     },
 
+    onUpdateSwiper() {
+      clearTimeout(timer)
+      timer = setTimeout(() => {
+        swiper.update()
+        swiper.update()
+      }, 300)
+    },
+
     generateKey(data, level) {
       const n = level || [0]
       n.push(0)
@@ -98,9 +174,9 @@ export default {
       // 这里获取不到Key
       for (let i = 0; i < data.length; i++) {
         const { key, id, title, children } = data[i]
-        this.list.push({ key, id, title });
+        this.list.push({ key, id, title })
         if (children) {
-          this.generateList(children);
+          this.generateList(children)
         }
       }
     },
@@ -108,12 +184,12 @@ export default {
     getParentKey(key, tree) {
       let parentKey;
       for (let i = 0; i < tree.length; i++) {
-        const node = tree[i];
+        const node = tree[i]
         if (node.children) {
           if (node.children.some(item => item.key === key)) {
-            parentKey = node.key;
+            parentKey = node.key
           } else if (this.getParentKey(key, node.children)) {
-            parentKey = this.getParentKey(key, node.children);
+            parentKey = this.getParentKey(key, node.children)
           }
         }
       }
@@ -123,14 +199,6 @@ export default {
 
   render() {
 
-    const swiperOptions = {
-      direction: 'vertical',
-      slidesPerView: 'auto',
-      freeMode: true,
-      scrollbar: true,
-      mousewheel: true,
-    }
-
     const props = {
       treeData: this.data,
       expandedKeys: this.expandedKeys,
@@ -170,16 +238,24 @@ export default {
               <a-input-search allowClear={true} placeholder="请输入检索关键字" onSearch={this.onSearch} />
             </div>
           </a-layout-header>
-          <swiper options={swiperOptions}>
-            <a-spin style={{ height: '100%' }} spinning={this.loading}>
-              <a-icon slot="indicator" type="loading" spin />
-              <swiper-slide>
-                <a-tree {...{ props, on, scopedSlots }} />
-              </swiper-slide>
-            </a-spin>
-          </swiper>
+          <div class="swiper-container" ref="swiper">
+            <div class="swiper-wrapper">
+              <div class="swiper-slide">
+                <a-spin style={{ height: '100%' }} spinning={this.loading}>
+                  <a-icon slot="indicator" type="loading" spin />
+                  <a-tree {...{ props, on, scopedSlots }} />
+                </a-spin>
+              </div>
+            </div>
+            <div class="swiper-scrollbar" />
+          </div>
         </a-layout-sider>
         <a-layout-content>
+          <container>
+            <a-breadcrumb class="mt-md mb-md">
+              {this.renderBreadcrumbItem()}
+            </a-breadcrumb>
+          </container>
           {this.$scopedSlots.default ? this.$scopedSlots.default() : null}
         </a-layout-content>
       </a-layout>