mirror of
https://gitee.com/anji-plus/report.git
synced 2026-03-20 09:38:35 +08:00
add role page
This commit is contained in:
木子李·De
58
report-ui/src/api/accessRole.js
Executable file
58
report-ui/src/api/accessRole.js
Executable file
@@ -0,0 +1,58 @@
|
||||
import request from '@/utils/request'
|
||||
|
||||
export function accessRoleList (params) {
|
||||
return request({
|
||||
url: 'accessRole/pageList',
|
||||
method: 'GET',
|
||||
params,
|
||||
})
|
||||
}
|
||||
|
||||
export function accessRoleAdd (data) {
|
||||
return request({
|
||||
url: 'accessRole',
|
||||
method: 'post',
|
||||
data
|
||||
})
|
||||
}
|
||||
|
||||
export function accessRoleDeleteBatch (data) {
|
||||
return request({
|
||||
url: 'accessRole/delete/batch',
|
||||
method: 'post',
|
||||
data
|
||||
})
|
||||
}
|
||||
|
||||
export function accessRoleUpdate (data) {
|
||||
return request({
|
||||
url: 'accessRole',
|
||||
method: 'put', data,
|
||||
})
|
||||
}
|
||||
|
||||
export function accessRoleDetail (data) {
|
||||
return request({
|
||||
url: 'accessRole/' + data.id,
|
||||
method: 'get',
|
||||
params: { accessKey: data.accessKey }
|
||||
})
|
||||
}
|
||||
|
||||
export function accessRoleAuthorityTree (roleCode) {
|
||||
return request({
|
||||
url: 'accessRole/authorityTree/' + roleCode,
|
||||
method: 'get',
|
||||
})
|
||||
}
|
||||
|
||||
export function saveAuthorityTree (data) {
|
||||
return request({
|
||||
url: 'accessRole/saveAuthorityTree',
|
||||
method: 'post',
|
||||
data
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
export default { accessRoleList, accessRoleAdd, accessRoleDeleteBatch, accessRoleUpdate, accessRoleDetail, accessRoleAuthorityTree, saveAuthorityTree }
|
||||
192
report-ui/src/views/accessRole/index.vue
Executable file
192
report-ui/src/views/accessRole/index.vue
Executable file
@@ -0,0 +1,192 @@
|
||||
<template>
|
||||
<anji-crud ref="listPage"
|
||||
:option="crudOption">
|
||||
<template v-slot:buttonLeftOnTable>
|
||||
</template>
|
||||
|
||||
<template slot="rowButton"
|
||||
slot-scope="props">
|
||||
<el-button type="text"
|
||||
@click="handleOpenDialogSetAuthorityForRole(props)">设定权限</el-button>
|
||||
</template>
|
||||
<!--自定义的卡片插槽，将在编辑详情页面，出现在底部新卡片-->
|
||||
<template v-slot:pageSection>
|
||||
<RoleAuthority :role-code="roleCode"
|
||||
:visib="dialogVisibleSetAuthorityForRole"
|
||||
@handleClose="dialogVisibleSetAuthorityForRole = false" />
|
||||
</template>
|
||||
</anji-crud>
|
||||
</template>
|
||||
<script>
|
||||
import { accessRoleList, accessRoleAdd, accessRoleDeleteBatch, accessRoleUpdate, accessRoleDetail } from '@/api/accessRole'
|
||||
import RoleAuthority from '@/views/accessRole/components/RoleAuthority'
|
||||
export default {
|
||||
name: 'AccessRole',
|
||||
components: {
|
||||
RoleAuthority: RoleAuthority,
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
// 选中一个角色，点设定权限时，弹出对话框
|
||||
dialogVisibleSetAuthorityForRole: false,
|
||||
roleCode: '',
|
||||
|
||||
// 页面渲染使用
|
||||
crudOption: {
|
||||
// 使用菜单做为页面标题
|
||||
title: '角色管理',
|
||||
// 详情页中输入框左边文字宽度
|
||||
labelWidth: '120px',
|
||||
// 查询表单条件
|
||||
queryFormFields: [
|
||||
{
|
||||
inputType: 'input',
|
||||
label: '角色编码',
|
||||
field: 'roleCode'
|
||||
},
|
||||
{
|
||||
inputType: 'input',
|
||||
label: '角色名称',
|
||||
field: 'roleName'
|
||||
},
|
||||
{
|
||||
inputType: 'anji-select', //form表单类型 input|input-number|anji-select(传递url或者dictCode)|anji-tree(左侧树)|date|datetime|datetimerange
|
||||
anjiSelectOption: {
|
||||
dictCode: 'ENABLE_FLAG',
|
||||
},
|
||||
label: '启用状态',
|
||||
field: 'enableFlag',
|
||||
},
|
||||
],
|
||||
// 操作按钮
|
||||
buttons: {
|
||||
query: {
|
||||
api: accessRoleList,
|
||||
permission: 'AccessRole:PAGE'
|
||||
},
|
||||
queryByPrimarykey: {
|
||||
api: accessRoleDetail,
|
||||
permission: 'AccessRole:detail'
|
||||
},
|
||||
add: {
|
||||
api: accessRoleAdd,
|
||||
permission: 'AccessRole:insert'
|
||||
},
|
||||
delete: {
|
||||
api: accessRoleDeleteBatch,
|
||||
permission: 'AccessRole:delete'
|
||||
},
|
||||
edit: {
|
||||
api: accessRoleUpdate,
|
||||
permission: 'AccessRole:update'
|
||||
},
|
||||
},
|
||||
// 表格列
|
||||
columns: [
|
||||
{
|
||||
label: '',
|
||||
field: 'id',
|
||||
primaryKey: true, // 根据主键查询详情或者根据主键删除时, 主键的
|
||||
tableHide: true, // 表格中不显示
|
||||
editHide: true, // 编辑弹框中不显示
|
||||
},
|
||||
{
|
||||
label: '角色编码',
|
||||
placeholder: '',
|
||||
field: 'roleCode',
|
||||
editField: 'roleCode',
|
||||
tableHide: true, // 表格中不显示
|
||||
inputType: 'input',
|
||||
rules: [
|
||||
{ required: true, message: '角色编码必填', trigger: 'blur' },
|
||||
{ min: 1, max: 32, message: '不超过32个字符', trigger: 'blur' }
|
||||
],
|
||||
disabled: false,
|
||||
},
|
||||
{
|
||||
label: '角色名称',
|
||||
placeholder: '',
|
||||
field: 'roleName',
|
||||
fieldTableRowRenderer: (row) => {
|
||||
return `${row['roleName']}[${row['roleCode']}]`
|
||||
},
|
||||
editField: 'roleName',
|
||||
inputType: 'input',
|
||||
rules: [
|
||||
{ required: true, message: '角色名称必填', trigger: 'blur' },
|
||||
{ min: 1, max: 64, message: '不超过64个字符', trigger: 'blur' }
|
||||
],
|
||||
disabled: false,
|
||||
},
|
||||
{
|
||||
label: '启用状态',//0--已禁用 1--已启用 DIC_NAME=ENABLE_FLAG
|
||||
placeholder: '',
|
||||
field: 'enableFlag',
|
||||
fieldTableRowRenderer: (row) => {
|
||||
return this.getDictLabelByCode('ENABLE_FLAG', row['enableFlag'])
|
||||
},
|
||||
editField: 'enableFlag',
|
||||
inputType: 'anji-select',
|
||||
anjiSelectOption: {
|
||||
dictCode: 'ENABLE_FLAG', //指定数据字典
|
||||
},
|
||||
colorStyle: {
|
||||
0: 'table-danger', //key为editField渲染的值（字典的提交值）'红色': 'danger','蓝色': 'primary','绿色': 'success','黄色': 'warning','灰色': 'info','白色'：''
|
||||
1: 'table-success'
|
||||
},
|
||||
rules: [
|
||||
{ required: true, message: '启用状态必填', trigger: 'blur' },
|
||||
],
|
||||
disabled: false,
|
||||
},
|
||||
|
||||
{
|
||||
label: '创建人',
|
||||
placeholder: '',
|
||||
field: 'createBy',
|
||||
editField: 'createBy',
|
||||
inputType: 'input',
|
||||
editHide: 'hideOnAdd', // 编辑弹框中不显示 true/false/'hideOnAdd hideOnView hideOnEdit'
|
||||
disabled: true,
|
||||
},
|
||||
{
|
||||
label: '创建时间',
|
||||
placeholder: '',
|
||||
field: 'createTime',
|
||||
editField: 'createTime',
|
||||
inputType: 'input',
|
||||
editHide: 'hideOnAdd', // 编辑弹框中不显示 true/false/'hideOnAdd hideOnView hideOnEdit'
|
||||
disabled: true,
|
||||
},
|
||||
{
|
||||
label: '修改人',
|
||||
placeholder: '',
|
||||
field: 'updateBy',
|
||||
editField: 'updateBy',
|
||||
inputType: 'input',
|
||||
editHide: 'hideOnAdd', // 编辑弹框中不显示 true/false/'hideOnAdd hideOnView hideOnEdit'
|
||||
disabled: true,
|
||||
},
|
||||
{
|
||||
label: '修改时间',
|
||||
placeholder: '',
|
||||
field: 'updateTime',
|
||||
editField: 'updateTime',
|
||||
inputType: 'input',
|
||||
editHide: 'hideOnAdd', // 编辑弹框中不显示 true/false/'hideOnAdd hideOnView hideOnEdit'
|
||||
disabled: true,
|
||||
},
|
||||
],
|
||||
},
|
||||
}
|
||||
},
|
||||
created () { },
|
||||
methods: {
|
||||
handleOpenDialogSetAuthorityForRole (props) {
|
||||
this.roleCode = props.msg.roleCode
|
||||
this.dialogVisibleSetAuthorityForRole = true
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
86
report-ui/src/views/accessUser/components/UserRole.vue
Normal file
86
report-ui/src/views/accessUser/components/UserRole.vue
Normal file
@@ -0,0 +1,86 @@
|
||||
<template>
|
||||
<el-dialog class="tree_dialog"
|
||||
title="授权角色"
|
||||
width="60%"
|
||||
:close-on-click-modal="false"
|
||||
center
|
||||
:visible.sync="visib"
|
||||
:before-close="closeDialog">
|
||||
<el-tree ref="roleTree"
|
||||
:data="treeData"
|
||||
show-checkbox
|
||||
node-key="id"
|
||||
default-expand-all
|
||||
:default-checked-keys="checkedKeys" />
|
||||
<div slot="footer"
|
||||
style="text-align: center">
|
||||
<el-button type="primary"
|
||||
plain
|
||||
@click="saveTreeData">保存</el-button>
|
||||
<el-button type="danger"
|
||||
plain
|
||||
@click="closeDialog">取消</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</template>
|
||||
<script>
|
||||
import { getRoleTree, saveRoleTree } from '@/api/accessUser'
|
||||
export default {
|
||||
props: {
|
||||
visib: {
|
||||
required: true,
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
loginName: {
|
||||
required: true,
|
||||
type: String,
|
||||
default: () => {
|
||||
return ''
|
||||
},
|
||||
},
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
checkedKeys: [], // 当前选中的keys
|
||||
treeData: [], // 所有的树结点
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
visib (val) {
|
||||
if (val) {
|
||||
// 弹窗弹出时需要执行的逻辑
|
||||
console.log(1)
|
||||
this.getTreeData()
|
||||
}
|
||||
},
|
||||
},
|
||||
created () { },
|
||||
methods: {
|
||||
// 获取所有的树形结构数据
|
||||
async getTreeData () {
|
||||
const { code, data } = await getRoleTree(this.loginName)
|
||||
if (code != '200') return
|
||||
this.treeData = data.treeData
|
||||
this.checkedKeys = data.checkedKeys
|
||||
},
|
||||
|
||||
async saveTreeData () {
|
||||
var params = {
|
||||
loginName: this.loginName,
|
||||
roleCodeList: this.$refs.roleTree.getCheckedKeys(true),
|
||||
}
|
||||
const { code } = await saveRoleTree(params)
|
||||
if (code != '200') return
|
||||
this.closeDialog()
|
||||
},
|
||||
|
||||
// 弹窗关闭之前需要执行的逻辑
|
||||
closeDialog () {
|
||||
this.treeData = []
|
||||
this.checkedKeys = []
|
||||
this.$emit('handleClose')
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue
Block a user