feat: table示例页面，新增，删除

mock/table.ts

@@ -31,4 +31,46 @@ export default defineFakeRoute([
             };
         },
     },
+    {
+        url: '/table/add',
+        method: 'post',
+        response: ({ body }) => {
+            if (body.firstName) {
+                return {
+                    success: true,
+                    code: 200,
+                    data: {
+                        id: faker.string.uuid(),
+                    },
+                };
+            } else {
+                return {
+                    success: false,
+                    code: 400,
+                    data: null,
+                };
+            }
+        },
+    },
+    {
+        url: '/table/delete',
+        method: 'post',
+        response: ({ body }) => {
+            if (body.id) {
+                return {
+                    success: true,
+                    code: 200,
+                    data: {
+                        id: body.id,
+                    },
+                };
+            } else {
+                return {
+                    success: false,
+                    code: 400,
+                    data: null,
+                };
+            }
+        },
+    },
 ]);

src/api/table.ts

@@ -8,3 +8,11 @@ type Result = {
 export const getTableList = (params) => {
     return http.post<Result>('/table/list', { data: params });
 };
+
+export const addTableItem = (params) => {
+    return http.post<Result>('/table/add', { data: params });
+};
+
+export const deleteTableItem = (params) => {
+    return http.post<Result>('/table/delete', { data: params });
+};

src/views/template/layout/components/add.vue

@@ -0,0 +1,112 @@
+<template>
+    <el-form
+        :model="form"
+        ref="formRef"
+        label-width="100px"
+        :rules="rules"
+    >
+        <el-form-item
+            label="姓名"
+            prop="firstName"
+        >
+            <el-input
+                v-model="form.firstName"
+                placeholder="请输入姓名"
+            ></el-input>
+        </el-form-item>
+        <el-form-item
+            label="名称"
+            prop="lastName"
+        >
+            <el-input
+                v-model="form.lastName"
+                placeholder="请输入名称"
+            ></el-input>
+        </el-form-item>
+        <el-form-item
+            label="生日"
+            prop="birthday"
+        >
+            <el-input
+                v-model="form.birthday"
+                placeholder="请输入生日"
+            ></el-input>
+        </el-form-item>
+        <el-form-item
+            label="邮箱"
+            prop="email"
+        >
+            <el-input
+                v-model="form.email"
+                placeholder="请输入邮箱"
+            ></el-input>
+        </el-form-item>
+        <el-form-item
+            label="性别"
+            praceholder="请选择性别"
+            prop="sex"
+        >
+            <el-select
+                v-model="form.sex"
+                style="width: 100%"
+            >
+                <el-option
+                    label="男"
+                    value="male"
+                ></el-option>
+                <el-option
+                    label="女"
+                    value="female"
+                ></el-option>
+            </el-select>
+        </el-form-item>
+    </el-form>
+</template>
+
+<script setup lang="jsx">
+import { ref } from 'vue';
+const formRef = ref(null);
+const form = ref({
+    firstName: '',
+    lastName: '',
+    birthday: '',
+    email: '',
+    sex: '',
+});
+const rules = {
+    firstName: [
+        { required: true, message: '请输入姓名', trigger: 'blur' },
+        { min: 2, max: 5, message: '长度在 2 到 5 个字符', trigger: 'blur' },
+    ],
+    lastName: [
+        { required: true, message: '请输入名称', trigger: 'blur' },
+        { min: 2, max: 5, message: '长度在 2 到 5 个字符', trigger: 'blur' },
+    ],
+    birthday: [
+        { required: true, message: '请输入生日', trigger: 'blur' },
+        { type: 'date', message: '日期格式不正确', trigger: 'blur' },
+    ],
+    email: [
+        { required: true, message: '请输入邮箱', trigger: 'blur' },
+        { type: 'email', message: '邮箱格式不正确', trigger: 'blur' },
+    ],
+    sex: [{ required: true, message: '请选择性别', trigger: 'change' }],
+};
+
+/**
+在 Vue 3 中，defineExpose 是一个组合 API（Composition API）用于暴露组件内部的属性和方法，以便在父组件中访问。当你使用 defineExpose 来暴露一个 ref 的值时，你可以直接使用它而不需要 .value，这是因为 Vue 3 中的响应式系统和组件的上下文处理方式。
+
+原因分析
+响应式引用：
+在 Vue 3 中，ref 类型的变量在组件内部访问时，需要使用 .value 来获取原始值。这是因为 ref 是一个对象，.value 属性持有实际的值。
+但是，当你使用 defineExpose 暴露一个 ref 时，Vue 会自动处理这个引用，使得在父组件中可以直接访问其值。
+设计目的：
+defineExpose 的设计目的是简化组件的接口，使得父组件可以更方便地访问子组件的状态和方法。通过自动处理 .value，可以减少样板代码，使得使用更加直观。
+ */
+defineExpose({
+    formRef,
+    form,
+});
+</script>
+
+<style lang="scss" scoped></style>

src/views/template/layout/index.vue

@@ -57,6 +57,7 @@
                     <el-button
                         type="primary"
                         class="mr-5"
+                        @click="doAdd"
                         >新增</el-button
                     >
                 </el-row>
@@ -69,7 +70,16 @@
             :columns="columns"
             size="large"
             v-loading="loading"
-        />
+        >
+            <template #action="{ row }">
+                <el-button
+                    type="danger"
+                    link
+                    @click="handleDeleteItemFN({ id: row.id })"
+                    >删除</el-button
+                >
+            </template>
+        </pure-table>
         <base-footer>
             <el-card>
                 <el-pagination
@@ -84,9 +94,12 @@
 </template>
 
 <script setup lang="jsx">
-import { ref } from 'vue';
+import { h, ref } from 'vue';
 import { useTable } from '@/hooks/useTable';
-import { getTableList } from '@/api/table';
+import { getTableList, addTableItem, deleteTableItem } from '@/api/table';
+import Add from './components/add.vue';
+import { addDialog } from '@/components/ReDialog';
+import { message } from '@/utils/message';
 defineOptions({
     name: 'TemplateLayout',
 });
@@ -124,11 +137,49 @@ const columns = [
         label: '性别',
         prop: 'sex',
     },
+    {
+        label: '操作',
+        prop: 'action',
+        slot: 'action',
+        width: 80,
+        fixed: 'right',
+    },
 ];
 const { loading, tableData, pagination, handleRequestDataFN, handleSearchFN, handlePaginationChangeFN, handleDeleteItemFN } = useTable({
     searchForm: form.value,
     requestDataFN: getTableList,
+    deleteItemFN: deleteTableItem,
 });
+
+const AddRef = ref(null);
+const doAdd = () => {
+    addDialog({
+        width: '550px',
+        title: '新增',
+        contentRenderer: () => h(Add, { ref: AddRef }),
+        props: {},
+        sureBtnLoading: true,
+        beforeSure: (done, { options, closeLoading }) => {
+            console.log(options);
+            const { form, formRef } = AddRef.value;
+            formRef.validate((valid) => {
+                if (valid) {
+                    addTableItem({ ...form })
+                        .then(() => {
+                            message('新增成功', { type: 'success' });
+                            handleRequestDataFN();
+                            done();
+                        })
+                        .catch(() => {
+                            closeLoading();
+                        });
+                } else {
+                    closeLoading();
+                }
+            });
+        },
+    });
+};
 </script>
 
 <style lang="scss" scoped></style>