|
@@ -0,0 +1,419 @@
|
|
|
|
|
+<template>
|
|
|
|
|
+ <div class="page-container">
|
|
|
|
|
+ <!--工具栏-->
|
|
|
|
|
+ <div
|
|
|
|
|
+ class="toolbar"
|
|
|
|
|
+ style="float: left; padding-top: 10px; padding-left: 50px"
|
|
|
|
|
+ >
|
|
|
|
|
+ <el-form :inline="true" :model="filters" :size="size">
|
|
|
|
|
+ <el-form-item>
|
|
|
|
|
+ <el-input v-model="filters.name" placeholder="角色名"></el-input>
|
|
|
|
|
+ </el-form-item>
|
|
|
|
|
+ <el-form-item>
|
|
|
|
|
+ <kt-button
|
|
|
|
|
+ icon="fa fa-search"
|
|
|
|
|
+ :label="$t('action.search')"
|
|
|
|
|
+ perms="sys:role:view"
|
|
|
|
|
+ type="primary"
|
|
|
|
|
+ @click="findPage(null)"
|
|
|
|
|
+ />
|
|
|
|
|
+ </el-form-item>
|
|
|
|
|
+
|
|
|
|
|
+ </el-form>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="conent-box" >
|
|
|
|
|
+ <!--表格内容栏-->
|
|
|
|
|
+ <kt-table
|
|
|
|
|
+ :height="500"
|
|
|
|
|
+ permsEdit="sys:role:edit"
|
|
|
|
|
+ permsDelete="sys:role:delete"
|
|
|
|
|
+ :highlightCurrentRow="true"
|
|
|
|
|
+ :stripe="false"
|
|
|
|
|
+ :data="pageResult"
|
|
|
|
|
+ :columns="columns"
|
|
|
|
|
+ :showBatchDelete="false"
|
|
|
|
|
+ @handleCurrentChange="handleRoleSelectChange"
|
|
|
|
|
+ @findPage="findPage"
|
|
|
|
|
+ @handleEdit="handleEdit"
|
|
|
|
|
+ @handleDelete="handleDelete"
|
|
|
|
|
+ >
|
|
|
|
|
+ </kt-table>
|
|
|
|
|
+
|
|
|
|
|
+
|
|
|
|
|
+ </div>
|
|
|
|
|
+
|
|
|
|
|
+ <!-- </el-col> -->
|
|
|
|
|
+ <!--新增编辑界面-->
|
|
|
|
|
+ <el-dialog
|
|
|
|
|
+ v-dialogDrag
|
|
|
|
|
+ :title="operation ? '新增' : '编辑'"
|
|
|
|
|
+ width="40%"
|
|
|
|
|
+ :visible.sync="dialogVisible"
|
|
|
|
|
+ :close-on-click-modal="false"
|
|
|
|
|
+ >
|
|
|
|
|
+ <el-form
|
|
|
|
|
+ :model="dataForm"
|
|
|
|
|
+ label-width="80px"
|
|
|
|
|
+ :rules="dataFormRules"
|
|
|
|
|
+ ref="dataForm"
|
|
|
|
|
+ :size="size"
|
|
|
|
|
+ >
|
|
|
|
|
+ <el-form-item label="ID" prop="id" v-if="false">
|
|
|
|
|
+ <el-input
|
|
|
|
|
+ v-model="dataForm.id"
|
|
|
|
|
+ :disabled="true"
|
|
|
|
|
+ auto-complete="off"
|
|
|
|
|
+ ></el-input>
|
|
|
|
|
+ </el-form-item>
|
|
|
|
|
+ <el-form-item label="角色名" prop="name">
|
|
|
|
|
+ <el-input v-model="dataForm.name" auto-complete="off"></el-input>
|
|
|
|
|
+ </el-form-item>
|
|
|
|
|
+ <el-form-item label="备注 " prop="remark">
|
|
|
|
|
+ <el-input
|
|
|
|
|
+ v-model="dataForm.remark"
|
|
|
|
|
+ auto-complete="off"
|
|
|
|
|
+ type="textarea"
|
|
|
|
|
+ ></el-input>
|
|
|
|
|
+ </el-form-item>
|
|
|
|
|
+ </el-form>
|
|
|
|
|
+ <div slot="footer" class="dialog-footer">
|
|
|
|
|
+ <el-button :size="size" @click.native="dialogVisible = false">{{
|
|
|
|
|
+ $t("action.cancel")
|
|
|
|
|
+ }}</el-button>
|
|
|
|
|
+ <el-button
|
|
|
|
|
+ :size="size"
|
|
|
|
|
+ type="primary"
|
|
|
|
|
+ @click.native="submitForm"
|
|
|
|
|
+ :loading="editLoading"
|
|
|
|
|
+ >{{ $t("action.submit") }}</el-button
|
|
|
|
|
+ >
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </el-dialog>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </template>
|
|
|
|
|
+
|
|
|
|
|
+ <script>
|
|
|
|
|
+ import KtTable from "@/views/Core/KtTable";
|
|
|
|
|
+ import KtButton from "@/views/Core/KtButton";
|
|
|
|
|
+ import TableTreeColumn from "@/views/Core/TableTreeColumn";
|
|
|
|
|
+ import { format } from "@/utils/datetime";
|
|
|
|
|
+ export default {
|
|
|
|
|
+ components: {
|
|
|
|
|
+ KtTable,
|
|
|
|
|
+ KtButton,
|
|
|
|
|
+ TableTreeColumn,
|
|
|
|
|
+ },
|
|
|
|
|
+ data() {
|
|
|
|
|
+ return {
|
|
|
|
|
+ size: "small",
|
|
|
|
|
+ filters: {
|
|
|
|
|
+ name: "",
|
|
|
|
|
+ },
|
|
|
|
|
+ columns: [
|
|
|
|
|
+ { prop: "id", label: "ID", minWidth: 50 },
|
|
|
|
|
+ { prop: "name", label: "角色名", minWidth: 120 },
|
|
|
|
|
+ { prop: "remark", label: "备注", minWidth: 120 },
|
|
|
|
|
+ { prop: "createBy", label: "创建人", minWidth: 120 },
|
|
|
|
|
+ {
|
|
|
|
|
+ prop: "createTime",
|
|
|
|
|
+ label: "创建时间",
|
|
|
|
|
+ minWidth: 120,
|
|
|
|
|
+ formatter: this.dateFormat,
|
|
|
|
|
+ },
|
|
|
|
|
+ // {prop:"lastUpdateBy", label:"更新人", minWidth:100},
|
|
|
|
|
+ // {prop:"lastUpdateTime", label:"更新时间", minWidth:120, formatter:this.dateFormat}
|
|
|
|
|
+ ],
|
|
|
|
|
+ pageRequest: { pageNum: 1, pageSize: 10 },
|
|
|
|
|
+ pageResult: {},
|
|
|
|
|
+
|
|
|
|
|
+ operation: false, // true:新增, false:编辑
|
|
|
|
|
+ dialogVisible: false, // 新增编辑界面是否显示
|
|
|
|
|
+ editLoading: false,
|
|
|
|
|
+ dataFormRules: {
|
|
|
|
|
+ name: [{ required: true, message: "请输入角色名", trigger: "blur" }],
|
|
|
|
|
+ },
|
|
|
|
|
+ // 新增编辑界面数据
|
|
|
|
|
+ dataForm: {
|
|
|
|
|
+ id: 0,
|
|
|
|
|
+ name: "",
|
|
|
|
|
+ remark: "",
|
|
|
|
|
+ },
|
|
|
|
|
+ selectRole: {},
|
|
|
|
|
+ menuData: [],
|
|
|
|
|
+ menuSelections: [],
|
|
|
|
|
+ menuLoading: false,
|
|
|
|
|
+ authLoading: false,
|
|
|
|
|
+ checkAll: false,
|
|
|
|
|
+ currentRoleMenus: [],
|
|
|
|
|
+ defaultProps: {
|
|
|
|
|
+ children: "children",
|
|
|
|
|
+ label: "name",
|
|
|
|
|
+ },
|
|
|
|
|
+ leveData: [],
|
|
|
|
|
+ };
|
|
|
|
|
+ },
|
|
|
|
|
+ created() {
|
|
|
|
|
+ this.getLeveData();
|
|
|
|
|
+ },
|
|
|
|
|
+ methods: {
|
|
|
|
|
+ getLeveData() {},
|
|
|
|
|
+ // 获取分页数据
|
|
|
|
|
+ findPage: function (data) {
|
|
|
|
|
+ if (data !== null) {
|
|
|
|
|
+ this.pageRequest = data.pageRequest;
|
|
|
|
|
+ }
|
|
|
|
|
+ this.pageRequest.columnFilters = {
|
|
|
|
|
+ name: { name: "name", value: this.filters.name },
|
|
|
|
|
+ };
|
|
|
|
|
+ this.$api.role
|
|
|
|
|
+ .findPage(this.pageRequest)
|
|
|
|
|
+ .then((res) => {
|
|
|
|
|
+ this.pageResult = res.data;
|
|
|
|
|
+ this.findTreeData();
|
|
|
|
|
+ })
|
|
|
|
|
+ .then(data != null ? data.callback : "");
|
|
|
|
|
+ },
|
|
|
|
|
+ // 批量删除
|
|
|
|
|
+ handleDelete: function (data) {
|
|
|
|
|
+ this.$api.role.batchDelete(data.params).then(data.callback);
|
|
|
|
|
+ },
|
|
|
|
|
+ // 显示新增界面
|
|
|
|
|
+ handleAdd: function () {
|
|
|
|
|
+ this.dialogVisible = true;
|
|
|
|
|
+ this.operation = true;
|
|
|
|
|
+ this.dataForm = {
|
|
|
|
|
+ id: 0,
|
|
|
|
|
+ name: "",
|
|
|
|
|
+ remark: "",
|
|
|
|
|
+ };
|
|
|
|
|
+ },
|
|
|
|
|
+ // 显示编辑界面
|
|
|
|
|
+ handleEdit: function (params) {
|
|
|
|
|
+ this.dialogVisible = true;
|
|
|
|
|
+ this.operation = false;
|
|
|
|
|
+ this.dataForm = Object.assign({}, params.row);
|
|
|
|
|
+ },
|
|
|
|
|
+ // 编辑
|
|
|
|
|
+ submitForm: function () {
|
|
|
|
|
+ this.$refs.dataForm.validate((valid) => {
|
|
|
|
|
+ if (valid) {
|
|
|
|
|
+ this.$confirm("确认提交吗?", "提示", {}).then(() => {
|
|
|
|
|
+ this.editLoading = true;
|
|
|
|
|
+ // let params = Object.assign({}, this.dataForm);
|
|
|
|
|
+ this.$api.role.save(this.dataForm).then((res) => {
|
|
|
|
|
+ this.editLoading = false;
|
|
|
|
|
+ if (res.code == 200) {
|
|
|
|
|
+ this.$message({ message: "操作成功", type: "success" });
|
|
|
|
|
+ this.dialogVisible = false;
|
|
|
|
|
+ this.$refs["dataForm"].resetFields();
|
|
|
|
|
+ } else {
|
|
|
|
|
+ this.$message({
|
|
|
|
|
+ message: "操作失败, " + res.msg,
|
|
|
|
|
+ type: "error",
|
|
|
|
|
+ });
|
|
|
|
|
+ }
|
|
|
|
|
+ this.findPage(null);
|
|
|
|
|
+ });
|
|
|
|
|
+ });
|
|
|
|
|
+ }
|
|
|
|
|
+ });
|
|
|
|
|
+ },
|
|
|
|
|
+ // 获取数据
|
|
|
|
|
+ findTreeData: function () {
|
|
|
|
|
+ this.menuLoading = true;
|
|
|
|
|
+ this.$api.menu.findMenuTree().then((res) => {
|
|
|
|
|
+ this.menuData = res.data;
|
|
|
|
|
+ this.menuLoading = false;
|
|
|
|
|
+ });
|
|
|
|
|
+ },
|
|
|
|
|
+ // 角色选择改变监听
|
|
|
|
|
+ async handleRoleSelectChange(val) {
|
|
|
|
|
+ if (val == null || val.val == null) {
|
|
|
|
|
+ return;
|
|
|
|
|
+ }
|
|
|
|
|
+ this.selectRole = val.val;
|
|
|
|
|
+ if (val.val.id == 1 && val.val.name == "admin") {
|
|
|
|
|
+ let allMenus = [];
|
|
|
|
|
+ this.checkAllMenu(this.menuData, allMenus);
|
|
|
|
|
+ this.$refs.menuTree.setCheckedNodes(allMenus);
|
|
|
|
|
+ return;
|
|
|
|
|
+ }
|
|
|
|
|
+ let res = await this.$api.role.findRoleMenus({ roleId: val.val.id });
|
|
|
|
|
+ if (res.code == 200) {
|
|
|
|
|
+ this.$nextTick(() => {
|
|
|
|
|
+ const arr = [];
|
|
|
|
|
+ res.data.forEach((item) => {
|
|
|
|
|
+ if (
|
|
|
|
|
+ !this.$refs.menuTree.getNode(item.id).childNodes ||
|
|
|
|
|
+ !this.$refs.menuTree.getNode(item.id).childNodes.length
|
|
|
|
|
+ ) {
|
|
|
|
|
+ arr.push(item);
|
|
|
|
|
+ }
|
|
|
|
|
+ });
|
|
|
|
|
+ this.$refs.menuTree.setCheckedNodes(arr);
|
|
|
|
|
+ });
|
|
|
|
|
+ }
|
|
|
|
|
+ },
|
|
|
|
|
+ // 树节点选择监听
|
|
|
|
|
+ handleMenuCheckChange(data, check, subCheck) {
|
|
|
|
|
+ let checkNode = this.$refs.menuTree.getCheckedKeys();
|
|
|
|
|
+ console.log(checkNode.length);
|
|
|
|
|
+ let checked = checkNode.length;
|
|
|
|
|
+ if (checked !== 188) {
|
|
|
|
|
+ this.checkAll = false;
|
|
|
|
|
+ } else {
|
|
|
|
|
+ this.checkAll = true;
|
|
|
|
|
+ }
|
|
|
|
|
+ // this.$api.menu.findMenuTree().then((res) => {
|
|
|
|
|
+ // let array = res.data;
|
|
|
|
|
+ // function treeForeach(array, fun) {
|
|
|
|
|
+ // array.forEach((data) => {
|
|
|
|
|
+ // fun(data);
|
|
|
|
|
+ // data.children && treeForeach(data.children, fun); // 遍历子树
|
|
|
|
|
+ // });
|
|
|
|
|
+ // }
|
|
|
|
|
+ // treeForeach(array, (node) => {
|
|
|
|
|
+ // console.log(node);
|
|
|
|
|
+ // });
|
|
|
|
|
+ // });
|
|
|
|
|
+ },
|
|
|
|
|
+ // 重置选择
|
|
|
|
|
+ resetSelection() {
|
|
|
|
|
+ this.checkAll = false;
|
|
|
|
|
+ this.$refs.menuTree.setCheckedNodes([]);
|
|
|
|
|
+ },
|
|
|
|
|
+ // 全选操作
|
|
|
|
|
+ handleCheckAll() {
|
|
|
|
|
+ if (this.checkAll) {
|
|
|
|
|
+ let allMenus = [];
|
|
|
|
|
+ this.checkAllMenu(this.menuData, allMenus);
|
|
|
|
|
+ this.$refs.menuTree.setCheckedNodes(allMenus);
|
|
|
|
|
+ } else {
|
|
|
|
|
+ this.$refs.menuTree.setCheckedNodes([]);
|
|
|
|
|
+ }
|
|
|
|
|
+ },
|
|
|
|
|
+ // 递归全选
|
|
|
|
|
+ checkAllMenu(menuData, allMenus) {
|
|
|
|
|
+ menuData.forEach((menu) => {
|
|
|
|
|
+ allMenus.push(menu);
|
|
|
|
|
+ if (menu.children) {
|
|
|
|
|
+ this.checkAllMenu(menu.children, allMenus);
|
|
|
|
|
+ }
|
|
|
|
|
+ });
|
|
|
|
|
+ },
|
|
|
|
|
+ // 角色菜单授权提交
|
|
|
|
|
+ submitAuthForm() {
|
|
|
|
|
+ let roleId = this.selectRole.id;
|
|
|
|
|
+ if ("admin" == this.selectRole.name) {
|
|
|
|
|
+ this.$message({
|
|
|
|
|
+ message: "超级管理员拥有所有菜单权限,不允许修改!",
|
|
|
|
|
+ type: "error",
|
|
|
|
|
+ });
|
|
|
|
|
+ return;
|
|
|
|
|
+ }
|
|
|
|
|
+ this.authLoading = true;
|
|
|
|
|
+ let checkedNodes = this.$refs.menuTree.getCheckedNodes(false, true);
|
|
|
|
|
+ let roleMenus = [];
|
|
|
|
|
+ for (let i = 0, len = checkedNodes.length; i < len; i++) {
|
|
|
|
|
+ let roleMenu = { roleId: roleId, menuId: checkedNodes[i].id };
|
|
|
|
|
+ roleMenus.push(roleMenu);
|
|
|
|
|
+ }
|
|
|
|
|
+ this.$api.role.saveRoleMenus(roleMenus).then((res) => {
|
|
|
|
|
+ if (res.code == 200) {
|
|
|
|
|
+ this.$message({ message: "操作成功", type: "success" });
|
|
|
|
|
+ } else {
|
|
|
|
|
+ this.$message({ message: "操作失败, " + res.msg, type: "error" });
|
|
|
|
|
+ }
|
|
|
|
|
+ this.authLoading = false;
|
|
|
|
|
+ });
|
|
|
|
|
+ },
|
|
|
|
|
+ renderContent(h, { node, data, store }) {
|
|
|
|
|
+ return (
|
|
|
|
|
+ <div class="column-container">
|
|
|
|
|
+ <span style="text-algin:center;margin-right:80px;">{data.name}</span>
|
|
|
|
|
+ <span style="text-algin:center;margin-right:80px;">
|
|
|
|
|
+ <el-tag
|
|
|
|
|
+ type={data.type === 0 ? "" : data.type === 1 ? "success" : "info"}
|
|
|
|
|
+ size="small"
|
|
|
|
|
+ >
|
|
|
|
|
+ {data.type === 0 ? "目录" : data.type === 1 ? "菜单" : "按钮"}
|
|
|
|
|
+ </el-tag>
|
|
|
|
|
+ </span>
|
|
|
|
|
+ <span style="text-algin:center;margin-right:80px;">
|
|
|
|
|
+ {" "}
|
|
|
|
|
+ <i class={data.icon}></i>
|
|
|
|
|
+ </span>
|
|
|
|
|
+ <span style="text-algin:center;margin-right:80px;">
|
|
|
|
|
+ {data.parentName ? data.parentName : "顶级菜单"}
|
|
|
|
|
+ </span>
|
|
|
|
|
+ <span style="text-algin:center;margin-right:80px;">
|
|
|
|
|
+ {data.url ? data.url : "\t"}
|
|
|
|
|
+ </span>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ );
|
|
|
|
|
+ },
|
|
|
|
|
+ // 时间格式化
|
|
|
|
|
+ dateFormat: function (row, column, cellValue, index) {
|
|
|
|
|
+ return format(row[column.property]);
|
|
|
|
|
+ },
|
|
|
|
|
+ },
|
|
|
|
|
+ mounted() {},
|
|
|
|
|
+ };
|
|
|
|
|
+ </script>
|
|
|
|
|
+ <style scoped lang="less">
|
|
|
|
|
+ .menu-container {
|
|
|
|
|
+ margin-top: 10px;
|
|
|
|
|
+ }
|
|
|
|
|
+ .menu-header {
|
|
|
|
|
+ padding-left: 8px;
|
|
|
|
|
+ padding-bottom: 5px;
|
|
|
|
|
+ text-align: left;
|
|
|
|
|
+ font-size: 16px;
|
|
|
|
|
+ color: rgb(20, 89, 121);
|
|
|
|
|
+ }
|
|
|
|
|
+ .conent-box{
|
|
|
|
|
+ width: 100%;
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ /* justify-content: space-around */
|
|
|
|
|
+ >div{
|
|
|
|
|
+ width: 100%;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ /deep/ .el-table {
|
|
|
|
|
+ max-height: 500px !important;
|
|
|
|
|
+ }
|
|
|
|
|
+ .el-tree {
|
|
|
|
|
+ width: 800px;
|
|
|
|
|
+ height: 500px;
|
|
|
|
|
+ overflow-x: auto;
|
|
|
|
|
+ }
|
|
|
|
|
+ /deep/ .el-tree > .el-tree-node {
|
|
|
|
|
+ display: inline-block !important;
|
|
|
|
|
+ }
|
|
|
|
|
+ .btn-box {
|
|
|
|
|
+ padding-right: 100px;
|
|
|
|
|
+ }
|
|
|
|
|
+ /*定义滚动条高宽及背景
|
|
|
|
|
+ 高宽分别对应横竖滚动条的尺寸*/
|
|
|
|
|
+ ::-webkit-scrollbar {
|
|
|
|
|
+ width: 8px;
|
|
|
|
|
+ height: 8px;
|
|
|
|
|
+ background-color: rgba(0, 0, 0, 0.2);
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ /*定义滚动条轨道
|
|
|
|
|
+ 内阴影+圆角*/
|
|
|
|
|
+ ::-webkit-scrollbar-track {
|
|
|
|
|
+ -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
|
|
|
|
|
+ border-radius: 10px;
|
|
|
|
|
+ background-color: #f5f5f5;
|
|
|
|
|
+ }
|
|
|
|
|
+ /*定义滑块
|
|
|
|
|
+ 内阴影+圆角*/
|
|
|
|
|
+ ::-webkit-scrollbar-thumb {
|
|
|
|
|
+ border-radius: 10px;
|
|
|
|
|
+ -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
|
|
|
|
|
+ background-color: #b3b3b3;
|
|
|
|
|
+ }
|
|
|
|
|
+ </style>
|
|
|
|
|
+
|