fetch(modify):修改bug

src/views/system/permission/index.vue

@@ -24,7 +24,7 @@
         <!-- 表格 -->
         <ArtTable
           ref="tableRef"
-          row-key="ID"
+          row-key="id"
           :data="permissionList"
           :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
           :default-expand-all="false"
@@ -110,25 +110,20 @@
     ElMessage,
     ElMessageBox,
     ElTag,
-    ElSwitch,
     type FormInstance,
     type FormRules
   } from 'element-plus'
   import { PermissionService } from '@/api/modules'
-  import type { Permission, CreatePermissionParams } from '@/types/api'
+  import type { CreatePermissionParams, PermissionTreeNode } from '@/types/api'
   import type { SearchFormItem } from '@/types'
-  import { formatDateTime } from '@/utils/business/format'
   import { useCheckedColumns } from '@/composables/useCheckedColumns'
   import ArtButtonTable from '@/components/core/forms/ArtButtonTable.vue'
   import {
-    CommonStatus,
-    getStatusText,
     PermissionType,
     PERMISSION_TYPE_OPTIONS,
     PERMISSION_TYPE_SELECT_OPTIONS,
     getPermissionTypeText,
-    getPermissionTypeTag,
-    STATUS_SELECT_OPTIONS
+    getPermissionTypeTag
   } from '@/config/constants'
 
   defineOptions({ name: 'Permission' })
@@ -137,8 +132,7 @@
   const initialSearchState = {
     perm_name: '',
     perm_code: '',
-    perm_type: undefined as number | undefined,
-    status: undefined as number | undefined
+    perm_type: undefined as number | undefined
   }
 
   // 搜索表单
@@ -173,16 +167,6 @@
         clearable: true,
         placeholder: '请选择'
       }
-    },
-    {
-      label: '状态',
-      prop: 'status',
-      type: 'select',
-      options: STATUS_SELECT_OPTIONS,
-      config: {
-        clearable: true,
-        placeholder: '请选择'
-      }
     }
   ]
 
@@ -192,19 +176,20 @@
     { label: '权限标识', prop: 'perm_code' },
     { label: '权限类型', prop: 'perm_type' },
     { label: '菜单路径', prop: 'url' },
+    { label: '适用端口', prop: 'platform' },
     { label: '排序', prop: 'sort' },
-    { label: '状态', prop: 'status' },
-    { label: '创建时间', prop: 'CreatedAt' },
     { label: '操作', prop: 'operation' }
   ]
 
-  // 权限列表
-  const permissionList = ref<Permission[]>([])
+  // 权限列表（树形结构）
+  const permissionList = ref<PermissionTreeNode[]>([])
+  // 原始权限树数据（用于搜索过滤）
+  const originalPermissionTree = ref<PermissionTreeNode[]>([])
 
   const tableRef = ref()
   const dialogVisible = ref(false)
   const dialogType = ref('add')
-  const currentRow = ref<Permission | null>(null)
+  const currentRow = ref<PermissionTreeNode | null>(null)
   const currentPermissionId = ref<number>(0)
   const submitLoading = ref(false)
 
@@ -242,7 +227,7 @@
     {
       prop: 'perm_name',
       label: '权限名称',
-      minWidth: 200
+      width: 200
     },
     {
       prop: 'perm_code',
@@ -253,7 +238,7 @@
       prop: 'perm_type',
       label: '权限类型',
       width: 120,
-      formatter: (row: any) => {
+      formatter: (row: PermissionTreeNode) => {
         return h(ElTag, { type: getPermissionTypeTag(row.perm_type) }, () =>
           getPermissionTypeText(row.perm_type)
         )
@@ -261,43 +246,32 @@
     },
     {
       prop: 'url',
-      label: '菜单路径',
-      width: 180
+      label: '菜单路径'
+    },
+    {
+      prop: 'platform',
+      label: '适用端口',
+      width: 120,
+      formatter: (row: PermissionTreeNode) => {
+        const platformMap: Record<string, string> = {
+          all: '全部',
+          web: 'Web后台',
+          h5: 'H5端'
+        }
+        return platformMap[row.platform || 'all'] || row.platform
+      }
     },
     {
       prop: 'sort',
       label: '排序',
       width: 80
     },
-    {
-      prop: 'status',
-      label: '状态',
-      width: 100,
-      formatter: (row: any) => {
-        return h(ElSwitch, {
-          modelValue: row.status,
-          activeValue: CommonStatus.ENABLED,
-          inactiveValue: CommonStatus.DISABLED,
-          activeText: getStatusText(CommonStatus.ENABLED),
-          inactiveText: getStatusText(CommonStatus.DISABLED),
-          inlinePrompt: true,
-          'onUpdate:modelValue': (val: string | number | boolean) =>
-            handleStatusChange(row, val as number)
-        })
-      }
-    },
-    {
-      prop: 'CreatedAt',
-      label: '创建时间',
-      width: 180,
-      formatter: (row: any) => formatDateTime(row.CreatedAt)
-    },
     {
       prop: 'operation',
       label: '操作',
-      width: 160,
+      width: 120,
       fixed: 'right',
-      formatter: (row: any) => {
+      formatter: (row: PermissionTreeNode) => {
         return h('div', { style: 'display: flex; gap: 8px;' }, [
           h(ArtButtonTable, {
             type: 'edit',
@@ -312,51 +286,59 @@
     }
   ])
 
-  // 将扁平数据转换为树形结构
-  const buildTreeData = (flatData: Permission[]): Permission[] => {
-    const map = new Map<number, Permission>()
-    const result: Permission[] = []
+  // 过滤权限树（根据搜索条件）
+  const filterPermissionTree = (
+    tree: PermissionTreeNode[],
+    filters: typeof searchForm
+  ): PermissionTreeNode[] => {
+    return tree.reduce<PermissionTreeNode[]>((acc, node) => {
+      // 克隆节点避免修改原始数据
+      const newNode = { ...node }
 
-    // 先创建所有节点的映射
-    flatData.forEach((item) => {
-      map.set(item.ID, { ...item, children: [] })
-    })
+      // 检查当前节点是否匹配搜索条件
+      let matches = true
 
-    // 构建树形结构
-    map.forEach((item) => {
-      if (item.parent_id && map.has(item.parent_id)) {
-        const parent = map.get(item.parent_id)!
-        if (!parent.children) {
-          parent.children = []
-        }
-        parent.children.push(item)
-      } else {
-        // 没有父节点的是根节点
-        result.push(item)
+      if (filters.perm_name && !newNode.perm_name.includes(filters.perm_name)) {
+        matches = false
+      }
+      if (filters.perm_code && !newNode.perm_code.includes(filters.perm_code)) {
+        matches = false
+      }
+      if (filters.perm_type !== undefined && newNode.perm_type !== filters.perm_type) {
+        matches = false
       }
-    })
 
-    // 递归排序
-    const sortTree = (nodes: Permission[]): Permission[] => {
-      return nodes
-        .sort((a, b) => (a.sort || 0) - (b.sort || 0))
-        .map((node) => ({
-          ...node,
-          children: node.children && node.children.length > 0 ? sortTree(node.children) : undefined
-        }))
-    }
+      // 递归过滤子节点
+      if (newNode.children && newNode.children.length > 0) {
+        newNode.children = filterPermissionTree(newNode.children, filters)
+      }
 
-    return sortTree(result)
+      // 如果当前节点匹配或有匹配的子节点，则保留
+      if (matches || (newNode.children && newNode.children.length > 0)) {
+        acc.push(newNode)
+      }
+
+      return acc
+    }, [])
   }
 
-  // 获取权限列表
+  // 获取权限树
   const getPermissionList = async () => {
     try {
-      const response = await PermissionService.getPermissions(searchForm)
+      const response = await PermissionService.getPermissionTree()
       if (response.code === 0) {
-        const flatData = response.data.items || []
-        // 将扁平数据转换为树形结构
-        permissionList.value = buildTreeData(flatData)
+        originalPermissionTree.value = response.data || []
+
+        // 应用搜索过滤
+        const hasFilters =
+          searchForm.perm_name || searchForm.perm_code || searchForm.perm_type !== undefined
+
+        if (hasFilters) {
+          permissionList.value = filterPermissionTree(originalPermissionTree.value, searchForm)
+        } else {
+          permissionList.value = originalPermissionTree.value
+        }
+
         // 构建权限树选项
         buildPermissionTreeOptions()
       }
@@ -367,14 +349,14 @@
 
   // 构建权限树选项
   const buildPermissionTreeOptions = () => {
-    const buildTree = (list: Permission[]): any[] => {
+    const buildTree = (list: PermissionTreeNode[]): any[] => {
       return list.map((item) => ({
-        value: item.ID,
+        value: item.id,
         label: item.perm_name,
         children: item.children && item.children.length > 0 ? buildTree(item.children) : undefined
       }))
     }
-    permissionTreeOptions.value = buildTree(permissionList.value)
+    permissionTreeOptions.value = buildTree(originalPermissionTree.value)
   }
 
   // 搜索
@@ -394,7 +376,7 @@
   }
 
   // 显示对话框
-  const showDialog = (type: string, row?: any) => {
+  const showDialog = (type: string, row?: PermissionTreeNode) => {
     dialogVisible.value = true
     dialogType.value = type
 
@@ -404,12 +386,14 @@
 
     if (type === 'edit' && row) {
       currentRow.value = row
-      currentPermissionId.value = row.ID
+      currentPermissionId.value = row.id
+      // 需要从API获取完整的权限数据，因为树节点可能不包含所有字段
+      // 暂时使用树节点的数据
       Object.assign(form, {
         perm_name: row.perm_name,
         perm_code: row.perm_code,
         perm_type: row.perm_type,
-        parent_id: row.parent_id,
+        parent_id: undefined, // 树结构中没有parent_id，需要从API获取
         url: row.url || '',
         platform: row.platform || 'all',
         sort: row.sort || 0
@@ -421,7 +405,7 @@
   }
 
   // 删除权限
-  const deletePermission = (row: Permission) => {
+  const deletePermission = (row: PermissionTreeNode) => {
     // 检查是否有子权限
     if (row.children && row.children.length > 0) {
       ElMessage.warning('该权限下存在子权限，请先删除子权限')
@@ -435,7 +419,7 @@
     })
       .then(async () => {
         try {
-          await PermissionService.deletePermission(row.ID)
+          await PermissionService.deletePermission(row.id)
           ElMessage.success('删除成功')
           await getPermissionList()
         } catch (error) {
@@ -489,21 +473,6 @@
     })
   }
 
-  // 状态切换
-  const handleStatusChange = async (row: any, newStatus: number) => {
-    const oldStatus = row.status
-    // 先更新UI
-    row.status = newStatus
-    try {
-      await PermissionService.updatePermission(row.ID, { status: newStatus })
-      ElMessage.success('状态切换成功')
-    } catch (error) {
-      // 切换失败，恢复原状态
-      row.status = oldStatus
-      console.error(error)
-    }
-  }
-
   // 页面加载时获取权限列表
   onMounted(() => {
     getPermissionList()