feat(CURD): ✨ 支持搜索表单显隐控制

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(
+                      handleModify(col.prop, scope.row[col.prop], scope.row)
-                        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>

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>

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,
   };
 }
 

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) {