feat: 封装table hooks，table示例页面

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({

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

src/api/table.ts

@@ -0,0 +1,10 @@
+import { http } from '@/utils/http';
+
+type Result = {
+    success: boolean;
+    data: Array<any>;
+};
+
+export const getTableList = (params) => {
+    return http.post<Result>('/table/list', { data: params });
+};

src/components/AutoImport/BaseFooter/index.vue

@@ -6,7 +6,16 @@
 
 <style lang="scss">
 .base-footer {
-    display: flex;
     margin-top: 10px;
+
+    & > .el-card {
+        display: flex;
+        align-items: center;
+        justify-content: flex-end;
+
+        & > .el-card__body {
+            padding: 10px;
+        }
+    }
 }
 </style>

src/components/AutoImport/BaseHeader/index.vue

@@ -6,7 +6,12 @@
 
 <style lang="scss">
 .base-header {
-    display: flex;
     margin-bottom: 10px;
+
+    & > .el-card {
+        & > .el-card__body {
+            padding: 10px;
+        }
+    }
 }
 </style>

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;
+        if (loading.value || !requestDataFN) return;
-        lodding.value = true;
+        loading.value = true;
         requestDataFN({
-            ...seracgForm,
+            ...searchForm,
             pageNumber: pagination.value.currentPage,
             psgeSize: pagination.value.pageSize,
         })
             .then((result) => {
-                tableData.value = result.list;
+                const { list, total } = result.data;
-                pagination.value.total = result.totalCount;
+                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) => {
+    const handleDeleteItemFN = (params, callback) => {
-        ElMessageBox.confirm('确认删除该项吗？')
+        if (loading.value || !deleteItemFN) return;
+        ElMessageBox.confirm('您确认要确认删除选中的数据吗？', '删除数据')
             .then(() => {
-                lodding.value = true;
+                loading.value = true;
-                deleteItemFN(item.id)
+                deleteItemFN(params)
                     .then(() => {
-                        tableData.value = tableData.value.filter((i) => i.id !== item.id);
+                        if (callback) {
-                        pagination.value.total--;
+                            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,

src/views/template/layout/index.vue

@@ -1,231 +1,134 @@
 <template>
     <base-container>
         <base-header>
-            <el-card style="width: 100%"> 我是header </el-card>
+            <el-card>
+                <el-form
+                    :model="form"
+                    :inline="true"
+                >
+                    <el-form-item label="姓名">
+                        <el-input
+                            v-model="form.firstName"
+                            placeholder="请输入姓名"
+                        ></el-input>
+                    </el-form-item>
+                    <el-form-item label="名称">
+                        <el-input
+                            v-model="form.lastName"
+                            placeholder="请输入名称"
+                        ></el-input>
+                    </el-form-item>
+                    <el-form-item label="生日">
+                        <el-input
+                            v-model="form.birthday"
+                            placeholder="请输入生日"
+                        ></el-input>
+                    </el-form-item>
+                    <el-form-item label="邮箱">
+                        <el-input
+                            v-model="form.email"
+                            placeholder="请输入邮箱"
+                        ></el-input>
+                    </el-form-item>
+                    <el-form-item
+                        label="性别"
+                        praceholder="请选择性别"
+                        style="width: 150px"
+                    >
+                        <el-select v-model="form.sex">
+                            <el-option
+                                label="男"
+                                value="male"
+                            ></el-option>
+                            <el-option
+                                label="女"
+                                value="female"
+                            ></el-option>
+                        </el-select>
+                    </el-form-item>
+                </el-form>
+                <el-row justify="end">
+                    <el-button
+                        type="primary"
+                        @click="handleSearchFN"
+                        >查询</el-button
+                    >
+
+                    <el-button
+                        type="primary"
+                        class="mr-5"
+                        >新增</el-button
+                    >
+                </el-row>
+            </el-card>
         </base-header>
         <pure-table
+            border
             class="base-main"
             :data="tableData"
             :columns="columns"
             size="large"
+            v-loading="loading"
         />
         <base-footer>
-            <el-card style="width: 100%"> 我是footer </el-card>
+            <el-card>
+                <el-pagination
+                    v-model:current-page="pagination.currentPage"
+                    v-model:page-size="pagination.pageSize"
+                    v-bind="pagination"
+                    @change="handlePaginationChangeFN"
+                />
+            </el-card>
         </base-footer>
     </base-container>
 </template>
 
 <script setup lang="jsx">
 import { ref } from 'vue';
+import { useTable } from '@/hooks/useTable';
+import { getTableList } from '@/api/table';
 defineOptions({
     name: 'TemplateLayout',
 });
+const form = ref({
+    firstName: '',
+    lastName: '',
+    birthday: '',
+    email: '',
+    sex: '',
+});
 
-const tableData = ref([
+const columns = [
-    {
-        name: 'John',
-        age: 25,
-    },
-    {
-        name: 'Jane',
-        age: 30,
-    },
-    {
-        name: 'Bob',
-        age: 28,
-    },
-    {
-        name: 'John',
-        age: 25,
-    },
-    {
-        name: 'Jane',
-        age: 30,
-    },
-    {
-        name: 'Bob',
-        age: 28,
-    },
-    {
-        name: 'John',
-        age: 25,
-    },
-    {
-        name: 'Jane',
-        age: 30,
-    },
-    {
-        name: 'Bob',
-        age: 28,
-    },
-    {
-        name: 'John',
-        age: 25,
-    },
-    {
-        name: 'Jane',
-        age: 30,
-    },
-    {
-        name: 'Bob',
-        age: 28,
-    },
-    {
-        name: 'John',
-        age: 25,
-    },
-    {
-        name: 'Jane',
-        age: 30,
-    },
-    {
-        name: 'Bob',
-        age: 28,
-    },
-    {
-        name: 'John',
-        age: 25,
-    },
-    {
-        name: 'Jane',
-        age: 30,
-    },
-    {
-        name: 'Bob',
-        age: 28,
-    },
-    {
-        name: 'John',
-        age: 25,
-    },
-    {
-        name: 'Jane',
-        age: 30,
-    },
-    {
-        name: 'Bob',
-        age: 28,
-    },
-    {
-        name: 'John',
-        age: 25,
-    },
-    {
-        name: 'Jane',
-        age: 30,
-    },
-    {
-        name: 'Bob',
-        age: 28,
-    },
-    {
-        name: 'John',
-        age: 25,
-    },
-    {
-        name: 'Jane',
-        age: 30,
-    },
-    {
-        name: 'Bob',
-        age: 28,
-    },
-    {
-        name: 'John',
-        age: 25,
-    },
-    {
-        name: 'Jane',
-        age: 30,
-    },
-    {
-        name: 'Bob',
-        age: 28,
-    },
-    {
-        name: 'John',
-        age: 25,
-    },
-    {
-        name: 'Jane',
-        age: 30,
-    },
-    {
-        name: 'Bob',
-        age: 28,
-    },
-    {
-        name: 'John',
-        age: 25,
-    },
-    {
-        name: 'Jane',
-        age: 30,
-    },
-    {
-        name: 'Bob',
-        age: 28,
-    },
-    {
-        name: 'John',
-        age: 25,
-    },
-    {
-        name: 'Jane',
-        age: 30,
-    },
-    {
-        name: 'Bob',
-        age: 28,
-    },
-    {
-        name: 'John',
-        age: 25,
-    },
-    {
-        name: 'Jane',
-        age: 30,
-    },
-    {
-        name: 'Bob',
-        age: 28,
-    },
-    {
-        name: 'John',
-        age: 25,
-    },
-    {
-        name: 'Jane',
-        age: 30,
-    },
     {
-        name: 'Bob',
+        label: '序号',
-        age: 28,
+        type: 'index',
+        width: 70,
     },
     {
-        name: 'John',
+        label: '姓名',
-        age: 25,
+        prop: 'firstName',
     },
     {
-        name: 'Jane',
+        label: '名称',
-        age: 30,
+        prop: 'lastName',
     },
     {
-        name: 'Bob',
+        label: '生日',
-        age: 28,
+        prop: 'birthday',
     },
-]);
-
-const columns = [
     {
-        label: '姓名',
+        label: '邮箱',
-        prop: 'name',
+        prop: 'email',
     },
     {
-        label: '年龄',
+        label: '性别',
-        prop: 'age',
+        prop: 'sex',
     },
 ];
+const { loading, tableData, pagination, handleRequestDataFN, handleSearchFN, handlePaginationChangeFN, handleDeleteItemFN } = useTable({
+    searchForm: form.value,
+    requestDataFN: getTableList,
+});
 </script>
 
 <style lang="scss" scoped></style>