Merge pull request #75 from cshaptx4869/patch-38

refactor: ♻️ 加强CURD表单组件、CURD使用示例改为真实接口
2024-04-29 16:34:13 +08:00
parent 41ea932f28 3e69247502
commit 8befc6a2dd
7 changed files with 132 additions and 194 deletions
--- a/src/api/user/index.ts
+++ b/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",
--- a/src/components/PageContent/index.vue
+++ b/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,也可自定义)
--- a/src/components/PageModal/index.vue
+++ b/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 {
-  // dialog组件属性
-  dialog: Partial<Omit<DialogProps, "modelValue">>;
+export interface IModalConfig<T = any> {
  // 页面名称
  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等)
-    type: string;
+    // 组件类型(如input,select,radio,custom等，默认input)
+    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}成功`
            : "操作成功"
        );
--- 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) {