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>