refactor: 重构部门管理、菜单管理树列表过滤（前端过滤）

src/views/system/menu/index.vue

@@ -17,17 +17,9 @@
         <IconRight v-else />
       </template>
       <template #custom-left>
-        <a-input v-model="queryForm.title" placeholder="请输入菜单标题" allow-clear @change="search">
+        <a-input v-model="title" placeholder="请输入菜单标题" allow-clear @change="search">
           <template #prefix><icon-search /></template>
         </a-input>
-        <a-select
-          v-model="queryForm.status"
-          :options="DisEnableStatusList"
-          placeholder="请选择状态"
-          allow-clear
-          style="width: 150px"
-          @change="search"
-        />
         <a-button @click="reset">重置</a-button>
       </template>
       <template #custom-right>
@@ -88,24 +80,48 @@ import MenuAddModal from './MenuAddModal.vue'
 import { type MenuQuery, type MenuResp, deleteMenu, listMenu } from '@/apis/system'
 import type GiTable from '@/components/GiTable/index.vue'
 import type { TableInstanceColumns } from '@/components/GiTable/type'
-import { DisEnableStatusList } from '@/constant/common'
 import { isMobile } from '@/utils'
 import has from '@/utils/has'
 import { useTable } from '@/hooks'
 
 defineOptions({ name: 'SystemMenu' })
 
-const queryForm = reactive<MenuQuery>({
-  sort: ['parentId,asc', 'sort,asc', 'createTime,desc']
-})
-
+const queryForm = reactive<MenuQuery>({})
 const {
-  tableData: dataList,
+  tableData,
   loading,
   search,
   handleDelete
 } = useTable(() => listMenu(queryForm), { immediate: true })
 
+// 过滤树
+const title = ref('')
+const searchData = (title: string) => {
+  const loop = (data: MenuResp[]) => {
+    const result = [] as MenuResp[]
+    data.forEach((item: MenuResp) => {
+      if (item.title?.toLowerCase().includes(title.toLowerCase())) {
+        result.push({ ...item })
+      } else if (item.children) {
+        const filterData = loop(item.children)
+        if (filterData.length) {
+          result.push({
+            ...item,
+            children: filterData
+          })
+        }
+      }
+    })
+    return result
+  }
+  return loop(tableData.value)
+}
+
+const dataList = computed(() => {
+  if (!title.value) return tableData.value
+  return searchData(title.value)
+})
+
 const columns: TableInstanceColumns[] = [
   { title: '菜单标题', dataIndex: 'title', slotName: 'title', width: 170, fixed: !isMobile() ? 'left' : undefined },
   { title: '类型', slotName: 'type', align: 'center' },
@@ -134,9 +150,7 @@ const columns: TableInstanceColumns[] = [
 
 // 重置
 const reset = () => {
-  queryForm.title = undefined
-  queryForm.status = undefined
-  search()
+  title.value = ''
 }
 
 // 删除