From 8fee76a84b3f3ba39a18f8311b736ef58a47f726 Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Fri, 4 Apr 2025 15:46:17 +0800
Subject: [PATCH] =?UTF-8?q?feat=EF=BC=9A=E5=A2=9E=E5=8A=A0=20user=20?=
 =?UTF-8?q?=E7=94=A8=E6=88=B7=E7=9A=84=E9=83=A8=E9=97=A8=E7=AD=9B=E9=80=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/web-antd/src/views/system/user/index.vue | 67 ++++++++++------
 .../views/system/user/modules/dept-tree.vue   | 79 +++++++++++++++++++
 2 files changed, 122 insertions(+), 24 deletions(-)
 create mode 100644 apps/web-antd/src/views/system/user/modules/dept-tree.vue

diff --git a/apps/web-antd/src/views/system/user/index.vue b/apps/web-antd/src/views/system/user/index.vue
index 94339d8d6..0ca1a5615 100644
--- a/apps/web-antd/src/views/system/user/index.vue
+++ b/apps/web-antd/src/views/system/user/index.vue
@@ -1,15 +1,18 @@
 <script lang="ts" setup>
 import type { OnActionClickParams, VxeTableGridOptions } from '#/adapter/vxe-table';
 import type { SystemUserApi } from '#/api/system/user';
+import type { SystemDeptApi } from '#/api/system/dept';
 
 import { Page, useVbenModal } from '@vben/common-ui';
-import { Button, message, Modal } from 'ant-design-vue';
+import { Button, message, Modal, Row, Col } from 'ant-design-vue';
 import { Plus, Download } from '@vben/icons';
 import Form from './modules/form.vue';
 import ResetPasswordForm from './modules/reset-password-form.vue';
 import AssignRoleForm from './modules/assign-role-form.vue';
+import DeptTree from './modules/dept-tree.vue';
 
 import { $t } from '#/locales';
+import { ref } from 'vue';
 import { useVbenVxeGrid } from '#/adapter/vxe-table';
 import { getUserPage, deleteUser, exportUser, updateUserStatus } from '#/api/system/user';
 import { downloadByData } from '#/utils/download';
@@ -43,6 +46,13 @@ async function onExport() {
   downloadByData(data, '用户.xls');
 }
 
+/** 选择部门 */
+const searchDeptId = ref<number | undefined>(undefined);
+async function onDeptSelect (dept: SystemDeptApi.SystemDept) {
+  searchDeptId.value = dept.id;
+  onRefresh();
+}
+
 /** 创建用户 */
 function onCreate() {
   formModalApi.setData(null).open();
@@ -94,18 +104,16 @@ async function onStatusChange(newStatus: number, row: SystemUserApi.SystemUser):
       },
       onOk() {
         // 更新用户状态
-        updateUserStatus(row.id as number, newStatus)
-          .then(() => {
-            // 提示并返回成功
-            message.success({
-              content: $t('ui.actionMessage.operationSuccess'),
-              key: 'action_process_msg',
-            });
-            resolve(true);
-          })
-          .catch((error) => {
-            reject(error);
+        updateUserStatus(row.id as number, newStatus).then(() => {
+          // 提示并返回成功
+          message.success({
+            content: $t('ui.actionMessage.operationSuccess'),
+            key: 'action_process_msg',
           });
+          resolve(true);
+        }).catch((error) => {
+          reject(error);
+        });
       },
     });
   });
@@ -151,6 +159,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
             pageNo: page.currentPage,
             pageSize: page.pageSize,
             ...formValues,
+            deptId: searchDeptId.value,
           });
         },
       },
@@ -171,17 +180,27 @@ const [Grid, gridApi] = useVbenVxeGrid({
     <FormModal @success="onRefresh" />
     <ResetPasswordModal @success="onRefresh" />
     <AssignRoleModal @success="onRefresh" />
-    <Grid table-title="用户列表">
-      <template #toolbar-tools>
-        <Button type="primary" @click="onCreate">
-          <Plus class="size-5" />
-          {{ $t('ui.actionTitle.create', ['用户']) }}
-        </Button>
-        <Button type="primary" class="ml-2" @click="onExport">
-          <Download class="size-5" />
-          {{ $t('ui.actionTitle.export') }}
-        </Button>
-      </template>
-    </Grid>
+
+    <div class="flex h-full">
+      <!-- 左侧部门树 -->
+      <div class="w-4/24 pr-3">
+        <DeptTree @select="onDeptSelect" />
+      </div>
+      <!-- 右侧用户列表 -->
+      <div class="w-18/24">
+        <Grid table-title="用户列表">
+          <template #toolbar-tools>
+            <Button type="primary" @click="onCreate">
+              <Plus class="size-5" />
+              {{ $t('ui.actionTitle.create', ['用户']) }}
+            </Button>
+            <Button type="primary" class="ml-2" @click="onExport">
+              <Download class="size-5" />
+              {{ $t('ui.actionTitle.export') }}
+            </Button>
+          </template>
+        </Grid>
+      </div>
+    </div>
   </Page>
 </template>
diff --git a/apps/web-antd/src/views/system/user/modules/dept-tree.vue b/apps/web-antd/src/views/system/user/modules/dept-tree.vue
new file mode 100644
index 000000000..bcfe0daef
--- /dev/null
+++ b/apps/web-antd/src/views/system/user/modules/dept-tree.vue
@@ -0,0 +1,79 @@
+<script lang="ts" setup>
+import type { SystemDeptApi } from '#/api/system/dept';
+
+import { Tree, Input, Spin } from 'ant-design-vue';
+
+import { ref, onMounted } from 'vue';
+import { Search } from '@vben/icons';
+import { getDeptList } from '#/api/system/dept';
+import { handleTree } from '#/utils/tree';
+
+const emit = defineEmits(['select']);
+const deptList = ref<SystemDeptApi.SystemDept[]>([]); // 部门列表
+const deptTree = ref<any[]>([]); // 部门树
+const expandedKeys = ref<number[]>([]); // 展开的节点
+const loading = ref(false); // 加载状态
+const searchValue = ref(''); // 搜索值
+
+/** 处理搜索逻辑 */
+function handleSearch(e: any) {
+  const value = e.target.value;
+  searchValue.value = value;
+  const filteredList = value ? deptList.value.filter(item =>
+    item.name.toLowerCase().includes(value.toLowerCase())
+  ) : deptList.value;
+  deptTree.value = handleTree(filteredList);
+  // 展开所有节点
+  expandedKeys.value = deptTree.value.map(node => node.id as number);
+}
+
+/** 选中部门 */
+const handleSelect = (_selectedKeys: any[], info: any) => {
+  emit('select', info.node.dataRef);
+};
+
+/** 初始化 */
+onMounted(async () => {
+  try {
+    loading.value = true;
+    const data = await getDeptList();
+    deptList.value = data;
+    deptTree.value = handleTree(data);
+  } catch (error) {
+    console.error('获取部门数据失败', error);
+  } finally {
+    loading.value = false;
+  }
+});
+</script>
+
+<template>
+  <div>
+    <div class="mb-2">
+      <Input
+        placeholder="搜索部门"
+        allowClear
+        v-model:value="searchValue"
+        @change="handleSearch"
+        class="w-full"
+      >
+        <template #prefix>
+          <Search class="size-4" />
+        </template>
+      </Input>
+    </div>
+    <Spin :spinning="loading">
+      <Tree
+        class="pt-2"
+        v-if="deptTree.length > 0"
+        :tree-data="deptTree"
+        :fieldNames="{ title: 'name', key: 'id', children: 'children' }"
+        @select="handleSelect"
+        :defaultExpandAll="true"
+      />
+      <div v-else-if="!loading" class="text-center text-gray-500 py-4">
+        暂无数据
+      </div>
+    </Spin>
+  </div>
+</template>