From d21b5e9e2b42d287bffb3538520a88bca141e207 Mon Sep 17 00:00:00 2001
From: cshaptx4869 <994774638@qq.com>
Date: Mon, 20 May 2024 10:14:58 +0800
Subject: [PATCH 1/9] =?UTF-8?q?feat(CURD):=20:sparkles:=20=E6=94=AF?=
 =?UTF-8?q?=E6=8C=81=E6=90=9C=E7=B4=A2=E8=A1=A8=E5=8D=95=E6=98=BE=E9=9A=90?=
 =?UTF-8?q?=E6=8E=A7=E5=88=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/PageContent/index.vue | 24 +++++++++++++++---------
 src/components/PageSearch/index.vue  | 19 +++++++++++++++----
 src/hooks/usePage.ts                 |  5 +++++
 src/views/demo/curd/index.vue        |  2 ++
 4 files changed, 37 insertions(+), 13 deletions(-)

diff --git a/src/components/PageContent/index.vue b/src/components/PageContent/index.vue
index 7ec2e6ab..96172935 100644
--- a/src/components/PageContent/index.vue
+++ b/src/components/PageContent/index.vue
@@ -76,6 +76,10 @@
               </template>
             </el-popover>
           </template>
+          <!-- 搜索 -->
+          <template v-else-if="item === 'search'">
+            <el-button icon="search" circle @click="handleToolbar(item)" />
+          </template>
         </template>
       </div>
     </div>
@@ -149,11 +153,7 @@
                   :disabled="!hasAuth(`${contentConfig.pageName}:modify`)"
                   @change="
                     pageData.length > 0 &&
-                      handleSwitchChange(
-                        col.prop,
-                        scope.row[col.prop],
-                        scope.row
-                      )
+                      handleModify(col.prop, scope.row[col.prop], scope.row)
                   "
                 />
               </template>
@@ -316,7 +316,7 @@ export interface IContentConfig<T = any> {
       }
   >;
   // 表格工具栏右侧图标
-  defaultToolbar?: ("refresh" | "filter")[];
+  defaultToolbar?: ("refresh" | "filter" | "search")[];
   // table组件列属性(额外的属性templet,operat,slotName)
   cols: Array<{
     type?: "default" | "selection" | "index" | "expand";
@@ -365,12 +365,11 @@ const props = defineProps<{
 const emit = defineEmits<{
   addClick: [];
   exportClick: [];
+  searchClick: [];
   toolbarClick: [name: string];
   editClick: [row: IObject];
   operatClick: [data: IOperatData];
 }>();
-// 暴露的属性和方法
-defineExpose({ fetchPageData, exportPageData });
 
 // 主键
 const pk = props.contentConfig.pk ?? "id";
@@ -380,6 +379,7 @@ const toolbar = props.contentConfig.toolbar ?? ["add", "delete"];
 const defaultToolbar = props.contentConfig.defaultToolbar ?? [
   "refresh",
   "filter",
+  "search",
 ];
 // 表格列
 const cols = ref(
@@ -468,6 +468,9 @@ function handleToolbar(name: string) {
     case "refresh":
       handleRefresh();
       break;
+    case "search":
+      emit("searchClick");
+      break;
     case "add":
       emit("addClick");
       break;
@@ -522,7 +525,7 @@ function exportPageData(queryParams: IObject = {}) {
   }
 }
 // 属性修改
-function handleSwitchChange(
+function handleModify(
   field: string,
   value: boolean | string | number,
   row: Record<string, any>
@@ -537,6 +540,9 @@ function handleSwitchChange(
     ElMessage.error("未配置modifyAction");
   }
 }
+
+// 暴露的属性和方法
+defineExpose({ fetchPageData, exportPageData });
 </script>
 
 <style lang="scss" scoped></style>
diff --git a/src/components/PageSearch/index.vue b/src/components/PageSearch/index.vue
index 21a5e346..33545529 100644
--- a/src/components/PageSearch/index.vue
+++ b/src/components/PageSearch/index.vue
@@ -1,5 +1,9 @@
 <template>
-  <div class="search-container" v-hasPerm="[`${searchConfig.pageName}:query`]">
+  <div
+    class="search-container"
+    v-show="visible"
+    v-hasPerm="[`${searchConfig.pageName}:query`]"
+  >
     <el-form ref="queryFormRef" :model="queryParams" :inline="true">
       <template
         v-for="(item, index) in searchConfig.formItems"
@@ -102,9 +106,9 @@ const emit = defineEmits<{
   queryClick: [queryParams: IObject];
   resetClick: [queryParams: IObject];
 }>();
-// 暴露的属性和方法
-defineExpose({ getQueryParams });
 
+// 是否显示
+const visible = ref(true);
 // 是否可展开/收缩
 const isExpandable = ref(props.searchConfig.isExpandable ?? true);
 // 是否已展开
@@ -137,6 +141,13 @@ function handleQuery() {
 function getQueryParams() {
   return queryParams;
 }
+// 显示/隐藏 SearchForm
+function toggleVisible() {
+  visible.value = !visible.value;
+}
+
+// 暴露的属性和方法
+defineExpose({ getQueryParams, toggleVisible });
 </script>
 
 <style lang="scss" scoped>
@@ -146,6 +157,6 @@ function getQueryParams() {
   background-color: var(--el-bg-color-overlay);
   border: 1px solid var(--el-border-color-light);
   border-radius: 4px;
-  box-shadow: var(--el-box-shadow-light);
+  box-shadow: none;
 }
 </style>
diff --git a/src/hooks/usePage.ts b/src/hooks/usePage.ts
index a20fc4c6..802623b0 100644
--- a/src/hooks/usePage.ts
+++ b/src/hooks/usePage.ts
@@ -40,6 +40,10 @@ function usePage() {
     const queryParams = searchRef.value?.getQueryParams();
     contentRef.value?.exportPageData(queryParams);
   }
+  // 搜索显隐
+  function handelSearchClick() {
+    searchRef.value?.toggleVisible();
+  }
 
   return {
     searchRef,
@@ -52,6 +56,7 @@ function usePage() {
     handleEditClick,
     handleSubmitClick,
     handleExportClick,
+    handelSearchClick,
   };
 }
 
diff --git a/src/views/demo/curd/index.vue b/src/views/demo/curd/index.vue
index 4130aa0d..7f8ca6cf 100644
--- a/src/views/demo/curd/index.vue
+++ b/src/views/demo/curd/index.vue
@@ -24,6 +24,7 @@
       @add-click="handleAddClick"
       @edit-click="handleEditClick"
       @export-click="handleExportClick"
+      @search-click="handelSearchClick"
       @toolbar-click="handleToolbarClick"
       @operat-click="handleOperatClick"
     >
@@ -70,6 +71,7 @@ const {
   // handleEditClick,
   handleSubmitClick,
   handleExportClick,
+  handelSearchClick,
 } = usePage();
 // 编辑
 async function handleEditClick(row: IObject) {

From d5793c3ee220a8cbd0206f975efb246d2a5880c9 Mon Sep 17 00:00:00 2001
From: cshaptx4869 <994774638@qq.com>
Date: Mon, 20 May 2024 10:27:38 +0800
Subject: [PATCH 2/9] =?UTF-8?q?fix(usePage):=20:bug:=20=E4=BF=AE=E5=A4=8D?=
 =?UTF-8?q?=E5=8D=95=E8=AF=8D=E6=8B=BC=E5=86=99=E9=94=99=E8=AF=AF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/hooks/usePage.ts          | 4 ++--
 src/views/demo/curd/index.vue | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/hooks/usePage.ts b/src/hooks/usePage.ts
index 802623b0..7c3ab859 100644
--- a/src/hooks/usePage.ts
+++ b/src/hooks/usePage.ts
@@ -41,7 +41,7 @@ function usePage() {
     contentRef.value?.exportPageData(queryParams);
   }
   // 搜索显隐
-  function handelSearchClick() {
+  function handleSearchClick() {
     searchRef.value?.toggleVisible();
   }
 
@@ -56,7 +56,7 @@ function usePage() {
     handleEditClick,
     handleSubmitClick,
     handleExportClick,
-    handelSearchClick,
+    handleSearchClick,
   };
 }
 
diff --git a/src/views/demo/curd/index.vue b/src/views/demo/curd/index.vue
index 7f8ca6cf..e5cea7d7 100644
--- a/src/views/demo/curd/index.vue
+++ b/src/views/demo/curd/index.vue
@@ -24,7 +24,7 @@
       @add-click="handleAddClick"
       @edit-click="handleEditClick"
       @export-click="handleExportClick"
-      @search-click="handelSearchClick"
+      @search-click="handleSearchClick"
       @toolbar-click="handleToolbarClick"
       @operat-click="handleOperatClick"
     >
@@ -71,7 +71,7 @@ const {
   // handleEditClick,
   handleSubmitClick,
   handleExportClick,
-  handelSearchClick,
+  handleSearchClick,
 } = usePage();
 // 编辑
 async function handleEditClick(row: IObject) {

From 8ed10ffa6d69766f846ef3d14f6bf8c50759a2a0 Mon Sep 17 00:00:00 2001
From: cshaptx4869 <994774638@qq.com>
Date: Mon, 20 May 2024 11:00:09 +0800
Subject: [PATCH 3/9] =?UTF-8?q?refactor(PageContent):=20:recycle:=20?=
 =?UTF-8?q?=E7=82=B9=E5=87=BB=E8=A1=A8=E6=A0=BC=E5=88=B7=E6=96=B0=E6=8C=89?=
 =?UTF-8?q?=E9=92=AE=E4=B8=8D=E9=87=8D=E7=BD=AE=E9=A1=B5=E7=A0=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/PageContent/index.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/PageContent/index.vue b/src/components/PageContent/index.vue
index 96172935..24afe9ed 100644
--- a/src/components/PageContent/index.vue
+++ b/src/components/PageContent/index.vue
@@ -433,7 +433,7 @@ function handleSelectionChange(selection: any[]) {
 }
 // 刷新
 function handleRefresh() {
-  fetchPageData({}, true);
+  fetchPageData(lastFormData);
 }
 // 删除
 function handleDelete(id?: number | string) {
@@ -451,7 +451,7 @@ function handleDelete(id?: number | string) {
     if (props.contentConfig.deleteAction) {
       props.contentConfig.deleteAction(ids).then(() => {
         ElMessage.success("删除成功");
-        handleRefresh();
+        fetchPageData({}, true);
       });
     } else {
       ElMessage.error("未配置deleteAction");

From 19375de4d88a54c1e5c1b13dbee8ae3afbcee129 Mon Sep 17 00:00:00 2001
From: cshaptx4869 <994774638@qq.com>
Date: Mon, 20 May 2024 11:10:13 +0800
Subject: [PATCH 4/9] =?UTF-8?q?refactor(PageContent):=20:recycle:=20?=
 =?UTF-8?q?=E7=AD=9B=E9=80=89=E5=88=97=E8=B6=85=E5=87=BA=E4=B8=80=E5=AE=9A?=
 =?UTF-8?q?=E9=AB=98=E5=BA=A6=E6=BB=9A=E5=8A=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/PageContent/index.vue | 16 +++++++++-------
 1 file changed, 9 insertions(+), 7 deletions(-)

diff --git a/src/components/PageContent/index.vue b/src/components/PageContent/index.vue
index 24afe9ed..3c40d283 100644
--- a/src/components/PageContent/index.vue
+++ b/src/components/PageContent/index.vue
@@ -67,13 +67,15 @@
               <template #reference>
                 <el-button icon="Operation" circle />
               </template>
-              <template v-for="col in cols" :key="col">
-                <el-checkbox
-                  v-if="col.prop"
-                  v-model="col.show"
-                  :label="col.label"
-                />
-              </template>
+              <el-scrollbar max-height="350px">
+                <template v-for="col in cols" :key="col">
+                  <el-checkbox
+                    v-if="col.prop"
+                    v-model="col.show"
+                    :label="col.label"
+                  />
+                </template>
+              </el-scrollbar>
             </el-popover>
           </template>
           <!-- 搜索 -->

From 8d6473173c0bda1ea714f79dd88f9f2674a0cc03 Mon Sep 17 00:00:00 2001
From: cshaptx4869 <994774638@qq.com>
Date: Wed, 22 May 2024 16:30:49 +0800
Subject: [PATCH 5/9] =?UTF-8?q?feat(PageContent):=20:sparkles:=20=E6=94=AF?=
 =?UTF-8?q?=E6=8C=81input=E5=B1=9E=E6=80=A7=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/PageContent/index.vue   | 13 +++++++++++++
 src/views/demo/curd/config/content2.ts | 11 ++++++++++-
 2 files changed, 23 insertions(+), 1 deletion(-)

diff --git a/src/components/PageContent/index.vue b/src/components/PageContent/index.vue
index 3c40d283..5cc9489e 100644
--- a/src/components/PageContent/index.vue
+++ b/src/components/PageContent/index.vue
@@ -160,6 +160,17 @@
                 />
               </template>
             </template>
+            <!-- 生成输入框组件 -->
+            <template v-else-if="col.templet === 'input'">
+              <template v-if="col.prop">
+                <el-input
+                  v-model="scope.row[col.prop]"
+                  :type="col.inputType ?? 'text'"
+                  :disabled="!hasAuth(`${contentConfig.pageName}:modify`)"
+                  @blur="handleModify(col.prop, scope.row[col.prop], scope.row)"
+                />
+              </template>
+            </template>
             <!-- 格式化为价格 -->
             <template v-else-if="col.templet === 'price'">
               <template v-if="col.prop">
@@ -332,6 +343,7 @@ export interface IContentConfig<T = any> {
       | "list"
       | "url"
       | "switch"
+      | "input"
       | "price"
       | "percent"
       | "icon"
@@ -345,6 +357,7 @@ export interface IContentConfig<T = any> {
     inactiveValue?: boolean | string | number;
     activeText?: string;
     inactiveText?: string;
+    inputType?: string;
     priceFormat?: string;
     dateFormat?: string;
     operat?: Array<
diff --git a/src/views/demo/curd/config/content2.ts b/src/views/demo/curd/config/content2.ts
index b4b02c7e..e2e53480 100644
--- a/src/views/demo/curd/config/content2.ts
+++ b/src/views/demo/curd/config/content2.ts
@@ -22,6 +22,7 @@ const contentConfig: IContentConfig = {
           gender: 1,
           status: 1,
           status2: 1,
+          sort: 99,
           createTime: 1715647982437,
         },
         {
@@ -36,13 +37,14 @@ const contentConfig: IContentConfig = {
           gender: 0,
           status: 0,
           status2: 0,
+          sort: 0,
           createTime: 1715648977426,
         },
       ],
     });
   },
   modifyAction(data) {
-    // console.log("modifyAction:", data);
+    console.log("modifyAction:", data);
     return Promise.resolve(null);
   },
   cols: [
@@ -89,6 +91,13 @@ const contentConfig: IContentConfig = {
       activeText: "启用",
       inactiveText: "禁用",
     },
+    {
+      label: "排序",
+      align: "center",
+      prop: "sort",
+      templet: "input",
+      inputType: "number",
+    },
     {
       label: "创建时间",
       align: "center",

From 7f4be6649bce1089711e13bddf22dbc5565eb189 Mon Sep 17 00:00:00 2001
From: andm31 <shenzhefeng@insigma.com.cn>
Date: Thu, 23 May 2024 10:38:38 +0800
Subject: [PATCH 6/9] =?UTF-8?q?fix:=20:bug:=20=E4=BF=AE=E6=94=B9tagsview?=
 =?UTF-8?q?=E5=88=B7=E6=96=B0=E4=B8=A2=E5=A4=B1query=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

修复url携带query时，顶部tagsview点击丢失问题
---
 src/layout/components/TagsView/index.vue | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/layout/components/TagsView/index.vue b/src/layout/components/TagsView/index.vue
index 4255fa68..7d2096fe 100644
--- a/src/layout/components/TagsView/index.vue
+++ b/src/layout/components/TagsView/index.vue
@@ -162,6 +162,7 @@ function addTags() {
       fullPath: route.fullPath,
       affix: route.meta?.affix,
       keepAlive: route.meta?.keepAlive,
+      query: route.query,
     });
   }
 }
@@ -181,6 +182,7 @@ function moveToCurrentTag() {
             fullPath: route.fullPath,
             affix: route.meta?.affix,
             keepAlive: route.meta?.keepAlive,
+            query: route.query,
           });
         }
       }
@@ -222,7 +224,7 @@ function refreshSelectedTag(view: TagView) {
   tagsViewStore.delCachedView(view);
   const { fullPath } = view;
   nextTick(() => {
-    router.replace({ path: "/redirect" + fullPath });
+    router.replace("/redirect" + fullPath);
   });
 }
 
@@ -235,7 +237,7 @@ function toLastView(visitedViews: TagView[], view?: TagView) {
     // you can adjust it according to your needs.
     if (view?.name === "Dashboard") {
       // to reload home page
-      router.replace({ path: "/redirect" + view.fullPath });
+      router.replace("/redirect" + view.fullPath);
     } else {
       router.push("/");
     }

From bc04041fba5fb16232aa6795d03ed9334d7aae82 Mon Sep 17 00:00:00 2001
From: andm31 <shenzhefeng@insigma.com.cn>
Date: Thu, 23 May 2024 11:06:03 +0800
Subject: [PATCH 7/9] =?UTF-8?q?feat:=20:sparkles:=20search=E9=85=8D?=
 =?UTF-8?q?=E7=BD=AE=E6=96=B0=E5=A2=9E=E5=87=BD=E6=95=B0=E8=83=BD=E5=8A=9B?=
 =?UTF-8?q?=E6=8B=93=E5=B1=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

search表单，部分情况下需要函数扩展数据处理能力。如options为异步获取的情况
---
 src/components/PageSearch/index.vue  | 10 +++++++++-
 src/views/demo/curd/config/search.ts | 13 +++++++++----
 2 files changed, 18 insertions(+), 5 deletions(-)

diff --git a/src/components/PageSearch/index.vue b/src/components/PageSearch/index.vue
index 33545529..363d1f67 100644
--- a/src/components/PageSearch/index.vue
+++ b/src/components/PageSearch/index.vue
@@ -69,7 +69,7 @@
 
 <script setup lang="ts">
 import type { FormInstance } from "element-plus";
-import { reactive, ref } from "vue";
+import { reactive, ref, onMounted } from "vue";
 
 // 对象类型
 type IObject = Record<string, any>;
@@ -91,6 +91,8 @@ export interface ISearchConfig {
     initialValue?: any;
     // 可选项(适用于select组件)
     options?: { label: string; value: any }[];
+    // 初始化数据函数扩展（适用初始化options）
+    initFn?: Function;
   }>;
   // 是否开启展开和收缩
   isExpandable?: boolean;
@@ -146,6 +148,12 @@ function toggleVisible() {
   visible.value = !visible.value;
 }
 
+onMounted(() => {
+  props.searchConfig.formItems.forEach((item) => {
+    item.initFn && item.initFn();
+  });
+});
+
 // 暴露的属性和方法
 defineExpose({ getQueryParams, toggleVisible });
 </script>
diff --git a/src/views/demo/curd/config/search.ts b/src/views/demo/curd/config/search.ts
index 07045b57..d663262c 100644
--- a/src/views/demo/curd/config/search.ts
+++ b/src/views/demo/curd/config/search.ts
@@ -57,10 +57,15 @@ const searchConfig: ISearchConfig = {
           width: "100px",
         },
       },
-      options: [
-        { label: "启用", value: 1 },
-        { label: "禁用", value: 0 },
-      ],
+      options: [],
+      initFn() {
+        setTimeout(() => {
+          this.options = [
+            { label: "启用", value: 1 },
+            { label: "禁用", value: 0 },
+          ];
+        }, 300);
+      },
     },
     {
       type: "date-picker",

From 379c060b91d9b99e4e35c90c61e9e95672f49b59 Mon Sep 17 00:00:00 2001
From: cshaptx4869 <994774638@qq.com>
Date: Thu, 23 May 2024 15:51:09 +0800
Subject: [PATCH 8/9] =?UTF-8?q?refactor(PageContent):=20:recycle:=20?=
 =?UTF-8?q?=E4=BC=98=E5=8C=96=E5=8A=A0=E5=BC=BAinitFn=E5=87=BD=E6=95=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/PageSearch/index.vue  | 30 ++++++++++-------------
 src/views/demo/curd/config/search.ts | 36 +++++++++-------------------
 src/views/demo/curd/index.vue        |  1 +
 3 files changed, 24 insertions(+), 43 deletions(-)

diff --git a/src/components/PageSearch/index.vue b/src/components/PageSearch/index.vue
index 363d1f67..0ba26e60 100644
--- a/src/components/PageSearch/index.vue
+++ b/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>
diff --git a/src/views/demo/curd/config/search.ts b/src/views/demo/curd/config/search.ts
index d663262c..f69d168a 100644
--- a/src/views/demo/curd/config/search.ts
+++ b/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",
diff --git a/src/views/demo/curd/index.vue b/src/views/demo/curd/index.vue
index e5cea7d7..49e2c3f8 100644
--- a/src/views/demo/curd/index.vue
+++ b/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";
 

From 6a9321d2a6e0a7b67e2ccbe6c4f53d78286d88be Mon Sep 17 00:00:00 2001
From: cshaptx4869 <994774638@qq.com>
Date: Thu, 23 May 2024 16:20:31 +0800
Subject: [PATCH 9/9] =?UTF-8?q?feat(PageModal):=20:sparkles:=20=E8=A1=A8?=
 =?UTF-8?q?=E5=8D=95=E9=A1=B9=E5=A2=9E=E5=8A=A0initFn=E5=87=BD=E6=95=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/PageModal/Form.vue  |  4 ++-
 src/components/PageModal/types.ts  |  2 ++
 src/views/demo/curd/config/add.ts  | 48 ++++++++++--------------------
 src/views/demo/curd/config/edit.ts | 48 ++++++++++--------------------
 4 files changed, 35 insertions(+), 67 deletions(-)

diff --git a/src/components/PageModal/Form.vue b/src/components/PageModal/Form.vue
index 50623ed4..fe3ba1ee 100644
--- a/src/components/PageModal/Form.vue
+++ b/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) {
diff --git a/src/components/PageModal/types.ts b/src/components/PageModal/types.ts
index dd25fe7b..cddca5fb 100644
--- a/src/components/PageModal/types.ts
+++ b/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;
 }>;
diff --git a/src/views/demo/curd/config/add.ts b/src/views/demo/curd/config/add.ts
index 1400b748..19409669 100644
--- a/src/views/demo/curd/config/add.ts
+++ b/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: [
-          {
-            value: 1,
-            label: "有来技术",
-            children: [
-              {
-                value: 2,
-                label: "研发部门",
-              },
-              {
-                value: 3,
-                label: "测试部门",
-              },
-            ],
-          },
-        ],
+        data: [],
         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: [
-        { label: "男", value: 1 },
-        { label: "女", value: 2 },
-        { label: "未知", value: 0 },
-      ],
+      options: [],
+      async initFn(formItem) {
+        formItem.options = await DictAPI.getDictOptions("gender");
+      },
     },
     {
       label: "角色",
@@ -85,18 +75,10 @@ const modalConfig: IModalConfig<UserForm> = {
         placeholder: "请选择",
         multiple: true,
       },
-      options: [
-        { label: "系统管理员", value: 2 },
-        { label: "系统管理员1", value: 4 },
-        { 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 },
-      ],
+      options: [],
+      async initFn(formItem) {
+        this.options = await RoleAPI.getOptions();
+      },
     },
     {
       type: "input",
diff --git a/src/views/demo/curd/config/edit.ts b/src/views/demo/curd/config/edit.ts
index 2f7d4cb7..b8cccd2d 100644
--- a/src/views/demo/curd/config/edit.ts
+++ b/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: [
-          {
-            value: 1,
-            label: "有来技术",
-            children: [
-              {
-                value: 2,
-                label: "研发部门",
-              },
-              {
-                value: 3,
-                label: "测试部门",
-              },
-            ],
-          },
-        ],
+        data: [],
         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: [
-        { label: "男", value: 1 },
-        { label: "女", value: 2 },
-        { label: "未知", value: 0 },
-      ],
+      options: [],
+      async initFn(formItem) {
+        formItem.options = await DictAPI.getDictOptions("gender");
+      },
     },
     {
       label: "角色",
@@ -86,18 +76,10 @@ const modalConfig: IModalConfig<UserForm> = {
         placeholder: "请选择",
         multiple: true,
       },
-      options: [
-        { label: "系统管理员", value: 2 },
-        { label: "系统管理员1", value: 4 },
-        { 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 },
-      ],
+      options: [],
+      async initFn(formItem) {
+        this.options = await RoleAPI.getOptions();
+      },
     },
     {
       type: "input",