feat: 优化表格显示

src/api/service/Api.ts

@@ -258,6 +258,7 @@ export interface CreatePermissionDto {
 }
 
 export interface UpdatePermissionDto {
+  id: number;
   /**
    * 权限名称
    * @example "权限名称"
@@ -582,7 +583,7 @@ export interface GetPostsParams {
   size?: number;
 }
 
-export interface GetCategorysParams {
+export interface GetCategoriesParams {
   /**
    * 字段描述(Swagger用途)
    * @example "示例值"
@@ -1230,7 +1231,7 @@ export namespace Post {
 
 export namespace Category {
   /**
-   * @description 新增分类
+   * @description 添加分类
    * @tags category
    * @name AddCategory
    * @request POST:/api/v1/categories
@@ -1245,12 +1246,12 @@ export namespace Category {
     };
   }
   /**
-   * @description 根据分页/过滤参数查询分类
+   * @description 分页获取分类
    * @tags category
-   * @name GetCategorys
+   * @name GetCategories
    * @request GET:/api/v1/categories
    */
-  export namespace GetCategorys {
+  export namespace GetCategories {
     export type RequestParams = {};
     export type RequestQuery = {
       /**
@@ -1285,14 +1286,14 @@ export namespace Category {
     };
   }
   /**
-   * @description 根据ID查询分类
+   * @description 添加分类
    * @tags category
    * @name GetCategory
    * @request GET:/api/v1/categories/{id}
    */
   export namespace GetCategory {
     export type RequestParams = {
-      id: number;
+      id: string;
     };
     export type RequestQuery = {};
     export type RequestBody = never;
@@ -1302,14 +1303,14 @@ export namespace Category {
     };
   }
   /**
-   * @description 根据ID更新分类
+   * @description 更新分类
    * @tags category
-   * @name UpdateCategory
+   * @name SetCategory
    * @request PATCH:/api/v1/categories/{id}
    */
-  export namespace UpdateCategory {
+  export namespace SetCategory {
     export type RequestParams = {
-      id: number;
+      id: string;
     };
     export type RequestQuery = {};
     export type RequestBody = UpdateCategoryDto;
@@ -1317,14 +1318,14 @@ export namespace Category {
     export type ResponseBody = Response;
   }
   /**
-   * @description 根据ID删除分类
+   * @description 删除分类
    * @tags category
    * @name DelCategory
    * @request DELETE:/api/v1/categories/{id}
    */
   export namespace DelCategory {
     export type RequestParams = {
-      id: number;
+      id: string;
     };
     export type RequestQuery = {};
     export type RequestBody = never;
@@ -2132,7 +2133,7 @@ export class Api<SecurityDataType extends unknown> extends HttpClient<SecurityDa
   };
   category = {
     /**
-     * 新增分类
+     * 添加分类
      *
      * @tags category
      * @name AddCategory
@@ -2155,13 +2156,13 @@ export class Api<SecurityDataType extends unknown> extends HttpClient<SecurityDa
     },
 
     /**
-     * 根据分页/过滤参数查询分类
+     * 分页获取分类
      *
      * @tags category
-     * @name GetCategorys
+     * @name GetCategories
      * @request GET:/api/v1/categories
      */
-    getCategorys: (query: GetCategorysParams, params: RequestParams = {}) => {
+    getCategories: (query: GetCategoriesParams, params: RequestParams = {}) => {
       return this.request<
         Response & {
           data: Category[];
@@ -2177,13 +2178,13 @@ export class Api<SecurityDataType extends unknown> extends HttpClient<SecurityDa
     },
 
     /**
-     * 根据ID查询分类
+     * 添加分类
      *
      * @tags category
      * @name GetCategory
      * @request GET:/api/v1/categories/{id}
      */
-    getCategory: (id: number, params: RequestParams = {}) => {
+    getCategory: (id: string, params: RequestParams = {}) => {
       return this.request<
         Response & {
           data: Category;
@@ -2198,13 +2199,13 @@ export class Api<SecurityDataType extends unknown> extends HttpClient<SecurityDa
     },
 
     /**
-     * 根据ID更新分类
+     * 更新分类
      *
      * @tags category
-     * @name UpdateCategory
+     * @name SetCategory
      * @request PATCH:/api/v1/categories/{id}
      */
-    updateCategory: (id: number, data: UpdateCategoryDto, params: RequestParams = {}) => {
+    setCategory: (id: string, data: UpdateCategoryDto, params: RequestParams = {}) => {
       return this.request<Response, any>({
         path: `/api/v1/categories/${id}`,
         method: "PATCH",
@@ -2216,13 +2217,13 @@ export class Api<SecurityDataType extends unknown> extends HttpClient<SecurityDa
     },
 
     /**
-     * 根据ID删除分类
+     * 删除分类
      *
      * @tags category
      * @name DelCategory
      * @request DELETE:/api/v1/categories/{id}
      */
-    delCategory: (id: number, params: RequestParams = {}) => {
+    delCategory: (id: string, params: RequestParams = {}) => {
       return this.request<Response, any>({
         path: `/api/v1/categories/${id}`,
         method: "DELETE",

src/components/table/colume.tsx

@@ -0,0 +1,38 @@
+import { dayjs } from "@/libs/dayjs";
+import { TableColumn } from "./use-interface";
+
+const defineColumn = <T extends TableColumn>(column: T) => {
+  return column;
+};
+
+export const updateColumn = defineColumn({
+  title: "更新者",
+  dataIndex: "createdAt",
+  width: 200,
+  render({ record }) {
+    return (
+      <div class="flex flex-col overflow-hidden">
+        <span>{record.updatedBy ?? "无"}</span>
+        <span class="text-gray-400 text-xs truncate">
+          {dayjs(record.updatedAt).format()}
+        </span>
+      </div>
+    );
+  },
+});
+
+export const createColumn = defineColumn({
+  title: "创建者",
+  dataIndex: "createdAt",
+  width: 200,
+  render({ record }) {
+    return (
+      <div class="flex flex-col overflow-hidden">
+        <span>{record.createdBy ?? "无"}</span>
+        <span class="text-gray-400 text-xs truncate">
+          {dayjs(record.createdAt).format()}
+        </span>
+      </div>
+    );
+  },
+});

src/components/table/index.ts

@@ -1,2 +1,4 @@
+export * from "./colume";
 export * from "./table";
 export * from "./use-table";
+

src/components/table/use-table.tsx

@@ -200,7 +200,11 @@ export const useTable = (optionsOrFn: UseTableOptions | (() => UseTableOptions))
           }
         }
       }
-      const merged = merge({ modalProps: { titleAlign: "start", closable: false } }, options.create, options.modify);
+      const merged = merge(
+        { modalProps: { titleAlign: "start", closable: false }, model: { id: undefined } },
+        options.create,
+        options.modify
+      );
       options.modify = useFormModal(merged as any) as any;
     } else {
       options.modify = useFormModal(options.modify as any) as any;

src/pages/post/category/index.vue

@@ -6,13 +6,12 @@
 
 <script setup lang="tsx">
 import { api } from "@/api";
-import { Table, useTable } from "@/components";
+import { Table, createColumn, updateColumn, useTable } from "@/components";
-import { dayjs } from "@/libs/dayjs";
 import { listToTree } from "@/utils/listToTree";
 
 const table = useTable({
   data: async (model, paging) => {
-    const res = await api.category.getCategorys({ ...model, ...paging });
+    const res = await api.category.getCategories({ ...model, ...paging });
     const data = listToTree(res.data.data);
     return { data: { data, total: (res.data as any).total } };
   },
@@ -21,22 +20,21 @@ const table = useTable({
       title: "名称",
       dataIndex: "title",
       width: 240,
+      render({ record }) {
+        return (
+          <div class="flex flex-col overflow-hidden">
+            <span>{record.title}</span>
+            <span class="text-gray-400 text-xs truncate">@{record.slug}</span>
+          </div>
+        );
+      },
     },
     {
       title: "描述",
       dataIndex: "description",
     },
-    {
+    createColumn,
-      title: "别名",
+    updateColumn,
-      dataIndex: "slug",
-      width: 200,
-    },
-    {
-      title: "创建时间",
-      dataIndex: "createdAt",
-      width: 200,
-      render: ({ record }) => dayjs(record.createdAt).format(),
-    },
     {
       type: "button",
       title: "操作",
@@ -85,7 +83,7 @@ const table = useTable({
         label: "父级分类",
         type: "select",
         options: async () => {
-          const res = await api.category.getCategorys({ size: 0 });
+          const res = await api.category.getCategories({ size: 0 });
           return res.data.data.map(({ id, title }: any) => ({ value: id, label: title }));
         },
       },
@@ -125,7 +123,7 @@ const table = useTable({
     extend: true,
     title: "修改分类",
     submit: async ({ model }) => {
-      return api.category.updateCategory(model.id, model);
+      return api.category.setCategory(model.id, model);
     },
   },
 });

src/pages/system/login-log/index.vue

@@ -1,8 +1,8 @@
 <template>
   <BreadPage>
     <div class="">
-      <a-alert :closable="true" class="mb-4"> 仅展示近 90 天内的数据，如需查看更多数据，请联系管理员。 </a-alert>
       <div class="">
+        <a-alert :closable="true" class="mb-4"> 仅展示近 90 天内的数据，如需查看更多数据，请联系管理员。 </a-alert>
         <Table v-bind="table"></Table>
       </div>
     </div>

src/pages/system/menu/index.vue

@@ -6,8 +6,7 @@
 
 <script setup lang="tsx">
 import { api } from "@/api";
-import { Table, useTable } from "@/components";
+import { Table, createColumn, updateColumn, useTable } from "@/components";
-import { dayjs } from "@/libs/dayjs";
 import { menus } from "@/router";
 import { cloneDeep } from "lodash-es";
 
@@ -86,12 +85,8 @@ const table = useTable({
       align: 'center',
       render: ({ record }) => <a-switch size="small" checked-color="#3c9"></a-switch>,
     },
-    {
+    createColumn,
-      title: "创建时间",
+    updateColumn,
-      dataIndex: "createdAt",
-      width: 200,
-      render: ({ record }) => dayjs(record.createdAt).format(),
-    },
     {
       title: "操作",
       type: "button",

src/pages/system/permission/index.vue

@@ -6,8 +6,7 @@
 
 <script setup lang="tsx">
 import { api } from "@/api";
-import { Table, useTable } from "@/components";
+import { Table, createColumn, updateColumn, useTable } from "@/components";
-import { dayjs } from "@/libs";
 
 const table = useTable({
   data: async (model, paging) => {
@@ -31,12 +30,8 @@ const table = useTable({
       title: "权限描述",
       dataIndex: "description",
     },
-    {
+    createColumn,
-      title: "创建时间",
+    updateColumn,
-      dataIndex: "createdAt",
-      width: 200,
-      render: ({ record }) => dayjs(record.createdAt).format(),
-    },
     {
       title: "操作",
       type: "button",
@@ -78,14 +73,6 @@ const table = useTable({
         type: "input",
         required: true,
       },
-      {
-        field: 'order',
-        label: '排序',
-        type: 'number',
-        nodeProps: {
-          min: 0,
-        }
-      },
       {
         field: "slug",
         label: "角色标识",

src/pages/system/role/index.vue

@@ -6,8 +6,7 @@
 
 <script setup lang="tsx">
 import { api } from "@/api";
-import { useAniTable } from "@/components";
+import { createColumn, updateColumn, useAniTable } from "@/components";
-import { dayjs } from "@/libs";
 
 const [roleTable, roleCtx] = useAniTable({
   data: async () => {
@@ -31,12 +30,8 @@ const [roleTable, roleCtx] = useAniTable({
       title: "角色描述",
       dataIndex: "description",
     },
-    {
+    createColumn,
-      title: "创建时间",
+    updateColumn,
-      dataIndex: "createdAt",
-      width: 200,
-      render: ({ record }) => dayjs(record.createdAt).format(),
-    },
     {
       title: "操作",
       type: "button",

src/pages/system/user/index.vue

@@ -6,8 +6,7 @@
 
 <script setup lang="tsx">
 import { api } from "@/api";
-import { Table, useTable } from "@/components";
+import { Table, createColumn, updateColumn, useTable } from "@/components";
-import { dayjs } from "@/libs/dayjs";
 
 const table = useTable({
   data: async (model, paging) => {
@@ -39,12 +38,8 @@ const table = useTable({
       dataIndex: "email",
       width: 200,
     },
-    {
+    createColumn,
-      title: "创建时间",
+    updateColumn,
-      dataIndex: "createdAt",
-      width: 200,
-      render: ({ record }) => dayjs(record.createdAt).format(),
-    },
     {
       title: "操作",
       type: "button",