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 }) return http({ url: '/renren-fast-server/sys/user/list', method: 'get', params })
} }
// 获取管理员列表 // 获取角色列表
export const apiSysRoleSelect = params => { export const apiSysRoleSelect = params => {
return http({ url: '/renren-fast-server/sys/role/select', method: 'get', params }) return http({ url: '/renren-fast-server/sys/role/select', method: 'get', params })
} }
// 新增管理员 // 新增/编辑
export const apiSysUserSave = data => { export const apiSysUserConfirm = (data, type) => {
return http({ url: '/renren-fast-server/sys/user/save', method: 'post', data }) 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 ? '新增' : '修改'" :title="!dataForm.id ? '新增' : '修改'"
:close-on-click-modal="false" :close-on-click-modal="false"
:visible.sync="visible"> :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-form-item label="角色名称" prop="roleName">
<el-input v-model="dataForm.roleName" placeholder="角色名称"></el-input> <el-input v-model="dataForm.roleName" placeholder="角色名称"></el-input>
</el-form-item> </el-form-item>
@ -23,13 +23,16 @@
</el-form> </el-form>
<span slot="footer" class="dialog-footer"> <span slot="footer" class="dialog-footer">
<el-button @click="visible = false">取消</el-button> <el-button @click="visible = false">取消</el-button>
<el-button type="primary" @click="dataFormSubmit()">确定</el-button> <el-button type="primary" @click="handleConfirm()">确定</el-button>
</span> </span>
</el-dialog> </el-dialog>
</template> </template>
<script> <script>
import { treeDataTranslate } from '@/utils' import { treeDataTranslate } from '@/utils'
import { apiSysMenuList, apiSysUserConfirm } from '@/api/api_sys'
import { apiGetUserInfo } from '@/api/api_user'
export default { export default {
data () { data () {
return { return {
@ -45,63 +48,60 @@
remark: '' remark: ''
}, },
dataRule: { dataRule: {
roleName: [ roleName: [{ required: true, message: '角色名称不能为空', trigger: 'blur' }]
{ required: true, message: '角色名称不能为空', trigger: 'blur' }
]
}, },
tempKey: -666666 // 临时key, 用于解决tree半选中状态项不能传给后台接口问题. # 待优化 tempKey: -666666, // 临时key, 用于解决tree半选中状态项不能传给后台接口问题. # 待优化
apiType: '' // api类型
} }
}, },
methods: { methods: {
init (id) { init (id) {
this.dataForm.id = id || 0 if (id) {
this.$http({ this.dataForm.id = id || 0
url: this.$http.adornUrl('/sys/menu/list'), this.handleEdit()
method: 'get', this.apiType = '/update'
params: this.$http.adornParams() } else {
}).then(({data}) => { this.handleAdd()
this.menuList = treeDataTranslate(data, 'menuId') this.apiType = '/save'
}).then(() => { }
},
// 新增
handleAdd (id) {
apiSysMenuList({}).then(res => {
this.menuList = treeDataTranslate(res, 'menuId')
this.visible = true this.visible = true
this.$nextTick(() => { this.$nextTick(() => {
this.$refs['dataForm'].resetFields() this.$refs['dataForm'].resetFields()
this.$refs.menuListTree.setCheckedKeys([]) this.$refs.menuListTree.setCheckedKeys([])
}) })
}).then(() => { })
if (this.dataForm.id) { },
this.$http({ // 编辑
url: this.$http.adornUrl(`/sys/role/info/${this.dataForm.id}`), handleEdit () {
method: 'get', apiGetUserInfo({}, `/${this.dataForm.id}`).then(res => {
params: this.$http.adornParams() if (res && res.code === 0) {
}).then(({data}) => { this.dataForm.roleName = res.role.roleName
if (data && data.code === 0) { this.dataForm.remark = res.role.remark
this.dataForm.roleName = data.role.roleName var idx = res.role.menuIdList.indexOf(this.tempKey)
this.dataForm.remark = data.role.remark if (idx !== -1) {
var idx = data.role.menuIdList.indexOf(this.tempKey) res.role.menuIdList.splice(idx, res.role.menuIdList.length - idx)
if (idx !== -1) { }
data.role.menuIdList.splice(idx, data.role.menuIdList.length - idx) this.$refs.menuListTree.setCheckedKeys(res.role.menuIdList)
}
this.$refs.menuListTree.setCheckedKeys(data.role.menuIdList)
}
})
} }
}) })
}, },
// 表单提交 // 提交
dataFormSubmit () { handleConfirm () {
this.$refs['dataForm'].validate((valid) => { this.$refs['dataForm'].validate((valid) => {
if (valid) { if (valid) {
this.$http({ let params = {
url: this.$http.adornUrl(`/sys/role/${!this.dataForm.id ? 'save' : 'update'}`), 'roleId': this.dataForm.id || undefined,
method: 'post', 'roleName': this.dataForm.roleName,
data: this.$http.adornData({ 'remark': this.dataForm.remark,
'roleId': this.dataForm.id || undefined, 'menuIdList': [].concat(this.$refs.menuListTree.getCheckedKeys(), [this.tempKey], this.$refs.menuListTree.getHalfCheckedKeys())
'roleName': this.dataForm.roleName, }
'remark': this.dataForm.remark, apiSysUserConfirm(params, this.apiType).then(res => {
'menuIdList': [].concat(this.$refs.menuListTree.getCheckedKeys(), [this.tempKey], this.$refs.menuListTree.getHalfCheckedKeys()) if (res && res.code === 0) {
})
}).then(({data}) => {
if (data && data.code === 0) {
this.$message({ this.$message({
message: '操作成功', message: '操作成功',
type: 'success', type: 'success',
@ -112,7 +112,7 @@
} }
}) })
} else { } 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> <template>
<div class="mod-role"> <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-form-item>
<el-input v-model="dataForm.roleName" placeholder="角色名称" clearable></el-input> <el-input v-model="dataForm.roleName" placeholder="角色名称" clearable></el-input>
</el-form-item> </el-form-item>
<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: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-button v-if="isAuth('sys:role:delete')" type="danger" @click="deleteHandle()" :disabled="dataListSelections.length <= 0">批量删除</el-button>
</el-form-item> </el-form-item>
</el-form> </el-form>
<el-table <el-table :data="dataList" border v-loading="dataListLoading" @selection-change="selectionChangeHandle" style="width: 100%;">
:data="dataList" <el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column>
border <el-table-column prop="roleId" header-align="center" align="center" width="80" label="ID"></el-table-column>
v-loading="dataListLoading" <el-table-column prop="roleName" header-align="center" align="center" label="角色名称"></el-table-column>
@selection-change="selectionChangeHandle" <el-table-column prop="remark" header-align="center" align="center" label="备注"></el-table-column>
style="width: 100%;"> <el-table-column prop="createTime" header-align="center" align="center" width="180" label="创建时间"></el-table-column>
<el-table-column <el-table-column fixed="right" header-align="center" align="center" width="150" label="操作">
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"> <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: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> <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"> layout="total, sizes, prev, pager, next, jumper">
</el-pagination> </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> </div>
</template> </template>
<script> <script>
import AddOrUpdate from './role-add-or-update' import AddOrUpdate from './role-add-or-update'
import { apiSysRoleList } from '@/api/api_sys'
export default { export default {
data () { data () {
return { return {
@ -95,24 +60,19 @@
AddOrUpdate AddOrUpdate
}, },
activated () { activated () {
this.getDataList() this.handleGetTableList()
}, },
methods: { methods: {
// 获取数据列表 // 获取数据列表
getDataList () { handleGetTableList () {
this.dataListLoading = true apiSysRoleList({
this.$http({ 'page': this.pageIndex,
url: this.$http.adornUrl('/sys/role/list'), 'limit': this.pageSize,
method: 'get', 'roleName': this.dataForm.roleName
params: this.$http.adornParams({ }).then(res => {
'page': this.pageIndex, if (res && res.code === 0) {
'limit': this.pageSize, this.dataList = res.page.list
'roleName': this.dataForm.roleName this.totalPage = res.page.totalCount
})
}).then(({data}) => {
if (data && data.code === 0) {
this.dataList = data.page.list
this.totalPage = data.page.totalCount
} else { } else {
this.dataList = [] this.dataList = []
this.totalPage = 0 this.totalPage = 0
@ -124,12 +84,12 @@
sizeChangeHandle (val) { sizeChangeHandle (val) {
this.pageSize = val this.pageSize = val
this.pageIndex = 1 this.pageIndex = 1
this.getDataList() this.handleGetTableList()
}, },
// 当前页 // 当前页
currentChangeHandle (val) { currentChangeHandle (val) {
this.pageIndex = val this.pageIndex = val
this.getDataList() this.handleGetTableList()
}, },
// 多选 // 多选
selectionChangeHandle (val) { selectionChangeHandle (val) {
@ -163,7 +123,7 @@
type: 'success', type: 'success',
duration: 1500, duration: 1500,
onClose: () => { onClose: () => {
this.getDataList() this.handleGetTableList()
} }
}) })
} else { } else {

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

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

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

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