From 338d6dab44c386c59d11f57bab066fe1aecbea0a Mon Sep 17 00:00:00 2001 From: LCJ-MinYa <1049468118@qq.com> Date: Fri, 10 Jan 2025 15:44:06 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E5=B0=81=E8=A3=85table=20hooks?= =?UTF-8?q?=EF=BC=8Ctable=E7=A4=BA=E4=BE=8B=E9=A1=B5=E9=9D=A2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- build/plugins.ts | 3 +- mock/table.ts | 34 ++ src/api/table.ts | 10 + .../AutoImport/BaseFooter/index.vue | 11 +- .../AutoImport/BaseHeader/index.vue | 7 +- src/hooks/{useTable.js => useTable.ts} | 51 +-- src/views/template/layout/index.vue | 291 ++++++------------ 7 files changed, 190 insertions(+), 217 deletions(-) create mode 100644 mock/table.ts create mode 100644 src/api/table.ts rename src/hooks/{useTable.js => useTable.ts} (69%) diff --git a/build/plugins.ts b/build/plugins.ts index 6753179..2a089e1 100644 --- a/build/plugins.ts +++ b/build/plugins.ts @@ -32,10 +32,11 @@ export function getPluginsList(VITE_CDN: boolean, VITE_COMPRESSION: ViteCompress removeNoMatch(), // mock支持 vitePluginFakeServer({ - logger: false, + logger: true, include: 'mock', infixName: false, enableProd: true, + timeout: 500, }), // 自定义主题 themePreprocessorPlugin({ diff --git a/mock/table.ts b/mock/table.ts new file mode 100644 index 0000000..626e558 --- /dev/null +++ b/mock/table.ts @@ -0,0 +1,34 @@ +// 根据角色动态生成路由 +import { defineFakeRoute } from 'vite-plugin-fake-server/client'; +import { faker } from '@faker-js/faker'; + +export default defineFakeRoute([ + { + url: '/table/list', + method: 'post', + response: ({ body }) => { + const list = []; + for (let i = 0; i < body.psgeSize; i++) { + list.push({ + id: faker.string.uuid(), + avatar: faker.image.avatar(), + birthday: faker.date.birthdate(), + email: faker.internet.email(), + firstName: faker.person.firstName(), + lastName: faker.person.lastName(), + sex: faker.person.sexType(), + }); + } + return { + success: true, + code: 200, + data: { + list, + total: 77, + pageSize: body.pageSize, + pageNumber: body.pageNumber, + }, + }; + }, + }, +]); diff --git a/src/api/table.ts b/src/api/table.ts new file mode 100644 index 0000000..100344c --- /dev/null +++ b/src/api/table.ts @@ -0,0 +1,10 @@ +import { http } from '@/utils/http'; + +type Result = { + success: boolean; + data: Array; +}; + +export const getTableList = (params) => { + return http.post('/table/list', { data: params }); +}; diff --git a/src/components/AutoImport/BaseFooter/index.vue b/src/components/AutoImport/BaseFooter/index.vue index 52523cb..e5bf8ba 100644 --- a/src/components/AutoImport/BaseFooter/index.vue +++ b/src/components/AutoImport/BaseFooter/index.vue @@ -6,7 +6,16 @@ diff --git a/src/components/AutoImport/BaseHeader/index.vue b/src/components/AutoImport/BaseHeader/index.vue index 629b986..bd07ae8 100644 --- a/src/components/AutoImport/BaseHeader/index.vue +++ b/src/components/AutoImport/BaseHeader/index.vue @@ -6,7 +6,12 @@ diff --git a/src/hooks/useTable.js b/src/hooks/useTable.ts similarity index 69% rename from src/hooks/useTable.js rename to src/hooks/useTable.ts index 785183d..67918ea 100644 --- a/src/hooks/useTable.js +++ b/src/hooks/useTable.ts @@ -1,12 +1,13 @@ -import { ref, onMounted } from 'vue'; +import { ref, onMounted, nextTick } from 'vue'; import { ElMessageBox } from 'element-plus'; +import { message } from '@/utils/message'; /** * @FileDescription: el-table 函数式组件hooks--实现一个表格的数据加载、分页、搜索、删除等操作, * @function:useTable(config) * @param {object} config useTable(配置项) * @param {function} config.requestDataFN 分页列表接口函数 - * @param {object} config.seracgForm 搜索表单配置 + * @param {object} config.searchForm 搜索表单配置 * @param {function} config.deleteItemFN 删除某一项接口函数 * * @param {object} config.pagination 分页配置对象 @@ -29,9 +30,9 @@ import { ElMessageBox } from 'element-plus'; * @returns {function} handlePaginationChangeFN 页码或者每页显示条数变化函数 * @returns {function} handleDeleteItemFN 删除函数 * */ -export default function useTable(config) { +export function useTable(config) { const { - seracgForm, + searchForm, requestDataFN, deleteItemFN, options = { @@ -40,7 +41,7 @@ export default function useTable(config) { } = config; const tableData = ref([]); - const lodding = ref(false); + const loading = ref(false); const defaultPagination = { currentPage: 1, pageSize: 10, @@ -49,23 +50,24 @@ export default function useTable(config) { layout: 'total, sizes, prev, pager, next, jumper', background: true, }; - const pagination = ref(...defaultPagination, ...(config.pagination || {})); + const pagination = ref({ ...defaultPagination, ...(config.pagination || {}) }); // 请求表格数据 const handleRequestDataFN = () => { - if (lodding.value || !requestDataFN) return; - lodding.value = true; + if (loading.value || !requestDataFN) return; + loading.value = true; requestDataFN({ - ...seracgForm, + ...searchForm, pageNumber: pagination.value.currentPage, psgeSize: pagination.value.pageSize, }) .then((result) => { - tableData.value = result.list; - pagination.value.total = result.totalCount; + const { list, total } = result.data; + tableData.value = list; + pagination.value.total = total; }) .finally(() => { - lodding.value = false; + loading.value = false; }); }; @@ -83,17 +85,26 @@ export default function useTable(config) { }; // 删除某一项 - const handleDeleteItemFN = (item) => { - ElMessageBox.confirm('确认删除该项吗？') + const handleDeleteItemFN = (params, callback) => { + if (loading.value || !deleteItemFN) return; + ElMessageBox.confirm('您确认要确认删除选中的数据吗？', '删除数据') .then(() => { - lodding.value = true; - deleteItemFN(item.id) + loading.value = true; + deleteItemFN(params) .then(() => { - tableData.value = tableData.value.filter((i) => i.id !== item.id); - pagination.value.total--; + if (callback) { + callback(); + } else { + message('删除数据成功', { type: 'success' }); + /* 这里使用nextTick是因为loading状态还是true， + * handleRequestDataFN会因为loading状态为true而不执行, + * finally执行顺序在then之后 + */ + nextTick(() => handleRequestDataFN()); + } }) .finally(() => { - lodding.value = false; + loading.value = false; }); }) .catch(() => {}); @@ -106,7 +117,7 @@ export default function useTable(config) { }); return { - lodding, + loading, tableData, pagination, handleRequestDataFN, diff --git a/src/views/template/layout/index.vue b/src/views/template/layout/index.vue index dd3e7b7..3d43c42 100644 --- a/src/views/template/layout/index.vue +++ b/src/views/template/layout/index.vue @@ -1,231 +1,134 @@