<!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>
    <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="toolbar">  
	<div class="layui-inline">
		    <button class="layui-btn layui-btn-sm layui-btn-normal" data-type="add" id="addKnow">添加</button>
 			<button class="layui-btn layui-btn-sm layui-btn-normal" data-type="desc" id="updateSer">修改</button>
      	</div>         	
    	<div class="layui-inline">
			<span>参数名称：</span>
            <input type="text" id="paramName" 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>

		</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-danger layui-btn-xs" lay-event="del">删除</a>
	</script>
	
		<!-- 增加参数设置 -->
	<div id="addServiceParams" style="display:none;">
		<form id="" style="margin-top:20px;">
		  <div class="layui-form-item">
                <label class="layui-form-label">参数编码:</label>
                <div class="layui-input-block">
                    <input type="text" name="addParamCode" id="addParamCode"  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" name="addParamName" id="addParamName"  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" name="addParamVal" id="addParamVal"  required  lay-verify="required" autocomplete="off" placeholder="请输入参数值" class="layui-input formWidthTwo">
                </div>
            </div>
		</form>
	</div>
	
		<!-- 修改参数设置 -->
	<div id="updateServiceParams" style="display:none;">
		<form id="upKnow" style="margin-top:20px;">
	    	<div class="layui-form-item">
                <label class="layui-form-label">参数编码:</label>
                <div class="layui-input-block">
                    <input type="text" name="updateParamCode" id="updateParamCode"  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" name="updateParamName" id="updateParamName"  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" name="updateParamVal" id="updateParamVal"  required  lay-verify="required" autocomplete="off" placeholder="请输入参数值" class="layui-input formWidthTwo">
                </div>
            </div>
		</form>
	</div>
	
		
	
	
		
</body>   
</html>

<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: '/serviceParams/selectServiceParams?paramName', //数据接口
			title: '用户表',
			page: true ,//开启分页
			limit:20,
			limits:[20,30,50],
			//toolbar: '#buttonOne', //开启工具栏，此处显示默认图标，可以自定义模板
			//defaultToolbar: [],	 
			id:'test', 
			cols: [
			 [ //表头
			   {type: 'checkbox', fixed: 'left'}, 
			   {field: 'paramName', title: '参数名称', sort: false, totalRow: true},
			   {field: 'paramCode', title: '参数编码', sort: false},
			   {field: 'paramVal', title: '参数值', sort: false},
			   //{field: 'createTime', title: '创建时间', sort: false},
			   //{field: 'modifyTime', title: '修改时间', sort: false},
			   //{field: 'modifyTrueName', title: '修改人员真实姓名', sort: false},
			   //{fixed: 'right',title:'操作', align:'center',width:90, toolbar: '#barDemo'}
			 ]
			]
		});
	
		
		//查询
		$("#search").on('click',function(){
			var paramName = $("#paramName").val();
			table.reload('test', {
            	method: 'get',
            	url:'/serviceParams/selectServiceParams',
                where: {
                    'paramName':paramName
				},
                page: {
                    curr: 1
                }
            });
		});
		
		//新增知识库
		$("body").on('click','#addKnow',function(){
			layer.open({
	            type:1,
	            title:"新增内容",
	            shade:0,
	            area: ['500px', '80%'],
	            offset:'auto',
	            content: $("#addServiceParams"),
	            btn: ['保存', '取消'],
	            btnAlign: 'c',
	            yes: function (index, layero) {
	           var paramName = $("#addParamName").val();
			   var paramCode = $("#addParamCode").val();
			   var paramVal = $("#addParamVal").val();
	                //遮罩层
                    var i = layer.load(0, {time:5000}); 
	            	$.ajax({
	            		url:'/serviceParams/insertServiceParams',
	            		type:"post",
	            		dataType:"json",
	            		data:{
	            			paramName:paramName,
	            			paramCode:paramCode,
	            			paramVal:paramVal
	            			    			
	            		},
	            		success:function(data){
	            		    layer.close(i);
							if (data.state) {
		                		 layer.msg(data.message,{time:1000});
		            			layer.close(index);
		            			table.reload('test');
							} else {
								layer.msg(data.message, {time : 2000});
							}
	            		},
	            		error:function(){
	            		
	            		}
	            	})
	            	
	            },
	            btn2:function(){
	            	
	            }
        	});	
		});
	
			//点击修改参数设置
		$("body").on('click','#updateSer',function(){
		var checkStatus = table.checkStatus('test');
        var th=checkStatus.data.length;
		//判断是否有选中的信息  if(th==1){
		if(th==0){
		    layer.msg("请选择一条记录修改参数设置",{time:2000});
		}else if(th==1){
          	var data=checkStatus.data[0];
          	var paramId=data.paramId;
          	var paramCode = data.paramCode;
            $("#updateParamName").val(data.paramName);
		    $("#updateParamCode").val(data.paramCode);
			$("#updateParamVal").val(data.paramVal);
			  layer.open({
                    type:1,
                    title:"修改参数设置信息",
                    shade:0,
                    area: ['500px', '80%'],
                    offset:'auto',
                    content: $("#updateServiceParams"),
                    btn: ['保存', '取消'],
                    btnAlign: 'c',
                    yes: function (index, layero) {
                        var paramId=data.paramId;
		                var paramName= $("#updateParamName").val();
		                var paramCode=$("#updateParamCode").val();
			            var paramVal=$("#updateParamVal").val();
 					//遮罩层
                    var i = layer.load(0, {time:5000}); 
	            	$.ajax({
	            		url:'/serviceParams/updateServiceParams',
	            		type:"post",
	            		dataType:"json",
	            		data:{
	            		    paramId:paramId,
	            			paramName:paramName,
	            			paramCode:paramCode,
	            			paramVal:paramVal
	            			    			
	            		},
	            		success:function(data){
	            		
	            		    layer.close(i);
							if (data.state) {
		                		 layer.msg(data.message,{time:1000});
		            			layer.close(index);
		            			table.reload('test');
							} else {
								layer.msg(data.message, {time : 2000});
							}
	            			
	            		},
	            		error:function(){
	            		
	            		}
	            	})
                    	
                    },
                    btn2:function(){
                    	
                    }
               })		
        }else{
           layer.msg("请选择一条记录显示详情",{time:2000});
        }
		});
		//修改、启用禁用
		table.on('tool(test)', function(obj){
			var data = obj.data;
			
			if(obj.event === 'edit'){
			 	
			}else if(obj.event === 'del'){
				layer.confirm('确定删除么？',{title:'删除'}, function(index){
					obj.del();
                    layer.close(index);
                    $.ajax({
	            		url:'/serviceParams/deleteServiceParams',
	            		type:"get",
	            		dataType:"json",
	            		data:{
	            			paramId:data.paramId       			
	            		},
	            		success:function(data){
	            		    layer.msg(data.message,{time:1000});		
	            		},
	            		error:function(){
	            		
	            		}
	            	})
				})
				
			}
		});
    });
    
  
    
    
    </script>