<template>
<div class="content_bg">
<div class="content">
<el-form :inline="true" :model="formInline" class="demo-form-inline">
<el-form-item label="角色名：">
<el-input v-model="formInline.user" placeholder="角色名"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" icon="el-icon-search" @click="handerSearch">搜索</el-button>
</el-form-item>
<el-form-item style="float: right">
<el-button type="primary" icon="el-icon-circle-plus-outline" @click="handerAdd">添加</el-button>
</el-form-item>
</el-form>
<el-table :data="tableData" border style="width: 100%" row-key="id">
<el-table-column prop="code" label="code" align="center"> </el-table-column>
<el-table-column prop="name" label="角色名" align="center"> </el-table-column>
<el-table-column prop="updateTime" label="修改时间" align="center"> </el-table-column>
<el-table-column fixed="right" label="操作" width="300" align="center">
<template slot-scope="scope">
<el-button @click="handleEdit(scope.row)" type="primary" size="small"><i class="el-icon-edit"></i></el-button>
<el-button @click="handleDelete(scope.row)" type="primary" size="small"><i class="el-icon-delete"></i></el-button>
<el-button type="primary" size="small" @click="handerRole(scope.row)">分配菜单</el-button>
</template>
</el-table-column>
</el-table>
<div style="margin-top: 30px; float: right">
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="pageNum"
:page-sizes="[10, 20, 30, 40]"
:page-size="pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="total"
>
</el-pagination>
</div>
</div>
<el-dialog :title="flagName ? '添加' : '编辑'" :visible.sync="centerDialogVisible" width="50%" center>
<el-form label-position="top" label-width="80px" :model="formLabelAlign">
<el-form-item label="code(不能修改)" v-if="flagName">
<el-input v-model="formLabelAlign.code"></el-input>
</el-form-item>
<el-form-item label="code" v-else>
<el-input v-model="formLabelAlign.code" disabled></el-input>
</el-form-item>
<el-form-item label="角色">
<el-input v-model="formLabelAlign.name"></el-input>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="centerDialogVisible = false">返回</el-button>
<el-button type="primary" @click="handerAddSave" v-if="flagName">保存</el-button>
<el-button type="primary" @click="handerEditSave" v-else>保存</el-button>
</span>
</el-dialog>
<el-dialog title="分配菜单" :visible.sync="centerDialogVisibleRole" width="60%">
<div style="margin: 15px 0"></div>
<el-tree
:data="data"
show-checkbox
:expand-on-click-node="false"
node-key="routerId"
ref="tree"
:check-strictly="checkStrictly"
highlight-current
:props="defaultProps"
:default-checked-keys="checkedList"
@check="clickDeal"
>
<span class="custom-tree-node" slot-scope="{ data }">
<span>{ { data.name }}</span>
</span>
</el-tree>
<span slot="footer" class="dialog-footer">
<el-button @click="centerDialogVisibleRole = false">取 消</el-button>
<el-button type="primary" @click="handerConfirm">立即提交</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
import { getRole, getRoleEdit, getRoleAdd, getRoleDelete } from '@/api/index';
import { postPermissions, getPermissions, getRoutersByRole, getRouterList, postRouterToRole, getRouterTree } from '@/api/subsystem';
const cityOptions = [];
export default {
data() {
return {
data: [], //菜单
checkedList: [],
checkStrictly: false,
defaultProps: {
children: 'children',
label: 'label'
},
pageNum: 1,
pageSize: 10,
total: 0,
roleId: null,
formInline: {
user: ''
},
flagName: false,
centerDialogVisible: false,
centerDialogVisibleRole: false,
formLabelAlign: {
name: '',
code: ''
},
checkAll: false,
checkedCities: [],
cities: cityOptions,
isIndeterminate: true,
tableData: [],
ckeckedVal: []
};
},
created() {
this.getRoleList({});
this.getDefaultChecked(this.roleId);
},
methods: {
handleSizeChange(val) {
// console.log(`每页 ${val} 条`);
this.pageSize = val;
this.getRoleList();
},
handleCurrentChange(val) {
// console.log(`当前页: ${val}`);
this.pageNum = val;
this.getRoleList();
},
// 查询
getRoleList() {
let params = {
pageNum: this.pageNum,
pageSize: this.pageSize,
name: this.formInline.user
};
getRole(params).then((res) => {
if (res.status == 200) {
this.tableData = res.data.data.list;
this.total = res.data.data.total;
this.pageNum = res.data.data.pageNum;
this.pageSize = res.data.data.pageSize;
}
});
},
// 搜索
handerSearch() {
this.getRoleList(this.formInline.name);
},
// 添加
handerAdd() {
this.formLabelAlign = {};
this.flagName = true;
this.centerDialogVisible = true;
},
// 分配菜单
handerRole(row) {
this.roleId = row.id;
this.getPermissions();
this.centerDialogVisibleRole = true;
this.getPermissionsUser(row.id);
},
// 获取el_tree 选中节点
clickDeal(val) {
this.ckeckedVal = this.checkedList;
if (val.children && val.children.length > 0) {
val.children.forEach((v) => {
this.ckeckedVal.push(v.routerId);
});
} else {
this.ckeckedVal.push(val.routerId);
}
// console.log(3636, this.ckeckedVal);
},
// 获取菜单列表
getPermissions() {
getRouterTree().then((res) => {
this.data = res.data.data;
});
},
// 获取id的权限列表
getPermissionsUser(id) {
this.data = [];
getRoutersByRole({ roleId: id }).then((res) => {
this.checkedList = [];
res.data.data.forEach((v) => {
this.checkedList.push(v.routerId);
});
});
},
// 立即提交
handerConfirm() {
let params = {
roleId: this.roleId,
routers: this.ckeckedVal.map(String)
};
postRouterToRole(params).then((res) => {
// console.log('9898==', params, res);
if (res) {
this.centerDialogVisibleRole = false;
this.$message.success('分配成功');
}
});
},
// 编辑
handleEdit(row) {
this.flagName = false;
this.centerDialogVisible = true;
this.formLabelAlign = row;
},
// 添加保存
handerAddSave() {
getRoleAdd(this.formLabelAlign).then((res) => {
if (res.status == 200) {
this.centerDialogVisible = false;
this.getRoleList();
this.$message.success('添加成功');
}
});
},
// 编辑保存
handerEditSave() {
getRoleEdit(this.formLabelAlign).then((res) => {
if (res.status == 200) {
this.centerDialogVisible = false;
this.getRoleList();
this.$message.success('修改成功');
}
});
},
handleDelete(row) {
this.$confirm('确定要删除吗?', '信息', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
})
.then(() => {
getRoleDelete(row.id).then((res) => {
this.getRoleList();
this.$message({
type: 'success',
message: '删除成功!'
});
});
})
.catch(() => {
this.$message({
type: 'info',
message: '已取消删除'
});
});
},
getDefaultChecked(roleId) {}
}
};
</script>
<style lang="less" scoped></style>