From 64631ef5d0bfe722740d180746f5d0a8768c049e Mon Sep 17 00:00:00 2001
From: qinjie <jqinjie@foxmail.com>
Date: Sat, 28 Aug 2021 10:42:15 +0800
Subject: [PATCH] =?UTF-8?q?=E5=BC=95=E5=85=A5=E5=B9=B6=E6=B3=A8=E5=86=8CEm?=
 =?UTF-8?q?pty=EF=BC=8C=E7=BB=84=E7=BB=87=E7=BB=93=E6=9E=84=E6=A0=91?=
 =?UTF-8?q?=E9=80=89=E6=8B=A9=E7=BB=84=E4=BB=B6=E6=96=B0=E5=A2=9E=E8=B5=B7?=
 =?UTF-8?q?=E5=A7=8B=E8=8A=82=E7=82=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/OrgTree/Index.vue | 75 ++++++++++++++++++++------------
 src/core/lazy_use.js             |  4 +-
 2 files changed, 49 insertions(+), 30 deletions(-)

diff --git a/src/components/OrgTree/Index.vue b/src/components/OrgTree/Index.vue
index 039ff09..3574225 100644
--- a/src/components/OrgTree/Index.vue
+++ b/src/components/OrgTree/Index.vue
@@ -1,9 +1,12 @@
 <template>
   <div class="organization-popover">
-    <!-- :overlayStyle="{paddingTop: '0px', marginTop: '0px', border: '1px solid #1890ff'}" -->
-    <a-popover placement="bottomLeft" trigger="click" overlayClassName="popover-tree">
+    <!-- 气泡框位置 placement="bottomLeft" -->
+    <!-- 触发行为 trigger="click" -->
+    <!-- 卡片类名 overlayClassName="popover-tree" 注意这里的css类要放到index.html才会生效-->
+    <!-- 隐藏后是否销毁 :destroyTooltipOnHide="true" -->
+    <a-popover placement="bottomLeft" trigger="click" overlayClassName="popover-tree" :destroyTooltipOnHide="true">
       <template slot="content" id="popover-tree">
-        <a-input placeholder="输入关键字进行过滤" @change="onChange" allow-clear></a-input>
+        <a-input placeholder="输入关键字进行过滤" @change="onChange" allow-clear v-show="treeData.length != 0"></a-input>
         <!-- 树数据源 :tree-data="treeData" -->
         <!-- 是否自动展开父节点 :auto-expand-parent="false" -->
         <!-- 是否节点占据一行 :blockNode="true" -->
@@ -14,6 +17,7 @@
         <!-- 点击树节点触发 :select="selectTree" -->
         <!-- 展开/收起节点时触发 @expand="onExpand" -->
         <a-tree :tree-data="treeData" :auto-expand-parent="autoExpandParent" :blockNode="true" :defaultSelectedKeys="defaultSelectedKeys" :expanded-keys="expandedKeys" @select="selectTree" @expand="onExpand"></a-tree>
+        <a-empty v-show="treeData.length == 0" description="没有找到组织机构树数据" :image-style="{height: '60px', marginTop: '10px'}" />
       </template>
       <a-button class="organization-tree-button" type="primary">组织机构树
         <a-icon type="down" />
@@ -42,29 +46,12 @@
 export default {
   props: {
     defaultOrganizationId: String, // 默认显示的组织机构节点
+    startOrganizationId: String, // 组织机构数从那个节点开始显示
   },
   data() {
     return {
       // 组织机构树的数据，后续应该从localStorage取
-      treeData: [
-        {
-          title: '三峡大学',
-          key: '0001',
-          children: [
-            { title: '三峡大学文学院', key: '00010001' },
-            {
-              title: '三峡大学水利学院', key: '00010002', children: [
-                { title: '三峡大学水利学院第一学院', key: '000100020001' },
-                { title: '三峡大学水利学院第二学院', key: '000100020002' },
-                { title: '三峡大学水利学院第三学院', key: '000100020003' },
-                { title: '三峡大学水利学院第四学院', key: '000100020004' },
-                { title: '三峡大学水利学院第五学院', key: '000100020005' },
-                { title: '三峡大学水利学院第六学院', key: '000100020006' }
-              ]
-            },
-          ]
-        }
-      ],
+      treeData: [],
       filterText: null, // 搜索关键字
       selectTitle: "", // 选择的组织机构数节点的标题
       selectKey: "", // 选择的组织机构数节点的Key
@@ -74,12 +61,40 @@ export default {
     };
   },
   created: function () {
+    // 组织机构树数据源过滤
+    const listData = [
+      {
+        title: '三峡大学',
+        key: '0001',
+        children: [
+          { title: '三峡大学文学院', key: '00010001' },
+          {
+            title: '三峡大学水利学院', key: '00010002', children: [
+              { title: '三峡大学水利学院第一学院', key: '000100020001' },
+              { title: '三峡大学水利学院第二学院', key: '000100020002' },
+              { title: '三峡大学水利学院第三学院', key: '000100020003' },
+              { title: '三峡大学水利学院第四学院', key: '000100020004' },
+              { title: '三峡大学水利学院第五学院', key: '000100020005' },
+              { title: '三峡大学水利学院第六学院', key: '000100020006' }
+            ]
+          },
+        ]
+      }
+    ];
+    if (!this.startOrganizationId) {
+      this.treeData = listData;
+    } else {
+      let currentNode = this.getCurrentNode(this.startOrganizationId, listData);
+      if (currentNode) this.treeData.push(currentNode);
+    }
+
+
     // 检查传入的默认显示组织机构节点，如果正确则显示并回调
     if (this.defaultOrganizationId) {
-      let selectTitle = this.getCurrentTtile(this.defaultOrganizationId, this.treeData);
-      if (selectTitle) {
+      let currentNode = this.getCurrentNode(this.defaultOrganizationId, this.treeData);
+      if (currentNode) {
         this.defaultSelectedKeys.push(this.defaultOrganizationId);
-        this.selectTitle = selectTitle;
+        this.selectTitle = currentNode.title;
         this.selectKey = this.defaultOrganizationId;
         this.$emit('getSelectTreeKey', this.selectKey);
       }
@@ -115,18 +130,20 @@ export default {
       }
     },
     // 获取组织机构树Key的Title
-    getCurrentTtile(key, tree) {
-      if (!key) return;
+    getCurrentNode(key, tree) {
+      if (!key) return null;
 
       for (let i = 0; i < tree.length; i++) {
         const node = tree[i];
 
-        if (node.key === key) return node.title;
+        if (node.key === key) return node;
 
         if (node.children) {
-          return this.getCurrentTtile(key, node.children);
+          return this.getCurrentNode(key, node.children);
         }
       }
+
+      return null;
     },
     // 搜索框内容发生变化时调用
     onChange(e) {
diff --git a/src/core/lazy_use.js b/src/core/lazy_use.js
index 2cbaf09..45c00e5 100644
--- a/src/core/lazy_use.js
+++ b/src/core/lazy_use.js
@@ -47,7 +47,8 @@ import {
   notification,
   space,
   Transfer,
-  Tree
+  Tree,
+  Empty
 } from 'ant-design-vue'
 import Viser from 'viser-vue'
 
@@ -103,6 +104,7 @@ Vue.use(Descriptions)
 Vue.use(space)
 Vue.use(Tree)
 Vue.use(Transfer)
+Vue.use(Empty)
 
 Vue.prototype.$confirm = Modal.confirm
 Vue.prototype.$message = message