From d8509278e9c31459dffc90085fbfabb6d9a60ca6 Mon Sep 17 00:00:00 2001
From: XaoLi717 <144221124+XaoLi717@users.noreply.github.com>
Date: Thu, 25 Jul 2024 09:19:55 +0800
Subject: [PATCH] =?UTF-8?q?/views/bpm/group/DeptTree=5FGroup.vue'=20?=
 =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E8=BF=99=E4=B8=AA=E6=96=87=E4=BB=B6=20?=
 =?UTF-8?q?=E7=94=A8=E4=BA=8E=E4=BA=BA=E5=91=98=E5=88=86=E7=BB=84=E7=9A=84?=
 =?UTF-8?q?=E9=83=A8=E9=97=A8=E9=80=89=E6=8B=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/bpm/group/DeptTree_Group.vue | 62 ++++++++++++++++++++++++++
 1 file changed, 62 insertions(+)
 create mode 100644 src/views/bpm/group/DeptTree_Group.vue

diff --git a/src/views/bpm/group/DeptTree_Group.vue b/src/views/bpm/group/DeptTree_Group.vue
new file mode 100644
index 0000000..e432f17
--- /dev/null
+++ b/src/views/bpm/group/DeptTree_Group.vue
@@ -0,0 +1,62 @@
+<template>
+  <div class="head-container">
+    <el-input v-model="deptName" class="mb-20px" clearable placeholder="请输入部门名称"  style="width: 600PX">
+      <template #prefix>
+        <Icon icon="ep:search" />
+      </template>
+    </el-input>
+  </div>
+  <div class="head-container">
+    <el-tree
+      ref="treeRef"
+      :data="deptList"
+      :expand-on-click-node="false"
+      :filter-node-method="filterNode"
+      :props="defaultProps"
+      highlight-current
+      node-key="id"
+      @node-click="handleNodeClick"
+    />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ElTree } from 'element-plus'
+import * as DeptApi from '@/api/system/dept'
+import { defaultProps, handleTree } from '@/utils/tree'
+
+defineOptions({ name: 'SystemUserDeptTree' })
+
+const deptName = ref('')
+const deptList = ref<Tree[]>([]) // 树形结构
+const treeRef = ref<InstanceType<typeof ElTree>>()
+
+/** 获得部门树 */
+const getTree = async () => {
+  const res = await DeptApi.getSimpleDeptList()
+  deptList.value = []
+  deptList.value.push(...handleTree(res))
+}
+
+/** 基于名字过滤 */
+const filterNode = (name: string, data: Tree) => {
+  if (!name) return true
+  return data.name.includes(name)
+}
+
+/** 处理部门被点击 */
+const handleNodeClick = async (row: { [key: string]: any }) => {
+  emits('node-click', row)
+}
+const emits = defineEmits(['node-click'])
+
+/** 监听deptName */
+watch(deptName, (val) => {
+  treeRef.value!.filter(val)
+})
+
+/** 初始化 */
+onMounted(async () => {
+  await getTree()
+})
+</script>