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

src/components/PageSearch/index.vue

@@ -5,10 +5,7 @@
     v-hasPerm="[`${searchConfig.pageName}:query`]"
   >
     <el-form ref="queryFormRef" :model="queryParams" :inline="true">
-      <template
-        v-for="(item, index) in searchConfig.formItems"
-        :key="item.prop"
-      >
+      <template v-for="(item, index) in formItems" :key="item.prop">
         <el-form-item
           v-show="isExpand ? true : index < showNumber"
           :label="item.label"
@@ -53,7 +50,7 @@
         <el-button icon="refresh" @click="handleReset">重置</el-button>
         <!-- 展开/收起 -->
         <el-link
-          v-if="isExpandable && searchConfig.formItems.length > showNumber"
+          v-if="isExpandable && formItems.length > showNumber"
           class="ml-2"
           type="primary"
           :underline="false"
@@ -69,7 +66,7 @@
 
 <script setup lang="ts">
 import type { FormInstance } from "element-plus";
-import { reactive, ref, onMounted } from "vue";
+import { reactive, ref } from "vue";
 
 // 对象类型
 type IObject = Record<string, any>;
@@ -91,14 +88,15 @@ export interface ISearchConfig {
     initialValue?: any;
     // 可选项(适用于select组件)
     options?: { label: string; value: any }[];
-    // 初始化数据函数扩展（适用初始化options）
-    initFn?: Function;
+    // 初始化数据函数扩展
+    initFn?: (formItem: IObject) => void;
   }>;
   // 是否开启展开和收缩
   isExpandable?: boolean;
   // 默认展示的表单项数量
   showNumber?: number;
 }
+
 interface IProps {
   searchConfig: ISearchConfig;
 }
@@ -109,8 +107,11 @@ const emit = defineEmits<{
   resetClick: [queryParams: IObject];
 }>();
 
+const queryFormRef = ref<FormInstance>();
 // 是否显示
 const visible = ref(true);
+// 响应式的formItems
+const formItems = reactive(props.searchConfig.formItems);
 // 是否可展开/收缩
 const isExpandable = ref(props.searchConfig.isExpandable ?? true);
 // 是否已展开
@@ -120,14 +121,13 @@ const showNumber = computed(() => {
   if (isExpandable.value === true) {
     return props.searchConfig.showNumber ?? 3;
   } else {
-    return props.searchConfig.formItems.length;
+    return formItems.length;
   }
 });
-
-const queryFormRef = ref<FormInstance>();
 // 搜索表单数据
 const queryParams = reactive<IObject>({});
-for (const item of props.searchConfig.formItems) {
+for (const item of formItems) {
+  item.initFn && item.initFn(item);
   queryParams[item.prop] = item.initialValue ?? "";
 }
 // 重置操作
@@ -148,12 +148,6 @@ function toggleVisible() {
   visible.value = !visible.value;
 }
 
-onMounted(() => {
-  props.searchConfig.formItems.forEach((item) => {
-    item.initFn && item.initFn();
-  });
-});
-
 // 暴露的属性和方法
 defineExpose({ getQueryParams, toggleVisible });
 </script>

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";