feat(PageModal): ✨ 表单项增加initFn函数

src/components/PageModal/Form.vue

@@ -103,13 +103,15 @@ const props = withDefaults(
 );
 
 const formRef = ref<FormInstance>();
+const formItems = reactive(props.formItems);
 const formData = reactive<IObject>({});
 const formRules: FormRules = {};
 const watchArr = [];
 const computedArr = [];
 const watchEffectArr = [];
 // 初始化
-for (const item of props.formItems) {
+for (const item of formItems) {
+  item.initFn && item.initFn(item);
   formData[item.prop] = item.initialValue ?? "";
   formRules[item.prop] = item.rules ?? [];
   if (item.watch !== undefined) {

src/components/PageModal/types.ts

@@ -59,4 +59,6 @@ export type IFormItems<T = any> = Array<{
   computed?: (data: T) => any;
   // 监听收集函数
   watchEffect?: (data: T) => void;
+  // 初始化数据函数扩展
+  initFn?: (formItem: IObject) => void;
 }>;

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

@@ -1,3 +1,6 @@
+import DeptAPI from "@/api/dept";
+import DictAPI from "@/api/dict";
+import RoleAPI from "@/api/role";
 import UserAPI from "@/api/user";
 import type { UserForm } from "@/api/user/model";
 import type { IModalConfig } from "@/components/PageModal/index.vue";
@@ -42,26 +45,14 @@ const modalConfig: IModalConfig<UserForm> = {
       type: "tree-select",
       attrs: {
         placeholder: "请选择所属部门",
-        data: [
+        data: [],
-          {
-            value: 1,
-            label: "有来技术",
-            children: [
-              {
-                value: 2,
-                label: "研发部门",
-              },
-              {
-                value: 3,
-                label: "测试部门",
-              },
-            ],
-          },
-        ],
         filterable: true,
         "check-strictly": true,
         "render-after-expand": false,
       },
+      async initFn(formItem) {
+        formItem.attrs.data = await DeptAPI.getOptions();
+      },
     },
     {
       type: "select",
@@ -70,11 +61,10 @@ const modalConfig: IModalConfig<UserForm> = {
       attrs: {
         placeholder: "请选择",
       },
-      options: [
+      options: [],
-        { label: "男", value: 1 },
+      async initFn(formItem) {
-        { label: "女", value: 2 },
+        formItem.options = await DictAPI.getDictOptions("gender");
-        { label: "未知", value: 0 },
+      },
-      ],
     },
     {
       label: "角色",
@@ -85,18 +75,10 @@ const modalConfig: IModalConfig<UserForm> = {
         placeholder: "请选择",
         multiple: true,
       },
-      options: [
+      options: [],
-        { label: "系统管理员", value: 2 },
+      async initFn(formItem) {
-        { label: "系统管理员1", value: 4 },
+        this.options = await RoleAPI.getOptions();
-        { label: "系统管理员2", value: 5 },
+      },
-        { label: "系统管理员3", value: 6 },
-        { label: "系统管理员4", value: 7 },
-        { label: "系统管理员5", value: 8 },
-        { label: "系统管理员6", value: 9 },
-        { label: "系统管理员7", value: 10 },
-        { label: "系统管理员8", value: 11 },
-        { label: "访问游客", value: 3 },
-      ],
     },
     {
       type: "input",

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

@@ -1,3 +1,6 @@
+import DeptAPI from "@/api/dept";
+import DictAPI from "@/api/dict";
+import RoleAPI from "@/api/role";
 import UserAPI from "@/api/user";
 import type { UserForm } from "@/api/user/model";
 import type { IModalConfig } from "@/components/PageModal/index.vue";
@@ -43,26 +46,14 @@ const modalConfig: IModalConfig<UserForm> = {
       type: "tree-select",
       attrs: {
         placeholder: "请选择所属部门",
-        data: [
+        data: [],
-          {
-            value: 1,
-            label: "有来技术",
-            children: [
-              {
-                value: 2,
-                label: "研发部门",
-              },
-              {
-                value: 3,
-                label: "测试部门",
-              },
-            ],
-          },
-        ],
         filterable: true,
         "check-strictly": true,
         "render-after-expand": false,
       },
+      async initFn(formItem) {
+        formItem.attrs.data = await DeptAPI.getOptions();
+      },
     },
     {
       type: "select",
@@ -71,11 +62,10 @@ const modalConfig: IModalConfig<UserForm> = {
       attrs: {
         placeholder: "请选择",
       },
-      options: [
+      options: [],
-        { label: "男", value: 1 },
+      async initFn(formItem) {
-        { label: "女", value: 2 },
+        formItem.options = await DictAPI.getDictOptions("gender");
-        { label: "未知", value: 0 },
+      },
-      ],
     },
     {
       label: "角色",
@@ -86,18 +76,10 @@ const modalConfig: IModalConfig<UserForm> = {
         placeholder: "请选择",
         multiple: true,
       },
-      options: [
+      options: [],
-        { label: "系统管理员", value: 2 },
+      async initFn(formItem) {
-        { label: "系统管理员1", value: 4 },
+        this.options = await RoleAPI.getOptions();
-        { label: "系统管理员2", value: 5 },
+      },
-        { label: "系统管理员3", value: 6 },
-        { label: "系统管理员4", value: 7 },
-        { label: "系统管理员5", value: 8 },
-        { label: "系统管理员6", value: 9 },
-        { label: "系统管理员7", value: 10 },
-        { label: "系统管理员8", value: 11 },
-        { label: "访问游客", value: 3 },
-      ],
     },
     {
       type: "input",