<template>
|
<div>
|
<h4 class="d-flex flex-wrap justify-content-between align-items-center pt-2 mb-2">
|
<div class="mb-2">角色管理</div>
|
<div class="mb-2" style="max-width: 200px;">
|
<fButton
|
type="warning"
|
@click.native="handleAdd"
|
authority="sys:role:add"
|
>
|
<span class="fas fa-plus pr10"></span>
|
添加角色
|
</fButton>
|
</div>
|
</h4>
|
<b-card>
|
<b-card-header header-tag="h4" class="media flex-wrap align-items-center">
|
<div>
|
<span style="font-size: 16px">角色名称：</span>
|
<b-input
|
v-model="name"
|
autocomplete="off"
|
placeholder="请输入角色名称"
|
@keyup.native.enter="fetchRoleList"
|
class="mr10"
|
style="width: 200px; display: inline-block"
|
/>
|
<b-btn
|
variant="primary"
|
@click="fetchRoleList"
|
>
|
<span class="fas fa-search"></span>
|
搜索
|
</b-btn>
|
</div>
|
</b-card-header>
|
<Table
|
class="pl20 pr20 pt10 pb30"
|
:data="roleList"
|
>
|
<TableColumn
|
type="index"
|
label="序号"
|
:index="index"
|
width="120"
|
/>
|
<TableColumn
|
label="角色名称"
|
prop="name"
|
/>
|
<TableColumn
|
label="创建时间"
|
prop="createTime"
|
:formatter="createTime"
|
/>
|
<TableColumn
|
label="操作"
|
>
|
<template
|
slot-scope="scope"
|
>
|
<fButton
|
type="link"
|
@click.native="handleEdit(scope.row)"
|
authority="sys:role:edit"
|
>
|
编辑
|
</fButton>
|
<fButton
|
type="link"
|
@click.native="handleRole(scope.row.id, scope.row.orgId)"
|
authority="sys:role:permission"
|
>
|
权限设置
|
</fButton>
|
<fButton
|
type="link"
|
@click.native="handleDel(scope.row.id)"
|
authority="sys:role:delete"
|
>
|
删除
|
</fButton>
|
</template>
|
</TableColumn>
|
</Table>
|
<div class="pt20">
|
<b-pagination class="justify-content-center justify-content-sm-end m-0"
|
v-if="total"
|
v-model="currentPage"
|
@change="changePage"
|
:total-rows="total"
|
:per-page="length"
|
/>
|
</div>
|
</b-card>
|
<RoleForm
|
:item="item"
|
ref="roleForm"
|
:title="formTitle"
|
@submit="submit"
|
/>
|
<RolePermissions
|
ref="rolePermissions"
|
:rolesList="rolesList"
|
:rolePermission="rolePermission"
|
@submit="saveRolePermission"
|
/>
|
</div>
|
</template>
|
|
<script>
|
import {
|
Table,
|
TableColumn
|
} from 'element-ui'
|
import RoleForm from './RoleForm'
|
import {
|
getRoles,
|
rolesDel,
|
rolesAdd,
|
rolesEdit,
|
getRolesTree,
|
getRolePermission,
|
saveRolePermission
|
} from '../../server/role.js'
|
import RolePermissions from '../../components/SetPermissions/SetPermissions'
|
export default {
|
metaInfo: {
|
title: '角色管理'
|
},
|
data: () => ({
|
formTitle: '',
|
// * 角色列表
|
roleList: [],
|
// * 权限列表
|
rolesList: [],
|
length: 10,
|
currentPage: 1,
|
total: 0,
|
name: '',
|
item: null,
|
currentRoleId: '',
|
currentOrgId: '',
|
rolePermission: []
|
}),
|
computed: {
|
userInfo() {
|
return this.$store.getters.basicUserInfo
|
}
|
},
|
mounted() {
|
this.fetchRoleList()
|
},
|
methods: {
|
// * 获取角色列表
|
async fetchRoleList() {
|
let res = await getRoles({
|
orgId: this.userInfo.orgId,
|
start: this.length * (this.currentPage - 1),
|
name: this.name,
|
length: this.length
|
})
|
if (res && res.data) {
|
this.roleList = res.data
|
this.total = res.total
|
}
|
},
|
// * 获取权限树
|
async fetchRolesList() {
|
let res = await getRolesTree()
|
if (res) {
|
this.rolesList = res
|
}
|
},
|
// * 序号
|
index(index) {
|
return this.currentPage > 1
|
? this.length * (this.currentPage - 1) + index + 1
|
: index + 1
|
},
|
// * 格式化时间
|
createTime(val) {
|
return this.$moment(val.createTime).format('YYYY-MM-DD HH:mm:ss')
|
},
|
// * 删除
|
handleDel(id) {
|
this.$swal({
|
title: '确定删除吗？',
|
type: 'error',
|
showCancelButton: true,
|
allowOutsideClick: true,
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
closeOnConfirm: true
|
},
|
async () => {
|
let res = await rolesDel({
|
orgId: this.userInfo.orgId,
|
id
|
})
|
if (res && res.code - 0 === 0) {
|
this.$toast({
|
type: 'success',
|
message: '删除成功!'
|
})
|
this.fetchRoleList()
|
} else {
|
this.$toast({
|
type: 'warning',
|
message: '删除失败!'
|
})
|
}
|
})
|
},
|
// * 添加弹窗
|
handleAdd() {
|
this.formTitle = '角色添加'
|
this.item = null
|
this.$refs.roleForm.showModel()
|
},
|
// * 编辑
|
handleEdit(param) {
|
this.item = param
|
this.formTitle = '角色编辑'
|
this.$refs.roleForm.showModel()
|
},
|
// * 表单回调
|
submit(name, id) {
|
if (id) {
|
this.submitEdit(name, id)
|
} else {
|
this.submitAdd(name)
|
}
|
},
|
// * 添加保存
|
async submitAdd(name) {
|
if (!name) return
|
const res = await rolesAdd({
|
name,
|
code: 'code',
|
orgId: this.userInfo.orgId,
|
isSys: '0'
|
})
|
if (res.code && res.code - 0 === 400) {
|
this.$toast({
|
type: 'warning',
|
message: res.message && res.message
|
})
|
} else {
|
this.$toast({
|
type: 'success',
|
message: '添加成功'
|
})
|
this.fetchRoleList()
|
this.$refs.roleForm.hideModel()
|
}
|
},
|
// * 编辑保存
|
async submitEdit(name, id) {
|
const res = await rolesEdit({
|
id,
|
name
|
})
|
if (res.code && res.code - 0 === 400) {
|
this.$toast({
|
type: 'warning',
|
message: res.message && res.message
|
})
|
} else {
|
this.$toast({
|
type: 'success',
|
message: '编辑成功'
|
})
|
this.fetchRoleList()
|
this.$refs.roleForm.hideModel()
|
}
|
},
|
// * 权限弹窗
|
async handleRole(roleId, orgId) {
|
this.$refs.rolePermissions.showModel()
|
this.fetchRolesList()
|
this.currentOrgId = orgId
|
this.currentRoleId = roleId
|
const res = await getRolePermission({
|
orgId,
|
roleId
|
})
|
if (res) {
|
this.rolePermission = res
|
} else {
|
this.rolePermission = []
|
}
|
},
|
// * 角色权限保持
|
async saveRolePermission(menuIds) {
|
const res = await saveRolePermission({
|
orgId: this.currentOrgId,
|
id: this.currentRoleId,
|
menuIds
|
})
|
if (res && res.code - 0 === 0) {
|
this.$toast({
|
type: 'success',
|
message: '更新成功'
|
})
|
this.$refs.rolePermissions.hideModel()
|
} else {
|
this.$toast({
|
type: 'error',
|
message: res.message
|
})
|
}
|
},
|
// * 分页器
|
changePage(e) {
|
this.currentPage = e
|
this.fetchRoleList()
|
}
|
},
|
components: {
|
Table,
|
RoleForm,
|
TableColumn,
|
RolePermissions
|
}
|
}
|
</script>
|
