添加列表头点击可进行检索的功能

src/components/Table/src/BasicTable.vue

@@ -34,7 +34,7 @@
           <template #headerCell="{ column }">
             <!-- update-begin--author:sunjianlei---date:220230630---for：【QQYUN-5571】自封装选择列，解决数据行选择卡顿问题 -->
             <CustomSelectHeader v-if="isCustomSelection(column)" v-bind="selectHeaderProps"/>
-            <HeaderCell v-else :column="column" />
+            <HeaderCell v-else :column="column" @headerSearch="handleHeaderSearch" />
             <!-- update-end--author:sunjianlei---date:220230630---for：【QQYUN-5571】自封装选择列，解决数据行选择卡顿问题 -->
           </template>
           <!-- 增加对antdv3.x兼容 -->
@@ -122,6 +122,7 @@
       'change',
       'columns-change',
       'table-redo',
+      'handleHeaderSearch',
     ],
     setup(props, { attrs, emit, slots, expose }) {
       const tableElRef = ref(null);
@@ -206,6 +207,11 @@
         emit
       );
 
+      function handleHeaderSearch(item){
+        console.log("🚀 ~ handleHeaderSearch ~ item:", item)
+        emit("header-search", item)
+      }
+
       function handleTableChange(...args) {
         onTableChange.call(undefined, ...args);
         emit('change', ...args);
@@ -460,6 +466,7 @@
         getSummaryProps,
         showSummaryRef,
         // update-end--author:liaozhiyang---date:20240425---for：【pull/1201】添加antd的TableSummary功能兼容老的summary（表尾合计）
+        handleHeaderSearch
       };
     },
   });

src/components/Table/src/components/HeaderCell.vue

@@ -2,13 +2,19 @@
   <EditTableHeaderCell v-if="getIsEdit">
     {{ getTitle }}
   </EditTableHeaderCell>
-  <span v-else>{{ getTitle }}</span>
+  <span v-else>
+    <span v-if="isShowDb" @click="handleClick">
+      <span v-if="searchParam != paramKey">{{ getTitle }}<Icon icon="ant-design:search-outlined" /></span>
+      <span v-if="searchParam == paramKey"><input :value="paramValue" style="width: 80px;" placeholder="输入参数值" @blur="handleBlur($event)" @keyup.enter="handleBlur($event)" /></span>
+    </span>
+    <span v-else>{{ getTitle }}</span>
+  </span>
   <BasicHelp v-if="getHelpMessage" :text="getHelpMessage" :class="`${prefixCls}__help`" />
 </template>
 <script lang="ts">
   import type { PropType } from 'vue';
   import type { BasicColumn } from '../types/table';
-  import { defineComponent, computed } from 'vue';
+  import { defineComponent, computed,ref } from 'vue';
   import BasicHelp from '/@/components/Basic/src/BasicHelp.vue';
   import EditTableHeaderCell from './EditTableHeaderIcon.vue';
   import { useDesign } from '/@/hooks/web/useDesign';
@@ -25,9 +31,21 @@
         default: () => ({}),
       },
     },
-    setup(props) {
-      const { prefixCls } = useDesign('basic-table-header-cell');
     
+    emits: [
+      'headerSearch',
+    ],
+    setup(props,{emit}) {
+      const { prefixCls } = useDesign('basic-table-header-cell');
+      // const emit = defineEmits(['headerSearch']);
+      const isShowDb = computed(() => {
+        var search = props.column?.search?true:false;
+        console.log("🚀 ~ props.column:", props.column)
+        return search;
+      });
+      let searchParam = ref<string>('');
+      let paramValue = ref<string>('');
+      const paramKey = computed(() => props.column?.key);
       const getIsEdit = computed(() => !!props.column?.edit);
       const getTitle = computed(() => {
         // update-begin--author:liaozhiyang---date:20231218---for：【QQYUN-6366】升级到antd4.x
@@ -41,7 +59,20 @@
       });
       const getHelpMessage = computed(() => props.column?.helpMessage);
 
-      return { prefixCls, getIsEdit, getTitle, getHelpMessage };
+      function handleBlur(event){
+        const value = event.target.value; // 从事件对象中获取值
+        console.log("event.target", event.target);
+        console.log("handleBlur", value);
+        searchParam.value = "";
+        paramValue.value = "";
+        emit('headerSearch', {key:paramKey.value,value:value});
+      }
+      function handleClick() {
+        console.log("🚀 ~ item:", props.column)
+        searchParam.value = (props.column?.key as string) || '';
+        paramValue.value = "";
+      }
+      return { prefixCls, getIsEdit, getTitle, getHelpMessage,isShowDb,handleClick,paramKey,searchParam,paramValue,handleBlur };
     },
   });
 </script>

src/components/Table/src/types/table.ts

@@ -427,7 +427,8 @@ export interface BasicColumn extends ColumnProps<Recordable> {
     value: string;
     children?: unknown[] | (((props: Record<string, unknown>) => unknown[]) & (() => unknown[]) & (() => unknown[]));
   }[];
-
+  //是否搜索
+  search?: boolean;
   //
   flag?: 'INDEX' | 'DEFAULT' | 'CHECKBOX' | 'RADIO' | 'ACTION';
   // update-begin--author:liaozhiyang---date:20240724---for：【issues/6908】多语言无刷新切换时，BasicColumn和FormSchema里面的值不能正常切换

src/views/invoicing/ConfigMaterial/ConfigMaterialInfo.data.ts

@@ -8,13 +8,15 @@ export const columns: BasicColumn[] = [
   {
     title: '物料名称',
     align: "center",
-    dataIndex: 'materialName'
+    dataIndex: 'materialName',
+    search: true,
   },
   {
     title: '物料编码',
     align: "center",
     dataIndex: 'materialNo',
-    width:'100px'
+    width:'100px',
+    search: true,
   },
   {
     title: '规格型号',

src/views/invoicing/ConfigMaterial/ConfigMaterialInfoList.vue

@@ -303,7 +303,7 @@
       </div>
       <div class="container-height" style="width:calc(100% - 300px);float: left;">
         <!--引用表格-->
-        <BasicTable @register="registerTable">
+        <BasicTable @register="registerTable" @headerSearch="handleHeaderSearch">
           <!--插槽:table标题-->
           <!-- <template #tableTitle>
               <a-button type="primary" v-auth="'configMaterialInfo:config_material_info:add'"  @click="handleAdd" preIcon="ant-design:plus-outlined"> 新增</a-button>
@@ -391,6 +391,12 @@ const registerMedicationDrawer = ref();
 const qianyiDrawer = ref();
 const wlqianyiDrawer = ref();
 
+function handleHeaderSearch(item){
+  console.log("🚀 ~ handleHeaderSearch ~ 11111item:", item)
+  queryParam[item.key] = "*"+item.value+"*";
+  console.log("🚀 ~ handleHeaderSearch ~ queryParam:", queryParam)
+  reload();
+}
 /**
  * 点击菜单
  * @param index 菜单索引
@@ -704,7 +710,10 @@ function searchQuery() {
 function searchReset() {
   formRef.value.resetFields();
   selectedRowKeys.value = [];
-  queryParam.treeId = null;
+    Object.keys(queryParam).forEach(key => {
+    queryParam[key] = null; // 或者 undefined、'' 根据你的需求
+  });
+  // queryParam.treeId = null;
   //刷新数据
   reload();
 }