appnify
/
web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 优化表格显示

master
绝弹 2023-10-17 22:36:50 +08:00
parent edafb8b401
commit 326e26df40
10 changed files with 97 additions and 82 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

49
src/api/service/Api.ts
View File

@ -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",

38
src/components/table/colume.tsx Normal file
View File

@ -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>
);
},
});

2
src/components/table/index.ts
View File

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

6
src/components/table/use-table.tsx
View File

@ -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;

30
src/pages/post/category/index.vue
View File

@ -6,13 +6,12 @@
<script setup lang="tsx">
import { api } from "@/api";
import { Table, useTable } from "@/components";
import { dayjs } from "@/libs/dayjs";
import { Table, createColumn, updateColumn, useTable } from "@/components";
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",
},
{
title: "别名",
dataIndex: "slug",
width: 200,
},
{
title: "创建时间",
dataIndex: "createdAt",
width: 200,
render: ({ record }) => dayjs(record.createdAt).format(),
},
createColumn,
updateColumn,
{
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);
},
},
});

2
src/pages/system/login-log/index.vue
View File

@ -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>

11
src/pages/system/menu/index.vue
View File

@ -6,8 +6,7 @@
<script setup lang="tsx">
import { api } from "@/api";
import { Table, useTable } from "@/components";
import { dayjs } from "@/libs/dayjs";
import { Table, createColumn, updateColumn, useTable } from "@/components";
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>,
},
{
title: "创建时间",
dataIndex: "createdAt",
width: 200,
render: ({ record }) => dayjs(record.createdAt).format(),
},
createColumn,
updateColumn,
{
title: "操作",
type: "button",

19
src/pages/system/permission/index.vue
View File

@ -6,8 +6,7 @@
<script setup lang="tsx">
import { api } from "@/api";
import { Table, useTable } from "@/components";
import { dayjs } from "@/libs";
import { Table, createColumn, updateColumn, useTable } from "@/components";
const table = useTable({
data: async (model, paging) => {
@ -31,12 +30,8 @@ const table = useTable({
title: "权限描述",
dataIndex: "description",
},
{
title: "创建时间",
dataIndex: "createdAt",
width: 200,
render: ({ record }) => dayjs(record.createdAt).format(),
},
createColumn,
updateColumn,
{
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: "角色标识",

11
src/pages/system/role/index.vue
View File

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

11
src/pages/system/user/index.vue
View File

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