|
|
|
|
@ -6,12 +6,15 @@
|
|
|
|
|
<!-- 角色列表 -->
|
|
|
|
|
<a-col :span="5">
|
|
|
|
|
<div class="cardTitle">所有角色</div>
|
|
|
|
|
<a-button class="add-btn" style="margin: 10px" @click="add.show = true"
|
|
|
|
|
<a-button
|
|
|
|
|
class="add-btn"
|
|
|
|
|
style="margin: 10px"
|
|
|
|
|
@click="add.show = true"
|
|
|
|
|
>新增角色</a-button
|
|
|
|
|
>
|
|
|
|
|
<a-collapse accordion @change="rolechange">
|
|
|
|
|
<a-collapse-panel
|
|
|
|
|
v-for="(item, index) in roleList"
|
|
|
|
|
v-for="(item, index) in afterroleList"
|
|
|
|
|
:key="index"
|
|
|
|
|
:header="item.name"
|
|
|
|
|
>
|
|
|
|
|
@ -19,7 +22,7 @@
|
|
|
|
|
v-for="(rolechild, indexs) in item.childrenList"
|
|
|
|
|
class="role-card"
|
|
|
|
|
:key="indexs"
|
|
|
|
|
@click='rolechoose(rolechild.id)'
|
|
|
|
|
@click="rolechoose(rolechild.id)"
|
|
|
|
|
>
|
|
|
|
|
<span class="role-li">
|
|
|
|
|
<span>{{ rolechild.name || "无" }}</span>
|
|
|
|
|
@ -77,35 +80,59 @@
|
|
|
|
|
<role-permissions></role-permissions>
|
|
|
|
|
</a-tab-pane>
|
|
|
|
|
</a-tabs>
|
|
|
|
|
<a-modal
|
|
|
|
|
<!-- <a-modal title="分配角色" :visible="send.show" @ok="sendSubmit" @cancel="sendClose">
|
|
|
|
|
请选择角色：<el-cascader :options="roleList" :show-all-levels="false" :props="{ multiple: true, checkStrictly: true,value:'id',label:'name', children:'childrenList',disabled:'disabled'}" clearable ></el-cascader></a-modal> -->
|
|
|
|
|
<!-- 分配角色 -->
|
|
|
|
|
<a-drawer
|
|
|
|
|
title="分配角色"
|
|
|
|
|
:width="720"
|
|
|
|
|
:visible="send.show"
|
|
|
|
|
@ok="sendSubmit"
|
|
|
|
|
@cancel="sendClose"
|
|
|
|
|
:body-style="{ paddingBottom: '80px' }"
|
|
|
|
|
@close="sendClose"
|
|
|
|
|
>
|
|
|
|
|
请选择角色：
|
|
|
|
|
<el-cascader
|
|
|
|
|
:options="roleList"
|
|
|
|
|
:show-all-levels="false"
|
|
|
|
|
:props="{ multiple: true, checkStrictly: true,value:'id',label:'name', children:'childrenList',disabled:'disabled'}"
|
|
|
|
|
clearable
|
|
|
|
|
@change="multiRole"
|
|
|
|
|
></el-cascader>
|
|
|
|
|
</a-modal>
|
|
|
|
|
<div class="drawer-content">
|
|
|
|
|
<div class="cardTitle">所有角色</div>
|
|
|
|
|
<a-tree
|
|
|
|
|
v-model="tree.checkedKeys"
|
|
|
|
|
checkable
|
|
|
|
|
:expanded-keys="tree.expandedKeys"
|
|
|
|
|
:auto-expand-parent="tree.autoExpandParent"
|
|
|
|
|
:selected-keys="tree.selectedKeys"
|
|
|
|
|
:tree-data="roleList"
|
|
|
|
|
:checkStrictly="true"
|
|
|
|
|
:replaceFields="{ children:'childrenList', title:'name', key:'id' }"
|
|
|
|
|
@expand="onExpand"
|
|
|
|
|
@select="onSelect"
|
|
|
|
|
@check="onCheck"
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="drawer-footer">
|
|
|
|
|
<a-button :style="{ marginRight: '8px' }" @click="sendClose">
|
|
|
|
|
关闭
|
|
|
|
|
</a-button>
|
|
|
|
|
<a-button type="primary" @click="sendSubmit"> 提交 </a-button>
|
|
|
|
|
</div>
|
|
|
|
|
</a-drawer>
|
|
|
|
|
<!-- 新增角色 -->
|
|
|
|
|
<add-form
|
|
|
|
|
:show="add.show"
|
|
|
|
|
:title="add.title"
|
|
|
|
|
:list="roleList"
|
|
|
|
|
@close="addClose"
|
|
|
|
|
@success='success'
|
|
|
|
|
:id='add.editId'
|
|
|
|
|
></add-form>
|
|
|
|
|
@success="success"
|
|
|
|
|
:id="add.editId"
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
import { columns, pagination, searchForm } from "./depend/config.js";
|
|
|
|
|
import { rolelist, listByRole, assignRoles, roleDel} from "@/api/basic/role";
|
|
|
|
|
import {
|
|
|
|
|
getrolelist,
|
|
|
|
|
listByRole,
|
|
|
|
|
assignRoles,
|
|
|
|
|
roleDel,
|
|
|
|
|
} from "@/api/basic/role";
|
|
|
|
|
import rolePermissions from "./depend/permissions.vue";
|
|
|
|
|
import addForm from "./depend/form.vue";
|
|
|
|
|
export default {
|
|
|
|
|
@ -115,38 +142,48 @@ export default {
|
|
|
|
|
},
|
|
|
|
|
data() {
|
|
|
|
|
return {
|
|
|
|
|
tree:{
|
|
|
|
|
expandedKeys: [],
|
|
|
|
|
autoExpandParent: true,
|
|
|
|
|
checkedKeys: [],
|
|
|
|
|
selectedKeys: [],
|
|
|
|
|
},
|
|
|
|
|
pagination,
|
|
|
|
|
columns,
|
|
|
|
|
searchForm,
|
|
|
|
|
add: {
|
|
|
|
|
show: false,
|
|
|
|
|
title: "新增角色",
|
|
|
|
|
editId:null
|
|
|
|
|
editId: null,
|
|
|
|
|
},
|
|
|
|
|
tableChoosed: [],
|
|
|
|
|
roleList: [],
|
|
|
|
|
afterroleList: [],
|
|
|
|
|
tableData: [], // 数据
|
|
|
|
|
ActionsList: [],
|
|
|
|
|
send:{
|
|
|
|
|
show:false,
|
|
|
|
|
send: {
|
|
|
|
|
show: false,
|
|
|
|
|
},
|
|
|
|
|
form: {
|
|
|
|
|
manageUserId: undefined,
|
|
|
|
|
roleId: "",
|
|
|
|
|
},
|
|
|
|
|
form:{
|
|
|
|
|
manageUserId:undefined,
|
|
|
|
|
roleId:''
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
},
|
|
|
|
|
watch: {
|
|
|
|
|
roleList: {
|
|
|
|
|
afterroleList: {
|
|
|
|
|
handler(val) {
|
|
|
|
|
val.forEach((ele, index) => {
|
|
|
|
|
if (ele.childrenList === undefined || ele.childrenList === null) {
|
|
|
|
|
this.roleList[index].childrenList = [{disabled:true}];
|
|
|
|
|
this.afterroleList[index].childrenList = [{ disabled: true }];
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
deep: true,
|
|
|
|
|
},
|
|
|
|
|
'tree.checkedKeys'(val) {
|
|
|
|
|
// console.log('onCheck', val);
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
mounted() {
|
|
|
|
|
this.getData();
|
|
|
|
|
@ -154,8 +191,9 @@ export default {
|
|
|
|
|
},
|
|
|
|
|
methods: {
|
|
|
|
|
getData() {
|
|
|
|
|
rolelist().then((res) => {
|
|
|
|
|
getrolelist().then((res) => {
|
|
|
|
|
this.roleList = res.data;
|
|
|
|
|
this.afterroleList = JSON.parse(JSON.stringify(this.roleList))
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
getPeople() {
|
|
|
|
|
@ -168,18 +206,18 @@ export default {
|
|
|
|
|
this.tableData = res.data.rows;
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
success(){
|
|
|
|
|
this.getData()
|
|
|
|
|
success() {
|
|
|
|
|
this.getData();
|
|
|
|
|
},
|
|
|
|
|
addClose() {
|
|
|
|
|
this.add.show = false;
|
|
|
|
|
this.add.editId = undefined;
|
|
|
|
|
},
|
|
|
|
|
// 编辑角色
|
|
|
|
|
editRole(id){
|
|
|
|
|
this.add.editId = id
|
|
|
|
|
this.add.title = '修改角色'
|
|
|
|
|
this.add.show= true;
|
|
|
|
|
editRole(id) {
|
|
|
|
|
this.add.editId = id;
|
|
|
|
|
this.add.title = "修改角色";
|
|
|
|
|
this.add.show = true;
|
|
|
|
|
},
|
|
|
|
|
// 删除角色
|
|
|
|
|
delRole(id) {
|
|
|
|
|
@ -188,18 +226,18 @@ export default {
|
|
|
|
|
// okText:'删除',
|
|
|
|
|
// cancelText:'取消',
|
|
|
|
|
icon: "",
|
|
|
|
|
onOk:()=> {
|
|
|
|
|
roleDel({roleId:id}).then(res=>{
|
|
|
|
|
if(res.code === 200){
|
|
|
|
|
this.$message.success(res.msg)
|
|
|
|
|
this.getData()
|
|
|
|
|
}else{
|
|
|
|
|
this.$message.error(res.msg)
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
onOk: () => {
|
|
|
|
|
roleDel({ roleId: id }).then((res) => {
|
|
|
|
|
if (res.code === 200) {
|
|
|
|
|
this.$message.success(res.msg);
|
|
|
|
|
this.getData();
|
|
|
|
|
} else {
|
|
|
|
|
this.$message.error(res.msg);
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
rolechange(data) {
|
|
|
|
|
if (data) {
|
|
|
|
|
this.searchForm.roleId = this.roleList[data].id;
|
|
|
|
|
@ -227,36 +265,66 @@ export default {
|
|
|
|
|
pager.pageSize = pagination.pageSize;
|
|
|
|
|
this.pagination = pager;
|
|
|
|
|
},
|
|
|
|
|
sendRole(data){
|
|
|
|
|
this.form.manageUserId = data.id
|
|
|
|
|
this.send.show = true
|
|
|
|
|
},
|
|
|
|
|
multiRole(data){
|
|
|
|
|
let arr = []
|
|
|
|
|
for(let a of data){
|
|
|
|
|
if(a.length > 0){
|
|
|
|
|
for(let b of a){
|
|
|
|
|
arr.push(b);
|
|
|
|
|
}
|
|
|
|
|
}else{
|
|
|
|
|
arr.push(a);
|
|
|
|
|
sendRole(data) {
|
|
|
|
|
this.form.manageUserId = data.id;
|
|
|
|
|
let haveid = [];
|
|
|
|
|
for (let name of data.roleNameList) {
|
|
|
|
|
haveid.push(name.id);
|
|
|
|
|
}
|
|
|
|
|
this.tree.checkedKeys = haveid
|
|
|
|
|
this.send.show = true;
|
|
|
|
|
},
|
|
|
|
|
onExpand(expandedKeys) {
|
|
|
|
|
// console.log('onExpand', expandedKeys);
|
|
|
|
|
// if not set autoExpandParent to false, if children expanded, parent can not collapse.
|
|
|
|
|
// or, you can remove all expanded children keys.
|
|
|
|
|
this.tree.expandedKeys = expandedKeys;
|
|
|
|
|
this.tree.autoExpandParent = false;
|
|
|
|
|
},
|
|
|
|
|
onCheck(checkedKeys) {
|
|
|
|
|
const arr = []
|
|
|
|
|
this.tree.checkedKeys = checkedKeys;
|
|
|
|
|
for(let k of this.tree.checkedKeys.checked){
|
|
|
|
|
arr.push(k)
|
|
|
|
|
}
|
|
|
|
|
this.form.roleId = arr.toString()
|
|
|
|
|
console.log(this.form.roleId);
|
|
|
|
|
},
|
|
|
|
|
async sendSubmit(){
|
|
|
|
|
const res = await assignRoles(this.form)
|
|
|
|
|
if(res.code === 200){
|
|
|
|
|
this.$message.success(res.msg)
|
|
|
|
|
this.getData()
|
|
|
|
|
}else{
|
|
|
|
|
this.$message.error(res.msg)
|
|
|
|
|
onSelect(selectedKeys, info) {
|
|
|
|
|
console.log('onSelect', info);
|
|
|
|
|
this.tree.selectedKeys = selectedKeys;
|
|
|
|
|
},
|
|
|
|
|
// multiRole(data){
|
|
|
|
|
// console.log(data);
|
|
|
|
|
// let arr = []
|
|
|
|
|
// for(let a of data){
|
|
|
|
|
// if(a.length > 0){
|
|
|
|
|
// for(let b of a){
|
|
|
|
|
// arr.push(b);
|
|
|
|
|
// }
|
|
|
|
|
// }else{
|
|
|
|
|
// arr.push(a);
|
|
|
|
|
// }
|
|
|
|
|
// }
|
|
|
|
|
// this.form.roleId = arr.toString()
|
|
|
|
|
// },
|
|
|
|
|
async sendSubmit() {
|
|
|
|
|
const res = await assignRoles(this.form);
|
|
|
|
|
if (res.code === 200) {
|
|
|
|
|
this.$message.success(res.msg);
|
|
|
|
|
this.getData();
|
|
|
|
|
} else {
|
|
|
|
|
this.$message.error(res.msg);
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
sendClose(){
|
|
|
|
|
this.form.manageUserId = undefined
|
|
|
|
|
this.send.show = false
|
|
|
|
|
sendClose() {
|
|
|
|
|
this.form.manageUserId = undefined;
|
|
|
|
|
this.send.show = false;
|
|
|
|
|
},
|
|
|
|
|
// sendClose(){
|
|
|
|
|
// this.form.manageUserId = undefined
|
|
|
|
|
// this.send.show = false
|
|
|
|
|
// },
|
|
|
|
|
Actions(data) {
|
|
|
|
|
console.log(data);
|
|
|
|
|
},
|
|
|
|
|
|
