yovinchen/guigu-oa-admin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

菜单管理

Browse Source
This commit is contained in:
yl 2023-03-12 00:12:39 +08:00 committed by yovinchen
parent dc2af92884
commit a70a97f26b
5 changed files with 150 additions and 172 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

79
src/api/system/sysMenu.js
View File

@ -1,21 +1,15 @@
import request from '@/utils/request'
/**
* 菜单管理相关的API请求函数
*
* @type {string}
*/
/*
菜单管理相关的API请求函数
*/
const api_name = '/admin/system/sysMenu'
export default {
/**
* 获取权限(菜单/功能)列表
*
* @returns {AxiosPromise}
*/
/*
获取权限(菜单/功能)列表
*/
findNodes() {
return request({
url: `${api_name}/findNodes`,
@ -23,56 +17,41 @@ export default {
})
},
/**
* 删除一个权限项
*
* @param id
* @returns {AxiosPromise}
*/
/*
删除一个权限项
*/
removeById(id) {
return request({
url: `${api_name}/remove/${id}`,
method: 'delete'
method: "delete"
})
},
/**
* 保存一个权限项
*
* @param sysMenu
* @returns {AxiosPromise}
*/
/*
保存一个权限项
*/
save(sysMenu) {
return request({
url: `${api_name}/save`,
method: 'post',
method: "post",
data: sysMenu
})
},
/**
* 更新一个权限项
*
* @param sysMenu
* @returns {AxiosPromise}
*/
/*
更新一个权限项
*/
updateById(sysMenu) {
return request({
url: `${api_name}/update`,
method: 'put',
method: "put",
data: sysMenu
})
},
/**
* 查看某个角色的权限列表
*
* @param roleId
* @returns {AxiosPromise}
*/
/*
查看某个角色的权限列表
*/
toAssign(roleId) {
return request({
url: `${api_name}/toAssign/${roleId}`,
@ -80,18 +59,14 @@ export default {
})
},
/**
* 给某个角色授权
*
* @param assignMenuVo
* @returns {AxiosPromise}
*/
doAssign(assignMenuVo) {
/*
给某个角色授权
*/
doAssign(assginMenuVo) {
return request({
url: `${api_name}/doAssign`,
method: 'post',
data: assignMenuVo
method: "post",
data: assginMenuVo
})
}
}

18
src/router/index.js
View File

@ -80,6 +80,24 @@ export const constantRoutes = [
title: '角色管理',
icon: 'el-icon-s-help'
},
},
{
name: 'sysMenu',
path: 'sysMenu',
component: () => import('@/views/system/sysMenu/list'),
meta: {
title: '菜单管理',
icon: 'el-icon-s-unfold'
},
},
{
path: 'assignAuth',
component: () => import('@/views/system/sysRole/assignAuth'),
meta: {
activeMenu: '/system/sysRole',
title: '角色授权'
},
hidden: true,
}
]
},

173
src/views/system/sysMenu/list.vue
View File

@ -3,116 +3,97 @@
<!-- 工具条 -->
<div class="tools-div">
<el-button icon="el-icon-plus" size="mini" type="success" @click="add()">添 加</el-button>
<el-button type="success" icon="el-icon-plus" size="mini" @click="add()">添 加</el-button>
</div>
<el-table
:data="sysMenuList"
:default-expand-all="false"
:tree-props="{children: 'children'}"
border
row-key="id"
style="width: 100%;margin-bottom: 20px;margin-top: 10px;"
>
row-key="id"
border
:default-expand-all="false"
:tree-props="{children: 'children'}">
<el-table-column label="菜单名称" prop="name" width="160" />
<el-table-column prop="name" label="菜单名称" width="160"/>
<el-table-column label="图标">
<template slot-scope="scope">
<i :class="scope.row.icon" />
<i :class="scope.row.icon"></i>
</template>
</el-table-column>
<el-table-column label="权限标识" prop="perms" width="160" />
<el-table-column label="路由地址" prop="path" width="120" />
<el-table-column label="组件路径" prop="component" width="160" />
<el-table-column label="排序" prop="sortValue" width="60" />
<el-table-column prop="perms" label="权限标识" width="160"/>
<el-table-column prop="path" label="路由地址" width="120"/>
<el-table-column prop="component" label="组件路径" width="160"/>
<el-table-column prop="sortValue" label="排序" width="60"/>
<el-table-column label="状态" width="80">
<template slot-scope="scope">
<el-switch
v-model="scope.row.status === 1"
disabled="true"
/>
v-model="scope.row.status === 1" disabled="true">
</el-switch>
</template>
</el-table-column>
<el-table-column label="创建时间" prop="createTime" width="160" />
<el-table-column align="center" fixed="right" label="操作" width="180">
<el-table-column prop="createTime" label="创建时间" width="160"/>
<el-table-column label="操作" width="180" align="center" fixed="right">
<template slot-scope="scope">
<el-button
v-if="scope.row.type !== 2"
icon="el-icon-plus"
size="mini"
title="添加下级节点"
type="success"
@click="add(scope.row)"
/>
<el-button icon="el-icon-edit" size="mini" title="修改" type="primary" @click="edit(scope.row)" />
<el-button
:disabled="scope.row.children.length > 0"
icon="el-icon-delete"
size="mini"
title="删除"
type="danger"
@click="removeDataById(scope.row.id)"
/>
<el-button type="success" v-if="scope.row.type !== 2" icon="el-icon-plus" size="mini" @click="add(scope.row)" title="添加下级节点"/>
<el-button type="primary" icon="el-icon-edit" size="mini" @click="edit(scope.row)" title="修改"/>
<el-button type="danger" icon="el-icon-delete" size="mini" @click="removeDataById(scope.row.id)" title="删除" :disabled="scope.row.children.length > 0"/>
</template>
</el-table-column>
</el-table>
<el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="40%">
<el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="40%" >
<el-form ref="dataForm" :model="sysMenu" label-width="150px" size="small" style="padding-right: 40px;">
<el-form-item v-if="sysMenu.id === ''" label="上级部门">
<el-input v-model="sysMenu.parentName" disabled="true" />
<el-form-item label="上级部门" v-if="sysMenu.id === ''">
<el-input v-model="sysMenu.parentName" disabled="true"/>
</el-form-item>
<el-form-item label="菜单类型" prop="type">
<el-radio-group v-model="sysMenu.type" :disabled="typeDisabled">
<el-radio :disabled="type0Disabled" :label="0">目录</el-radio>
<el-radio :disabled="type1Disabled" :label="1">菜单</el-radio>
<el-radio :disabled="type2Disabled" :label="2">按钮</el-radio>
<el-radio :label="0" :disabled="type0Disabled">目录</el-radio>
<el-radio :label="1" :disabled="type1Disabled">菜单</el-radio>
<el-radio :label="2" :disabled="type2Disabled">按钮</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="菜单名称" prop="name">
<el-input v-model="sysMenu.name" />
<el-input v-model="sysMenu.name"/>
</el-form-item>
<el-form-item v-if="sysMenu.type !== 2" label="图标" prop="icon">
<el-form-item label="图标" prop="icon" v-if="sysMenu.type !== 2">
<el-select v-model="sysMenu.icon" clearable>
<el-option v-for="item in iconList" :key="item.class" :label="item.class" :value="item.class">
<span style="float: left;">
<i :class="item.class" /> <!-- 如果动态显示图标，这里添加判断 -->
</span>
<span style="float: left;">
<i :class="item.class"></i> <!-- 如果动态显示图标，这里添加判断 -->
</span>
<span style="padding-left: 6px;">{{ item.class }}</span>
</el-option>
</el-select>
</el-form-item>
<el-form-item label="排序">
<el-input-number v-model="sysMenu.sortValue" :min="0" controls-position="right" />
<el-input-number v-model="sysMenu.sortValue" controls-position="right" :min="0" />
</el-form-item>
<el-form-item prop="path">
<span slot="label">
<el-tooltip content="访问的路由地址，如：`sysUser`" placement="top">
<i class="el-icon-question" />
</el-tooltip>
路由地址
</span>
<span slot="label">
<el-tooltip content="访问的路由地址，如：`sysUser`" placement="top">
<i class="el-icon-question"></i>
</el-tooltip>
路由地址
</span>
<el-input v-model="sysMenu.path" placeholder="请输入路由地址" />
</el-form-item>
<el-form-item v-if="sysMenu.type !== 0" prop="component">
<span slot="label">
<el-tooltip content="访问的组件路径，如：`system/user/index`，默认在`views`目录下" placement="top">
<i class="el-icon-question" />
</el-tooltip>
组件路径
</span>
<el-form-item prop="component" v-if="sysMenu.type !== 0">
<span slot="label">
<el-tooltip content="访问的组件路径，如：`system/user/index`，默认在`views`目录下" placement="top">
<i class="el-icon-question"></i>
</el-tooltip>
组件路径
</span>
<el-input v-model="sysMenu.component" placeholder="请输入组件路径" />
</el-form-item>
<el-form-item v-if="sysMenu.type === 2">
<el-input v-model="sysMenu.perms" maxlength="100" placeholder="请输入权限标识" />
<el-input v-model="sysMenu.perms" placeholder="请输入权限标识" maxlength="100" />
<span slot="label">
<el-tooltip
content="控制器中定义的权限字符，如：@PreAuthorize(hasAuthority('bnt.sysRole.list'))"
placement="top"
>
<i class="el-icon-question" />
</el-tooltip>
权限字符
</span>
<el-tooltip content="控制器中定义的权限字符，如：@PreAuthorize(hasAuthority('bnt.sysRole.list'))" placement="top">
<i class="el-icon-question"></i>
</el-tooltip>
权限字符
</span>
</el-form-item>
<el-form-item label="状态" prop="type">
<el-radio-group v-model="sysMenu.status">
@ -122,16 +103,16 @@
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button icon="el-icon-refresh-right" size="small" @click="dialogVisible = false">取 消</el-button>
<el-button icon="el-icon-check" size="small" type="primary" @click="saveOrUpdate()">确 定</el-button>
<el-button @click="dialogVisible = false" size="small" icon="el-icon-refresh-right">取 消</el-button>
<el-button type="primary" icon="el-icon-check" @click="saveOrUpdate()" size="small">确 定</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
import api from '@/api/system/sysMenu'
const defaultForm = {
id: '',
parentId: '',
@ -163,55 +144,55 @@ export default {
iconList: [
{
class: 'el-icon-s-tools'
class: "el-icon-s-tools",
},
{
class: 'el-icon-s-custom'
class: "el-icon-s-custom",
},
{
class: 'el-icon-setting'
class: "el-icon-setting",
},
{
class: 'el-icon-user-solid'
class: "el-icon-user-solid",
},
{
class: 'el-icon-s-help'
class: "el-icon-s-help",
},
{
class: 'el-icon-phone'
class: "el-icon-phone",
},
{
class: 'el-icon-s-unfold'
class: "el-icon-s-unfold",
},
{
class: 'el-icon-s-operation'
class: "el-icon-s-operation",
},
{
class: 'el-icon-more-outline'
class: "el-icon-more-outline",
},
{
class: 'el-icon-s-check'
class: "el-icon-s-check",
},
{
class: 'el-icon-tickets'
class: "el-icon-tickets",
},
{
class: 'el-icon-s-goods'
class: "el-icon-s-goods",
},
{
class: 'el-icon-document-remove'
class: "el-icon-document-remove",
},
{
class: 'el-icon-warning'
class: "el-icon-warning",
},
{
class: 'el-icon-warning-outline'
class: "el-icon-warning-outline",
},
{
class: 'el-icon-question'
class: "el-icon-question",
},
{
class: 'el-icon-info'
class: "el-icon-info",
}
]
}
@ -254,25 +235,25 @@ export default {
},
// -------------
add(row) {
// debugger
add(row){
debugger
this.typeDisabled = false
this.dialogTitle = '添加下级节点'
this.dialogVisible = true
this.sysMenu = Object.assign({}, defaultForm)
this.sysMenu.id = ''
if (row) {
if(row) {
this.sysMenu.parentId = row.id
this.sysMenu.parentName = row.name
// this.sysMenu.component = 'ParentView'
if (row.type === 0) {
//this.sysMenu.component = 'ParentView'
if(row.type === 0) {
this.sysMenu.type = 1
this.typeDisabled = false
this.type0Disabled = false
this.type1Disabled = false
this.type2Disabled = true
} else if (row.type === 1) {
} else if(row.type === 1) {
this.sysMenu.type = 2
this.typeDisabled = true
}
@ -286,7 +267,7 @@ export default {
},
edit(row) {
// debugger
debugger
this.dialogTitle = '修改节点'
this.dialogVisible = true
@ -295,7 +276,7 @@ export default {
},
saveOrUpdate() {
if (this.sysMenu.type === 0 && this.sysMenu.parentId !== 0) {
if(this.sysMenu.type === 0 && this.sysMenu.parentId !== 0) {
this.sysMenu.component = 'ParentView'
}
this.$refs.dataForm.validate(valid => {

48
src/views/system/sysRole/assignAuth.vue
View File

@ -4,25 +4,24 @@
授权角色：{{ $route.query.roleName }}
</div>
<el-tree
style="margin: 20px 0"
ref="tree"
:data="sysMenuList"
:props="defaultProps"
default-expand-all
node-key="id"
show-checkbox
style="margin: 20px 0"
default-expand-all
:props="defaultProps"
/>
<div style="padding: 20px 20px;">
<el-button :loading="loading" icon="el-icon-check" size="mini" type="primary" @click="save">保存</el-button>
<el-button icon="el-icon-refresh-right" size="mini" @click="$router.push('/system/sysRole')">返回</el-button>
<el-button :loading="loading" type="primary" icon="el-icon-check" size="mini" @click="save">保存</el-button>
<el-button @click="$router.push('/system/sysRole')" size="mini" icon="el-icon-refresh-right">返回</el-button>
</div>
</div>
</template>
<script>
import api from '@/api/system/sysMenu'
export default {
name: 'RoleAuth',
name: 'roleAuth',
data() {
return {
@ -31,8 +30,8 @@ export default {
defaultProps: {
children: 'children',
label: 'name'
}
}
},
};
},
created() {
@ -41,8 +40,8 @@ export default {
methods: {
/*
初始化
*/
初始化
*/
fetchData() {
const roleId = this.$route.query.id
api.toAssign(roleId).then(result => {
@ -55,9 +54,9 @@ export default {
},
/*
得到所有选中的id列表
*/
getCheckedIds(auths, initArr = []) {
得到所有选中的id列表
*/
getCheckedIds (auths, initArr = []) {
return auths.reduce((pre, item) => {
if (item.select && item.children.length === 0) {
pre.push(item.id)
@ -69,16 +68,17 @@ export default {
},
/*
保存权限列表
*/
保存权限列表
*/
save() {
// 获取到当前子节点
// const checkedNodes = this.$refs.tree.getCheckedNodes()
// 获取到当前子节点及父节点
const allCheckedNodes = this.$refs.tree.getCheckedNodes(false, true)
const idList = allCheckedNodes.map(node => node.id)
debugger
//获取到当前子节点
//const checkedNodes = this.$refs.tree.getCheckedNodes()
//获取到当前子节点及父节点
const allCheckedNodes = this.$refs.tree.getCheckedNodes(false, true);
let idList = allCheckedNodes.map(node => node.id);
console.log(idList)
const assginMenuVo = {
let assginMenuVo = {
roleId: this.$route.query.id,
menuIdList: idList
}
@ -86,9 +86,9 @@ export default {
api.doAssign(assginMenuVo).then(result => {
this.loading = false
this.$message.success(result.$message || '分配权限成功')
this.$router.push('/system/sysRole')
this.$router.push('/system/sysRole');
})
}
}
}
};
</script>

4
src/views/system/sysRole/list.vue
View File

@ -75,6 +75,7 @@
@click="removeDataById(scope.row.id)"
title="删除"
/>
<el-button type="warning" icon="el-icon-baseball" size="mini" @click="showAssignAuth(scope.row)" title="分配权限"/>
</template>
</el-table-column>
</el-table>
@ -145,6 +146,9 @@ export default {
},
// 定义方法
methods: {
showAssignAuth(row) {
this.$router.push('/system/assignAuth?id='+row.id+'&roleName='+row.roleName);
},
edit(id) {
this.dialogVisible = true;
this.fetchDataById(id);