Переглянути джерело

修复部门和权限无法筛选的问题

zhontai 2 роки тому
батько
коміт
6794250a82
3 змінених файлів з 27 додано та 28 видалено
  1. 11 16
      src/utils/tree.ts
  2. 6 6
      src/views/admin/org/index.vue
  3. 10 6
      src/views/admin/permission/index.vue

+ 11 - 16
src/utils/tree.ts

@@ -111,36 +111,31 @@ export function treeToList(
 filterTree(cloneDeep(tree), keyword)
 
 filterTree(cloneDeep(tree), keyword, {
-  getChildren: (item: any) => {
-    return item['children']
-  },
-  filterWhere: (item: any) => {
-    return item.name?.toLocaleLowerCase().indexOf(keyword) > -1
+  children: 'children',
+  filterWhere: (item: any, filterword: string) => {
+    return item.name?.toLocaleLowerCase().indexOf(filterword) > -1
   },
 })
 */
 export function filterTree(tree: any = [], keyword: string, options = {}) {
-  const { getChildren, filterWhere } = Object.assign(
+  const { children, filterWhere } = Object.assign(
     {
-      getChildren: (item: any) => {
-        return item['children']
-      },
-      filterWhere: (item: any) => {
-        return item.name?.toLocaleLowerCase().indexOf(keyword) > -1
+      children: 'children',
+      filterWhere: (item: any, word: string) => {
+        return item.name?.toLocaleLowerCase().indexOf(word) > -1
       },
     },
     options || {}
   )
 
   return tree.filter((item: any) => {
-    if (filterWhere(item)) {
+    if (filterWhere(item, keyword)) {
       return true
     }
 
-    let children = getChildren(item)
-    if (children) {
-      children = filterTree(item.children, keyword, { getChildren, filterWhere })
-      return children.length > 0
+    if (item[children]) {
+      item[children] = filterTree(item[children], keyword, { children, filterWhere })
+      return item[children].length > 0
     }
 
     return false

+ 6 - 6
src/views/admin/org/index.vue

@@ -3,9 +3,9 @@
     <el-row :gutter="8" style="width: 100%">
       <el-col :span="24" :xs="24">
         <el-card shadow="never" :body-style="{ paddingBottom: '0' }" style="margin-top: 8px">
-          <el-form :model="state.filterModel" :inline="true" @submit.stop.prevent>
-            <el-form-item label="部门名称" prop="name">
-              <el-input v-model="state.filterModel.name" placeholder="部门名称" @keyup.enter="onQuery" />
+          <el-form :inline="true" @submit.stop.prevent>
+            <el-form-item label="部门名称">
+              <el-input v-model="state.filter.name" placeholder="部门名称" @keyup.enter="onQuery" />
             </el-form-item>
             <el-form-item>
               <el-button type="primary" icon="ele-Search" @click="onQuery"> 查询 </el-button>
@@ -52,7 +52,7 @@
 import { ref, reactive, onMounted, getCurrentInstance, onUnmounted, defineAsyncComponent } from 'vue'
 import { OrgListOutput } from '/@/api/admin/data-contracts'
 import { OrgApi } from '/@/api/admin/Org'
-import { listToTree } from '/@/utils/tree'
+import { listToTree, filterTree } from '/@/utils/tree'
 import eventBus from '/@/utils/mitt'
 
 // 引入组件
@@ -65,7 +65,7 @@ const orgFormRef = ref()
 const state = reactive({
   loading: false,
   orgFormTitle: '',
-  filterModel: {
+  filter: {
     name: '',
   },
   orgTreeData: [] as Array<OrgListOutput>,
@@ -88,7 +88,7 @@ const onQuery = async () => {
     state.loading = false
   })
   if (res && res.data && res.data.length > 0) {
-    state.orgTreeData = listToTree(res.data)
+    state.orgTreeData = filterTree(listToTree(res.data), state.filter.name)
   } else {
     state.orgTreeData = []
   }

+ 10 - 6
src/views/admin/permission/index.vue

@@ -3,9 +3,9 @@
     <el-row :gutter="8" style="width: 100%">
       <el-col :span="24" :xs="24">
         <el-card shadow="never" :body-style="{ paddingBottom: '0' }" style="margin-top: 8px">
-          <el-form :model="state.filterModel" :inline="true" @submit.stop.prevent>
-            <el-form-item label="权限名称" prop="name">
-              <el-input v-model="state.filterModel.name" placeholder="权限名称" @keyup.enter="onQuery" />
+          <el-form :inline="true" @submit.stop.prevent>
+            <el-form-item label="权限名称">
+              <el-input v-model="state.filter.name" placeholder="权限名称" @keyup.enter="onQuery" />
             </el-form-item>
             <el-form-item>
               <el-button type="primary" icon="ele-Search" @click="onQuery"> 查询 </el-button>
@@ -115,7 +115,7 @@
 import { ref, reactive, onMounted, getCurrentInstance, onUnmounted, defineAsyncComponent } from 'vue'
 import { PermissionListOutput } from '/@/api/admin/data-contracts'
 import { PermissionApi } from '/@/api/admin/Permission'
-import { listToTree, treeToList } from '/@/utils/tree'
+import { listToTree, treeToList, filterTree } from '/@/utils/tree'
 import { cloneDeep } from 'lodash-es'
 import eventBus from '/@/utils/mitt'
 import { auth } from '/@/utils/authFunction'
@@ -134,7 +134,7 @@ const permissionDotFormRef = ref()
 const state = reactive({
   loading: false,
   permissionFormTitle: '',
-  filterModel: {
+  filter: {
     name: '',
   },
   permissionTreeData: [] as Array<PermissionListOutput>,
@@ -163,7 +163,11 @@ const onQuery = async () => {
     state.loading = false
   })
   if (res && res.data && res.data.length > 0) {
-    state.permissionTreeData = listToTree(cloneDeep(res.data))
+    state.permissionTreeData = filterTree(listToTree(cloneDeep(res.data)), state.filter.name, {
+      filterWhere: (item: any, keyword: string) => {
+        return item.label?.toLocaleLowerCase().indexOf(keyword) > -1
+      },
+    })
     state.formPermissionGroupTreeData = listToTree(cloneDeep(res.data).filter((a) => a.type === 1))
     state.formPermissionMenuTreeData = listToTree(cloneDeep(res.data).filter((a) => a.type === 1 || a.type === 2))
   } else {