<template>
|
<div class="inquire">
|
<el-form ref="queryForm" :model="queryFormdata" :inline="true">
|
<el-form-item label="角色名称">
|
<el-input
|
v-model="queryFormdata.roleName"
|
placeholder="请输入角色名称"
|
/>
|
</el-form-item>
|
<el-form-item>
|
<el-button type="primary" @click="queryInfo()" icon="el-icon-search"
|
>查询
|
</el-button>
|
</el-form-item>
|
<br />
|
</el-form>
|
</div>
|
<div class="header_nox">
|
<el-button type="primary" @click="handleAdd()">新增</el-button>
|
</div>
|
<el-table :data="tableData" style="width: 100%">
|
<el-table-column prop="roleName" label="角色名称" />
|
<el-table-column prop="roleCode" label="角色编码" />
|
<el-table-column prop="createTime" label="创建时间" />
|
<el-table-column label="操作">
|
<template #default="scope">
|
<el-link type="primary" @click="userFunc(scope.row)">用户</el-link>
|
<el-divider direction="vertical" />
|
|
<el-popconfirm
|
width="160px"
|
confirm-button-text="确认"
|
cancel-button-text="取消"
|
:icon="InfoFilled"
|
icon-color="#eebe59"
|
title="确认是否删除"
|
@confirm="confirmDelete(scope.row)"
|
>
|
<template #reference>
|
<el-link type="primary">删除</el-link>
|
</template>
|
</el-popconfirm>
|
<el-divider direction="vertical" />
|
<el-dropdown>
|
<span class="el-dropdown-link">
|
更多
|
<el-icon class="el-icon--right">
|
<arrow-down />
|
</el-icon>
|
</span>
|
<template #dropdown>
|
<el-dropdown-menu>
|
<el-dropdown-item @click="editFunc(scope.row)"
|
>编辑</el-dropdown-item
|
>
|
<el-dropdown-item @click="detailFunc(scope.row)"
|
>详情</el-dropdown-item
|
>
|
<el-dropdown-item @click="authFunc(scope.row)"
|
>授权</el-dropdown-item
|
>
|
</el-dropdown-menu>
|
</template>
|
</el-dropdown>
|
</template>
|
</el-table-column>
|
</el-table>
|
<div class="page">
|
<el-pagination
|
background
|
layout="prev, pager, next"
|
:page-count="pageData.total"
|
:current-page="pageData.ListData.pageNo"
|
@current-change="handleCurrentChange"
|
/>
|
</div>
|
<el-drawer
|
ref="drawerRef"
|
v-model="dialog"
|
:title="drawertitle"
|
:before-close="handleClose"
|
direction="rtl"
|
class="demo-drawer"
|
:destroy-on-close="true"
|
>
|
<div v-if="drawertitle == '用户详情'">
|
<el-descriptions title="用户详情" :column="1" border>
|
<el-descriptions-item label="角色名称">{{
|
roleForm.roleName
|
}}</el-descriptions-item>
|
<el-descriptions-item label="角色编码">{{
|
roleForm.roleCode
|
}}</el-descriptions-item>
|
<el-descriptions-item label="备注">{{
|
roleForm.description
|
}}</el-descriptions-item>
|
</el-descriptions>
|
</div>
|
<div v-else class="demo-drawer__content">
|
<el-form :model="roleForm" :rules="rules" ref="ruleFormRef">
|
<el-form-item
|
prop="roleName"
|
label="角色名称"
|
:label-width="formLabelWidth"
|
>
|
<el-input v-model="roleForm.roleName" autocomplete="off" />
|
</el-form-item>
|
<el-form-item
|
prop="roleCode"
|
label="角色编码"
|
:label-width="formLabelWidth"
|
>
|
<el-input
|
:disabled="drawertitle == '用户编辑' ? true : false"
|
v-model="roleForm.roleCode"
|
autocomplete="off"
|
/>
|
</el-form-item>
|
<el-form-item label="备注" :label-width="formLabelWidth">
|
<el-input
|
:rows="2"
|
type="textarea"
|
v-model="roleForm.description"
|
autocomplete="off"
|
/>
|
</el-form-item>
|
</el-form>
|
<div class="dialog-footer" v-if="drawertitle == '新增用户'">
|
<el-button @click="handleClose">取消</el-button>
|
<el-button type="primary" @click="addRole(ruleFormRef)">添加</el-button>
|
</div>
|
<div class="dialog-footer" v-if="drawertitle == '用户编辑'">
|
<el-button @click="handleClose">取消</el-button>
|
<el-button type="primary" @click="editRole(ruleFormRef)"
|
>确定</el-button
|
>
|
</div>
|
</div>
|
</el-drawer>
|
<el-drawer
|
ref="addRoleRef"
|
v-model="roleTable"
|
:title="secondTitle"
|
:before-close="secondClose"
|
direction="rtl"
|
class="demo-drawer"
|
destroy-on-close
|
>
|
<div class="inquire">
|
<el-form ref="queryForm" :model="queryUserRoledata" :inline="true">
|
<el-form-item label="用户账号">
|
<el-input v-model="queryUserRoledata.username" />
|
</el-form-item>
|
<el-form-item>
|
<el-button
|
type="primary"
|
@click="queryUserInfo()"
|
icon="el-icon-search"
|
>查询
|
</el-button>
|
</el-form-item>
|
<br />
|
</el-form>
|
</div>
|
<div>
|
<el-button type="primary" @click="bindUser">绑定用户 </el-button>
|
</div>
|
<el-table
|
stripe
|
style="width: 100%"
|
:data="gridData"
|
table-layout="auto"
|
fit
|
>
|
<el-table-column property="username" label="用户账号" />
|
<el-table-column property="realname" label="用户姓名" />
|
<el-table-column property="status_dictText" label="状态" />
|
<el-table-column label="操作">
|
<template #default="scope">
|
<el-popconfirm
|
width="160px"
|
confirm-button-text="确认"
|
cancel-button-text="取消"
|
:icon="InfoFilled"
|
icon-color="#eebe59"
|
title="是否确认取消关联"
|
@confirm="confirmEvent(scope.row)"
|
>
|
<template #reference>
|
<el-link type="primary">取消关联</el-link>
|
</template>
|
</el-popconfirm>
|
</template>
|
</el-table-column>
|
</el-table>
|
<div class="page">
|
<el-pagination
|
background
|
layout="prev, pager, next"
|
:page-count="pageData2.total"
|
:current-page="pageData2.ListData.pageNo"
|
@current-change="handleCurrentChange2"
|
/>
|
</div>
|
</el-drawer>
|
<!-- 授权 -->
|
<el-drawer
|
v-model="authDrawer"
|
title="角色权限配置"
|
:before-close="authDrawerClose"
|
direction="rtl"
|
class="authDrawerBox"
|
:destroy-on-close="true"
|
>
|
<template #default>
|
<div class="treeBox">
|
<el-tree
|
ref="treeRef"
|
:data="menuOptions"
|
show-checkbox
|
default-expand-all
|
node-key="value"
|
check-strictly
|
highlight-current
|
check-on-click-node
|
:props="defaultProps"
|
/>
|
</div>
|
</template>
|
<template #footer>
|
<div style="flex: auto">
|
<el-button @click="authDrawerClose()">取消</el-button>
|
<el-button type="primary" @click="saveRolePerm()"> 保存 </el-button>
|
</div>
|
</template>
|
</el-drawer>
|
|
<el-dialog
|
destroy-on-close
|
:before-close="thirdClose"
|
v-model="dialogTableVisible"
|
title="用户选择列表"
|
width="900px"
|
>
|
<div class="inquire">
|
<el-form ref="queryForm" :model="queryUserList" :inline="true">
|
<el-form-item label="用户账号">
|
<el-input v-model="queryUserList.username" />
|
</el-form-item>
|
<el-form-item>
|
<el-button type="primary" @click="searchUser()" icon="el-icon-search"
|
>查询
|
</el-button>
|
</el-form-item>
|
<br />
|
</el-form>
|
</div>
|
<el-table
|
stripe
|
table-layout="auto"
|
fit
|
@selection-change="handleSelectionChange"
|
:data="userTable"
|
style="width: 100%"
|
>
|
<el-table-column type="selection" width="50px" />
|
<el-table-column prop="username" label="用户账号" />
|
<el-table-column prop="realname" label="用户姓名" />
|
<el-table-column prop="status_dictText" label="状态" />
|
</el-table>
|
<div class="page">
|
<el-pagination
|
background
|
layout="prev, pager, next"
|
:page-count="pageData3.total"
|
:current-page="pageData3.ListData.pageNo"
|
@current-change="handleCurrentChange3"
|
/>
|
</div>
|
<div class="dialog-footer">
|
<el-button @click="thirdClose()">取消</el-button>
|
<el-button type="primary" @click="sendBind()"> 确定 </el-button>
|
</div>
|
</el-dialog>
|
</template>
|
|
<script>
|
import { ref, reactive, onMounted, getCurrentInstance } from "vue";
|
import {
|
RoleListAll,
|
checkRoleCode,
|
RoleCreate,
|
queryTreeList,
|
queryRolePermission,
|
saveRolePermission,
|
RoleUpdate,
|
deleteRole,
|
} from "@/api/role";
|
import {
|
userList,
|
userRoleList,
|
addSysUserRole,
|
deleteUserRole,
|
} from "@/api/account";
|
import { InfoFilled } from "@element-plus/icons-vue";
|
export default {
|
name: "Role",
|
props: {},
|
setup(props) {
|
let tableData = ref([]);
|
const multipleSelection = ref([]);
|
const { proxy } = getCurrentInstance();
|
const menuOptions = ref([]);
|
const defaultProps = {
|
children: "children",
|
label: "slotTitle",
|
};
|
const treeRef = ref();
|
const roleID = ref("");
|
const rolePerArr = ref([]);
|
// 查询模块
|
let queryFormdata = reactive({
|
roleName: "",
|
});
|
|
let pageData = reactive({
|
ListData: {
|
roleName: "",
|
column: "id",
|
order: "desc",
|
pageNo: 1,
|
pageSize: 10,
|
_t: new Date().getTime(),
|
},
|
total: 0,
|
});
|
const dialogTableVisible = ref(false);
|
|
// 查询用户
|
const queryInfo = async () => {
|
pageData.ListData.roleName = queryFormdata.roleName.trim();
|
getListData();
|
};
|
const validateRoleCode = (rule, value, callback) => {
|
if (value === "" || value === null || value === undefined) {
|
return callback(new Error("请输入角色编码"));
|
} else {
|
if (roleForm.id == "") {
|
checkRoleCode({
|
roleCode: value,
|
_t: new Date().getTime(),
|
}).then((res) => {
|
if (res.success) {
|
callback();
|
} else {
|
callback(new Error(res.message));
|
}
|
});
|
} else {
|
checkRoleCode({
|
id: roleForm.id,
|
roleCode: value,
|
_t: new Date().getTime(),
|
}).then((res) => {
|
if (res.success) {
|
callback();
|
} else {
|
callback(new Error(res.message));
|
}
|
});
|
}
|
}
|
};
|
const rules = reactive({
|
roleName: [
|
{ required: true, message: "请输入角色名称", trigger: "blur" },
|
],
|
roleCode: [
|
{ required: true, validator: validateRoleCode, trigger: "change" },
|
],
|
});
|
const dialog = ref(false);
|
const authDrawer = ref(false);
|
const drawertitle = ref("");
|
|
const ruleFormRef = ref();
|
|
const formLabelWidth = "80px";
|
const roleForm = reactive({
|
id: "",
|
roleName: "",
|
roleCode: "",
|
description: "",
|
});
|
const drawerRef = ref();
|
const addRoleRef = ref();
|
|
const handleClose = (done) => {
|
drawertitle.value = "";
|
roleForm.id = "";
|
roleForm.roleName = "";
|
roleForm.roleCode = "";
|
roleForm.description = "";
|
dialog.value = false;
|
};
|
//新增用户
|
const handleAdd = () => {
|
dialog.value = true;
|
drawertitle.value = "新增用户";
|
};
|
const addRole = (formEl) => {
|
if (!formEl) return;
|
formEl.validate((valid) => {
|
if (valid) {
|
let roleInfo = {
|
roleName: roleForm.roleName,
|
roleCode: roleForm.roleCode,
|
description: roleForm.description,
|
};
|
RoleCreate(roleInfo).then((res) => {
|
if (res.success) {
|
proxy.$message({
|
message: res.message,
|
type: "success",
|
});
|
}
|
handleClose();
|
getListData();
|
});
|
} else {
|
return false;
|
}
|
});
|
};
|
// 取消关联
|
const confirmEvent = (val) => {
|
let obj = {
|
userId: val.id,
|
roleId: pageData2.ListData.roleId,
|
};
|
deleteUserRole(obj)
|
.then((res) => {
|
if (res.success) {
|
proxy.$message({
|
message: res.message,
|
type: "success",
|
});
|
}
|
getListData2();
|
})
|
.catch((res) => {
|
proxy.$message({
|
message: res.message,
|
type: "error",
|
});
|
getListData2();
|
});
|
};
|
|
const gridData = ref([]);
|
const userTable = ref([]);
|
const secondTitle = ref("");
|
const roleTable = ref(false);
|
let pageData2 = reactive({
|
ListData: {
|
username: "",
|
roleId: "",
|
_t: new Date().getTime(),
|
pageNo: 1,
|
pageSize: 10,
|
},
|
total: 0,
|
});
|
let pageData3 = reactive({
|
ListData: {
|
username: "",
|
pageNo: 1,
|
pageSize: 5,
|
_t: new Date().getTime(),
|
},
|
total: 0,
|
});
|
let queryUserList = reactive({
|
username: "",
|
});
|
let queryUserRoledata = reactive({
|
username: "",
|
});
|
|
// 展开用户详情，查询当前角色下的用户
|
const userFunc = async (val) => {
|
pageData2.ListData.roleId = val.id;
|
secondTitle.value = "用户详情";
|
roleTable.value = true;
|
getListData2();
|
};
|
// 查询所有用户列表
|
const queryUserInfo = async () => {
|
pageData2.ListData.username = queryUserRoledata.username.trim();
|
getListData2();
|
};
|
// 查询指定页码
|
const getListData2 = async () => {
|
const data = await userRoleList(pageData2.ListData);
|
gridData.value = data.result.records;
|
pageData2.total = Math.ceil(
|
data.result.total / pageData2.ListData.pageSize
|
);
|
};
|
// 分页器
|
const handleCurrentChange2 = async (val) => {
|
pageData2.ListData.pageNo = val;
|
getListData2();
|
};
|
// 绑定用户
|
const bindUser = () => {
|
dialogTableVisible.value = true;
|
searchUser();
|
};
|
const searchUser = async () => {
|
pageData3.ListData.username = queryUserList.username.trim();
|
const data = await userList(pageData3.ListData);
|
userTable.value = data.result.records;
|
pageData3.total = Math.ceil(
|
data.result.total / pageData3.ListData.pageSize
|
);
|
};
|
// 分页器
|
const handleCurrentChange3 = async (val) => {
|
pageData3.ListData.pageNo = val;
|
searchUser();
|
};
|
// 多选
|
const handleSelectionChange = (val) => {
|
multipleSelection.value = val;
|
};
|
//确认绑定
|
const sendBind = () => {
|
let obj = multipleSelection.value.map((item) => {
|
return item.id;
|
});
|
let bindData = {
|
roleId: pageData2.ListData.roleId,
|
userIdList: obj,
|
};
|
addSysUserRole(bindData)
|
.then((res) => {
|
if (res.success) {
|
proxy.$message({
|
message: res.message,
|
type: "success",
|
});
|
dialogTableVisible.value = false;
|
getListData2();
|
}
|
})
|
.catch((err) => {
|
proxy.$message({
|
message: res.message,
|
type: "error",
|
});
|
dialogTableVisible.value = false;
|
getListData2();
|
});
|
multipleSelection.value = []; //清空多选
|
};
|
const thirdClose = () => {
|
queryUserList.username = "";
|
pageData3.ListData.username = "";
|
pageData3.ListData.pageNo = 1;
|
pageData3.ListData.pageSize = 10;
|
pageData3.total = 0;
|
dialogTableVisible.value = false;
|
};
|
// 关闭用户页
|
const secondClose = () => {
|
queryUserRoledata.username = "";
|
pageData2.ListData.roleId = "";
|
pageData2.ListData.pageNo = 1;
|
pageData2.ListData.pageSize = 10;
|
pageData2.total = 0;
|
roleTable.value = false;
|
};
|
|
const authFunc = async (val) => {
|
roleID.value = val.id;
|
queryTreeList({
|
_t: new Date().getTime(),
|
}).then((res) => {
|
if (res.result.treeList && res.result.treeList.length != 0) {
|
menuOptions.value = res.result.treeList;
|
}
|
});
|
|
queryRolePermission({
|
roleId: val.id,
|
_t: new Date().getTime(),
|
}).then((res) => {
|
rolePerArr.value = res.result;
|
treeRef.value.setCheckedKeys(res.result, false);
|
});
|
|
authDrawer.value = true;
|
};
|
const saveRolePerm = async () => {
|
let obj = {
|
roleId: roleID.value,
|
permissionIds: treeRef.value.getCheckedKeys(false).join(","),
|
lastpermissionIds: rolePerArr.value.join(","),
|
};
|
const data = await saveRolePermission(obj);
|
proxy.$message({
|
message: data.message,
|
type: "success",
|
});
|
queryRolePermission({
|
roleId: roleID.value,
|
_t: new Date().getTime(),
|
}).then((res) => {
|
rolePerArr.value = res.result;
|
treeRef.value.setCheckedKeys(res.result, false);
|
});
|
};
|
const authDrawerClose = () => {
|
roleID.value = "";
|
rolePerArr.value = [];
|
treeRef.value.setCheckedKeys([], false);
|
authDrawer.value = false;
|
};
|
const editFunc = async (val) => {
|
drawertitle.value = "用户编辑";
|
dialog.value = true;
|
roleForm.id = val.id;
|
roleForm.roleName = val.roleName;
|
roleForm.roleCode = val.roleCode;
|
roleForm.description = val.description;
|
};
|
const editRole = (formEl) => {
|
if (!formEl) return;
|
formEl.validate((valid) => {
|
if (valid) {
|
RoleUpdate(roleForm).then((res) => {
|
// console.log(res);
|
if (res.success) {
|
proxy.$message({
|
message: res.message,
|
type: "success",
|
});
|
}
|
handleClose();
|
getListData();
|
});
|
} else {
|
return false;
|
}
|
});
|
};
|
|
const detailFunc = (val) => {
|
drawertitle.value = "用户详情";
|
dialog.value = true;
|
roleForm.id = val.id;
|
roleForm.roleName = val.roleName;
|
roleForm.roleCode = val.roleCode;
|
roleForm.description = val.description;
|
};
|
const confirmDelete = (val) => {
|
deleteRole({
|
id: val.id,
|
})
|
.then((res) => {
|
if (res.success) {
|
proxy.$message({
|
message: res.message,
|
type: "success",
|
});
|
}
|
getListData();
|
})
|
.catch((res) => {
|
proxy.$message({
|
message: res.message,
|
type: "error",
|
});
|
getListData();
|
});
|
};
|
//请求列表方法
|
const getListData = async () => {
|
const data = await RoleListAll(pageData.ListData);
|
tableData.value = data.result.records;
|
pageData.total = Math.ceil(
|
data.result.total / pageData.ListData.pageSize
|
);
|
};
|
// 分页器
|
const handleCurrentChange = (val) => {
|
pageData.ListData.pageNo = val;
|
getListData();
|
};
|
|
//进入页面，就会被调用
|
getListData();
|
|
return {
|
bindUser,
|
sendBind,
|
handleSelectionChange,
|
dialogTableVisible,
|
queryUserList,
|
secondTitle,
|
drawerRef,
|
addRoleRef,
|
roleTable,
|
queryFormdata,
|
queryUserRoledata,
|
searchUser,
|
userTable,
|
secondClose,
|
queryInfo,
|
thirdClose,
|
pageData,
|
pageData2,
|
pageData3,
|
tableData,
|
gridData,
|
handleCurrentChange,
|
handleCurrentChange2,
|
handleCurrentChange3,
|
confirmEvent,
|
handleAdd,
|
addRole,
|
getListData2,
|
InfoFilled,
|
rules,
|
roleForm,
|
formLabelWidth,
|
dialog,
|
handleClose,
|
userFunc,
|
authFunc,
|
editFunc,
|
editRole,
|
detailFunc,
|
confirmDelete,
|
drawertitle,
|
ruleFormRef,
|
queryUserInfo,
|
authDrawer,
|
authDrawerClose,
|
menuOptions,
|
defaultProps,
|
treeRef,
|
saveRolePerm,
|
};
|
},
|
};
|
</script>
|
<style lang="scss" scoped>
|
.page {
|
display: flex;
|
justify-content: center;
|
margin-top: 20px;
|
}
|
.header_nox {
|
// text-align: right;
|
}
|
.el-dropdown-link {
|
margin-top: 4px;
|
cursor: pointer;
|
color: var(--el-color-primary);
|
display: flex;
|
align-items: center;
|
}
|
.dialog-footer {
|
display: flex;
|
justify-content: flex-end;
|
}
|
|
.authDrawerBox .demo-drawer__content .treeBox {
|
height: 88vh;
|
overflow: auto;
|
}
|
</style>
|
