414 lines
14 KiB
Vue
414 lines
14 KiB
Vue
<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">×</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">×</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>' +
|
||
' <button class="btn btn-sm btn-warning opt-role" data-id=' + val +
|
||
'><i class="glyphicon glyphicon-user"></i>授权菜单</button>' +
|
||
' <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可以获取pageNumber,pageSize,searchText,sortName,sortOrder
|
||
//设置为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> |