工单增加搜索框可以搜索工单信息。

public/version.json

@@ -1,3 +1,3 @@
 {
-  "version": "2.2"
+  "version": "2.3"
 }

src/views/process/orders.vue

@@ -13,25 +13,38 @@
       <el-tab-pane label="未完成" name="false" />
       <el-tab-pane label="已完成" name="ok" />
     </el-tabs>
+    <div style="margin-bottom: 10px">
+      <el-input
+        v-model="searchText"
+        class="input-with-select"
+        clearable
+        placeholder="请输入物料名称或工单编号或计划编号进行查询"
+        @clear="clearSearch"
+      >
+        <template #append>
+          <el-button :icon="Search" @click="startSearch" />
+        </template>
+      </el-input>
+    </div>
     <el-scrollbar
-      class="barHeight"
       ref="wrapRef"
-      @scroll="handleScroll"
       v-loading="map.get('getProcessOrders')"
+      class="barHeight"
+      @scroll="handleScroll"
     >
       <!-- <el-scrollbar class="barHeight" ref="wrapRef" @scroll="handleScroll"> -->
 
       <Order
         v-for="(item, index) in ordersDataArray"
         :key="index"
-        @click="setSlectIndex(index)"
         :hoverStatus="index == selectIndex ? true : false"
         :item="item"
+        @click="setSlectIndex(index)"
       />
 
       <div
-        class="describeText notice"
         v-if="ordersQuery.pageNo == ordersQuery.totalPages"
+        class="describeText notice"
       >
         已经到底啦~
       </div>
@@ -41,11 +54,15 @@
 </template>
 <script lang="ts" setup>
 import Order from "@/views/process/components/order.vue";
-import { useProcessStore } from "@/store";
-import { useDictionaryStore } from "@/store";
+import {
+  useCommonStoreHook,
+  useDictionaryStore,
+  useProcessStore,
+} from "@/store";
 import { getOrders } from "@/api/process";
 import { emitter, EventsNames } from "@/utils/common";
-import { useCommonStoreHook } from "@/store";
+import { Search } from "@element-plus/icons-vue";
+
 const dictS = useDictionaryStore();
 const store = useProcessStore();
 const selectSeqIndex = inject("selectSeqIndex");
@@ -62,13 +79,18 @@ const ordersQuery = ref({
   pageSize: 5,
   queryComplete: 0,
   totalPages: 1,
+  keyword: "",
 });
 const wrapRef = ref(null);
 //获取未完成订单Data
 const getOrdersData = async () => {
   const { code, data } = await getOrders(ordersQuery.value);
   if (code == "200") {
-    ordersDataArray.value.push(...data.records);
+    if (ordersQuery.value.pageNo == 1) {
+      ordersDataArray.value = data.records;
+    } else {
+      ordersDataArray.value.push(...data.records);
+    }
     ordersSum.value = data.totalCount;
     ordersQuery.value.totalPages = data.totalPages;
   }
@@ -165,11 +187,29 @@ onMounted(() => {
     setSlectIndex(null);
   });
 });
+
+// 顶部添加搜索
+const searchText = ref("");
+
+const clearSearch = () => {
+  searchText.value = "";
+  ordersQuery.value.keyword = "";
+  ordersQuery.value.pageNo = 1;
+  getOrdersData();
+};
+const startSearch = () => {
+  if (searchText.value.trim() == "") {
+    return;
+  }
+  ordersQuery.value.keyword = searchText.value;
+  ordersQuery.value.pageNo = 1;
+  getOrdersData();
+};
 </script>
 
 <style lang="scss" scoped>
 .barHeight {
-  height: calc(100vh - 265px);
+  height: calc(100vh - 305px);
 
   .notice {
     text-align: center;
@@ -219,4 +259,8 @@ onMounted(() => {
   background: var(--el-color-primary-light-9);
   color: var(--el-color-primary);
 }
+
+.input-with-select .el-input-group__prepend {
+  background-color: var(--el-fill-color-blank);
+}
 </style>