<template>
|
<div class="app-container">
|
<div>
|
<el-form :inline="true" :model="formInline" class="demo-form-inline">
|
<el-form-item label="用户名称：">
|
<el-input v-model="formInline.roleName" ize="mini" placeholder="请输入用户名称"></el-input>
|
</el-form-item>
|
<el-form-item>
|
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
|
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
|
</el-form-item>
|
</el-form>
|
</div>
|
|
<el-divider></el-divider>
|
<div class="roleCotent">
|
<div class="roleLeft roleBox">
|
<div class="roleTable">
|
<el-table ref="roleTable" highlight-current-row :data="tableData" @row-click="handleRoleClick"
|
style="width: 100%" height="calc(100% - 1px)">
|
<el-table-column label="角色编号" prop="roleId" align="center" />
|
<el-table-column label="角色名称" prop="roleName" align="center" />
|
<el-table-column label="权限字符" prop="roleKey" align="center" />
|
<el-table-column label="显示顺序" prop="roleSort" align="center" />
|
<el-table-column label="创建时间" align="center" prop="createTime">
|
<template slot-scope="scope">
|
<span>{{ parseTime(scope.row.createTime) }}</span>
|
</template>
|
</el-table-column>
|
</el-table>
|
</div>
|
<div class="rolePage">
|
<pagination v-show="formInline.total > 0" :total="formInline.total" :page.sync="formInline.pageNum"
|
:limit.sync="formInline.pageSize" @pagination="getList" />
|
</div>
|
|
</div>
|
<div class="roleRight roleBox">
|
|
<el-form>
|
<el-form-item label="菜单权限" v-show="false">
|
<el-checkbox v-model="menuExpand"
|
@change="handleCheckedTreeExpand($event, 'menu')">展开/折叠</el-checkbox>
|
<el-checkbox v-model="menuNodeAll"
|
@change="handleCheckedTreeNodeAll($event, 'menu')">全选/全不选</el-checkbox>
|
<el-checkbox v-model="form.menuCheckStrictly"
|
@change="handleCheckedTreeConnect($event, 'menu')">父子联动</el-checkbox>
|
</el-form-item>
|
</el-form>
|
<div class="roleTreeBox">
|
<div class="treeBox">
|
<el-tree ref="powerTree" class="tree-border" :data="menuOptions" show-checkbox node-key="id"
|
:check-strictly="!form.menuCheckStrictly" empty-text="加载中，请稍候"
|
:default-expanded-keys="expanded" :props="defaultProps"></el-tree>
|
</div>
|
</div>
|
<div class="roeleSubmit">
|
<el-button type="primary" icon="el-icon-upload2" size="mini" @click="handleUpload">提交</el-button>
|
</div>
|
|
</div>
|
</div>
|
|
</div>
|
</template>
|
|
<script>
|
import {
|
addRole,
|
listRole,
|
getRole,
|
updateRole,
|
} from "@/api/system/role";
|
import {
|
treeselect as menuTreeselect,
|
roleMenuTreeselect
|
} from "@/api/system/menu"
|
export default {
|
data() {
|
return {
|
formInline: {
|
roleName: '',
|
total: 0,
|
pageNum: 1,
|
pageSize: 10,
|
},
|
tableData: [],
|
checkRow: null,
|
form: {},
|
menuOptions: [],
|
checkedKeys: [],
|
defaultProps: {
|
children: "children",
|
label: "label"
|
},
|
menuExpand: false,
|
menuNodeAll: false,
|
menuIds: [],
|
expanded: []
|
}
|
},
|
mounted() {
|
this.resetQuery();
|
},
|
methods: {
|
// 搜索事件
|
handleQuery() {
|
this.formInline.pageNum = 1
|
this.getRoleData();
|
},
|
// 重置事件
|
resetQuery() {
|
this.formInline = {
|
roleName: '',
|
total: 0,
|
pageNum: 1,
|
pageSize: 10,
|
}
|
this.$nextTick(() => {
|
this.getRoleData();
|
})
|
},
|
// 分页点击事件
|
getList() {
|
this.getRoleData();
|
},
|
// 表格行点击事件
|
handleRoleClick(row, column, event) {
|
this.checkRow = row;
|
this.getTreePower();
|
},
|
|
// 获取角色列表数据
|
getRoleData() {
|
listRole(this.formInline).then(response => {
|
if (response.code != 200) {
|
return this.$message({
|
message: '角色列表查询失败',
|
type: 'warning'
|
});
|
};
|
this.formInline.total = response.total;
|
var table_data = response.rows.filter(item => {
|
if (item.roleId != 1) {
|
return item
|
}
|
})
|
this.tableData = table_data;
|
this.checkRow = this.tableData[0];
|
this.getTreePower();
|
this.$refs.roleTable.setCurrentRow(this.checkRow);
|
|
})
|
},
|
// 获取菜单权限
|
getTreePower() {
|
this.menuExpand = false;
|
this.menuNodeAll = false;
|
this.menuOptions = [];
|
this.checkedKeys = [];
|
this.menuIds = [];
|
roleMenuTreeselect(this.checkRow.roleId).then(response => {
|
if (response.code != 200) {
|
return this.$message({
|
message: '菜单列表查询失败',
|
type: 'warning'
|
});
|
}
|
this.menuOptions = response.menus;
|
this.menuIds = this.getMenuIds(this.menuOptions, [])
|
this.checkedKeys = response.checkedKeys;
|
|
this.expanded= [this.menuOptions[0].id]
|
this.getRole()
|
});
|
|
},
|
getMenuIds(node, ids) {
|
for (var i in node) {
|
const child = node[i];
|
if (child.children) {
|
this.getMenuIds(child.children, ids)
|
} else {
|
ids.push(node[i].id)
|
}
|
}
|
return ids;
|
|
},
|
// 根据id 查询角色
|
getRole() {
|
getRole(this.checkRow.roleId).then(response => {
|
if (response.code != 200) {
|
return this.$message({
|
message: '角色信息获取失败',
|
type: 'warning'
|
});
|
}
|
this.form = response.data
|
let checkedKeys = this.checkedKeys;
|
checkedKeys.forEach(v => {
|
this.$nextTick(() => {
|
this.$refs.powerTree.setChecked(v, true, false);
|
});
|
});
|
|
|
|
})
|
},
|
isElTreeAllSelected(tree) {
|
// 假设tree是el-tree的实例，可以通过Vue实例访问到
|
const getAllNodes = (tree) => {
|
let allNodes = [];
|
const traverse = (node) => {
|
allNodes.push(node);
|
|
node.childNodes.forEach((child) => traverse(child));
|
};
|
traverse(tree);
|
return allNodes;
|
};
|
|
const allNodes = getAllNodes(tree); // 获取所有节点
|
return allNodes.every(node => node.checked); // 检查每个节点是否选中
|
},
|
// 树权限（全选/全不选）
|
handleCheckedTreeNodeAll(value, type) {
|
if (type == "menu") {
|
this.$refs.powerTree.setCheckedNodes(value ? this.menuOptions : []);
|
} else if (type == "dept") {
|
this.$refs.dept.setCheckedNodes(value ? this.deptOptions : []);
|
}
|
},
|
// 树权限（展开/折叠）
|
handleCheckedTreeExpand(value, type) {
|
if (type == "menu") {
|
let treeList = this.menuOptions;
|
for (let i = 0; i < treeList.length; i++) {
|
this.$refs.powerTree.store.nodesMap[treeList[i].id].expanded = value;
|
}
|
} else if (type == "dept") {
|
let treeList = this.deptOptions;
|
for (let i = 0; i < treeList.length; i++) {
|
this.$refs.dept.store.nodesMap[treeList[i].id].expanded = value;
|
}
|
}
|
},
|
// 所有菜单节点数据
|
getMenuAllCheckedKeys() {
|
// 目前被选中的菜单节点
|
let checkedKeys = this.$refs.powerTree.getCheckedKeys();
|
// 半选中的菜单节点
|
let halfCheckedKeys = this.$refs.powerTree.getHalfCheckedKeys();
|
checkedKeys.unshift.apply(checkedKeys, halfCheckedKeys);
|
return checkedKeys;
|
},
|
//修改提交
|
handleUpload() {
|
if (this.form.roleId != undefined) {
|
this.form.menuIds = this.getMenuAllCheckedKeys();
|
updateRole(this.form).then(response => {
|
this.$modal.msgSuccess("修改成功");
|
this.getTreePower();
|
});
|
} else {
|
this.form.menuIds = this.getMenuAllCheckedKeys();
|
addRole(this.form).then(response => {
|
this.$modal.msgSuccess("新增成功");
|
|
this.getTreePower();
|
});
|
}
|
}
|
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.app-container {
|
height: calc(100vh - 84px);
|
width: 100%;
|
position: absolute;
|
display: flex;
|
flex-direction: column;
|
|
.roleCotent {
|
flex: 1;
|
display: flex;
|
}
|
|
.roleRight {
|
flex: 1;
|
padding: 10px;
|
display: flex;
|
flex-direction: column;
|
|
.roeleSubmit {
|
margin: 10px 0px;
|
width: 100%;
|
display: flex;
|
justify-content: end;
|
}
|
|
.roleTreeBox {
|
flex: 1;
|
position: relative;
|
|
|
.treeBox {
|
// padding: 10px;
|
overflow: auto;
|
width: 100%;
|
height: 100%;
|
position: absolute;
|
// border: 1px solid #e5e6e7;
|
// background: #FFFFFF none;
|
border-radius: 4px;
|
|
::v-deep .tree-border {
|
margin: 0;
|
border: transparent;
|
}
|
}
|
}
|
}
|
|
.roleLeft {
|
width: 60%;
|
height: 100%;
|
margin-right: 1%;
|
position: relative;
|
display: flex;
|
flex-direction: column;
|
|
.roleTable {
|
flex: 1;
|
}
|
|
.rolePage {
|
margin: 10px 20px 20px 0px;
|
}
|
}
|
|
.roleBox {
|
border: 1px solid #DCDFE6;
|
box-shadow: 0px 0px 4px 0px rgba(14, 22, 32, 0.2);
|
border-radius: 10px;
|
}
|
|
|
|
::v-deep .el-divider--horizontal {
|
margin: 0px 0px 22px 0px;
|
|
}
|
}
|
</style>
|
