feat(ProTable): ProTable 添加支持前置搜索框的输入框

src/components/ProTable/interface/index.ts

@@ -1,6 +1,6 @@
 import { VNode, ComponentPublicInstance, Ref } from "vue";
 import { BreakPoint, Responsive } from "@/components/Grid/interface";
-import { TableColumnCtx } from "element-plus/es/components/table/src/table-column/defaults";
+import type { TableColumnCtx } from "element-plus/es/components/table/src/table-column/defaults";
 import { ProTableProps } from "@/components/ProTable/index.vue";
 import ProTable from "@/components/ProTable/index.vue";
 
@@ -47,6 +47,8 @@ export type SearchProps = {
   offset?: number; // 搜索字段左侧偏移列数
   defaultValue?: string | number | boolean | any[] | Ref<any>; // 搜索项默认值
   render?: (scope: SearchRenderScope) => VNode; // 自定义搜索内容渲染（tsx语法）
+  prependSelect?: boolean; // 搜索项前置选择框，默认为 false
+  prependSelectOptions?: EnumProps[]; // 搜索项前置选择框数据源，默认为 []
 } & Partial<Record<BreakPoint, Responsive>>;
 
 export type FieldNamesProps = {

src/components/SearchForm/components/SearchFormItem.vue

@@ -2,10 +2,21 @@
   <component
     :is="column.search?.render ?? `el-${column.search?.el}`"
     v-bind="{ ...handleSearchProps, ...placeholder, searchParam: _searchParam, clearable }"
-    v-model.trim="_searchParam[column.search?.key ?? handleProp(column.prop!)]"
+    v-model.trim="_searchParam[itemSearchKey]"
     :data="column.search?.el === 'tree-select' ? columnEnum : []"
     :options="['cascader', 'select-v2'].includes(column.search?.el!) ? columnEnum : []"
   >
+    <template v-if="isPrependSelectInput" #prepend>
+      <el-select v-model="prependSelectType" placeholder="Select" style="width: 115px">
+        <el-option
+          v-for="(item, index) in column.search!.prependSelectOptions"
+          :key="index"
+          :label="item.label!"
+          :value="item.value!"
+        />
+      </el-select>
+    </template>
+
     <template v-if="column.search?.el === 'cascader'" #default="{ data }">
       <span>{{ data[fieldNames.label] }}</span>
     </template>
@@ -23,9 +34,9 @@
 </template>
 
 <script setup lang="ts" name="SearchFormItem">
-import { computed, inject, ref } from "vue";
+import { computed, inject, ref, watch } from "vue";
 import { handleProp } from "@/utils";
-import { ColumnProps } from "@/components/ProTable/interface";
+import { ColumnProps, EnumProps } from "@/components/ProTable/interface";
 
 interface SearchFormItem {
   column: ColumnProps;
@@ -36,6 +47,15 @@ const props = defineProps<SearchFormItem>();
 // Re receive SearchParam
 const _searchParam = computed(() => props.searchParam);
 
+const itemSearchKey = computed(() => {
+  // 如果 Input 搜索项带有前置选择框，则 _searchParam 对象加上前置搜索框选择的 option 的 value 作为 键值
+  if (isPrependSelectInput.value) {
+    return prependSelectType.value;
+  }
+
+  return props.column.search?.key ?? handleProp(props.column.prop!);
+});
+
 // 判断 fieldNames 设置 label && value && children 的 key 值
 const fieldNames = computed(() => {
   return {
@@ -93,4 +113,32 @@ const clearable = computed(() => {
   const search = props.column.search;
   return search?.props?.clearable ?? (search?.defaultValue == null || search?.defaultValue == undefined);
 });
+
+// Input 搜索项是否带有前置选择框
+const isPrependSelectInput = computed(() => props.column.search?.el === "input" && props.column.search.prependSelect);
+
+const prependSelectType = ref((props.column.search!.prependSelectOptions?.[0].value as string) ?? "");
+
+if (isPrependSelectInput.value) {
+  watch(
+    () => prependSelectType.value,
+    () => {
+      // 前置搜索框选择后，清除掉挂在 _searchParam 的残留值
+      props.column.search!.prependSelectOptions!.forEach(({ value }: EnumProps) => {
+        delete _searchParam.value[value as string];
+      });
+
+      // 同步情况输入框内容
+      _searchParam.value[itemSearchKey.value] = "";
+    }
+  );
+
+  watch(
+    () => _searchParam.value[itemSearchKey.value],
+    () => {
+      // 输入框值变化时，将下拉框和输入框的值作为 _searchParam 的键值对
+      _searchParam.value[prependSelectType.value] = _searchParam.value[itemSearchKey.value];
+    }
+  );
+}
 </script>

src/views/proTable/useProTable/index.vue

@@ -163,7 +163,24 @@ const columns = reactive<ColumnProps<User.ResUserList>[]>([
       }
     }
   },
-  { prop: "idCard", label: "身份证号", search: { el: "input" } },
+  {
+    prop: "idCard",
+    label: "综合搜索",
+    search: {
+      el: "input",
+      prependSelect: true,
+      prependSelectOptions: [
+        {
+          label: "身份证号",
+          value: "idCard"
+        },
+        {
+          label: "邮箱",
+          value: "email"
+        }
+      ]
+    }
+  },
   { prop: "email", label: "邮箱" },
   { prop: "address", label: "居住地址" },
   {