perf: 🚀PageSearch组件优化，扩展表单控件，支持事件监听

src/components/CURD/PageSearch.vue

@@ -3,7 +3,7 @@
     v-show="visible"
     v-hasPerm="[`${searchConfig.pageName}:query`]"
     shadow="never"
-    class="mb-[10px]"
+    class="mb-2.5"
   >
     <el-form ref="queryFormRef" :model="queryParams" :inline="true">
       <template v-for="(item, index) in formItems" :key="item.prop">
@@ -14,101 +14,46 @@
         >
           <!-- Label -->
           <template v-if="item.tips" #label>
-            <span>
+            <span class="flex-y-center">
               {{ item.label }}
-              <el-tooltip
+              <el-tooltip v-bind="getTooltipProps(item.tips)">
-                placement="bottom"
+                <QuestionFilled class="w-4 h-4 mx-1" />
-                effect="light"
-                :content="item.tips"
-                :raw-content="true"
-              >
-                <el-icon style="vertical-align: -0.15em" size="16">
-                  <QuestionFilled />
-                </el-icon>
               </el-tooltip>
+              {{ searchConfig.colon === false ? "" : ":" }}
             </span>
           </template>
-          <!-- Input 输入框 -->
+          <template v-else #label>
-          <template v-if="item.type === 'input' || item.type === undefined">
+            {{ item.label }} {{ searchConfig.colon === false ? "" : ":" }}
-            <el-input
+          </template>
-              v-model="queryParams[item.prop]"
+
+          <component
+            :is="componentMap[item?.type ? item?.type : 'input']"
+            v-model.trim="queryParams[item.prop]"
             v-bind="item.attrs"
-              @keyup.enter="handleQuery"
+            :config="item.attrs"
-            />
+            v-on="item.events || {}"
-          </template>
-          <!-- InputTag 标签输入框 -->
-          <template v-if="item.type === 'input-tag'">
-            <div class="flex-center">
-              <el-tag
-                v-for="tag in inputTagMap[item.prop].data"
-                :key="tag"
-                class="mr-2"
-                :closable="true"
-                v-bind="inputTagMap[item.prop].tagAttrs"
-                @close="handleCloseTag(item.prop, tag)"
           >
-                {{ tag }}
+            <template v-if="item.type === 'select'">
-              </el-tag>
+              <template v-for="opt in item.options">
-              <template v-if="inputTagMap[item.prop].inputVisible">
+                <el-option :label="opt.label" :value="opt.value" />
-                <el-input
-                  :ref="(el: HTMLElement) => (inputTagMap[item.prop].inputRef = el)"
-                  v-model="inputTagMap[item.prop].inputValue"
-                  v-bind="inputTagMap[item.prop].inputAttrs"
-                  @keyup.enter="handleInputConfirm(item.prop)"
-                  @blur="handleInputConfirm(item.prop)"
-                />
               </template>
-              <template v-else>
-                <el-button
-                  v-bind="inputTagMap[item.prop].buttonAttrs"
-                  @click="handleShowInput(item.prop)"
-                >
-                  {{ inputTagMap[item.prop].buttonAttrs.btnText }}
-                </el-button>
-              </template>
-            </div>
-          </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>
+          </component>
         </el-form-item>
       </template>
       <el-form-item>
-        <el-button type="primary" icon="search" @click="handleQuery">搜索</el-button>
+        <el-button icon="search" type="primary" @click="handleQuery">搜索</el-button>
         <el-button icon="refresh" @click="handleReset">重置</el-button>
         <!-- 展开/收起 -->
         <el-link
           v-if="isExpandable && formItems.length > showNumber"
-          class="ml-2"
+          class="ml-3"
           type="primary"
           :underline="false"
           @click="isExpand = !isExpand"
         >
-          <template v-if="isExpand">
+          {{ isExpand ? "收起" : "展开" }}
-            收起
+          <component :is="isExpand ? ArrowUp : ArrowDown" class="w-4 h-4 ml-2" />
-            <el-icon>
-              <ArrowUp />
-            </el-icon>
-          </template>
-          <template v-else>
-            展开
-            <el-icon>
-              <ArrowDown />
-            </el-icon>
-          </template>
         </el-link>
       </el-form-item>
     </el-form>
@@ -116,19 +61,33 @@
 </template>
 
 <script setup lang="ts">
-import type { FormInstance } from "element-plus";
+import type { IObject, ISearchConfig, ComponentType } from "./types";
-import { reactive, ref } from "vue";
+import { ArrowUp, ArrowDown } from "@element-plus/icons-vue";
-import type { IObject, ISearchConfig } from "./types";
+import { ElInput, ElInputNumber, ElInputTag, ElSelect, ElCascader } from "element-plus";
+import { ElTimePicker, ElTimeSelect, ElOption, ElDatePicker, ElTreeSelect } from "element-plus";
+import { type FormInstance } from "element-plus";
+import InputTag from "@/components/InputTag/index.vue";
 
 // 定义接收的属性
-const props = defineProps<{
+const props = defineProps<{ searchConfig: ISearchConfig }>();
-  searchConfig: ISearchConfig;
-}>();
 // 自定义事件
 const emit = defineEmits<{
   queryClick: [queryParams: IObject];
   resetClick: [queryParams: IObject];
 }>();
+// 组件映射表
+const componentMap: Record<ComponentType, Component> = {
+  input: markRaw(ElInput),
+  select: markRaw(ElSelect),
+  cascader: markRaw(ElCascader),
+  "input-number": markRaw(ElInputNumber),
+  "date-picker": markRaw(ElDatePicker),
+  "time-picker": markRaw(ElTimePicker),
+  "time-select": markRaw(ElTimeSelect),
+  "tree-select": markRaw(ElTreeSelect),
+  "input-tag": markRaw(ElInputTag),
+  "custom-tag": markRaw(InputTag),
+};
 
 const queryFormRef = ref<FormInstance>();
 // 是否显示
@@ -140,100 +99,57 @@ const isExpandable = ref(props.searchConfig.isExpandable ?? true);
 // 是否已展开
 const isExpand = ref(false);
 // 表单项展示数量，若可展开，超出展示数量的表单项隐藏
-const showNumber = computed(() => {
+const showNumber = computed(() =>
-  if (isExpandable.value === true) {
+  isExpandable.value ? (props.searchConfig.showNumber ?? 3) : formItems.length
-    return props.searchConfig.showNumber ?? 3;
+);
-  } else {
-    return formItems.length;
-  }
-});
 // 搜索表单数据
 const queryParams = reactive<IObject>({});
-const inputTagMap = reactive<IObject>({});
+// 获取tooltip的属性
-for (const item of formItems) {
+const getTooltipProps = (tips: any) => {
+  return typeof tips === "string" ? { content: tips } : tips;
+};
+
+onMounted(() => {
+  formItems.map((item) => {
     item.initFn && item.initFn(item);
-  if (item.type === "input-tag") {
+    if (item.type === "input-tag" || item.type === "custom-tag") {
-    inputTagMap[item.prop] = {
+      queryParams[item.prop] = item.initialValue ?? [];
-      data: Array.isArray(item.initialValue) ? item.initialValue : [],
+    } else if (item.type === "input-number") {
-      inputVisible: false,
+      queryParams[item.prop] = item.initialValue ?? null;
-      inputValue: "",
-      inputRef: null,
-      buttonAttrs: {
-        size: item.attrs?.size ?? "default",
-        btnText: item.attrs?.btnText ?? "+ New Tag",
-        style: "color: #b0b2b7",
-      },
-      inputAttrs: {
-        size: item.attrs?.size ?? "default",
-        clearable: item.attrs?.clearable ?? false,
-        style: "width: 150px",
-      },
-      tagAttrs: {
-        size: item.attrs?.size ?? "default",
-      },
-    };
-    queryParams[item.prop] = computed({
-      get() {
-        return typeof item.attrs?.join === "string"
-          ? inputTagMap[item.prop].data.join(item.attrs.join)
-          : inputTagMap[item.prop].data;
-      },
-      set(value) {
-        // resetFields时会被调用
-        inputTagMap[item.prop].data =
-          typeof item.attrs?.join === "string"
-            ? value.split(item.attrs.join).filter((item: any) => item !== "")
-            : value;
-      },
-    });
     } else {
       queryParams[item.prop] = item.initialValue ?? "";
     }
-}
+  });
+});
 
-// 重置操作
+// 查询/重置操作
-function handleReset() {
+const handleQuery = () => emit("queryClick", queryParams);
+const handleReset = () => {
   queryFormRef.value?.resetFields();
   emit("resetClick", queryParams);
-}
+};
-
-// 查询操作
-function handleQuery() {
-  emit("queryClick", queryParams);
-}
-
-// 获取分页数据
-function getQueryParams() {
-  return queryParams;
-}
-
-// 显示/隐藏 SearchForm
-function toggleVisible() {
-  visible.value = !visible.value;
-}
-
-// 关闭标签
-function handleCloseTag(prop: string, tag: string) {
-  inputTagMap[prop].data.splice(inputTagMap[prop].data.indexOf(tag), 1);
-}
-// 添加标签
-function handleInputConfirm(prop: string) {
-  if (inputTagMap[prop].inputValue) {
-    inputTagMap[prop].data.push(inputTagMap[prop].inputValue);
-  }
-  inputTagMap[prop].inputVisible = false;
-  inputTagMap[prop].inputValue = "";
-}
-// 显示标签输入框
-function handleShowInput(prop: string) {
-  inputTagMap[prop].inputVisible = true;
-  nextTick(() => {
-    inputTagMap[prop].inputRef.focus();
-  });
-}
 
 // 暴露的属性和方法
-defineExpose({ getQueryParams, toggleVisible });
+defineExpose({
+  // 获取分页数据
+  getQueryParams: () => queryParams,
+  // 显示/隐藏 SearchForm
+  toggleVisible: () => (visible.value = !visible.value),
+});
 </script>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+:deep(.el-input-number .el-input__inner) {
+  text-align: left;
+}
+.el-form {
+  display: flex;
+  flex-wrap: wrap;
+  row-gap: 1rem;
+  column-gap: 2rem;
+}
+.el-form-item {
+  margin-right: 0;
+  margin-bottom: 0;
+}
+</style>

src/components/CURD/types.ts

@@ -26,17 +26,31 @@ export interface IOperatData {
   $index: number;
 }
 
+export type ComponentType =
+  | "input"
+  | "select"
+  | "input-number"
+  | "date-picker"
+  | "time-picker"
+  | "time-select"
+  | "tree-select"
+  | "input-tag"
+  | "custom-tag"
+  | "cascader";
+
 export interface ISearchConfig {
   // 页面名称(参与组成权限标识,如sys:user:xxx)
   pageName: string;
+  // 标签冒号
+  colon?: boolean;
   // 表单项
   formItems: Array<{
     // 组件类型(如input,select等)
-    type?: "input" | "select" | "tree-select" | "date-picker" | "input-tag";
+    type?: ComponentType;
     // 标签文本
     label: string;
     // 标签提示
-    tips?: string;
+    tips?: string | IObject;
     // 键名
     prop: string;
     // 组件属性(input-tag组件支持join,btnText,size属性)
@@ -44,7 +58,9 @@ export interface ISearchConfig {
     // 初始值
     initialValue?: any;
     // 可选项(适用于select组件)
-    options?: { label: string; value: any }[];
+    options?: Array<{ label: string; value: any }>;
+    // 组件事件
+    events?: Record<string, (...args: any[]) => void>;
     // 初始化数据函数扩展
     initFn?: (formItem: IObject) => void;
   }>;

src/components/InputTag/index.vue

@@ -0,0 +1,70 @@
+<template>
+  <div class="flex-y-center gap-2">
+    <el-tag
+      v-for="tag in tags"
+      :key="tag"
+      closable
+      :disable-transitions="false"
+      v-bind="config.tagAttrs"
+      @close="handleClose(tag)"
+    >
+      {{ tag }}
+    </el-tag>
+    <el-input
+      v-if="inputVisible"
+      ref="inputRef"
+      v-model.trim="inputValue"
+      @keyup.enter.stop.prevent="handleInputConfirm"
+      @blur.stop.prevent="handleInputConfirm"
+    />
+    <el-button v-else v-bind="config.buttonAttrs" @click="showInput">
+      {{ config.buttonAttrs.btnText ? config.buttonAttrs.btnText : "+ New Tag" }}
+    </el-button>
+  </div>
+</template>
+<script setup lang="ts">
+import type { InputInstance } from "element-plus";
+
+const inputValue = ref("");
+const inputVisible = ref(false);
+const inputRef = ref<InputInstance>();
+
+// 定义 model，用于与父组件的 v-model绑定
+const tags = defineModel<string[]>();
+
+defineProps({
+  config: {
+    type: Object as () => {
+      buttonAttrs: Record<string, any>;
+      inputAttrs: Record<string, any>;
+      tagAttrs: Record<string, any>;
+    },
+    default: () => ({
+      buttonAttrs: {},
+      inputAttrs: {},
+      tagAttrs: {},
+    }),
+  },
+});
+
+const handleClose = (tag: string) => {
+  if (tags.value) {
+    const newTags = tags.value.filter((t) => t !== tag);
+    tags.value = [...newTags];
+  }
+};
+
+const showInput = () => {
+  inputVisible.value = true;
+  nextTick(() => inputRef.value?.focus());
+};
+
+const handleInputConfirm = () => {
+  if (inputValue.value) {
+    const newTags = [...(tags.value || []), inputValue.value];
+    tags.value = newTags;
+  }
+  inputVisible.value = false;
+  inputValue.value = "";
+};
+</script>

src/main.ts

@@ -1,4 +1,6 @@
 import { createApp } from "vue";
+// TODO::不引入el-input-tag样式会丢失
+import "element-plus/es/components/input-tag/style/css";
 import App from "./App.vue";
 import setupPlugins from "@/plugins";
 

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

@@ -3,17 +3,22 @@ import type { ISearchConfig } from "@/components/CURD/types";
 
 const searchConfig: ISearchConfig = {
   pageName: "sys:user",
+  colon: false,
   formItems: [
     {
+      tips: "支持模糊搜索",
       type: "input",
       label: "关键字",
       prop: "keywords",
       attrs: {
         placeholder: "用户名/昵称/手机号",
         clearable: true,
-        style: {
+        style: { width: "200px" },
-          width: "200px",
       },
+      events: {
+        // 监听输入框输入事件
+        blur: (e) => console.log("失去焦点: ", e),
+        focus: (e) => console.log("获得焦点: ", e),
       },
     },
     {
@@ -27,9 +32,7 @@ const searchConfig: ISearchConfig = {
         "check-strictly": true,
         "render-after-expand": false,
         clearable: true,
-        style: {
+        style: { width: "200px" },
-          width: "150px",
-        },
       },
       async initFn(formItem) {
         formItem.attrs.data = await DeptAPI.getOptions();
@@ -38,20 +41,22 @@ const searchConfig: ISearchConfig = {
       },
     },
     {
+      tips: { effect: "light", placement: "top", content: "自定义文字提示" },
       type: "select",
       label: "状态",
       prop: "status",
       attrs: {
         placeholder: "全部",
         clearable: true,
-        style: {
+        style: { width: "200px" },
-          width: "100px",
-        },
       },
       options: [
         { label: "启用", value: 1 },
         { label: "禁用", value: 0 },
       ],
+      events: {
+        change: (e) => console.log("发生变化: ", e),
+      },
     },
     {
       type: "date-picker",
@@ -63,10 +68,63 @@ const searchConfig: ISearchConfig = {
         "start-placeholder": "开始时间",
         "end-placeholder": "截止时间",
         "value-format": "YYYY-MM-DD",
-        style: {
+        style: { width: "200px" },
-          width: "240px",
       },
     },
+    {
+      type: "date-picker",
+      label: "日期选择器",
+      prop: "testDataPicker",
+      attrs: {
+        type: "date",
+        placeholder: "选择日期",
+        style: { width: "200px" },
+      },
+    },
+    {
+      type: "input-number",
+      label: "数字输入框",
+      prop: "testInputNumber",
+      attrs: {
+        controls: false,
+        placeholder: "请输入数字",
+        style: { width: "200px" },
+      },
+    },
+    {
+      type: "input-tag",
+      label: "标签选择器",
+      prop: "testInputTags",
+      attrs: {
+        clearable: true,
+        placeholder: "请输入",
+      },
+    },
+    {
+      type: "custom-tag",
+      label: "标签选择器",
+      prop: "testCustomTags",
+      attrs: {
+        buttonAttrs: { btnText: "+ New Tag" },
+        inputAttrs: {},
+        tagAttrs: {},
+      },
+    },
+    {
+      type: "time-picker",
+      label: "时间选择器",
+      prop: "testTimePicker",
+      attrs: {
+        style: { width: "200px" },
+      },
+    },
+    {
+      type: "time-select",
+      label: "时间选择",
+      prop: "testTimeSelect",
+      attrs: {
+        style: { width: "200px" },
+      },
     },
   ],
 };