gameapi-client/src/views/system/user/role/README.md

权限树状表格组件使用说明

概述

这个权限树状表格组件实现了类似表格的树形权限管理界面，左侧显示树形菜单结构，右侧显示对应的权限复选框，完全符合您截图中的设计需求。

文件结构

src/views/system/user/role/
├── render.vue              # 核心权限树状表格组件
├── permission-dialog.vue   # 权限选择对话框组件
├── permission-example.vue  # 完整使用示例
└── README.md               # 使用说明

核心功能

1. 树状表格展示

• 表格样式的树形结构展示
• 支持多级树形结构
• 可展开/收起节点
• 支持节点复选框选择（含半选状态）

2. 权限复选框管理

• 每个节点可以配置独立的权限项
• 权限项以复选框形式展示在右侧
• 支持权限项的选中状态管理
• 支持热门权限标记

3. 表格式布局

• 左侧：菜单名称列（支持树形缩进）
• 右侧：权限操作列（权限复选框）
• 表格头部标题
• 行分隔线和悬停效果

数据结构

const treeData = [
  {
    id: 1,                    // 节点唯一标识
    label: '开站管理',         // 节点显示名称
    children: [               // 子节点（可选）
      {
        id: 11,
        label: '待审核',
        perms: []             // 权限列表（可选）
      },
      {
        id: 12,
        label: '待付款',
        perms: [              // 权限项配置
          {
            key: 'pay',
            label: '付款',
            checked: false
          }
        ]
      },
      {
        id: 15,
        label: '已上线',
        perms: [
          {
            key: 'add_brand',
            label: '新增子品牌',
            checked: false,
            isHot: true       // 热门权限标记
          },
          {
            key: 'edit',
            label: '修改',
            checked: false
          }
        ]
      }
    ]
  }
]

使用方法

1. 基础使用

<template>
  <PermissionTreeTable ref="treeTableRef" />
</template>

<script setup>
import { ref } from 'vue'
import PermissionTreeTable from './render.vue'

const treeTableRef = ref()

// 获取选中的数据
const getSelectedData = () => {
  if (treeTableRef.value) {
    return treeTableRef.value.getCheckedData()
  }
}
</script>

2. 对话框形式使用

<template>
  <PermissionDialog
    v-model="dialogVisible"
    :role-id="currentRoleId"
    @confirm="handlePermissionConfirm"
  />
</template>

<script setup>
import PermissionDialog from './permission-dialog.vue'

const dialogVisible = ref(false)
const currentRoleId = ref(1)

const handlePermissionConfirm = (data) => {
  console.log('选中的权限:', data)
}
</script>

样式说明

1. 表格式布局

• 使用 CSS Grid 布局实现表格效果
• 左列：菜单名称（固定宽度 300px）
• 右列：权限操作（自适应宽度）
• 表格头部和内容分离

2. 主要样式类名

• .permission-tree-table: 组件容器
• .table-header: 表格头部
• .table-content: 表格内容区域
• .table-row: 每行的容器
• .row-left: 左侧菜单名称区域
• .row-right: 右侧权限操作区域
• .expand-icon: 展开/收起图标
• .hot-tag: 热门权限标记

3. 核心样式

.permission-tree-table {
  border: 1px solid #ebeef5;
  border-radius: 4px;
  overflow: hidden;
}

.table-header {
  display: grid;
  grid-template-columns: 300px 1fr;
  background: #f5f7fa;
  border-bottom: 1px solid #ebeef5;
}

.table-row {
  display: grid;
  grid-template-columns: 300px 1fr;
  border-bottom: 1px solid #ebeef5;
}

.table-row:hover {
  background-color: #f5f7fa;
}

API 说明

Props

• modelValue: 对话框显示状态（仅对话框组件）
• roleId: 角色ID（可选）

Events

• confirm: 确认选择权限时触发，返回选中的权限数据

Methods

• getCheckedData(): 获取当前选中的数据
  • 返回格式：

    {
      checkedNodes: [        // 选中的节点
        { id: 1, label: '开站管理' }
      ],
      checkedPermissions: {  // 选中的权限
        "12": [
          { key: 'pay', label: '付款' }
        ]
      }
    }
    

扩展功能

1. 权限标记

可以为特定权限添加标记（如"热门"标记）：

const isHot = perm === '新增子品牌'
// 在渲染时添加标记
h('span', { class: 'hot-tag' }, '热')

2. 权限分组

可以通过树形结构对权限进行分组管理。

3. 权限搜索

可以添加搜索功能来快速定位特定权限。

注意事项

1. 确保每个节点的 id 唯一
2. perms 数组为空时不会显示权限复选框
3. 权限状态通过 permissionState 响应式对象管理
4. 使用 :deep() 选择器来修改 Element Plus 组件的默认样式