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

18
src/router/index.js
View File

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

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

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

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

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