<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户管理</title>
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}">
    <link rel="icon" th:href="@{image/sgl.png}" sizes="32x32">
    <script th:src="@{/layui/layui.js}"></script>
    <script th:src="@{/layui/jquery-3.4.1.min.js}"></script>
    <script th:src="@{/js/common.js}"></script>
    <script th:src="@{/js/rules.js}"></script>
    <link rel="stylesheet" th:href="@{/css/common.css}">
</head>
<style>
.div-inline{display:inline-block;float:right;margin-right:10px;}
.active{color:#ccc}
.btn{border: 1px solid #C9C9C9;background-color: #eee;color: #333;height: 30px;line-height: 30px;width:40px;font-size: 12px;border-radius: 2px;margin-left:-4px;cursor: pointer;}
.btn:hover{color: #555;}
.layui-table-view {margin: 0;}
.layui-tab-card{box-shadow:none;border-radius: 0px;}
.layui-tab{margin:0;}
.layui-tab-content{padding:0;}
.layui-form-radio{margin:0;}
.tdBackground-color{background-color:#ff0000;}
</style>

<body class="layui-layout-body">

	<div class="toolbar">           	
    	<div class="layui-inline">
			<span>名称搜索：</span>
            <input type="text" id="projectName" placeholder="名称关键字 " autocomplete="off" class="layui-input formWidth" />
        </div>
        
		<div class="layui-inline">
			<span>用户角色：</span>
			<select id="roleId" class="layui-select formWidth" >
				<option value="">-请选择-</option>
				<option th:each="role:${roleList}" th:value="${role.roleId}" th:text="${role.roleName}">111</option>
			</select>
        </div>
        
        <div class="layui-inline">
			<span>是否启用：</span>
			<select id="isActive" class="layui-select formWidth" >
				<option value="">-请选择-</option>
				<option value="1">是</option>
				<option value="0">否</option>
			</select>
        </div>
        <div class="layui-inline">
			<button class="layui-btn layui-btn-sm" data-type="search" id="search"><i class="layui-icon">&#xe615;</i>查询</button>
		</div>
		<div class="layui-inline">
			<button class="layui-btn layui-btn-sm layui-btn-normal" data-type="add" id="add"><i class="layui-icon">&#xe654;</i>添加</button>
   		</div>
    </div>
    	
	<table id="demo" lay-filter="test"></table>	
	   
	<!-- 表格操作栏 --> 		
	<script type="text/html" id="barDemo">
  		<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
  		<a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="start">启用</a>
  		<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="forbidden">禁用</a>
  		<a class="layui-btn layui-btn-warm layui-btn-xs" lay-event="reset">重置密码</a>
	</script>
		
		
	<!-- 修改 -->
	<div id="EditUser" style="display:none;">
		<form id="updateUser" class="" style="margin-top:20px;">
			<input type="hidden" id="mdfId" />
			<div class="layui-form-item">
                <label class="layui-form-label">用户名:</label>
                <div class="layui-input-block">
                    <input type="text"  id="mdfUserName" required lay-verify="required" autocomplete="off" readonly class="layui-input formWidthTwo" >
                </div>
            </div>
            <!-- <div class="layui-form-item">
                <label class="layui-form-label">真实姓名:</label>
                <div class="layui-input-block">
                    <input type="text"  id="mdfTrueName" required lay-verify="required" autocomplete="off" placeholder="请输入真实姓名" class="layui-input formWidthTwo">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">手机:</label>
                <div class="layui-input-block">
                    <input type="text" id="mdfMobile" required lay-verify="required" autocomplete="off" placeholder="请输入手机号" class="layui-input formWidthTwo">
                </div>
            </div> -->
            <div class="layui-form-item">
                <label class="layui-form-label">用户角色:</label>
               	<div class="layui-input-inline">
                <select id="mdfRoleId" class="layui-select formWidthTwo"  >
					<option value="">-请选择-</option>
					<option th:each="role : ${roleList}" th:value="${role.roleId}" th:text="${role.roleName}"></option>
				</select>
				</div>
            </div>
		</form>
	</div>
	
	<!-- 增加 -->
	<div id="addUser" style="display:none;">
		<form id="zjUser" class="" style="margin-top:20px;">
			<div class="layui-form-item">
                <label class="layui-form-label">用户名:</label>
                <div class="layui-input-block">
                    <input type="text"  id="addUserName" required lay-verify="required" autocomplete="off" placeholder="请输入用户名" class="layui-input formWidthTwo">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">密码:</label>
                <div class="layui-input-block">
                    <input type="password"  id="addPassword" required lay-verify="required" autocomplete="off" placeholder="请输入密码" class="layui-input formWidthTwo">
                </div>
            </div>
            <!-- <div class="layui-form-item">
                <label class="layui-form-label">真实姓名:</label>
                <div class="layui-input-block">
                    <input type="text"  id="addTrueName" required lay-verify="required" autocomplete="off" placeholder="请输入真实姓名" class="layui-input formWidthTwo">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">手机:</label>
                <div class="layui-input-block">
                    <input type="text" id="addMobile" required lay-verify="required" autocomplete="off" placeholder="请输入手机号" class="layui-input formWidthTwo">
                </div>
            </div> -->
            <div class="layui-form-item">
                <label class="layui-form-label">用户角色:</label>
               	<div class="layui-input-inline">
                <select id="addRoleId" class="layui-select formWidthTwo" >
					<option value="">-请选择-</option>
					<option th:each="role : ${roleList}" th:value="${role.roleId}" th:text="${role.roleName}"></option>
				</select>
				</div>
            </div>
		</form>
	</div>

</body>   
</html>
<script th:inline="javascript">


</script>
<script>
	var element ,
	    table,
	    laydate,
	    layer,
	    form,
	    tree;
	var tHeight = $(".toolbar").height()+6;
    layui.use(['element','table','laydate','layer','form','tree'], function(){
		element = layui.element;
	    table = layui.table;
	    laydate = layui.laydate;
	    layer = layui.layer;
	    form = layui.form;
	    tree = layui.tree;
	    
	    //表格加载
		table.render({
			elem: '#demo',
			height: 'full-'+tHeight,
			url: '/selectUser?userName&isactive&roleId', //数据接口
			title: '用户表',
			page: true ,//开启分页
			limit:20,
			limits:[20,30,50],
			//toolbar: '', //开启工具栏，此处显示默认图标，可以自定义模板
			defaultToolbar: [],	 
			id:'test', 
			cols: [
			 [ //表头
			  {type: 'numbers', title: '序号', width: 30},
			   {field: 'userName', title: '用户名', sort: false, totalRow: true},
			   /* {field: 'trueName', title: '用户真实姓名', sort: false}, */
			   {field: 'roleName', title: '用户角色', sort: false},
			   /* {field: 'mobilePhone', title: '手机号', sort: false}, */
			   {field: 'isactive', title: '是否启用', sort: false,templet:function(d){
			   	   if(d.isactive == 1){
						return '启用';
				   }else{
			   	   		return '禁用';
				   }
				   }},
			   {field: 'createTime', title: '时间', sort: false},
			   {fixed: 'right',title:'操作', align:'center',width:240, toolbar: '#barDemo'}
			 ]
			]
		});
	
		//时间控件
		laydate.render({
	  		elem:'#date', //指定元素
	  		eventElem: '.date-input-icon',
	  		trigger: 'click',
		});
		
		//查询
		$("#search").on('click',function(){
			searchUser();
		});
		
		//新增
		$("#add").on('click',function(){
			$("#addUserName").val("");
			$("#addPassword").val("");
			$("#addTrueName").val("");
			$("#addMobile").val("");
			
			$("#addRoleId").val("");
		
			layer.open({
	            type:1,
	            title:"新增内容",
	            shade:0,
	            area: ['500px', '80%'],
	            offset:'auto',
	            content: $("#addUser"),
	            btn: ['保存', '取消'],
	            btnAlign: 'c',
	            yes: function (index, layero) {
	            	//获取值
	            	var addUserName=$("#addUserName").val();
					var addPassword=$("#addPassword").val();
					var addTrueName=$("#addTrueName").val();
					var addMobile=$("#addMobile").val();
					var addRoleId=$("#addRoleId").val();
	            	
	            	if(addUserName=="" || addUserName==null){
	            		layer.msg('用户名不能为空',{time:1000});
	            		$("#addUserName").focus();
	            		return;
	            	}
	            	if(addPassword=="" || addPassword==null){
	            		layer.msg('密码不能为空',{time:1000});
	            		$("#addPassword").focus();
	            		return;
	            	}
	            	
	            	if(!isValuse(addPassword)){
    					layer.msg('密码最小长度为8位，应至少包括数字、大写字母、小写字母、特殊字符中的三种字符',{time:2000});
    					return;
    				}
	            	/* if(!checkPhone(addMobile)){
	            	layer.msg('手机号码格式不正确，请重新输入',{time:2000});
    					return;
	            	}  
	            	if(addTrueName=="" || addTrueName==null){
	            		layer.msg('用户名真实姓名不能为空',{time:1000});
	            		$("#addTrueName").focus();
	            		return;
	            	}*/
	            	if(addRoleId=="" || addRoleId==null){
	            		layer.msg('用户角色不能为空',{time:1000});
	            		return;
	            	}
	            	
	            	var param={};
	            	param.userName=addUserName;
	            	param.password=addPassword;
	            	param.trueName=addTrueName;
	            	param.mobile=addMobile;
	            	param.roleId=addRoleId;
	            
	            	var url='/insertUsers';
	            	
	            	AjaxPostJson(url,param,function(data){
	            		if (data.errCode == "0") {
							layer.close(index);
							layer.msg('添加成功', {
								time : 1000
							});
							searchUser();
						} else {
							layer.msg(data.errMsg, {
								time : 1000
							});
						}
	            	});
	            	
	            	
	            },
	            btn2:function(){
	            	
	            }
        	});	
		})
		
		//修改、启用禁用
		table.on('tool(test)', function(obj){
			var data = obj.data;
			
			if(obj.event === 'edit'){
				$("#mdfUserName").val(data.userName);
                $("#mdfTrueName").val(data.trueName);
                $("#mdfMobile").val(data.mobilePhone);
                $("#mdfRoleId").val(data.roleId);
                $("#mdfId").val(data.userId);

				layer.open({
                    type:1,
                    title:"修改信息",
                    shade:0,
                    area: ['500px', '80%'],
                    offset:'auto',
                    content: $("#EditUser"),
                    btn: ['保存', '取消'],
                    btnAlign: 'c',
                    yes: function (index, layero) {
		                var trueName=$("#mdfTrueName").val();
		                var mobile=$("#mdfMobile").val();
		                var roleId=$("#mdfRoleId").val();
		                var userId=$("#mdfId").val();
                    	var url='/modifyUsers';
	            		
	            		/* if(trueName=="" || trueName==null){
		            		layer.msg('用户名真实姓名不能为空',{time:1000});
		            		$("#trueName").focus();
		            		return;
		            	} */
		            	if(roleId=="" || roleId==null){
		            		layer.msg('用户角色不能为空',{time:1000});
		            		return;
		            	}
	            		/* if(!checkPhone(mobile)){
	            	    	layer.msg('手机号码格式不正确，请重新输入',{time:2000});
    						return;
	            	    } */
	            		
	            		var param={};
	            		param.userId=userId;
	            		param.roleId=roleId;
	            		param.mobile=mobile;
	            		param.trueName=trueName;
		            	AjaxPostJson(url,param,function(data){
		            		if (data.errCode == '0') {
		            			layer.close(index);
								layer.msg('修改成功', {
									time : 1000
								});
								searchUser();
							} else {
								layer.msg(data.errMsg, {
									time : 1000
								});
							}
		            	});

                    },
                    btn2:function(){

                    }
                });
			}else if(obj.event === 'start'){
				layer.confirm('启用该用户？',{title:'启用'}, function(index){
					var url="/unableUser";
					var param={};
					param.userId=data.userId;
					param.delete_status="1";

					AjaxPostJson(url, param, function(data) {
						if (data.state == true) {
							layer.close(index);
							layer.msg('修改成功', {
								time : 1000
							});
							var num=$(".layui-laypage-em").next().html();
							searchUser(num);
						} else {
							layer.msg(data.message, {
								time : 1000
							});
						}
					});
				})
			}else if(obj.event === 'forbidden'){
				layer.confirm('禁用该用户？',{title:'禁用'}, function(index){
					var url="/unableUser";
					var param={};
					param.userId=data.userId;
					param.delete_status="0";

					AjaxPostJson(url, param, function(data) {
						if (data.state == true) {
							layer.close(index);
							layer.msg('修改成功', {
								time : 1000
							});
							var num=$(".layui-laypage-em").next().html();
							searchUser(num);
						} else {
							layer.msg(data.message, {
								time : 1000
							});
						}
					});
				})
			}else if(obj.event === 'reset'){
				layer.confirm('确定要重置该用户的密码？',{title:'重置密码'}, function(index){
					var url="/reSetPassword";
					var param={};
					param.userId=data.userId;

					AjaxPostJson(url, param, function(data) {
						if (data.state == true) {
							layer.open({
								type : 1,
								offset :'auto',
								id : 'resetOpen',
								content : '<div style="padding: 20px 100px;">您重置的密码为' + data.data + '</div>',
								btn : '确定',
								btnAlign : 'c',
								shade : 0,
								yes : function() {
										layer.closeAll();
									}
								});
						} else {
							layer.msg(data.message, {
								time : 1000
							});
						}
					});
				})
			}
		});
        
        $(".downpanel").on("click", ".layui-select-title", function (e) {
            $(".layui-form-select").not($(this).parents(".layui-form-select")).removeClass("layui-form-selected");
            $(this).parents(".downpanel").toggleClass("layui-form-selected");
            layui.stope(e);
        }).on("click", "dl i", function (e) {
            layui.stope(e);
        });
        $(document).on("click", function (e) {
            $(".layui-form-select").removeClass("layui-form-selected");
        });
		
		
    });
    
    
  	function searchUser(num){
			var name = $("#projectName").val();
			var roleId=$("#roleId").val();
			var isActive=$("#isActive").val();
			
			if(num<1){num=1}
			
			table.reload('test', {
            	method: 'get',
            	url:'/selectUser',
                where: {
                    'trueName':name,
					'roleId' : roleId,
					'isactive':isActive
				},
                page: {
                    curr: num
                }
            });
		}
    
    //获取树勾选的值
	var checkid = [];
    var checktitle = [];
	function getSelect(data){	
		for(var i=0;i<data.length;i++){
			checkid.push(data[i].id);
			checktitle.push(data[i].title);
			if(data[i].children != undefined){
				getSelect(data[i].children);
			}
		}
	}
    </script>