ady/ruoyi-vue-pro
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

1. 完成 Role 简单的 CRUD 的迁移

Browse Source
This commit is contained in:
YunaiV
2021-01-09 13:32:27 +08:00
parent 9e59a6c1ae
commit ad1d1978d2
9 changed files with 229 additions and 179 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
ruoyi-ui/src/api/system/role.js
View File

@@ -3,7 +3,7 @@ import request from '@/utils/request'
// 查询角色列表
export function listRole(query) {
return request({
url: '/system/role/list',
url: '/system/role/page',
method: 'get',
params: query
})
@@ -12,7 +12,7 @@ export function listRole(query) {
// 查询角色详细
export function getRole(roleId) {
return request({
url: '/system/role/' + roleId,
url: '/system/role/get?id=' + roleId,
method: 'get'
})
}
@@ -20,7 +20,7 @@ export function getRole(roleId) {
// 新增角色
export function addRole(data) {
return request({
url: '/system/role',
url: '/system/role/create',
method: 'post',
data: data
})
@@ -29,8 +29,8 @@ export function addRole(data) {
// 修改角色
export function updateRole(data) {
return request({
url: '/system/role',
method: 'put',
url: '/system/role/update',
method: 'post',
data: data
})
}
@@ -45,14 +45,14 @@ export function dataScope(data) {
}
// 角色状态修改
export function changeRoleStatus(roleId, status) {
export function changeRoleStatus(id, status) {
const data = {
roleId,
id,
status
}
return request({
url: '/system/role/changeStatus',
method: 'put',
url: '/system/role/update-status',
method: 'post',
data: data
})
}
@@ -60,8 +60,8 @@ export function changeRoleStatus(roleId, status) {
// 删除角色
export function delRole(roleId) {
return request({
url: '/system/role/' + roleId,
method: 'delete'
url: '/system/role/delete?id=' + roleId,
method: 'post'
})
}
@@ -72,4 +72,4 @@ export function exportRole(query) {
method: 'get',
params: query
})
}
}

3
ruoyi-ui/src/utils/dict.js
View File

@@ -7,7 +7,8 @@ import store from '@/store'
export const DICT_TYPE = {
SYS_COMMON_STATUS: 'sys_common_status',
SYS_MENU_TYPE: 'sys_menu_type'
SYS_MENU_TYPE: 'sys_menu_type',
SYS_ROLE_TYPE: 'sys_role_type',
}
/**

4
ruoyi-ui/src/views/system/menu/index.vue
View File

@@ -14,9 +14,9 @@
<el-select v-model="queryParams.status" placeholder="菜单状态" clearable size="small">
<el-option
v-for="dict in statusDictDatas"
:key="dict.value"
:key="parseInt(dict.value)"
:label="dict.label"
:value="dict.value"
:value="parseInt(dict.value)"
/>
</el-select>
</el-form-item>

289
ruoyi-ui/src/views/system/role/index.vue
View File

@@ -1,9 +1,9 @@
<template>
<div class="app-container">
<el-form :model="queryParams" ref="queryForm" v-show="showSearch" :inline="true">
<el-form-item label="角色名称" prop="roleName">
<el-form-item label="角色名称" prop="name">
<el-input
v-model="queryParams.roleName"
v-model="queryParams.name"
placeholder="请输入角色名称"
clearable
size="small"
@@ -11,10 +11,10 @@
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="权限字符" prop="roleKey">
<el-form-item label="角色标识" prop="code">
<el-input
v-model="queryParams.roleKey"
placeholder="请输入权限字符"
v-model="queryParams.code"
placeholder="请输入角色标识"
clearable
size="small"
style="width: 240px"
@@ -30,10 +30,10 @@
style="width: 240px"
>
<el-option
v-for="dict in statusOptions"
:key="dict.dictValue"
:label="dict.dictLabel"
:value="dict.dictValue"
v-for="dict in statusDictDatas"
:key="parseInt(dict.value)"
:label="dict.label"
:value="parseInt(dict.value)"
/>
</el-select>
</el-form-item>
@@ -65,26 +65,6 @@
v-hasPermi="['system:role:add']"
>新增</el-button>
</el-col>
<el-col :span="1.5">
<el-button
type="success"
icon="el-icon-edit"
size="mini"
:disabled="single"
@click="handleUpdate"
v-hasPermi="['system:role:edit']"
>修改</el-button>
</el-col>
<el-col :span="1.5">
<el-button
type="danger"
icon="el-icon-delete"
size="mini"
:disabled="multiple"
@click="handleDelete"
v-hasPermi="['system:role:remove']"
>删除</el-button>
</el-col>
<el-col :span="1.5">
<el-button
type="warning"
@@ -97,18 +77,18 @@
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
</el-row>
<el-table v-loading="loading" :data="roleList" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55" align="center" />
<el-table-column label="角色编号" prop="roleId" width="120" />
<el-table-column label="角色名称" prop="roleName" :show-overflow-tooltip="true" width="150" />
<el-table-column label="权限字符" prop="roleKey" :show-overflow-tooltip="true" width="150" />
<el-table-column label="显示顺序" prop="roleSort" width="100" />
<el-table v-loading="loading" :data="roleList">
<el-table-column label="角色编号" prop="id" width="120" />
<el-table-column label="角色名称" prop="name" :show-overflow-tooltip="true" width="150" />
<el-table-column label="角色标识" prop="code" :show-overflow-tooltip="true" width="150" />
<el-table-column label="角色类型" prop="type" :formatter="typeFormat" width="80"></el-table-column>
<el-table-column label="显示顺序" prop="sort" width="100" />
<el-table-column label="状态" align="center" width="100">
<template slot-scope="scope">
<el-switch
v-model="scope.row.status"
active-value="0"
inactive-value="1"
:active-value="0"
:inactive-value="1"
@change="handleStatusChange(scope.row)"
></el-switch>
</template>
@@ -127,6 +107,13 @@
@click="handleUpdate(scope.row)"
v-hasPermi="['system:role:edit']"
>修改</el-button>
<el-button
size="mini"
type="text"
icon="el-icon-circle-check"
@click="handleMenu(scope.row)"
v-hasPermi="['system:role:edit']"
>菜单权限</el-button>
<el-button
size="mini"
type="text"
@@ -156,38 +143,14 @@
<!-- 添加或修改角色配置对话框 -->
<el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
<el-form-item label="角色名称" prop="roleName">
<el-input v-model="form.roleName" placeholder="请输入角色名称" />
<el-form-item label="角色名称" prop="name">
<el-input v-model="form.name" placeholder="请输入角色名称" />
</el-form-item>
<el-form-item label="权限字符" prop="roleKey">
<el-input v-model="form.roleKey" placeholder="请输入权限字符" />
<el-form-item label="角色标识" prop="code">
<el-input v-model="form.code" placeholder="请输入角色标识" />
</el-form-item>
<el-form-item label="角色顺序" prop="roleSort">
<el-input-number v-model="form.roleSort" controls-position="right" :min="0" />
</el-form-item>
<el-form-item label="状态">
<el-radio-group v-model="form.status">
<el-radio
v-for="dict in statusOptions"
:key="dict.dictValue"
:label="dict.dictValue"
>{{dict.dictLabel}}</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="菜单权限">
<el-checkbox v-model="menuExpand" @change="handleCheckedTreeExpand($event, 'menu')">展开/折叠</el-checkbox>
<el-checkbox v-model="menuNodeAll" @change="handleCheckedTreeNodeAll($event, 'menu')">全选/全不选</el-checkbox>
<el-checkbox v-model="form.menuCheckStrictly" @change="handleCheckedTreeConnect($event, 'menu')">父子联动</el-checkbox>
<el-tree
class="tree-border"
:data="menuOptions"
show-checkbox
ref="menu"
node-key="id"
:check-strictly="!form.menuCheckStrictly"
empty-text="加载中，请稍后"
:props="defaultProps"
></el-tree>
<el-form-item label="角色顺序" prop="sort">
<el-input-number v-model="form.sort" controls-position="right" :min="0" />
</el-form-item>
<el-form-item label="备注">
<el-input v-model="form.remark" type="textarea" placeholder="请输入内容"></el-input>
@@ -199,14 +162,14 @@
</div>
</el-dialog>
<!-- 分配角色数据权限对话框 -->
<!-- 分配角色的数据权限对话框 -->
<el-dialog :title="title" :visible.sync="openDataScope" width="500px" append-to-body>
<el-form :model="form" label-width="80px">
<el-form-item label="角色名称">
<el-input v-model="form.roleName" :disabled="true" />
<el-input v-model="form.name" :disabled="true" />
</el-form-item>
<el-form-item label="权限字符">
<el-input v-model="form.roleKey" :disabled="true" />
<el-form-item label="角色标识">
<el-input v-model="form.code" :disabled="true" />
</el-form-item>
<el-form-item label="权限范围">
<el-select v-model="form.dataScope">
@@ -240,6 +203,37 @@
<el-button @click="cancelDataScope">取 消</el-button>
</div>
</el-dialog>
<!-- 分配角色的菜单权限对话框 -->
<el-dialog :title="title" :visible.sync="openMenu" width="500px" append-to-body>
<el-form :model="form" label-width="80px">
<el-form-item label="角色名称">
<el-input v-model="form.name" :disabled="true" />
</el-form-item>
<el-form-item label="角色标识">
<el-input v-model="form.code" :disabled="true" />
</el-form-item>
<el-form-item label="菜单权限">
<el-checkbox v-model="menuExpand" @change="handleCheckedTreeExpand($event, 'menu')">展开/折叠</el-checkbox>
<el-checkbox v-model="menuNodeAll" @change="handleCheckedTreeNodeAll($event, 'menu')">全选/全不选</el-checkbox>
<el-checkbox v-model="form.menuCheckStrictly" @change="handleCheckedTreeConnect($event, 'menu')">父子联动</el-checkbox>
<el-tree
class="tree-border"
:data="menuOptions"
show-checkbox
ref="menu"
node-key="id"
:check-strictly="!form.menuCheckStrictly"
empty-text="加载中，请稍后"
:props="defaultProps"
></el-tree>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitMenu">确 定</el-button>
<el-button @click="cancelMenu">取 消</el-button>
</div>
</el-dialog>
</div>
</template>
@@ -247,6 +241,8 @@
import { listRole, getRole, delRole, addRole, updateRole, exportRole, dataScope, changeRoleStatus } from "@/api/system/role";
import { treeselect as menuTreeselect, roleMenuTreeselect } from "@/api/system/menu";
import { treeselect as deptTreeselect, roleDeptTreeselect } from "@/api/system/dept";
import {SysCommonStatusEnum, SysMenuTypeEnum} from "@/utils/constants";
import {DICT_TYPE, getDictDataLabel, getDictDatas} from "@/utils/dict";
export default {
name: "Role",
@@ -254,12 +250,6 @@ export default {
return {
// 遮罩层
loading: true,
// 选中数组
ids: [],
// 非单个禁用
single: true,
// 非多个禁用
multiple: true,
// 显示搜索条件
showSearch: true,
// 总条数
@@ -272,6 +262,9 @@ export default {
open: false,
// 是否显示弹出层（数据权限）
openDataScope: false,
// 是否显示弹出层（菜单权限）
openMenu: false,
// TODO 需要简化下
menuExpand: false,
menuNodeAll: false,
deptExpand: true,
@@ -309,10 +302,10 @@ export default {
deptOptions: [],
// 查询参数
queryParams: {
pageNum: 1,
pageNo: 1,
pageSize: 10,
roleName: undefined,
roleKey: undefined,
name: undefined,
code: undefined,
status: undefined
},
// 表单参数
@@ -323,23 +316,26 @@ export default {
},
// 表单校验
rules: {
roleName: [
name: [
{ required: true, message: "角色名称不能为空", trigger: "blur" }
],
roleKey: [
{ required: true, message: "权限字符不能为空", trigger: "blur" }
code: [
{ required: true, message: "角色标识不能为空", trigger: "blur" }
],
roleSort: [
sort: [
{ required: true, message: "角色顺序不能为空", trigger: "blur" }
]
}
},
// 枚举
CommonStatusEnum: SysCommonStatusEnum,
// 数据字典
roleTypeDictDatas: getDictDatas(DICT_TYPE.SYS_ROLE_TYPE),
statusDictDatas: getDictDatas(DICT_TYPE.SYS_COMMON_STATUS)
};
},
created() {
this.getList();
this.getDicts("sys_normal_disable").then(response => {
this.statusOptions = response.data;
});
},
methods: {
/** 查询角色列表 */
@@ -347,8 +343,8 @@ export default {
this.loading = true;
listRole(this.addDateRange(this.queryParams, this.dateRange)).then(
response => {
this.roleList = response.rows;
this.total = response.total;
this.roleList = response.data.list;
this.total = response.data.total;
this.loading = false;
}
);
@@ -384,34 +380,41 @@ export default {
return checkedKeys;
},
/** 根据角色ID查询菜单树结构 */
getRoleMenuTreeselect(roleId) {
return roleMenuTreeselect(roleId).then(response => {
getRoleMenuTreeselect(id) {
return roleMenuTreeselect(id).then(response => {
this.menuOptions = response.menus;
return response;
});
},
/** 根据角色ID查询部门树结构 */
getRoleDeptTreeselect(roleId) {
return roleDeptTreeselect(roleId).then(response => {
getRoleDeptTreeselect(id) {
return roleDeptTreeselect(id).then(response => {
this.deptOptions = response.depts;
return response;
});
},
// 角色状态修改
handleStatusChange(row) {
let text = row.status === "0" ? "启用" : "停用";
this.$confirm('确认要"' + text + '""' + row.roleName + '"角色吗?', "警告", {
// 此时，row 已经变成目标状态了，所以可以直接提交请求和提示
let text = row.status === SysCommonStatusEnum.ENABLE ? "启用" : "停用";
this.$confirm('确认要"' + text + '""' + row.name + '"角色吗?', "警告", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning"
}).then(function() {
return changeRoleStatus(row.roleId, row.status);
return changeRoleStatus(row.id, row.status);
}).then(() => {
this.msgSuccess(text + "成功");
}).catch(function() {
row.status = row.status === "0" ? "1" : "0";
// 异常时，需要将 row.status 状态重置回之前的
row.status = row.status === SysCommonStatusEnum.ENABLE ? SysCommonStatusEnum.DISABLE
: SysCommonStatusEnum.ENABLE;
});
},
// 角色类型字典翻译
typeFormat(row, column) {
return getDictDataLabel(DICT_TYPE.SYS_ROLE_TYPE, row.type)
},
// 取消按钮
cancel() {
this.open = false;
@@ -422,6 +425,11 @@ export default {
this.openDataScope = false;
this.reset();
},
// 取消按钮（菜单权限）
cancelMenu() {
this.openMenu = false;
this.reset();
},
// 表单重置
reset() {
if (this.$refs.menu != undefined) {
@@ -432,10 +440,10 @@ export default {
this.deptExpand = true,
this.deptNodeAll = false,
this.form = {
roleId: undefined,
roleName: undefined,
roleKey: undefined,
roleSort: 0,
id: undefined,
name: undefined,
code: undefined,
sort: 0,
status: "0",
ids: [],
deptIds: [],
@@ -447,7 +455,7 @@ export default {
},
/** 搜索按钮操作 */
handleQuery() {
this.queryParams.pageNum = 1;
this.queryParams.pageNo = 1;
this.getList();
},
/** 重置按钮操作 */
@@ -456,12 +464,6 @@ export default {
this.resetForm("queryForm");
this.handleQuery();
},
// 多选框选中数据
handleSelectionChange(selection) {
this.ids = selection.map(item => item.roleId)
this.single = selection.length!=1
this.multiple = !selection.length
},
// 树权限（展开/折叠）
handleCheckedTreeExpand(value, type) {
if (type == 'menu') {
@@ -495,31 +497,50 @@ export default {
/** 新增按钮操作 */
handleAdd() {
this.reset();
this.getMenuTreeselect();
this.open = true;
this.title = "添加角色";
},
/** 修改按钮操作 */
handleUpdate(row) {
this.reset();
const roleId = row.roleId || this.ids
const roleMenu = this.getRoleMenuTreeselect(roleId);
getRole(roleId).then(response => {
const id = row.id
getRole(id).then(response => {
this.form = response.data;
this.open = true;
this.$nextTick(() => {
roleMenu.then(res => {
this.$refs.menu.setCheckedKeys(res.checkedKeys);
});
});
this.title = "修改角色";
});
},
/** 分配菜单权限操作 */
handleMenu(row) {
this.reset();
const id = row.id
// TODO 优化
this.getMenuTreeselect();
const roleMenu = this.getRoleMenuTreeselect(id);
this.$nextTick(() => {
roleMenu.then(res => {
this.$refs.menu.setCheckedKeys(res.checkedKeys);
});
});
this.openMenu = true;
// const roleDeptTreeselect = this.getRoleDeptTreeselect(row.id);
// getRole(row.id).then(response => {
// this.form = response.data;
// this.openDataScope = true;
// this.$nextTick(() => {
// roleDeptTreeselect.then(res => {
// this.$refs.dept.setCheckedKeys(res.checkedKeys);
// });
// });
// this.title = "分配数据权限";
// });
},
/** 分配数据权限操作 */
handleDataScope(row) {
this.reset();
const roleDeptTreeselect = this.getRoleDeptTreeselect(row.roleId);
getRole(row.roleId).then(response => {
const roleDeptTreeselect = this.getRoleDeptTreeselect(row.id);
getRole(row.id).then(response => {
this.form = response.data;
this.openDataScope = true;
this.$nextTick(() => {
@@ -534,15 +555,17 @@ export default {
submitForm: function() {
this.$refs["form"].validate(valid => {
if (valid) {
if (this.form.roleId != undefined) {
this.form.ids = this.getMenuAllCheckedKeys();
if (this.form.id !== undefined) {
// TODO 芋艿：需要迁移
// this.form.ids = this.getMenuAllCheckedKeys();
updateRole(this.form).then(response => {
this.msgSuccess("修改成功");
this.open = false;
this.getList();
});
} else {
this.form.ids = this.getMenuAllCheckedKeys();
// TODO 芋艿：需要迁移
// this.form.ids = this.getMenuAllCheckedKeys();
addRole(this.form).then(response => {
this.msgSuccess("新增成功");
this.open = false;
@@ -554,7 +577,19 @@ export default {
},
/** 提交按钮（数据权限） */
submitDataScope: function() {
if (this.form.roleId != undefined) {
if (this.form.id != undefined) {
this.form.deptIds = this.getDeptAllCheckedKeys();
dataScope(this.form).then(response => {
this.msgSuccess("修改成功");
this.openDataScope = false;
this.getList();
});
}
},
/** 提交按钮（菜单权限） */
submitMenu: function() {
// TODO 需要改动下
if (this.form.id != undefined) {
this.form.deptIds = this.getDeptAllCheckedKeys();
dataScope(this.form).then(response => {
this.msgSuccess("修改成功");
@@ -565,13 +600,13 @@ export default {
},
/** 删除按钮操作 */
handleDelete(row) {
const roleIds = row.roleId || this.ids;
this.$confirm('是否确认删除角色编号为"' + roleIds + '"的数据项?', "警告", {
const ids = row.id || this.ids;
this.$confirm('是否确认删除角色编号为"' + ids + '"的数据项?', "警告", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning"
}).then(function() {
return delRole(roleIds);
return delRole(ids);
}).then(() => {
this.getList();
this.msgSuccess("删除成功");