mirror of
https://gitee.com/anji-plus/report.git
synced 2026-03-20 09:38:35 +08:00
add user manage page
This commit is contained in:
木子李·De
59
report-ui/src/api/accessUser.js
Executable file
59
report-ui/src/api/accessUser.js
Executable file
@@ -0,0 +1,59 @@
|
||||
import request from '@/utils/request'
|
||||
|
||||
export function accessUserList (params) {
|
||||
return request({
|
||||
url: 'accessUser/pageList',
|
||||
method: 'GET',
|
||||
params,
|
||||
})
|
||||
}
|
||||
|
||||
export function accessUserAdd (data) {
|
||||
return request({
|
||||
url: 'accessUser',
|
||||
method: 'post',
|
||||
data
|
||||
})
|
||||
}
|
||||
|
||||
export function accessUserDeleteBatch (data) {
|
||||
return request({
|
||||
url: 'accessUser/delete/batch',
|
||||
method: 'post',
|
||||
data
|
||||
})
|
||||
}
|
||||
|
||||
export function accessUserUpdate (data) {
|
||||
return request({
|
||||
url: 'accessUser',
|
||||
method: 'put', data,
|
||||
})
|
||||
}
|
||||
|
||||
export function accessUserDetail (data) {
|
||||
return request({
|
||||
url: 'accessUser/' + data.id,
|
||||
method: 'get',
|
||||
params: { accessKey: data.accessKey }
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
export function getRoleTree (loginName) {
|
||||
return request({
|
||||
url: 'accessUser/roleTree/' + loginName,
|
||||
method: 'get',
|
||||
})
|
||||
}
|
||||
|
||||
export function saveRoleTree (data) {
|
||||
return request({
|
||||
url: 'accessUser/saveRoleTree',
|
||||
method: 'post',
|
||||
data
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
export default { accessUserList, accessUserAdd, accessUserDeleteBatch, accessUserUpdate, accessUserDetail, getRoleTree, saveRoleTree }
|
||||
@@ -45,6 +45,17 @@ export const constantRouterMap = [
|
||||
{ path: '', name: 'accessUser', component: () => import('@/views/home/index'), meta: { title: '首页', icon: 'iconhome2', keepAlive: true, isBack: true } },
|
||||
]
|
||||
},
|
||||
{
|
||||
path: '/access',
|
||||
component: Layout,
|
||||
name: 'access',
|
||||
meta: { title: '用户权限', icon: 'icondfzq-' },
|
||||
children: [
|
||||
{ path: 'authority', name: 'authority', component: () => import('@/views/accessAuthority/index'), meta: { title: '权限管理', icon: 'iconquanxian', keepAlive: true, isBack: true } },
|
||||
{ path: 'role', name: 'role', component: () => import('@/views/accessRole/index'), meta: { title: '角色管理', icon: 'iconjiaose1', keepAlive: true, isBack: true } },
|
||||
{ path: 'user', name: 'user', component: () => import('@/views/accessUser/index'), meta: { title: '用户管理', icon: 'iconyonghu', keepAlive: true, isBack: true } },
|
||||
]
|
||||
},
|
||||
{
|
||||
path: '/datasource',
|
||||
component: Layout,
|
||||
|
||||
86
report-ui/src/views/accessRole/components/RoleAuthority.vue
Normal file
86
report-ui/src/views/accessRole/components/RoleAuthority.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 { accessRoleAuthorityTree, saveAuthorityTree } from '@/api/accessRole'
|
||||
export default {
|
||||
props: {
|
||||
visib: {
|
||||
required: true,
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
roleCode: {
|
||||
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 accessRoleAuthorityTree(this.roleCode)
|
||||
if (code != '200') return
|
||||
this.treeData = data.treeData
|
||||
this.checkedKeys = data.checkedKeys
|
||||
},
|
||||
|
||||
async saveTreeData () {
|
||||
var params = {
|
||||
roleCode: this.roleCode,
|
||||
authorityList: this.$refs.roleTree.getCheckedKeys(true),
|
||||
}
|
||||
const { code } = await saveAuthorityTree(params)
|
||||
if (code != '200') return
|
||||
this.closeDialog()
|
||||
},
|
||||
|
||||
// 弹窗关闭之前需要执行的逻辑
|
||||
closeDialog () {
|
||||
this.treeData = []
|
||||
this.checkedKeys = []
|
||||
this.$emit('handleClose')
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
269
report-ui/src/views/accessUser/index.vue
Executable file
269
report-ui/src/views/accessUser/index.vue
Executable file
@@ -0,0 +1,269 @@
|
||||
<template>
|
||||
<anji-crud ref="listPage"
|
||||
:option="crudOption">
|
||||
<template v-slot:buttonLeftOnTable>
|
||||
</template>
|
||||
|
||||
<template slot="rowButton"
|
||||
slot-scope="props">
|
||||
<el-button type="text"
|
||||
@click="handleOpenDialogSetRoleForUser(props)">授予角色</el-button>
|
||||
</template>
|
||||
<!--自定义的卡片插槽，将在编辑详情页面，出现在底部新卡片-->
|
||||
<template v-slot:pageSection>
|
||||
<UserRole :login-name="loginName"
|
||||
:visib="dialogVisibleSetRoleForUser"
|
||||
@handleClose="dialogVisibleSetRoleForUser = false" />
|
||||
</template>
|
||||
</anji-crud>
|
||||
</template>
|
||||
<script>
|
||||
import { accessUserList, accessUserAdd, accessUserDeleteBatch, accessUserUpdate, accessUserDetail } from '@/api/accessUser'
|
||||
import UserRole from '@/views/accessUser/components/UserRole'
|
||||
export default {
|
||||
name: 'AccessUser',
|
||||
components: {
|
||||
UserRole: UserRole,
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
// 选中一个用户时，点授予角色时，弹出对话框
|
||||
dialogVisibleSetRoleForUser: false,
|
||||
loginName: '',
|
||||
|
||||
// 页面渲染使用
|
||||
crudOption: {
|
||||
// 使用菜单做为页面标题
|
||||
title: '用户管理',
|
||||
// 详情页中输入框左边文字宽度
|
||||
labelWidth: '120px',
|
||||
// 查询表单条件
|
||||
queryFormFields: [
|
||||
{
|
||||
inputType: 'anji-select', //form表单类型 input|input-number|anji-select(传递url或者dictCode)|anji-tree(左侧树)|date|datetime|datetimerange
|
||||
anjiSelectOption: {
|
||||
dictCode: 'ENABLE_FLAG',
|
||||
},
|
||||
label: '启用状态',
|
||||
field: 'enableFlag'
|
||||
},
|
||||
{
|
||||
inputType: 'input',
|
||||
label: '登录名',
|
||||
field: 'loginName'
|
||||
},
|
||||
{
|
||||
inputType: 'input',
|
||||
label: '真实姓名',
|
||||
field: 'realName'
|
||||
},
|
||||
{
|
||||
inputType: 'input',
|
||||
label: '手机号',
|
||||
field: 'phone'
|
||||
},
|
||||
],
|
||||
// 操作按钮
|
||||
buttons: {
|
||||
query: {
|
||||
api: accessUserList,
|
||||
permission: 'AccessUser:PAGE'
|
||||
},
|
||||
queryByPrimarykey: {
|
||||
api: accessUserDetail,
|
||||
permission: 'AccessUser:detail'
|
||||
},
|
||||
add: {
|
||||
api: accessUserAdd,
|
||||
permission: 'AccessUser:insert'
|
||||
},
|
||||
delete: {
|
||||
api: accessUserDeleteBatch,
|
||||
permission: 'AccessUser:delete'
|
||||
},
|
||||
edit: {
|
||||
api: accessUserUpdate,
|
||||
permission: 'AccessUser:update'
|
||||
},
|
||||
},
|
||||
// 表格列
|
||||
columns: [
|
||||
{
|
||||
label: '',
|
||||
field: 'id',
|
||||
primaryKey: true, // 根据主键查询详情或者根据主键删除时, 主键的
|
||||
tableHide: true, // 表格中不显示
|
||||
editHide: true, // 编辑弹框中不显示
|
||||
},
|
||||
{
|
||||
label: '登录名',
|
||||
placeholder: '',
|
||||
field: 'loginName',
|
||||
tableHide: true, // 表格中不显示
|
||||
editField: 'loginName',
|
||||
inputType: 'input',
|
||||
rules: [
|
||||
{ required: true, message: '登录名必填', trigger: 'blur' },
|
||||
{ min: 1, max: 64, message: '不超过64个字符', trigger: 'blur' }
|
||||
],
|
||||
disabled: false,
|
||||
},
|
||||
{
|
||||
label: '真实姓名',
|
||||
placeholder: '',
|
||||
field: 'realName',
|
||||
fieldTableRowRenderer: (row) => {
|
||||
return `${row['realName']}[${row['loginName']}]`
|
||||
},
|
||||
|
||||
editField: 'realName',
|
||||
inputType: 'input',
|
||||
rules: [
|
||||
{ required: true, message: '真实姓名必填', trigger: 'blur' },
|
||||
{ min: 1, max: 64, message: '不超过64个字符', trigger: 'blur' }
|
||||
],
|
||||
disabled: false,
|
||||
},
|
||||
{
|
||||
label: '密码',
|
||||
placeholder: '',
|
||||
field: 'password',
|
||||
tableHide: true, // 表格中不显示
|
||||
editField: 'password',
|
||||
inputType: 'input',
|
||||
rules: [
|
||||
{ required: true, message: '密码必填', trigger: 'blur' },
|
||||
{ min: 1, max: 128, message: '不超过128个字符', trigger: 'blur' }
|
||||
],
|
||||
disabled: false,
|
||||
},
|
||||
{
|
||||
label: '手机号码',
|
||||
placeholder: '',
|
||||
field: 'phone',
|
||||
editField: 'phone',
|
||||
inputType: 'input',
|
||||
rules: [
|
||||
{ min: 1, max: 16, message: '不超过16个字符', trigger: 'blur' }
|
||||
],
|
||||
disabled: false,
|
||||
},
|
||||
{
|
||||
label: '用户邮箱',
|
||||
placeholder: '',
|
||||
field: 'email',
|
||||
editField: 'email',
|
||||
inputType: 'input',
|
||||
rules: [
|
||||
{ min: 1, max: 64, message: '不超过64个字符', trigger: 'blur' }
|
||||
],
|
||||
disabled: false,
|
||||
},
|
||||
{
|
||||
label: '备注',
|
||||
placeholder: '',
|
||||
field: 'remark',
|
||||
editField: 'remark',
|
||||
inputType: 'input',
|
||||
rules: [
|
||||
{ min: 1, max: 512, message: '不超过512个字符', 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: 'lastLoginTime',
|
||||
editField: 'lastLoginTime',
|
||||
inputType: 'input',
|
||||
rules: [
|
||||
],
|
||||
disabled: true,
|
||||
},
|
||||
{
|
||||
label: '最后一次登录IP',
|
||||
placeholder: '',
|
||||
field: 'lastLoginIp',
|
||||
editField: 'lastLoginIp',
|
||||
inputType: 'input',
|
||||
rules: [
|
||||
{ min: 1, max: 16, message: '不超过16个字符', trigger: 'blur' }
|
||||
],
|
||||
disabled: true,
|
||||
},
|
||||
{
|
||||
label: '创建人',
|
||||
placeholder: '',
|
||||
field: 'createBy',
|
||||
columnType: 'expand',
|
||||
editField: 'createBy',
|
||||
inputType: 'input',
|
||||
editHide: 'hideOnAdd', // 编辑弹框中不显示 true/false/'hideOnAdd hideOnView hideOnEdit'
|
||||
disabled: true,
|
||||
},
|
||||
{
|
||||
label: '创建时间',
|
||||
placeholder: '',
|
||||
field: 'createTime',
|
||||
columnType: 'expand',
|
||||
editField: 'createTime',
|
||||
inputType: 'input',
|
||||
editHide: 'hideOnAdd', // 编辑弹框中不显示 true/false/'hideOnAdd hideOnView hideOnEdit'
|
||||
disabled: true,
|
||||
},
|
||||
{
|
||||
label: '修改人',
|
||||
placeholder: '',
|
||||
field: 'updateBy',
|
||||
columnType: 'expand',
|
||||
editField: 'updateBy',
|
||||
inputType: 'input',
|
||||
editHide: 'hideOnAdd', // 编辑弹框中不显示 true/false/'hideOnAdd hideOnView hideOnEdit'
|
||||
disabled: true,
|
||||
},
|
||||
{
|
||||
label: '修改时间',
|
||||
placeholder: '',
|
||||
field: 'updateTime',
|
||||
columnType: 'expand',
|
||||
editField: 'updateTime',
|
||||
inputType: 'input',
|
||||
editHide: 'hideOnAdd', // 编辑弹框中不显示 true/false/'hideOnAdd hideOnView hideOnEdit'
|
||||
disabled: true,
|
||||
},
|
||||
],
|
||||
},
|
||||
}
|
||||
},
|
||||
|
||||
created () { },
|
||||
methods: {
|
||||
handleOpenDialogSetRoleForUser (props) {
|
||||
this.loginName = props.msg.loginName
|
||||
this.dialogVisibleSetRoleForUser = true
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user