|
|
|
@ -1,6 +1,6 @@ |
|
|
|
<template> |
|
|
|
<div class="roles"> |
|
|
|
<form-container label="名称" @submit="submitForm" @resetForm="resetForm"></form-container> |
|
|
|
<form-container label="名称" @submit="submitForm"></form-container> |
|
|
|
<div class="role"> |
|
|
|
<el-row> |
|
|
|
<el-col :span="4" :xs="6" :md="5"> |
|
|
|
@ -10,41 +10,39 @@ |
|
|
|
新增角色 |
|
|
|
</el-button> |
|
|
|
</router-link> |
|
|
|
<el-table @row-click="openDetails" |
|
|
|
:data="lists" |
|
|
|
style="width: 100%"> |
|
|
|
<el-table-column |
|
|
|
label="名称"> |
|
|
|
<template slot-scope="lists"> |
|
|
|
<span :class="{'select':lists.row.isSel}" |
|
|
|
type="text" |
|
|
|
size="small" |
|
|
|
> |
|
|
|
{{lists.row.name}} |
|
|
|
<el-table @row-click="openDetails" :data="lists" style="width: 100%"> |
|
|
|
<el-table-column label="名称"> |
|
|
|
<template slot-scope="role"> |
|
|
|
<span :class="{'select':role.row.isSel}" type="text" size="small"> |
|
|
|
{{role.row.roleName}} |
|
|
|
</span> |
|
|
|
</template> |
|
|
|
</el-table-column> |
|
|
|
<el-table-column |
|
|
|
fixed="right" |
|
|
|
label="操作" |
|
|
|
fixed="right" |
|
|
|
label="操作" |
|
|
|
> |
|
|
|
<template slot-scope="lists"> |
|
|
|
<span |
|
|
|
:class="{'select':lists.row.isSel}" |
|
|
|
type="text" |
|
|
|
size="small" |
|
|
|
class="option-span" |
|
|
|
@click="removeItem(lists.row.id)" |
|
|
|
> |
|
|
|
<span :class="{'select':lists.row.isSel}" type="text" size="small" class="option-span" @click="removeItem(lists.row.roleId)"> |
|
|
|
删除 |
|
|
|
</span> |
|
|
|
</template> |
|
|
|
</el-table-column> |
|
|
|
</el-table> |
|
|
|
<div class="pagination"> |
|
|
|
<el-pagination |
|
|
|
background |
|
|
|
:page-size="params.pageSize" |
|
|
|
layout="prev, pager, next" |
|
|
|
:total="count" |
|
|
|
@current-change="currentChange" |
|
|
|
> |
|
|
|
</el-pagination> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</el-col> |
|
|
|
<el-col :span="20" :xs="18" :md="19" style="border-left: 1px solid #d9d9d9"> |
|
|
|
<Permissions :currId="id" :name="name" :permissions="permissions" @success="success"></Permissions> |
|
|
|
<Permissions :roleId="roleId" :roleName="roleName" :permissionIds="permissionIds" @success="success"></Permissions> |
|
|
|
</el-col> |
|
|
|
</el-row> |
|
|
|
</div> |
|
|
|
@ -52,9 +50,9 @@ |
|
|
|
</template> |
|
|
|
|
|
|
|
<script> |
|
|
|
const FormContainer = () => import('../form.vue'); |
|
|
|
const FormContainer = () => import('./form.vue'); |
|
|
|
const Permissions = () => import('./permissions.vue'); |
|
|
|
// import {ROLES_LIST, ROLES_DELETE} from '@/api/privilegeManagement' |
|
|
|
import { GET_ROLE_LIST, DELETE_ROLE } from '@/api/jurisdiction' |
|
|
|
import Alert from "@/utils/alert"; |
|
|
|
import {pageSize} from '../../../config'; |
|
|
|
|
|
|
|
@ -66,21 +64,21 @@ |
|
|
|
}, |
|
|
|
data() { |
|
|
|
return { |
|
|
|
id: '', |
|
|
|
name: '', |
|
|
|
permissions: '', |
|
|
|
|
|
|
|
roleId: '', |
|
|
|
roleName: '', |
|
|
|
permissionIds: [], |
|
|
|
index: 0, |
|
|
|
params: { |
|
|
|
from: 0, |
|
|
|
size: pageSize, |
|
|
|
query: '' |
|
|
|
roleName: '', |
|
|
|
pageNum: 1, |
|
|
|
pageSize: 10, |
|
|
|
}, |
|
|
|
lists: [] |
|
|
|
lists: [], |
|
|
|
count: 0, |
|
|
|
} |
|
|
|
}, |
|
|
|
mounted() { |
|
|
|
// this.getList() |
|
|
|
this.getList() |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
|
|
|
|
@ -88,23 +86,25 @@ |
|
|
|
* 获取列表数据 |
|
|
|
*/ |
|
|
|
getList() { |
|
|
|
let idx = this.index; |
|
|
|
ROLES_LIST(this.params).then(res => { |
|
|
|
res.map((item, index) => { |
|
|
|
item.edit = false; |
|
|
|
item.isSel = false; |
|
|
|
if (index === idx) { |
|
|
|
item.isSel = true; |
|
|
|
} |
|
|
|
return item |
|
|
|
}); |
|
|
|
this.lists = res; |
|
|
|
this.id = this.lists[idx].id; |
|
|
|
this.permissions = this.lists[idx].permissions; |
|
|
|
this.name = this.lists[idx].name; |
|
|
|
GET_ROLE_LIST(this.params).then(res => { |
|
|
|
if(res.code === 200) { |
|
|
|
this.lists = res.data.list; |
|
|
|
this.count = res.data.total - 0; |
|
|
|
} else { |
|
|
|
Alert.fail('查询角色列表失败,请重试') |
|
|
|
} |
|
|
|
}); |
|
|
|
}, |
|
|
|
|
|
|
|
// 角色列表分页 |
|
|
|
currentChange(res) { |
|
|
|
this.params = { |
|
|
|
...this.params, |
|
|
|
pageSize: res, |
|
|
|
} |
|
|
|
this.getList() |
|
|
|
}, |
|
|
|
|
|
|
|
success() { |
|
|
|
this.getList() |
|
|
|
}, |
|
|
|
@ -115,35 +115,30 @@ |
|
|
|
openDetails(row) { |
|
|
|
let lists = this.lists.map((item, index) => { |
|
|
|
item.isSel = false; |
|
|
|
if (row.id == item.id) { |
|
|
|
if (row.roleId == item.roleId) { |
|
|
|
item.isSel = true; |
|
|
|
this.index = index; |
|
|
|
} |
|
|
|
return item |
|
|
|
}); |
|
|
|
this.id = row.id; |
|
|
|
this.name = row.name; |
|
|
|
this.permissions = row.permissions; |
|
|
|
this.roleId = row.roleId; |
|
|
|
this.roleName = row.roleName; |
|
|
|
this.permissionIds = row.permissionIds; |
|
|
|
this.lists = lists; |
|
|
|
}, |
|
|
|
|
|
|
|
removeItem(id) { |
|
|
|
let params = { |
|
|
|
id |
|
|
|
}; |
|
|
|
removeItem(roleId) { |
|
|
|
let params = { roleId }; |
|
|
|
this.$confirm('确定删除此角色嘛？', '提示', { |
|
|
|
confirmButtonText: '确定', |
|
|
|
cancelButtonText: '取消', |
|
|
|
type: 'warning' |
|
|
|
}).then(() => { |
|
|
|
let params = { |
|
|
|
id: id |
|
|
|
}; |
|
|
|
ROLES_DELETE(params).then((res) => { |
|
|
|
DELETE_ROLE(params).then((res) => { |
|
|
|
let lists = []; |
|
|
|
this.lists.map((item) => { |
|
|
|
if (item.id != id) { |
|
|
|
lists.push(item) |
|
|
|
if (item.roleId != roleId) { |
|
|
|
lists.push(item); |
|
|
|
} |
|
|
|
return item; |
|
|
|
}); |
|
|
|
@ -151,35 +146,19 @@ |
|
|
|
}); |
|
|
|
Alert.success("删除成功"); |
|
|
|
this.getList() |
|
|
|
}).catch(() => { |
|
|
|
|
|
|
|
}) |
|
|
|
}, |
|
|
|
|
|
|
|
|
|
|
|
/** |
|
|
|
* 查询 |
|
|
|
*/ |
|
|
|
submitForm(res) { |
|
|
|
this.params = { |
|
|
|
...this.params, |
|
|
|
query: res.name |
|
|
|
roleName: res.roleName |
|
|
|
}; |
|
|
|
this.getList() |
|
|
|
}, |
|
|
|
|
|
|
|
/** |
|
|
|
* 重置 |
|
|
|
*/ |
|
|
|
resetForm() { |
|
|
|
this.params = { |
|
|
|
from: 0, |
|
|
|
size: pageSize, |
|
|
|
query: '' |
|
|
|
}; |
|
|
|
this.getList() |
|
|
|
}, |
|
|
|
|
|
|
|
} |
|
|
|
} |
|
|
|
</script> |
|
|
|
|
