航班视图-搜索运单号

src/components/search/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="search">
     <div class="flex">
-      <el-input class="search-input" @clear="clear" clearable v-model="input" size="default" :placeholder="placeholder" :prefix-icon="Search" />
+      <el-input class="search-input" @clear="clear" clearable v-model="input" size="default" :placeholder="placeholder" :prefix-icon="Search" @keyup.enter="search" />
       <el-button color="#ac014d" class="search-button" size="default" @click="search" >搜索</el-button>
     </div>
   </div>
@@ -16,9 +16,14 @@ const props = defineProps({
     default: "请输入您要搜索的内容",
   },
 });
-const emits = defineEmits(["clear", "search"]);
+const emits = defineEmits(["clear", "search", "empty"]);
 const { placeholder } = props;
 const input = ref("");
+watch(input, val => {
+  if (!val) {
+    emits("empty");
+  }
+})
 const clear = () => {
   emits("clear");
 };

src/hooks/useTableFilterAndSort.ts

@@ -5,6 +5,7 @@ import { CommonData, CommonTableColumn, MaybeRef } from "~/common";
 export interface Options {
   defaultFilterValueMap?: { [x: string]: string[] }; // 默认筛选条件
   extraFilterValueMap?: MaybeRef<{ [x: string]: string[] }>; // 表头之外的额外筛选条件
+  fuzzyFilterValueMap?: MaybeRef<{ [x: string]: string }> // 模糊匹配筛选
   defaultSortRuleMap?: { [x: string]: string }; // 默认排序条件
   extraSortRuleMap?: MaybeRef<{ [x: string]: string }>; // 表头之外的额外排序条件
   defaultSortFunction?: (a: CommonData, b: CommonData) => number; // 默认排序函数
@@ -46,6 +47,7 @@ export function useTableFilterAndSort(
   const {
     defaultFilterValueMap = {},
     extraFilterValueMap = {},
+    fuzzyFilterValueMap = {},
     defaultSortRuleMap = {},
     extraSortRuleMap = {},
     defaultSortFunction,
@@ -74,6 +76,11 @@ export function useTableFilterAndSort(
           flag = false;
         }
       });
+      Object.entries(unref(fuzzyFilterValueMap)).forEach(([key, value]) => {
+        if (value && !String(item[key]).includes(value)) {
+          flag = false;
+        }
+      })
       return flag;
     });
     const sortRules = Object.entries(unref(mergedSortRuleMap)).reduce(

src/views/realTime/components/FlightView/index.vue

@@ -52,7 +52,11 @@
           :table-columns="waybillTableColumns"
           @checked-submit="columnChecked"
         />
-        <!-- <Search @search="search" @clear="clear" /> -->
+        <Search
+          placeholder="请输入运单号进行搜索"
+          @search="search"
+          @empty="clear"
+        />
       </div>
       <div class="waybill-list">
         <SimpleTable
@@ -62,6 +66,7 @@
           :row-class-name="flightWaybillRowClass"
           :cell-class-name="flightWaybillCellClass"
           :column-props="{ formatter: tableFormatter }"
+          :filter-sort-options="filterSortOptions"
           sequence
           @cell-click="flightWaybillCellClickHandler"
         />
@@ -76,7 +81,7 @@
 </template>
 <script setup lang="ts">
 import OverflowTooltip from '@/components/OverflowTooltip/index.vue'
-// import Search from '@/components/search/index.vue'
+import Search from '@/components/search/index.vue'
 import { CaretRight } from '@element-plus/icons-vue'
 import ContainerWaybillDialog from './ContainerWaybillDialog.vue'
 import SimpleTable from '@/components/SimpleTable/index.vue'
@@ -221,12 +226,22 @@ const exportHandler = () => {
   exportToExcel({ table })
 }
 
-//清空搜索
-const clear = () => {}
-
-//点击搜索按钮
+const fuzzyFilterValueMap = ref<{ [x: string]: string }>({})
+const filterSortOptions = {
+  fuzzyFilterValueMap,
+}
+// 搜索
 const search = (text: string) => {
-  console.log(text)
+  const value = text?.trim()
+  if (value) {
+    fuzzyFilterValueMap.value = {
+      stockCode: value,
+    }
+  }
+}
+// 清空搜索
+const clear = () => {
+  fuzzyFilterValueMap.value = {}
 }
 
 const {