<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" 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">
	<link rel="stylesheet" th:href="@{/css/common.css}">
	<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>
</head>
<style>
.div-inline{display:inline-block;float:right;margin-right:10px;}
.divAll{width:100%;}
.divTitle {background-color: #f2f2f2;padding-left: 15px;border-bottom: 1px solid #e6e6e6;line-height:38px;}
.divContent{border:1px solid #e6e6e6;}
.divLeft{width:200px;overflow:auto;position:absolute;top:5px;left:5px;bottom:0;}
.divRight{position:absolute;top:5px;left:212px;bottom:0;right:5px;}
.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;}
#row1,#row2 {overflow: overlay;}
.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;}

.move-bar div {cursor: n-resize;}
.layui-form-label{width:120px;}
.layui-form-item{display: inline-block;width: 350px;}
.layui-input-inline{min-height: 30px;}

.layui-layer-page .layui-layer-content {
	overflow: visible !important;
}
.padding20{padding-top:20px;}
</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">
			<button class="layui-btn layui-btn-sm" data-type="search" id="search"><i class="layui-icon">&#xe615;</i>查询</button>
			<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>
		{{# if(d.isactive=='0'){ }}
  		<a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="start">启用</a>
		{{# }else{ }}
  		<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="layui-form padding20" >
					<input type="text"  id="mdfId" required lay-verify="required" autocomplete="off" readonly style="display: none;" >
			<div class="layui-form-item">
				<label class="layui-form-label">用户名:</label>
				<div class="layui-input-inline">
					<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-inline">
                    <input type="text"  id="mdfTrueName" required lay-verify="required" autocomplete="off" 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="layui-form padding20" >
			<div class="layui-form-item">
				<label class="layui-form-label">用户名:</label>
				<div class="layui-input-inline">
					<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-inline">
                    <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-inline">
                    <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-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>
<script th:inline="javascript">

	let roleList = [[${roleList}]];

	let element ,
			table,
			laydate,
			layer,
			form,
			tree;

	let tHeight = $(".toolbar").height()+8;

	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?departId&userName&isactive&roleId', //数据接口
			title: '用户表',
			page: true ,//开启分页
			limit:20,
			limits:[20,30,50],
			//toolbar: '', //开启工具栏，此处显示默认图标，可以自定义模板
			defaultToolbar: [],
			id:'test',
			cols: [
				[ //表头
					{type: 'numbers', title: '序号', width: 50},
					{field: 'userName', title: '用户id', sort: false, totalRow: true},
					{field: 'trueName', title: '用户姓名', sort: false, totalRow: true},
					{field: 'isactive', title: '是否启用', sort: false, templet:function(a){
							return a.isactive=='1'?'是':'否';
						}},
					{field: 'createTime', title: '时间', sort: false},
					{fixed: 'right',title:'操作', align:'center',width:220, toolbar: '#barDemo'}
				]
			]
		});

		//查询
		$("#search").on('click',function(){
			searchUser();
		});

		//新增
		$("#add").on('click',function(){
			$("#addUserName").val("");
			$("#addPassword").val("");
			$("#addTrueName").val("");
			$("#addRoleId").val("");

			form.render('select');

			layer.open({
				type:1,
				title:"新增人员",
				shade:0,
				area: ['400px', '400px'],
				offset:'auto',
				content: $("#addUser"),
				btn: ['保存', '取消'],
				btnAlign: 'c',
				yes: function (index, layero) {
					//获取值
					let addUserName=$("#addUserName").val();
					let addPassword=$("#addPassword").val();
					let addTrueName=$("#addTrueName").val();
					let 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(addRoleId=="" || addRoleId==null){
						layer.msg('用户角色不能为空',{time:1000});
						return;
					}

					let param={};
					param.addUserName=addUserName;
					param.addPassword=addPassword;
					param.addTrueName=addTrueName;
					param.addRoleId=addRoleId;

					let url='/insertUsers';
					AjaxPostJson(url,param,function(data){
						if (data.state === true) {
							layer.msg('添加成功', {
								time : 1000
							});
							setTimeout(function(){window.location.reload()},1000);
						} else {
							layer.msg(data.message, {
								time : 1000
							});
						}
					});

				},
				btn2:function(){

				}
			});
		})


		//修改、启用禁用
		table.on('tool(test)', function(obj){
			let data = obj.data;

			if(obj.event === 'edit'){
				$("#mdfId").val(data.userId);
				$("#mdfUserName").val(data.userName);
				$("#mdfTrueName").val(data.trueName);

				$("#mdfRoleId").val(data.roleId);

				form.render('select');

				layer.open({
					type:1,
					title:"修改信息",
					shade:0,
					area: ['400px', '400px'],
					offset:'auto',
					content: $("#EditUser"),
					btn: ['保存', '取消'],
					btnAlign: 'c',
					yes: function (index, layero) {
						let userId=$("#mdfId").val();
						let userName=$("#mdfUserName").val();
						let trueName=$("#mdfTrueName").val();
						let roleId=$("#mdfRoleId").val();

						if(roleId=="" || roleId==null){
							layer.msg('用户角色不能为空',{time:1000});
							return;
						}

						let url='/modifyUsers';
						let param={};
						param.userId=userId;
						param.userName=userName;
						param.trueName=trueName;
						param.roleId=roleId;
						AjaxPostJson(url,param,function(data){
							if (data.state == true) {
								layer.msg('修改成功', {
									time : 1000
								});
								setTimeout(function(){window.location.reload()},1000);
							} else {
								layer.msg(data.message, {
									time : 1000
								});
							}
						});

					},
					btn2:function(){

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

					AjaxPostJson(url, param, function(data) {
						if (data.state == true) {
							layer.msg('修改成功', {
								time : 1000
							});
							let 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){
					let url="/unableUser";
					let param={};
					param.userId=data.userId;
					param.isactive="0";

					AjaxPostJson(url, param, function(data) {
						if (data.state === true) {
							layer.msg('修改成功', {
								time : 1000
							});
							let 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){
					let url="/reSetPassword";
					let 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", function (e) {
			layui.stope(e);
		});
		$(document).on("click", function (e) {
			$(".downpanel").find(".layui-form-select").removeClass("layui-form-selected");
		});
	});

	function searchUser(num){
		let name = $("#projectName").val();
		let departId = $("#selectID").val();
		let roleId=$("#roleId").val();
		let isActive=$("#isActive").val();
		let dtRoleId=$("#dtRoleId").val();

		if(num<1){num=1}

		table.reload('test', {
			method: 'get',
			url:'/selectUser',
			where: {
				'trueName':name,
				'departId' : departId,
				'roleId' : roleId,
				'isactive':isActive,
				'dtRoleId':dtRoleId
			},
			page: {
				curr: num
			}
		});
	}

	//获取树勾选的值
	let checkid = [];
	let checktitle = [];
	function getSelect(data){
		for(let 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);
			}
		}
	}

	//获取部门id， 和上面用的树不一样。后面可能改一样
	let departsStr=[];
	function getSelectDeparts(departArray){
		for (let i=0;i<departArray.length;i++){
			let obj= departArray[i];
			departsStr.push(obj.DEPART_ID);
			if(obj.children === undefined){
				continue;
			}else {
				getSelectDeparts(obj.children);
			}
		}
	}


</script>
</html>
