From cded48a4e63c6db941e12b6afef027f86754f742 Mon Sep 17 00:00:00 2001
From: qinjie <jqinjie@foxmail.com>
Date: Sat, 28 Aug 2021 08:37:30 +0800
Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=A2=9E=E7=BB=84=E7=BB=87=E6=9C=BA?=
 =?UTF-8?q?=E6=9E=84=E6=95=B0=E9=80=89=E6=8B=A9=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/OrgTree/Index.vue | 175 +++++++++++++++++++++++++++++++
 1 file changed, 175 insertions(+)
 create mode 100644 src/components/OrgTree/Index.vue

diff --git a/src/components/OrgTree/Index.vue b/src/components/OrgTree/Index.vue
new file mode 100644
index 0000000..039ff09
--- /dev/null
+++ b/src/components/OrgTree/Index.vue
@@ -0,0 +1,175 @@
+<template>
+  <div class="organization-popover">
+    <!-- :overlayStyle="{paddingTop: '0px', marginTop: '0px', border: '1px solid #1890ff'}" -->
+    <a-popover placement="bottomLeft" trigger="click" overlayClassName="popover-tree">
+      <template slot="content" id="popover-tree">
+        <a-input placeholder="输入关键字进行过滤" @change="onChange" allow-clear></a-input>
+        <!-- 树数据源 :tree-data="treeData" -->
+        <!-- 是否自动展开父节点 :auto-expand-parent="false" -->
+        <!-- 是否节点占据一行 :blockNode="true" -->
+        <!-- 是否展示连接线 showLine 默认false -->
+        <!-- 替换 treeNode 中 title,key,children 字段为 treeData 中对应的字段 replaceFields -->
+        <!-- 默认选中的树节点 defaultSelectedKeys -->
+        <!-- 展开指定的树节点 :expanded-keys="expandedKeys" -->
+        <!-- 点击树节点触发 :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>
+      </template>
+      <a-button class="organization-tree-button" type="primary">组织机构树
+        <a-icon type="down" />
+      </a-button>
+    </a-popover>
+    <div class="organization-tree-organizationName">
+      <p class="">{{ selectTitle || '请选择组织机构树' }}</p>
+    </div>
+  </div>
+</template>
+
+<script>
+// 组件使用方法
+// 1. 引入 import orgTree from '@/components/OrgTree/Index'
+// 2. 注册 components: { orgTree },
+// 3. 在需要展示的位置放置组件
+//    <org-tree defaultOrganizationId="000100020001" @getSelectTreeKey="getSelectTreeKey"></org-tree>
+//    说明
+//      :defaultOrganizationId 传入默认组织机构ID，可为空，会检查传入的组织结构ID是否在组织机构树中，如不存在则会忽略
+//      @getSelectTreeKey 当选中某一个组织机构数节点时的回调，传入默认组织机构ID时也会触发回调
+//
+//    回调函数示例
+//      getSelectTreeKey(key) {
+//        this.organizationId = key;
+//      }
+export default {
+  props: {
+    defaultOrganizationId: 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' }
+              ]
+            },
+          ]
+        }
+      ],
+      filterText: null, // 搜索关键字
+      selectTitle: "", // 选择的组织机构数节点的标题
+      selectKey: "", // 选择的组织机构数节点的Key
+      autoExpandParent: true, // 是否自动展开父节点
+      defaultSelectedKeys: [], // 默认选中的树节点
+      expandedKeys: [], // 展开指定的树节点
+    };
+  },
+  created: function () {
+    // 检查传入的默认显示组织机构节点，如果正确则显示并回调
+    if (this.defaultOrganizationId) {
+      let selectTitle = this.getCurrentTtile(this.defaultOrganizationId, this.treeData);
+      if (selectTitle) {
+        this.defaultSelectedKeys.push(this.defaultOrganizationId);
+        this.selectTitle = selectTitle;
+        this.selectKey = this.defaultOrganizationId;
+        this.$emit('getSelectTreeKey', this.selectKey);
+      }
+    }
+    console.log(this.defaultSelectedKeys)
+  },
+  methods: {
+    // 点击组织机构数节点时调用
+    selectTree(selectedKeys, e) {
+      this.selectKey = e.node.eventKey;
+      this.selectTitle = e.node.title;
+      this.$emit('getSelectTreeKey', this.selectKey);
+    },
+    // 展开/收起节点时触发
+    onExpand(expandedKeys) {
+      this.expandedKeys = expandedKeys;
+      this.autoExpandParent = false;
+    },
+    // 筛选组织机构数方法
+    getParentKey(value, tree) {
+      if (!value) return;
+
+      for (let i = 0; i < tree.length; i++) {
+        const node = tree[i];
+
+        if (node.children) {
+          if (node.children.some(item => item.title.indexOf(value) > -1)) {
+            this.expandedKeys.push(node.key);
+          }
+
+          this.getParentKey(value, node.children);
+        }
+      }
+    },
+    // 获取组织机构树Key的Title
+    getCurrentTtile(key, tree) {
+      if (!key) return;
+
+      for (let i = 0; i < tree.length; i++) {
+        const node = tree[i];
+
+        if (node.key === key) return node.title;
+
+        if (node.children) {
+          return this.getCurrentTtile(key, node.children);
+        }
+      }
+    },
+    // 搜索框内容发生变化时调用
+    onChange(e) {
+      const value = e.target.value;
+      const this_ = this;
+      this.expandedKeys = [];
+      this.getParentKey(value, this.treeData);
+      // console.log(this.expandedKeys);
+      this.filterText = value;
+    },
+  },
+}
+</script>
+
+<style scoped>
+.organization-popover {
+  display: flex;
+  border: 1px solid #ebeef5;
+  height: 40px;
+  margin-top: 8px;
+}
+.organization-popover > .organization-tree-organizationName {
+  background-color: #fff;
+  flex: 1;
+}
+.organization-popover > .organization-tree-organizationName > p {
+  margin: 0;
+  padding: 0 20px;
+  line-height: 40px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 1;
+}
+.organization-tree-button {
+  width: 164px;
+  height: 40px;
+  line-height: 40px;
+  float: left;
+  padding: 0px;
+  font-size: 14px;
+  position: relative;
+  margin-top: -1px;
+}
+</style>
\ No newline at end of file