Procházet zdrojové kódy

查询框增加@input,增加防抖

wangzhengguang před 3 měsíci
rodič
revize
f021cf5793

+ 6 - 1
src/components/PositionSelector.vue

@@ -35,7 +35,7 @@
 import { showFailToast, showToast } from 'vant';
 import { ajaxApiGet } from '../common/utils';
 import { processException } from '../common/Common.js';
-import { ref, watch, computed, onMounted, defineProps, defineEmits, defineExpose } from 'vue';
+import {ref, watch, computed, onMounted, defineProps, defineEmits, defineExpose, onUnmounted} from 'vue';
 import { useRoute } from 'vue-router';
 
 const props = defineProps({
@@ -282,6 +282,11 @@ onMounted(() => {
   }
 });
 
+// 在组件卸载时清除定时器(避免内存泄漏)
+onUnmounted(() => {
+  clearTimeout(timer);
+});
+
 defineExpose({
   clearSelected,
 });

+ 15 - 2
src/components/StockIn.vue

@@ -3,7 +3,7 @@
     :title="title" left-arrow left-text="返回" right-text="扫描" fixed placeholder @click-left="goBack()"
     @click-right="goTakePhoto"
   />
-  <van-search v-model="stockInSearch" placeholder="请输入搜索关键词" @search="searchStockIn" />
+  <van-search v-model="stockInSearch" placeholder="请输入搜索关键词" @search="searchStockIn" @input="searchStockIn" />
   <div class="content">
     <div class="van-list-stock-in">
       <van-list
@@ -141,8 +141,21 @@ const goBack = () => {
   router.push('/warehouse-selector?page=stock-in&warehouseId=' + warehouseId.value);
 };
 
+let timer = null;
+
 // 搜索入库物料
 const searchStockIn = value => {
+  clearTimeout(timer);
+  timer = setTimeout(() => {
+    page.value = 1;
+    total.value = 0;
+    stockInList.value = [];
+    loadStockInList();
+  },1000);
+};
+
+// 搜索入库物料 无防抖
+const searchStockInNotDebounce = value => {
   page.value = 1;
   total.value = 0;
   stockInList.value = [];
@@ -292,7 +305,7 @@ const submitStockIn = () => {
       if (success.errorCode === 0) {
         const filter = stockInSearch.value;
         clearFormData();
-        searchStockIn(filter);
+        searchStockInNotDebounce(filter);
         showSuccessToast('入库成功');
       } else {
         showFailToast(success.errorMessage);

+ 21 - 3
src/components/StockOut.vue

@@ -3,7 +3,7 @@
     :title="title" left-arrow left-text="返回" right-text="扫描" fixed placeholder @click-left="goBack()"
     @click-right="goTakePhoto"
   />
-  <van-search v-model="stockOutSearch" placeholder="请输入搜索关键词" @search="searchStockOut" />
+  <van-search v-model="stockOutSearch" placeholder="请输入搜索关键词" @search="searchStockOut" @input="searchStockOut" />
   <div class="content">
     <div>
       <van-list
@@ -76,7 +76,7 @@
 </template>
 
 <script setup>
-import { ref, onMounted } from 'vue';
+import {ref, onMounted, onUnmounted} from 'vue';
 import { useRouter, useRoute } from 'vue-router';
 import PositionSelector from './PositionSelector.vue';
 import { processException } from '../common/Common.js';
@@ -126,6 +126,11 @@ onMounted(() => {
   title.value = route.query.warehouseName ? '出库 - ' + route.query.warehouseName : '出库';
 });
 
+// 在组件卸载时清除定时器(避免内存泄漏)
+onUnmounted(() => {
+  clearTimeout(timer);
+});
+
 const isShowStockOut = ref(false);
 const isShowTransfer = ref(false);
 const isShowUsing = ref(false);
@@ -134,8 +139,21 @@ const goBack = () => {
   router.push('/warehouse-selector?page=stock-out&warehouseId=' + warehouseId.value);
 };
 
+let timer = null;
+
 // 搜索出库物料
 const searchStockOut = value => {
+  clearTimeout(timer);
+  timer = setTimeout(() =>{
+    page.value = 1;
+    total.value = 0;
+    stockOutList.value = [];
+    loadStockOutList();
+  },1000);
+};
+
+// 搜索出库物料 无防抖
+const serchStockOutNotDebounce = value => {
   page.value = 1;
   total.value = 0;
   stockOutList.value = [];
@@ -266,7 +284,7 @@ const submitStockOut = () => {
       if (success.errorCode === 0) {
         const filter = stockOutSearch.value;
         clearFormData();
-        searchStockOut(filter);
+        serchStockOutNotDebounce(filter);
         showSuccessToast('出库成功');
       } else {
         showFailToast(success.errorMessage);

+ 16 - 3
src/components/StockOutBack.vue

@@ -1,6 +1,6 @@
 <template>
   <van-nav-bar :title="title" left-arrow left-text="返回" fixed placeholder @click-left="goBack()" />
-  <van-search v-model="stockBackSearch" placeholder="请输入搜索关键词" @search="searchStockBack" />
+  <van-search v-model="stockBackSearch" placeholder="请输入搜索关键词" @search="searchStockBack" @input="searchStockBack" />
   <div class="content">
     <div>
       <van-list
@@ -54,8 +54,21 @@ const goBack = () => {
   router.push('/warehouse-selector?page=stock-out-back&warehouseId=' + warehouseId.value);
 };
 
+let timer = null;
+
 // 搜索返回物料
 const searchStockBack = value => {
+  clearTimeout(timer);
+  timer = setTimeout(() => {
+    page.value = 1;
+    total.value = 0;
+    stockBackList.value = [];
+    loadStockOutBackList();
+  },1000);
+};
+
+// 搜索返回物料 无防抖
+const searchStockBackNotDebounce = value => {
   page.value = 1;
   total.value = 0;
   stockBackList.value = [];
@@ -139,7 +152,7 @@ const submitStockBack = stockOutId => {
   ajaxApiGet(url).then(
     success => {
       if (success.errorCode === 0) {
-        searchStockBack(stockBackSearch.value);
+        searchStockBackNotDebounce(stockBackSearch.value);
         showSuccessToast('返回成功');
       } else {
         showFailToast(success.errorMessage);
@@ -192,4 +205,4 @@ onMounted(() => {
   font-weight: bold;
   font-size: 22px;
 }
-</style>
+</style>

+ 21 - 3
src/components/StockTransfer.vue

@@ -3,7 +3,7 @@
     :title="title" left-arrow left-text="返回" right-text="扫描" fixed placeholder @click-left="goBack()"
     @click-right="goTakePhoto"
   />
-  <van-search v-model="stockTransferSearch" placeholder="请输入搜索关键词" @search="searchStockTransfer" />
+  <van-search v-model="stockTransferSearch" placeholder="请输入搜索关键词" @search="searchStockTransfer" @input="searchStockTransfer" />
   <div class="content">
     <div>
       <van-list
@@ -67,7 +67,7 @@
 </template>
 
 <script setup>
-import { ref, onMounted } from 'vue';
+import {ref, onMounted, onUnmounted} from 'vue';
 import { useRouter, useRoute } from 'vue-router';
 import PositionSelector from './PositionSelector.vue';
 import { processException } from '../common/Common.js';
@@ -118,8 +118,21 @@ const goBack = () => {
   router.push('/warehouse-selector?page=stock-transfer&warehouseId=' + warehouseId.value);
 };
 
+let timer = null;
+
 // 搜索调拨物料
 const searchStockTransfer = value => {
+  clearTimeout(timer);
+  timer = setTimeout(() => {
+    page.value = 1;
+    total.value = 0;
+    transferList.value = [];
+    loadTransferList();
+  },1000);
+};
+
+// 搜索调拨物料 无防抖
+const searchStockTransferNotDebounce = value => {
   page.value = 1;
   total.value = 0;
   transferList.value = [];
@@ -245,7 +258,7 @@ const submitTransfer = () => {
       if (success.errorCode === 0) {
         const filter = stockTransferSearch.value;
         clearFormData();
-        searchStockTransfer(filter);
+        searchStockTransferNotDebounce(filter);
         showSuccessToast('调拨成功');
       } else {
         showFailToast(success.errorMessage);
@@ -318,6 +331,11 @@ onMounted(() => {
   loadTransferList();
 });
 
+// 在组件卸载时清除定时器(避免内存泄漏)
+onUnmounted(() => {
+  clearTimeout(timer);
+});
+
 </script>
 
 <style scoped>

+ 1 - 1
src/components/TransferTask.vue

@@ -103,7 +103,7 @@
 <script setup>
 import { ref, onMounted } from 'vue';
 import { useRouter } from 'vue-router';
-import { showToast,Loading } from 'vant';
+import { showToast } from 'vant';
 import { processException } from '../common/Common.js';
 import { ajaxApiGet, ajaxApiPost } from '../common/utils.js';