wulin/wl_management_vue
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

update 管理员列表/角色/菜单 编辑提交

Browse Source
This commit is contained in:
yoe 2020-05-08 15:06:52 +08:00
parent ccbb67c612
commit 33a83027aa
5 changed files with 133 additions and 167 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
src/api/api_sys.js
View File

@ -8,12 +8,17 @@ export const apiSysUserList = params => {
return http({ url: '/renren-fast-server/sys/user/list', method: 'get', params })
}
// 获取角色列表
// 获取角色选择列表
export const apiSysRoleSelect = params => {
return http({ url: '/renren-fast-server/sys/role/select', method: 'get', params })
}
// 新增/编辑
// 用户编辑
export const apiSysUserInfo = (params, id) => {
return http({ url: `/renren-fast-server/sys/user/info${id}`, method: 'get', params })
}
// 提交（用户）
export const apiSysUserConfirm = (data, type) => {
return http({ url: `/renren-fast-server/sys/user${type}`, method: 'post', data })
}
@ -26,7 +31,35 @@ export const apiSysRoleList = params => {
return http({ url: '/renren-fast-server/sys/role/list', method: 'get', params })
}
// 角色管理列表
// 角色编辑
export const apiSysRoleInfo = (params, id) => {
return http({ url: `/renren-fast-server/sys/role/info${id}`, method: 'get', params })
}
// 角色提交
export const apiSysRoleConfirm = (data, type) => {
return http({ url: `/renren-fast-server/sys/role${type}`, method: 'post', data })
}
/**
* 菜单管理
*/
// 菜单管理列表
export const apiSysMenuList = params => {
return http({ url: '/renren-fast-server/sys/menu/list', method: 'get', params })
}
// 获取菜单选择列表
export const apiSysMenuSelect = params => {
return http({ url: '/renren-fast-server/sys/menu/select', method: 'get', params })
}
// 菜单编辑
export const apiSysMenuInfo = (params, id) => {
return http({ url: `/renren-fast-server/sys/menu/info${id}`, method: 'get', params })
}
// 菜单提交
export const apiSysMenuConfirm = (data, type) => {
return http({ url: `/renren-fast-server/sys/menu${type}`, method: 'post', data })
}

153
src/views/modules/sys/menu-add-or-update.vue
View File

@ -3,7 +3,7 @@
:title="!dataForm.id ? '新增' : '修改'"
:close-on-click-modal="false"
:visible.sync="visible">
<el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()" label-width="80px">
<el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="handleConfirm()" label-width="80px">
<el-form-item label="类型" prop="type">
<el-radio-group v-model="dataForm.type">
<el-radio v-for="(type, index) in dataForm.typeList" :label="index" :key="index">{{ type }}</el-radio>
@ -13,10 +13,7 @@
<el-input v-model="dataForm.name" :placeholder="dataForm.typeList[dataForm.type] + '名称'"></el-input>
</el-form-item>
<el-form-item label="上级菜单" prop="parentName">
<el-popover
ref="menuListPopover"
placement="bottom-start"
trigger="click">
<el-popover ref="menuListPopover" placement="bottom-start" trigger="click">
<el-tree
:data="menuList"
:props="menuListTreeProps"
@ -42,11 +39,7 @@
<el-form-item v-if="dataForm.type !== 2" label="菜单图标" prop="icon">
<el-row>
<el-col :span="22">
<el-popover
ref="iconListPopover"
placement="bottom-start"
trigger="click"
popper-class="mod-menu__icon-popover">
<el-popover ref="iconListPopover" placement="bottom-start" trigger="click" popper-class="mod-menu__icon-popover">
<div class="mod-menu__icon-inner">
<div class="mod-menu__icon-list">
<el-button
@ -72,7 +65,7 @@
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="visible = false">取消</el-button>
<el-button type="primary" @click="dataFormSubmit()">确定</el-button>
<el-button type="primary" @click="handleConfirm()">确定</el-button>
</span>
</el-dialog>
</template>
@ -80,6 +73,8 @@
<script>
import { treeDataTranslate } from '@/utils'
import Icon from '@/icons'
import { apiSysMenuSelect, apiSysMenuInfo, apiSysMenuConfirm } from '@/api/api_sys'
export default {
data () {
var validateUrl = (rule, value, callback) => {
@ -105,21 +100,16 @@
iconList: []
},
dataRule: {
name: [
{ required: true, message: '菜单名称不能为空', trigger: 'blur' }
],
parentName: [
{ required: true, message: '上级菜单不能为空', trigger: 'change' }
],
url: [
{ validator: validateUrl, trigger: 'blur' }
]
name: [{ required: true, message: '菜单名称不能为空', trigger: 'blur' }],
parentName: [{ required: true, message: '上级菜单不能为空', trigger: 'change' }],
url: [{ validator: validateUrl, trigger: 'blur' }]
},
menuList: [],
menuListTreeProps: {
label: 'name',
children: 'children'
}
},
apiType: '' // api类型
}
},
created () {
@ -127,38 +117,68 @@
},
methods: {
init (id) {
this.dataForm.id = id || 0
this.$http({
url: this.$http.adornUrl('/sys/menu/select'),
method: 'get',
params: this.$http.adornParams()
}).then(({data}) => {
this.menuList = treeDataTranslate(data.menuList, 'menuId')
}).then(() => {
this.handleGetSysMenuSelect()
if (id) {
this.dataForm.id = id || 0
this.apiType = '/update'
this.handleEdit()
} else { // 新增
this.apiType = '/save'
}
},
// 获取下拉选择的菜单列表
handleGetSysMenuSelect () {
apiSysMenuSelect({}).then(res => {
this.menuList = treeDataTranslate(res.menuList, 'menuId')
this.visible = true
this.$nextTick(() => {
this.$refs['dataForm'].resetFields()
})
}).then(() => {
if (!this.dataForm.id) {
// 新增
this.menuListTreeSetCurrentNode()
} else {
// 修改
this.$http({
url: this.$http.adornUrl(`/sys/menu/info/${this.dataForm.id}`),
method: 'get',
params: this.$http.adornParams()
}).then(({data}) => {
this.dataForm.id = data.menu.menuId
this.dataForm.type = data.menu.type
this.dataForm.name = data.menu.name
this.dataForm.parentId = data.menu.parentId
this.dataForm.url = data.menu.url
this.dataForm.perms = data.menu.perms
this.dataForm.orderNum = data.menu.orderNum
this.dataForm.icon = data.menu.icon
this.menuListTreeSetCurrentNode()
})
})
},
// 编辑
handleEdit () {
apiSysMenuInfo({}, `/${this.dataForm.id}`).then(res => {
this.dataForm.id = res.menu.menuId
this.dataForm.type = res.menu.type
this.dataForm.name = res.menu.name
this.dataForm.parentId = res.menu.parentId
this.dataForm.url = res.menu.url
this.dataForm.perms = res.menu.perms
this.dataForm.orderNum = res.menu.orderNum
this.dataForm.icon = res.menu.icon
this.menuListTreeSetCurrentNode()
})
},
// 提交
handleConfirm () {
this.$refs['dataForm'].validate((valid) => {
if (valid) {
let params = {
'menuId': this.dataForm.id || undefined,
'type': this.dataForm.type,
'name': this.dataForm.name,
'parentId': this.dataForm.parentId,
'url': this.dataForm.url,
'perms': this.dataForm.perms,
'orderNum': this.dataForm.orderNum,
'icon': this.dataForm.icon
}
apiSysMenuConfirm(params, this.apiType).then(res => {
if (res && res.code === 0) {
this.$message({
message: '操作成功',
type: 'success',
duration: 1500,
onClose: () => {
this.visible = false
this.$emit('refreshDataList')
}
})
} else {
this.$message.error(res.msg)
}
})
}
})
@ -176,41 +196,6 @@
// 图标选中
iconActiveHandle (iconName) {
this.dataForm.icon = iconName
},
// 表单提交
dataFormSubmit () {
this.$refs['dataForm'].validate((valid) => {
if (valid) {
this.$http({
url: this.$http.adornUrl(`/sys/menu/${!this.dataForm.id ? 'save' : 'update'}`),
method: 'post',
data: this.$http.adornData({
'menuId': this.dataForm.id || undefined,
'type': this.dataForm.type,
'name': this.dataForm.name,
'parentId': this.dataForm.parentId,
'url': this.dataForm.url,
'perms': this.dataForm.perms,
'orderNum': this.dataForm.orderNum,
'icon': this.dataForm.icon
})
}).then(({data}) => {
if (data && data.code === 0) {
this.$message({
message: '操作成功',
type: 'success',
duration: 1500,
onClose: () => {
this.visible = false
this.$emit('refreshDataList')
}
})
} else {
this.$message.error(data.msg)
}
})
}
})
}
}
}

84
src/views/modules/sys/menu.vue
View File

@ -5,72 +5,25 @@
<el-button v-if="isAuth('sys:menu:save')" type="primary" @click="addOrUpdateHandle()">新增</el-button>
</el-form-item>
</el-form>
<el-table
:data="dataList"
row-key="menuId"
border
style="width: 100%; ">
<el-table-column
prop="name"
header-align="center"
min-width="150"
label="名称" >
</el-table-column>
<el-table-column
prop="parentName"
header-align="center"
align="center"
width="120"
label="上级菜单">
</el-table-column>
<el-table-column
header-align="center"
align="center"
label="图标">
<el-table :data="dataList" row-key="menuId" border style="width: 100%;">
<el-table-column prop="name" header-align="center" min-width="150" label="名称"></el-table-column>
<el-table-column prop="parentName" header-align="center" align="center" width="120" label="上级菜单"></el-table-column>
<el-table-column header-align="center" align="center" label="图标">
<template slot-scope="scope">
<icon-svg :name="scope.row.icon || ''"></icon-svg>
</template>
</el-table-column>
<el-table-column
prop="type"
header-align="center"
align="center"
label="类型">
<el-table-column prop="type" header-align="center" align="center" label="类型">
<template slot-scope="scope">
<el-tag v-if="scope.row.type === 0" size="small">目录</el-tag>
<el-tag v-else-if="scope.row.type === 1" size="small" type="success">菜单</el-tag>
<el-tag v-else-if="scope.row.type === 2" size="small" type="info">按钮</el-tag>
</template>
</el-table-column>
<el-table-column
prop="orderNum"
header-align="center"
align="center"
label="排序号">
</el-table-column>
<el-table-column
prop="url"
header-align="center"
align="center"
width="150"
:show-overflow-tooltip="true"
label="菜单URL">
</el-table-column>
<el-table-column
prop="perms"
header-align="center"
align="center"
width="150"
:show-overflow-tooltip="true"
label="授权标识">
</el-table-column>
<el-table-column
fixed="right"
header-align="center"
align="center"
width="150"
label="操作">
<el-table-column prop="orderNum" header-align="center" align="center" label="排序号"></el-table-column>
<el-table-column prop="url" header-align="center" align="center" width="150" :show-overflow-tooltip="true" label="菜单URL"></el-table-column>
<el-table-column prop="perms" header-align="center" align="center" width="150" :show-overflow-tooltip="true" label="授权标识"></el-table-column>
<el-table-column fixed="right" header-align="center" align="center" width="150" label="操作">
<template slot-scope="scope">
<el-button v-if="isAuth('sys:menu:update')" type="text" size="small" @click="addOrUpdateHandle(scope.row.menuId)">修改</el-button>
<el-button v-if="isAuth('sys:menu:delete')" type="text" size="small" @click="deleteHandle(scope.row.menuId)">删除</el-button>
@ -78,13 +31,15 @@
</el-table-column>
</el-table>
<!-- 弹窗, 新增 / 修改 -->
<add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
<add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="handleGetTableList"></add-or-update>
</div>
</template>
<script>
import AddOrUpdate from './menu-add-or-update'
import { treeDataTranslate } from '@/utils'
import { apiSysMenuList } from '@/api/api_sys'
export default {
data () {
return {
@ -98,18 +53,13 @@
AddOrUpdate
},
activated () {
this.getDataList()
this.handleGetTableList()
},
methods: {
// 获取数据列表
getDataList () {
this.dataListLoading = true
this.$http({
url: this.$http.adornUrl('/sys/menu/list'),
method: 'get',
params: this.$http.adornParams()
}).then(({data}) => {
this.dataList = treeDataTranslate(data, 'menuId')
handleGetTableList () {
apiSysMenuList({}).then(res => {
this.dataList = treeDataTranslate(res, 'menuId')
this.dataListLoading = false
})
},
@ -138,7 +88,7 @@
type: 'success',
duration: 1500,
onClose: () => {
this.getDataList()
this.handleGetTableList()
}
})
} else {

13
src/views/modules/sys/role-add-or-update.vue
View File

@ -30,8 +30,7 @@
<script>
import { treeDataTranslate } from '@/utils'
import { apiSysMenuList, apiSysUserConfirm } from '@/api/api_sys'
import { apiGetUserInfo } from '@/api/api_user'
import { apiSysMenuList, apiSysRoleInfo, apiSysRoleConfirm } from '@/api/api_sys'
export default {
data () {
@ -56,17 +55,17 @@
},
methods: {
init (id) {
this.handleGetSysMenuList()
if (id) {
this.dataForm.id = id || 0
this.handleEdit()
this.apiType = '/update'
} else {
this.handleAdd()
this.apiType = '/save'
}
},
// 新增
handleAdd (id) {
// 获取权限列表
handleGetSysMenuList () {
apiSysMenuList({}).then(res => {
this.menuList = treeDataTranslate(res, 'menuId')
this.visible = true
@ -78,7 +77,7 @@
},
// 编辑
handleEdit () {
apiGetUserInfo({}, `/${this.dataForm.id}`).then(res => {
apiSysRoleInfo({}, `/${this.dataForm.id}`).then(res => {
if (res && res.code === 0) {
this.dataForm.roleName = res.role.roleName
this.dataForm.remark = res.role.remark
@ -100,7 +99,7 @@
'remark': this.dataForm.remark,
'menuIdList': [].concat(this.$refs.menuListTree.getCheckedKeys(), [this.tempKey], this.$refs.menuListTree.getHalfCheckedKeys())
}
apiSysUserConfirm(params, this.apiType).then(res => {
apiSysRoleConfirm(params, this.apiType).then(res => {
if (res && res.code === 0) {
this.$message({
message: '操作成功',

11
src/views/modules/sys/user-add-or-update.vue
View File

@ -40,8 +40,7 @@
<script>
import { isEmail, isMobile } from '@/utils/validate'
import { apiSysRoleSelect, apiSysUserConfirm } from '@/api/api_sys'
import { apiGetUserInfo } from '@/api/api_user'
import { apiSysUserInfo, apiSysRoleSelect, apiSysUserConfirm } from '@/api/api_sys'
export default {
data () {
@ -107,17 +106,17 @@
},
methods: {
init (id) {
this.handleGetSysRoleSelect()
if (id) {
this.dataForm.id = id || 0
this.handleEdit()
this.apiType = '/update'
} else {
this.handleAdd()
this.apiType = '/save'
}
},
// 新增
handleAdd (id) {
// 获取角色选择列表
handleGetSysRoleSelect (id) {
apiSysRoleSelect({}).then(res => {
this.roleList = res && res.code === 0 ? res.list : []
this.visible = true
@ -128,7 +127,7 @@
},
// 编辑
handleEdit () {
apiGetUserInfo({}, `/${this.dataForm.id}`).then(res => {
apiSysUserInfo({}, `/${this.dataForm.id}`).then(res => {
if (res && res.code === 0) {
this.$nextTick(() => {
this.dataForm.username = res.user.username