<template>
|
<div class="menuSettings_box">
|
<div class="menuSettings_tree">
|
<My-bread :list="[
|
`${$t('operatManage.operatManage')}`,
|
`${$t('operatManage.UserRoleAuthorization')}`,
|
]"></My-bread>
|
|
<el-divider />
|
<div class="menuTreeBox">
|
<el-tree :data="depList"
|
:props="defaultProps"
|
:show-checkbox="true"
|
:check-on-click-node="true"
|
:check-strictly="true"
|
node-key="id"
|
@check="treeCheck"
|
ref="treeForm">
|
</el-tree>
|
</div>
|
</div>
|
<div class="menuSettings_tree"
|
style="margin-left: 10px; width: calc(50% - 172px)">
|
<div style="
|
font-size: 14px;
|
color: #606266;
|
line-height: 1;
|
cursor: text;
|
position: relative;
|
top: 10px;
|
margin-left: 10px;
|
">
|
{{ $t("operatManage.UserRoleAuthorizationObj.RoleTable") }}
|
</div>
|
<el-divider />
|
<el-table :data="tableData"
|
style="width: 100%"
|
@row-click="singleElection"
|
highlight-current-row
|
height="85%"
|
:header-cell-style="{
|
background: 'transparent',
|
}">
|
<el-table-column align="center"
|
width="55">
|
<template slot-scope="scope">
|
<!-- 可以手动的修改label的值，从而控制选择哪一项 -->
|
<el-radio class="radio"
|
v-model="templateSelection"
|
:label="scope.row.id"> </el-radio>
|
</template>
|
</el-table-column>
|
<el-table-column prop="id"
|
:label="$t('operatManage.UserRoleAuthorizationObj.serialNumber')">
|
</el-table-column>
|
<el-table-column prop="name"
|
:label="$t('operatManage.UserRoleAuthorizationObj.name')">
|
</el-table-column>
|
</el-table>
|
<div style="text-align: center; margin-top: 20px">
|
<el-pagination @size-change="handleSizeChange"
|
@current-change="handleCurrentChange"
|
:current-page="listData.pageIndex"
|
:page-sizes="[10, 20, 30, 40]"
|
:page-size="userlistData.pageSize"
|
layout="total, sizes, prev, pager, next, jumper"
|
:total="count">
|
</el-pagination>
|
</div>
|
</div>
|
<div class="menuSettings">
|
<!-- <div class="title_box">
|
<h4>详细信息</h4>
|
</div> -->
|
<div style="
|
font-size: 14px;
|
color: #606266;
|
line-height: 1;
|
cursor: text;
|
position: relative;
|
top: 5px;
|
margin-left: 10px;
|
display: flex;
|
align-items: center;
|
">
|
<span>
|
{{ $t("operatManage.UserRoleAuthorizationObj.userTable") }}</span>
|
<div class="btn"
|
style="margin-left: auto">
|
<el-button type="primary"
|
icon="el-icon-circle-plus-outline"
|
size="small"
|
:disabled="roleid == null ? true : false"
|
@click="adduser">{{ $t("operatManage.UserRoleAuthorizationObj.Added") }}</el-button>
|
<el-button type="danger"
|
icon="el-icon-delete"
|
size="small"
|
@click="deletesUser"
|
:disabled="roleid == null ? true : false">{{ $t("operatManage.UserRoleAuthorizationObj.delete") }}</el-button>
|
</div>
|
</div>
|
<el-divider class="divider" />
|
|
<el-table :data="usertableData"
|
stripe
|
style="width: 100%"
|
height="85%"
|
@selection-change="handleSelectionChange"
|
:header-cell-style="{
|
background: 'transparent',
|
}">
|
<el-table-column type="selection"
|
width="55"> </el-table-column>
|
<el-table-column prop="id"
|
:label="$t('operatManage.UserRoleAuthorizationObj.serialNumber')">
|
</el-table-column>
|
<el-table-column prop="uname"
|
:label="$t('operatManage.UserRoleAuthorizationObj.name')">
|
</el-table-column>
|
</el-table>
|
|
<div style="margin-top: 20px; text-align: center"
|
class="pagination_box">
|
<el-pagination @size-change="userhandleSizeChange"
|
@current-change="userhandleCurrentChange"
|
:current-page="userlistData.pageIndex"
|
:page-sizes="[10, 20, 30, 40]"
|
:page-size="userlistData.pageSize"
|
layout="total, sizes, prev, pager, next, jumper"
|
:total="usercount">
|
</el-pagination>
|
</div>
|
</div>
|
<el-dialog :title="$t('operatManage.UserRoleAuthorizationObj.Added')"
|
:visible.sync="dialogTableVisible">
|
<el-table :data="gridData"
|
height="40vh"
|
@selection-change="addhandleSelectionChange">
|
<el-table-column type="selection"
|
width="55"> </el-table-column>
|
<el-table-column prop="id"
|
:label="$t('operatManage.UserRoleAuthorizationObj.serialNumber')">
|
</el-table-column>
|
<el-table-column prop="uname"
|
:label="$t('operatManage.UserRoleAuthorizationObj.name')">
|
</el-table-column>
|
</el-table>
|
<div style="margin-top: 20px; text-align: center"
|
class="pagination_box">
|
<el-pagination @size-change="addhandleSizeChange"
|
@current-change="addhandleCurrentChange"
|
:current-page="addlistData.pageIndex"
|
:page-sizes="[10, 20, 30, 40]"
|
:page-size="addlistData.pageSize"
|
layout="total, sizes, prev, pager, next, jumper"
|
:total="addcount">
|
</el-pagination>
|
</div>
|
<div slot="footer"
|
class="dialog-footer">
|
<el-button @click="dialogTableVisible = false">{{ $t("dataManage.dictionaryManageObj.cancel") }}</el-button>
|
<el-button type="primary"
|
@click="addConfirm">{{ $t("dataManage.dictionaryManageObj.confirm") }}</el-button>
|
</div>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script>
|
import MyBread from "../../components/MyBread.vue";
|
import {
|
queryDepTree,
|
select_Role_ByPageAndCount,
|
roleUserselectByPageForRole,
|
roleUserdeletes,
|
userselectByPageForRole,
|
roleUserinserts,
|
} from "../../api/api";
|
export default {
|
//import引入的组件需要注入到对象中才能使用
|
components: {
|
MyBread,
|
},
|
|
data () {
|
return {
|
addcount: 0,
|
gridData: [],
|
addlistData: {
|
pageIndex: 1,
|
pageSize: 10,
|
},
|
dialogTableVisible: false,
|
usertableData: [],
|
userlistData: {
|
pageIndex: 1,
|
pageSize: 10,
|
},
|
usercount: 0,
|
tableData: [],
|
// 当前选择的行的id
|
templateSelection: "",
|
// 当前选择的行的数据
|
checkList: [],
|
|
defaultProps: {
|
children: "children",
|
label: "name",
|
},
|
oriData: [], //原始树数据
|
depList: [], //el树数据
|
backUpData: {},
|
formLabelWidth: "170px",
|
listData: {
|
pageIndex: 1,
|
pageSize: 10,
|
},
|
count: 0,
|
usermultipleSelection: [],
|
debid: null,
|
roleid: null,
|
addmultipleSelection: [],
|
};
|
},
|
methods: {
|
addConfirm () {
|
this.$confirm("确定是否新增", "提示", {
|
confirmButtonText: "确定",
|
cancelButtonText: "取消",
|
type: "warning",
|
})
|
.then(async () => {
|
let arr = [];
|
this.addmultipleSelection.forEach((e) => {
|
arr.push({ userid: e.id, roleid: this.roleid });
|
});
|
const data = await roleUserinserts(arr);
|
if (data.code !== 200) {
|
return this.$message.error("新增失败");
|
}
|
this.$message({
|
type: "success",
|
message: "新增成功!",
|
});
|
this.dialogTableVisible = false;
|
this.getuserList();
|
})
|
.catch(() => { });
|
},
|
adduser () {
|
this.dialogTableVisible = true;
|
this.getadduserList();
|
},
|
//用户删除
|
async deletesUser () {
|
let arr = [];
|
this.usermultipleSelection.forEach((e) => {
|
arr.push(e.id);
|
});
|
const data = await roleUserdeletes({ ids: arr.toString() });
|
if (data.code !== 200) {
|
return this.$message.error("删除失败");
|
}
|
this.$message({
|
message: "删除成功",
|
type: "success",
|
});
|
this.getuserList();
|
},
|
//用户表多选
|
handleSelectionChange (val) {
|
this.usermultipleSelection = val;
|
},
|
//新增用户表多选
|
addhandleSelectionChange (val) {
|
this.addmultipleSelection = val;
|
},
|
// 新增用户表分页
|
addhandleSizeChange (val) {
|
this.addlistData.pageSize = val;
|
this.getadduserList();
|
},
|
// 新增用户表分页
|
addhandleCurrentChange (val) {
|
this.addlistData.pageIndex = val;
|
this.getadduserList();
|
},
|
// 用户表分页
|
userhandleSizeChange (val) {
|
this.userlistData.pageSize = val;
|
this.getuserList();
|
},
|
// 用户表分页
|
userhandleCurrentChange (val) {
|
this.userlistData.pageIndex = val;
|
this.getuserList();
|
},
|
// 角色表分页
|
handleSizeChange (val) {
|
this.listData.pageSize = val;
|
this.getRole();
|
},
|
// 角色表分页
|
handleCurrentChange (val) {
|
this.listData.pageIndex = val;
|
this.getRole();
|
},
|
// 角色单选
|
singleElection (row) {
|
this.templateSelection = row.id;
|
this.checkList = this.tableData.filter((item) => item.id === row.id);
|
this.userlistData.roleid = row.id;
|
this.roleid = row.id;
|
this.getuserList();
|
},
|
// 部门请求
|
async getMenuTree () {
|
//获取目录树最大ID，新建节点使用
|
const data = await queryDepTree();
|
|
if (data.code !== 200) {
|
return this.$message.error("请求单位报错");
|
}
|
this.depList = this.treeData(data.result);
|
},
|
treeData (source) {
|
let cloneData = JSON.parse(JSON.stringify(source)); // 对源数据深度克隆
|
return cloneData.filter((father) => {
|
// 循环所有项
|
let branchArr = cloneData.filter((child) => father.id == child.pid); // 对比ID，分别上下级菜单，并返回数据
|
branchArr.length > 0 ? (father.children = branchArr) : ""; // 给父级添加一个children属性，并赋值
|
return father.pid == 0; // 返回一级菜单
|
});
|
},
|
// 部门树单选
|
treeCheck (node, list) {
|
//node 该节点所对应的对象、list 树目前的选中状态对象
|
//选中事件在选中后执行，当lis中有两个选中时，使用setCheckedKeys方法，选中一个节点
|
console.log(node, list);
|
if (list.checkedNodes.length > 0) {
|
this.listData.depid = node.id;
|
this.debid = node.id;
|
this.getRole();
|
if (list.checkedKeys.length == 2) {
|
//单选实现
|
this.$refs.treeForm.setCheckedKeys([node.id]);
|
}
|
} else {
|
this.debid = null;
|
this.roleid = null;
|
this.tableData = [];
|
this.usertableData = [];
|
}
|
},
|
async getadduserList () {
|
this.addlistData.roleid = this.roleid;
|
|
this.addlistData.debid = this.debid;
|
const data = await userselectByPageForRole(this.addlistData);
|
if (data.code !== 200) {
|
return this.$message.error("新增用户列表请求错误");
|
}
|
this.gridData = data.result;
|
this.addcount = data.count;
|
},
|
// 用户表请求
|
async getuserList () {
|
const data = await roleUserselectByPageForRole(this.userlistData);
|
if (data.code !== 200) {
|
return this.$message.error("用户列表请求错误");
|
}
|
this.usertableData = data.result;
|
this.usercount = data.count;
|
},
|
// 角色表请求
|
async getRole () {
|
const data = await select_Role_ByPageAndCount(this.listData);
|
if (data.code !== 200) {
|
return this.$message.error("用户角色请求错误");
|
}
|
this.tableData = data.result;
|
this.count = data.count;
|
},
|
},
|
created () {
|
this.getMenuTree();
|
},
|
};
|
</script>
|
<style lang="less" scoped>
|
//@import url(); 引入公共css类
|
.menuSettings_box {
|
// background: rgb(240, 242, 245);
|
border-radius: 10px;
|
height: 100%;
|
padding: 10px;
|
box-sizing: border-box;
|
display: flex;
|
.menuSettings_tree {
|
position: relative;
|
width: 344px;
|
height: 100%;
|
background: rgb(240, 242, 245);
|
padding: 20px;
|
border-radius: 10px;
|
box-sizing: border-box;
|
overflow: auto;
|
.saveBtn {
|
position: absolute;
|
left: 250px;
|
top: 23px;
|
}
|
.menuTreeBox {
|
height: 90%;
|
overflow: auto;
|
.el-tree {
|
background: transparent;
|
font-size: 15px;
|
font-family: Microsoft YaHei;
|
font-weight: 400;
|
color: #000000;
|
// /deep/ .el-tree-node__label {
|
// font-size: 18px;
|
// }
|
/deep/ .el-tree-node {
|
padding-top: 10px;
|
// padding-bottom: 10px;
|
}
|
/deep/ .el-tree-node:focus > .el-tree-node__content {
|
background-color: #b9b9b9;
|
}
|
/deep/ .el-tree-node__content:hover {
|
background-color: rgb(153, 153, 153);
|
}
|
.btnBox {
|
margin-left: 5px;
|
.el-button + .el-button {
|
margin-left: 5px;
|
}
|
}
|
}
|
}
|
}
|
.menuSettings {
|
width: calc(50% - 172px);
|
border-radius: 10px;
|
background: rgb(240, 242, 245);
|
margin-left: 10px;
|
height: 100%;
|
padding: 20px;
|
box-sizing: border-box;
|
.title_box {
|
background: #fff;
|
padding: 10px;
|
margin-bottom: 24px;
|
display: flex;
|
border-radius: 10px;
|
border: 1px solid rgb(202, 201, 204);
|
box-sizing: border-box;
|
}
|
}
|
.table_box {
|
padding: 10px;
|
background: #fff;
|
border-radius: 5px;
|
border: 1px solid rgb(202, 201, 204);
|
overflow: auto;
|
height: 85%;
|
}
|
.divider {
|
margin-top: 8px;
|
}
|
}
|
.el-table,
|
.el-table /deep/ .el-table__expanded-cell {
|
background-color: transparent;
|
}
|
|
.el-table /deep/ th,
|
.el-table /deep/ tr {
|
background-color: transparent;
|
}
|
</style>
|
