refactor: 筛选搜索

src/api/home/filter.ts

@@ -6,11 +6,14 @@ import type { FilterCondition, FilterParam, FilterSearchParam, FilterUpdate, Pag
  * @param params
  * @returns 1
  */
-export async function getConditionList(params: PageParam & FilterSearchParam): Promise<any> {
+export async function getConditionList(params: PageParam, searchParam: FilterSearchParam): Promise<any> {
   const res = await http.request({
-    url: `/ocr/ocrUsersearch/list`,
+    url: `/ocr/ocrUsersearch/list?`,
     method: 'get',
-    params,
+    params: {
+      ...params,
+      search_searchname: JSON.stringify(searchParam.search_searchname),
+    },
   })
 
   const { data: { records, pages } } = res

src/views/home/aside/comp/AdvanceFilter.vue

@@ -5,6 +5,7 @@ import { debounce } from 'lodash-es'
 import { asideMap } from '@/config/aside'
 import { favorite, getConditionList, unfavorite } from '@/api/home/filter'
 import type { Filter, FilterEntity } from '/#/home'
+import type { FilterSearchParam } from '/#/api'
 
 defineOptions({ name: 'AdvanceFilter' })
 
@@ -17,17 +18,17 @@ const emit = defineEmits<{
 
 const data = ref<FilterEntity[]>([])
 let loading = false
-let lastPostion = 0
-let canloadMore = true
+const canloadMore = true
 const el = ref<HTMLDivElement | null>(null)
 const popover = ref<ComponentRef | null>(null)
 const pagination = reactive({
   pageNo: 1,
-  pageSize: 10,
+  pageSize: 300,
 })
+const keyword = ref('')
 
 onMounted(() => {
-  data.value = generateDefaultConfig()
+  // data.value = generateDefaultConfig()
 })
 
 // 默认的过滤配置
@@ -58,30 +59,29 @@ useInfiniteScroll(
   () => {
     loadMore()
   },
-  { distance: 10, interval: 3000, canLoadMore: () => canloadMore },
+  { distance: 10, interval: 300, canLoadMore: () => false },
 )
 
 async function loadMore() {
   if (loading || el.value == null)
     return
 
-  lastPostion = el.value!.scrollTop
   const more = await featchList()
 
   if (more.length === 0)
     return
 
   data.value.push(...more)
-  el.value?.scrollTo(0, lastPostion)
 }
 
 async function featchList() {
   loading = true
   try {
-    const result = await getConditionList({ ...pagination })
-    const { data, pageCount } = result
-    pagination.pageNo += 1
-    canloadMore = pageCount >= pagination.pageNo
+    const searchParam: FilterSearchParam = { search_searchname: { value: keyword.value, op: 'like', type: 'string' } }
+    const result = await getConditionList(pagination, searchParam)
+    const { data } = result
+    // pagination.pageNo += 1
+    // canloadMore = pageCount >= pagination.pageNo
     const entityList = generateFilterEntityList(data)
     return entityList
   }
@@ -124,8 +124,11 @@ function selectHandler(item: FilterEntity) {
   emit('select', item.filterList)
 }
 
-const inputHandler = debounce((keyword) => {
-  // 调用后端接口，搜索
+const inputHandler = debounce((word) => {
+  keyword.value = word
+  featchList().then((list) => {
+    data.value = list
+  })
 }, 300)
 
 function favoriteHandler(event: MouseEvent, item: any) {

src/views/home/aside/comp/Search.vue

@@ -15,19 +15,10 @@ const emit = defineEmits<{
 const data = ref<SearchEntity[]>([])
 const popover = ref<ComponentRef | null>(null)
 const configStore = useConfig()
-let cacheData = []
+const searchKeyword = ref('')
 
 const inputHandler = debounce((keyword) => {
-  if (keyword === '') {
-    data.value = cacheData
-    return
-  }
-
-  const result = data.value.filter((item) => {
-    return item.label.includes(keyword)
-  })
-
-  data.value = result
+  searchKeyword.value = keyword
 }, 300)
 
 configStore.$subscribe(() => {
@@ -48,7 +39,6 @@ configStore.$subscribe(() => {
   })
 
   data.value = list
-  cacheData = list
 })
 
 function selectHandler(item: SearchEntity) {
@@ -72,7 +62,7 @@ function selectHandler(item: SearchEntity) {
       </template>
       <div class="wrapper-popover">
         <ul class="wrapper-list">
-          <li v-for="(item, index) in data" :key="index" @click="selectHandler(item)">
+          <li v-for="(item, index) in data" v-show="item.label.includes(searchKeyword)" :key="index" @click="selectHandler(item)">
             {{ item.label }}
           </li>
         </ul>

src/views/home/aside/comp/modals/CustomFilterModal.vue

@@ -8,7 +8,7 @@ import { useConfig } from '@/store/modules/asideConfig'
 
 defineOptions({ name: 'CustomFilterModal' })
 
-const show = ref(true)
+const show = ref(false)
 const configStore = useConfig()
 const checkAll = ref(false)
 const selectIds = ref<string[]>([])
@@ -273,7 +273,7 @@ const rightInputHandler = debounce((keyword) => {
                       <n-checkbox v-model:checked="checkAll" label="全部" @update:checked="onCheckAllChange" />
                     </div>
                     <div
-                      v-for="item in offList" v-show="item.name.includes(offKeyword) || offKeyword === ''" :key="item.id" :class="{ 'disable-check': item.fix }"
+                      v-for="item in offList" v-show="item.name.includes(offKeyword)" :key="item.id" :class="{ 'disable-check': item.fix }"
                       class="draggable-li"
                     >
                       <n-checkbox
@@ -306,7 +306,7 @@ const rightInputHandler = debounce((keyword) => {
                 <n-scrollbar style="max-height: 500px;border: 1px solid #cad2dd;border-radius: 2px;" class="scroll">
                   <VueDraggable v-model="onList" class="draggable-ul" :animation="150" group="shared">
                     <div
-                      v-for="item in onList" v-show="item.name.includes(onKeyword) || onKeyword === ''" :key="item.id" :class="{ fix: item.fix }"
+                      v-for="item in onList" v-show="item.name.includes(onKeyword)" :key="item.id" :class="{ fix: item.fix }"
                       class="cursor-move draggable-li"
                     >
                       <SvgIcon name="drag" size="24" />

src/views/home/aside/comp/modals/FilterModal.vue

@@ -4,8 +4,10 @@ import { NDataTable } from 'naive-ui'
 import type { DataTableColumns, DataTableRowKey } from 'naive-ui'
 import type { SortableEvent } from 'sortablejs'
 import Sortable from 'sortablejs'
+import { debounce } from 'lodash-es'
 import Action from '../Action.vue'
 import { deleteCondition, getConditionList, sort } from '@/api/home/filter'
+import type { FilterSearchParam } from '/#/api'
 
 defineOptions({ name: 'FilterModal' })
 
@@ -79,12 +81,14 @@ const loading = ref(true)
 const pagination = reactive({
   page: 1,
   pageCount: 1,
-  pageSize: 10,
+  pageSize: 2,
 })
 const tableData = ref<Array<RowData>>([])
+const keyword = ref('')
 
 async function query(page: number, pageSize: number) {
-  const result = await getConditionList({ pageNo: page, pageSize })
+  const searchParam: FilterSearchParam = { search_searchname: { value: keyword.value, op: 'like', type: 'string' } }
+  const result = await getConditionList({ pageNo: page, pageSize }, searchParam)
   const { data, pageCount } = result
   tableData.value = data
   pagination.page = page
@@ -232,6 +236,11 @@ function closeModal() {
 defineExpose({
   showModal,
 })
+
+const inputHandler = debounce((word) => {
+  keyword.value = word
+  query(1, 10)
+}, 300)
 </script>
 
 <template>
@@ -249,7 +258,7 @@ defineExpose({
             </div>
           </div>
           <div class="wrapper-form">
-            <n-input :style="{ width: '360px', border: '1px solid #cad2dd' }" placeholder="请输入过滤条件名称搜索">
+            <n-input :style="{ width: '360px', border: '1px solid #cad2dd' }" placeholder="请输入过滤条件名称搜索" @input="inputHandler">
               <template #suffix>
                 <SvgIcon size="14px" name="magnifying-1" />
               </template>

types/api.d.ts

@@ -12,6 +12,7 @@ export interface FilterSearchParam {
   search_searchname?: {
     value: string
     op: 'equal' | 'like'
+    type: 'string'
   }
 }