Files
peko-admin-web/src/views/system/RoleAdminView.vue
2025-07-23 14:48:42 +08:00

414 lines
14 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<!-- Content Header (Page header) -->
<section class="content-header">
<h1 id="itemTitle"></h1>
</section>
<!-- .content -->
<section class="content">
<div id="userTable"></div>
<div id="toolbar">
<button id="add"
class="btn btn-default">
<i class="glyphicon glyphicon-plus"></i>增加
</button>
</div>
</section>
<!-- .content -->
<div class="modal fade"
id="userModal"
tabindex="-1"
role="dialog"
aria-labelledby="modalLabel">
<div class="modal-dialog"
role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button"
class="close"
data-dismiss="modal"
aria-label="Close"><span aria-hidden="true">&times;</span></button>
<h4 class="modal-title"
id="modalLabel">角色信息</h4>
</div>
<div class="modal-body">
<form class="form-horizontal"
id="userForm">
<input type="hidden"
name="id"
id="id" />
<input type="hidden"
name="optUid"
id="optUid" />
<div class="form-group">
<label for="name"
class="col-sm-3 control-label">名称:</label>
<div class="col-sm-8">
<input type="text"
class="form-control validate[required]"
name="name"
id="name">
</div>
</div>
<div class="form-group">
<label for="officialMonthlyLimit"
class="col-sm-3 control-label">每月赠送金币限额:</label>
<div class="col-sm-8">
<input type="text"
class="form-control"
name="officialMonthlyLimit"
id="officialMonthlyLimit">
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button"
class="btn btn-default"
data-dismiss="modal">关闭</button>
<button type="button"
class="btn btn-primary"
id="save">保存</button>
</div>
</div>
</div>
</div>
<div class="modal fade"
id="roleModal"
tabindex="-1"
role="dialog"
aria-labelledby="modalLabe2">
<div class="modal-dialog"
role="document">
<div class="modal-content"
style="width: 700px;">
<div class="modal-header">
<button type="button"
class="close"
data-dismiss="modal"
aria-label="Close"><span aria-hidden="true">&times;</span></button>
<h4 class="modal-title"
id="modalLabe2">授权菜单</h4>
</div>
<div class="modal-body">
<form class="form-horizontal"
id="roleForm">
<input type="hidden"
name="roleId"
id="roleId" />
<div class="form-group">
<label for="name2"
class="col-sm-3 control-label">名称:</label>
<div class="col-sm-8">
<input type="text"
class="form-control"
name="name"
id="name2"
disabled="disabled">
</div>
</div>
<div id="menuTree"></div>
</form>
</div>
<div class="modal-footer">
<button type="button"
class="btn btn-default"
data-dismiss="modal">关闭</button>
<button type="button"
class="btn btn-primary"
id="save2">保存</button>
</div>
</div>
</div>
</div>
</template>
<script>
import TableHelper from '@/utils/bootstrap-table-helper';
import { showLoading, hideLoading } from '@/utils/maintainer';
var isEdit = false;
export default {
name: "RoleAdminView",
setup () {
return {};
},
created () {
this.$nextTick(function () {
this.initData();
});
},
methods: {
initData () {
$(function () {
$('#userTable').bootstrapTable('destroy');
$('#userTable').bootstrapTable({
columns: [
{ field: 'id', title: 'ID', align: 'center', width: '3%' },
{ field: 'name', title: '名称', align: 'center', width: '20%' },
{
field: 'id',
title: '操作',
align: 'center',
width: '25%',
formatter: function (val, row, index) {
return '<button class="btn btn-sm btn-success opt-edit" data-id=' + val + '>' +
'<i class="glyphicon glyphicon-edit"></i>编辑</button>' +
'&nbsp;&nbsp;<button class="btn btn-sm btn-warning opt-role" data-id=' + val +
'><i class="glyphicon glyphicon-user"></i>授权菜单</button>' +
'&nbsp;&nbsp;<button class="btn btn-sm btn-danger opt-remove" data-id=' + val +
'><i class="glyphicon glyphicon-remove"></i>删除</button>';
}
}
],
cache: false,
striped: true,
showRefresh: true,
pageSize: 10,
pagination: true,
pageList: [10, 20, 30, 50],
search: true,
sidePagination: "server", //表示服务端请求
//设置为undefined可以获取pageNumberpageSizesearchTextsortNamesortOrder
//设置为limit可以获取limit, offset, search, sort, order
queryParamsType: "undefined",
queryParams: function queryParams (params) { //设置查询参数
var param = {
pageNumber: params.pageNumber,
pageSize: params.pageSize,
searchText: params.searchText
};
return param;
},
uniqueId: 'id',
toolbar: '#toolbar',
url: '/admin/role/getlist',
onLoadSuccess: function () { //加载成功时执行
// console.log("load success");
},
onLoadError: function () { //加载失败时执行
// console.log("load fail");
}
});
$("#userTable").on("click", '.opt-remove', function () {
var id = $(this).attr("data-id");
if (confirm("你确认删除【" + TableHelper.getRowByUniqueId("#userTable", id).username + "】吗?" +
"\r\n删除后再也不能找回请谨慎操作")) {
$.ajax({
type: 'post',
url: "/admin/role/del",
data: { 'id': id },
dataType: "json",
success: function (json) {
if (json.result == 1) {
$("#tipMsg").text("删除成功");
$("#tipModal").modal('show');
TableHelper.doRefresh("#userTable");
} else {
$("#tipMsg").text("删除失败,错误码:" + json.result);
$("#tipModal").modal('show');
}
}
});
}
});
$("#userTable").on("click", '.opt-edit', function () {
var id = $(this).attr("data-id");
isEdit = true;
$.ajax({
type: "post",
url: "/admin/role/getone",
data: { id: id },
dataType: "json",
success: function (json) {
if (json.entity) {
$("#id").val(json.entity.id);
$("#name").val(json.entity.name);
$("#officialMonthlyLimit").val(json.officialMonthlyLimit);
$("#userModal").modal('show');
} else {
$("#tipMsg").text("获取信息出错");
$("#tipModal").modal('show');
}
}
});
});
$('#add').click(function () {
$("#imgUrl").attr("src", "");
isEdit = false;
$("#userForm")[0].reset();
$("#id").val(0);
$("#optUid").val(0);
$("#userModal").modal('show');
});
$('#save').click(function () {
if ($("#userForm").validationEngine('validate')) {
$.ajax({
type: "post",
url: "/admin/role/save?isEdit=" + isEdit,
data: $('#userForm').serialize(),
dataType: "json",
success: function (json) {
if (json.result == 1) {
$("#userModal").modal('hide');
$("#tipMsg").text("保存成功");
$("#tipModal").modal('show');
TableHelper.doRefresh("#userTable");
} else {
$("#tipMsg").text("保存失败,错误码:" + json.result);
$("#tipModal").modal('show');
}
}
});
}
});
$('#save2').click(function () {
showLoading();
var selectedMenuNodes = $('#menuTree').treeview('getChecked');
var menuIds = "roleId=" + $("#roleId").val() + "&";
for (var index = 0; index < selectedMenuNodes.length; index++) {
menuIds += "menuIds=" + selectedMenuNodes[index].menuId + "&";
}
$.ajax({
type: "post",
url: "/admin/role/menu/save",
data: menuIds,
dataType: "json",
success: function (json) {
hideLoading();
if (json.result == 1) {
$("#roleModal").modal('hide');
$("#tipMsg").text("保存成功");
$("#tipModal").modal('show');
TableHelper.doRefresh("#userTable");
} else {
$("#tipMsg").text("保存失败,错误码:" + json.result);
$("#tipModal").modal('show');
}
}
});
});
});
$("#userTable").on("click", '.opt-role', function () {
var id = $(this).attr("data-id");
var username = $(this).parent().siblings().eq(1).text();
$.ajax({
type: "post",
url: "/admin/role/getmenu",
data: { roleId: id },
dataType: "json",
success: function (json) {
if (json.result == 0) {
$("#menuTree").treeview({
data: getMenuData(json), // 数据源
levels: 1, //设置继承树默认展开的级别
showTags: true, //是否在每个节点右边显示tags标签。tag值必须在每个列表树的data结构中给出
showCheckbox: true,
onNodeChecked: function (event, node) { //选中节点
var selectNodes = getChildNodeIdArr(node); //获取所有子节点
if (selectNodes) { //子节点不为空,则选中所有子节点
$('#menuTree').treeview('checkNode', [selectNodes, { silent: true }]);
}
var parentNode = $("#menuTree").treeview("getNode", node.parentId);
if (parentNode) {
$('#menuTree').treeview('checkNode', [parentNode, { silent: true }]);
}
},
onNodeUnchecked: function (event, node) { //取消选中节点
var selectNodes = getChildNodeIdArr(node); //获取所有子节点
if (selectNodes) { //子节点不为空,则取消选中所有子节点
$('#menuTree').treeview('uncheckNode', [selectNodes, { silent: true }]);
}
}
});
// $(".indent").parent("li").attr('display','inline');
$("#roleId").val(id);
$("#name2").val(username);
$("#roleModal").modal('show');
} else {
$("#tipMsg").text("获取信息出错");
$("#tipModal").modal('show');
}
}
});
});
}
},
unmounted () {
$('#userTable').bootstrapTable('destroy');
}
};
function getMenuData (json) {
var parentMenu = "";
for (var index = 0; index < json.list.length; index++) {
var parent = json.list[index];
var sonMenu = "";
if (parent.sonList != null) {
for (var index1 = 0; index1 < parent.sonList.length; index1++) {
var son = parent.sonList[index1];
sonMenu += "{text: '" + son.name + "'," +
"menuId:'" + son.id + "'," +
"state:{checked:" + son.check + "}," +
"color:'#2f2424;display:inline-table '" +
"},";
}
}
if (sonMenu != "") {
sonMenu = sonMenu.substring(0, sonMenu.length - 1);
}
parentMenu += "{" +
"text: '" + parent.name + "'," +
"menuId:'" + parent.id + "'," +
"state:{checked:" + parent.check + ",expanded:" + parent.check + "}," +
"nodes: [" + sonMenu + "]" +
"},";
}
if (parentMenu != "") {
parentMenu = parentMenu.substring(0, parentMenu.length - 1);
}
var menuData = "[ " + parentMenu + "]";
return eval('(' + menuData + ')');
}
function getChildNodeIdArr (node) {
var ts = [];
if (node.nodes) {
let x, j;
for (x in node.nodes) {
ts.push(node.nodes[x].nodeId);
if (node.nodes[x].nodes) {
var getNodeDieDai = getChildNodeIdArr(node.nodes[x]);
for (j in getNodeDieDai) {
ts.push(getNodeDieDai[j]);
}
}
}
} else {
ts.push(node.nodeId);
}
return ts;
}
</script>
<style scoped>
.list-group-item {
padding: 2px 1px;
border: 0px solid #ddd;
}
</style>