前言
本系列博客基于B站的云e办管理系统,前端和后端我都自己敲了一遍,这里做一个学习记录。云e办的原始视频链接如下:https://www.bilibili.com/video/BV1Ai4y1P7Tk?p=1
<template>
<div>
<!-- 输入框-->
<div class="permissMana">
<el-input size="small" placeholder="请输入角色英文名" v-model="role.name">
<template size="small" slot="prepend">Role_</template>
</el-input>
<el-input
size="small"
placeholder="请输入角色中文名"
v-model="role.nameZh"
@keydown.enter.native="doAddRole"
>
</el-input>
<el-button size="small" type="primary" @click="doAddRole"
>添加角色</el-button
>
</div>
<div class="permissManaMain">
<!-- 折叠面板/手风琴面板-->
<!-- activeName:初始化打开的面板-->
<!-- @change:展开手风琴激活事件-->
<el-collapse v-model="activeName" accordion @change="change">
<el-collapse-item
:title="r.nameZh"
:name="r.id"
v-for="(r, index) in roles"
:key="index"
>
<!-- 卡片列表-->
<el-card class="box-card">
<div slot="header" class="clearfix">
<span>可访问权限</span>
<!-- 删除按钮-->
<el-button
style="float: right; padding: 3px 0; color: #ff0000"
icon="el-icon-delete"
type="text"
@click="doDeleteRole(r)"
></el-button>
</div>
<div>
<!-- 展示列表/树形展示-->
<el-tree
show-checkbox
ref="tree"
:data="allMenus"
:props="defaultProps"
:default-checked-keys="selectedMenus"
:key="index"
node-key="id"
></el-tree>
<div style="display: flex; justify-content: flex-end">
<el-button size="mini" @click="cancelUpdate"
>取消修改</el-button
>
<el-button
size="mini"
type="primary"
@click="doUpdate(r.id, index)"
>确认修改</el-button
>
</div>
</div>
</el-card>
</el-collapse-item>
</el-collapse>
</div>
</div>
</template>
<script>
export default {
name: "PermissMana",
data() {
return {
role: {
//英文名
name: "",
//中文名
nameZh: "",
},
roles: [],
allMenus: [],
//显示菜单项的默认内容
defaultProps: {
children: "children",
label: "name",
},
selectedMenus: [],
activeName: -1,
};
},
mounted() {
this.initRoles();
},
methods: {
doDeleteRole(role) {
this.$confirm("删除[" + role.nameZh + "]角色, 是否继续?", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
})
.then(() => {
this.deleteRequest("/system/basic/permiss/role/" + role.id)
.then((res) => {
if (res) {
this.initRoles();
}
});
})
.catch(() => {
this.$message({
type: "info",
message: "已取消删除",
});
});
},
//添加权限组
doAddRole() {
if (this.role.name && this.role.nameZh) {
this.postRequest("/system/basic/permiss/", this.role).then(
(resp) => {
if (resp) {
this.initRoles();
this.role.name = "";
this.role.nameZh = "";
}
}
);
} else {
this.$message.error("所有字段不能为空!");
}
},
//取消修改,不初始化菜单
cancelUpdate() {
this.activeName = -1;
},
//更新权限组
doUpdate(rid, index) {
let tree = this.$refs.tree[index];
let selectedKeys = tree.getCheckedKeys(true);
let url = "/system/basic/permiss/?rid=" + rid;
selectedKeys.forEach((key) => {
url += "&mids=" + key;
});
this.putRequest(url).then((resp) => {
if (resp) {
this.initRoles();
this.activeName = -1;
}
});
},
//激活手风琴面板触发,展示所有菜单项,展示当前选中菜单项
change(rid) {
if (rid) {
this.selectedMenus = [];
this.initAllMenus();
this.initSelectedMenus(rid);
}
},
initSelectedMenus(rid) {
let url = "/system/basic/permiss/mid/" + rid;
this.getRequest(url).then((resp) => {
if (resp) {
this.selectedMenus = resp;
}
})
},
initAllMenus() {
this.getRequest("/system/basic/permiss/menus").then((resp) => {
if (resp) {
this.allMenus = resp;
}
});
},
initRoles() {
this.getRequest("/system/basic/permiss/").then((resp) => {
if (resp) {
this.roles = resp;
}
});
},
},
};
</script>
<style>
.permissMana {
display: flex;
justify-content: flex-start;
}
.permissMana .el-input {
width: 300px;
margin-right: 6px;
}
.permissManaMain {
margin-top: 10px;
width: 700px;
}
</style>