基础设置

src/views/Basic/User/DeptTree.vue

@@ -0,0 +1,108 @@
+<template>
+  <div class="head-container">
+    <el-input v-model="deptName" class="mb-20px" clearable placeholder="请输入部门名称">
+      <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"
+      default-expand-all
+      highlight-current
+      node-key="id"
+      @node-click="handleNodeClick"
+    />
+  </div>
+</template>
+
+<script lang="ts" name="SystemUserDeptTree" setup>
+import { ElTree } from 'element-plus'
+// import * as DeptApi from '@/api/system/dept'
+import { defaultProps, handleTree } from '@/utils/tree'
+
+const deptName = ref('')
+const deptList = ref<Tree[]>([]) // 树形结构
+const treeRef = ref<InstanceType<typeof ElTree>>()
+
+/** 获得部门树 */
+const getTree = async () => {
+  // const res = await DeptApi.getSimpleDeptList()
+  const res = [
+    {
+      id: 100,
+      name: '芋道源码',
+      parentId: 0
+    },
+    {
+      id: 101,
+      name: '深圳总公司',
+      parentId: 100
+    },
+    {
+      id: 103,
+      name: '研发部门',
+      parentId: 101
+    },
+    {
+      id: 108,
+      name: '市场部门',
+      parentId: 102
+    },
+    {
+      id: 102,
+      name: '长沙分公司',
+      parentId: 100
+    },
+    {
+      id: 104,
+      name: '市场部门',
+      parentId: 101
+    },
+    {
+      id: 109,
+      name: '财务部门',
+      parentId: 102
+    },
+    {
+      id: 105,
+      name: '测试部门',
+      parentId: 101
+    },
+    {
+      id: 106,
+      name: '财务部门',
+      parentId: 101
+    },
+    {
+      id: 107,
+      name: '运维部门',
+      parentId: 101
+    }
+  ]
+  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'])
+
+/** 初始化 */
+onMounted(async () => {
+  await getTree()
+})
+</script>