refactor(projects): finish refactor useTable
This commit is contained in:
parent
c3efa1b6e0
commit
8630175a3f
3
.vscode/settings.json
vendored
3
.vscode/settings.json
vendored
@ -13,5 +13,6 @@
|
||||
"i18n-ally.keystyle": "nested",
|
||||
"i18n-ally.localesPaths": ["src/locales/langs"],
|
||||
"prettier.enable": false,
|
||||
"unocss.root": ["./"]
|
||||
"unocss.root": ["./"],
|
||||
"typescript.tsdk": "node_modules/typescript/lib"
|
||||
}
|
||||
|
@ -17,22 +17,16 @@ export type TableColumnCheck = {
|
||||
checked: boolean;
|
||||
};
|
||||
|
||||
export type TransformedData<T extends TableData = TableData> = {
|
||||
export type TransformedData<T> = {
|
||||
data: T[];
|
||||
pageNum: number;
|
||||
pageSize: number;
|
||||
total: number;
|
||||
};
|
||||
|
||||
export type Transformer<T extends TableData = TableData, Response = object> = (
|
||||
response: Response
|
||||
) => TransformedData<T>;
|
||||
export type Transformer<T, Response> = (response: Response) => TransformedData<T>;
|
||||
|
||||
export type TableConfig<
|
||||
A extends ApiFn = ApiFn,
|
||||
T extends TableData = TableData,
|
||||
C extends TableColumn = TableColumn
|
||||
> = {
|
||||
export type TableConfig<A extends ApiFn, T, C> = {
|
||||
/** api function to get table data */
|
||||
apiFn: A;
|
||||
/** api params */
|
||||
@ -67,11 +61,7 @@ export type TableConfig<
|
||||
immediate?: boolean;
|
||||
};
|
||||
|
||||
export default function useTable<
|
||||
A extends ApiFn = ApiFn,
|
||||
T extends TableData = TableData,
|
||||
C extends TableColumn = TableColumn
|
||||
>(config: TableConfig<A, T, C>) {
|
||||
export default function useTable<A extends ApiFn, T, C>(config: TableConfig<A, T, C>) {
|
||||
const { loading, startLoading, endLoading } = useLoading();
|
||||
const { bool: empty, setBool: setEmpty } = useBoolean();
|
||||
|
||||
|
@ -6,10 +6,10 @@ import { useAppStore } from '@/store/modules/app';
|
||||
import { $t } from '@/locales';
|
||||
|
||||
type TableData = NaiveUI.TableData;
|
||||
type GetTableData<A extends NaiveUI.TableApiFn> = NaiveUI.GetTableData<A>;
|
||||
type TableColumn<T> = NaiveUI.TableColumn<T>;
|
||||
|
||||
export function useNaiveTable<T extends TableData = TableData, A extends NaiveUI.TableApiFn<T> = NaiveUI.TableApiFn<T>>(
|
||||
config: NaiveUI.NaiveTableConfig<T, A>
|
||||
) {
|
||||
export function useNaiveTable<A extends NaiveUI.TableApiFn>(config: NaiveUI.NaiveTableConfig<A>) {
|
||||
const scope = effectScope();
|
||||
const appStore = useAppStore();
|
||||
|
||||
@ -28,7 +28,7 @@ export function useNaiveTable<T extends TableData = TableData, A extends NaiveUI
|
||||
searchParams,
|
||||
updateSearchParams,
|
||||
resetSearchParams
|
||||
} = useTable<A, T, NaiveUI.TableColumn<T>>({
|
||||
} = useTable<A, GetTableData<A>, TableColumn<GetTableData<A>>>({
|
||||
apiFn,
|
||||
apiParams,
|
||||
columns: config.columns,
|
||||
@ -64,7 +64,7 @@ export function useNaiveTable<T extends TableData = TableData, A extends NaiveUI
|
||||
return checks;
|
||||
},
|
||||
getColumns: (cols, checks) => {
|
||||
const columnMap = new Map<string, NaiveUI.TableColumn<T>>();
|
||||
const columnMap = new Map<string, TableColumn<GetTableData<A>>>();
|
||||
|
||||
cols.forEach(column => {
|
||||
if (isTableColumnHasKey(column)) {
|
||||
@ -76,7 +76,7 @@ export function useNaiveTable<T extends TableData = TableData, A extends NaiveUI
|
||||
|
||||
const filteredColumns = checks
|
||||
.filter(item => item.checked)
|
||||
.map(check => columnMap.get(check.key) as NaiveUI.TableColumn<T>);
|
||||
.map(check => columnMap.get(check.key) as TableColumn<GetTableData<A>>);
|
||||
|
||||
return filteredColumns;
|
||||
},
|
||||
@ -225,8 +225,6 @@ export function getNaiveTableRowKey<T extends TableData>(row: T) {
|
||||
return row.id;
|
||||
}
|
||||
|
||||
function isTableColumnHasKey<T extends TableData>(
|
||||
column: NaiveUI.TableColumn<T>
|
||||
): column is NaiveUI.TableColumnWithKey<T> {
|
||||
function isTableColumnHasKey<T>(column: TableColumn<T>): column is NaiveUI.TableColumnWithKey<T> {
|
||||
return Boolean((column as NaiveUI.TableColumnWithKey<T>).key);
|
||||
}
|
||||
|
4
src/typings/api.d.ts
vendored
4
src/typings/api.d.ts
vendored
@ -16,7 +16,7 @@ declare namespace Api {
|
||||
}
|
||||
|
||||
/** common params of paginating query list data */
|
||||
interface PaginatingQueryRecord<T extends NonNullable<unknown>> extends PaginatingCommonParams {
|
||||
interface PaginatingQueryRecord<T = any> extends PaginatingCommonParams {
|
||||
records: T[];
|
||||
}
|
||||
|
||||
@ -29,7 +29,7 @@ declare namespace Api {
|
||||
type EnableStatus = '1' | '2';
|
||||
|
||||
/** common record */
|
||||
type CommonRecord<T extends NonNullable<unknown>> = {
|
||||
type CommonRecord<T = any> = {
|
||||
/** record id */
|
||||
id: number;
|
||||
/** record creator */
|
||||
|
19
src/typings/naive-ui.d.ts
vendored
19
src/typings/naive-ui.d.ts
vendored
@ -16,17 +16,12 @@ declare namespace NaiveUI {
|
||||
|
||||
type TableData = Api.Common.CommonRecord<object>;
|
||||
|
||||
type TableColumnWithKey<T extends TableData = TableData> =
|
||||
| SetTableColumnKey<DataTableBaseColumn<T>, T>
|
||||
| SetTableColumnKey<TableColumnGroup<T>, T>;
|
||||
type TableColumnWithKey<T> = SetTableColumnKey<DataTableBaseColumn<T>, T> | SetTableColumnKey<TableColumnGroup<T>, T>;
|
||||
|
||||
type TableColumn<T extends TableData = TableData> =
|
||||
| TableColumnWithKey<T>
|
||||
| DataTableSelectionColumn<T>
|
||||
| DataTableExpandColumn<T>;
|
||||
type TableColumn<T> = TableColumnWithKey<T> | DataTableSelectionColumn<T> | DataTableExpandColumn<T>;
|
||||
|
||||
type TableApiFn<T extends TableData = TableData> = (
|
||||
params: Api.SystemManage.CommonSearchParams
|
||||
type TableApiFn<T = any, R = Api.SystemManage.CommonSearchParams> = (
|
||||
params: R
|
||||
) => Promise<FlatResponseData<Api.Common.PaginatingQueryRecord<T>>>;
|
||||
|
||||
/**
|
||||
@ -37,8 +32,10 @@ declare namespace NaiveUI {
|
||||
*/
|
||||
type TableOperateType = 'add' | 'edit';
|
||||
|
||||
type NaiveTableConfig<T extends TableData = TableData, A extends TableApiFn<T> = TableApiFn<T>> = Pick<
|
||||
import('@sa/hooks').TableConfig<A, T, TableColumn<T>>,
|
||||
type GetTableData<A extends TableApiFn> = A extends TableApiFn<infer T> ? T : never;
|
||||
|
||||
type NaiveTableConfig<A extends TableApiFn> = Pick<
|
||||
import('@sa/hooks').TableConfig<A, GetTableData<A>, TableColumn<GetTableData<A>>>,
|
||||
'apiFn' | 'apiParams' | 'columns' | 'immediate'
|
||||
>;
|
||||
}
|
||||
|
@ -1,7 +1,4 @@
|
||||
<script setup lang="tsx">
|
||||
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
||||
// @ts-nocheck
|
||||
|
||||
import { NButton, NPopconfirm, NTag } from 'naive-ui';
|
||||
import { fetchGetUserList } from '@/service/api';
|
||||
import { $t } from '@/locales';
|
||||
|
Loading…
Reference in New Issue
Block a user