1216 lines
36 KiB
Vue
1216 lines
36 KiB
Vue
<template>
|
||
<ArtTableFullScreen>
|
||
<div class="role-page" id="table-full-screen">
|
||
<!-- 搜索栏 -->
|
||
<ArtSearchBar
|
||
v-model:filter="searchForm"
|
||
:items="searchFormItems"
|
||
:show-expand="false"
|
||
@reset="handleReset"
|
||
@search="handleSearch"
|
||
></ArtSearchBar>
|
||
|
||
<ElCard shadow="never" class="art-table-card">
|
||
<!-- 表格头部 -->
|
||
<ArtTableHeader
|
||
:columnList="columnOptions"
|
||
v-model:columns="columnChecks"
|
||
@refresh="handleRefresh"
|
||
>
|
||
<template #left>
|
||
<ElButton @click="showDialog('add')" v-permission="'role:add'">新增角色</ElButton>
|
||
</template>
|
||
</ArtTableHeader>
|
||
|
||
<!-- 表格 -->
|
||
<ArtTable
|
||
ref="tableRef"
|
||
row-key="ID"
|
||
:loading="loading"
|
||
:data="roleList"
|
||
:currentPage="pagination.page"
|
||
:pageSize="pagination.pageSize"
|
||
:total="pagination.total"
|
||
:marginTop="10"
|
||
@size-change="handleSizeChange"
|
||
@current-change="handleCurrentChange"
|
||
>
|
||
<template #default>
|
||
<ElTableColumn v-for="col in columns" :key="col.prop || col.type" v-bind="col" />
|
||
</template>
|
||
</ArtTable>
|
||
|
||
<!-- 新增/编辑对话框 -->
|
||
<ElDialog
|
||
v-model="dialogVisible"
|
||
:title="dialogType === 'add' ? '新增角色' : '编辑角色'"
|
||
width="30%"
|
||
>
|
||
<ElForm ref="formRef" :model="form" :rules="rules" label-width="120px">
|
||
<ElFormItem label="角色名称" prop="role_name">
|
||
<ElInput v-model="form.role_name" placeholder="请输入角色名称" />
|
||
</ElFormItem>
|
||
<ElFormItem label="角色描述" prop="role_desc">
|
||
<ElInput
|
||
v-model="form.role_desc"
|
||
type="textarea"
|
||
:rows="3"
|
||
placeholder="请输入角色描述"
|
||
/>
|
||
</ElFormItem>
|
||
<ElFormItem label="角色类型" prop="role_type">
|
||
<ElSelect
|
||
v-model="form.role_type"
|
||
placeholder="请选择角色类型"
|
||
style="width: 100%"
|
||
:disabled="dialogType === 'edit'"
|
||
>
|
||
<ElOption
|
||
v-for="item in ROLE_TYPE_OPTIONS"
|
||
:key="item.value"
|
||
:label="item.label"
|
||
:value="item.value"
|
||
/>
|
||
</ElSelect>
|
||
</ElFormItem>
|
||
<ElFormItem label="状态">
|
||
<ElSwitch
|
||
v-model="form.status"
|
||
:active-value="CommonStatus.ENABLED"
|
||
:inactive-value="CommonStatus.DISABLED"
|
||
/>
|
||
</ElFormItem>
|
||
</ElForm>
|
||
<template #footer>
|
||
<div class="dialog-footer">
|
||
<ElButton @click="dialogVisible = false">取消</ElButton>
|
||
<ElButton type="primary" @click="handleSubmit(formRef)" :loading="submitLoading">
|
||
提交
|
||
</ElButton>
|
||
</div>
|
||
</template>
|
||
</ElDialog>
|
||
|
||
<!-- 分配权限对话框 -->
|
||
<ElDialog v-model="permissionDialogVisible" width="800px">
|
||
<template #header>
|
||
<div class="dialog-header">
|
||
<span class="dialog-title">分配权限</span>
|
||
<div class="role-info">
|
||
<ElTag :type="currentRole.role_type === 1 ? 'primary' : 'success'" size="small">
|
||
{{ currentRole.role_type === 1 ? '平台角色' : '客户角色' }}
|
||
</ElTag>
|
||
<span class="role-name">{{ currentRole.role_name }}</span>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
<div class="permission-tree-transfer-container">
|
||
<!-- 左侧：可分配权限树 -->
|
||
<div class="transfer-panel">
|
||
<div class="panel-header">
|
||
<span class="panel-title">可分配权限</span>
|
||
<ElInput
|
||
v-model="leftTreeFilter"
|
||
placeholder="搜索权限"
|
||
clearable
|
||
size="small"
|
||
style="width: 180px"
|
||
/>
|
||
</div>
|
||
<div class="panel-body">
|
||
<ElTree
|
||
ref="leftTreeRef"
|
||
:data="availablePermissions"
|
||
:props="{ children: 'children', label: 'label' }"
|
||
node-key="id"
|
||
show-checkbox
|
||
check-strictly
|
||
:filter-node-method="filterNode"
|
||
:default-expand-all="false"
|
||
:check-on-click-node="false"
|
||
@check="handleLeftTreeCheck"
|
||
class="permission-tree"
|
||
>
|
||
<template #default="{ node, data }">
|
||
<span style="display: flex; gap: 8px; align-items: center">
|
||
<span>{{ node.label }}</span>
|
||
<ElTag :type="data.perm_type === 1 ? 'info' : 'success'" size="small">
|
||
{{ data.perm_type === 1 ? '菜单' : '按钮' }}
|
||
</ElTag>
|
||
</span>
|
||
</template>
|
||
</ElTree>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 中间：操作按钮 -->
|
||
<div class="transfer-buttons">
|
||
<ElButton
|
||
type="primary"
|
||
:icon="'ArrowRight'"
|
||
@click="addPermissions"
|
||
:disabled="getLeftCheckedKeys().length === 0"
|
||
>
|
||
添加
|
||
</ElButton>
|
||
</div>
|
||
|
||
<!-- 右侧：已分配权限树 -->
|
||
<div class="transfer-panel">
|
||
<div class="panel-header">
|
||
<span class="panel-title">已分配权限</span>
|
||
<ElInput
|
||
v-model="rightTreeFilter"
|
||
placeholder="搜索权限"
|
||
clearable
|
||
size="small"
|
||
style="width: 180px"
|
||
/>
|
||
</div>
|
||
<div class="panel-body">
|
||
<ElTree
|
||
ref="rightTreeRef"
|
||
:data="assignedPermissions"
|
||
:props="{ children: 'children', label: 'label' }"
|
||
node-key="id"
|
||
:filter-node-method="filterNode"
|
||
:default-expand-all="false"
|
||
class="permission-tree permission-tree-with-action"
|
||
>
|
||
<template #default="{ node, data }">
|
||
<span class="tree-node-content">
|
||
<span class="tree-node-label">
|
||
<span>{{ node.label }}</span>
|
||
<ElTag :type="data.perm_type === 1 ? 'info' : 'success'" size="small">
|
||
{{ data.perm_type === 1 ? '菜单' : '按钮' }}
|
||
</ElTag>
|
||
</span>
|
||
<ElButton
|
||
type="danger"
|
||
size="small"
|
||
link
|
||
@click="removeSinglePermission(data)"
|
||
>
|
||
移除
|
||
</ElButton>
|
||
</span>
|
||
</template>
|
||
</ElTree>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<template #footer>
|
||
<div class="dialog-footer">
|
||
<ElButton @click="permissionDialogVisible = false">关闭</ElButton>
|
||
</div>
|
||
</template>
|
||
</ElDialog>
|
||
</ElCard>
|
||
</div>
|
||
</ArtTableFullScreen>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { h } from 'vue'
|
||
import { RoleService, PermissionService } from '@/api/modules'
|
||
import {
|
||
ElMessage,
|
||
ElMessageBox,
|
||
ElTag,
|
||
ElTree,
|
||
ElSwitch,
|
||
ElButton,
|
||
ElInput,
|
||
ElSelect,
|
||
ElOption
|
||
} from 'element-plus'
|
||
import type { FormInstance, FormRules } from 'element-plus'
|
||
import type { PlatformRole, PermissionTreeNode } from '@/types/api'
|
||
import type { SearchFormItem } from '@/types'
|
||
import { useCheckedColumns } from '@/composables/useCheckedColumns'
|
||
import { useAuth } from '@/composables/useAuth'
|
||
import { formatDateTime } from '@/utils/business/format'
|
||
import {
|
||
CommonStatus,
|
||
getStatusText,
|
||
ROLE_TYPE_OPTIONS,
|
||
getRoleTypeLabel
|
||
} from '@/config/constants'
|
||
|
||
defineOptions({ name: 'Role' })
|
||
|
||
const { hasAuth } = useAuth()
|
||
|
||
const dialogVisible = ref(false)
|
||
const permissionDialogVisible = ref(false)
|
||
const loading = ref(false)
|
||
const submitLoading = ref(false)
|
||
const tableRef = ref()
|
||
const leftTreeRef = ref()
|
||
const rightTreeRef = ref()
|
||
const currentRoleId = ref<number>(0)
|
||
const currentRole = ref<{ role_name: string; role_type: number }>({
|
||
role_name: '',
|
||
role_type: 1
|
||
})
|
||
const selectedPermissions = ref<number[]>([])
|
||
const originalPermissions = ref<number[]>([]) // 保存原始权限，用于对比
|
||
const availablePermissions = ref<any[]>([]) // 左侧可分配权限树数据
|
||
const assignedPermissions = ref<any[]>([]) // 右侧已分配权限树数据
|
||
const allPermissionsMap = ref<Map<number, any>>(new Map()) // 所有权限的映射表
|
||
const leftTreeFilter = ref('') // 左侧树搜索关键字
|
||
const rightTreeFilter = ref('') // 右侧树搜索关键字
|
||
const isHandlingCheck = ref(false) // 标志位:是否正在处理勾选事件
|
||
|
||
// 搜索表单初始值
|
||
const initialSearchState = {
|
||
role_name: '',
|
||
role_type: undefined as number | undefined,
|
||
status: undefined as number | undefined
|
||
}
|
||
|
||
// 搜索表单
|
||
const searchForm = reactive({ ...initialSearchState })
|
||
|
||
// 搜索表单配置
|
||
const searchFormItems: SearchFormItem[] = [
|
||
{
|
||
label: '角色名称',
|
||
prop: 'role_name',
|
||
type: 'input',
|
||
config: {
|
||
clearable: true,
|
||
placeholder: '请输入角色名称'
|
||
}
|
||
},
|
||
{
|
||
label: '角色类型',
|
||
prop: 'role_type',
|
||
type: 'select',
|
||
config: {
|
||
clearable: true,
|
||
placeholder: '请选择角色类型'
|
||
},
|
||
options: () => ROLE_TYPE_OPTIONS
|
||
},
|
||
{
|
||
label: '状态',
|
||
prop: 'status',
|
||
type: 'select',
|
||
config: {
|
||
clearable: true,
|
||
placeholder: '请选择状态'
|
||
},
|
||
options: () => [
|
||
{ label: '启用', value: 1 },
|
||
{ label: '禁用', value: 0 }
|
||
]
|
||
}
|
||
]
|
||
|
||
// 分页
|
||
const pagination = reactive({
|
||
page: 1,
|
||
pageSize: 20,
|
||
total: 0
|
||
})
|
||
|
||
// 列配置
|
||
const columnOptions = [
|
||
{ label: '角色名称', prop: 'role_name' },
|
||
{ label: '角色描述', prop: 'role_desc' },
|
||
{ label: '角色类型', prop: 'role_type' },
|
||
{ label: '状态', prop: 'status' },
|
||
{ label: '创建时间', prop: 'CreatedAt' }
|
||
]
|
||
|
||
const formRef = ref<FormInstance>()
|
||
|
||
const rules = reactive<FormRules>({
|
||
role_name: [
|
||
{ required: true, message: '请输入角色名称', trigger: 'blur' },
|
||
{ min: 2, max: 50, message: '长度在 2 到 50 个字符', trigger: 'blur' }
|
||
],
|
||
role_desc: [{ max: 200, message: '描述不能超过200个字符', trigger: 'blur' }],
|
||
role_type: [{ required: true, message: '请选择角色类型', trigger: 'change' }]
|
||
})
|
||
|
||
const form = reactive<any>({
|
||
id: 0,
|
||
role_name: '',
|
||
role_desc: '',
|
||
role_type: 1,
|
||
status: CommonStatus.ENABLED
|
||
})
|
||
|
||
const roleList = ref<PlatformRole[]>([])
|
||
|
||
// 动态列配置
|
||
const { columnChecks, columns } = useCheckedColumns(() => [
|
||
{
|
||
prop: 'role_name',
|
||
label: '角色名称',
|
||
width: 180
|
||
},
|
||
{
|
||
prop: 'role_type',
|
||
label: '角色类型',
|
||
width: 100,
|
||
formatter: (row: any) => {
|
||
return h(ElTag, { type: row.role_type === 1 ? 'primary' : 'success' }, () =>
|
||
getRoleTypeLabel(row.role_type)
|
||
)
|
||
}
|
||
},
|
||
{
|
||
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,
|
||
disabled: !hasAuth('role:update_status'),
|
||
'onUpdate:modelValue': (val: string | number | boolean) =>
|
||
handleStatusChange(row, val as number)
|
||
})
|
||
}
|
||
},
|
||
{
|
||
prop: 'role_desc',
|
||
label: '角色描述'
|
||
},
|
||
{
|
||
prop: 'CreatedAt',
|
||
label: '创建时间',
|
||
width: 180,
|
||
formatter: (row: any) => formatDateTime(row.CreatedAt)
|
||
},
|
||
{
|
||
prop: 'actions',
|
||
label: '操作',
|
||
width: 220,
|
||
fixed: 'right',
|
||
formatter: (row: any) => {
|
||
const buttons: any[] = []
|
||
|
||
if (hasAuth('role:permission')) {
|
||
buttons.push(
|
||
h(
|
||
ElButton,
|
||
{
|
||
type: 'primary',
|
||
link: true,
|
||
onClick: () => showPermissionDialog(row)
|
||
},
|
||
() => '分配权限'
|
||
)
|
||
)
|
||
}
|
||
|
||
if (hasAuth('role:edit')) {
|
||
buttons.push(
|
||
h(
|
||
ElButton,
|
||
{
|
||
type: 'primary',
|
||
link: true,
|
||
onClick: () => showDialog('edit', row)
|
||
},
|
||
() => '编辑'
|
||
)
|
||
)
|
||
}
|
||
|
||
if (hasAuth('role:delete')) {
|
||
buttons.push(
|
||
h(
|
||
ElButton,
|
||
{
|
||
type: 'danger',
|
||
link: true,
|
||
onClick: () => deleteRole(row)
|
||
},
|
||
() => '删除'
|
||
)
|
||
)
|
||
}
|
||
|
||
return h('div', { style: 'display: flex; gap: 8px;' }, buttons)
|
||
}
|
||
}
|
||
])
|
||
|
||
onMounted(() => {
|
||
getTableData()
|
||
})
|
||
|
||
// 监听搜索关键字变化
|
||
watch(leftTreeFilter, (val) => {
|
||
leftTreeRef.value?.filter(val)
|
||
})
|
||
|
||
watch(rightTreeFilter, (val) => {
|
||
rightTreeRef.value?.filter(val)
|
||
})
|
||
|
||
// 树节点过滤方法
|
||
const filterNode = (value: string, data: any) => {
|
||
if (!value) return true
|
||
return data.label.toLowerCase().includes(value.toLowerCase())
|
||
}
|
||
|
||
// 更新父节点的勾选状态(计算应该半选的父节点)
|
||
const updateParentCheckStatus = (checkedKeys: number[]) => {
|
||
const checkedSet = new Set(checkedKeys)
|
||
const parentIdsToHalfCheck = new Set<number>()
|
||
|
||
// 递归检查节点的子节点勾选状态
|
||
const checkNode = (node: any): { allChecked: boolean; someChecked: boolean } => {
|
||
if (!node.children || node.children.length === 0) {
|
||
// 叶子节点
|
||
return {
|
||
allChecked: checkedSet.has(node.id),
|
||
someChecked: checkedSet.has(node.id)
|
||
}
|
||
}
|
||
|
||
// 有子节点的节点
|
||
let allChecked = true
|
||
let someChecked = false
|
||
|
||
for (const child of node.children) {
|
||
const childStatus = checkNode(child)
|
||
if (!childStatus.allChecked) {
|
||
allChecked = false
|
||
}
|
||
if (childStatus.someChecked) {
|
||
someChecked = true
|
||
}
|
||
}
|
||
|
||
// 当前节点被勾选
|
||
const currentNodeChecked = checkedSet.has(node.id)
|
||
|
||
// 判断父节点应该显示的状态:
|
||
// 1. 如果当前节点被勾选，但不是所有子节点都被勾选 -> 半选
|
||
// 2. 如果有子节点被勾选，但当前节点未被勾选 -> 半选
|
||
// 3. 如果所有子节点都被勾选且当前节点也被勾选 -> 全选
|
||
if (currentNodeChecked) {
|
||
// 当前节点被勾选
|
||
if (!allChecked) {
|
||
// 但不是所有子节点都被勾选 -> 半选
|
||
parentIdsToHalfCheck.add(node.id)
|
||
}
|
||
// 如果 allChecked，则为全选，不需要设置半选
|
||
} else if (someChecked) {
|
||
// 当前节点未勾选，但有子节点被勾选 -> 半选
|
||
parentIdsToHalfCheck.add(node.id)
|
||
}
|
||
|
||
return {
|
||
allChecked: allChecked && currentNodeChecked,
|
||
someChecked: someChecked || currentNodeChecked
|
||
}
|
||
}
|
||
|
||
// 检查所有顶层节点
|
||
availablePermissions.value.forEach((node) => checkNode(node))
|
||
|
||
return Array.from(parentIdsToHalfCheck)
|
||
}
|
||
|
||
// 判断节点是否为一级菜单（没有父节点或parent_id为0/null）
|
||
const isFirstLevelMenu = (nodeId: number): boolean => {
|
||
const node = allPermissionsMap.value.get(nodeId)
|
||
if (!node) return false
|
||
return !node.parent_id || node.parent_id === 0
|
||
}
|
||
|
||
// 获取节点的所有子节点ID（递归）
|
||
const getAllChildrenIds = (nodeId: number): number[] => {
|
||
const childrenIds: number[] = []
|
||
|
||
const collectChildren = (id: number) => {
|
||
const node = allPermissionsMap.value.get(id)
|
||
if (!node || !node.children || node.children.length === 0) return
|
||
|
||
node.children.forEach((child: any) => {
|
||
childrenIds.push(child.id)
|
||
collectChildren(child.id)
|
||
})
|
||
}
|
||
|
||
collectChildren(nodeId)
|
||
return childrenIds
|
||
}
|
||
|
||
// 上一次勾选的keys，用于判断是勾选还是取消勾选
|
||
const previousCheckedKeys = ref<number[]>([])
|
||
|
||
// 处理左侧树的勾选事件
|
||
const handleLeftTreeCheck = (data: any, checked: any) => {
|
||
if (isHandlingCheck.value) return
|
||
|
||
isHandlingCheck.value = true
|
||
|
||
try {
|
||
// 获取当前勾选的keys
|
||
let currentChecked = checked.checkedKeys as number[]
|
||
|
||
// 判断是勾选还是取消勾选（通过对比当前和之前的keys）
|
||
const isChecking =
|
||
currentChecked.includes(data.id) && !previousCheckedKeys.value.includes(data.id)
|
||
const isUnchecking =
|
||
!currentChecked.includes(data.id) && previousCheckedKeys.value.includes(data.id)
|
||
|
||
if (isChecking) {
|
||
// 正在勾选节点
|
||
// 判断当前节点是否为一级菜单
|
||
if (isFirstLevelMenu(data.id)) {
|
||
// 一级菜单：自动勾选所有子节点（包括所有子菜单和按钮）
|
||
const childrenIds = getAllChildrenIds(data.id)
|
||
const newCheckedKeys = [...new Set([...currentChecked, ...childrenIds])]
|
||
|
||
// 设置新的勾选状态
|
||
leftTreeRef.value?.setCheckedKeys(newCheckedKeys, false)
|
||
currentChecked = newCheckedKeys
|
||
} else {
|
||
// 二级及以下菜单/按钮：只勾选自己，不勾选子节点
|
||
const childrenIds = getAllChildrenIds(data.id)
|
||
// 从当前勾选中移除所有子节点（如果有的话）
|
||
const newCheckedKeys = currentChecked.filter((id) => !childrenIds.includes(id))
|
||
|
||
// 设置新的勾选状态
|
||
leftTreeRef.value?.setCheckedKeys(newCheckedKeys, false)
|
||
currentChecked = newCheckedKeys
|
||
}
|
||
} else if (isUnchecking) {
|
||
// 正在取消勾选节点
|
||
// 判断当前节点是否为一级菜单
|
||
if (isFirstLevelMenu(data.id)) {
|
||
// 一级菜单：自动取消所有子节点（包括所有子菜单和按钮）
|
||
const childrenIds = getAllChildrenIds(data.id)
|
||
const newCheckedKeys = currentChecked.filter((id) => !childrenIds.includes(id))
|
||
|
||
// 设置新的勾选状态
|
||
leftTreeRef.value?.setCheckedKeys(newCheckedKeys, false)
|
||
currentChecked = newCheckedKeys
|
||
}
|
||
// 二级及以下菜单/按钮：直接取消勾选，不需要额外处理
|
||
}
|
||
|
||
// 更新上一次勾选的keys
|
||
previousCheckedKeys.value = [...currentChecked]
|
||
|
||
// 计算应该半选的父节点
|
||
const halfCheckedIds = updateParentCheckStatus(currentChecked)
|
||
|
||
// 使用内部API直接操作树的半选状态
|
||
nextTick(() => {
|
||
if (leftTreeRef.value && leftTreeRef.value.store) {
|
||
// 清除所有半选状态
|
||
Object.values(leftTreeRef.value.store.nodesMap).forEach((node: any) => {
|
||
node.indeterminate = false
|
||
})
|
||
|
||
// 设置应该半选的节点
|
||
halfCheckedIds.forEach((id: number) => {
|
||
const node = leftTreeRef.value.store.nodesMap[id]
|
||
if (node) {
|
||
node.indeterminate = true
|
||
}
|
||
})
|
||
}
|
||
})
|
||
} finally {
|
||
isHandlingCheck.value = false
|
||
}
|
||
}
|
||
|
||
// 构建权限树数据结构（只包含启用的权限）
|
||
const buildTreeData = (treeNodes: PermissionTreeNode[]): any[] => {
|
||
return treeNodes
|
||
.filter((node) => node.status === 1) // 只显示启用的权限
|
||
.map((node) => ({
|
||
id: node.id,
|
||
label: node.perm_name,
|
||
perm_type: node.perm_type,
|
||
status: node.status ?? 1,
|
||
children:
|
||
node.children && node.children.length > 0 ? buildTreeData(node.children) : undefined
|
||
}))
|
||
}
|
||
|
||
// 构建权限映射表（包括所有节点和子节点）
|
||
const buildPermissionMap = (treeNodes: PermissionTreeNode[], map: Map<number, any>) => {
|
||
treeNodes.forEach((node) => {
|
||
map.set(node.id, node)
|
||
if (node.children && node.children.length > 0) {
|
||
buildPermissionMap(node.children, map)
|
||
}
|
||
})
|
||
}
|
||
|
||
// 根据权限ID列表过滤树节点（包含指定ID的节点）
|
||
const filterTreeByIds = (treeNodes: any[], ids: number[]): any[] => {
|
||
const result: any[] = []
|
||
|
||
treeNodes.forEach((node) => {
|
||
if (ids.includes(node.id)) {
|
||
const newNode = { ...node }
|
||
if (node.children && node.children.length > 0) {
|
||
newNode.children = filterTreeByIds(node.children, ids)
|
||
}
|
||
result.push(newNode)
|
||
} else if (node.children && node.children.length > 0) {
|
||
const filteredChildren = filterTreeByIds(node.children, ids)
|
||
if (filteredChildren.length > 0) {
|
||
result.push({
|
||
...node,
|
||
children: filteredChildren
|
||
})
|
||
}
|
||
}
|
||
})
|
||
|
||
return result
|
||
}
|
||
|
||
// 根据权限ID列表设置树节点的禁用状态
|
||
// 同时禁用状态为禁用(status=0)的权限
|
||
const setTreeNodesDisabled = (treeNodes: any[], idsToDisable: number[]): any[] => {
|
||
return treeNodes.map((node) => {
|
||
const newNode = {
|
||
...node,
|
||
// 如果已分配或状态为禁用,则禁用该节点
|
||
disabled: idsToDisable.includes(node.id) || node.status === 0
|
||
}
|
||
|
||
if (node.children && node.children.length > 0) {
|
||
newNode.children = setTreeNodesDisabled(node.children, idsToDisable)
|
||
}
|
||
|
||
return newNode
|
||
})
|
||
}
|
||
|
||
// 保存原始权限树数据
|
||
const originalPermissionTree = ref<PermissionTreeNode[]>([])
|
||
|
||
// 加载所有权限树
|
||
const loadAllPermissions = async () => {
|
||
try {
|
||
const res = await PermissionService.getPermissionTree()
|
||
if (res.code === 0) {
|
||
const treeData = res.data || []
|
||
|
||
// 保存原始树数据
|
||
originalPermissionTree.value = treeData
|
||
|
||
// 构建权限映射表
|
||
const map = new Map()
|
||
buildPermissionMap(treeData, map)
|
||
allPermissionsMap.value = map
|
||
|
||
// 构建树形数据
|
||
const fullTreeData = buildTreeData(treeData)
|
||
|
||
// 左侧显示所有权限，但已分配的权限设置为禁用
|
||
availablePermissions.value = setTreeNodesDisabled(
|
||
JSON.parse(JSON.stringify(fullTreeData)),
|
||
selectedPermissions.value
|
||
)
|
||
|
||
// 右侧显示已分配的权限
|
||
if (selectedPermissions.value.length > 0) {
|
||
assignedPermissions.value = filterTreeByIds(fullTreeData, selectedPermissions.value)
|
||
} else {
|
||
assignedPermissions.value = []
|
||
}
|
||
}
|
||
} catch (error) {
|
||
console.error('获取权限树失败:', error)
|
||
}
|
||
}
|
||
|
||
// 获取左侧树完全勾选的节点（不包括半选节点）
|
||
const getLeftCheckedKeys = (): number[] => {
|
||
if (!leftTreeRef.value) return []
|
||
return leftTreeRef.value.getCheckedKeys(false)
|
||
}
|
||
|
||
// 获取节点的所有父节点ID
|
||
const getParentNodeIds = (nodeId: number): number[] => {
|
||
const parentIds: number[] = []
|
||
|
||
// 在原始权限树中递归查找父节点
|
||
const findInTree = (
|
||
treeNodes: PermissionTreeNode[],
|
||
targetId: number,
|
||
parentId?: number
|
||
): number | null => {
|
||
for (const node of treeNodes) {
|
||
if (node.id === targetId) {
|
||
return parentId || null
|
||
}
|
||
if (node.children && node.children.length > 0) {
|
||
const found = findInTree(node.children, targetId, node.id)
|
||
if (found !== null) return found
|
||
}
|
||
}
|
||
return null
|
||
}
|
||
|
||
// 递归向上查找所有父节点
|
||
const findAllParents = (currentId: number) => {
|
||
const parentId = findInTree(originalPermissionTree.value, currentId)
|
||
if (parentId) {
|
||
parentIds.push(parentId)
|
||
findAllParents(parentId)
|
||
}
|
||
}
|
||
|
||
findAllParents(nodeId)
|
||
return parentIds
|
||
}
|
||
|
||
// 获取左侧树勾选的节点（包括必要的父节点，用于提交服务器）
|
||
const getLeftCheckedKeysWithHalf = (): number[] => {
|
||
if (!leftTreeRef.value) return []
|
||
const checkedKeys = leftTreeRef.value.getCheckedKeys(false)
|
||
const allIds = new Set<number>(checkedKeys)
|
||
|
||
// 为每个勾选的节点找到所有父节点
|
||
checkedKeys.forEach((key: number) => {
|
||
const parents = getParentNodeIds(key)
|
||
parents.forEach((parentId) => allIds.add(parentId))
|
||
})
|
||
|
||
return Array.from(allIds)
|
||
}
|
||
|
||
// 添加权限
|
||
const addPermissions = async () => {
|
||
const checkedKeys = getLeftCheckedKeys()
|
||
if (checkedKeys.length === 0) return
|
||
|
||
try {
|
||
// 提交到服务器时包含勾选和半选节点
|
||
const keysToSubmit = getLeftCheckedKeysWithHalf()
|
||
await RoleService.assignPermissions(currentRoleId.value, keysToSubmit)
|
||
|
||
// 本地只记录完全勾选的节点
|
||
selectedPermissions.value = [...new Set([...selectedPermissions.value, ...checkedKeys])]
|
||
|
||
// 重新构建左右两侧树
|
||
const fullTreeData = buildTreeData(originalPermissionTree.value)
|
||
|
||
// 左侧显示所有权限，但已分配的权限设置为禁用
|
||
availablePermissions.value = setTreeNodesDisabled(
|
||
JSON.parse(JSON.stringify(fullTreeData)),
|
||
selectedPermissions.value
|
||
)
|
||
|
||
// 右侧显示已分配的权限
|
||
assignedPermissions.value = filterTreeByIds(fullTreeData, selectedPermissions.value)
|
||
|
||
// 清空左侧树的勾选状态
|
||
leftTreeRef.value?.setCheckedKeys([], false)
|
||
previousCheckedKeys.value = []
|
||
|
||
ElMessage.success('权限添加成功')
|
||
} catch (error) {
|
||
console.error('添加权限失败:', error)
|
||
ElMessage.error('权限添加失败')
|
||
}
|
||
}
|
||
|
||
// 检查节点是否有子节点（子菜单或按钮）
|
||
const hasChildren = (data: any): boolean => {
|
||
return data.children && data.children.length > 0
|
||
}
|
||
|
||
// 移除单个权限
|
||
const removeSinglePermission = async (data: any) => {
|
||
// 检查是否有子菜单或按钮
|
||
if (hasChildren(data)) {
|
||
ElMessage.warning('该权限下还有子菜单或按钮，请先移除子项后再移除此权限')
|
||
return
|
||
}
|
||
|
||
try {
|
||
// 保存右侧树的展开节点
|
||
const expandedKeys = rightTreeRef.value?.store?.nodesMap
|
||
? Object.keys(rightTreeRef.value.store.nodesMap)
|
||
.filter((key) => rightTreeRef.value.store.nodesMap[key].expanded)
|
||
.map((key) => Number(key))
|
||
: []
|
||
|
||
await RoleService.removePermission(currentRoleId.value, data.id)
|
||
|
||
// 更新已选权限列表
|
||
selectedPermissions.value = selectedPermissions.value.filter((id) => id !== data.id)
|
||
|
||
// 重新构建左右两侧树
|
||
const fullTreeData = buildTreeData(originalPermissionTree.value)
|
||
|
||
// 左侧显示所有权限，但已分配的权限设置为禁用
|
||
availablePermissions.value = setTreeNodesDisabled(
|
||
JSON.parse(JSON.stringify(fullTreeData)),
|
||
selectedPermissions.value
|
||
)
|
||
|
||
// 右侧显示已分配的权限
|
||
if (selectedPermissions.value.length > 0) {
|
||
assignedPermissions.value = filterTreeByIds(fullTreeData, selectedPermissions.value)
|
||
} else {
|
||
assignedPermissions.value = []
|
||
}
|
||
|
||
// 等待DOM更新后恢复展开状态
|
||
await nextTick()
|
||
if (rightTreeRef.value && expandedKeys.length > 0) {
|
||
expandedKeys.forEach((key) => {
|
||
const node = rightTreeRef.value.store.nodesMap[key]
|
||
if (node && !node.isLeaf) {
|
||
node.expanded = true
|
||
}
|
||
})
|
||
}
|
||
|
||
ElMessage.success('权限移除成功')
|
||
} catch (error) {
|
||
console.error('移除权限失败:', error)
|
||
ElMessage.error('权限移除失败')
|
||
}
|
||
}
|
||
|
||
// 显示分配权限对话框
|
||
const showPermissionDialog = async (row: PlatformRole) => {
|
||
currentRoleId.value = row.ID
|
||
currentRole.value = {
|
||
role_name: row.role_name,
|
||
role_type: row.role_type
|
||
}
|
||
selectedPermissions.value = []
|
||
originalPermissions.value = []
|
||
previousCheckedKeys.value = []
|
||
leftTreeFilter.value = ''
|
||
rightTreeFilter.value = ''
|
||
|
||
try {
|
||
// 加载当前角色的权限
|
||
const res = await RoleService.getRolePermissions(row.ID)
|
||
|
||
if (res.code === 0 || Array.isArray(res.data)) {
|
||
// 提取权限ID数组
|
||
const permissions = res.data || []
|
||
|
||
if (Array.isArray(permissions) && permissions.length > 0) {
|
||
// 如果返回的是权限对象数组，提取ID或id字段
|
||
if (typeof permissions[0] === 'object') {
|
||
// 优先使用ID字段，如果没有则使用id字段
|
||
if ('ID' in permissions[0]) {
|
||
selectedPermissions.value = permissions.map((perm: any) => perm.ID)
|
||
} else if ('id' in permissions[0]) {
|
||
selectedPermissions.value = permissions.map((perm: any) => perm.id)
|
||
}
|
||
} else {
|
||
// 如果返回的是ID数组
|
||
selectedPermissions.value = permissions
|
||
}
|
||
}
|
||
|
||
// 保存原始权限，用于后续对比
|
||
originalPermissions.value = [...selectedPermissions.value]
|
||
}
|
||
|
||
// 每次打开对话框时重新加载最新的权限列表
|
||
await loadAllPermissions()
|
||
|
||
// 数据加载完成后再打开对话框
|
||
permissionDialogVisible.value = true
|
||
} catch (error) {
|
||
console.error('获取角色权限失败:', error)
|
||
}
|
||
}
|
||
|
||
// 获取角色列表
|
||
const getTableData = async () => {
|
||
loading.value = true
|
||
try {
|
||
const params = {
|
||
page: pagination.page,
|
||
pageSize: pagination.pageSize,
|
||
role_name: searchForm.role_name || undefined,
|
||
role_type: searchForm.role_type,
|
||
status: searchForm.status
|
||
}
|
||
const res = await RoleService.getRoles(params)
|
||
if (res.code === 0) {
|
||
roleList.value = res.data.items || []
|
||
pagination.total = res.data.total || 0
|
||
}
|
||
} catch (error) {
|
||
console.error(error)
|
||
} finally {
|
||
loading.value = false
|
||
}
|
||
}
|
||
|
||
// 重置搜索
|
||
const handleReset = () => {
|
||
Object.assign(searchForm, { ...initialSearchState })
|
||
pagination.page = 1
|
||
getTableData()
|
||
}
|
||
|
||
// 搜索
|
||
const handleSearch = () => {
|
||
pagination.page = 1
|
||
getTableData()
|
||
}
|
||
|
||
// 刷新表格
|
||
const handleRefresh = () => {
|
||
getTableData()
|
||
}
|
||
|
||
// 处理表格分页变化
|
||
const handleSizeChange = (newPageSize: number) => {
|
||
pagination.pageSize = newPageSize
|
||
getTableData()
|
||
}
|
||
|
||
const handleCurrentChange = (newCurrentPage: number) => {
|
||
pagination.page = newCurrentPage
|
||
getTableData()
|
||
}
|
||
|
||
const dialogType = ref('add')
|
||
|
||
// 显示新增/编辑对话框
|
||
const showDialog = (type: string, row?: any) => {
|
||
dialogVisible.value = true
|
||
dialogType.value = type
|
||
|
||
if (type === 'edit' && row) {
|
||
form.id = row.ID
|
||
form.role_name = row.role_name
|
||
form.role_desc = row.role_desc
|
||
form.role_type = row.role_type
|
||
form.status = row.status
|
||
} else {
|
||
form.id = 0
|
||
form.role_name = ''
|
||
form.role_desc = ''
|
||
form.role_type = 1
|
||
form.status = CommonStatus.ENABLED
|
||
}
|
||
}
|
||
|
||
// 删除角色
|
||
const deleteRole = (row: any) => {
|
||
ElMessageBox.confirm(`确定删除角色 ${row.role_name} 吗？`, '删除确认', {
|
||
confirmButtonText: '确定',
|
||
cancelButtonText: '取消',
|
||
type: 'error'
|
||
})
|
||
.then(async () => {
|
||
try {
|
||
await RoleService.deleteRole(row.ID)
|
||
ElMessage.success('删除成功')
|
||
await getTableData()
|
||
} catch (error) {
|
||
console.error(error)
|
||
}
|
||
})
|
||
.catch(() => {
|
||
// 用户取消删除
|
||
})
|
||
}
|
||
|
||
// 提交表单
|
||
const handleSubmit = async (formEl: FormInstance | undefined) => {
|
||
if (!formEl) return
|
||
|
||
await formEl.validate(async (valid) => {
|
||
if (valid) {
|
||
submitLoading.value = true
|
||
try {
|
||
if (dialogType.value === 'add') {
|
||
const data = {
|
||
role_name: form.role_name,
|
||
role_desc: form.role_desc,
|
||
role_type: form.role_type,
|
||
status: form.status
|
||
}
|
||
await RoleService.createRole(data)
|
||
ElMessage.success('新增成功')
|
||
} else {
|
||
// 更新角色时只发送允许的字段
|
||
const data = {
|
||
role_name: form.role_name,
|
||
role_desc: form.role_desc,
|
||
role_type: form.role_type,
|
||
status: form.status
|
||
}
|
||
await RoleService.updateRole(form.id, data)
|
||
ElMessage.success('修改成功')
|
||
}
|
||
|
||
dialogVisible.value = false
|
||
formEl.resetFields()
|
||
await getTableData()
|
||
} catch (error) {
|
||
console.error(error)
|
||
} finally {
|
||
submitLoading.value = false
|
||
}
|
||
}
|
||
})
|
||
}
|
||
|
||
// 状态切换
|
||
const handleStatusChange = async (row: any, newStatus: number) => {
|
||
const oldStatus = row.status
|
||
// 先更新UI
|
||
row.status = newStatus
|
||
try {
|
||
await RoleService.updateRoleStatus(row.ID, newStatus as 0 | 1)
|
||
ElMessage.success('状态切换成功')
|
||
} catch (error) {
|
||
// 切换失败，恢复原状态
|
||
row.status = oldStatus
|
||
console.error(error)
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.dialog-header {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
width: 100%;
|
||
|
||
.dialog-title {
|
||
font-size: 18px;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.role-info {
|
||
display: flex;
|
||
gap: 8px;
|
||
align-items: center;
|
||
|
||
.role-name {
|
||
font-size: 14px;
|
||
color: var(--el-text-color-regular);
|
||
}
|
||
}
|
||
}
|
||
|
||
.permission-tree-transfer-container {
|
||
display: flex;
|
||
gap: 20px;
|
||
align-items: stretch;
|
||
justify-content: space-between;
|
||
min-height: 500px;
|
||
padding: 20px 0;
|
||
|
||
.transfer-panel {
|
||
display: flex;
|
||
flex: 1;
|
||
flex-direction: column;
|
||
max-width: 340px;
|
||
overflow: hidden;
|
||
border: 1px solid var(--el-border-color);
|
||
border-radius: 4px;
|
||
|
||
.panel-header {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 12px 16px;
|
||
background: var(--el-fill-color-light);
|
||
border-bottom: 1px solid var(--el-border-color);
|
||
|
||
.panel-title {
|
||
font-size: 16px;
|
||
font-weight: 600;
|
||
color: var(--el-text-color-primary);
|
||
}
|
||
}
|
||
|
||
.panel-body {
|
||
flex: 1;
|
||
padding: 12px;
|
||
overflow-y: auto;
|
||
|
||
.permission-tree {
|
||
:deep(.el-tree-node) {
|
||
margin: 4px 0;
|
||
}
|
||
|
||
:deep(.el-tree-node__content) {
|
||
height: 36px;
|
||
padding-right: 8px;
|
||
line-height: 36px;
|
||
}
|
||
|
||
:deep(.el-tree-node__label) {
|
||
flex: 1;
|
||
}
|
||
}
|
||
|
||
.permission-tree-with-action {
|
||
:deep(.el-tree-node__content) {
|
||
height: auto;
|
||
min-height: 36px;
|
||
padding: 4px 8px 4px 0;
|
||
}
|
||
|
||
.tree-node-content {
|
||
display: flex;
|
||
gap: 8px;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
width: 100%;
|
||
|
||
.tree-node-label {
|
||
display: flex;
|
||
flex: 1;
|
||
gap: 8px;
|
||
align-items: center;
|
||
}
|
||
|
||
.el-button {
|
||
flex-shrink: 0;
|
||
margin-left: auto;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.transfer-buttons {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 12px;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: 0 10px;
|
||
|
||
.el-button {
|
||
width: 100px;
|
||
}
|
||
}
|
||
}
|
||
</style>
|