Merge pull request #92 from cshaptx4869/patch-54

refactor: ♻️ 优化PageSearch组件

src/components/PageSearch/index.vue

@@ -1,171 +1,71 @@
 <template>
   <div class="search-container" v-hasPerm="[`${searchConfig.pageName}:query`]">
-    <el-form ref="queryFormRef" :model="queryParams">
-      <el-row :gutter="20">
-        <template
-          v-if="isExpand || searchConfig.formItems.length <= showNumber"
+    <el-form ref="queryFormRef" :model="queryParams" :inline="true">
+      <template
+        v-for="(item, index) in searchConfig.formItems"
+        :key="item.prop"
+      >
+        <el-form-item
+          v-show="isExpand ? true : index < showNumber"
+          :label="item.label"
+          :prop="item.prop"
         >
-          <el-col
-            v-bind="colSpans"
-            v-for="item in searchConfig.formItems"
-            :key="item.prop"
-          >
-            <el-form-item :label="item.label" :prop="item.prop">
-              <!-- Input 输入框 -->
-              <template v-if="item.type === 'input'">
-                <template v-if="item.attrs?.type === 'number'">
-                  <el-input
-                    v-model.number="queryParams[item.prop]"
-                    v-bind="item.attrs"
-                    @keyup.enter="handleQuery"
-                  />
-                </template>
-                <template v-else>
-                  <el-input
-                    v-model="queryParams[item.prop]"
-                    v-bind="item.attrs"
-                    @keyup.enter="handleQuery"
-                  />
-                </template>
+          <!-- Input 输入框 -->
+          <template v-if="item.type === 'input' || item.type === undefined">
+            <el-input
+              v-model="queryParams[item.prop]"
+              v-bind="item.attrs"
+              @keyup.enter="handleQuery"
+            />
+          </template>
+          <!-- Select 选择器 -->
+          <template v-else-if="item.type === 'select'">
+            <el-select v-model="queryParams[item.prop]" v-bind="item.attrs">
+              <template v-for="option in item.options" :key="option.value">
+                <el-option :label="option.label" :value="option.value" />
               </template>
-              <!-- Select 选择器 -->
-              <template v-else-if="item.type === 'select'">
-                <el-select v-model="queryParams[item.prop]" v-bind="item.attrs">
-                  <template v-for="option in item.options" :key="option.value">
-                    <el-option :label="option.label" :value="option.value" />
-                  </template>
-                </el-select>
-              </template>
-              <!-- TreeSelect 树形选择 -->
-              <template v-else-if="item.type === 'tree-select'">
-                <el-tree-select
-                  v-model="queryParams[item.prop]"
-                  v-bind="item.attrs"
-                />
-              </template>
-              <!-- DatePicker 日期选择器 -->
-              <template v-else-if="item.type === 'date-picker'">
-                <el-date-picker
-                  v-model="queryParams[item.prop]"
-                  v-bind="item.attrs"
-                />
-              </template>
-              <!-- Input 输入框 -->
-              <template v-else>
-                <template v-if="item.attrs?.type === 'number'">
-                  <el-input
-                    v-model.number="queryParams[item.prop]"
-                    v-bind="item.attrs"
-                    @keyup.enter="handleQuery"
-                  />
-                </template>
-                <template v-else>
-                  <el-input
-                    v-model="queryParams[item.prop]"
-                    v-bind="item.attrs"
-                    @keyup.enter="handleQuery"
-                  />
-                </template>
-              </template>
-            </el-form-item>
-          </el-col>
-        </template>
-
-        <template v-else>
-          <el-col
-            v-bind="colSpans"
-            v-for="item in searchConfig.formItems.slice(0, showNumber)"
-            :key="item.prop"
-          >
-            <el-form-item :label="item.label" :prop="item.prop">
-              <!-- Input 输入框 -->
-              <template v-if="item.type === 'input'">
-                <template v-if="item.attrs?.type === 'number'">
-                  <el-input
-                    v-model.number="queryParams[item.prop]"
-                    v-bind="item.attrs"
-                    @keyup.enter="handleQuery"
-                  />
-                </template>
-                <template v-else>
-                  <el-input
-                    v-model="queryParams[item.prop]"
-                    v-bind="item.attrs"
-                    @keyup.enter="handleQuery"
-                  />
-                </template>
-              </template>
-              <!-- Select 选择器 -->
-              <template v-else-if="item.type === 'select'">
-                <el-select v-model="queryParams[item.prop]" v-bind="item.attrs">
-                  <template v-for="option in item.options" :key="option.value">
-                    <el-option :label="option.label" :value="option.value" />
-                  </template>
-                </el-select>
-              </template>
-              <!-- TreeSelect 树形选择 -->
-              <template v-else-if="item.type === 'tree-select'">
-                <el-tree-select
-                  v-model="queryParams[item.prop]"
-                  v-bind="item.attrs"
-                />
-              </template>
-              <!-- DatePicker 日期选择器 -->
-              <template v-else-if="item.type === 'date-picker'">
-                <el-date-picker
-                  v-model="queryParams[item.prop]"
-                  v-bind="item.attrs"
-                />
-              </template>
-              <!-- Input 输入框 -->
-              <template v-else>
-                <template v-if="item.attrs?.type === 'number'">
-                  <el-input
-                    v-model.number="queryParams[item.prop]"
-                    v-bind="item.attrs"
-                    @keyup.enter="handleQuery"
-                  />
-                </template>
-                <template v-else>
-                  <el-input
-                    v-model="queryParams[item.prop]"
-                    v-bind="item.attrs"
-                    @keyup.enter="handleQuery"
-                  />
-                </template>
-              </template>
-            </el-form-item>
-          </el-col>
-        </template>
-
-        <div class="flex flex-auto items-start justify-end pr-5">
-          <el-form-item>
-            <el-button type="primary" icon="search" @click="handleQuery">
-              搜索
-            </el-button>
-            <el-button icon="refresh" @click="handleReset">重置</el-button>
-
-            <el-link
-              v-if="isExpandable && searchConfig.formItems.length > showNumber"
-              @click="isExpand = !isExpand"
-              class="ml-2"
-              type="primary"
-              :underline="false"
-            >
-              {{ isExpand ? "收起" : "展开" }}
-              <i-ep-arrow-up v-if="isExpand" />
-              <i-ep-arrow-down v-else />
-            </el-link>
-          </el-form-item>
-        </div>
-      </el-row>
+            </el-select>
+          </template>
+          <!-- TreeSelect 树形选择 -->
+          <template v-else-if="item.type === 'tree-select'">
+            <el-tree-select
+              v-model="queryParams[item.prop]"
+              v-bind="item.attrs"
+            />
+          </template>
+          <!-- DatePicker 日期选择器 -->
+          <template v-else-if="item.type === 'date-picker'">
+            <el-date-picker
+              v-model="queryParams[item.prop]"
+              v-bind="item.attrs"
+            />
+          </template>
+        </el-form-item>
+      </template>
+      <el-form-item>
+        <el-button type="primary" icon="search" @click="handleQuery">
+          搜索
+        </el-button>
+        <el-button icon="refresh" @click="handleReset">重置</el-button>
+        <!-- 展开/收起 -->
+        <el-link
+          v-if="isExpandable && searchConfig.formItems.length > showNumber"
+          class="ml-2"
+          type="primary"
+          :underline="false"
+          @click="isExpand = !isExpand"
+        >
+          <template v-if="isExpand"> 收起<i-ep-arrow-up /> </template>
+          <template v-else> 展开<i-ep-arrow-down /> </template>
+        </el-link>
+      </el-form-item>
     </el-form>
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref, reactive } from "vue";
-import type { ElForm } from "element-plus";
+import type { FormInstance } from "element-plus";
+import { reactive, ref } from "vue";
 
 // 对象类型
 type IObject = Record<string, any>;
@@ -197,29 +97,6 @@ interface IProps {
   searchConfig: ISearchConfig;
 }
 const props = defineProps<IProps>();
-
-// 是否可展开/收缩
-const isExpandable = ref(props.searchConfig.isExpandable);
-// 是否展开
-const isExpand = ref(false);
-
-// 表单项展示数量，若可展开，超出展示数量的表单项隐藏
-const showNumber = computed(() => {
-  if (isExpandable.value === true) {
-    return props.searchConfig.showNumber ?? 3;
-  } else {
-    return props.searchConfig.formItems.length;
-  }
-});
-// 表单项栅格列数配置
-const colSpans = {
-  xs: 24,
-  sm: 12,
-  md: 8,
-  lg: 6,
-  xl: 4,
-};
-
 // 自定义事件
 const emit = defineEmits<{
   queryClick: [queryParams: IObject];
@@ -228,7 +105,20 @@ const emit = defineEmits<{
 // 暴露的属性和方法
 defineExpose({ getQueryParams });
 
-const queryFormRef = ref<InstanceType<typeof ElForm>>();
+// 是否可展开/收缩
+const isExpandable = ref(props.searchConfig.isExpandable ?? true);
+// 是否已展开
+const isExpand = ref(false);
+// 表单项展示数量，若可展开，超出展示数量的表单项隐藏
+const showNumber = computed(() => {
+  if (isExpandable.value === true) {
+    return props.searchConfig.showNumber ?? 3;
+  } else {
+    return props.searchConfig.formItems.length;
+  }
+});
+
+const queryFormRef = ref<FormInstance>();
 // 搜索表单数据
 const queryParams = reactive<IObject>({});
 for (const item of props.searchConfig.formItems) {

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

@@ -11,7 +11,7 @@ const searchConfig: ISearchConfig = {
         placeholder: "用户名/昵称/手机号",
         clearable: true,
         style: {
-          width: "80%",
+          width: "200px",
         },
       },
     },
@@ -42,7 +42,7 @@ const searchConfig: ISearchConfig = {
         "render-after-expand": false,
         clearable: true,
         style: {
-          width: "80%",
+          width: "150px",
         },
       },
     },
@@ -54,7 +54,7 @@ const searchConfig: ISearchConfig = {
         placeholder: "全部",
         clearable: true,
         style: {
-          width: "60%",
+          width: "100px",
         },
       },
       options: [
@@ -73,12 +73,11 @@ const searchConfig: ISearchConfig = {
         "end-placeholder": "截止时间",
         "value-format": "YYYY-MM-DD",
         style: {
-          width: "60%",
+          width: "240px",
         },
       },
     },
   ],
-  isExpandable: true,
 };
 
 export default searchConfig;