dongfeng-pay/boss/views/power.html
2021-04-27 15:33:49 +08:00

330 lines
11 KiB
Go
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.

<!doctype html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>商户后台</title>
<link rel="stylesheet" type="text/css" href="../static/css/basic.css">
<script src="../static/js/jquery.min.js"></script>
<script src="../static/js/filter.js"></script>
<style type="text/css" media="screen">
.first-input-group .basic-url, .router-input-group .basic-url {
width: 210px;
}
.modal-body .pre-input-group select {
width: 210px;
height: 30px;
text-align: center;
text-align-last: center;
padding-left: 5px;
}
.power-name-error, .power-id-error, .first-menu-error, .second-menu-error {
color: red;
display: inline-block;
margin-left: 20px;
}
.power-save-success {
color: blue;
text-align: center;
}
</style>
</head>
<body>
<div class="search">
<div>
<span>二级菜单名称</span>
<input type="text" class="menu-name" value="" placeholder="模糊匹配">
</div>
<div>
<span>权限项名称</span>
<input type="text" class="power-name" value="" placeholder="模糊匹配">
</div>
<div>
<button type="button" class="btn btn-default power-menu-search">搜索</button>
</div>
</div>
<!-- 模态框 -->
<div class="add-menu">
<button type="button" class="btn btn-default btn-xs glyphicon glyphicon-plus add-button" data-toggle="modal" data-target="#addPowerModal">添加权限控制项</button>
<strong>权限控制项目加好后不要随意修改删除</strong>
</div>
<div class="modal fade" id="addPowerModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" data-keyboard="false" data-backdrop="static">
<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="addPowerButton">添加权限控制项</h4>
</div>
<div class="modal-body modal-body-menu">
<div class="input-group pre-input-group">
<span class="input-group-addon basic-addon">一级菜单名</span>
<div class="select-content">
<select id="first-menu-select">
<option value="none">请选择</option>
</select>
<span class="first-menu-error"></span>
</div>
</div>
<div class="input-group pre-input-group">
<span class="input-group-addon basic-addon">二级菜单名</span>
<div class="select-content">
<select id="second-menu-select">
<option value="none">请选择</option>
</select>
<span class="second-menu-error"></span>
</div>
</div>
<div class="input-group first-input-group">
<span class="input-group-addon basic-addon">权限项名称</span>
<input type="text" class="form-control basic-url power-item" value="">
<span class="power-name-error"></span>
</div>
<div class="input-group first-input-group">
<span class="input-group-addon basic-addon">权限项目ID</span>
<input type="text" class="form-control basic-url power-id" value="" placeholder="一级菜单:二级菜单:权限名">
<span class="power-id-error"></span>
</div>
<div class="input-group">
<span class="power-save-success"></span>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default cancel-menu" data-dismiss="modal">取消</button>
<button type="button" class="btn btn-primary save-menu">保存</button>
</div>
</div>
</div>
</div>
<!-- 模态框end -->
<div class="menu-table">
<table>
<thead class="thead-dark">
<tr>
<th>序列号</th>
<th>二级菜单名</th>
<th>二级菜单标识</th>
<th>权限项目名</th>
<th>权限项目ID</th>
<th>操作</th>
</tr>
</thead>
<tbody id="menu_table_body">
</tbody>
</table>
</div>
<!-- 分页插件 -->
<div class="cut_page">
<li>
每页显示
<select id="display_count">
<option value="20">20</option>
<option value="30">30</option>
<option value="50">50</option>
<option value="100">100</option>
</select>
</li>
<li class="current_total_page"><span class="current_page">0</span>/<span class="total_page">0</span></li>
<li class="pre_page">上一页</li>
<li class="next_page">下一页</li>
<li class="jump_page">跳转 <input type="text" name="jump_page" value=""> <button type="button" class="btn btn-default">Go</button></li>
</div>
<script>
function Ajax(dataJSON, urlHost) {
$.ajax({
url: urlHost,
data: dataJSON,
success: function(res) {
if (res.Code == 404) {
window.parent.location = "/login.html";
return;
}
if(urlHost.indexOf("get/firstMenu") != -1) {
initFirstMenuSelect(res);
} else if (urlHost.indexOf("/get/secondMenu") != -1) {
initSecondMenuSelect(res);
} else if (urlHost.indexOf("/add/power") != -1) {
savePowerItem(res);
} else if (urlHost.indexOf("/get/powerItem") != -1) {
showPowerItem(res);
} else if (urlHost.indexOf("/delete/powerItem") != -1) {
Ajax(getCutPageData(), "/get/powerItem");
}
},
error: function() {
alert("系统异常,请稍后再试");
}
});
}
//当每页显示数更改后,执行的操作
$("#display_count").change(function() {
let dataJSON = getCutPageData();
Ajax(dataJSON, "/get/powerItem");
});
//点击上一页的按钮
$(".pre_page").click(function() {
let dataJSON = getCutPageData();
if (dataJSON["currentPage"] == 1) {
return;
}
dataJSON["currentPage"] = parseInt(dataJSON["currentPage"]) - 1;
Ajax(dataJSON, "/get/powerItem");
});
//点击下一页的按钮时
$(".next_page").click(function() {
let dataJSON = getCutPageData();
if (dataJSON["currentPage"] == dataJSON["totalPage"]) {
return;
}
dataJSON["currentPage"] = parseInt(dataJSON["currentPage"]) + 1;
Ajax(dataJSON, "/get/powerItem");
});
//点击跳转那一页的按钮
$(".jump_page button").click(function() {
let dataJSON = getCutPageData();
if (dataJSON["jumpPage"].length <= 0) {
return;
}
Ajax(dataJSON, "/get/powerItem");
});
//删除权限项
function deletePowerItem(powerID) {
if (!window.confirm("是否确定删除该项?")) {
return;
}
Ajax({"powerID":powerID}, "/delete/powerItem");
}
//展示权限项的列表
function showPowerItem(res) {
$(".current_page").html(res.CurrentPage);
$(".total_page").html(res.TotalPage);
$("#display_count option").each(function() {
if ($(this).text() == res.DisplayCount) {
$(this).attr('selected', true);
}
});
$(".jump_page input").val("");
let str = "";
for (let i = 0; i < res.PowerItemList.length; i ++) {
let v = res.PowerItemList[i];
let tmp = "<tr>" + "<th>" + (res.StartIndex+i+1) + "</th>" +
"<th>" + v.SecondMenu + "</th>" + "<th>" + v.SecondMenuUid + "</th>" +
"<th>" + v.PowerItem + "</th>" + "<th>" + v.PowerId + "</th>";
tmp = tmp + "<th>" + '<div class="btn-group" role="group" aria-label="...">' +
'<button type="button" value="' + v.PowerId +'" class="btn btn-default" onclick="deletePowerItem(this.value);"><span class="glyphicon glyphicon-trash"></span></button>' +
'</div>' + "</th>" + "</tr>";
str = str + tmp;
}
$("#menu_table_body").html(str);
}
function initFirstMenuSelect(res) {
let MenuList = res.MenuList;
let str = '<option value="none">请选择</option>';
for (let i = 0; i < MenuList.length; i ++) {
let m = MenuList[i];
str += '<option value="' + m.MenuUid + '">' + m.FirstMenu + '</option>';
}
$("#first-menu-select").html(str);
}
function clearContent() {
$(".power-name-error").html("");
$(".power-id-error").html("");
$(".first-menu-error").html("");
$(".second-menu-error").html("");
}
//点击 添加权限控制项 做出的响应
$(".add-button").click(function() {
clearContent();
$(".power-save-success").html();
Ajax({}, "/get/firstMenu");
});
function initSecondMenuSelect(res) {
let secondMenuList = res.SecondMenuList;
let str = '<option value="none">请选择</option>';
for (let i = 0; i < secondMenuList.length; i ++) {
let m = secondMenuList[i];
str += '<option value="' + m.SecondMenuUid + '">' + m.SecondMenu + '</option>';
}
$("#second-menu-select").html(str);
}
//关联二级菜单名
$("#first-menu-select").change(function() {
let firstMenuUid = $("#first-menu-select").val();
if (firstMenuUid == "none") {
return
}
Ajax({"firMenuUid":firstMenuUid}, "/get/secondMenus");
});
//点击 添加权限控制项的保存 按钮
function savePowerItem(res) {
let powerItem = $(".power-item").val();
if (res.Code == -1) {
$(res.Key).html(res.Msg);
return;
} else if (res.Code == 200) {
$(".power-item").val("");
$(".power-id").val("");
$(res.Key).html(powerItem + ":" + res.Msg);
}
clearContent();
}
$(".cancel-menu").click(function() {
Ajax(getCutPageData(), "/get/powerItem");
});
$(".save-menu").click(function() {
let firstMenuUid = $("#first-menu-select").val();
let secondMenuUid = $("#second-menu-select").val();
let powerItem = $(".power-item").val();
let powerID = $(".power-id").val();
clearContent();
$(".power-save-success").html("");
if (firstMenuUid == "none") {
$(".first-menu-error").html("*没选择一级菜单名");
return
}
if (secondMenuUid == "none") {
$(".second-menu-error").html("*没选择二级菜单");
return
}
Ajax({"firstMenuUid":firstMenuUid, "secondMenuUid":secondMenuUid, "powerItem":powerItem, "powerID":powerID}, "/add/power");
});
//获取搜索框的数据,和分页的基础数据
function getCutPageData() {
let powerItem = $(".power-item").val();
let powerID = $(".power-id").val();
let displayCount = $("#display_count").val();
let currentPage = $(".current_page").html();
let totalPage = $(".total_page").html();
let jumpPage = $(".jump_page input").val();
return {"displayCount":displayCount, "currentPage":currentPage, "totalPage":totalPage, "jumpPage":jumpPage, "powerItem": powerItem, "powerID":powerID};
}
$(".power-menu-search").click(function() {
Ajax(getCutPageData(), "/get/powerItem");
});
$(function() {
Ajax(getCutPageData(), "/get/powerItem");
});
</script>
</body>
</html>