refactor:优化 debounce 的使用，无必要不使用全局 debounce

jinluo123 · Jun 19, 2024 · 6fd7097 · 6fd7097
1 parent 18956a3
commit 6fd7097
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 12 deletions.
diff --git a/web/src/components/table/header/index.vue b/web/src/components/table/header/index.vue
@@ -74,7 +74,7 @@
                 v-if="props.buttons.includes('quickSearch')"
                 v-model="baTable.table.filter!.quickSearch"
                 class="xs-hidden quick-search"
-                @input="debounce(onSearchInput, 500)()"
+                @input="onSearchInput"
                 :placeholder="quickSearchPlaceholder ? quickSearchPlaceholder : t('Search')"
                 clearable
             />
@@ -126,11 +126,11 @@
 </template>
 
 <script setup lang="ts">
+import { debounce } from 'lodash-es'
 import { computed, inject } from 'vue'
-import { debounce } from '/@/utils/common'
-import type baTableClass from '/@/utils/baTable'
-import ComSearch from '/@/components/table/comSearch/index.vue'
 import { useI18n } from 'vue-i18n'
+import ComSearch from '/@/components/table/comSearch/index.vue'
+import type baTableClass from '/@/utils/baTable'
 
 const { t } = useI18n()
 const baTable = inject('baTable') as baTableClass
@@ -160,9 +160,9 @@ const onAction = (event: string, data: anyObj = {}) => {
     baTable.onTableHeaderAction(event, data)
 }
 
-const onSearchInput = () => {
+const onSearchInput = debounce(() => {
     baTable.onTableHeaderAction('quick-search', { keyword: baTable.table.filter!.quickSearch })
-}
+}, 500)
 
 const onChangeShowColumn = (value: string | number | boolean, field: string) => {
     baTable.onTableHeaderAction('change-show-column', { field: field, value: value })

diff --git a/web/src/views/backend/module/components/tableHeader.vue b/web/src/views/backend/module/components/tableHeader.vue
@@ -42,7 +42,7 @@
                 <el-input
                     v-model="state.table.params.quickSearch"
                     class="xs-hidden"
-                    @input="debounce(onSearchInput, 500)()"
+                    @input="onSearchInput"
                     :placeholder="t('module.Search is actually very simple')"
                 />
             </div>
@@ -51,10 +51,10 @@
 </template>
 
 <script setup lang="ts">
-import { state } from '../store'
-import { loadData, onRefreshTableData } from '../index'
+import { debounce } from 'lodash-es'
 import { useI18n } from 'vue-i18n'
-import { debounce } from '/@/utils/common'
+import { loadData, onRefreshTableData } from '../index'
+import { state } from '../store'
 import { getUserInfo } from '/@/api/backend/module'
 import { useBaAccount } from '/@/stores/baAccount'
 
@@ -80,10 +80,10 @@ const onShowBaAccount = () => {
         })
 }
 
-const onSearchInput = () => {
+const onSearchInput = debounce(() => {
     state.table.modulesEbak[state.table.params.activeTab] = undefined
     loadData()
-}
+}, 500)
 
 const navigateTo = (url: string) => {
     window.open(url, '_blank')