admin-web/src/modules/iam/pages/RolesView.vue

<script setup lang="ts">
import { computed, nextTick, onMounted, reactive, ref } from 'vue'
import { ElMessage, ElMessageBox, type FormInstance, type FormRules } from 'element-plus'
import { Pencil, Plus, ShieldCheck, Trash2 } from '@lucide/vue'
import {
  changePlatformRoleStatus,
  createPlatformRole,
  deletePlatformRole,
  listPlatformInternalUsers,
  listPlatformPermissions,
  listPlatformRoles,
  replacePlatformRolePermissions,
  updatePlatformRole,
  type PlatformRoleResource,
} from '@/modules/iam/api/platformIam'
import { getApiErrorDetails, getApiErrorMessage, type ApiErrorDetails } from '@/shared/api/http'
import ApiErrorMeta from '@/shared/components/ApiErrorMeta.vue'
import StatusBadge from '@/shared/components/StatusBadge.vue'
import DataTable, { type DataTableColumn } from '@/shared/components/DataTable.vue'
import QueryToolbar, { type QueryField, type QueryModel } from '@/shared/components/QueryToolbar.vue'
import { useUnsavedWorkRegistration } from '@/core/unsaved-work/useUnsavedWorkRegistration'
import { useAccessPreviewStore } from '@/core/access/accessPreview'
import type { Permission, Role } from '@/modules/iam/types'
import { buildPermissionTree, summarizePermissionSelection } from '@/modules/iam/utils/permissionTree'
import { mapPlatformPermission } from '@/modules/iam/utils/platformPermission'

interface TreeController {
  getCheckedKeys: (leafOnly?: boolean) => Array<string | number>
  getHalfCheckedKeys: () => Array<string | number>
  setCheckedKeys: (keys: string[]) => void
}

const access = useAccessPreviewStore()
const editorOpen = ref(false)
const formRef = ref<FormInstance>()
const treeRef = ref<TreeController | null>(null)
const serverRoles = ref<Role[]>([])
const serverPermissions = ref<Permission[]>([])
const loading = ref(false)
const saving = ref(false)
const rowActionId = ref('')
const loadError = ref<ApiErrorDetails | null>(null)
const page = ref(1)
const pageSize = ref(10)
type RoleFilters = QueryModel & { keyword: string; status: string }
const filters = ref<RoleFilters>({ keyword: '', status: '' })
const appliedFilters = ref<RoleFilters>({ ...filters.value })
const queryFields: QueryField[] = [
  { key: 'keyword', type: 'input', placeholder: '角色名称、编码或描述' },
  { key: 'status', type: 'select', placeholder: '全部状态', options: [{ label: '启用', value: '启用' }, { label: '停用', value: '停用' }] },
]
const emptyForm = (): Omit<Role, 'userCount'> => ({ id: '', name: '', code: '', description: '', dataScope: '本部门数据', status: '启用', permissionIds: [], builtIn: false })
const form = reactive(emptyForm())
const formRules: FormRules = {
  name: [{ required: true, whitespace: true, message: '请输入角色名称', trigger: 'blur' }],
  code: [{ required: true, whitespace: true, message: '请输入角色编码', trigger: 'blur' }],
}
const editorLabel = computed(() => form.id ? '配置角色' : '新增角色')
const canEdit = computed(() => access.can('platform:role:edit'))
const canGrant = computed(() => access.can('platform:role:grant'))
const requiredPermission = computed(() => form.id && canEdit.value ? 'platform:role:edit' : form.id ? 'platform:role:grant' : 'platform:role:create')
const { captureBaseline } = useUnsavedWorkRegistration({
  key: 'role-editor',
  label: editorLabel,
  isOpen: editorOpen,
  model: form,
  requiredPermission,
})
const roles = computed(() => serverRoles.value)
const canCreate = computed(() => access.can('platform:role:create'))
const filteredRows = computed(() => roles.value.filter((item) => {
  const keyword = appliedFilters.value.keyword.trim().toLowerCase()
  return (!keyword || [item.name, item.code, item.description].some((value) => value.toLowerCase().includes(keyword))) && (!appliedFilters.value.status || item.status === appliedFilters.value.status)
}))
const pagedRows = computed(() => filteredRows.value.slice((page.value - 1) * pageSize.value, page.value * pageSize.value))
const roleColumns: DataTableColumn[] = [
  { key: 'actions', label: '操作', width: 235, fixed: 'left', slotName: 'actions' },
  { key: 'role', label: '角色', minWidth: 210, slotName: 'role' },
  { prop: 'description', label: '说明', minWidth: 240, showOverflowTooltip: true },
  { key: 'permissionSummary', label: '授权范围', minWidth: 170, slotName: 'permissionSummary' },
  { prop: 'userCount', label: '用户数', width: 86, align: 'right' },
  { key: 'roleType', label: '类型', width: 95, slotName: 'roleType' },
  { key: 'status', label: '状态', width: 88, slotName: 'status' },
]
const availablePermissions = computed(() => serverPermissions.value)
const permissionTree = computed(() => buildPermissionTree(availablePermissions.value))

function applyFilters() {
  appliedFilters.value = { ...filters.value }
  page.value = 1
  void loadRoles()
}

function mapPlatformRole(role: PlatformRoleResource, userCount = 0): Role {
  return {
    id: String(role.id),
    name: role.roleName,
    code: role.roleCode,
    description: role.description ?? '暂无角色说明',
    userCount,
    dataScope: '全部数据',
    status: role.status === 'ACTIVE' ? '启用' : '停用',
    permissionIds: (role.permissionIds ?? []).map(String),
    builtIn: role.roleType === 'SYSTEM',
  }
}

async function loadRoles() {
  loading.value = true
  loadError.value = null
  serverRoles.value = []
  serverPermissions.value = []
  try {
    const [roleRecords, permissionRecords, memberRecords] = await Promise.all([
      listPlatformRoles(),
      listPlatformPermissions(),
      listPlatformInternalUsers(),
    ])
    const roleMemberCounts = new Map<string, number>()
    for (const member of memberRecords) {
      for (const roleId of member.roleIds) {
        const key = String(roleId)
        roleMemberCounts.set(key, (roleMemberCounts.get(key) ?? 0) + 1)
      }
    }
    serverPermissions.value = permissionRecords.map(mapPlatformPermission)
    serverRoles.value = roleRecords.map((role) => mapPlatformRole(role, roleMemberCounts.get(String(role.id)) ?? 0))
  } catch (error) {
    loadError.value = getApiErrorDetails(error, '平台角色列表加载失败，请稍后重试')
  } finally {
    loading.value = false
  }
}

function openCreate() {
  Object.assign(form, emptyForm())
  captureBaseline()
  editorOpen.value = true
  nextTick(() => { formRef.value?.clearValidate(); treeRef.value?.setCheckedKeys([]) })
}
function openEdit(row: Role) {
  if (!canEdit.value && !canGrant.value) return
  Object.assign(form, { ...row, permissionIds: [...row.permissionIds] })
  captureBaseline()
  editorOpen.value = true
  nextTick(() => { formRef.value?.clearValidate(); treeRef.value?.setCheckedKeys([...row.permissionIds]) })
}

function selectedPermissionIds() {
  const checked = treeRef.value?.getCheckedKeys(false).map(String) || []
  const halfChecked = treeRef.value?.getHalfCheckedKeys().map(String) || []
  return [...new Set([...checked, ...halfChecked])]
}

function syncPermissionIds() {
  form.permissionIds = selectedPermissionIds()
}

async function saveRole() {
  const valid = await formRef.value?.validate().catch(() => false)
  if (!valid) return
  const normalizedCode = form.code.trim().toUpperCase()
  const duplicate = roles.value.some((item) => item.code.toLowerCase() === normalizedCode.toLowerCase() && item.id !== form.id)
  if (duplicate) { ElMessage.error('角色编码已经存在'); return }
  saving.value = true
  try {
      const permissionIds = selectedPermissionIds()
      if (form.id) {
        if (canEdit.value) {
          await updatePlatformRole(form.id, { roleName: form.name.trim(), description: form.description.trim() })
        }
        if (canGrant.value) await replacePlatformRolePermissions(form.id, permissionIds)
      } else {
        const created = await createPlatformRole({
          roleCode: normalizedCode,
          roleName: form.name.trim(),
          description: form.description.trim(),
        })
        if (canGrant.value && permissionIds.length > 0) await replacePlatformRolePermissions(created.id, permissionIds)
      }
      await loadRoles()
      editorOpen.value = false
      ElMessage.success(form.id ? '角色已更新' : '角色已创建')
  } catch (error) {
    ElMessage.error(getApiErrorMessage(error, '角色保存失败，请稍后重试'))
  } finally {
    saving.value = false
  }
}

async function removeRole(row: Role) {
  if (row.builtIn) { ElMessage.warning('系统内置角色不能删除'); return }
  if (row.userCount > 0) { ElMessage.warning('请先移除该角色下的用户'); return }
  try {
    await ElMessageBox.confirm(`确认删除角色“${row.name}”吗？`, '删除角色', { confirmButtonText: '删除', cancelButtonText: '取消', type: 'warning' })
    rowActionId.value = row.id
    await deletePlatformRole(row.id)
    serverRoles.value = serverRoles.value.filter((item) => item.id !== row.id)
    ElMessage.success('角色已删除')
  } catch (error) {
    if (error === 'cancel' || error === 'close') return
    ElMessage.error(getApiErrorMessage(error, '角色删除失败，请稍后重试'))
  } finally {
    rowActionId.value = ''
  }
}

async function toggleStatus(row: Role) {
  if (row.builtIn) { ElMessage.warning('系统内置角色不能停用'); return }
  const target = row.status === '启用' ? '停用' : '启用'
  try {
    await ElMessageBox.confirm(`确认${target}角色“${row.name}”吗？`, '角色状态', { confirmButtonText: '确认', cancelButtonText: '取消' })
    rowActionId.value = row.id
    const updated = await changePlatformRoleStatus(row.id, target === '启用' ? 'ACTIVE' : 'DISABLED')
    Object.assign(row, mapPlatformRole(updated))
    ElMessage.success(`角色已${target}`)
  } catch (error) {
    if (error === 'cancel' || error === 'close') return
    ElMessage.error(getApiErrorMessage(error, '角色状态更新失败，请稍后重试'))
  } finally {
    rowActionId.value = ''
  }
}

function permissionSummary(row: Role) {
  const { menuCount, actionCount } = summarizePermissionSelection(availablePermissions.value, row.permissionIds)
  return `${menuCount} 菜单 · ${actionCount} 操作`
}

onMounted(loadRoles)
</script>

<template>
  <div class="business-page">
    <el-alert v-if="loadError" type="error" :closable="false" show-icon role="alert"><template #title><div class="api-error-alert-title"><span>{{ loadError.message }}</span><ApiErrorMeta :details="loadError" /></div><el-button link type="danger" @click="loadRoles">重新加载</el-button></template></el-alert>
    <QueryToolbar v-model="filters" class="surface-panel" ariaLabel="角色筛选" :fields="queryFields" @search="applyFilters" />

    <section class="surface-panel table-panel">
      <header class="panel-heading"><div><h2>角色与授权 <span class="secondary-text">共 {{ filteredRows.length }} 条</span></h2><p>角色负责聚合菜单、操作和数据范围，内部用户可分配多个角色。</p></div><el-button v-if="canCreate" type="primary" @click="openCreate"><Plus :size="16" />新增角色</el-button></header>
      <DataTable v-model:page="page" v-model:page-size="pageSize" :data="pagedRows" :columns="roleColumns" :loading="loading" :total="filteredRows.length" row-key="id" empty-text="没有符合条件的角色">
        <template #actions="{ row }"><div v-if="canEdit || canGrant || access.can('platform:role:status') || access.can('platform:role:delete')" class="table-actions"><el-button v-if="canEdit || canGrant" link type="primary" :disabled="rowActionId === (row as Role).id || (row as Role).builtIn" @click="openEdit(row as Role)"><Pencil :size="15" />配置</el-button><el-button v-if="access.can('platform:role:status')" link :type="(row as Role).status === '启用' ? 'danger' : 'success'" :loading="rowActionId === (row as Role).id" :disabled="(row as Role).builtIn" @click="toggleStatus(row as Role)">{{ (row as Role).status === '启用' ? '停用' : '启用' }}</el-button><el-button v-if="access.can('platform:role:delete')" link type="danger" :disabled="(row as Role).builtIn || (row as Role).userCount > 0 || rowActionId === (row as Role).id" @click="removeRole(row as Role)"><Trash2 :size="15" />删除</el-button></div><span v-else class="secondary-text">仅查看</span></template>
        <template #role="{ row }"><div class="role-cell"><span><ShieldCheck :size="18" /></span><div><strong>{{ (row as Role).name }}</strong><small>{{ (row as Role).code }}</small></div></div></template>
        <template #permissionSummary="{ row }"><div class="primary-cell"><strong>{{ permissionSummary(row as Role) }}</strong><span>平台 IAM 权限</span></div></template>
        <template #roleType="{ row }"><el-tag :type="(row as Role).builtIn ? 'warning' : 'info'" effect="plain" size="small">{{ (row as Role).builtIn ? '系统内置' : '自定义' }}</el-tag></template>
        <template #status="{ row }"><StatusBadge :status="(row as Role).status" /></template>
      </DataTable>
    </section>

    <el-drawer v-model="editorOpen" :title="form.id ? '配置角色' : '新增角色'" size="760px" class="business-drawer editor-drawer" :modal="false" :close-on-click-modal="false">
      <el-form ref="formRef" :model="form" :rules="formRules" label-position="top" class="drawer-form">
        <div class="form-section"><h3>基本信息</h3><div class="form-grid two-cols"><el-form-item label="角色名称" prop="name" required><el-input v-model="form.name" :disabled="Boolean(form.id) && !canEdit" placeholder="如：订单运营专员" maxlength="64" /></el-form-item><el-form-item label="角色编码" prop="code" required><el-input v-model="form.code" :disabled="Boolean(form.id)" placeholder="如：ORDER_OPERATOR" maxlength="64" /></el-form-item></div><el-form-item label="角色说明"><el-input v-model="form.description" :disabled="Boolean(form.id) && !canEdit" type="textarea" :rows="2" placeholder="说明该角色的工作范围" maxlength="200" show-word-limit /></el-form-item></div>
        <div v-if="canGrant" class="form-section permission-section"><div class="section-heading-row"><div><h3>菜单与操作权限</h3><p>保存时按后端契约全量替换当前角色权限；未勾选表示清空授权。</p></div><span>{{ form.permissionIds.length }} 项原有授权</span></div><el-tree ref="treeRef" class="permission-tree" :data="permissionTree" node-key="id" show-checkbox check-strictly default-expand-all :props="{ label: 'name', children: 'children' }" @check="syncPermissionIds"><template #default="{ data }"><div class="permission-node"><span>{{ data.name }}</span><code>{{ data.code }}</code></div></template></el-tree></div>
      </el-form>
      <template #footer><div class="drawer-footer"><el-button :disabled="saving" @click="editorOpen = false">取消</el-button><el-button v-if="form.id ? canEdit || canGrant : canCreate" type="primary" :loading="saving" @click="saveRole">保存角色</el-button></div></template>
    </el-drawer>
  </div>
</template>