This commit is contained in:
chenjianan
2019-07-18 11:45:07 +08:00
parent 99a20c8d7e
commit d8037ef3ae
8 changed files with 590 additions and 34 deletions

View File

@@ -0,0 +1,94 @@
import request from '@/utils/request'
// 初始化角色
export function getRole() {
return request({
url: '',
method: 'post',
data: {
type: '1',
name: '菜单系统模块_项目角色_查询数据_new'
}
})
}
// 根据角色查模块
export function getModule(role) {
return request({
url: '',
method: 'post',
data: {
type: '3',
name: `select * from 基础表_角色模块信息 inner join 基础表_模块信息 on 基础表_角色模块信息.id = 基础表_模块信息.id where 角色编号=${role} order by 模块顺序`
}
})
}
// 初始化一级菜单
export function initFisrtLevel() {
return request({
url: '',
method: 'post',
data: {
type: '3',
name: `select id,title from 基础表_模块信息 where [path] = '/'`
}
})
}
// 初始化二级菜单
export function initSecondLevel() {
return request({
url: '',
method: 'post',
data: {
type: '3',
name: `select id,title from 基础表_模块信息 where [path] <> '/'`
}
})
}
// 撤回分配模块
export function returnModule(id, num) {
return request({
url: '',
method: 'post',
data: {
type: '2',
name: `菜单管理_角色模块_删除数据`,
param: `id=${id}&角色编号=${num}`
}
})
}
// 分配一级模块
export function giveFirstLevel(idGroup, num) {
return request({
url: '',
method: 'post',
data: {
type: '2',
name: `菜单管理_角色模块_一级_增加数据`,
param: `一级模块id组=${idGroup}&角色编号=${num}`
}
})
}
// 分配一级模块
export function giveSecondLevel(idGroup, num, pid) {
return request({
url: '',
method: 'post',
data: {
type: '2',
name: `菜单管理_角色模块_二级_增加数据`,
param: `二级模块id组=${idGroup}&角色编号=${num}&pid=${pid}`
}
})
}
// 新增一级菜单
export function submitAdd(name) {
return request({
url: '',
method: 'post',
data: {
type: '2',
name: `菜单管理_模块_一级_增加数据`,
param: `模块名称=${name}`
}
})
}

View File

@@ -16,9 +16,11 @@ export function getInfo(token) {
url: '',
method: 'post',
data: {
type: '1',
name: '菜单系统模块_项目角色模块列表_查询数据gj',
param: `角色编号=${token}`
// type: '1',
// name: '菜单系统模块_项目角色模块列表_查询数据gj',
// param: `角色编号=${token}`
type: '3',
name: `select * from 基础表_角色模块信息 inner join 基础表_模块信息 on 基础表_角色模块信息.id = 基础表_模块信息.id where 角色编号=${token}`
}
})
}

View File

@@ -4,7 +4,7 @@ import { Message } from 'element-ui'
import NProgress from 'nprogress' // progress bar
import 'nprogress/nprogress.css'// progress bar style
import { getToken } from '@/utils/auth' // getToken from cookie
import getRouter from './router/getRouter'
NProgress.configure({ showSpinner: false })// NProgress Configuration
// permission judge function
@@ -13,25 +13,25 @@ function hasPermission(roles, permissionRoles) {
if (!permissionRoles) return true
return roles.some(role => permissionRoles.indexOf(role) >= 0)
}
function getRouter(data) {
const result = []
for (let i = 0; i < data.length; i++) {
const obj = {
'path': data[i].父路径,
'component': () => import(`@/views/layout/${data[i].父组件}`),
'children': [
{
'path': data[i].子路径,
'name': data[i].子名称,
'component': () => import(`@/views${data[i].子组件}`),
'meta': { 'title': data[i].标题, 'icon': data[i].图标 }
}
]
}
result.push(obj)
}
return result
}
// function getRouter(data) {
// const result = []
// for (let i = 0; i < data.length; i++) {
// const obj = {
// 'path': data[i].父路径,
// 'component': () => import(`@/views/layout/${data[i].父组件}`),
// 'children': [
// {
// 'path': data[i].子路径,
// 'name': data[i].子名称,
// 'component': () => import(`@/views${data[i].子组件}`),
// 'meta': { 'title': data[i].标题, 'icon': data[i].图标 }
// }
// ]
// }
// result.push(obj)
// }
// return result
// }
const whiteList = ['/login', '/auth-redirect']// no redirect whitelist
router.beforeEach((to, from, next) => {
@@ -45,7 +45,8 @@ router.beforeEach((to, from, next) => {
if (store.getters.roles.length === 0) { // 判断当前用户是否已拉取完user_info信息
store.dispatch('GetInfo').then(res => { // 拉取user_info
const data = res.data
const asyncRouterMap = getRouter(data)
const asyncRouterMap = getRouter(data, 0)
console.log(asyncRouterMap)
asyncRouterMap.push({ path: '*', redirect: '/404', hidden: true })
store.dispatch('GenerateRoutes', asyncRouterMap).then(() => { // 根据roles权限生成可访问的路由表
router.addRoutes(store.getters.addRouters) // 动态添加可访问路由表

16
src/router/getRouter.js Normal file
View File

@@ -0,0 +1,16 @@
export default function fn(data, pid) {
const result = []
let temp
for (let i = 0; i < data.length; i++) {
if (data[i].pid === pid) {
const obj = { 'path': data[i].path, 'component': () => import(`@/views${(data[i].component)}`), 'redirect': data[i].redirect, alwaysShow: true, 'name': data[i].name, meta: { 'title': data[i].title, 'icon': data[i].icon }}
temp = fn(data, data[i].id)
if (temp.length > 0) {
obj.children = temp
}
result.push(obj)
}
}
return result
}

View File

@@ -0,0 +1,396 @@
<template>
<div class="app-container">
<el-row>
<el-col :span="7">
<el-card style="margin-bottom: 20px">
<el-button size="small" type="primary" @click="addFisrtLevel">创建一级菜单</el-button>
</el-card>
<el-card>
<div slot="header">
<el-input v-model="filterTextLeft" size="small" placeholder="输入关键字进行过滤" clearable/>
</div>
<el-table
ref="multipleTableLeft"
:data="fisrtLevelFilter"
stripe
highlight-current-row
size="mini"
height="calc(100vh - 330px)"
style="height:calc(100vh - 330px);"
@selection-change="handleSelectionChangeLeft">
<el-table-column
:selectable="selectable"
align="center"
type="selection"
width="55"/>
<el-table-column align="center" label="模块名称">
<template slot-scope="scope">
{{ scope.row.title }}
</template>
</el-table-column>
</el-table>
</el-card>
</el-col>
<el-col :span="1">
<el-tooltip class="item" effect="dark" content="将选中一级菜单分配给该角色" placement="top-start">
<el-button :disabled="!roleName || selectLeft.length === 0" size="mini" type="primary" icon="el-icon-right" style="margin: 300px auto 0 auto;display: block" @click="giveFirstLevel"/>
</el-tooltip>
</el-col>
<el-col :span="8">
<el-card style="margin-bottom: 20px">
<span>角色:</span>
<el-select v-model="roleName" placeholder="请选择" size="small" style="width:200px;margin-left:10px" filterable @change="getModule">
<el-option
v-for="item in roleNames"
:key="item.value"
:label="item.label"
:value="item.value"/>
</el-select>
</el-card>
<el-card style="height:calc(100vh - 220px);overflow: auto">
<div slot="header">
<el-input v-model="filterText" size="small" placeholder="输入关键字进行过滤" clearable/>
</div>
<el-tree
ref="moduleTree"
:data="moduleTree"
:filter-node-method="filterNode"
check-strictly
class="moduleTree"
show-checkbox
node-key="id"
default-expand-all
@check-change="treeCheck">
<span slot-scope="{ node, data }" class="custom-tree-node">
<span>{{ node.label }}</span>
<span>
<el-button
:disabled="data.children && data.children.length!==0"
type="text"
size="mini"
@click="() => returnModule(node, data)">
移除
</el-button>
</span>
</span>
</el-tree>
</el-card>
</el-col>
<el-col :span="1">
<el-tooltip class="item" effect="dark" content="将选中二级菜单分配给该角色选中的一级菜单" placement="top-start">
<el-button :disabled="treeCheckList.length !== 1 || selectRight.length === 0 || treeCheckListJudge" size="mini" type="primary" icon="el-icon-back" style="margin: 300px auto 0 auto;display: block" @click="giveSecondLevel"/>
</el-tooltip>
</el-col>
<el-col :span="7">
<el-card style="margin-bottom: 20px">
<el-button size="small" type="primary" @click="addSecondLevel">创建二级菜单</el-button>
</el-card>
<el-card>
<div slot="header">
<el-input v-model="filterTextRight" size="small" placeholder="输入关键字进行过滤" clearable/>
</div>
<el-table
ref="multipleTableRight"
:data="secondLevelFilter"
stripe
highlight-current-row
size="mini"
height="calc(100vh - 330px)"
style="height:calc(100vh - 330px);"
@selection-change="handleSelectionChangeRight">
<el-table-column
:selectable="selectable"
align="center"
type="selection"
width="55"/>
<el-table-column align="center" label="模块名称">
<template slot-scope="scope">
{{ scope.row.title }}
</template>
</el-table-column>
</el-table>
</el-card>
</el-col>
</el-row>
<el-dialog :visible.sync="dialogVisible1" title="新增一级模块" center style="min-height: 300px" width="400px">
<el-form ref="form1" :model="form1" :rules="rules1" label-position="left" label-width="110px" class="demo-ruleForm">
<el-form-item label="模块名称" prop="moduleName">
<el-input
v-model="form1.moduleName"
size="small"
style="width:200px"/>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="dialogVisible1=false">取消</el-button>
<el-button type="primary" @click="submitAdd()">确定</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import { getRole, getModule, initFisrtLevel, initSecondLevel, returnModule, giveFirstLevel, giveSecondLevel, submitAdd } from '@/api/BasicData/MenuManagement'
export default {
name: 'MenuManagement',
data() {
return {
roleName: null,
roleNames: [],
filterText: '',
filterTextLeft: '',
filterTextRight: '',
allModuleId: [],
moduleTree: [],
fisrtLevel: [],
fisrtLevelFilter: [],
secondLevel: [],
secondLevelFilter: [],
selectLeft: [],
selectRight: [],
treeCheckList: [],
treeCheckListJudge: null,
dialogVisible1: false,
form1: {
moduleName: ''
},
rules1: {
moduleName: [{ required: true, message: '请输入', trigger: ['blur', 'change'] }]
}
}
},
watch: {
filterText(val) {
this.$refs.moduleTree.filter(val)
},
filterTextLeft(val) {
this.fisrtLevelFilter = this.fisrtLevel.filter(v => {
return v.title.indexOf(val) > -1
})
},
filterTextRight(val) {
this.secondLevelFilter = this.secondLevel.filter(v => {
return v.title.indexOf(val) > -1
})
}
},
created() {
this.getRoleName()
this.initFisrtLevel()
this.initSecondLevel()
},
methods: {
// 撤回分配模块
returnModule(node, data) {
this.$confirm('确定撤回分配模块?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
returnModule(data.id, this.roleName).then(response => {
if (response.data[0].result === '1') {
this.filterText = ''
this.filterTextLeft = ''
this.filterTextRight = ''
this.getModule()
this.initFisrtLevel()
this.initSecondLevel()
this.$message.success('操作成功')
} else { this.$message.error('操作失败') }
})
}).catch(() => {
this.$message({
type: 'info',
message: '取消操作'
})
})
},
// 分配一级
giveFirstLevel() {
this.$confirm('确定将选中的一级模块分配给选中角色?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
giveFirstLevel(this.selectLeft, this.roleName).then(response => {
if (response.data[0].result === '1') {
this.filterText = ''
this.filterTextLeft = ''
this.filterTextRight = ''
this.getModule()
this.initFisrtLevel()
this.initSecondLevel()
this.$message.success('操作成功')
} else { this.$message.error('操作失败') }
})
}).catch(() => {
this.$message({
type: 'info',
message: '取消操作'
})
})
},
// 分配二级
giveSecondLevel() {
if (this.$refs.moduleTree.getCheckedKeys().length === 1) {
this.$confirm('确定将选中的二级模块分配给选中角色的选中一级模块?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
giveSecondLevel(this.selectRight, this.roleName, this.$refs.moduleTree.getCheckedKeys()).then(response => {
if (response.data[0].result === '1') {
this.filterText = ''
this.filterTextLeft = ''
this.filterTextRight = ''
this.getModule()
this.initFisrtLevel()
this.initSecondLevel()
this.$message.success('操作成功')
} else { this.$message.error('操作失败') }
})
}).catch(() => {
this.$message({
type: 'info',
message: '取消操作'
})
})
} else {
this.$message.error('只可以分配给一个一级菜单')
}
},
// 控制某行是否可选
selectable(row) {
return !this.allModuleId.includes(row.id)
},
// 树checkChange
treeCheck() {
const param = []
this.treeCheckList = this.$refs.moduleTree.getCheckedKeys()
this.fisrtLevel.map(v => {
param.push(v.id)
})
this.treeCheckListJudge = !param.includes(parseInt(this.treeCheckList))
},
// leftChange
handleSelectionChangeLeft(val) {
this.selectLeft = []
val.map(v => {
this.selectLeft.push(v.id)
})
},
// rightChange
handleSelectionChangeRight(val) {
this.selectRight = []
val.map(v => {
this.selectRight.push(v.id)
})
},
// 初始化一级
initFisrtLevel() {
initFisrtLevel().then(res => {
this.fisrtLevel = res.data
this.fisrtLevelFilter = res.data
})
},
// 初始化二级
initSecondLevel() {
initSecondLevel().then(res => {
this.secondLevel = res.data
this.secondLevelFilter = res.data
})
},
// 新增一级
addFisrtLevel() {
if (this.$refs['form1'] !== undefined) {
this.$refs['form1'].resetFields()
}
this.form1.moduleName = ''
this.dialogVisible1 = true
},
// 确认新增一级
submitAdd() {
this.$refs['form1'].validate((valid) => {
if (valid) {
this.dialogVisible1 = false
submitAdd(this.form1.moduleName).then(response => {
if (response.data[0].result === '1') {
this.$message.success('操作成功')
this.dialogVisible1 = false
this.initFisrtLevel()
} else {
this.$message.error('操作失败')
}
})
} else {
console.log('error submit!!')
return false
}
})
},
// 新增二级
addSecondLevel() {
console.log(1)
},
// 递归
fn(data, pid) {
const result = []
let temp
for (let i = 0; i < data.length; i++) {
if (data[i].pid === pid) {
const obj = {
'id': data[i].id,
'label': data[i].title
}
temp = this.fn(data, data[i].id)
if (temp.length > 0) {
obj.children = temp
}
result.push(obj)
}
}
return result
},
// 初始化角色
getRoleName() {
getRole().then(response => {
for (let i = 0; i < response.data.length; i++) {
this.roleNames.push({
value: response.data[i].角色编号,
label: response.data[i].角色功能
})
}
})
},
// 根据角色查模块
getModule() {
this.$refs.multipleTableLeft.clearSelection()
this.$refs.multipleTableRight.clearSelection()
getModule(this.roleName).then(response => {
this.allModuleId = []
response.data.map(v => {
this.allModuleId.push(v.id)
})
this.moduleTree = this.fn(response.data, 0)
})
},
// 筛选节点
filterNode(value, data) {
if (!value) return true
return data.label.indexOf(value) !== -1
}
}
}
</script>
<style scoped>
.custom-tree-node {
flex: 1;
display: flex;
align-items: center;
justify-content: space-between;
font-size: 14px;
padding-right: 8px;
}
</style>

View File

@@ -51,9 +51,8 @@ export default {
url: '',
method: 'post',
data: {
type: '1',
name: '菜单系统模块_项目角色模块列表_消息通知',
param: '角色编号=' + this.token
type: '3',
name: `select * from 基础表_角色模块信息 inner join 基础表_模块信息 on 基础表_角色模块信息.id = 基础表_模块信息.id where 角色编号=${this.token} and 是否通知 = 1`
}
}).then(data => {
this.sudokus = []
@@ -72,10 +71,10 @@ export default {
}
}).then(res => {
this.sudokus.push({
id: rawData.data[i].主模块编号,
name: rawData.data[i].标题,
icon: rawData.data[i].图标,
router: `${rawData.data[i].父路径}/${rawData.data[i].子路径}`,
id: rawData.data[i].id,
name: rawData.data[i].title,
icon: rawData.data[i].icon,
router: rawData.data[i].path,
value: res.data[0].Column1
})
})

View File

@@ -68,7 +68,7 @@ export default {
title: '提示',
message: '您有采购合同待审批,请及时处理,点击查看',
onClick: () => {
this.$router.push({ path: '/PurchaseContractApproval/index' })
this.$router.push({ path: '/PurchasingCenter/PurchaseContractApproval' })
setTimeout(this.noticeContract.close(), 1000)
},
duration: 1000 * 60
@@ -91,7 +91,7 @@ export default {
title: '提示',
message: '您有合同请款申请待审批,请及时处理,点击查看',
onClick: () => {
this.$router.push({ path: '/FundApproval2/index' })
this.$router.push({ path: '/PurchasingCenter/FundApproval2' })
setTimeout(this.noticeFund.close(), 1000)
},
duration: 1000 * 60 * 5
@@ -105,7 +105,7 @@ export default {
title: '提示',
message: '您有发票结算申请待审批,请及时处理,点击查看',
onClick: () => {
this.$router.push({ path: '/InvoiceSettlementApprove/index' })
this.$router.push({ path: '/PurchasingCenter/InvoiceSettlementApprove' })
setTimeout(this.noticeInvoice.close(), 1000)
},
duration: 1000 * 60 * 5

View File

@@ -0,0 +1,48 @@
<template>
<div class="menu-wrapper">
<template v-for="item in routes" v-if="!item.hidden&&item.children">
<!--一级-->
<router-link v-if="item.children.length===1 && !item.children[0].children" :to="item.path+'/'+item.children[0].path" :key="item.children[0].name">
<el-menu-item :index="item.path+'/'+item.children[0].path" :class="{'submenu-title-noDropdown':!isNest}">
<svg-icon v-if="item.children[0].meta&&item.children[0].meta.icon" :icon-class="item.children[0].meta.icon"/>
<span v-if="item.children[0].meta&&item.children[0].meta.title">{{ item.children[0].meta.title }}</span>
</el-menu-item>
</router-link>
<!--二级-->
<el-submenu v-else :index="item.name||item.path" :key="item.name">
<template slot="title">
<svg-icon v-if="item.meta&&item.meta.icon" :icon-class="item.meta.icon"/>
<span v-if="item.meta&&item.meta.title">{{ item.meta.title }}</span>
</template>
<template v-for="child in item.children" v-if="!child.hidden">
<sidebar-item v-if="child.children&&child.children.length>0" :routes="[child]" :key="child.path" :is-nest="true" class="nest-menu"/>
<router-link v-else :to="item.path+child.path" :key="child.name">
<el-menu-item :index="item.path+'/'+child.path">
<svg-icon v-if="child.meta&&child.meta.icon" :icon-class="child.meta.icon"/>
<span v-if="child.meta&&child.meta.title">{{ child.meta.title }}</span>
{{ item.path+'/'+child.path }}
</el-menu-item>
</router-link>
</template>
</el-submenu>
</template>
</div>
</template>
<script>
export default {
name: 'SidebarItem',
props: {
routes: {
type: Array,
default: null
},
isNest: {
type: Boolean,
default: false
}
}
}
</script>