From cdbb1a3117d3a3bb7e5ed54e2b6735d345ee7a20 Mon Sep 17 00:00:00 2001
From: Wu Clan <jianhengwu0407@gmail.com>
Date: Mon, 21 Apr 2025 00:33:47 +0800
Subject: [PATCH] feat: add the admin dept view

---
 apps/web-antd/src/adapter/vxe-table.ts       | 145 +++++++-
 apps/web-antd/src/api/api.ts                 |   2 +-
 apps/web-antd/src/api/auth.ts                |   2 +-
 apps/web-antd/src/api/dept.ts                |  71 ++++
 apps/web-antd/src/api/index.ts               |   1 +
 apps/web-antd/src/api/log.ts                 |   8 +-
 apps/web-antd/src/api/menu.ts                |   6 +-
 apps/web-antd/src/api/monitor.ts             |   4 +-
 apps/web-antd/src/api/role.ts                |   2 +-
 apps/web-antd/src/views/admin/dept/index.vue | 331 ++++++++++++++++++-
 packages/icons/src/iconify/index.ts          |   2 +
 11 files changed, 556 insertions(+), 18 deletions(-)
 create mode 100644 apps/web-antd/src/api/dept.ts

diff --git a/apps/web-antd/src/adapter/vxe-table.ts b/apps/web-antd/src/adapter/vxe-table.ts
index d82acec20..2015dbf49 100644
--- a/apps/web-antd/src/adapter/vxe-table.ts
+++ b/apps/web-antd/src/adapter/vxe-table.ts
@@ -2,11 +2,13 @@ import type { Recordable } from '@vben/types';
 
 import { h } from 'vue';
 
+import { IconifyIcon } from '@vben/icons';
+import { $te } from '@vben/locales';
 import { setupVbenVxeTable, useVbenVxeGrid } from '@vben/plugins/vxe-table';
-import { get } from '@vben/utils';
+import { get, isFunction, isString } from '@vben/utils';
 
 import { objectOmit } from '@vueuse/core';
-import { Button, Image, Switch, Tag } from 'ant-design-vue';
+import { Button, Image, Popconfirm, Switch, Tag } from 'ant-design-vue';
 
 import { $t } from '#/locales';
 
@@ -31,7 +33,7 @@ setupVbenVxeTable({
           response: {
             result: 'items',
             total: 'total',
-            list: 'items',
+            list: '',
           },
           showActiveMsg: true,
           showResponseMsg: false,
@@ -119,6 +121,143 @@ setupVbenVxeTable({
       },
     });
 
+    /**
+     * 注册表格的操作按钮渲染器
+     */
+    vxeUI.renderer.add('CellOperation', {
+      renderTableDefault({ attrs, options, props }, { column, row }) {
+        const defaultProps = { size: 'small', type: 'link', ...props };
+        let align = 'end';
+        switch (column.align) {
+          case 'center': {
+            align = 'center';
+            break;
+          }
+          case 'left': {
+            align = 'start';
+            break;
+          }
+          default: {
+            align = 'end';
+            break;
+          }
+        }
+        const presets: Recordable<Recordable<any>> = {
+          delete: {
+            danger: true,
+            text: $t('common.delete'),
+          },
+          edit: {
+            text: $t('common.edit'),
+          },
+        };
+        const operations: Array<Recordable<any>> = (
+          options || ['edit', 'delete']
+        )
+          .map((opt) => {
+            if (isString(opt)) {
+              return presets[opt]
+                ? { code: opt, ...presets[opt], ...defaultProps }
+                : {
+                    code: opt,
+                    text: $te(`common.${opt}`) ? $t(`common.${opt}`) : opt,
+                    ...defaultProps,
+                  };
+            } else {
+              return { ...defaultProps, ...presets[opt.code], ...opt };
+            }
+          })
+          .map((opt) => {
+            const optBtn: Recordable<any> = {};
+            Object.keys(opt).forEach((key) => {
+              optBtn[key] = isFunction(opt[key]) ? opt[key](row) : opt[key];
+            });
+            return optBtn;
+          })
+          .filter((opt) => opt.show !== false);
+
+        function renderBtn(opt: Recordable<any>, listen = true) {
+          return h(
+            Button,
+            {
+              ...props,
+              ...opt,
+              icon: undefined,
+              onClick: listen
+                ? () =>
+                    attrs?.onClick?.({
+                      code: opt.code,
+                      row,
+                    })
+                : undefined,
+            },
+            {
+              default: () => {
+                const content = [];
+                if (opt.icon) {
+                  content.push(
+                    h(IconifyIcon, { class: 'size-5', icon: opt.icon }),
+                  );
+                }
+                content.push(opt.text);
+                return content;
+              },
+            },
+          );
+        }
+
+        function renderConfirm(opt: Recordable<any>) {
+          return h(
+            Popconfirm,
+            {
+              getPopupContainer(el) {
+                return (
+                  el
+                    .closest('.vxe-table--viewport-wrapper')
+                    ?.querySelector('.vxe-table--main-wrapper')
+                    ?.querySelector('tbody') || document.body
+                );
+              },
+              placement: 'topLeft',
+              title: $t('ui.actionTitle.delete', [attrs?.nameTitle || '']),
+              ...props,
+              ...opt,
+              icon: undefined,
+              onConfirm: () => {
+                attrs?.onClick?.({
+                  code: opt.code,
+                  row,
+                });
+              },
+            },
+            {
+              default: () => renderBtn({ ...opt }, false),
+              description: () =>
+                h(
+                  'div',
+                  { class: 'truncate' },
+                  $t('ui.actionMessage.deleteConfirm', [
+                    row[attrs?.nameField || 'name'],
+                  ]),
+                ),
+            },
+          );
+        }
+
+        const btns = operations.map((opt) =>
+          opt.code === 'delete' ? renderConfirm(opt) : renderBtn(opt),
+        );
+        return h(
+          'div',
+          {
+            class: 'flex table-operations',
+            style: { justifyContent: align },
+          },
+          btns,
+        );
+      },
+    });
+
     // 这里可以自行扩展 vxe-table 的全局配置，比如自定义格式化
     // vxeUI.formats.add
   },
diff --git a/apps/web-antd/src/api/api.ts b/apps/web-antd/src/api/api.ts
index 3ee51be32..a35c75c5d 100644
--- a/apps/web-antd/src/api/api.ts
+++ b/apps/web-antd/src/api/api.ts
@@ -21,6 +21,6 @@ export interface SysApiResult {
 /**
  * 获取系统 API 列表
  */
-export function getSysApiList(params: SysApiParams) {
+export async function getSysApiList(params: SysApiParams) {
   return requestClient.get<PaginationResult>('/api/v1/sys/apis', { params });
 }
diff --git a/apps/web-antd/src/api/auth.ts b/apps/web-antd/src/api/auth.ts
index 9296712ab..723be42a1 100644
--- a/apps/web-antd/src/api/auth.ts
+++ b/apps/web-antd/src/api/auth.ts
@@ -24,7 +24,7 @@ export type RefreshTokenResult = LoginResult;
 /**
  * 登录验证码
  */
-export function getCaptchaApi() {
+export async function getCaptchaApi() {
   return requestClient.get<CaptchaResult>('/api/v1/auth/captcha');
 }
 
diff --git a/apps/web-antd/src/api/dept.ts b/apps/web-antd/src/api/dept.ts
new file mode 100644
index 000000000..dda143578
--- /dev/null
+++ b/apps/web-antd/src/api/dept.ts
@@ -0,0 +1,71 @@
+import { requestClient } from './request';
+
+export interface SysDeptResult {
+  id: number;
+  name: string;
+  parent_id: number;
+  sort: number;
+  leader?: string;
+  phone?: string;
+  email?: string;
+  status: number;
+  created_time: string;
+}
+
+export interface SysDeptTreeResult extends SysDeptResult {
+  children?: SysDeptTreeResult[];
+}
+
+export interface SysDeptParams {
+  name: string;
+  parent_id?: number;
+  sort?: number;
+  leader?: string;
+  phone?: string;
+  email?: string;
+  status: number;
+}
+
+export interface SysDeptTreeParams {
+  name?: string;
+  leader?: string;
+  phone?: string;
+  status?: number;
+}
+
+/**
+ * 获取部门树
+ */
+export async function getSysDeptTree(params: SysDeptTreeParams) {
+  return requestClient.get<SysDeptTreeResult[]>('/api/v1/sys/depts', {
+    params,
+  });
+}
+
+/**
+ * 获取部门详情
+ */
+export async function getSysDeptDetail(pk: number) {
+  return requestClient.get<SysDeptTreeResult>(`/api/v1/sys/depts/${pk}`);
+}
+
+/**
+ * 创建部门
+ */
+export async function createSysDept(data: SysDeptParams) {
+  return requestClient.post('/api/v1/sys/depts', data);
+}
+
+/**
+ * 更新部门
+ */
+export async function updateSysDept(pk: number, data: SysDeptParams) {
+  return requestClient.put(`/api/v1/sys/depts/${pk}`, data);
+}
+
+/**
+ * 删除部门
+ */
+export async function deleteSysDept(pk: number) {
+  return requestClient.delete(`/api/v1/sys/depts/${pk}`);
+}
diff --git a/apps/web-antd/src/api/index.ts b/apps/web-antd/src/api/index.ts
index 02d6e7902..b6460fdd9 100644
--- a/apps/web-antd/src/api/index.ts
+++ b/apps/web-antd/src/api/index.ts
@@ -1,5 +1,6 @@
 export * from './api';
 export * from './auth';
+export * from './dept';
 export * from './log';
 export * from './menu';
 export * from './monitor';
diff --git a/apps/web-antd/src/api/log.ts b/apps/web-antd/src/api/log.ts
index aed47d0d0..2ee007fbb 100644
--- a/apps/web-antd/src/api/log.ts
+++ b/apps/web-antd/src/api/log.ts
@@ -13,7 +13,7 @@ export interface LoginLogParams {
 export interface LoginLogResult {
   id: number;
   username: string;
-  status: 0 | 1;
+  status: number;
   ip: string;
   country?: string;
   region?: string;
@@ -39,17 +39,17 @@ export interface OperaLogResult {
   browser?: string;
   device?: string;
   args?: JSON;
-  status: 0 | 1;
+  status: number;
   code: string;
   msg: string;
   cost_time: number;
   opera_time: string;
 }
 
-export function getLoginLogListApi(params: LoginLogParams) {
+export async function getLoginLogListApi(params: LoginLogParams) {
   return requestClient.get<PaginationResult>('/api/v1/logs/login', { params });
 }
 
-export function getOperaLogListApi(params: OperaLogParams) {
+export async function getOperaLogListApi(params: OperaLogParams) {
   return requestClient.get<PaginationResult>('/api/v1/logs/opera', { params });
 }
diff --git a/apps/web-antd/src/api/menu.ts b/apps/web-antd/src/api/menu.ts
index 6d2bc9c80..ec28ee5a2 100644
--- a/apps/web-antd/src/api/menu.ts
+++ b/apps/web-antd/src/api/menu.ts
@@ -12,9 +12,9 @@ export interface SysMenuResult {
   type: number;
   component?: string;
   perms?: string;
-  status: 0 | 1;
-  display: 0 | 1;
-  cache: 0 | 1;
+  status: number;
+  display: number;
+  cache: number;
   remark?: string;
   parent_id?: number;
   created_time: string;
diff --git a/apps/web-antd/src/api/monitor.ts b/apps/web-antd/src/api/monitor.ts
index 2460f2a31..cb5f91e14 100644
--- a/apps/web-antd/src/api/monitor.ts
+++ b/apps/web-antd/src/api/monitor.ts
@@ -13,10 +13,10 @@ export interface RedisMonitorResult {
   stats: Record<string, any>[];
 }
 
-export function getServerMonitor() {
+export async function getServerMonitor() {
   return requestClient.get<ServerMonitorResult>('/api/v1/monitors/server');
 }
 
-export function getRedisMonitor() {
+export async function getRedisMonitor() {
   return requestClient.get<RedisMonitorResult>('/api/v1/monitors/redis');
 }
diff --git a/apps/web-antd/src/api/role.ts b/apps/web-antd/src/api/role.ts
index 1f09403f3..baad6eb4f 100644
--- a/apps/web-antd/src/api/role.ts
+++ b/apps/web-antd/src/api/role.ts
@@ -22,6 +22,6 @@ export interface SysRoleResult {
 /**
  * 获取系统角色列表
  */
-export function getSysRoleList(params: SysRoleParams) {
+export async function getSysRoleList(params: SysRoleParams) {
   return requestClient.get<SysRoleResult>('/api/v1/sys/roles', { params });
 }
diff --git a/apps/web-antd/src/views/admin/dept/index.vue b/apps/web-antd/src/views/admin/dept/index.vue
index 0102cc38c..2bbc3c443 100644
--- a/apps/web-antd/src/views/admin/dept/index.vue
+++ b/apps/web-antd/src/views/admin/dept/index.vue
@@ -1,5 +1,330 @@
+<script lang="ts" setup>
+import type {
+  OnActionClickParams,
+  VxeTableGridOptions,
+} from '#/adapter/vxe-table';
+import type { SysDeptParams, SysDeptTreeResult } from '#/api';
+
+import { computed, ref } from 'vue';
+
+import {
+  Page,
+  useVbenForm,
+  useVbenModal,
+  VbenButton,
+  z,
+} from '@vben/common-ui';
+import { AddData } from '@vben/icons';
+import { $t } from '@vben/locales';
+
+import { message } from 'ant-design-vue';
+
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import {
+  createSysDept,
+  deleteSysDept,
+  getSysDeptTree,
+  updateSysDept,
+} from '#/api';
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    collapsed: true,
+    showCollapseButton: true,
+    submitButtonOptions: {
+      content: $t('page.form.query'),
+    },
+    schema: [
+      {
+        component: 'Input',
+        componentProps: {
+          placeholder: '请输入部门名称',
+        },
+        fieldName: 'name',
+        label: '部门名称',
+      },
+      {
+        component: 'Input',
+        componentProps: {
+          placeholder: '请输入负责人',
+        },
+        fieldName: 'leader',
+        label: '负责人',
+      },
+      {
+        component: 'Input',
+        componentProps: {
+          placeholder: '请输入手机号号码',
+        },
+        fieldName: 'phone',
+        label: '手机号码',
+      },
+      {
+        component: 'Select',
+        componentProps: {
+          allowClear: true,
+          options: [
+            {
+              label: '正常',
+              value: 1,
+            },
+            {
+              label: '停用',
+              value: 0,
+            },
+          ],
+          placeholder: $t('page.form.select'),
+        },
+        fieldName: 'status',
+        label: $t('page.form.status'),
+      },
+    ],
+  },
+  gridOptions: {
+    exportConfig: {},
+    printConfig: {},
+    toolbarConfig: {
+      export: true,
+      print: true,
+      refresh: { code: 'query' },
+      custom: true,
+      zoom: true,
+    },
+    pagerConfig: {
+      enabled: false,
+    },
+    treeConfig: {
+      parentField: 'parent_id',
+    },
+    columns: [
+      { field: 'name', title: '名称', align: 'left', treeNode: true },
+      { field: 'sort', title: '排序' },
+      { field: 'leader', title: '负责人' },
+      { field: 'phone', title: '手机号码' },
+      { field: 'email', title: '邮箱' },
+      {
+        field: 'status',
+        title: '状态',
+        cellRender: {
+          name: 'CellTag',
+          options: [
+            { color: 'success', label: '正常', value: 1 },
+            { color: 'error', label: '停用', value: 0 },
+          ],
+        },
+      },
+      {
+        field: 'created_time',
+        title: $t('page.table.created_time'),
+        width: 168,
+      },
+      {
+        field: 'operation',
+        title: $t('page.table.operation'),
+        align: 'center',
+        fixed: 'right',
+        width: 200,
+        cellRender: {
+          attrs: {
+            nameField: 'name',
+            onClick: onActionClick,
+          },
+          name: 'CellOperation',
+          options: [
+            {
+              code: 'add',
+              text: '新增下级',
+            },
+            'edit',
+            {
+              code: 'delete',
+              disabled: (row: SysDeptTreeResult) => {
+                return row.id === 1;
+              },
+            },
+          ],
+        },
+      },
+    ],
+    proxyConfig: {
+      ajax: {
+        query: async (_, formValues) => {
+          return await getSysDeptTree({ ...formValues });
+        },
+      },
+    },
+  } as VxeTableGridOptions<SysDeptTreeResult[]>,
+});
+
+function onRefresh() {
+  gridApi.query();
+}
+
+const expandAll = () => {
+  gridApi.grid?.setAllTreeExpand(true);
+};
+
+const collapseAll = () => {
+  gridApi.grid?.setAllTreeExpand(false);
+};
+
+const [Form, formApi] = useVbenForm({
+  layout: 'vertical',
+  showDefaultActions: false,
+  schema: [
+    {
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入部门名称',
+      },
+      fieldName: 'name',
+      label: '部门名称',
+      rules: 'required',
+    },
+    {
+      component: 'ApiTreeSelect',
+      componentProps: {
+        allowClear: true,
+        api: getSysDeptTree,
+        class: 'w-full',
+        labelField: 'name',
+        valueField: 'id',
+        childrenField: 'children',
+      },
+      fieldName: 'parent_id',
+      label: '父级部门',
+    },
+    {
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入负责人名称',
+      },
+      fieldName: 'leader',
+      label: '负责人',
+    },
+    {
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入手机号码',
+        allowClear: true,
+      },
+      fieldName: 'phone',
+      label: '手机号码',
+    },
+    {
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入邮箱',
+        allowClear: true,
+      },
+      fieldName: 'email',
+      label: '邮箱地址',
+      rules: z.string().email({ message: '无效的邮箱地址' }).optional(),
+    },
+    {
+      component: 'RadioGroup',
+      componentProps: {
+        buttonStyle: 'solid',
+        options: [
+          { label: $t('common.enabled'), value: 1 },
+          { label: $t('common.disabled'), value: 0 },
+        ],
+        optionType: 'button',
+      },
+      defaultValue: 1,
+      fieldName: 'status',
+      label: '状态',
+      rules: 'required',
+    },
+  ],
+});
+
+interface formSysDeptParams extends SysDeptParams {
+  id?: number;
+}
+
+const formData = ref<formSysDeptParams>();
+
+const modalTitle = computed(() => {
+  return formData.value?.id
+    ? $t('ui.actionTitle.edit', ['部门'])
+    : $t('ui.actionTitle.create', ['部门']);
+});
+
+const [Modal, modalApi] = useVbenModal({
+  destroyOnClose: true,
+  async onConfirm() {
+    const { valid } = await formApi.validate();
+    if (valid) {
+      modalApi.lock();
+      const data = await formApi.getValues<SysDeptParams>();
+      try {
+        await (formData.value?.id
+          ? updateSysDept(formData.value.id, data)
+          : createSysDept(data));
+        modalApi.close();
+        onRefresh();
+      } finally {
+        modalApi.unlock();
+      }
+    }
+  },
+  onOpenChange(isOpen) {
+    if (isOpen) {
+      const data = modalApi.getData<formSysDeptParams>();
+      if (data) {
+        if (data.parent_id === 0) {
+          data.parent_id = undefined;
+        }
+        formData.value = data;
+        formApi.setValues(formData.value);
+      }
+    }
+  },
+});
+
+function onActionClick({ code, row }: OnActionClickParams<SysDeptTreeResult>) {
+  switch (code) {
+    case 'add': {
+      modalApi.setData({ parent_id: row.id }).open();
+      break;
+    }
+    case 'delete': {
+      deleteSysDept(row.id).then(() => {
+        message.success({
+          content: $t('ui.actionMessage.deleteSuccess', [row.name]),
+          key: 'action_process_msg',
+        });
+        onRefresh();
+      });
+      break;
+    }
+    case 'edit': {
+      modalApi.setData(row).open();
+      break;
+    }
+  }
+}
+</script>
+
 <template>
-  <div>
-    <h1>home page</h1>
-  </div>
+  <Page>
+    <Grid>
+      <template #toolbar-actions>
+        <VbenButton @click="() => modalApi.setData(null).open()">
+          <AddData class="size-5" />
+          新增部门
+        </VbenButton>
+      </template>
+      <template #toolbar-tools>
+        <a-button class="mr-2" type="primary" @click="expandAll">
+          展开全部
+        </a-button>
+        <a-button type="primary" @click="collapseAll">折叠全部</a-button>
+      </template>
+    </Grid>
+    <Modal :title="modalTitle">
+      <Form />
+    </Modal>
+  </Page>
 </template>
diff --git a/packages/icons/src/iconify/index.ts b/packages/icons/src/iconify/index.ts
index a0985ac15..b88c8b2b8 100644
--- a/packages/icons/src/iconify/index.ts
+++ b/packages/icons/src/iconify/index.ts
@@ -11,3 +11,5 @@ export const MdiGithub = createIconifyIcon('mdi:github');
 export const MdiGoogle = createIconifyIcon('mdi:google');
 
 export const MdiQqchat = createIconifyIcon('mdi:qqchat');
+
+export const AddData = createIconifyIcon('material-symbols:add');