RoleManagement.vue

<template>
  <div class="space-y-6">
    <!-- 页面标题和操作区 -->
    <div class="flex items-center justify-between">
      <div>
        <h3 class="text-neutral-900 text-[20px] font-bold">角色管理</h3>
        <p class="text-sm text-neutral-500 mt-1">创建和管理系统角色，为角色分配相应权限</p>
      </div>
      <el-button 
        type="primary" 
        @click="handleOpenAddDialog"
        class="bg-brand-primary hover:bg-brand-primary/90 border-brand-primary"
      >
        <el-icon class="mr-1"><Plus /></el-icon>
        创建角色
      </el-button>
    </div>

    <!-- 角色列表 -->
    <div class="p-5 bg-white rounded-lg">
      <div class="rounded-lg overflow-hidden">
        <el-table 
          :data="filteredRoles" 
          style="width: 100%"
          :header-cell-style="{ backgroundColor: '#f3f4f6', color: '#374151', fontWeight: '500', borderBottom: '1px solid #e5e7eb' }"
          :row-style="{ borderBottom: '1px solid rgb(243 244 246)' }">
          <el-table-column prop="roleName" label="角色名称" min-width="120">
            <template #default="{ row }">
              <span class="text-neutral-900">{{ row.roleName }}</span>
            </template>
          </el-table-column>
          
          <el-table-column prop="status" label="状态" min-width="80">
            <template #default="{ row }">
              <el-tag 
                :type="row.status == 1 ? 'success' : 'info'"
                effect="plain"
                size="small"
              >
                {{ row.status==1?'启用':'停用' }}
              </el-tag>
            </template>
          </el-table-column>
          
          <el-table-column prop="createTime" label="创建时间" min-width="150">
            <template #default="{ row }">
              <span class="text-neutral-600">{{ $utils.detailTime(row.createTime)}}</span>
            </template>
          </el-table-column>
          
          <el-table-column label="操作" min-width="80" fixed="right">
            <template #default="{ row }">
              <el-button 
                type="primary" 
                link 
                @click="handleOpenEditDialog(row)"
                class="text-brand-primary hover:text-brand-primary"
              >
                编辑
              </el-button>
            </template>
          </el-table-column>
          
          <template #empty>
            <div class="text-center py-12 text-neutral-500">
              暂无角色数据
            </div>
          </template>
        </el-table>
      </div>
    </div>

    <!-- 创建/编辑角色对话框 -->
    <el-dialog
      v-model="isDialogOpen"
      :title="editingRole ? '编辑角色' : '创建角色'"
      width="800px"
      :close-on-click-modal="false"
      class="role-dialog"
    >


      <div class="space-y-6 max-h-[60vh] overflow-y-auto pr-2">
        <!-- 基本信息 -->
        <div class="space-y-4">
          <div>
            <label class="block text-sm font-medium text-neutral-900 mb-2">
              角色名称 <span class="text-red-500">*</span>
            </label>
            <el-input
              v-model="roleName"
              placeholder="如：区县全权管理员"
              class="w-full"
            />
          </div>

          <div>
            <label class="block text-sm font-medium text-neutral-900 mb-2">
              角色描述 <span class="text-neutral-500">（选填）</span>
            </label>
            <el-input
              v-model="roleDescription"
              type="textarea"
              :rows="3"
              placeholder="简要描述该角色的职责和权限范围..."
              class="w-full"
            />
          </div>



          <div class="flex items-center justify-between p-4 bg-neutral-50 rounded border border-neutral-200">
            <div>
              <label class="block text-sm font-medium text-neutral-900">状态</label>
              <p class="text-sm text-neutral-500 mt-1">停用后，该角色无法被分配给账号</p>
            </div>
              <el-switch
                v-model="roleStatusEnabled"
              />
          </div>
        </div>

        <!-- 权限选择 -->
        <div class="space-y-3">
          <div class="flex items-center justify-between">
            <label class="block text-sm font-medium text-neutral-900">
              权限选择 <span class="text-red-500">*</span>
            </label>
            <el-tag 
              type="primary" 
              effect="plain"
              class="bg-brand-primary/10 text-brand-primary border-brand-primary"
            >
              已选择 {{ selectedPermissions.length }} 个权限
            </el-tag>
          </div>
          
          <div class="border border-neutral-300 rounded p-4 bg-neutral-50 max-h-96 overflow-y-auto">
            <div class="space-y-1">
              <PermissionTreeNode
                v-for="permission in topLevelPermissions"
                :key="permission.id"
                :permission="permission"
                :selected-permissions="selectedPermissions"
                :expanded-permissions="expandedPermissions"
                @toggle-permission="handleTogglePermission"
                @toggle-expand="toggleExpand"
                :level="0"
              />
            </div>
          </div>
          
          <p class="text-xs text-neutral-500">
            提示：选择父权限会自动选择所有子权限，取消父权限会同时取消所有子权限
          </p>
        </div>
      </div>

      <template #footer>
        <div class="flex justify-end gap-3">
          <el-button @click="isDialogOpen = false">
            取消
          </el-button>
          <el-button 
            type="primary" 
            @click="handleSave"
            class="bg-brand-primary border-brand-primary"
          >
            确定
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref,onMounted, computed, watch ,getCurrentInstance} from 'vue'
import { ElMessage } from 'element-plus'
import { Plus } from '@element-plus/icons-vue'
import PermissionTreeNode from './PermissionTreeNode.vue'

const { $api,$utils } = getCurrentInstance()!.appContext.config.globalProperties

onMounted(() => {
  // 初始化数据
  handleFilter()
})

const handleFilter = async () => {
  try {
    const response = await $api.queryRoleList({});
    if (response.c === 0) {
      filteredRoles.value = response.d
      ElMessage.success('查询成功');
    } else {
      ElMessage.error(response.msg || '查询失败');
    }
  } catch (error) {
    ElMessage.error('查询失败: ' + error.message);
  }
}

// 类型定义
export interface Permission {
  id: string
  name: string
  code: string
  description?: string
  parentId?: string
  children?: Permission[]
}

export interface Role {
  id: Number
  roleName: string
  status: RoleStatus
  remark?: string
  permissionIds?: string[]
  permissions?: string[]
  createTime?: string
}

export type RoleStatus = 1 | 0

// Props
interface Props {
  roles: Role[]
  permissions: Permission[]
}

const props = defineProps<Props>()

// Emits
const emit = defineEmits<{
  addRole: [role: Omit<Role, 'id' | 'createTime'>]
  updateRole: [id: string, updates: Partial<Role>]
}>()

// 响应式数据
const isDialogOpen = ref(false)
const editingRole = ref<Role | null>(null)

// 表单状态
const roleName = ref('')
const roleDescription = ref('')

const selectedPermissions = ref<string[]>([])
const roleLevel = ref<'地市级' | '区县级' | '一线人员'>('区县级')
const roleStatusEnabled = ref(true)

// 权限树展开状态
const expandedPermissions = ref<Set<string>>(new Set())

// 计算属性
const roleStatus = computed((): RoleStatus => roleStatusEnabled.value ? 1 : 0)

const topLevelPermissions = computed(() => 
  props.permissions.filter(p => !p.parentId)
)

const filteredRoles = ref([])

const getAllIds = (tree)=>{
  const ids = [] // 结果池
  const stack = [...tree] // 根节点入栈

  while (stack.length) {
    const node = stack.pop()
    if (node.id !== undefined) ids.push(node.id) // 收集当前节点
    if (node.children?.length) {
      // 子节点全部入栈（顺序无所谓就 push，要顺序就 unshift）
      stack.push(...node.children)
    }
  }
  return ids
}

// 获取角色的权限ID列表，兼容不同的字段名
const getRolePermissionIds = async (role: Role)=> {
  try {
    const response = await $api.queryRolePermission({
      id: role.id
    })
    
    if (response.c === 0 && response.d) {
      return  getAllIds(response.d.list)
    } else {
      console.warn('获取角色权限失败:', response.msg)
      return role.permissionIds || role.permissions || []
    }
  } catch (error) {
    console.error('获取角色权限出错:', error)
    // 如果API调用失败，使用角色对象中已有的权限数据
    return role.permissionIds || role.permissions || []
  }
}

// 打开新增对话框
const handleOpenAddDialog = () => {
  editingRole.value = null
  roleName.value = ''
  roleDescription.value = ''
  roleStatusEnabled.value = true

  selectedPermissions.value = []
  expandedPermissions.value = new Set(props.permissions.filter(p => !p.parentId).map(p => p.id))

  isDialogOpen.value = true
}

// 打开编辑对话框
const handleOpenEditDialog = async (role: Role) => {
  editingRole.value = role
  roleName.value = role.roleName
  roleDescription.value = role.remark || ''
  roleStatusEnabled.value = role.status === 1

  // 获取角色权限并设置选中状态
  const permissionIds = await getRolePermissionIds(role)
  selectedPermissions.value = permissionIds
  
  // 展开顶级权限以便用户能看到选中的权限
  expandedPermissions.value = new Set(props.permissions.filter(p => !p.parentId).map(p => p.id))
  
  // 如果有选中的权限，也展开其父级权限
  permissionIds.forEach(permissionId => {
    const permission = findPermissionById(permissionId)
    if (permission && permission.parentId) {
      // 向上展开所有父级
      let currentPermission = permission
      while (currentPermission.parentId) {
        expandedPermissions.value.add(currentPermission.parentId)
        currentPermission = findPermissionById(currentPermission.parentId)!
      }
    }
  })

  isDialogOpen.value = true
}

// 保存角色
const handleSave = async () => {
  if (!roleName.value.trim()) {
    ElMessage.error('请输入角色名称')
    return
  }

  if (selectedPermissions.value.length === 0) {
    ElMessage.error('请至少选择一个权限')
    return
  }

  const response = await $api.createOrUpdateRole({
    roleId: editingRole.value?editingRole.value.id:'',
    roleName: roleName.value.trim(),
    remark: roleDescription.value.trim(),
    status: roleStatus.value,
    functionIds: selectedPermissions.value
  })
  if (response.c === 0) {
    handleFilter()
    ElMessage.success(editingRole.value?'编辑成功':'创建成功');
  } else {
    ElMessage.error(response.m);
  }

  isDialogOpen.value = false
}

// 获取所有子权限ID
const getAllChildPermissionIds = (permissionId: string): string[] => {
  const permission = findPermissionById(permissionId)
  if (!permission || !permission.children) return []

  const childIds: string[] = []
  const collectChildIds = (perms: Permission[]) => {
    for (const p of perms) {
      childIds.push(p.id)
      if (p.children) {
        collectChildIds(p.children)
      }
    }
  }
  collectChildIds(permission.children)
  return childIds
}

// 切换权限选择
const handleTogglePermission = (permissionId: string) => {
  const permission = findPermissionById(permissionId)
  if (!permission) return

  let newSelected = [...selectedPermissions.value]

  if (newSelected.includes(permissionId)) {
    // 取消选择：同时取消所有子权限
    newSelected = newSelected.filter(id => {
      const p = findPermissionById(id)
      return !isDescendantOf(p, permissionId)
    })
    newSelected = newSelected.filter(id => id !== permissionId)
  } else {
    // 选择：自动选择所有父权限和所有子权限
    newSelected.push(permissionId)

    // 自动选择所有子权限
    const childIds = getAllChildPermissionIds(permissionId)
    childIds.forEach(id => {
      if (!newSelected.includes(id)) {
        newSelected.push(id)
      }
    })

    // 自动选择所有父权限
    let current = permission
    while (current.parentId) {
      if (!newSelected.includes(current.parentId)) {
        newSelected.push(current.parentId)
      }
      current = findPermissionById(current.parentId)!
    }
  }

  selectedPermissions.value = newSelected

  console.log(newSelected)
}

// 查找权限
const findPermissionById = (id: string): Permission | undefined => {
  const find = (perms: Permission[]): Permission | undefined => {
    for (const p of perms) {
      if (p.id === id) return p
      if (p.children) {
        const found = find(p.children)
        if (found) return found
      }
    }
    return undefined
  }
  return find(props.permissions)
}

// 判断是否是某个权限的后代
const isDescendantOf = (permission: Permission | undefined, ancestorId: string): boolean => {
  if (!permission) return false
  if (permission.parentId === ancestorId) return true
  if (!permission.parentId) return false
  return isDescendantOf(findPermissionById(permission.parentId), ancestorId)
}

// 切换权限树节点展开
const toggleExpand = (permissionId: string) => {
  const newExpanded = new Set(expandedPermissions.value)
  if (newExpanded.has(permissionId)) {
    newExpanded.delete(permissionId)
  } else {
    newExpanded.add(permissionId)
  }
  expandedPermissions.value = newExpanded
}
</script>

<style scoped>
:deep(.role-dialog .el-dialog__header) {
  padding: 24px 24px 0 24px !important;
  border-bottom: none !important;
  margin-bottom: 0;
}

:deep(.role-dialog .el-dialog__body) {
  padding: 24px !important;
}

:deep(.role-dialog .el-dialog__footer) {
  padding: 0 24px 24px 24px !important;
  border-top: 1px solid #f0f0f0;
  margin-top: 0;
}

:deep(.el-table .el-table__cell) {
  border-bottom: 1px solid rgb(243 244 246);
}

:deep(.el-table--border::after) {
  display: none;
}

:deep(.el-table--border .el-table__cell) {
  border-right: none;
}

:deep(.el-table th.el-table__cell) {
  background-color: rgb(239 246 255 / 0.5);
  border-bottom: 1px solid rgb(229 231 235);
  color: #374151;
  font-weight: 500;
}
</style>