BJ_ZTEITS-Developers / parking-cloud-ui

<script setup lang="ts">
import { ElMessage, ElMessageBox, type FormInstance, type FormRules } from 'element-plus'
import type { ElTree } from 'element-plus'
import { RoleApi, type RolePageReqVO, type RoleSaveReqVO, type RoleVO } from '@/api/system/role'
import { MenuApi, type MenuVO } from '@/api/system/menu'
import { formatDateTime } from '@/utils'

/**
 * 系统管理 - 角色管理
 *
 * 接口：/admin-api/system/role（权限点 system:role:*）
 *
 * 两个和后端约定强相关、容易踩的点：
 *
 * 1. **内置角色（id=1 super_admin）不可改状态、不可删**：
 *    后端 `RoleServiceImpl.validateNotSystemRole` 会直接抛错。前端把入口禁掉，
 *    免得用户点了才被告知不行；真正的拒绝仍以后端为准。
 *
 * 2. **菜单授权必须提交「半选的父节点」**：
 *    `el-tree` 在子节点只勾了一部分时，父节点处于「半选」态，
 *    而 `getCheckedKeys()` **不含**半选节点。后端取菜单时只按授权表里存的 id 查、
 *    不会自动补父目录，漏掉父目录 → 该角色的菜单在侧边栏挂不上树、整棵丢失。
 *    所以提交时必须 `getCheckedKeys().concat(getHalfCheckedKeys())`。
 *
 *    反过来回显时只能 `setCheckedKeys(叶子 id)`：把存下来的父节点也塞进去，
 *    el-tree 会「父节点被勾选 → 级联勾选全部子节点」，把授权范围放大；
 *    用户再点一次保存就真的把权限放大了。所以回显前先过滤成叶子节点。
 */
defineOptions({ name: 'SystemRole' })

/** 内置角色编号：后端 `PermissionService.SUPER_ADMIN_ROLE_ID` */
const SUPER_ADMIN_ROLE_ID = 1

const loading = ref(false)
const list = ref<RoleVO[]>([])
const total = ref(0)
const selectedIds = ref<number[]>([])

const queryParams = reactive<RolePageReqVO>({
  pageNo: 1,
  pageSize: 10,
  name: '',
  code: ''
})

async function loadList() {
  loading.value = true
  try {
    const page = await RoleApi.getRolePage(queryParams)
    list.value = page.list || []
    total.value = page.total || 0
  } finally {
    loading.value = false
  }
}

function handleSearch() {
  queryParams.pageNo = 1
  loadList()
}

function handleReset() {
  queryParams.name = ''
  queryParams.code = ''
  queryParams.status = undefined
  handleSearch()
}

function handleSelectionChange(rows: RoleVO[]) {
  selectedIds.value = rows.map((row) => row.id)
}

// ---------------------------------------------------------------------------
// 菜单权限树
// ---------------------------------------------------------------------------

const menuTree = ref<MenuVO[]>([])
const menuTreeRef = ref<InstanceType<typeof ElTree>>()

/** 从树里取出所有叶子节点的 id（用于回显勾选状态） */
function collectLeafIds(nodes: MenuVO[], result: Set<number> = new Set()): Set<number> {
  nodes.forEach((node) => {
    if (node.children && node.children.length > 0) {
      collectLeafIds(node.children, result)
    } else {
      result.add(node.id)
    }
  })
  return result
}

async function loadMenuTree() {
  try {
    menuTree.value = (await MenuApi.getMenuList()) || []
  } catch {
    menuTree.value = []
  }
}

// ---------------------------------------------------------------------------
// 新增 / 修改
// ---------------------------------------------------------------------------

const dialogVisible = ref(false)
const submitting = ref(false)
const formRef = ref<FormInstance>()

function emptyForm(): RoleSaveReqVO {
  return {
    name: '',
    code: '',
    sort: 0,
    status: 0,
    // 后端不传时默认 5（仅本人）。这里显式给 5，让表单显示的默认值与落库值一致
    dataScope: 5,
    remark: ''
  }
}

const form = reactive<RoleSaveReqVO>(emptyForm())

const isUpdate = computed(() => !!form.id)
const isSystemRole = computed(() => form.id === SUPER_ADMIN_ROLE_ID)

const rules: FormRules = {
  name: [
    { required: true, message: '请输入角色名称', trigger: 'blur' },
    { max: 30, message: '角色名称长度不能超过 30 个字符', trigger: 'blur' }
  ],
  code: [
    { required: true, message: '请输入角色标识', trigger: 'blur' },
    { max: 30, message: '角色标识长度不能超过 30 个字符', trigger: 'blur' }
  ]
}

function handleCreate() {
  Object.assign(form, emptyForm())
  dialogVisible.value = true
  nextTick(() => {
    formRef.value?.clearValidate()
    menuTreeRef.value?.setCheckedKeys([])
  })
}

async function handleUpdate(row: RoleVO) {
  // 必须走 /get：列表接口不下发 menuIds（否则每一行都要查一次授权关系）
  const detail = await RoleApi.getRole(row.id)
  Object.assign(form, emptyForm(), {
    id: detail.id,
    name: detail.name,
    code: detail.code,
    sort: detail.sort ?? 0,
    status: detail.status ?? 0,
    dataScope: detail.dataScope ?? 5,
    remark: detail.remark || ''
  })
  dialogVisible.value = true
  // 菜单树可能是首屏还在加载中（或上一轮请求失败过），勾选前必须确保树已有数据，
  // 否则 setCheckedKeys 作用在一个空树上，界面显示成「一个都没勾」
  if (menuTree.value.length === 0) {
    await loadMenuTree()
  }
  await nextTick()
  formRef.value?.clearValidate()
  // 只勾叶子：父节点会被 el-tree 自动算成「全选/半选」，手工塞父节点会级联放大授权
  const leafIds = collectLeafIds(menuTree.value)
  menuTreeRef.value?.setCheckedKeys((detail.menuIds || []).map(Number).filter((id) => leafIds.has(id)))
}

async function handleSubmit() {
  try {
    await formRef.value?.validate()
  } catch {
    return
  }
  submitting.value = true
  try {
    const tree = menuTreeRef.value
    // 半选的父节点必须一起提交，见文件头的说明
    const checked = (tree?.getCheckedKeys() || []) as number[]
    const halfChecked = (tree?.getHalfCheckedKeys() || []) as number[]
    const data: RoleSaveReqVO = { ...form, menuIds: [...checked, ...halfChecked] }

    if (data.id) {
      await RoleApi.updateRole(data)
    } else {
      await RoleApi.createRole(data)
    }
    ElMessage.success(data.id ? '修改成功' : '新增成功')
    dialogVisible.value = false
    loadList()
  } finally {
    submitting.value = false
  }
}

// ---------------------------------------------------------------------------
// 状态切换 / 删除
// ---------------------------------------------------------------------------

async function handleStatusChange(row: RoleVO) {
  try {
    await RoleApi.updateRoleStatus({ id: row.id, status: row.status as number })
    ElMessage.success('状态更新成功')
  } catch {
    // 失败时把开关拨回原值，避免界面状态与库里不一致
    row.status = row.status === 0 ? 1 : 0
  }
}

function handleDelete(row: RoleVO) {
  ElMessageBox.confirm(`确认删除角色「${row.name}」吗？`, '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  })
    .then(async () => {
      await RoleApi.deleteRole(row.id)
      ElMessage.success('删除成功')
      loadList()
    })
    .catch(() => {})
}

function handleDeleteList() {
  if (selectedIds.value.length === 0) {
    ElMessage.warning('请先勾选要删除的角色')
    return
  }
  ElMessageBox.confirm(`确认删除选中的 ${selectedIds.value.length} 个角色吗？`, '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  })
    .then(async () => {
      await RoleApi.deleteRoleList(selectedIds.value)
      ElMessage.success('删除成功')
      selectedIds.value = []
      loadList()
    })
    .catch(() => {})
}

async function handleExport() {
  await RoleApi.exportRole(queryParams)
}

onMounted(() => {
  loadList()
  loadMenuTree()
})
</script>

<template>
  <div class="app-container">
    <el-card shadow="never" class="mb-3">
      <el-form :model="queryParams" inline class="search-form">
        <el-form-item label="角色名称">
          <el-input v-model="queryParams.name" placeholder="请输入角色名称" clearable style="width: 180px" />
        </el-form-item>
        <el-form-item label="角色标识">
          <el-input v-model="queryParams.code" placeholder="请输入角色标识" clearable style="width: 180px" />
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="queryParams.status" placeholder="全部" clearable style="width: 120px">
            <el-option label="开启" :value="0" />
            <el-option label="停用" :value="1" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearch">搜索</el-button>
          <el-button @click="handleReset">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <el-card shadow="never">
      <div class="mb-3">
        <el-button v-hasPermi="'system:role:create'" type="primary" @click="handleCreate">新增</el-button>
        <el-button v-hasPermi="'system:role:delete'" type="danger" plain @click="handleDeleteList">
          批量删除
        </el-button>
        <el-button v-hasPermi="'system:role:export'" plain @click="handleExport">导出</el-button>
        <el-button plain @click="loadList">刷新</el-button>
      </div>

      <el-table
        v-loading="loading"
        :data="list"
        border
        stripe
        size="small"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="45" align="center" />
        <el-table-column type="index" label="#" width="50" align="center" />
        <el-table-column prop="name" label="角色名称" min-width="140">
          <template #default="{ row }">
            {{ row.name }}
            <el-tag v-if="row.id === SUPER_ADMIN_ROLE_ID" type="warning" size="small" class="ml-1">内置</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="code" label="角色标识" min-width="140" />
        <el-table-column prop="sort" label="显示顺序" width="100" align="center" />
        <el-table-column label="状态" width="90" align="center">
          <template #default="{ row }">
            <el-switch
              v-model="row.status"
              :active-value="0"
              :inactive-value="1"
              :disabled="row.id === SUPER_ADMIN_ROLE_ID"
              @change="handleStatusChange(row)"
            />
          </template>
        </el-table-column>
        <el-table-column label="数据范围" width="120" align="center">
          <template #default="{ row }">
            <DictTag dict-type="system_data_scope" :value="row.dataScope" />
          </template>
        </el-table-column>
        <el-table-column prop="remark" label="备注" min-width="140" show-overflow-tooltip />
        <el-table-column label="创建时间" width="170">
          <template #default="{ row }">{{ formatDateTime(row.createTime) }}</template>
        </el-table-column>
        <el-table-column label="操作" width="130" fixed="right" align="center">
          <template #default="{ row }">
            <el-button v-hasPermi="'system:role:update'" link type="primary" @click="handleUpdate(row)">
              编辑
            </el-button>
            <el-button
              v-hasPermi="'system:role:delete'"
              link
              type="danger"
              :disabled="row.id === SUPER_ADMIN_ROLE_ID"
              @click="handleDelete(row)"
            >
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
        v-model:current-page="queryParams.pageNo"
        v-model:page-size="queryParams.pageSize"
        :total="total"
        :page-sizes="[10, 20, 50, 100]"
        layout="total, sizes, prev, pager, next, jumper"
        class="mt-3 justify-end"
        @current-change="loadList"
        @size-change="handleSearch"
      />
    </el-card>

    <el-dialog v-model="dialogVisible" :title="isUpdate ? '修改角色' : '新增角色'" width="640px">
      <el-form ref="formRef" :model="form" :rules="rules" label-width="90px">
        <el-form-item label="角色名称" prop="name">
          <el-input v-model="form.name" placeholder="请输入角色名称" maxlength="30" />
        </el-form-item>
        <el-form-item label="角色标识" prop="code">
          <!-- 内置角色的标识是后端常量（super_admin）的锚点，改了会失去超管语义 -->
          <el-input v-model="form.code" placeholder="如 park_operator" maxlength="30" :disabled="isSystemRole" />
        </el-form-item>
        <el-form-item label="显示顺序" prop="sort">
          <el-input-number v-model="form.sort" :min="0" controls-position="right" />
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-radio-group v-model="form.status" :disabled="isSystemRole">
            <el-radio :label="0">开启</el-radio>
            <el-radio :label="1">停用</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="数据范围" prop="dataScope">
          <el-select v-model="form.dataScope" placeholder="请选择数据范围" class="w-full">
            <el-option label="全部" :value="1" />
            <el-option label="自定义" :value="2" />
            <el-option label="本组织" :value="3" />
            <el-option label="本组织及以下" :value="4" />
            <el-option label="仅本人" :value="5" />
          </el-select>
        </el-form-item>
        <el-form-item label="菜单权限" prop="menuIds">
          <div class="menu-tree-box">
            <el-tree
              ref="menuTreeRef"
              :data="menuTree"
              :props="{ label: 'name', children: 'children' }"
              node-key="id"
              show-checkbox
              default-expand-all
            />
          </div>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input v-model="form.remark" type="textarea" :rows="2" maxlength="500" placeholder="请输入备注" />
        </el-form-item>
      </el-form>

      <template #footer>
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" :loading="submitting" @click="handleSubmit">确定</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<style lang="scss" scoped>
.menu-tree-box {
  width: 100%;
  max-height: 320px;
  overflow: auto;
  border: 1px solid var(--el-border-color);
  border-radius: 4px;
  padding: 4px 8px;
}
</style>