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 14:03:28 +08:00
parent 21d7df2237
commit ccbb67c612
5 changed files with 101 additions and 123 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
src/api/api_sys.js
View File

@ -8,17 +8,25 @@ 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 apiSysUserSave = data => {
return http({ url: '/renren-fast-server/sys/user/save', method: 'post', data })
// 新增/编辑
export const apiSysUserConfirm = (data, type) => {
return http({ url: `/renren-fast-server/sys/user${type}`, method: 'post', data })
}
// 编辑管理员
export const apiSysUserUpdate = data => {
return http({ url: '/renren-fast-server/sys/user/update', method: 'post', data })
/**
* 角色管理
*/
// 角色管理列表
export const apiSysRoleList = params => {
return http({ url: '/renren-fast-server/sys/role/list', method: 'get', params })
}
// 角色管理列表
export const apiSysMenuList = params => {
return http({ url: '/renren-fast-server/sys/menu/list', method: 'get', params })
}

90
src/views/modules/sys/role-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="roleName">
<el-input v-model="dataForm.roleName" placeholder="角色名称"></el-input>
</el-form-item>
@ -23,13 +23,16 @@
</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>
<script>
import { treeDataTranslate } from '@/utils'
import { apiSysMenuList, apiSysUserConfirm } from '@/api/api_sys'
import { apiGetUserInfo } from '@/api/api_user'
export default {
data () {
return {
@ -45,63 +48,60 @@
remark: ''
},
dataRule: {
roleName: [
{ required: true, message: '角色名称不能为空', trigger: 'blur' }
]
roleName: [{ required: true, message: '角色名称不能为空', trigger: 'blur' }]
},
tempKey: -666666 // 临时key, 用于解决tree半选中状态项不能传给后台接口问题. # 待优化
tempKey: -666666, // 临时key, 用于解决tree半选中状态项不能传给后台接口问题. # 待优化
apiType: '' // api类型
}
},
methods: {
init (id) {
this.dataForm.id = id || 0
this.$http({
url: this.$http.adornUrl('/sys/menu/list'),
method: 'get',
params: this.$http.adornParams()
}).then(({data}) => {
this.menuList = treeDataTranslate(data, 'menuId')
}).then(() => {
if (id) {
this.dataForm.id = id || 0
this.handleEdit()
this.apiType = '/update'
} else {
this.handleAdd()
this.apiType = '/save'
}
},
// 新增
handleAdd (id) {
apiSysMenuList({}).then(res => {
this.menuList = treeDataTranslate(res, 'menuId')
this.visible = true
this.$nextTick(() => {
this.$refs['dataForm'].resetFields()
this.$refs.menuListTree.setCheckedKeys([])
})
}).then(() => {
if (this.dataForm.id) {
this.$http({
url: this.$http.adornUrl(`/sys/role/info/${this.dataForm.id}`),
method: 'get',
params: this.$http.adornParams()
}).then(({data}) => {
if (data && data.code === 0) {
this.dataForm.roleName = data.role.roleName
this.dataForm.remark = data.role.remark
var idx = data.role.menuIdList.indexOf(this.tempKey)
if (idx !== -1) {
data.role.menuIdList.splice(idx, data.role.menuIdList.length - idx)
}
this.$refs.menuListTree.setCheckedKeys(data.role.menuIdList)
}
})
})
},
// 编辑
handleEdit () {
apiGetUserInfo({}, `/${this.dataForm.id}`).then(res => {
if (res && res.code === 0) {
this.dataForm.roleName = res.role.roleName
this.dataForm.remark = res.role.remark
var idx = res.role.menuIdList.indexOf(this.tempKey)
if (idx !== -1) {
res.role.menuIdList.splice(idx, res.role.menuIdList.length - idx)
}
this.$refs.menuListTree.setCheckedKeys(res.role.menuIdList)
}
})
},
// 表单提交
dataFormSubmit () {
// 提交
handleConfirm () {
this.$refs['dataForm'].validate((valid) => {
if (valid) {
this.$http({
url: this.$http.adornUrl(`/sys/role/${!this.dataForm.id ? 'save' : 'update'}`),
method: 'post',
data: this.$http.adornData({
'roleId': this.dataForm.id || undefined,
'roleName': this.dataForm.roleName,
'remark': this.dataForm.remark,
'menuIdList': [].concat(this.$refs.menuListTree.getCheckedKeys(), [this.tempKey], this.$refs.menuListTree.getHalfCheckedKeys())
})
}).then(({data}) => {
if (data && data.code === 0) {
let params = {
'roleId': this.dataForm.id || undefined,
'roleName': this.dataForm.roleName,
'remark': this.dataForm.remark,
'menuIdList': [].concat(this.$refs.menuListTree.getCheckedKeys(), [this.tempKey], this.$refs.menuListTree.getHalfCheckedKeys())
}
apiSysUserConfirm(params, this.apiType).then(res => {
if (res && res.code === 0) {
this.$message({
message: '操作成功',
type: 'success',
@ -112,7 +112,7 @@
}
})
} else {
this.$message.error(data.msg)
this.$message.error(res.msg)
}
})
}

90
src/views/modules/sys/role.vue
View File

@ -1,59 +1,22 @@
<template>
<div class="mod-role">
<el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
<el-form :inline="true" :model="dataForm" @keyup.enter.native="handleGetTableList()">
<el-form-item>
<el-input v-model="dataForm.roleName" placeholder="角色名称" clearable></el-input>
</el-form-item>
<el-form-item>
<el-button @click="getDataList()">查询</el-button>
<el-button @click="handleGetTableList()">查询</el-button>
<el-button v-if="isAuth('sys:role:save')" type="primary" @click="addOrUpdateHandle()">新增</el-button>
<el-button v-if="isAuth('sys:role:delete')" type="danger" @click="deleteHandle()" :disabled="dataListSelections.length <= 0">批量删除</el-button>
</el-form-item>
</el-form>
<el-table
:data="dataList"
border
v-loading="dataListLoading"
@selection-change="selectionChangeHandle"
style="width: 100%;">
<el-table-column
type="selection"
header-align="center"
align="center"
width="50">
</el-table-column>
<el-table-column
prop="roleId"
header-align="center"
align="center"
width="80"
label="ID">
</el-table-column>
<el-table-column
prop="roleName"
header-align="center"
align="center"
label="角色名称">
</el-table-column>
<el-table-column
prop="remark"
header-align="center"
align="center"
label="备注">
</el-table-column>
<el-table-column
prop="createTime"
header-align="center"
align="center"
width="180"
label="创建时间">
</el-table-column>
<el-table-column
fixed="right"
header-align="center"
align="center"
width="150"
label="操作">
<el-table :data="dataList" border v-loading="dataListLoading" @selection-change="selectionChangeHandle" style="width: 100%;">
<el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column>
<el-table-column prop="roleId" header-align="center" align="center" width="80" label="ID"></el-table-column>
<el-table-column prop="roleName" header-align="center" align="center" label="角色名称"></el-table-column>
<el-table-column prop="remark" header-align="center" align="center" label="备注"></el-table-column>
<el-table-column prop="createTime" header-align="center" align="center" width="180" 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:role:update')" type="text" size="small" @click="addOrUpdateHandle(scope.row.roleId)">修改</el-button>
<el-button v-if="isAuth('sys:role:delete')" type="text" size="small" @click="deleteHandle(scope.row.roleId)">删除</el-button>
@ -70,12 +33,14 @@
layout="total, sizes, prev, pager, next, jumper">
</el-pagination>
<!-- 弹窗, 新增 / 修改 -->
<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 './role-add-or-update'
import { apiSysRoleList } from '@/api/api_sys'
export default {
data () {
return {
@ -95,24 +60,19 @@
AddOrUpdate
},
activated () {
this.getDataList()
this.handleGetTableList()
},
methods: {
// 获取数据列表
getDataList () {
this.dataListLoading = true
this.$http({
url: this.$http.adornUrl('/sys/role/list'),
method: 'get',
params: this.$http.adornParams({
'page': this.pageIndex,
'limit': this.pageSize,
'roleName': this.dataForm.roleName
})
}).then(({data}) => {
if (data && data.code === 0) {
this.dataList = data.page.list
this.totalPage = data.page.totalCount
handleGetTableList () {
apiSysRoleList({
'page': this.pageIndex,
'limit': this.pageSize,
'roleName': this.dataForm.roleName
}).then(res => {
if (res && res.code === 0) {
this.dataList = res.page.list
this.totalPage = res.page.totalCount
} else {
this.dataList = []
this.totalPage = 0
@ -124,12 +84,12 @@
sizeChangeHandle (val) {
this.pageSize = val
this.pageIndex = 1
this.getDataList()
this.handleGetTableList()
},
// 当前页
currentChangeHandle (val) {
this.pageIndex = val
this.getDataList()
this.handleGetTableList()
},
// 多选
selectionChangeHandle (val) {
@ -163,7 +123,7 @@
type: 'success',
duration: 1500,
onClose: () => {
this.getDataList()
this.handleGetTableList()
}
})
} else {

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

@ -40,7 +40,7 @@
<script>
import { isEmail, isMobile } from '@/utils/validate'
import { apiSysRoleSelect, apiSysUserSave, apiSysUserUpdate } from '@/api/api_sys'
import { apiSysRoleSelect, apiSysUserConfirm } from '@/api/api_sys'
import { apiGetUserInfo } from '@/api/api_user'
export default {
@ -102,7 +102,7 @@
{ validator: validateMobile, trigger: 'blur' }
]
},
apiName: '' // 新增/编辑接口名
apiType: '' // api类型
}
},
methods: {
@ -110,10 +110,10 @@
if (id) {
this.dataForm.id = id || 0
this.handleEdit()
this.apiName = apiSysUserUpdate
this.apiType = '/update'
} else {
this.handleAdd()
this.apiName = apiSysUserSave
this.apiType = '/save'
}
},
// 新增
@ -146,7 +146,17 @@
handleConfirm () {
this.$refs['dataForm'].validate((valid) => {
if (valid) {
this.apiName(this.dataForm).then(res => {
let params = {
'userId': this.dataForm.id || undefined,
'username': this.dataForm.userName,
'password': this.dataForm.password,
'salt': this.dataForm.salt,
'email': this.dataForm.email,
'mobile': this.dataForm.mobile,
'status': this.dataForm.status,
'roleIdList': this.dataForm.roleIdList
}
apiSysUserConfirm(params, this.apiType).then(res => {
if (res && res.code === 0) {
this.$message({
message: '操作成功',

2
src/views/modules/sys/user.vue
View File

@ -46,7 +46,7 @@
<script>
import AddOrUpdate from './user-add-or-update'
import { apiSysUserList } from '../../../api/api_sys'
import { apiSysUserList } from '@/api/api_sys'
export default {
data () {
return {