Merge pull request #75 from cshaptx4869/patch-38

refactor: ♻️ 加强CURD表单组件、CURD使用示例改为真实接口

src/api/user/index.ts

@@ -44,7 +44,7 @@ export function getUserForm(userId: number): AxiosPromise<UserForm> {
  *
  * @param data
  */
-export function addUser(data: any) {
+export function addUser(data: UserForm) {
   return request({
     url: "/api/v1/users",
     method: "post",

src/components/PageContent/index.vue

@@ -193,17 +193,17 @@ export interface IOperatData {
   column: any;
   $index: number;
 }
-export interface IContentConfig {
+export interface IContentConfig<T = any> {
   // 页面名称(参与组成权限标识,如sys:user:xxx)
   pageName: string;
   // table组件属性
   table?: Omit<TableProps<any>, "data">;
   // 列表的网络请求函数(需返回promise)
-  indexAction: (data: IObject) => Promise<IObject>;
+  indexAction: (queryParams: T) => Promise<any>;
   // 删除的网络请求函数(需返回promise)
-  deleteAction?: (id: string) => Promise<any>;
+  deleteAction?: (ids: string) => Promise<any>;
   // 导出的网络请求函数(需返回promise)
-  exportAction?: (queryParams: IObject) => Promise<any>;
+  exportAction?: (queryParams: T) => Promise<any>;
   // 主键名(默认为id)
   pk?: string;
   // 表格工具栏(默认支持refresh,add,delete,export,也可自定义)

src/components/PageModal/index.vue

@@ -7,9 +7,10 @@
     <!-- 表单 -->
     <el-form
       ref="formRef"
-      :model="formData"
-      :rules="modalConfig.formRules"
       label-width="80px"
+      v-bind="modalConfig.form"
+      :model="formData"
+      :rules="formRules"
     >
       <template v-for="item in modalConfig.formItems" :key="item.prop">
         <el-form-item :label="item.label" :prop="item.prop">
@@ -65,37 +66,48 @@
 <script setup lang="ts">
 import { ref, reactive } from "vue";
 import { useThrottleFn } from "@vueuse/core";
-import type { FormRules, DialogProps } from "element-plus";
+import type {
+  DialogProps,
+  FormProps,
+  FormRules,
+  FormItemRule,
+} from "element-plus";
 
 // 对象类型
 type IObject = Record<string, any>;
 // 定义接收的属性
-export interface IModalConfig {
+export interface IModalConfig<T = any> {
-  // dialog组件属性
-  dialog: Partial<Omit<DialogProps, "modelValue">>;
   // 页面名称
   pageName?: string;
+  // 主键名(主要用于编辑数据,默认为id)
+  pk?: string;
+  // dialog组件属性
+  dialog?: Partial<Omit<DialogProps, "modelValue">>;
+  // form组件属性
+  form?: Partial<Omit<FormProps, "model" | "rules">>;
   // 提交的网络请求函数(需返回promise)
-  formAction: (data: IObject) => Promise<any>;
+  formAction: (data: T) => Promise<any>;
+  // 提交之前处理
+  beforeSubmit?: (data: T) => void;
   // 表单项
   formItems: Array<{
-    // 组件类型(如input,select,radio等)
+    // 组件类型(如input,select,radio,custom等，默认input)
-    type: string;
+    type?: string;
+    // 组件属性
+    attrs?: IObject;
+    // 组件可选项(适用于select,radio组件)
+    options?: { label: string; value: any }[];
+    // 插槽名(适用于组件类型为custom)
+    slotName?: string;
     // 标签文本
     label: string;
     // 键名
     prop: string;
-    // 组件属性
+    // 验证规则
-    attrs?: IObject;
+    rules?: FormItemRule[];
     // 初始值
     initialValue?: any;
-    // 可选项(适用于select,radio组件)
-    options?: { label: string; value: any }[];
-    // 插槽名(适用于组件类型为custom)
-    slotName?: string;
   }>;
-  // 表单验证规则
-  formRules: FormRules;
 }
 const props = defineProps<{
   modalConfig: IModalConfig;
@@ -107,23 +119,32 @@ const emit = defineEmits<{
 // 暴露的属性和方法
 defineExpose({ setModalVisible });
 
+const pk = props.modalConfig.pk ?? "id";
 const dialogVisible = ref(false);
 const formRef = ref<InstanceType<typeof ElForm>>();
 const formData = reactive<IObject>({});
+const formRules: FormRules = {};
 // 初始化
 function setModalVisible(initData: IObject = {}) {
   dialogVisible.value = true;
   for (const item of props.modalConfig.formItems) {
     formData[item.prop] = initData[item.prop] ?? item.initialValue ?? "";
+    formRules[item.prop] = item.rules ?? [];
+  }
+  if (initData[pk]) {
+    formData[pk] = initData[pk];
   }
 }
 // 表单提交
 const handleSubmit = useThrottleFn(() => {
   formRef.value?.validate((valid: boolean) => {
     if (valid) {
+      if (typeof props.modalConfig.beforeSubmit === "function") {
+        props.modalConfig.beforeSubmit(formData);
+      }
       props.modalConfig.formAction(formData).then(() => {
         ElMessage.success(
-          props.modalConfig.dialog.title
+          props.modalConfig.dialog?.title
             ? `${props.modalConfig.dialog.title}成功`
             : "操作成功"
         );

src/views/demo/curd/config/add.ts

@@ -1,6 +1,8 @@
+import { addUser } from "@/api/user";
+import type { UserForm } from "@/api/user/types";
 import type { IModalConfig } from "@/components/PageModal/index.vue";
 
-const modalConfig: IModalConfig = {
+const modalConfig: IModalConfig<UserForm> = {
   pageName: "sys:user",
   dialog: {
     title: "新增用户",
@@ -8,37 +10,37 @@ const modalConfig: IModalConfig = {
     appendToBody: true,
     draggable: true,
   },
-  formAction: function (data) {
+  form: {
-    console.log("add", data);
+    labelWidth: 100,
-    return new Promise((resolve, reject) => {
+  },
-      resolve({
+  formAction: addUser,
-        code: "00000",
+  beforeSubmit(data) {
-        data: null,
+    console.log("提交之前处理", data);
-        msg: "新增成功",
-      });
-    });
   },
   formItems: [
     {
-      type: "input",
       label: "用户名",
       prop: "username",
+      rules: [{ required: true, message: "用户名不能为空", trigger: "blur" }],
+      type: "input",
       attrs: {
         placeholder: "请输入用户名",
       },
     },
     {
-      type: "input",
       label: "用户昵称",
       prop: "nickname",
+      rules: [{ required: true, message: "用户昵称不能为空", trigger: "blur" }],
+      type: "input",
       attrs: {
         placeholder: "请输入用户昵称",
       },
     },
     {
-      type: "tree-select",
       label: "所属部门",
       prop: "deptId",
+      rules: [{ required: true, message: "所属部门不能为空", trigger: "blur" }],
+      type: "tree-select",
       attrs: {
         placeholder: "请选择所属部门",
         data: [
@@ -76,9 +78,10 @@ const modalConfig: IModalConfig = {
       ],
     },
     {
-      type: "select",
       label: "角色",
       prop: "roleIds",
+      rules: [{ required: true, message: "用户角色不能为空", trigger: "blur" }],
+      type: "select",
       attrs: {
         placeholder: "请选择",
         multiple: true,
@@ -100,24 +103,38 @@ const modalConfig: IModalConfig = {
       type: "input",
       label: "手机号码",
       prop: "mobile",
+      rules: [
+        {
+          pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
+          message: "请输入正确的手机号码",
+          trigger: "blur",
+        },
+      ],
       attrs: {
         placeholder: "请输入手机号码",
         maxlength: 11,
       },
     },
     {
-      type: "input",
       label: "邮箱",
       prop: "email",
+      rules: [
+        {
+          pattern: /\w[-\w.+]*@([A-Za-z0-9][-A-Za-z0-9]+\.)+[A-Za-z]{2,14}/,
+          message: "请输入正确的邮箱地址",
+          trigger: "blur",
+        },
+      ],
+      type: "input",
       attrs: {
         placeholder: "请输入邮箱",
         maxlength: 50,
       },
     },
     {
-      type: "radio",
       label: "状态",
       prop: "status",
+      type: "radio",
       options: [
         { label: "正常", value: 1 },
         { label: "禁用", value: 0 },
@@ -125,28 +142,6 @@ const modalConfig: IModalConfig = {
       initialValue: 1,
     },
   ],
-  formRules: {
-    username: [{ required: true, message: "用户名不能为空", trigger: "blur" }],
-    nickname: [
-      { required: true, message: "用户昵称不能为空", trigger: "blur" },
-    ],
-    deptId: [{ required: true, message: "所属部门不能为空", trigger: "blur" }],
-    roleIds: [{ required: true, message: "用户角色不能为空", trigger: "blur" }],
-    email: [
-      {
-        pattern: /\w[-\w.+]*@([A-Za-z0-9][-A-Za-z0-9]+\.)+[A-Za-z]{2,14}/,
-        message: "请输入正确的邮箱地址",
-        trigger: "blur",
-      },
-    ],
-    mobile: [
-      {
-        pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
-        message: "请输入正确的手机号码",
-        trigger: "blur",
-      },
-    ],
-  },
 };
 
 export default modalConfig;

src/views/demo/curd/config/content.ts

@@ -1,70 +1,24 @@
+import { deleteUsers, exportUser, getUserPage } from "@/api/user";
+import type { UserQuery } from "@/api/user/types";
 import type { IContentConfig } from "@/components/PageContent/index.vue";
-import { exportUser } from "@/api/user";
 
-const contentConfig: IContentConfig = {
+const contentConfig: IContentConfig<UserQuery> = {
   pageName: "sys:user",
   table: {
     border: true,
     highlightCurrentRow: true,
   },
-  indexAction: function (data) {
+  indexAction: function (params) {
-    console.log("index", data);
+    if ("createAt" in params) {
-    return new Promise((resolve, reject) => {
+      const createAt = params.createAt as string[];
-      setTimeout(() => {
+      params.startTime = createAt[0];
-        resolve({
+      params.endTime = createAt[1];
-          code: "00000",
+      delete params.createAt;
-          data: {
+    }
-            list: [
+    return getUserPage(params);
-              {
-                id: 2,
-                username: "admin",
-                nickname: "系统管理员",
-                mobile: "17621210366",
-                genderLabel: "男",
-                avatar:
-                  "https://oss.youlai.tech/youlai-boot/2023/05/16/811270ef31f548af9cffc026dfc3777b.gif",
-                email: null,
-                status: 1,
-                deptName: "有来技术",
-                roleNames: "系统管理员",
-                createTime: "2019-10-10",
-              },
-              {
-                id: 3,
-                username: "test",
-                nickname: "测试小用户",
-                mobile: "17621210366",
-                genderLabel: "男",
-                avatar:
-                  "https://oss.youlai.tech/youlai-boot/2023/05/16/811270ef31f548af9cffc026dfc3777b.gif",
-                email: null,
-                status: 1,
-                deptName: "测试部门",
-                roleNames: "访问游客",
-                createTime: "2021-06-05",
-              },
-            ],
-            total: 2,
-          },
-          msg: "一切ok",
-        });
-      }, 800);
-    });
-  },
-  deleteAction: function (id) {
-    console.log("delete", id);
-    return new Promise((resolve, reject) => {
-      resolve({
-        code: "00000",
-        data: null,
-        msg: "删除成功",
-      });
-    });
-  },
-  exportAction: function (queryParams) {
-    // 导出Excel文件
-    return exportUser(queryParams as any);
   },
+  deleteAction: deleteUsers,
+  exportAction: exportUser,
   pk: "id",
   toolbar: [
     "refresh",

src/views/demo/curd/config/edit.ts

@@ -1,44 +1,46 @@
+import { updateUser } from "@/api/user";
+import type { UserForm } from "@/api/user/types";
 import type { IModalConfig } from "@/components/PageModal/index.vue";
 
-const modalConfig: IModalConfig = {
+const modalConfig: IModalConfig<UserForm> = {
   pageName: "sys:user",
+  pk: "id",
   dialog: {
     title: "修改用户",
     width: 800,
     appendToBody: true,
   },
   formAction: function (data) {
-    console.log("edit", data);
+    return updateUser(data.id as number, data);
-    return new Promise((resolve, reject) => {
+  },
-      resolve({
+  beforeSubmit(data) {
-        code: "00000",
+    console.log("提交之前处理", data);
-        data: null,
-        msg: "修改成功",
-      });
-    });
   },
   formItems: [
     {
-      type: "input",
       label: "用户名",
       prop: "username",
+      rules: [{ required: true, message: "用户名不能为空", trigger: "blur" }],
+      type: "input",
       attrs: {
         placeholder: "请输入用户名",
         readonly: true,
       },
     },
     {
-      type: "input",
       label: "用户昵称",
       prop: "nickname",
+      rules: [{ required: true, message: "用户昵称不能为空", trigger: "blur" }],
+      type: "input",
       attrs: {
         placeholder: "请输入用户昵称",
       },
     },
     {
-      type: "tree-select",
       label: "所属部门",
       prop: "deptId",
+      rules: [{ required: true, message: "所属部门不能为空", trigger: "blur" }],
+      type: "tree-select",
       attrs: {
         placeholder: "请选择所属部门",
         data: [
@@ -76,9 +78,10 @@ const modalConfig: IModalConfig = {
       ],
     },
     {
-      type: "select",
       label: "角色",
       prop: "roleIds",
+      rules: [{ required: true, message: "用户角色不能为空", trigger: "blur" }],
+      type: "select",
       attrs: {
         placeholder: "请选择",
         multiple: true,
@@ -100,53 +103,44 @@ const modalConfig: IModalConfig = {
       type: "input",
       label: "手机号码",
       prop: "mobile",
+      rules: [
+        {
+          pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
+          message: "请输入正确的手机号码",
+          trigger: "blur",
+        },
+      ],
       attrs: {
         placeholder: "请输入手机号码",
         maxlength: 11,
       },
     },
     {
-      type: "input",
       label: "邮箱",
       prop: "email",
+      rules: [
+        {
+          pattern: /\w[-\w.+]*@([A-Za-z0-9][-A-Za-z0-9]+\.)+[A-Za-z]{2,14}/,
+          message: "请输入正确的邮箱地址",
+          trigger: "blur",
+        },
+      ],
+      type: "input",
       attrs: {
         placeholder: "请输入邮箱",
         maxlength: 50,
       },
     },
     {
-      type: "radio",
       label: "状态",
       prop: "status",
+      type: "radio",
       options: [
         { label: "正常", value: 1 },
         { label: "禁用", value: 0 },
       ],
-      initialValue: 1,
     },
   ],
-  formRules: {
-    username: [{ required: true, message: "用户名不能为空", trigger: "blur" }],
-    nickname: [
-      { required: true, message: "用户昵称不能为空", trigger: "blur" },
-    ],
-    deptId: [{ required: true, message: "所属部门不能为空", trigger: "blur" }],
-    roleIds: [{ required: true, message: "用户角色不能为空", trigger: "blur" }],
-    email: [
-      {
-        pattern: /\w[-\w.+]*@([A-Za-z0-9][-A-Za-z0-9]+\.)+[A-Za-z]{2,14}/,
-        message: "请输入正确的邮箱地址",
-        trigger: "blur",
-      },
-    ],
-    mobile: [
-      {
-        pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
-        message: "请输入正确的手机号码",
-        trigger: "blur",
-      },
-    ],
-  },
 };
 
 export default modalConfig;

src/views/demo/curd/index.vue

@@ -42,12 +42,13 @@
 </template>
 
 <script setup lang="ts">
-import searchConfig from "./config/search";
+import { getUserForm } from "@/api/user";
-import contentConfig from "./config/content";
+import type { IObject, IOperatData } from "@/hooks/usePage";
-import addModalConfig from "./config/add";
-import editModalConfig from "./config/edit";
 import usePage from "@/hooks/usePage";
-import type { IOperatData, IObject } from "@/hooks/usePage";
+import addModalConfig from "./config/add";
+import contentConfig from "./config/content";
+import editModalConfig from "./config/edit";
+import searchConfig from "./config/search";
 
 const {
   searchRef,
@@ -62,37 +63,10 @@ const {
   handleExportClick,
 } = usePage();
 // 编辑
-function handleEditClick(row: IObject) {
+async function handleEditClick(row: IObject) {
-  // 模拟根据id获取数据进行填充
+  // 根据id获取数据进行填充
-  const idMap: IObject = {
+  const response = await getUserForm(row.id);
-    2: {
+  editModalRef.value?.setModalVisible(response.data);
-      id: 2,
-      username: "admin",
-      nickname: "系统管理员",
-      mobile: "17621210366",
-      gender: 1,
-      avatar:
-        "https://oss.youlai.tech/youlai-boot/2023/05/16/811270ef31f548af9cffc026dfc3777b.gif",
-      email: "",
-      status: 1,
-      deptId: 1,
-      roleIds: [2],
-    },
-    3: {
-      id: 3,
-      username: "test",
-      nickname: "测试小用户",
-      mobile: "17621210366",
-      gender: 1,
-      avatar:
-        "https://oss.youlai.tech/youlai-boot/2023/05/16/811270ef31f548af9cffc026dfc3777b.gif",
-      email: "youlaitech@163.com",
-      status: 1,
-      deptId: 3,
-      roleIds: [3],
-    },
-  };
-  editModalRef.value?.setModalVisible(idMap[row.id]);
 }
 // 其他工具栏
 function handleToolbarClick(name: string) {