fastapi-practices · wu-clan · Apr 21, 2025 · Apr 20, 2025
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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 });
 }