1.角色管理
role.vue
<template>
<div>
<el-button type="primary" @click="add">添加</el-button>
<!-- 添加组件 -->
<v-add :info="info" ref="add"></v-add>
<!-- 角色列表组件 -->
<v-list @edit="edit"></v-list>
</div>
</template>
<script>
import vAdd from './components/add.vue'
import vList from './components/list.vue'
export default {
data(){
return {
info:{
show:false,
title:'',
isAdd:true,
}
}
},
methods:{
add(){
this.info.show = true;
this.info.title = ' 添加角色';
this.info.isAdd = true;
},
edit(id){
this.info.show = true;
this.info.title = "编辑角色";
this.info.isAdd = false;
this.$refs.add.getDetail(id)
}
},
components:{
vAdd,
vList
}
}
</script>
<style scoped>
.el-button{
margin-top:10px;
}
</style>
add.vue
<template>
<div>
<el-dialog :title="info.title" :visible.sync="info.show">
<el-form :model="form">
<el-form-item label="角色名称" :label-width="formLabelWidth">
<el-input v-model="form.rolename"></el-input>
</el-form-item>
<el-form-item label="角色权限" :label-width="formLabelWidth">
<el-tree
:data="data"
show-checkbox
node-key="id"
:default-checked-keys="defaultKey"
:props="defaultProps" ref="tree"
>
</el-tree>
</el-form-item>
<el-form-item label="角色状态" :label-width="formLabelWidth">
<el-switch
v-model="form.status"
active-color="blue"
inactive-color="grey"
:active-value="1"
:inactive-value="2"
>
</el-switch>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="cancel">取 消</el-button>
<el-button type="primary" @click="confirm" v-if="info.isAdd">确 定</el-button>
<el-button type="primary" @click="update" v-else>修 改</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import {mapGetters,mapActions} from 'vuex'
import {addRole,oneRole,updateRole} from '../../../utils/request'
import { successAlert } from '../../../utils/alert';
export default {
props:['info'],
data(){
return {
formLabelWidth: '120px',
form:{
rolename:'',
menus:'',
status:1,
},
defaultProps: {
children: 'children',
label: 'title'
},
defaultKey:[],//默认选中的key值
}
},
computed:{
...mapGetters({
"data":"menu/menuList"
})
},
methods:{
...mapActions({
"requestMenuList":"menu/menuListActions",
"requestRoleList":"role/roleListActions",
}),
// 取消
cancel(){
this.info.show = false;
this.form = {
rolename:'',
menus:'',
status:1,
};
this.defaultKey = this.$refs.tree.setCheckedKeys([]);
},
// 添加角色
confirm(){
this.form.menus = JSON.stringify(this.$refs.tree.getCheckedKeys());
// 发起添加角色请求
addRole(this.form).then(res=>{
successAlert(res.data.msg)
this.cancel()
this.requestRoleList()
})
},
// 获取角色详情
getDetail(id){
// 发起获取角色详情请求
oneRole({id}).then(res=>{
this.form = res.data.list;
this.form.id = id;
this.defaultKey = JSON.parse(this.form.menus);
})
},
//修改并提交数据
update(){
this.form.menus = JSON.stringify(this.$refs.tree.getCheckedKeys())
updateRole(this.form).then(res=>{
successAlert(res.data.msg);
this.cancel()
this.requestRoleList()
})
}
},
mounted(){
this.requestMenuList();
}
};
</script>
<style scoped>
</style>
list.vue
<template>
<div>
<el-table
:data="tableData"
style="width: 100%;margin-bottom: 20px;"
row-key="id"
border
:tree-props="{ children: 'children'}"
>
<el-table-column prop="id" label="角色编号" ></el-table-column>
<el-table-column prop="rolename" label="角色名称" ></el-table-column>
<el-table-column prop="status" label="状态">
<template v-slot="prop">
<el-button type="primary" v-if="prop.row.status==1">启用</el-button>
<el-button type="danger" v-else>禁止</el-button>
</template>
</el-table-column>
<el-table-column prop="status" label="操作">
<template v-slot="prop">
<el-button type="primary" @click="edit(prop.row.id)">编辑</el-button>
<el-button type="danger" @click="del(prop.row.id)">删除</el-button>
</template>
</el-table-column>
</el-table>
</div>
</template>
<script>
import {mapGetters,mapActions} from 'vuex'
import {delRole} from '../../../utils/request'
import {successAlert} from '../../../utils/alert'
export default {
computed:{
...mapGetters({
"tableData":"role/roleList"
})
},
methods:{
...mapActions({
'requestRoleList':"role/roleListActions"
}),
//传递自定义事件
edit(id){
this.$emit('edit',id)
},
// 删除角色
del(id){
this.$confirm('确定要删除吗?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
// 发起删除角色请求
delRole({id}).then(res=>{
// 已经删除成功
successAlert(res.data.msg);
this.requestRoleList()
})
}).catch(() => {
this.$message({
type: 'info',
message: '已取消删除'
});
});
}
},
mounted(){
this.requestRoleList()
}
}
</script>
<style>
</style>
store/modules/role.js
import {getRole} from '../../utils/request'
const state = {
roleList:[],
}
const mutations = {
changeRoleList(state,arr){
state.roleList = arr;
}
}
const actions = {
roleListActions(context){
getRole().then(res=>{
context.commit('changeRoleList',res.data.list)
})
}
}
const getters = {
roleList(state){
return state.roleList
}
}
export default {
state,
mutations,
actions,
getters,
namespaced:true,
}
2.管理员管理
manager.vue
<template>
<div>
<!-- 添加按钮 -->
<el-button type="success" @click="add">添加</el-button>
<!-- 添加子组件 -->
<v-add :info="info" ref="add"></v-add>
<!-- 列表子组件 -->
<v-list @edit="edit"></v-list>
</div>
</template>
<script>
import vAdd from './components/add.vue'
import vList from './components/list.vue'
export default {
data(){
return {
info:{
show:false,//控制add组件的显示和隐藏
title:'',//控制add组件的标题
isAdd:true,//控制add组件是添加还是编辑
}
}
},
components:{
vAdd,
vList
},
methods:{
add(){
this.info.show = true;
this.info.title = '添加管理员';
this.info.isAdd = true;
},
edit(uid){
this.info.show = true;
this.info.title = '编辑管理员';
this.info.isAdd = false;
this.$refs.add.getDetail(uid)
}
}
}
</script>
<style scoped>
.el-button{
margin-top:10px;
}
</style>
add.vue
<template>
<div>
<el-dialog :title="info.title" :visible.sync="info.show">
<el-form :model="form">
<el-form-item label="所属角色" :label-width="formLabelWidth">
<el-select v-model="form.roleid" >
<el-option label="--请选择--" value="" disabled></el-option>
<el-option v-for="item in roleList" :key="item.id" :label="item.rolename" :value="item.id"></el-option>
</el-select>
</el-form-item>
<el-form-item label="用户名" :label-width="formLabelWidth">
<el-input v-model="form.username" ></el-input>
</el-form-item>
<el-form-item label="密码" :label-width="formLabelWidth">
<el-input type="password" v-model="form.password" ></el-input>
</el-form-item>
<el-form-item label="管理员状态" :label-width="formLabelWidth">
<el-switch
v-model="form.status"
active-color="blue"
inactive-color="grey" :active-value="1" :inactive-value="2">
</el-switch>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="cancel">取 消</el-button>
<el-button type="primary" @click="confirm" v-if="info.isAdd">确 定</el-button>
<el-button type="primary" @click="update" v-else>修 改</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import {mapGetters,mapActions} from 'vuex'
import {addManager,oneManager,updateManager} from '../../../utils/request'
import { successAlert } from '../../../utils/alert'
export default {
props:['info'],
data(){
return {
dialogFormVisible: false,
form: {
roleid:'',
username:'',
password:'',
status:1,//1:启用 2:禁用
},
formLabelWidth: '120px'
}
},
computed:{
...mapGetters({
"roleList":"role/roleList"
})
},
methods:{
...mapActions({
"requestRoleList":"role/roleListActions",
"requestCount":"manager/countActions",
"requestManagerList":"manager/managerListActions"
}),
// 取消add组件
cancel(){
this.info.show = false;
this.form = {
roleid:'',
username:'',
password:'',
status:1,//1:启用 2:禁用
}
},
// 添加管理员数据到数据库
confirm(){
// 发起添加数据请求
addManager(this.form).then(res=>{
successAlert(res.data.msg)
this.cancel()
// 获取总的记录数
this.requestCount()
// 更新列表
this.requestManagerList()
})
},
getDetail(uid){
// 发起获取管理员详情请求
oneManager({uid}).then(res=>{
this.form = res.data.list;
this.form.password = '';
})
},
update(){
// 发起修改管理员请求
updateManager(this.form).then(res=>{
successAlert(res.data.msg);
this.cancel();
this.requestManagerList()
})
}
},
mounted(){
this.requestRoleList();
}
}
</script>
<style>
</style>
list.vue
<template>
<div>
<el-table
:data="tableData"
style="width: 100%;margin-bottom: 20px;"
row-key="id"
border
:tree-props="{ children: 'children'}"
>
<el-table-column prop="id" label="用户编号" > </el-table-column>
<el-table-column prop="username" label="用户名" ></el-table-column>
<el-table-column prop="rolename" label="所属角色"> </el-table-column>
<el-table-column prop="status" label="状态">
<template v-slot="prop">
<el-button type="primary" v-if="prop.row.status==1">启用</el-button>
<el-button type="danger" v-else>禁止</el-button>
</template>
</el-table-column>
<el-table-column prop="status" label="操作">
<template v-slot="prop">
<el-button type="primary" @click="edit(prop.row.uid)">编辑</el-button>
<el-button type="danger" @click="del(prop.row.uid)">删除</el-button>
</template>
</el-table-column>
</el-table>
<el-pagination
background
layout="prev, pager, next"
:page-size="2"
@current-change="cPage"
:total="count">
</el-pagination>
</div>
</template>
<script>
import {mapGetters,mapActions} from 'vuex'
import {delManager} from '../../../utils/request'
import {successAlert} from '../../../utils/alert'
export default {
computed:{
...mapGetters({
"tableData":"manager/managerList",
'count':"manager/count"
})
},
methods:{
...mapActions({
"requestManagerList":'manager/managerListActions',
"requestCount":"manager/countActions",
"requestPage":"manager/pageActions",
}),
// 获取当前页码数
cPage(page){
this.requestPage(page)
this.requestManagerList()
},
edit(uid){
this.$emit('edit',uid)
},
del(uid){
this.$confirm('确定要删除吗?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
// 发起删除菜单请求
delManager({uid}).then(res=>{
// 已经删除成功
successAlert(res.data.msg);
this.requestCount()
this.requestManagerList()
})
}).catch(() => {
this.$message({
type: 'info',
message: '已取消删除'
});
});
}
},
mounted(){
this.requestCount()
this.requestManagerList()
}
}
</script>
<style>
</style>
store/modules/manager.js
import {getManager,managerCount} from '../../utils/request'
const state = {
managerList:[],
size:2,
page:1,
count:0,
}
const mutations = {
changeManagerList(state,arr){
state.managerList = arr
},
changeCount(state,num){
state.count = num
},
changePage(state,page){
state.page = page
}
}
const actions = {
managerListActions(context){
var params = {
size:context.state.size,
page:context.state.page
}
getManager(params).then(res=>{
if((res.data.list == null || res.data.list.length == 0) && context.state.page > 1){
var p = context.state.page -1;
context.commit('changePage',p);
context.dispatch('managerListActions');
return;
}
context.commit('changeManagerList',res.data.list)
})
},
countActions(context){
managerCount().then(res=>{
context.commit('changeCount',res.data.list[0].total)
})
},
pageActions(context,page){
context.commit('changePage',page)
}
}
const getters = {
managerList(state){
return state.managerList
},
count(state){
return state.count
}
}
export default {
state,mutations,actions,getters,
namespaced:true,
}
3.login.vue(用户信息存储)
<template>
<div class="container">
<div class="con">
<h3>欢迎登录</h3>
<el-input v-model="user.username" placeholder="请输入用户名"></el-input>
<el-input v-model="user.password" type="password" placeholder="请输入密码"></el-input>
<div class="btn">
<el-button type="primary" @click="login">登录</el-button>
</div>
</div>
</div>
</template>
<script>
import { warningAlert, successAlert } from '../../utils/alert'
import {requestLogin} from '../../utils/request'
import {mapActions} from 'vuex'
export default {
data(){
return {
user:{
username:'',
password:'',
}
}
},
methods:{
...mapActions({
"requestUser":"userActions"
}),
login(){
//方式二:通过vuex结合sessionStorage来做用户信息存储
if(this.user.username !== '' | this.user.password !== ''){
//允许发起请求
requestLogin(this.user).then(res=>{
successAlert(res.data.msg);
// 将数据存入vuex中
this.requestUser(res.data.list)
this.$router.push('/')
})
}else{
warningAlert('请输入名户名或者密码')
}
//方式一:通过localStorage进行数据存储
// if(this.user.username !== '' || this.user.password !== ''){
// // 允许发起请求
// requestLogin(this.user).then(res=>{
// successAlert(res.data.msg);
// // 将用户信息存入到localStorage中
// if(localStorage.getItem('user') !== null){
// localStorage.removeItem('user')
// }
// localStorage.setItem('user',JSON.stringify(res.data.list))
// this.$router.push('/')
// })
// }else{
// warningAlert('请输入名户名或者密码')
// }
}
}
}
</script>
<style scoped>
.container{
width:100vw;
height: 100vh;
background: linear-gradient(#563443,#2F3D60);
position:fixed;
top:0;
left:0;
}
.con{
width:400px;
height: 300px;
background: white;
position: absolute;
top:50%;
left:50%;
transform: translate(-50%,-50%);
border-radius: 10px;
}
h3{
text-align: center;
margin: 20px;
}
.el-input,.el-button{
width:90%;
margin:20px;
}
.el-button{
color:white;
}
</style>
store/actions.js
export default {
userActions(context,user){
context.commit('changeUser',user)
}
}
store/mutations.js
export const state = {
user:sessionStorage.getItem('user') ? JSON.parse(sessionStorage.getItem('user')) : null,
}
export const mutations = {
changeUser(state,user){
state.user = user;
if(user){
sessionStorage.setItem('user',JSON.stringify(user))
}else{
sessionStorage.removeItem('user')
}
}
}
export const getters = {
user(state){
return state.user
}
}
4.index.vue(退出功能)
<el-header height="80px">
{{user.username}}
<el-button type="primary" @click="logout">退出</el-button>
</el-header>
<script>
import {mapGetters,mapActions} from 'vuex'
export default {
computed:{
...mapGetters({
'user':'user'
})
},
methods:{
...mapActions({
"requestUser":"userActions"
}),
logout(){
// 1.清空用户信息
this.requestUser(null)
//2.跳转登录页
this.$router.push('/login')
}
}
}
</script>