Web/src/components/yoTreeLayout/index.js

@@ -0,0 +1,188 @@
+export default {
+  props: {
+    loadData: {
+      type: Function,
+      require: true,
+    },
+
+    defaultExpandedKeys: {
+      default: false,
+      type: Boolean
+    },
+  },
+
+  data() {
+    return {
+      loading: false,
+
+      data: [],
+      list: [],
+
+      searchValue: '',
+
+      expandedKeys: [],
+      autoExpandParent: true
+    }
+  },
+
+  created() {
+    this.onLoadData()
+  },
+
+  methods: {
+    onLoadData() {
+      this.loading = true
+
+      this.loadData().then((res) => {
+        const data = this.generateKey(res)
+        this.list = []
+        this.generateList(data)
+        if (this.defaultExpandedKeys) {
+          this.expandedKeys = this.list.map(p => p.key)
+        }
+        this.data = data
+
+        this.loading = false
+      })
+    },
+
+    onReloadData() {
+      this.onLoadData()
+    },
+
+    onExpand(expandedKeys) {
+      this.expandedKeys = expandedKeys;
+      this.autoExpandParent = false;
+    },
+
+    onSearch(value) {
+      const expandedKeys = this.list
+        .map(p => {
+          if (p.title.indexOf(value) > -1) {
+            return this.getParentKey(p.key, this.data)
+          }
+          return null
+        })
+        .filter((p, i, self) => p && self.indexOf(p) === i)
+
+      this.searchValue = value
+      this.expandedKeys = expandedKeys
+      this.autoExpandParent = true
+
+    },
+
+    onSelect(selectedKeys) {
+      const selectedIds = []
+      selectedKeys.forEach(p => {
+        const data = this.list.find(m => m.key === p)
+        selectedIds.push(data.id)
+      })
+      this.$emit('select', selectedIds)
+    },
+
+    generateKey(data, level) {
+      const n = level || [0]
+      n.push(0)
+      data.forEach((p, i) => {
+        n[n.length - 1] = i
+        p.key = n.join('-')
+        p.scopedSlots = { title: 'title' }
+        if (p.children) {
+          this.generateKey(p.children, Object.assign([], n))
+        }
+      })
+      return data
+    },
+
+    generateList(data) {
+      // 这里获取不到Key
+      for (let i = 0; i < data.length; i++) {
+        const { key, id, title, children } = data[i]
+        this.list.push({ key, id, title });
+        if (children) {
+          this.generateList(children);
+        }
+      }
+    },
+
+    getParentKey(key, tree) {
+      let parentKey;
+      for (let i = 0; i < tree.length; i++) {
+        const node = tree[i];
+        if (node.children) {
+          if (node.children.some(item => item.key === key)) {
+            parentKey = node.key;
+          } else if (this.getParentKey(key, node.children)) {
+            parentKey = this.getParentKey(key, node.children);
+          }
+        }
+      }
+      return parentKey;
+    },
+  },
+
+  render() {
+
+    const swiperOptions = {
+      direction: 'vertical',
+      slidesPerView: 'auto',
+      freeMode: true,
+      scrollbar: true,
+      mousewheel: true,
+    }
+
+    const props = {
+      treeData: this.data,
+      expandedKeys: this.expandedKeys,
+      autoExpandParent: this.autoExpandParent,
+    }
+
+    const on = {
+      expand: this.onExpand,
+      select: this.onSelect
+    }
+
+    const scopedSlots = {
+      title: ({ title }) => {
+        return (
+          <div>
+            {
+              title.indexOf(this.searchValue) > -1 ?
+                <span>
+                  {title.substr(0, title.indexOf(this.searchValue))}
+                  <span style="color: #f50">{this.searchValue}</span>
+                  {title.substr(title.indexOf(this.searchValue) + this.searchValue.length)}
+                </span>
+                :
+                <span>{title}</span>
+            }
+          </div>
+
+        );
+      }
+    }
+
+    return (
+      <a-layout class="yo-tree-layout">
+        <a-layout-sider width="240px">
+          <a-layout-header>
+            <div class="header-actions">
+              <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>
+        </a-layout-sider>
+        <a-layout-content>
+          {this.$scopedSlots.default ? this.$scopedSlots.default() : null}
+        </a-layout-content>
+      </a-layout>
+    )
+  }
+}