<!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;}
.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;}
.move-bar div {cursor: n-resize;}
.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="divAll">
	    <div class="divContent divLeft" >
	    	<div class="divTitle" >字典树</div>
	    	<div id="departTree" class="divSubstance "></div>
	    </div>
   
		<div class="divContent divRight">
		<div class="toolbar" id="titleDiv">   
          <table id="demo" lay-filter="test"></table>	
         </div>
		</div>
	</div>	
	  <script type="text/html"id="buttonOne" >
        <div class="layui-inline">
		    <button class="layui-btn layui-btn-sm layui-btn-normal" data-type="add" id="addDicinfoManage"><i class="layui-icon">&#xe654;</i>添加</button>
      	</div>
    </script>
	
	<!-- 表格操作栏 --> 		
	<script type="text/html" id="barDemo">
  		<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
		{{#  if('[[${local_code}]]' == 'G'){ }}
	  		<a class="layui-btn layui-btn-xs" lay-event="del">删除</a>
		{{#  } }}
	</script>
	
	<div id="addRole" style="display:none;">
		<form id="" class="layui-form layui-from-pane" style="margin-top:20px;">
			<div class="layui-form-item">
                <label class="layui-form-label">字典编码:</label>
                <div class="layui-input-block">
                    <input type="text" id="addDiccode" 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="addDicname" required  lay-verify="required" autocomplete="off" placeholder="请输入字典名称" class="layui-input formWidthTwo">
                </div>
            </div>
		</form>
	</div>
	<div id="updateRole" style="display:none;">
		<form id="" class="layui-form layui-from-pane" style="margin-top:20px;">
			<div class="layui-form-item">
                <label class="layui-form-label">字典编码:</label>
                <div class="layui-input-block">
                    <input type="text" id="modifyDiccode" required  lay-verify="required" autocomplete="off" placeholder="请输入字典编码" 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="modifyDicname" required  lay-verify="required" autocomplete="off" placeholder="请输入字典名称" class="layui-input formWidthTwo">
                </div>
            </div>
		</form>
	</div>
	<div id="addDicinfo" style="display:none;">
		<form id="zjer" class="layui-form layui-from-pane" style="margin-top:20px;">
			<div class="layui-form-item">
                <label class="layui-form-label">字典名称:</label>
                <div class="layui-input-block">
                    <input type="text" id="addDicname1" 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="addDicvalue" 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="addSortNo" required  lay-verify="required" autocomplete="off" placeholder="请输入显示次序" class="layui-input formWidthTwo">
                </div>
            </div>
		</form>
	</div>
	
	<div id="updateDicinfo" style="display:none;">
		<form id="updatejer" class="layui-form layui-from-pane" style="margin-top:20px;">
			<div class="layui-form-item"  style="display:none;">
                <label class="layui-form-label">父类id:</label>
                <div class="layui-input-block">
                    <input type="text" id="parentId" 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="updateDicname" 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="updateDicvalue" required  lay-verify="required" autocomplete="off" placeholder="请输入字典值" 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="updateSortNo" required  lay-verify="required" autocomplete="off" placeholder="请输入显示次序" class="layui-input formWidthTwo">
                </div>
            </div>
		</form>
	</div>
</body>   
</html>
<script th:inline="javascript">
	var departObj = eval("("+[[${departInfo}]]+")");
	departObj.spread=true;
	var departInfo = [departObj];
</script>
<script>
	var tHeight = $(".toolbar").height()+6;
	var element ,
	    table,
	    laydate,
	    layer,
	    form,
	    tree;
	

	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: '/dicinfoManager/selectDicinfoManager?parentCode=1111', //数据接口
			title: '字典表',
			toolbar: true,
			page: true ,//开启分页
			limit:20,
			limits:[20,30,50],
			  
			toolbar: '#buttonOne', //开启工具栏，此处显示默认图标，可以自定义模板
			defaultToolbar: [],	 
			id:'test', 
			cols: [
			 [ //表头
			   {type: 'checkbox', fixed: 'left'}, 
			   {field: 'dicname', title: '名称',width:220},
			   {field: 'dicvalue', title: '值',width:80},
			   {field: 'sortNo', title: '排序',width:100,width:80},
			   {fixed: 'right',title:'操作', align:'center',width:140, toolbar: '#barDemo'}
			 ]
			]
		});
	   
	

         //开启节点操作图标
  tree.render({
    elem: '#departTree'
    ,data: departInfo
    ,edit: ['add', 'update'] //操作节点的图标
    ,customOperate:true
    ,click: function(obj){
    	$(".layui-tree-txt").removeClass("active");
         obj.elem.find(".layui-tree-txt").addClass("active");      	
            $("#parentId").val(obj.data.id);
			var parentCode=obj.data.id;
			table.reload('test', {
            	method: 'get',
            	url:'/dicinfoManager/selectDicinfoManager',
                where: {
                    'parentCode':parentCode
                },
                page: {
                    curr: 1
                }
            });
     // layer.msg(JSON.stringify(obj.data));
    }
    ,operate: function(obj){
    var type = obj.type; //得到操作类型：add、edit、del
    var data = obj.data; //得到当前节点的数据
    var elem = obj.elem; //得到当前节点元素
    
    //Ajax 操作
    var id = data.id; //得到节点索引
    if(type === 'add'){ //增加节点
      //添加一个弹出框进行新增字典
     		 layer.open({
				type : 1,
				title : "新增字典",
				shade : 0,
				area : [ '500px', '500px' ],
				offset : 'auto',
				content : $("#addRole"),
				btn : [ '保存', '取消' ],
				btnAlign : 'c',
				yes : function(index, layero) {
					var dicname=$("#addDicname").val();
					var diccode=$("#addDiccode").val();
					$.ajax({
	            		url:'/dicinfoManager/addDicinfoManager',
	            		type:"post",
	            		dataType:"json",
	            		data:{
	            			dicname:dicname,
	            			diccode:diccode,
	            			dicvalue:'1',
	            			parentCode:'0',
	            			sortNo:'1'
	            			
	            			    			
	            		},
	            		success:function(data){
	            		
	            		   if (data.state) {
							layer.msg('添加成功', {
								time : 500
							});
							}
	            			setTimeout(function(){window.location.reload()},500);
	            		    //table.reload('test');
	            			
	            		},
	            		error:function(){
	            		
	            		}
	            	})
				
				},
				btn2 : function() {}
			});
    } else if(type === 'update'){ //修改节点
         $("#modifyDicname").val(data.title);
         $("#modifyDiccode").val(data.id);
         layer.open({
				type : 1,
				title : "修改字典",
				shade : 0,
				area : [ '500px', '500px' ],
				offset : 'auto',
				content : $("#updateRole"),
				btn : [ '保存', '取消' ],
				btnAlign : 'c',
				yes : function(index, layero) {
					var dicname=$("#modifyDicname").val();
                    var diccode= $("#modifyDiccode").val();
					$.ajax({
	            		url:'/dicinfoManager/updateDicinfoManager',
	            		type:"post",
	            		dataType:"json",
	            		data:{
	            			dicname:dicname,
	            			diccode:diccode,
	            			parentCode:'0',
	            			sortNo:'1',
	            			dicvalue:'1'    			
	            		},
	            		success:function(data){
	            		
	            		   if (data.state) {
							layer.msg('添加成功', {
								time : 500
							});
							}
	            			setTimeout(function(){window.location.reload()},500);
	            		    //table.reload('test');
	            			
	            		},
	            		error:function(){
	            		
	            		}
	            	})
				
				},
				btn2 : function() {}
			});
      				
    } else if(type === 'del'){ //删除节点
     				var url="/dicinfoManager/deleteDicinfoManager";
					var param={};
					param.diccode=data.id;
					AjaxPostJson(url, param, function(data) {
						if (data.state) {
							layer.msg('删除成功', {
								time : 500
							});
							setTimeout(function(){window.location.reload()},500);
						} else {
							layer.msg(data.message, {
								time : 500
							});
						}
					});
    };
  }
  });
  
  	//修改、删除
		table.on('tool(test)', function(obj){
			var data = obj.data;
			if(obj.event === 'edit'){
				console.log(data);
                $("#updateDicname").val(data.dicname);
			    $("#updateDicvalue").val(data.dicvalue);
			    $("#updateSortNo").val(data.sortNo);
				layer.open({
                    type:1,
                    title:"修改信息",
                    shade:0,
                    area: ['500px', '80%'],
                    offset:'auto',
                    content: $("#updateDicinfo"),
                    btn: ['保存', '取消'],
                    btnAlign: 'c',
                    yes: function (index, layero) {
                      var dicname = $("#updateDicname").val();
			         var dicvalue = $("#updateDicvalue").val();
			          var sortNo=$("#updateSortNo").val();
			        $.ajax({
	            		url:'/dicinfoManager/updateDicinfoManager',
	            		type:"post",
	            		dataType:"json",
	            		data:{
	            			diccode:data.diccode,
	            			dicname:dicname,
	            			parentCode:data.parentCode,
	            			dicvalue:dicvalue,
	            			sortNo:sortNo

	            		},
	            		success:function(data){
	            		layer.close(index);
               			 
	            		if(data.state){
	            		table.reload('test');
	            		  
							
							}else{
							layer.msg(data.message, {
								time : 2000
							});}
	            			//setTimeout(function(){window.location.reload()},500);
	            		   
	            			
	            		},
	            		error:function(){
	            		
	            		}
	            	})
                    },
                    btn2:function(){
                    	
                    }
                });				
			}else if(obj.event === 'del'){
				layer.confirm('确定删除么？',{title:'删除'}, function(index){
					var url="/dicinfoManager/deleteDicinfoManager";
					var param={};
					param.diccode=data.diccode;
					AjaxPostJson(url, param, function(data) {
						layer.close(index);
               			 
	            		if(data.state){
	            		table.reload('test');
						} else {
							layer.msg(data.message, {
								time : 500
							});
						}
					});
				})
			}
		});
  
  
  $("body").on('click','#addDicinfoManage',function(){
	var parentId=$("#parentId").val();
	if(parentId !== "" && parentId !== null && parentId !== undefined){
	                var url="/dicinfoManager/getMaxDicValue";
					var param={};
					param.diccode=parentId;
					AjaxPostJson(url, param, function(data) {
						if (data.state) {
							$("#addDicvalue").val(data.data);
			 				$("#addSortNo").val(data.data);
						}
					});
	
	
			layer.open({
	            type:1,
	            title:"新增内容",
	            shade:0,
	            area: ['500px', '80%'],
	            offset:'auto',
	            content: $("#addDicinfo"),
	            btn: ['保存', '取消'],
	            btnAlign: 'c',
	            yes: function (index, layero) {
	           var dicname = $("#addDicname1").val();
			   var dicvalue = $("#addDicvalue").val();
			   var sortNo=$("#addSortNo").val();
			    if(!isDigit(sortNo)){
			    layer.msg("显示次序格式不正确，请重新填写数字", {time : 2000});
			    return;
			   }
	            	$.ajax({
	            		url:'/dicinfoManager/addDicinfoManager',
	            		type:"post",
	            		dataType:"json",
	            		data:{
	            			dicname:dicname,
	            			diccode:'',
	            			dicvalue:dicvalue,
	            			parentCode:parentId,
	            			sortNo:sortNo
	            			
	            			    			
	            		},
	            		success:function(data){
		            		if(data.state){
		            		layer.close(index);
		            		table.reload('test');
		            		
		            		}else{
		            		layer.msg(data.message, {time : 2000});
		            		}
	            		   
	            			
	            		},
	            		error:function(){
	            		
	            		}
	            	})
	            	
	            },
	            btn2:function(){
	            	
	            }
        	});	
        }else{
        layer.msg("请先选择一个字典树", {time : 2000});
        }
		});
});



	
	
	
	
		

	

	
</script>