引入并注册Empty，组织结构树选择组件新增起始节点

src/components/OrgTree/Index.vue

@@ -1,9 +1,12 @@
 <template>
   <div class="organization-popover">
-    <!-- :overlayStyle="{paddingTop: '0px', marginTop: '0px', border: '1px solid #1890ff'}" -->
+    <!-- 气泡框位置 placement="bottomLeft" -->
-    <a-popover placement="bottomLeft" trigger="click" overlayClassName="popover-tree">
+    <!-- 触发行为 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,11 +46,23 @@
 export default {
   props: {
     defaultOrganizationId: String, // 默认显示的组织机构节点
+    startOrganizationId: String, // 组织机构数从那个节点开始显示
   },
   data() {
     return {
       // 组织机构树的数据，后续应该从localStorage取
-      treeData: [
+      treeData: [],
+      filterText: null, // 搜索关键字
+      selectTitle: "", // 选择的组织机构数节点的标题
+      selectKey: "", // 选择的组织机构数节点的Key
+      autoExpandParent: true, // 是否自动展开父节点
+      defaultSelectedKeys: [], // 默认选中的树节点
+      expandedKeys: [], // 展开指定的树节点
+    };
+  },
+  created: function () {
+    // 组织机构树数据源过滤
+    const listData = [
       {
         title: '三峡大学',
         key: '0001',
@@ -64,22 +80,21 @@ export default {
           },
         ]
       }
-      ],
+    ];
-      filterText: null, // 搜索关键字
+    if (!this.startOrganizationId) {
-      selectTitle: "", // 选择的组织机构数节点的标题
+      this.treeData = listData;
-      selectKey: "", // 选择的组织机构数节点的Key
+    } else {
-      autoExpandParent: true, // 是否自动展开父节点
+      let currentNode = this.getCurrentNode(this.startOrganizationId, listData);
-      defaultSelectedKeys: [], // 默认选中的树节点
+      if (currentNode) this.treeData.push(currentNode);
-      expandedKeys: [], // 展开指定的树节点
+    }
-    };
+
-  },
+
-  created: function () {
     // 检查传入的默认显示组织机构节点，如果正确则显示并回调
     if (this.defaultOrganizationId) {
-      let selectTitle = this.getCurrentTtile(this.defaultOrganizationId, this.treeData);
+      let currentNode = this.getCurrentNode(this.defaultOrganizationId, this.treeData);
-      if (selectTitle) {
+      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) {
+    getCurrentNode(key, tree) {
-      if (!key) return;
+      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) {

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