feat(hooks): add useNaiveTable
This commit is contained in:
Soybean
parent
7f748f2a61
commit
cc13fcc8aa
@ -103,7 +103,7 @@ dependencies:
|
||||
|
||||
devDependencies:
|
||||
'@amap/amap-jsapi-types': 0.0.10
|
||||
'@iconify/json': 2.2.31
|
||||
'@iconify/json': 2.2.32
|
||||
'@iconify/vue': 4.1.0_vue@3.2.47
|
||||
'@soybeanjs/cli': 0.1.6
|
||||
'@soybeanjs/vite-plugin-vue-page-route': 0.0.5
|
||||
@ -2060,8 +2060,8 @@ packages:
|
||||
engines: {node: '>=6.9.0'}
|
||||
dev: true
|
||||
|
||||
/@iconify/json/2.2.31:
|
||||
resolution: {integrity: sha512-DztAaMCNFM+b46IDnqlCU3LvjD6hFQyHKsd7+KusdHwbCDq0EeLMtyyydOivModCaGc0zQwLqfLCGbxDBdj0wA==}
|
||||
/@iconify/json/2.2.32:
|
||||
resolution: {integrity: sha512-303XU9iOVQxihO0a11S9x/cQgrlgQk3j4TwT5lCfx4kxomHL00mswTPrnUGZXM5VOTbLOM+7LdpdCnay7NAJnw==}
|
||||
dependencies:
|
||||
'@iconify/types': 2.0.0
|
||||
pathe: 1.1.0
|
||||
@ -2071,8 +2071,8 @@ packages:
|
||||
resolution: {integrity: sha512-+wluvCrRhXrhyOmRDJ3q8mux9JkKy5SJ/v8ol2tu4FVjyYvtEzkc/3pK15ET6RKg4b4w4BmTk1+gsCUhf21Ykg==}
|
||||
dev: true
|
||||
|
||||
/@iconify/utils/2.1.4:
|
||||
resolution: {integrity: sha512-7vzsYIvxv5Hng0MNEtSSnyMBD/+zqnORqmKiYsSgpMBGSz1r93URgBZHPYCZ1/gpoaVstYW4/SVLGCMJBNMCLQ==}
|
||||
/@iconify/utils/2.1.5:
|
||||
resolution: {integrity: sha512-6MvDI+I6QMvXn5rK9KQGdpEE4mmLTcuQdLZEiX5N+uZB+vc4Yw9K1OtnOgkl8mp4d9X0UrILREyZgF1NUwUt+Q==}
|
||||
dependencies:
|
||||
'@antfu/install-pkg': 0.1.1
|
||||
'@antfu/utils': 0.7.2
|
||||
@ -2408,7 +2408,7 @@ packages:
|
||||
rollup: 2.79.1
|
||||
dev: true
|
||||
|
||||
/@rollup/plugin-replace/5.0.2_rollup@3.18.0:
|
||||
/@rollup/plugin-replace/5.0.2_rollup@3.19.0:
|
||||
resolution: {integrity: sha512-M9YXNekv/C/iHHK+cvORzfRYfPbq0RDD8r0G+bMiTXjNGKulPnCT9O3Ss46WfhI6ZOCgApOP7xAdmCQJ+U2LAA==}
|
||||
engines: {node: '>=14.0.0'}
|
||||
peerDependencies:
|
||||
@ -2417,9 +2417,9 @@ packages:
|
||||
rollup:
|
||||
optional: true
|
||||
dependencies:
|
||||
'@rollup/pluginutils': 5.0.2_rollup@3.18.0
|
||||
'@rollup/pluginutils': 5.0.2_rollup@3.19.0
|
||||
magic-string: 0.27.0
|
||||
rollup: 3.18.0
|
||||
rollup: 3.19.0
|
||||
dev: true
|
||||
|
||||
/@rollup/pluginutils/3.1.0_rollup@2.79.1:
|
||||
@ -2457,7 +2457,7 @@ packages:
|
||||
rollup: 2.79.1
|
||||
dev: true
|
||||
|
||||
/@rollup/pluginutils/5.0.2_rollup@3.18.0:
|
||||
/@rollup/pluginutils/5.0.2_rollup@3.19.0:
|
||||
resolution: {integrity: sha512-pTd9rIsP92h+B6wWwFbW8RkZv4hiR/xKsqre4SIuAOaOEQRxi0lqLke9k2/7WegC85GgUs9pjmOjCUi3In4vwA==}
|
||||
engines: {node: '>=14.0.0'}
|
||||
peerDependencies:
|
||||
@ -2469,7 +2469,7 @@ packages:
|
||||
'@types/estree': 1.0.0
|
||||
estree-walker: 2.0.2
|
||||
picomatch: 2.3.1
|
||||
rollup: 3.18.0
|
||||
rollup: 3.19.0
|
||||
dev: true
|
||||
|
||||
/@sindresorhus/is/5.3.0:
|
||||
@ -2485,7 +2485,7 @@ packages:
|
||||
execa: 5.1.1
|
||||
kolorist: 1.7.0
|
||||
minimist: 1.2.8
|
||||
npm-check-updates: 16.7.10
|
||||
npm-check-updates: 16.7.12
|
||||
prompts: 2.4.2
|
||||
rimraf: 3.0.2
|
||||
zx: 7.2.0
|
||||
@ -2761,8 +2761,8 @@ packages:
|
||||
resolution: {integrity: sha512-gC3TazRzGoOnoKAhUx+Q0t8S9Tzs74z7m0ipwGpSqQrleP14hKxP4/JUeEQcD3W1/aIpnWl8pHowI7WokuZpXg==}
|
||||
dev: true
|
||||
|
||||
/@types/node/18.14.6:
|
||||
resolution: {integrity: sha512-93+VvleD3mXwlLI/xASjw0FzKcwzl3OdTCzm1LaRfqgS21gfFtK3zDXM5Op9TeeMsJVOaJ2VRDpT9q4Y3d0AvA==}
|
||||
/@types/node/18.15.0:
|
||||
resolution: {integrity: sha512-z6nr0TTEOBGkzLGmbypWOGnpSpSIBorEhC4L+4HeQ2iezKCi4f77kyslRwvHeNitymGQ+oFyIWGP96l/DPSV9w==}
|
||||
dev: true
|
||||
|
||||
/@types/normalize-package-data/2.4.1:
|
||||
@ -3850,8 +3850,8 @@ packages:
|
||||
engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7}
|
||||
hasBin: true
|
||||
dependencies:
|
||||
caniuse-lite: 1.0.30001460
|
||||
electron-to-chromium: 1.4.321
|
||||
caniuse-lite: 1.0.30001464
|
||||
electron-to-chromium: 1.4.327
|
||||
node-releases: 2.0.10
|
||||
update-browserslist-db: 1.0.10_browserslist@4.21.5
|
||||
dev: true
|
||||
@ -4008,8 +4008,8 @@ packages:
|
||||
engines: {node: '>=14.16'}
|
||||
dev: true
|
||||
|
||||
/caniuse-lite/1.0.30001460:
|
||||
resolution: {integrity: sha512-Bud7abqjvEjipUkpLs4D7gR0l8hBYBHoa+tGtKJHvT2AYzLp1z7EmVkUT4ERpVUfca8S2HGIVs883D8pUH1ZzQ==}
|
||||
/caniuse-lite/1.0.30001464:
|
||||
resolution: {integrity: sha512-oww27MtUmusatpRpCGSOneQk2/l5czXANDSFvsc7VuOQ86s3ANhZetpwXNf1zY/zdfP63Xvjz325DAdAoES13g==}
|
||||
dev: true
|
||||
|
||||
/ccount/1.1.0:
|
||||
@ -5168,8 +5168,8 @@ packages:
|
||||
jake: 10.8.5
|
||||
dev: true
|
||||
|
||||
/electron-to-chromium/1.4.321:
|
||||
resolution: {integrity: sha512-ERuAqNq7YknVY3+47VbB+Q92kWH7O7sX3mkZINqZtsGJMQFb0dj71d5U3PRTihX03qt2NWIfZic2CCcGXOHJ7A==}
|
||||
/electron-to-chromium/1.4.327:
|
||||
resolution: {integrity: sha512-DIk2H4g/3ZhjgiABJjVdQvUdMlSABOsjeCm6gmUzIdKxAuFrGiJ8QXMm3i09grZdDBMC/d8MELMrdwYRC0+YHg==}
|
||||
dev: true
|
||||
|
||||
/emoji-regex/7.0.3:
|
||||
@ -5605,7 +5605,7 @@ packages:
|
||||
dependencies:
|
||||
eslint: 8.35.0
|
||||
eslint-utils: 3.0.0_eslint@8.35.0
|
||||
jsonc-eslint-parser: 2.1.0
|
||||
jsonc-eslint-parser: 2.2.0
|
||||
natural-compare: 1.4.0
|
||||
dev: true
|
||||
|
||||
@ -6812,7 +6812,7 @@ packages:
|
||||
he: 1.2.0
|
||||
param-case: 3.0.4
|
||||
relateurl: 0.2.7
|
||||
terser: 5.16.5
|
||||
terser: 5.16.6
|
||||
dev: true
|
||||
|
||||
/html-tags/3.2.0:
|
||||
@ -7526,8 +7526,8 @@ packages:
|
||||
hasBin: true
|
||||
dev: true
|
||||
|
||||
/jsonc-eslint-parser/2.1.0:
|
||||
resolution: {integrity: sha512-qCRJWlbP2v6HbmKW7R3lFbeiVWHo+oMJ0j+MizwvauqnCV/EvtAeEeuCgoc/ErtsuoKgYB8U4Ih8AxJbXoE6/g==}
|
||||
/jsonc-eslint-parser/2.2.0:
|
||||
resolution: {integrity: sha512-x5QjzBOORd+T2EjErIxJnkOEbLVEdD1ILEeBbIJt8Eq/zUn7P7M8qdnWiNVBK5f8oxnJpc6SBHOeeIEl/swPjg==}
|
||||
engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
|
||||
dependencies:
|
||||
acorn: 8.8.2
|
||||
@ -8446,8 +8446,8 @@ packages:
|
||||
npm-normalize-package-bin: 3.0.0
|
||||
dev: true
|
||||
|
||||
/npm-check-updates/16.7.10:
|
||||
resolution: {integrity: sha512-sLDgYD8ebkH9Jd6mPIq7UDGLr3DAxkHl6ZuJrEF4rauLv6DqHBxtnF16MHUPN+/eBt5QbH4GL/+nxfSAFm3TfQ==}
|
||||
/npm-check-updates/16.7.12:
|
||||
resolution: {integrity: sha512-ejYl/BiWhkUxDs1ISQd/6blgTIfHabSdsfR5JWoA7PK+cGn8hCqVKO5p+nNI2PqX+0F21ExGqkt8b7cg2yxuYg==}
|
||||
engines: {node: '>=14.14'}
|
||||
hasBin: true
|
||||
dependencies:
|
||||
@ -8472,7 +8472,7 @@ packages:
|
||||
prompts-ncu: 2.5.1
|
||||
rc-config-loader: 4.1.2
|
||||
remote-git-tags: 3.0.0
|
||||
rimraf: 4.3.1
|
||||
rimraf: 4.4.0
|
||||
semver: 7.3.8
|
||||
semver-utils: 1.1.4
|
||||
source-map-support: 0.5.21
|
||||
@ -10038,8 +10038,8 @@ packages:
|
||||
glob: 7.2.3
|
||||
dev: true
|
||||
|
||||
/rimraf/4.3.1:
|
||||
resolution: {integrity: sha512-GfHJHBzFQra23IxDzIdBqhOWfbtdgS1/dCHrDy+yvhpoJY5TdwdT28oWaHWfRpKFDLd3GZnGTx6Mlt4+anbsxQ==}
|
||||
/rimraf/4.4.0:
|
||||
resolution: {integrity: sha512-X36S+qpCUR0HjXlkDe4NAOhS//aHH0Z+h8Ckf2auGJk3PTnx5rLmrHkwNdbVQuCSUhOyFrlRvFEllZOYE+yZGQ==}
|
||||
engines: {node: '>=14'}
|
||||
hasBin: true
|
||||
dependencies:
|
||||
@ -10056,7 +10056,7 @@ packages:
|
||||
jest-worker: 26.6.2
|
||||
rollup: 2.79.1
|
||||
serialize-javascript: 4.0.0
|
||||
terser: 5.16.5
|
||||
terser: 5.16.6
|
||||
dev: true
|
||||
|
||||
/rollup-plugin-visualizer/5.9.0_rollup@2.79.1:
|
||||
@ -10084,8 +10084,8 @@ packages:
|
||||
fsevents: 2.3.2
|
||||
dev: true
|
||||
|
||||
/rollup/3.18.0:
|
||||
resolution: {integrity: sha512-J8C6VfEBjkvYPESMQYxKHxNOh4A5a3FlP+0BETGo34HEcE4eTlgCrO2+eWzlu2a/sHs2QUkZco+wscH7jhhgWg==}
|
||||
/rollup/3.19.0:
|
||||
resolution: {integrity: sha512-xZzJZlH9Ca6cosfdNGPwl2z7Pby8dTi9TrYLPeg6/j7aUoDOhBd706tCUFvbiBj45h/cS7z/a4gS8xd5Yg0jBw==}
|
||||
engines: {node: '>=14.18.0', npm: '>=8.0.0'}
|
||||
hasBin: true
|
||||
optionalDependencies:
|
||||
@ -10461,8 +10461,8 @@ packages:
|
||||
cross-spawn: 7.0.3
|
||||
dev: true
|
||||
|
||||
/spdx-correct/3.1.1:
|
||||
resolution: {integrity: sha512-cOYcUWwhCuHCXi49RhFRCyJEK3iPj1Ziz9DpViV3tbZOwXD49QzIN3MpOLJNxh2qwq2lJJZaKMVw9qNi4jTC0w==}
|
||||
/spdx-correct/3.2.0:
|
||||
resolution: {integrity: sha512-kN9dJbvnySHULIluDHy32WHRUu3Og7B9sbY7tsFLctQkIqnMh3hErYgdMjTYuqmcXX+lK5T1lnUt3G7zNswmZA==}
|
||||
dependencies:
|
||||
spdx-expression-parse: 3.0.1
|
||||
spdx-license-ids: 3.0.12
|
||||
@ -10878,8 +10878,8 @@ packages:
|
||||
unique-string: 2.0.0
|
||||
dev: true
|
||||
|
||||
/terser/5.16.5:
|
||||
resolution: {integrity: sha512-qcwfg4+RZa3YvlFh0qjifnzBHjKGNbtDo9yivMqMFDy9Q6FSaQWSB/j1xKhsoUFJIqDOM3TsN6D5xbrMrFcHbg==}
|
||||
/terser/5.16.6:
|
||||
resolution: {integrity: sha512-IBZ+ZQIA9sMaXmRZCUMDjNH0D5AQQfdn4WUjHL0+1lF4TP1IHRJbrhb6fNaXWikrYQTSkb7SLxkeXAiy1p7mbg==}
|
||||
engines: {node: '>=10'}
|
||||
hasBin: true
|
||||
dependencies:
|
||||
@ -11414,7 +11414,7 @@ packages:
|
||||
dependencies:
|
||||
'@antfu/install-pkg': 0.1.1
|
||||
'@antfu/utils': 0.7.2
|
||||
'@iconify/utils': 2.1.4
|
||||
'@iconify/utils': 2.1.5
|
||||
debug: 4.3.4
|
||||
kolorist: 1.7.0
|
||||
local-pkg: 0.4.3
|
||||
@ -11596,7 +11596,7 @@ packages:
|
||||
/validate-npm-package-license/3.0.4:
|
||||
resolution: {integrity: sha512-DpKm2Ui/xN7/HQKCtpZxoRWBhZ9Z0kqtygG8XCgNQ8ZlDnxuQmWhj566j8fN4Cu3/JmbhsDo7fcAJq4s9h27Ew==}
|
||||
dependencies:
|
||||
spdx-correct: 3.1.1
|
||||
spdx-correct: 3.2.0
|
||||
spdx-expression-parse: 3.0.1
|
||||
dev: true
|
||||
|
||||
@ -11722,11 +11722,11 @@ packages:
|
||||
workbox-build: ^6.5.4
|
||||
workbox-window: ^6.5.4
|
||||
dependencies:
|
||||
'@rollup/plugin-replace': 5.0.2_rollup@3.18.0
|
||||
'@rollup/plugin-replace': 5.0.2_rollup@3.19.0
|
||||
debug: 4.3.4
|
||||
fast-glob: 3.2.12
|
||||
pretty-bytes: 6.1.0
|
||||
rollup: 3.18.0
|
||||
rollup: 3.19.0
|
||||
vite: 4.1.4_tuq4uaq64ig7wgklr2h7aod5xq
|
||||
workbox-build: 6.5.4
|
||||
workbox-window: 6.5.4
|
||||
@ -11781,7 +11781,7 @@ packages:
|
||||
esbuild: 0.16.17
|
||||
postcss: 8.4.21
|
||||
resolve: 1.22.1
|
||||
rollup: 3.18.0
|
||||
rollup: 3.19.0
|
||||
sass: 1.58.3
|
||||
optionalDependencies:
|
||||
fsevents: 2.3.2
|
||||
@ -12348,7 +12348,7 @@ packages:
|
||||
dependencies:
|
||||
'@types/fs-extra': 11.0.1
|
||||
'@types/minimist': 1.2.2
|
||||
'@types/node': 18.14.6
|
||||
'@types/node': 18.15.0
|
||||
'@types/ps-tree': 1.1.2
|
||||
'@types/which': 2.0.2
|
||||
chalk: 5.2.0
|
||||
|
||||
@ -1 +1,89 @@
|
||||
export function useTable() {}
|
||||
import { ref, reactive } from 'vue';
|
||||
import type { Ref } from 'vue';
|
||||
import type { DataTableBaseColumn, DataTableSelectionColumn, DataTableExpandColumn, PaginationProps } from 'naive-ui';
|
||||
import type { MaybeComputedRef } from '@vueuse/core';
|
||||
import type { TableColumnGroup, InternalRowData } from 'naive-ui/es/data-table/src/interface';
|
||||
import { useLoadingEmpty } from '../common';
|
||||
|
||||
/**
|
||||
* 表格的列
|
||||
*/
|
||||
type DataTableColumn<T = InternalRowData> =
|
||||
| (Omit<TableColumnGroup<T>, 'key'> & { key: keyof T })
|
||||
| (Omit<DataTableBaseColumn<T>, 'key'> & { key: keyof T })
|
||||
| DataTableSelectionColumn<T>
|
||||
| DataTableExpandColumn<T>;
|
||||
|
||||
/**
|
||||
* 表格分页参数
|
||||
*/
|
||||
type TablePaginationParams = Pick<PaginationProps, 'page' | 'pageSize'>;
|
||||
|
||||
/**
|
||||
* 表格接口的请求参数
|
||||
*/
|
||||
type TableApiParams = Record<string, unknown> & TablePaginationParams;
|
||||
|
||||
/**
|
||||
* 表格接口的请求数据
|
||||
*/
|
||||
type TableApiData<T = InternalRowData> = {
|
||||
data: T[];
|
||||
pageNum: number;
|
||||
pageSize: number;
|
||||
total: number;
|
||||
};
|
||||
|
||||
/**
|
||||
* 表格接口的请求函数
|
||||
*/
|
||||
type TableApiFn<P extends TableApiParams, T extends InternalRowData> = (
|
||||
params: P
|
||||
) => Promise<Service.SuccessResult<TableApiData<T>>>;
|
||||
|
||||
export function useNaiveTable<TableData extends InternalRowData, P extends TableApiParams>(
|
||||
apiFn: TableApiFn<P, TableData>,
|
||||
apiParams: P,
|
||||
columns: MaybeComputedRef<DataTableColumn<TableData>[]>
|
||||
) {
|
||||
const { loading, startLoading, endLoading, empty, setEmpty } = useLoadingEmpty();
|
||||
|
||||
const tableData: Ref<TableData[]> = ref([]);
|
||||
|
||||
async function getTableData(paginationParams?: TablePaginationParams) {
|
||||
startLoading();
|
||||
|
||||
const params = { ...apiParams, ...paginationParams };
|
||||
|
||||
const { data } = await apiFn(params);
|
||||
if (data) {
|
||||
tableData.value = data.data;
|
||||
|
||||
setEmpty(data.data.length === 0);
|
||||
}
|
||||
endLoading();
|
||||
}
|
||||
|
||||
const pagination: PaginationProps = reactive({
|
||||
page: 1,
|
||||
pageSize: 10,
|
||||
showSizePicker: true,
|
||||
pageSizes: [10, 15, 20, 25, 30],
|
||||
onChange: (page: number) => {
|
||||
pagination.page = page;
|
||||
},
|
||||
onUpdatePageSize: (pageSize: number) => {
|
||||
pagination.pageSize = pageSize;
|
||||
pagination.page = 1;
|
||||
}
|
||||
});
|
||||
|
||||
return {
|
||||
tableData,
|
||||
columns,
|
||||
loading,
|
||||
empty,
|
||||
pagination,
|
||||
start: getTableData
|
||||
};
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user