chore:类别列表搜索修改

src/components/base/AppList.vue

@@ -73,7 +73,7 @@ const fetchList = (isReset = false) => {
   return (
     httpRequest(requestParams)
       .then((res: any) => {
-        const { list = [], total = 0 } = callback ? callback(res.data) : res.data || {}
+        const { list = [], total = 0 } = callback ? callback(res.data, requestParams) : res.data || {}
         page.total = total
         dataList.value = list
       })

src/modules/admin/category/views/List.vue

@@ -2,7 +2,6 @@
 import Sortable from 'sortablejs'
 import type { MoveEvent, SortableEvent } from 'sortablejs'
 import AddDialog from '../component/AddDialog.vue'
-import { Operation } from '@element-plus/icons-vue'
 import { getCategoryList, delCategory, moveCategory } from '../api'
 import { ElMessage, ElMessageBox } from 'element-plus'
 import AppList from '@/components/base/AppList.vue'
@@ -98,16 +97,16 @@ const listOptions = computed(() => {
     remote: {
       httpRequest: getCategoryList,
       params: { type: 'tree', category_name: '' },
-      callback(data: ICategory[]) {
-        tableData = data
-        tableDataList = flatten(data)
-        return { list: data }
+      callback(data: ICategory[], params: any) {
+        const list = rebuildData(params.category_name, data)
+        tableData = list
+        tableDataList = flatten(list)
+        return { list }
       }
     },
-    filters: [{ type: 'input', prop: 'name', label: '类别名称:' }],
+    filters: [{ type: 'input', prop: 'category_name', label: '类别名称:' }],
     columns: [
-      { align: 'center', slots: 'table-drag' },
-      { label: '类别名称', prop: 'category_name', align: 'center' },
+      { label: '类别名称', prop: 'category_name', align: 'left' },
       { label: '层级', prop: 'depth', align: 'center' },
       { label: '状态', prop: 'status_name', align: 'center' },
       { label: '操作', slots: 'table-operate', width: 230, align: 'center' }
@@ -148,7 +147,11 @@ function useSortable() {
       if (oldIndex === undefined || newIndex === undefined || oldIndex === newIndex) return
       const draggedRow = tableDataList[oldIndex]
       const relatedRow = tableDataList[newIndex]
-      moveCategory({ id: draggedRow.id, brother_id: relatedRow.id, type: newIndex > oldIndex ? 'after' : 'before' }).then(() => {
+      moveCategory({
+        id: draggedRow.id,
+        brother_id: relatedRow.id,
+        type: newIndex > oldIndex ? 'after' : 'before'
+      }).then(() => {
         // 修复拖拽后数据顺序不对的问题
         if (oldIndex < newIndex) {
           tableData = []
@@ -169,17 +172,57 @@ function onExpandChange(row: ICategory, expanded: boolean) {
   }
 }
 
+// 重点代码 根据name字段模糊匹配树状结构数据，最后将处理好的数据返回出来 
+const rebuildData = (value: any, arr: any) => {
+  if (!arr) {
+    return []
+  }
+  let newArr: any = []
+  arr.forEach((element: any) => {
+    console.log(element, 'element')
+    // indexOf用来判读当前节点name字段是否包含所搜索的字符串value
+    // 返回值：包含则返回索引值，反之返回-1
+    if (element.category_name.indexOf(value) > -1) {
+      const ab = rebuildData(value, element.children)
+      const obj = {
+        ...element,
+        children: ab
+      }
+      newArr.push(obj)
+    } else {
+      // 判断当前节点知否有子节点，并且子节点中有数据，有数据继续递归查找
+      if (element.children && element.children.length > 0) {
+        const ab = rebuildData(value, element.children)
+        const obj = {
+          ...element,
+          children: ab
+        }
+        if (ab && ab.length > 0) {
+          newArr.push(obj)
+        }
+      }
+    }
+  })
+  return newArr
+}
+
 onMounted(() => {
   useSortable()
 })
 </script>
 <template>
   <AppCard title="类别管理">
-    <AppList v-bind="listOptions" :has-pagination="false" row-key="id" ref="appList" :expand-row-keys="expandRowKeys" @expand-change="onExpandChange">
-      <el-button type="primary" @click="handleAddCategory">新增类别</el-button>
-      <template #table-drag>
-        <el-icon><Operation /></el-icon>
-      </template>
+    <AppList
+      v-bind="listOptions"
+      :has-pagination="false"
+      row-key="id"
+      ref="appList"
+      :expand-row-keys="expandRowKeys"
+      @expand-change="onExpandChange"
+      border
+      stripe
+    >
+      <el-button type="primary" @click="handleAddCategory" style="margin-bottom: 20px">新增类别</el-button>
       <template #table-operate="{ row }">
         <el-link type="primary" style="margin-right: 5px" @click="handleEdit(row)">编辑</el-link>
         <el-link type="primary" style="margin-right: 5px" @click="handleAddRow(row)">新增</el-link>
@@ -187,5 +230,13 @@ onMounted(() => {
       </template>
     </AppList>
   </AppCard>
-  <AddDialog v-model:dialogVisible="dialogVisible" @updatePage="handleUpdate" :editData="editData" :isEdit="isEdit" :title="title" :prevCategoryName="prevCategoryName" v-if="dialogVisible" />
+  <AddDialog
+    v-model:dialogVisible="dialogVisible"
+    @updatePage="handleUpdate"
+    :editData="editData"
+    :isEdit="isEdit"
+    :title="title"
+    :prevCategoryName="prevCategoryName"
+    v-if="dialogVisible"
+  />
 </template>