scott
/
crm


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243
							{extend name="public/layout" /} {block name="title"}创建训练营{/block} {block name="body"}
<style type="text/css">
	html {
		background: #fff;
	}
	body{
		min-width: 320px;
	}
	@media screen and (max-width: 450px){
		.layui-form-item{
			width: 100%;
		}
	}
	#layuiadmin-app-form-list{
		padding: 1% 2%;
	}
	.layui-form-label{
		width: 20%;
	}
	.layui-input {
		border: none;
		outline: none;
	}
	.layui-input-inline-bottom {
		border-bottom: 1px solid #D4E4ED;
	}
	.flex-center {
		display: flex;
		align-items: center;
	}
	.border {
		border: 1px solid #D4E4ED;
		padding-right: 10px;
		border-radius: 5px; 
	}
	.layui-form-radio>i:hover, .layui-form-radioed>i {
		color: #249EFB;
	}
	.layui-form-radioed {
		color: #249EFB;
	}
	.layui-tab-card>.layui-tab-title {
		background-color: #fff; 
	}
	.layui-tab-card {
		border-radius: 10px;
		box-shadow: none;
		border: none;
	}
	.layui-form-label {
		color: #8A9AAA;
	}
    .fontstyle {
        font-size: 15px;
    }
	.layui-input::placeholder {
		color:  #9DB6CF;
	}
	.layui-tab-card>.layui-tab-title .layui-this {
    background-color: #249EFB;
    color: #fff;
  }

  .layui-tab-card>.layui-tab-title .layui-this:after {
    border-bottom: none;
    border: none;
  }

  .layui-tab-card>.layui-tab-title li {
    background-color: #F2F2F2;
    margin: 0px 5px;
  }
  .layui-anim.layui-icon {
	  font-size: 18px;
  }
</style>

<body>
	<form class="layui-form" id="admin" enctype="multipart/form-data">
		<div class="layui-form" lay-filter="layuiadmin-app-form-list" id="layuiadmin-app-form-list">
			<div class="layui-form-item">
				<div class="layui-tab layui-tab-card">
					<div class="layui-tab-content">
						<div class="layui-tab-item layui-show">
							<div class="layui-form-item">
								<label class="layui-form-label"><i style="color:red;">*&nbsp;</i>训练计划名称</label>
								<div class="layui-input-inline layui-input-inline-bottom" style="width: 380px;">
									<input type="text" id="activiteTitle" name="title" lay-verify="required" placeholder="请输入训练计划名称" value="{$data.title}" autocomplete="off" class="layui-input" style="max-width: 500px;">
								</div>
							</div>
							<div class="layui-form-item">
								<label class="layui-form-label"><i style="color:red;">*&nbsp;</i>训练时间</label>
								<div class="layui-input-inline flex-center border">
							        <input type="text" name="start_date" id="start_date" placeholder="选择开始日期" autocomplete="off" class="layui-input" value="{$data.start_date}">
							        <img src="__STATIC__/img/bg-calendar.png" alt="日历" width="14px" height="14px">
								</div>
								<div class="layui-form-mid">-</div>
								<div class="layui-input-inline flex-center border">
							        <input type="text" name="end_date" id="end_date" placeholder="选择结束日期" autocomplete="off" class="layui-input" value="{$data.end_date}">
							        <img src="__STATIC__/img/bg-calendar.png" alt="日历" width="14px" height="14px">
								</div>
							</div>
							<div class="layui-form-item">
								<label class="layui-form-label"><i style="color:red;">*&nbsp;</i>训练模式</label>
								<div class="layui-input-inline" style="width: 350px;">
									<input type="radio" name="pattern" lay-filter="pattern" value=0 title="日期模式" {if condition='$data.pattern eq 0'} checked {/if}>
                                    <input type="radio" name="pattern" lay-filter="pattern" value=1 title="闯关模式" {if condition='$data.pattern eq 1'} checked {/if}>
								</div>
							</div>
                            <div class="layui-form-item dateModel">
								<label class="layui-form-label"></label>
								<div class="layui-input-inline" style="width: 350px;">
									<span class="fontstyle">每</span>
                                    <input type="number" name="day" style="width: 40px;margin: 0px 5px;" onkeyup="RegularInt(this)" value="{$data.day}">
                                    <span class="fontstyle">天，解锁一计划</span>
								</div>
							</div>
							<div class="layui-form-item dateModel">
								<label class="layui-form-label">解锁时间:</label>
								<div class="layui-input-block" >
							        <input type="text" name="time" id="unlockTime" placeholder="选择时间" style="width: 150px;" autocomplete="off" class="layui-input layui-input-inline-bottom" value="{$data.time}">
								</div>
							</div>
						</div>
						<input type="hidden" name="id" value="{$data.id}">
						<input type="button" style="margin-left:24%;width:165px;height:38px;margin-top: 30px;" lay-submit class="layui-btn layui-btn-normal" lay-filter="activity-submit" id="activity-submit" value="确认保存">
					</div>
				</div>
			</div>
		</div>
	</form>
</body>
{/block} {block name="js"}
<script>
	layui.config({
		base: '__LAYUI__/',
		urlbase: '/sys'
	}).extend({
		index: 'lib/index' //主入口模块
	}).use(['index', 'form', 'upload', 'layedit', 'laydate'], function() {
		var form = layui.form,
			upload = layui.upload,
			layedit = layui.layedit,
			laydate = layui.laydate,
			$ = layui.jquery;
		
			function RegularInt(obj) {
				obj.value = obj.value.replace(/[^\d]/g, ""); //清除"数字以外的字符
				obj.value = obj.value.replace(/^\./g, ""); //验证第一个字符是数字
			}

		/* 监听提交 */
		form.on('submit(activity-submit)', function(obj) {
			var index = parent.layer.getFrameIndex(window.name);
			// var formData = new FormData(obj.form);
			if (obj.field.pattern == '1') {
				obj.field.day = '';
				obj.field.time = '';
			}else if (obj.field.day > 9999) {
				layer.msg('解锁天数过长', {
					anim: 0
					,time: 2000
				});
				return false;
			}
			let startDate = $("#start_date").val();
			let endDate = $("#end_date").val();
			if (startDate && endDate) {
				if (new Date(endDate).getTime() < new Date(startDate).getTime()) {
					layer.msg('结束日期不能小于开始日期', {
						anim: 0
						,time: 2000
					});
					return false;
				}
			}
			// 单击之后提交按钮不可选,防止重复提交
            var DISABLED = 'layui-btn-disabled';
            var target = '#activity-submit';
            $(target).addClass(DISABLED);
            $(target).attr('disabled', 'disabled');
			$.ajax({
				url: '{:url("camp/edittrainingcamp_edit")}',
				type: 'post',
				data: obj.field,
				dataType: 'json',
				success: function(res) {
					if(res.code === 0) {
						sessionStorage.setItem('trainData',JSON.stringify({pattern: obj.field.pattern,id: "{$data.id}"}));
						sessionStorage.setItem('Dialog',true);
						layer.msg(res.msg, {
							anim: 0
							,time: 2000
						}, function() {
							parent.layui.table.reload('training-plan'); //重载表格
							parent.layer.close(index); //再执行关闭
						});
					} else {
						layer.msg(res.msg, {
							anim: 6
							,time: 2000
						});
					}
				}
			});
			return false;
		});

		form.on('radio(pattern)', function (data) {
			swtichElement(data.value);
		})
		form.render();

		let pattern = "{$data.pattern}";
		swtichElement(pattern);
		function swtichElement (value) {
			if (value == '0') {
				$('.dateModel')[0].className = 'layui-form-item dateModel';
				$('.dateModel')[1].className = 'layui-form-item dateModel';
			} else {
				$('.dateModel')[0].className = 'layui-form-item dateModel layui-hide';
				$('.dateModel')[1].className = 'layui-form-item dateModel layui-hide';
			}
		}

		//日期范围
		laydate.render({
		    elem: '#start_date',
		    trigger: 'click'//呼出事件改成click
		});
		laydate.render({
		    elem: '#end_date',
		    trigger: 'click'//呼出事件改成click
		});
        laydate.render({
		    elem: '#unlockTime',
		    trigger: 'click',//呼出事件改成click
            type: 'time',
            format: 'HH:mm:ss'
		});
	});
</script>
{/block}