修改便利性

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

@@ -4,8 +4,8 @@
   </EditTableHeaderCell>
   <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" style="cursor:pointer;">{{ 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 v-if="searchParam == paramKey"><input ref="searchInputRef" :value="paramValue" style="width: 80px;" placeholder="输入参数值" @blur="handleBlur($event)" @keyup.enter="handleBlur($event)" /></span>
     </span>
     <span v-else>{{ getTitle }}</span>
   </span>
@@ -14,7 +14,7 @@
 <script lang="ts">
   import type { PropType } from 'vue';
   import type { BasicColumn } from '../types/table';
-  import { defineComponent, computed,ref } from 'vue';
+  import { defineComponent, computed,ref,nextTick  } from 'vue';
   import BasicHelp from '/@/components/Basic/src/BasicHelp.vue';
   import EditTableHeaderCell from './EditTableHeaderIcon.vue';
   import { useDesign } from '/@/hooks/web/useDesign';
@@ -43,6 +43,7 @@
         console.log("🚀 ~ props.column:", props.column)
         return search;
       });
+      const searchInputRef = ref<HTMLInputElement | null>(null);
       let searchParam = ref<string>('');
       let paramValue = ref<string>('');
       const paramKey = computed(() => props.column?.key);
@@ -59,7 +60,7 @@
       });
       const getHelpMessage = computed(() => props.column?.helpMessage);
 
-      function handleBlur(event){
+      async function handleBlur(event){
         const value = event.target.value; // 从事件对象中获取值
         console.log("event.target", event.target);
         console.log("handleBlur", value);
@@ -67,12 +68,17 @@
         paramValue.value = "";
         emit('headerSearch', {key:paramKey.value,value:value});
       }
-      function handleClick() {
+      async function handleClick() {
         console.log("🚀 ~ item:", props.column)
         searchParam.value = (props.column?.key as string) || '';
         paramValue.value = "";
+        await nextTick();
+        // 然后聚焦输入框
+        if (searchInputRef.value) {
+          searchInputRef.value.focus();
         }
-      return { prefixCls, getIsEdit, getTitle, getHelpMessage,isShowDb,handleClick,paramKey,searchParam,paramValue,handleBlur };
+      }
+      return { prefixCls, getIsEdit, getTitle, getHelpMessage,isShowDb,handleClick,paramKey,searchParam,paramValue,handleBlur,searchInputRef  };
     },
   });
 </script>

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

@@ -21,7 +21,8 @@ export const columns: BasicColumn[] = [
   {
     title: '规格型号',
     align: "center",
-    dataIndex: 'specificationModel'
+    dataIndex: 'specificationModel',
+    search: true,
   },
   {
     title: '销售单价',