<!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="@{/js/axui/css/font_1551254_rxrrzgz2kjc.css}">
	<link rel="stylesheet" th:href="@{/js/axui/css/ax-tree.css}">
	<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/axui/plugins/ztree/js/jquery.ztree.all.min.js}"></script>
    <script th:src="@{/js/common.js}"></script>
</head>
<style>
	a, span, font, input, textarea, select, label, i {
		display: inline-block;
		vertical-align: top;
	}
	.layui-table-view{margin:0;}
	.layui-table-tool{padding:0;}
	.layui-table-tool-temp{padding:0;}
	.layui-input{width:auto;display:inline-block;}
	.layui-btn{margin-left:10px;}
	.layui-inline{margin-left:15px;margin-top:6px;}
	.date-input-icon{position:absolute;right:10px;top:11px;}
	.toolbar{width:100%;margin-bottom:6px;}
	.divAll{box-sizing:border-box;position: absolute;height:100%;width:100%;}
	.divContent{display:inline-block;border:1px solid #e6e6e6;line-height:35px;height:calc(100% - 10px);}
	.divLeft{float:left;width:500px;margin:5px 0px 5px 5px;}
	.divleftul{overflow:auto;width:500px;height:calc(100% - 36px);}
	.divRight{float:right;margin:5px 5px 5px 0;width: calc(100% - 520px);}
	.divTitle{background-color:#f2f2f2;padding-left:15px;border-bottom:1px solid #e6e6e6;height:35px;}
	.divToolBar{border-bottom:1px solid #e6e6e6;background-color:#f2f2f2;}
	.managerTable{margin:15px 30px 0 0;}
	.managerTable td{}
	.managerTable tr td:first-child{text-align:right;width:100px;}
	.active{color:#ccc}
</style>

<body class="layui-layout-body">
	
	<div class="divAll">
	    <div class="divContent divLeft" >
	    	<div class="divTitle" >部门树</div>
			<div class="divleftul">
				<ul id="departTree" class="ax-tree"></ul>
			</div>

	    </div>
   
		<div class="divContent divRight">
			<div class="divTitle">
				<div class="" style="float:left;">
					<button type="button" id="addDepart" class="layui-btn layui-btn-sm layui-btn-normal"><i class="layui-icon">&#xe654;</i>添加</button>
				    <button type="button" id="managerDepart" class="layui-btn layui-btn-sm layui-btn-normal"><i class="layui-icon">&#xe642;</i>修改</button>
				    <button type="button" id="deleteDepart" class="layui-btn layui-btn-sm layui-btn-normal"><i class="layui-icon">&#xe640;</i>删除</button>
				    <button type="button" id="saveDepart" class="layui-btn layui-btn-sm layui-btn-normal"><i class="layui-icon">&#x1005;</i>保存</button>
				</div>
			</div>
			<div>
			<form  class="layui-form layui-from-pane" style="margin-top:20px;">
				<input type="hidden" id="departId" />
				<div class="layui-form-item">
	                <label class="layui-form-label">部门名称：</label>
	                <div class="layui-input-block">
	                    <input type="text" id="departName" required  lay-verify="required" readonly autocomplete="off" class="layui-input">
	                </div>
	            </div>
	            <div class="layui-form-item">
	                <label class="layui-form-label">修改人：</label>
	                <div class="layui-input-block">
	                    <input type="text" id="trueName" required  lay-verify="required" readonly autocomplete="off" class="layui-input">
	                </div>
	            </div>
	            <div class="layui-form-item">
	                <label class="layui-form-label">修改时间：</label>
	                <div class="layui-input-block">
	                    <input type="text" id="modifyTime" required  lay-verify="required" readonly autocomplete="off" class="layui-input">
	                </div>
	            </div>
            </form>
			</div>
			
		</div>
	</div>	
	
	<!-- 表格操作栏 --> 		
	<script type="text/html" id="barDemo">
  		<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
  		<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
	</script>
	
	<div id="addRole" style="display:none;">
		<form   class="layui-form layui-from-pane" style="margin-top:20px;">
			<div class="layui-form-item">
				<label class="layui-form-label">部门id:</label>
				<div class="layui-input-block">
					<input type="text" id="addDepartId" required  lay-verify="required" autocomplete="off" placeholder="请输入部门id" class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">上级部门id:</label>
				<div class="layui-input-block">
					<input type="text" id="addParentId" required  lay-verify="required" autocomplete="off" readonly placeholder="" class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
                <label class="layui-form-label">部门名称:</label>
                <div class="layui-input-block">
                    <input type="text" id="addName" required  lay-verify="required" autocomplete="off" placeholder="请输入部门名称" class="layui-input">
                </div>
            </div>
		</form>
	</div>
</body>
<script th:inline="javascript">
	var departInfo = [[${departInfo}]];
	if(departInfo.length>0){
		departInfo[0].open=true;
	}
</script>
<script>
	var tHeight = $(".toolbar").height()+6;
	var element ,
			table,
			laydate,
			layer,
			form,
			tree;
	var menuId="";

	layui.use([ 'layer' ], function() {
		layer = layui.layer;
	});

	let setting = {
		view: {
			enable: true,
			chkDisabledInherit: true
		},
		check: {
			enable: false,
			chkStyle: 'radio', //注释调默认多选
			radioType: "all" //单选针对层级，注释只支持同级目录，上下级其他地方仍可选择 */
		},
		callback: {
			onClick:selectThisNode
		},

	};

	zTreeObj = $.fn.zTree.init($("#departTree"), setting, departInfo);

	//ztree选中事件
	function selectThisNode(event,treeId,obj){
		$("#departId").val(obj.DEPART_ID);
		$("#departName").val(obj.DEPART_NAME);
		$("#trueName").val(obj.MODIFY_TRUE_NAME);
		$("#modifyTime").val(obj.MODIFY_TIME);
	}


	//根据id获取选择的id
	/*function getSelectMenuId(roleId) {
		$.ajax({
			url : '/getSelectMenuId',
			type : "post",
			data : {roleId:roleId},
			dataType:"json",
			success : function(data) {
				tree.setChecked('tree',data);
				setSelectValue();
			},
			error : function() {}
		})
	}

	//根据选中的值设置到input中
	function setSelectValue(){
		var checkedData = tree.getChecked('tree');
		checkid = [];
		checktitle = [];
		getSelect(checkedData);
		$("#treeclass").val(checktitle);
		$("#selectId").val(checkid);
	}

	//获取树勾选的值
	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);
			}
		}
	}*/

	//添加按钮执行事件
	$("#addDepart").click(function(){
		$("#departName").attr("readonly","readonly");

		$("#addParentId").val($("#departId").val());

		layer.open({
			type : 1,
			title : "新增部门",
			shade : 0,
			area : [ '400px', '400px' ],
			offset : 'auto',
			content : $("#addRole"),
			btn : [ '保存', '取消' ],
			btnAlign : 'c',
			yes : function(index, layero) {
				var parentId=$("#addParentId").val();
				var departId=$("#addDepartId").val();
				var departName=$("#addName").val();

				if(parentId=="" || parentId==null){
					layer.msg('请选择要添加子部门的部门', {
						time : 1000
					});

					return;
				}

				var url="/addDepart";
				var param={};
				param.parentId=parentId;
				param.departName=departName;
				param.departId=departId;

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

	});

	//修改
	$("#managerDepart").click(function(){
		$("#departName").removeAttr("readonly");
		$("#departName").focus();
	});

	//删除
	$("#deleteDepart").click(function(){
		$("#departName").attr("readonly","readonly");

		layer.confirm('确定删除么？', {
			title : '删除'
		}, function() {
			var departId=$("#departId").val();

			var url = '/removeDepart';
			var param = {};
			param.departId=departId;

			AjaxPostJson(url, param, function(data) {
				if (data.state == true) {
					layer.msg('删除成功', {
						time : 500
					});
					setTimeout(function(){window.location.reload()},500);
				} else {
					layer.msg(data.message, {
						time : 500
					});
				}
			});

		});
	});

	//保存
	$("#saveDepart").click(function(){
		var departId=$("#departId").val();
		var departName=$("#departName").val();

		if(departId=="" || departId==null){
			layer.msg('请选择要修改的部门并修改', {
				time : 1000
			});

			return;
		}

		var url = '/modifyDepart';
		var param = {};
		param.departId=departId;
		param.departName=departName;

		AjaxPostJson(url, param, function(data) {
			if (data.state == true) {
				$("#departName").attr("readonly","readonly");
				layer.msg('修改成功', {
					time : 500
				});
				setTimeout(function(){window.location.reload()},500);
			} else {
				layer.msg(data.message, {
					time : 500
				});
			}
		});
	});


</script>
</html>
