|
|
|
|
@ -1,110 +1,150 @@
|
|
|
|
|
<template>
|
|
|
|
|
<!-- 主卡片容器，包裹用于包裹整个角色管理页面内容 -->
|
|
|
|
|
<el-card class="main-card">
|
|
|
|
|
<!-- 页面标题，使用当前路由名称作为标题 -->
|
|
|
|
|
<div class="title">{{ this.$route.name }}</div>
|
|
|
|
|
|
|
|
|
|
<!-- 操作按钮和搜索区域容器 -->
|
|
|
|
|
<div class="operation-container">
|
|
|
|
|
<el-button type="primary" size="small" icon="el-icon-plus" @click="openMenuModel(null)"> 新增 </el-button>
|
|
|
|
|
<el-button
|
|
|
|
|
type="danger"
|
|
|
|
|
size="small"
|
|
|
|
|
icon="el-icon-delete"
|
|
|
|
|
:disabled="this.roleIds.length == 0"
|
|
|
|
|
@click="isDelete = true">
|
|
|
|
|
批量删除
|
|
|
|
|
</el-button>
|
|
|
|
|
<!-- 新增角色按钮 -->
|
|
|
|
|
<el-button type="primary" size="small" icon="el-icon-plus" @click="openModel(null)"> 新增 </el-button>
|
|
|
|
|
|
|
|
|
|
<!-- 搜索区域，居右显示 -->
|
|
|
|
|
<div style="margin-left: auto">
|
|
|
|
|
<!-- 搜索输入框，支持回车搜索 -->
|
|
|
|
|
<el-input
|
|
|
|
|
v-model="keywords"
|
|
|
|
|
prefix-icon="el-icon-search"
|
|
|
|
|
size="small"
|
|
|
|
|
placeholder="请输入角色名"
|
|
|
|
|
style="width: 200px"
|
|
|
|
|
@keyup.enter.native="searchRoles" />
|
|
|
|
|
<el-button type="primary" size="small" icon="el-icon-search" style="margin-left: 1rem" @click="searchRoles">
|
|
|
|
|
v-model="keywords"
|
|
|
|
|
prefix-icon="el-icon-search"
|
|
|
|
|
size="small"
|
|
|
|
|
placeholder="请输入角色名"
|
|
|
|
|
style="width: 200px"
|
|
|
|
|
@keyup.enter.native="listRoles" />
|
|
|
|
|
<!-- 搜索按钮 -->
|
|
|
|
|
<el-button type="primary" size="small" icon="el-icon-search" style="margin-left: 1rem" @click="listRoles">
|
|
|
|
|
搜索
|
|
|
|
|
</el-button>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- 角色列表表格，加载时显示loading状态，支持选择功能 -->
|
|
|
|
|
<el-table border :data="roles" @selection-change="selectionChange" v-loading="loading">
|
|
|
|
|
<!-- 选择列 -->
|
|
|
|
|
<el-table-column type="selection" width="55" />
|
|
|
|
|
<el-table-column prop="roleName" label="角色名" align="center" />
|
|
|
|
|
<el-table-column prop="roleLabel" label="权限标签" align="center">
|
|
|
|
|
|
|
|
|
|
<!-- 角色名称列 -->
|
|
|
|
|
<el-table-column prop="roleName" label="角色名称" align="center" />
|
|
|
|
|
|
|
|
|
|
<!-- 角色权限标识列 -->
|
|
|
|
|
<el-table-column prop="roleKey" label="权限标识" align="center" />
|
|
|
|
|
|
|
|
|
|
<!-- 角色排序列 -->
|
|
|
|
|
<el-table-column prop="roleSort" label="排序" align="center" />
|
|
|
|
|
|
|
|
|
|
<!-- 角色状态列，使用开关控制 -->
|
|
|
|
|
<el-table-column prop="status" label="状态" align="center" width="100">
|
|
|
|
|
<template slot-scope="scope">
|
|
|
|
|
<el-tag>
|
|
|
|
|
{{ scope.row.roleName }}
|
|
|
|
|
</el-tag>
|
|
|
|
|
<el-switch
|
|
|
|
|
v-model="scope.row.status"
|
|
|
|
|
active-color="#13ce66"
|
|
|
|
|
inactive-color="#F4F4F5"
|
|
|
|
|
:active-value="1" <!-- 1表示启用状态 -->
|
|
|
|
|
:inactive-value="0" <!-- 0表示禁用状态 -->
|
|
|
|
|
@change="changeStatus(scope.row)" /> <!-- 状态变化时触发的事件 -->
|
|
|
|
|
</template>
|
|
|
|
|
</el-table-column>
|
|
|
|
|
<el-table-column prop="createTime" label="创建时间" width="150" align="center">
|
|
|
|
|
|
|
|
|
|
<!-- 创建时间列，使用date过滤器格式化时间 -->
|
|
|
|
|
<el-table-column prop="createTime" label="创建时间" align="center">
|
|
|
|
|
<template slot-scope="scope">
|
|
|
|
|
<i class="el-icon-time" style="margin-right: 5px" />
|
|
|
|
|
{{ scope.row.createTime | date }}
|
|
|
|
|
</template>
|
|
|
|
|
</el-table-column>
|
|
|
|
|
<el-table-column label="操作" align="center" width="220">
|
|
|
|
|
|
|
|
|
|
<!-- 操作列 -->
|
|
|
|
|
<el-table-column label="操作" align="center" width="200">
|
|
|
|
|
<template slot-scope="scope">
|
|
|
|
|
<el-button type="text" size="mini" @click="openMenuModel(scope.row)">
|
|
|
|
|
<i class="el-icon-edit" /> 菜单权限
|
|
|
|
|
</el-button>
|
|
|
|
|
<el-button type="text" size="mini" @click="openResourceModel(scope.row)">
|
|
|
|
|
<i class="el-icon-folder-checked" /> 资源权限
|
|
|
|
|
</el-button>
|
|
|
|
|
<el-popconfirm title="确定删除吗？" style="margin-left: 10px" @confirm="deleteRoles(scope.row.id)">
|
|
|
|
|
<el-button size="mini" type="text" slot="reference"> <i class="el-icon-delete" /> 删除 </el-button>
|
|
|
|
|
<!-- 权限分配按钮 -->
|
|
|
|
|
<el-button type="primary" size="mini" @click="openAuthModel(scope.row)"> 权限 </el-button>
|
|
|
|
|
|
|
|
|
|
<!-- 编辑按钮 -->
|
|
|
|
|
<el-button type="success" size="mini" @click="openModel(scope.row)"> 编辑 </el-button>
|
|
|
|
|
|
|
|
|
|
<!-- 删除确认弹窗触发器 -->
|
|
|
|
|
<el-popconfirm title="确定删除吗？" style="margin-left: 1rem" @confirm="deleteRole(scope.row.id)">
|
|
|
|
|
<el-button size="mini" type="danger" slot="reference"> 删除 </el-button>
|
|
|
|
|
</el-popconfirm>
|
|
|
|
|
</template>
|
|
|
|
|
</el-table-column>
|
|
|
|
|
</el-table>
|
|
|
|
|
|
|
|
|
|
<!-- 分页组件 -->
|
|
|
|
|
<el-pagination
|
|
|
|
|
class="pagination-container"
|
|
|
|
|
background
|
|
|
|
|
@size-change="sizeChange"
|
|
|
|
|
@current-change="currentChange"
|
|
|
|
|
:current-page="current"
|
|
|
|
|
:page-size="size"
|
|
|
|
|
:total="count"
|
|
|
|
|
:page-sizes="[10, 20]"
|
|
|
|
|
layout="total, sizes, prev, pager, next, jumper" />
|
|
|
|
|
<el-dialog :visible.sync="roleMenu" width="30%">
|
|
|
|
|
<div class="dialog-title-container" slot="title" ref="roleTitle" />
|
|
|
|
|
<el-form label-width="80px" size="medium" :model="roleForm">
|
|
|
|
|
<el-form-item label="角色名">
|
|
|
|
|
<el-input v-model="roleForm.roleName" style="width: 250px" />
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-form-item label="菜单权限">
|
|
|
|
|
<el-tree :data="menus" :default-checked-keys="roleForm.menuIds" show-checkbox node-key="id" ref="menuTree" />
|
|
|
|
|
</el-form-item>
|
|
|
|
|
</el-form>
|
|
|
|
|
class="pagination-container"
|
|
|
|
|
background
|
|
|
|
|
@size-change="sizeChange" <!-- 每页条数改变事件 -->
|
|
|
|
|
@current-change="currentChange" <!-- 当前页码改变事件 -->
|
|
|
|
|
:current-page="current" <!-- 当前页码 -->
|
|
|
|
|
:page-size="size" <!-- 每页条数 -->
|
|
|
|
|
:total="count" <!-- 总条数 -->
|
|
|
|
|
:page-sizes="[10, 20]" <!-- 可选每页条数 -->
|
|
|
|
|
layout="total, sizes, prev, pager, next, jumper" /> <!-- 分页布局 -->
|
|
|
|
|
|
|
|
|
|
<!-- 批量删除确认弹窗 -->
|
|
|
|
|
<el-dialog :visible.sync="isDelete" width="30%">
|
|
|
|
|
<div class="dialog-title-container" slot="title"><i class="el-icon-warning" style="color: #ff9900" />提示</div>
|
|
|
|
|
<div style="font-size: 1rem">是否删除选中项？</div>
|
|
|
|
|
<div slot="footer">
|
|
|
|
|
<el-button @click="roleMenu = false">取 消</el-button>
|
|
|
|
|
<el-button type="primary" @click="saveOrUpdateRoleMenu"> 确 定 </el-button>
|
|
|
|
|
<el-button @click="isDelete = false">取 消</el-button>
|
|
|
|
|
<el-button type="primary" @click="deleteRole(null)"> 确 定 </el-button>
|
|
|
|
|
</div>
|
|
|
|
|
</el-dialog>
|
|
|
|
|
<el-dialog :visible.sync="roleResource" width="30%" top="9vh">
|
|
|
|
|
<div class="dialog-title-container" slot="title">修改资源权限</div>
|
|
|
|
|
|
|
|
|
|
<!-- 新增/编辑角色弹窗 -->
|
|
|
|
|
<el-dialog :visible.sync="addOrEdit" width="30%">
|
|
|
|
|
<div class="dialog-title-container" slot="title" ref="roleTitle" /> <!-- 弹窗标题，动态设置 -->
|
|
|
|
|
<el-form label-width="80px" size="medium" :model="roleForm">
|
|
|
|
|
<el-form-item label="角色名">
|
|
|
|
|
<el-input v-model="roleForm.roleName" style="width: 250px" />
|
|
|
|
|
<el-form-item label="角色名称">
|
|
|
|
|
<el-input v-model="roleForm.roleName" style="width: 220px" />
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-form-item label="权限标识">
|
|
|
|
|
<el-input v-model="roleForm.roleKey" style="width: 220px" />
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-form-item label="显示排序">
|
|
|
|
|
<el-input-number v-model="roleForm.roleSort" controls-position="right" :min="1" :max="100" />
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-form-item label="资源权限">
|
|
|
|
|
<el-tree
|
|
|
|
|
:data="resources"
|
|
|
|
|
:default-checked-keys="roleForm.resourceIds"
|
|
|
|
|
show-checkbox
|
|
|
|
|
node-key="id"
|
|
|
|
|
ref="resourceTree" />
|
|
|
|
|
<el-form-item label="角色状态">
|
|
|
|
|
<el-radio-group v-model="roleForm.status">
|
|
|
|
|
<el-radio :label="1">启用</el-radio>
|
|
|
|
|
<el-radio :label="0">禁用</el-radio>
|
|
|
|
|
</el-radio-group>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
</el-form>
|
|
|
|
|
<div slot="footer">
|
|
|
|
|
<el-button @click="roleResource = false">取 消</el-button>
|
|
|
|
|
<el-button type="primary" @click="saveOrUpdateRoleResource"> 确 定 </el-button>
|
|
|
|
|
<el-button @click="addOrEdit = false">取 消</el-button>
|
|
|
|
|
<el-button type="primary" @click="addOrEditRole"> 确 定 </el-button>
|
|
|
|
|
</div>
|
|
|
|
|
</el-dialog>
|
|
|
|
|
<el-dialog :visible.sync="isDelete" width="30%">
|
|
|
|
|
<div class="dialog-title-container" slot="title"><i class="el-icon-warning" style="color: #ff9900" />提示</div>
|
|
|
|
|
<div style="font-size: 1rem">是否删除选中项？</div>
|
|
|
|
|
|
|
|
|
|
<!-- 角色权限分配弹窗 -->
|
|
|
|
|
<el-dialog :visible.sync="authDialog" width="40%" height="600px">
|
|
|
|
|
<div class="dialog-title-container" slot="title">
|
|
|
|
|
<i class="el-icon-lock" /> 角色权限
|
|
|
|
|
</div>
|
|
|
|
|
<!-- 权限树形结构选择器 -->
|
|
|
|
|
<el-tree
|
|
|
|
|
ref="tree"
|
|
|
|
|
:data="resources" <!-- 权限数据 -->
|
|
|
|
|
show-checkbox <!-- 显示复选框 -->
|
|
|
|
|
node-key="id" <!-- 节点唯一标识 -->
|
|
|
|
|
:default-checked-keys="checkedKeys" <!-- 默认选中的节点ID数组 -->
|
|
|
|
|
:props="defaultProps" <!-- 树形结构配置 -->
|
|
|
|
|
:expand-on-click-node="false" <!-- 点击节点不展开，只通过图标展开 -->
|
|
|
|
|
:check-strictly="false" <!-- 父子节点关联选择 -->
|
|
|
|
|
/>
|
|
|
|
|
<div slot="footer">
|
|
|
|
|
<el-button @click="isDelete = false">取 消</el-button>
|
|
|
|
|
<el-button type="primary" @click="deleteRoles(null)"> 确 定 </el-button>
|
|
|
|
|
<el-button @click="authDialog = false">取 消</el-button>
|
|
|
|
|
<el-button type="primary" @click="saveAuth"> 确 定 </el-button>
|
|
|
|
|
</div>
|
|
|
|
|
</el-dialog>
|
|
|
|
|
</el-card>
|
|
|
|
|
@ -112,75 +152,102 @@
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
export default {
|
|
|
|
|
// 页面创建时执行
|
|
|
|
|
created() {
|
|
|
|
|
// 从状态管理中获取角色页面的当前页码
|
|
|
|
|
this.current = this.$store.state.pageState.role
|
|
|
|
|
// 加载角色列表数据
|
|
|
|
|
this.listRoles()
|
|
|
|
|
},
|
|
|
|
|
data: function () {
|
|
|
|
|
data() {
|
|
|
|
|
return {
|
|
|
|
|
loading: true,
|
|
|
|
|
isDelete: false,
|
|
|
|
|
roles: [],
|
|
|
|
|
roleIds: [],
|
|
|
|
|
keywords: null,
|
|
|
|
|
current: 1,
|
|
|
|
|
size: 10,
|
|
|
|
|
count: 0,
|
|
|
|
|
roleMenu: false,
|
|
|
|
|
roleResource: false,
|
|
|
|
|
resources: [],
|
|
|
|
|
menus: [],
|
|
|
|
|
loading: true, // 表格加载状态
|
|
|
|
|
isDelete: false, // 批量删除弹窗显示状态
|
|
|
|
|
addOrEdit: false, // 新增/编辑弹窗显示状态
|
|
|
|
|
authDialog: false, // 权限分配弹窗显示状态
|
|
|
|
|
keywords: '', // 搜索关键词（角色名）
|
|
|
|
|
roleIds: [], // 选中的角色ID列表
|
|
|
|
|
roles: [], // 角色列表数据
|
|
|
|
|
resources: [], // 权限资源树形数据
|
|
|
|
|
checkedKeys: [], // 已选中的权限ID数组
|
|
|
|
|
currentRoleId: null, // 当前操作的角色ID（用于权限分配）
|
|
|
|
|
// 角色表单数据
|
|
|
|
|
roleForm: {
|
|
|
|
|
roleName: '',
|
|
|
|
|
roleLabel: '',
|
|
|
|
|
resourceIds: [],
|
|
|
|
|
menuIds: []
|
|
|
|
|
}
|
|
|
|
|
id: null, // 角色ID（编辑时使用）
|
|
|
|
|
roleName: '', // 角色名称
|
|
|
|
|
roleKey: '', // 权限标识
|
|
|
|
|
roleSort: 1, // 排序号
|
|
|
|
|
status: 1 // 状态（1：启用，0：禁用）
|
|
|
|
|
},
|
|
|
|
|
// 树形结构配置
|
|
|
|
|
defaultProps: {
|
|
|
|
|
children: 'children', // 子节点字段名
|
|
|
|
|
label: 'resourceName' // 节点显示文本字段名
|
|
|
|
|
},
|
|
|
|
|
current: 1, // 当前页码
|
|
|
|
|
size: 10, // 每页条数
|
|
|
|
|
count: 0 // 总条数
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
methods: {
|
|
|
|
|
searchRoles() {
|
|
|
|
|
this.current = 1
|
|
|
|
|
this.listRoles()
|
|
|
|
|
// 处理表格选择事件，收集选中的角色ID
|
|
|
|
|
selectionChange(roles) {
|
|
|
|
|
this.roleIds = []
|
|
|
|
|
roles.forEach((item) => {
|
|
|
|
|
this.roleIds.push(item.id)
|
|
|
|
|
})
|
|
|
|
|
},
|
|
|
|
|
// 搜索角色（重置页码为1）
|
|
|
|
|
listRoles() {
|
|
|
|
|
this.axios
|
|
|
|
|
.get('/api/admin/roles', {
|
|
|
|
|
params: {
|
|
|
|
|
current: this.current,
|
|
|
|
|
size: this.size,
|
|
|
|
|
keywords: this.keywords
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
.then(({ data }) => {
|
|
|
|
|
this.roles = data.data.records // 角色列表数据
|
|
|
|
|
this.count = data.data.count // 总条数
|
|
|
|
|
this.loading = false // 关闭加载状态
|
|
|
|
|
})
|
|
|
|
|
},
|
|
|
|
|
// 处理每页条数改变事件
|
|
|
|
|
sizeChange(size) {
|
|
|
|
|
this.size = size
|
|
|
|
|
this.listRoles()
|
|
|
|
|
},
|
|
|
|
|
// 处理当前页码改变事件
|
|
|
|
|
currentChange(current) {
|
|
|
|
|
this.current = current
|
|
|
|
|
// 更新状态管理中的角色页面页码
|
|
|
|
|
this.$store.commit('updateRolePageState', current)
|
|
|
|
|
this.listRoles()
|
|
|
|
|
},
|
|
|
|
|
selectionChange(roles) {
|
|
|
|
|
this.roleIds = []
|
|
|
|
|
roles.forEach((item) => {
|
|
|
|
|
this.roleIds.push(item.id)
|
|
|
|
|
})
|
|
|
|
|
},
|
|
|
|
|
listRoles() {
|
|
|
|
|
this.axios
|
|
|
|
|
.get('/api/admin/roles', {
|
|
|
|
|
params: {
|
|
|
|
|
current: this.current,
|
|
|
|
|
size: this.size,
|
|
|
|
|
keywords: this.keywords
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
.then(({ data }) => {
|
|
|
|
|
this.roles = data.data.records
|
|
|
|
|
this.count = data.data.count
|
|
|
|
|
this.loading = false
|
|
|
|
|
})
|
|
|
|
|
this.axios.get('/api/admin/role/resources').then(({ data }) => {
|
|
|
|
|
this.resources = data.data
|
|
|
|
|
})
|
|
|
|
|
this.axios.get('/api/admin/role/menus').then(({ data }) => {
|
|
|
|
|
this.menus = data.data
|
|
|
|
|
// 改变角色状态（启用/禁用）
|
|
|
|
|
changeStatus(role) {
|
|
|
|
|
this.axios.post('/api/admin/roles', role).then(({ data }) => {
|
|
|
|
|
if (data.flag) {
|
|
|
|
|
// 操作成功提示
|
|
|
|
|
this.$notify.success({
|
|
|
|
|
title: '成功',
|
|
|
|
|
message: data.message
|
|
|
|
|
})
|
|
|
|
|
this.listRoles() // 重新加载角色列表
|
|
|
|
|
} else {
|
|
|
|
|
// 操作失败提示
|
|
|
|
|
this.$notify.error({
|
|
|
|
|
title: '失败',
|
|
|
|
|
message: data.message
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
},
|
|
|
|
|
deleteRoles(id) {
|
|
|
|
|
var param = {}
|
|
|
|
|
// 删除角色（支持单个删除和批量删除）
|
|
|
|
|
deleteRole(id) {
|
|
|
|
|
let param = {}
|
|
|
|
|
// 批量删除时参数为选中的ID列表，单个删除时为单个ID
|
|
|
|
|
if (id == null) {
|
|
|
|
|
param = { data: this.roleIds }
|
|
|
|
|
} else {
|
|
|
|
|
@ -188,86 +255,113 @@ export default {
|
|
|
|
|
}
|
|
|
|
|
this.axios.delete('/api/admin/roles', param).then(({ data }) => {
|
|
|
|
|
if (data.flag) {
|
|
|
|
|
// 删除成功提示
|
|
|
|
|
this.$notify.success({
|
|
|
|
|
title: '成功',
|
|
|
|
|
message: data.message
|
|
|
|
|
})
|
|
|
|
|
this.listRoles()
|
|
|
|
|
this.listRoles() // 重新加载角色列表
|
|
|
|
|
} else {
|
|
|
|
|
// 删除失败提示
|
|
|
|
|
this.$notify.error({
|
|
|
|
|
title: '失败',
|
|
|
|
|
message: data.message
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
// 关闭删除弹窗
|
|
|
|
|
this.isDelete = false
|
|
|
|
|
})
|
|
|
|
|
},
|
|
|
|
|
openMenuModel(role) {
|
|
|
|
|
this.$nextTick(function () {
|
|
|
|
|
this.$refs.menuTree.setCheckedKeys([])
|
|
|
|
|
})
|
|
|
|
|
this.$refs.roleTitle.innerHTML = role ? '修改角色' : '新增角色'
|
|
|
|
|
if (role != null) {
|
|
|
|
|
// 打开新增/编辑角色弹窗
|
|
|
|
|
openModel(role) {
|
|
|
|
|
if (role != null) { // 编辑模式：复制角色数据到表单
|
|
|
|
|
this.roleForm = JSON.parse(JSON.stringify(role))
|
|
|
|
|
} else {
|
|
|
|
|
this.$refs.roleTitle.innerHTML = '修改角色' // 设置弹窗标题
|
|
|
|
|
} else { // 新增模式：重置表单数据
|
|
|
|
|
this.roleForm = {
|
|
|
|
|
id: null,
|
|
|
|
|
roleName: '',
|
|
|
|
|
roleLabel: '',
|
|
|
|
|
resourceIds: [],
|
|
|
|
|
menuIds: []
|
|
|
|
|
roleKey: '',
|
|
|
|
|
roleSort: 1,
|
|
|
|
|
status: 1
|
|
|
|
|
}
|
|
|
|
|
this.$refs.roleTitle.innerHTML = '添加角色' // 设置弹窗标题
|
|
|
|
|
}
|
|
|
|
|
this.roleMenu = true
|
|
|
|
|
// 显示弹窗
|
|
|
|
|
this.addOrEdit = true
|
|
|
|
|
},
|
|
|
|
|
openResourceModel(role) {
|
|
|
|
|
this.$nextTick(function () {
|
|
|
|
|
this.$refs.resourceTree.setCheckedKeys([])
|
|
|
|
|
})
|
|
|
|
|
this.roleForm = JSON.parse(JSON.stringify(role))
|
|
|
|
|
this.roleResource = true
|
|
|
|
|
},
|
|
|
|
|
saveOrUpdateRoleResource() {
|
|
|
|
|
this.roleForm.menuIds = null
|
|
|
|
|
this.roleForm.resourceIds = this.$refs.resourceTree.getCheckedKeys()
|
|
|
|
|
this.axios.post('/api/admin/role', this.roleForm).then(({ data }) => {
|
|
|
|
|
// 新增或编辑角色提交
|
|
|
|
|
addOrEditRole() {
|
|
|
|
|
// 表单验证
|
|
|
|
|
if (this.roleForm.roleName.trim() === '') {
|
|
|
|
|
this.$message.error('角色名称不能为空')
|
|
|
|
|
return false
|
|
|
|
|
}
|
|
|
|
|
if (this.roleForm.roleKey.trim() === '') {
|
|
|
|
|
this.$message.error('权限标识不能为空')
|
|
|
|
|
return false
|
|
|
|
|
}
|
|
|
|
|
// 发送新增/编辑请求
|
|
|
|
|
this.axios.post('/api/admin/roles', this.roleForm).then(({ data }) => {
|
|
|
|
|
if (data.flag) {
|
|
|
|
|
// 操作成功提示
|
|
|
|
|
this.$notify.success({
|
|
|
|
|
title: '成功',
|
|
|
|
|
message: data.message
|
|
|
|
|
})
|
|
|
|
|
this.listRoles()
|
|
|
|
|
this.listRoles() // 重新加载角色列表
|
|
|
|
|
} else {
|
|
|
|
|
// 操作失败提示
|
|
|
|
|
this.$notify.error({
|
|
|
|
|
title: '失败',
|
|
|
|
|
message: data.message
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
this.roleResource = false
|
|
|
|
|
// 关闭弹窗
|
|
|
|
|
this.addOrEdit = false
|
|
|
|
|
})
|
|
|
|
|
},
|
|
|
|
|
saveOrUpdateRoleMenu() {
|
|
|
|
|
if (this.roleForm.roleName.trim() == '') {
|
|
|
|
|
this.$message.error('角色名不能为空')
|
|
|
|
|
return false
|
|
|
|
|
// 打开角色权限分配弹窗
|
|
|
|
|
openAuthModel(role) {
|
|
|
|
|
this.currentRoleId = role.id // 记录当前角色ID
|
|
|
|
|
// 获取所有权限资源
|
|
|
|
|
this.axios.get('/api/admin/resources').then(({ data }) => {
|
|
|
|
|
this.resources = data.data // 权限树形数据
|
|
|
|
|
// 获取当前角色已有的权限
|
|
|
|
|
this.axios.get('/api/admin/roles/' + role.id + '/resources').then(({ data }) => {
|
|
|
|
|
this.checkedKeys = data.data // 已选中的权限ID数组
|
|
|
|
|
this.authDialog = true // 显示权限分配弹窗
|
|
|
|
|
})
|
|
|
|
|
})
|
|
|
|
|
},
|
|
|
|
|
// 保存角色权限分配
|
|
|
|
|
saveAuth() {
|
|
|
|
|
// 获取所有选中的权限ID
|
|
|
|
|
const checkedKeys = this.$refs.tree.getCheckedKeys()
|
|
|
|
|
// 构建请求参数
|
|
|
|
|
const param = {
|
|
|
|
|
roleId: this.currentRoleId,
|
|
|
|
|
resourceIds: checkedKeys
|
|
|
|
|
}
|
|
|
|
|
this.roleForm.resourceIds = null
|
|
|
|
|
this.roleForm.menuIds = this.$refs.menuTree.getCheckedKeys().concat(this.$refs.menuTree.getHalfCheckedKeys())
|
|
|
|
|
this.axios.post('/api/admin/role', this.roleForm).then(({ data }) => {
|
|
|
|
|
// 发送保存权限请求
|
|
|
|
|
this.axios.post('/api/admin/roles/resources', param).then(({ data }) => {
|
|
|
|
|
if (data.flag) {
|
|
|
|
|
// 操作成功提示
|
|
|
|
|
this.$notify.success({
|
|
|
|
|
title: '成功',
|
|
|
|
|
message: data.message
|
|
|
|
|
})
|
|
|
|
|
this.listRoles()
|
|
|
|
|
} else {
|
|
|
|
|
// 操作失败提示
|
|
|
|
|
this.$notify.error({
|
|
|
|
|
title: '失败',
|
|
|
|
|
message: data.message
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
this.roleMenu = false
|
|
|
|
|
// 关闭权限分配弹窗
|
|
|
|
|
this.authDialog = false
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
</script>
|
|
|
|
|
</script>
|
