<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>账号管理</title>
<#assign static_url="${base}/media" />
<link rel="stylesheet" type="text/css"
href="${static_url}/bootstrap-3.4.1-dist/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css"
href="${static_url}/bootstrap-3.4.1-dist/css/bootstrap.css">
<style type="text/css">
</style>
</head>
<body>
<script type="text/javascript" src="${static_url}/js/jquery-1.9.1.js"></script>
<script src="${static_url}/bootstrap-3.4.1-dist/js/bootstrap.js"></script>
<script src="${static_url}/bootstrap-3.4.1-dist/js/bootstrap.min.js"></script>
<div>
<button type="button" class="btn btn-primary" onclick='add_show()'>新增</button>
<button type="button" class="btn btn-danger" onclick='delAll()'>批量删除</button>
<button type="button" class="btn btn-primary" onclick='goBack()'>返回首页</button>
</div>
<div>
<table id="mytable" class="table table-bordered">
<thead id="the">
<tr>
<th width="300"><input type="checkbox" value="全选" id="j_cbAll">全选</th>
<th width="300">用户名称</th>
<!-- <th>用户密码</th> -->
<th>角色权限</th>
<th>所属单位</th>
<th>最近修改时间</th>
<th>操作</th>
</tr>
</thead>
<tbody id="tb">
</tbody>
</table>
</div>
<!--新增面板 -->
<div id="addDivModal" class="modal fade" tabindex="-1" role="dialog"
data-backdrop="static" data-keyboard="false" aria-hidden=true>
<div class="modal-dialog modal-lg" style='z-index: 1300'>
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"
aria-hidden=true>
<i class="glyphicon glyphicon-remove"></i>
</button>
<h4 class="modal-title">新增用户</h4>
</div>
<div class="modal-body" style="overflow: auto;">
<form id="insert_modal_form" role="form"
action="javascript:void(0)">
<div class="form-group form-group-sm row"
style="margin-right: 20px; margin-left: 20px;">
<label class="col-xs-2 control-label nt_modal_label"><font
color="red">*</font>用户名称:</label>
<div class="col-xs-4">
<input type="text" id="userName" class="form-control">
</div>
<label class="col-xs-2 control-label nt_modal_label"><font
color="red">*</font>用户密码:</label>
<div class="col-xs-4">
<input type="text" id="userPwd" class="form-control">
</div>
</div>
<div class="form-group form-group-sm row"
style="margin-right: 20px; margin-left: 20px;">
<label class="col-xs-2 nt_modal_label"><font color="red">*</font>用户角色:</label>
<div class="col-xs-4">
<select id="userRole" class="form-control">
<option value="">--请选择--</option>
<option value="1">管理员</option>
<option value="2">用户</option>
</select>
</div>
<label class="col-xs-2 control-label nt_modal_label"><font
color="red">*</font>所属单位:</label>
<div class="col-xs-4">
<input type="text" id="orgName" class="form-control">
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button class="btn btn-primary" id="saveInsert">
<i class="glyphicon glyphicon-ok"></i> 保存
</button>
<button class="btn btn-default" id="qxmodal" data-dismiss="modal">
<i class="glyphicon glyphicon-remove"></i> 取消
</button>
</div>
</div>
</div>
</div>
<!--修改面板 -->
<div id="editDivModal" class="modal fade" tabindex="-1" role="dialog"
data-backdrop="static" data-keyboard="false" aria-hidden=true>
<div class="modal-dialog modal-lg" style='z-index: 1300'>
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"
aria-hidden=true>
<i class="glyphicon glyphicon-remove"></i>
</button>
<h4 class="modal-title">修改用户</h4>
</div>
<div class="modal-body" style="overflow: auto;">
<form id="insert_modal_form" role="form"
action="javascript:void(0)">
<div class="form-group form-group-sm row"
style="margin-right: 20px; margin-left: 20px;">
<label class="col-xs-2 control-label nt_modal_label"><font
color="red">*</font>用户名称:</label>
<div class="col-xs-4">
<input type="text" id="userName" class="form-control">
</div>
<label class="col-xs-2 control-label nt_modal_label"><font
color="red">*</font>用户密码:</label>
<div class="col-xs-4">
<input type="text" id="userPwd" class="form-control">
</div>
</div>
<div class="form-group form-group-sm row"
style="margin-right: 20px; margin-left: 20px;">
<label class="col-xs-2 nt_modal_label"><font color="red">*</font>用户角色:</label>
<div class="col-xs-4">
<select id="userRole" class="form-control">
<option value="">--请选择--</option>
<option value="1">管理员</option>
<option value="2">用户</option>
</select>
</div>
<label class="col-xs-2 control-label nt_modal_label"><font
color="red">*</font>所属单位:</label>
<div class="col-xs-4">
<input type="text" id="orgName" class="form-control">
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button class="btn btn-primary" id="saveEdit">
<i class="glyphicon glyphicon-ok"></i> 保存
</button>
<button class="btn btn-default" id="qxmodal" data-dismiss="modal">
<i class="glyphicon glyphicon-remove"></i> 取消
</button>
</div>
</div>
</div>
</div>
<body>
<script>
$(function () {
queryUserList();
//新增保存
$('#saveInsert').click(function(){
saveInsert();
});
//修改保存
$('#saveEdit').click(function(){
saveEdit();
});
});
function goBack(){
window.location.href="monitoring.htm"
}
//新增
function add_show(){
$("#userName").val("");
$("#userPwd").val("");
$("#userRole").val("");
$("#orgName").val("");
$("#addDivModal").modal('show');
}
//.trim()
function saveEdit(){
var username= $("#editDivModal").find("#userName").val()
var userPwd= $("#editDivModal").find("#userPwd").val()
var userRole= $("#editDivModal").find("#userRole").val()
var orgName= $("#editDivModal").find("#orgName").val()
var updateUser = `${sysmUserInfo.sysmUser.userName}`
var account ={
"username":username,
"password":userPwd,
"roleId":userRole,
"orgName":orgName,
"updateUser":updateUser,
"userId":userId
}
$.ajax({
type: 'POST',
url: "editAccount.htm",
data: JSON.stringify(account),//将JSON对象转换为JSON字符串
async: true,
contentType: "application/json;charset=UTF-8", //使用 application/json;charset=UTF-8
dataType: "json",
success: function (obj) {
// 删除成功后刷新页面
window.location.reload();
if (obj.code && obj.code == "20000") {
window.alert(obj.data);
}else{
window.alert(obj.data);
}
}
});
$("#addDivModal").modal('hide');
}
// 全选不选
$("#allChecked").on("click",function () {
var checkedState = $(this).prop("checked"); // 全选按钮的选中状态
$(".item-checked").prop("checked",checkedState) // 全选和全不选 跟全选的选中状态一样
})
function saveInsert(){
var username= $("#addDivModal").find("#userName").val()
var userPwd= $("#addDivModal").find("#userPwd").val()
var userRole= $("#addDivModal").find("#userRole").val()
var orgName= $("#addDivModal").find("#orgName").val()
var updateUser = `${sysmUserInfo.sysmUser.userName}`
var account ={
"username":username,
"password":userPwd,
"roleId":userRole,
"orgName":orgName,
"updateUser":updateUser
}
$.ajax({
type: 'POST',
url: "addAccount.htm",
data: JSON.stringify(account),//将JSON对象转换为JSON字符串
async: true,
contentType: "application/json;charset=UTF-8", //使用 application/json;charset=UTF-8
dataType: "json",
success: function (obj) {
// 删除成功后刷新页面
window.location.reload();
if (obj.code && obj.code == "20000") {
window.alert(obj.data);
}else{
window.alert(obj.data);
}
}
});
$("#addDivModal").modal('hide');
}
var userId="";
//修改
function queryOne(id){
$.ajax({
type: "GET",
dataType: "json",
url: "queryOneAccount.htm?userId="+id,
success: function(obj){
$("#editDivModal").find("#userName").val(obj.userName)
$("#editDivModal").find("#userPwd").val(obj.password)
if(obj.contacts ==="管理员"){
$("#editDivModal").find("#userRole").val(1)
}else{
$("#editDivModal").find("#userRole").val(2)
}
$("#editDivModal").find("#orgName").val(obj.orgName)
userId=obj.userId
$("#editDivModal").modal('show');
}
})
}
//查询
function queryUserList(){
var userName = `${sysmUserInfo.sysmUser.userName}`
$.ajax({
type: "GET",
dataType: "json",
url: "query_accountList.htm?userName="+userName,
success: function(obj){
var tr="";
for(var i = 0; i < obj.list.length; i++) {
var data= obj.list[i];
tr="<tr><td><input type='checkbox' class='checkOne' name='check' value='"+data.userId+"'/></td>"
+"<td>"+data.userName+"</td>"+
"<td>"+data.contacts+"</td>"+
"<td>"+data.orgName+"</td>"+
"<td>"+formatDate(data.createTime)+"</td>"+
"<td>"+
"<button class='btn btn-primary' type='button' onclick='queryOne("+data.userId+")'>修改</button> "+
"<button class='btn btn-danger' type='button' onclick='deleteOne("+data.userId+")'>删除</button>"+
"</td>"
+"</tr>";
$('#tb').append(tr);
}
}
})
<!-- 生成table后,才能够执行后续操作 -->
loand();
}
/**
date 为long类型
pattern 为格式化参数
*/
function getFormatDate(date, pattern) {
if (date == undefined) {
date = new Date();
}
if (pattern == undefined) {
pattern = "yyyy-MM-dd hh:mm:ss";
}
return date.format(pattern);
}
function formatDate(longTypeDate){
var dateTypeDate = "";
var date = new Date();
date.setTime(longTypeDate);
dateTypeDate += date.getFullYear(); //年
dateTypeDate += "-" + getMonth(date); //月
dateTypeDate += "-" + getDay(date); //日
dateTypeDate += " " + getHours(date); //时
dateTypeDate += ":" + getMinutes(date); //分
dateTypeDate += ":" + getSeconds(date); //分
return dateTypeDate;
}
//返回 01-12 的月份值
function getMonth(date){
var month = "";
month = date.getMonth() + 1; //getMonth()得到的月份是0-11
if(month<10){
month = "0" + month;
}
return month;
}
//返回01-30的日期
function getDay(date){
var day = "";
day = date.getDate();
if(day<10){
day = "0" + day;
}
return day;
}
//小时
function getHours(date){
var hours = "";
hours = date.getHours();
if(hours<10){
hours = "0" + hours;
}
return hours;
}
//分
function getMinutes(date){
var minute = "";
minute = date.getMinutes();
if(minute<10){
minute = "0" + minute;
}
return minute;
}
//秒
function getSeconds(date){
var second = "";
second = date.getSeconds();
if(second<10){
second = "0" + second;
}
return second;
}
function deleteOne(id){
var ids = [];
ids.push(id)
$.ajax({
type: "GET",
dataType: "json",
url: "delete.htm?ids="+ids,
success: function(obj){
if (obj.code && obj.code == "20000") {
window.alert(obj.data);
}else{
window.alert(obj.data);
}
// 删除成功后刷新页面
window.location.reload();
}
})
}
//全选复选框
function loand(){
var checks=false;
var ids = []
$('#j_cbAll').click(function(){
var j_tbs =$("#tb").find(".checkOne") // 下面所有的复选框
// this.checked 它可以得到当前复选框的选中状态，如果是true就是选中，如果是false就是未选中
for(var i = 0; i < j_tbs.length; i++) {
checks=j_tbs[i].checked = this.checked;
var value = j_tbs[i].value
ids.push(value)
}
});
// arr = ids;
}
//批量删除
function delAll(){
var ids = []
if(!confirm("确定删除么？")){
return ;
}
var cks=document.getElementsByName("check");
//拼接所有的id
for(var i=0;i<cks.length;i++){
if(cks[i].checked){
ids.push(cks[i].value)
}
}
$.ajax({
type: "GET",
dataType: "json",
url: "delete.htm?ids="+ids,
success: function(obj){
if (obj.code && obj.code == "20000") {
window.alert(obj.data);
}else{
window.alert(obj.data);
}
// 删除成功后刷新页面
window.location.reload();
}
})
}
</script>
</body>
</html>
03-28
2万+
2万+
09-02
“相关推荐”对你有帮助么？
-
非常没帮助 -
没帮助 -
一般 -
有帮助 -
非常有帮助
提交
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
