<template>
|
<div class="role_add">
|
<v-header title="新增权限"></v-header>
|
<section class="sec">
|
<p class="label">角色名称：</p>
|
<article>
|
<el-input
|
maxlength="20"
|
show-word-limit
|
size="small"
|
v-model="name"
|
></el-input>
|
</article>
|
</section>
|
<section class="sec">
|
<p class="label">角色权限：</p>
|
<article><b>请勾选改角色用户的权限</b></article>
|
</section>
|
<h5>社区平台权限配置</h5>
|
<el-checkbox v-model="all" class="pad">全选</el-checkbox>
|
<div class="tree">
|
<el-tree
|
:data="item"
|
ref="treeDom"
|
:props="defaultProps"
|
empty-text="无"
|
check-on-click-node
|
node-key="menuId"
|
default-expand-all
|
show-checkbox
|
:expand-on-click-node="false"
|
@node-click="handleNodeClick"
|
@check="onCheck"
|
:default-expanded-keys="pid"
|
:default-checked-keys="id"
|
>
|
</el-tree>
|
</div>
|
<div class="btn">
|
<el-button type="primary" size="small" @click="sub">确认</el-button>
|
<el-button size="small" @click="close">取消</el-button>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
export default {
|
props: {},
|
components: {},
|
data() {
|
return {
|
item: [],
|
defaultProps: {
|
children: "sysMenuVOList",
|
label: "menuName",
|
},
|
id: [],
|
pid: [],
|
now: {},
|
name: "",
|
isT: 0,
|
all: false,
|
};
|
},
|
watch: {
|
all(n) {
|
if (n) {
|
this.pid = this.id = this.item.map((j) => {
|
return j.menuId;
|
});
|
} else {
|
this.id = this.pid = [];
|
}
|
this.$refs.treeDom.setCheckedKeys(this.id);
|
},
|
},
|
methods: {
|
sub() {
|
if (this.name === "") {
|
demo.toast("请输入角色名称");
|
return 0;
|
}
|
if (!this.$refs.treeDom.getCheckedKeys().length) {
|
demo.toast("请选择权限菜单");
|
return 0;
|
}
|
this.$api.post(
|
"systemmanagement/menu",
|
{
|
roleName: this.name,
|
menuIds: [
|
...this.$refs.treeDom.getHalfCheckedKeys(),
|
...this.$refs.treeDom.getCheckedKeys(),
|
],
|
isAll: this.all ? "1" : "0",
|
},
|
(e) => {
|
demo.toast("添加成功");
|
this.$store.dispatch("setLevel", Date.now());
|
this.$nextTick(() => {
|
this.$router.go(-1);
|
});
|
}
|
);
|
},
|
close() {
|
this.id = this.pid = [];
|
this.name = "";
|
this.$refs.treeDom.setCheckedKeys(this.id);
|
},
|
onCheck(v) {
|
// this.handleNodeClick(v);
|
if (this.isT !== 2) {
|
this.handleNodeClick(v);
|
this.isT = 1;
|
}
|
},
|
handleNodeClick(v) {
|
this.isT = 2;
|
this.$nextTick(() => {
|
this.isT = 3;
|
});
|
// let flag = this.id.indexOf(v.menuId) >= 0;
|
// if (v.sysMenuVOList && v.sysMenuVOList.length) {
|
// let ids = v.sysMenuVOList.map((k) => {
|
// return k.menuId;
|
// });
|
// if (!flag) {
|
// this.id = this.id.concat(ids);
|
// this.pid = this.pid.concat(ids);
|
// } else {
|
// this.id = this.id.filter((k) => {
|
// return ids.indexOf(k) < 0;
|
// });
|
// this.pid = this.pid.filter((k) => {
|
// return ids.indexOf(k) < 0;
|
// });
|
// }
|
// }
|
// if (flag) {
|
// this.id = this.id.filter((k) => {
|
// return k !== v.menuId;
|
// });
|
// this.pid = this.pid.filter((k) => {
|
// return k !== v.menuId;
|
// });
|
// } else {
|
// this.id.push(v.menuId);
|
// this.pid.push(v.menuId);
|
// }
|
// this.$refs.treeDom.setCheckedKeys(this.id);
|
// this.now = v;
|
// if (this.pid.indexOf(v.menuId) >= 0) {
|
|
// } else {
|
// }
|
},
|
init() {
|
this.$api.get("systemmanagement/listmenu", {}, (e) => {
|
this.item = e;
|
});
|
},
|
},
|
mounted() {
|
this.init();
|
},
|
};
|
</script>
|
<style lang='less' scoped>
|
.role_add {
|
overflow-y: auto;
|
font-size: 14px;
|
color: #333;
|
.pad {
|
padding-left: 24px;
|
margin-bottom: 10px;
|
}
|
h5 {
|
margin-bottom: 8px;
|
}
|
.btn {
|
margin: 10px 0;
|
}
|
.sec {
|
.label {
|
text-align: left;
|
}
|
article {
|
max-width: 300px;
|
b {
|
line-height: 32px;
|
font-size: 12px;
|
color: #999;
|
}
|
}
|
}
|
}
|
</style>
|
