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

2024-04-29 16:28:24 +08:00
parent 41ea932f28
commit 3e69247502
7 changed files with 132 additions and 194 deletions
--- a/src/views/demo/curd/config/add.ts
+++ b/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) {
-    console.log("add", data);
-    return new Promise((resolve, reject) => {
-      resolve({
-        code: "00000",
-        data: null,
-        msg: "新增成功",
-      });
-    });
+  form: {
+    labelWidth: 100,
+  },
+  formAction: addUser,
+  beforeSubmit(data) {
+    console.log("提交之前处理", data);
  },
  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;
--- a/src/views/demo/curd/config/content.ts
+++ b/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) {
-    console.log("index", data);
-    return new Promise((resolve, reject) => {
-      setTimeout(() => {
-        resolve({
-          code: "00000",
-          data: {
-            list: [
-              {
-                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);
+  indexAction: function (params) {
+    if ("createAt" in params) {
+      const createAt = params.createAt as string[];
+      params.startTime = createAt[0];
+      params.endTime = createAt[1];
+      delete params.createAt;
+    }
+    return getUserPage(params);
  },
+  deleteAction: deleteUsers,
+  exportAction: exportUser,
  pk: "id",
  toolbar: [
    "refresh",
--- a/src/views/demo/curd/config/edit.ts
+++ b/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;
--- a/src/views/demo/curd/index.vue
+++ b/src/views/demo/curd/index.vue
@@ -42,12 +42,13 @@
 </template>

 <script setup lang="ts">
-import searchConfig from "./config/search";
-import contentConfig from "./config/content";
-import addModalConfig from "./config/add";
-import editModalConfig from "./config/edit";
+import { getUserForm } from "@/api/user";
+import type { IObject, IOperatData } from "@/hooks/usePage";
 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) {
-  // 模拟根据id获取数据进行填充
-  const idMap: IObject = {
-    2: {
-      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]);
+async function handleEditClick(row: IObject) {
+  // 根据id获取数据进行填充
+  const response = await getUserForm(row.id);
+  editModalRef.value?.setModalVisible(response.data);
 }
 // 其他工具栏
 function handleToolbarClick(name: string) {