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

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 new Promise((resolve, reject) => {
-      resolve({
-        code: "00000",
-        data: null,
-        msg: "修改成功",
-      });
-    });
+    return updateUser(data.id as number, data);
+  },
+  beforeSubmit(data) {
+    console.log("提交之前处理", data);
   },
   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;