refactor(PageContent): ♻️ 优化加强initFn函数

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

@@ -1,3 +1,4 @@
+import DeptAPI from "@/api/dept";
 import type { ISearchConfig } from "@/components/PageSearch/index.vue";
 
 const searchConfig: ISearchConfig = {
@@ -21,22 +22,7 @@ const searchConfig: ISearchConfig = {
       prop: "deptId",
       attrs: {
         placeholder: "请选择",
-        data: [
-          {
-            value: 1,
-            label: "有来技术",
-            children: [
-              {
-                value: 2,
-                label: "研发部门",
-              },
-              {
-                value: 3,
-                label: "测试部门",
-              },
-            ],
-          },
-        ],
+        data: [],
         filterable: true,
         "check-strictly": true,
         "render-after-expand": false,
@@ -45,6 +31,11 @@ const searchConfig: ISearchConfig = {
           width: "150px",
         },
       },
+      async initFn(formItem) {
+        formItem.attrs.data = await DeptAPI.getOptions();
+        // 注意:如果initFn函数不是箭头函数,this会指向此配置项对象,那么也就可以用this来替代形参formItem
+        // this.attrs!.data = await DeptAPI.getOptions();
+      },
     },
     {
       type: "select",
@@ -57,15 +48,10 @@ const searchConfig: ISearchConfig = {
           width: "100px",
         },
       },
-      options: [],
-      initFn() {
-        setTimeout(() => {
-          this.options = [
-            { label: "启用", value: 1 },
-            { label: "禁用", value: 0 },
-          ];
-        }, 300);
-      },
+      options: [
+        { label: "启用", value: 1 },
+        { label: "禁用", value: 0 },
+      ],
     },
     {
       type: "date-picker",

src/views/demo/curd/index.vue

@@ -57,6 +57,7 @@ import type { IObject, IOperatData } from "@/hooks/usePage";
 import usePage from "@/hooks/usePage";
 import addModalConfig from "./config/add";
 import contentConfig from "./config/content";
+// import contentConfig from "./config/content2";
 import editModalConfig from "./config/edit";
 import searchConfig from "./config/search";