crm/app/sys/view/train/class_edit.html

{extend name="public/layout"/} {block name="title"}课程修改{/block} {block name="body"}
<style type="text/css">
	html,
	body {
		display: block;
		min-width: 100%;
		background-color: #fff;
	}

	.layui-fluid {
		display: block;
		border-radius: 5px;
		background-color: #ffffff;
		padding: 15px 30px;
	}

	.layui-tab {
		padding: 15px;
		height: 100%;
	}

	.layui-table-view .layui-table th,
	.layui-table-view .layui-table td {
		text-align: center;
		border-color: #B6CADE;
	}

	.layui-input-inline.input-longer-inline {
		width: 290px;
	}

	.layui-form-item .layui-input-inline {
		width: auto;
	}

	.layui-titlebox {
		position: relative;
		left: 0;
		height: 40px;
		white-space: nowrap;
		font-size: 0;
		border-bottom-width: 1px;
		border-bottom-style: solid;
		transition: all .2s;
		-webkit-transition: all .2s;
		border-color: #e6e6e6;
		color: #666;
		background-color: #f2f2f2;
		display: flex;
	}

	.layui-titlebox li {
		display: inline-block;
		vertical-align: middle;
		font-size: 14px;
		transition: all .2s;
		-webkit-transition: all .2s;
		position: relative;
		line-height: 40px;
		/* width: 33%; */
		flex: 1;
		text-align: center;
		cursor: pointer;
		box-sizing: border-box;
	}

	.layui-titlebox li:hover {
		color: #249EFB;
	}

	.layui-titlebox .layui-this:hover {
		color: #fff;
	}

	.layui-titlebox .layui-this {
		flex: 1;
		color: #000;
		border-bottom-color: transparent;
		background-color: #249EFB;
		color: #FFFFFF;
	}

	.layui-titlebox .layui-this:after {
		position: absolute;
		left: 0;
		top: 0;
		content: '';
		width: 100%;
		height: 41px;
		border-width: 1px;
		border-style: solid;
		border-color: #e6e6e6;
		border-bottom-color: #fff;
		border-radius: 2px 2px 0 0;
		box-sizing: border-box;
		pointer-events: none;

	}

	#morecoursebox {
		width: 100%;
		margin-top: 20px;
	}

	.saveBtn,
	.cancel,
	.cancel:hover,
	.saveBtn:hover {
		background-color: #fff;
		color: #249EFB;
		border: 1px solid #249EFB;
	}

	.layui-btn-primary,
	.layui-btn-primary:hover {
		background-color: #249EFB;
		color: #fff;
		border: none;
	}

	.layui-tab-content {
		padding-top: 20px;
	}

	.layui-form-radio>i {
		font-size: 18px;
	}

	.layui-btn {
		padding: 0px 20px;
	}

	.nextprev {
		box-sizing: border-box;
		display: flex;
		justify-content: center;
		margin: 0;
		text-align: right;
		position: fixed;
		bottom: 0;
		right: 0;
		width: 100%;
		background: #fff;
		padding: 10px 7.5% 20px 0;
	}
	.wflex {
		display: flex;
		align-items: center;
		box-sizing: border-box;
	}
	.wlabel {
		width: 110px;
		box-sizing: border-box;
		padding: 9px 15px;
		text-align: right;
	}
</style>
<div class="layui-fluid">
	<div class="layui-table">
		<ul class="layui-titlebox">
			<li id="tab-item-1" class="layui-this">基础信息</li>
			<li id="tab-item-2">设置课件</li>
			<li id="tab-item-3">智能观后感</li>
		</ul>
		<form class="layui-form">
			<div class="layui-tab-content">
				<div class="layui-tab-item layui-show">
					<div class="layui-form-item col-md5">
						<label for="title" class="layui-form-label"><i style="color:red;">*</i>课程名称：</label>
						<div class="layui-input-block">
							<input name="title" id="title" class="layui-input" value="{$class.title}"
								placeholder="请输入课程名称" autocomplete="off">
						</div>
					</div>
					<div class="layui-form-item">
						<label class="layui-form-label"><i style="color:red;">*</i>分类: </label>
						<div class="layui-input-inline">
							<select name="cate" lay-filter="type" id="type" lay-verify="required" lay-search>
								<option value="">请选择分类</option>
								{volist name="type" id="t"}
								<option value="{$t.name}" id="{$t.id}" {if condition="$class.cate eq $t.name"} selected {/if} >{$t.name}</option>
								{/volist}
							</select>
						</div>
						<i class="layui-icon layui-icon-add-circle adding" style="font-size: 32px" id="cate-add"></i>
					</div>
					<div class="layui-form-item">
						<label class="layui-form-label">二级分类</label>
						<div class="layui-input-inline">
							<select name="label" id="label">
								<option value="">请选择二级分类</option>
								{volist name="labels" id='v'}
								<option value="{$v.name}" {if condition="$class.label eq $v.name"}selected{/if}>{$v.name}</option>
								{/volist}
							</select>
						</div>
						<i class="layui-icon layui-icon-add-circle adding" style="font-size: 32px" id="addLabel"></i>
					</div>
					<div class="layui-form-item col-md5">
						<label for="title" class="layui-form-label"><i style="color:red;">*</i>封面：</label>
						<div class="layui-input-block">
							<div class="layui-input-inline" id="upload-drag">
								{if condition="$class.cover eq ''"}
								<div class="layui-upload-drag">
									<i class="layui-icon">&#xe681;</i>
									<p>获取图片</p>
								</div>
								{else/}
								<img src="{$class.cover}" style="height: 100%;width:100%;">
								<input type="hidden" name="cover" value="{$cover}" />
								{/if}
							</div>
						</div>
					</div>
					<div class="layui-form-item">
						<label for="title" class="layui-form-label"></label>
						<div><i style="color:red;margin-right: 5px;">*</i>建议上传图片宽高比例2:1，图片大小不超过1M</div>
					</div>
					<div class="layui-form-item">
						<label for="des" class="layui-form-label">简介：</label>
						<div class="layui-input-block">
							<textarea name="des" placeholder="简介" class="layui-textarea">{$class.des}</textarea>
						</div>
					</div>
					<div class="layui-form-item">
						<label for="des" class="layui-form-label"><i style="color:red;">*</i>学习方式：</label>
						<div class="layui-input-block">
							<input type="radio" name="type" value="order" title="顺序学习" lay-filter="type" {eq
								name="$class.type" value="order" }checked{/eq} />
							<input type="radio" name="type" value="free" title="自由学习" lay-filter="type" {eq
								name="$class.type" value="free" }checked{/eq} />
						</div>
					</div>
					<div class="layui-form-item">
						<label for="des" class="layui-form-label">类别：</label>
						<div class="layui-input-block">
							<input type="radio" name="category" value="compulsory" title="必修" lay-filter="type" checked
								{eq name="$class.category" value="compulsory" }checked{/eq} />
							<input type="radio" name="category" value="elective" title="选修" lay-filter="type" {eq
								name="$class.category" value="elective" }checked{/eq} />
						</div>
					</div>
					<div class="layui-form-item wflex">
						<label class="wlabel">学分：</label>
						<span>完成课程获得</span>
						<input style="width:80px;margin: 0px 10px;" type="text" min="0" name="credit" lay-verify="required" onkeyup="value=value.replace(/[^0-9]/g,'') " value="{$class.credit}" autocomplete="off" class="layui-input">
						<span>学分</span>
					</div>
					<div class="layui-form-item" style="text-align: center;margin-top: 50px;">
						<!-- <button type="button" class="layui-btn  nexTrain">保存</button> -->
						<input class="layui-btn layui-btn-primary" type="button" lay-submit lay-filter="trainClassAdd"
							id="trainClassAdd" value="保存">
						<button type="button" class="layui-btn cancel">取消</button>
					</div>
				</div>
				<div class="layui-tab-item submit-btn">
					<input type="hidden" name="course_id" id="course_id" value="{$class.course_id}" />
					<button type="button" class="layui-btn" id="course_type">+添加课件</button>
					<div class="morecoursebox">
						<table id="morecoursebox" border="" cellspacing="" cellpadding="">
							{volist name="$course" id="v"}
							<tr>
								<th>{$v.title}</th>
								<th><a class="layui-btn layui-btn-danger szh-del layui-btn-xs" data-cid="{$v.id}"
										lay-event="del"><i class="layui-icon layui-icon-delete"></i>删除</a></th>
							</tr>
							{/volist}
						</table>
					</div>
					<div class="layui-form-item nextprev">
						<input type="hidden" name="id" id="id" value="{$class.id}" />
						<input class="layui-btn layui-btn-primary saveBtn" type="button" lay-submit
							lay-filter="trainClassAdd" id="trainClassAdd" value="保存">
						<button type="button" class="layui-btn cancel">取消</button>
					</div>
				</div>
				<div class="layui-tab-item submit-btn">
					<div class="layui-form-item">
						<label for="title" class="layui-form-label"><!-- <i style="color:red;">*</i>-->字数限制：</label>
						<div class="layui-form-mid layui-word-aux">课程感悟最低不能低于</div>
						<div class="layui-input-inline">
							<input name="sumup_num" class="layui-input" autocomplete="off" value="{$class.sumup_num}"
								onkeyup="value=value.replace(/[^\d]/g,'')">
						</div>
						<div class="layui-form-mid layui-word-aux">个字</div>
					</div>
					<div class="layui-form-item">
						<label for="title" class="layui-form-label">智能评审：</label>
						<div class="layui-input-block">
							<input name="sumup_keyword" class="layui-input" id="sumup_keyword"
								placeholder="请输入多个匹配词，（关键词之间用“|”分隔）" onkeyup="value=value.replace(/\s/g,'')"
								value="{$class.sumup_keyword}" autocomplete="off" style="width: 60%;">
						</div>
					</div>
					<div class="layui-form-item">
						<label for="title" class="layui-form-label"></label>
						<div class="layui-form-mid layui-word-aux">触发</div>
						<div class="layui-input-inline" style="width: 100px;">
							<input name="score_one" class="layui-input" {notempty name="$class.sumup_score.score_one"
								}value="{$class.sumup_score.score_one}" {/notempty} lay-verify="s" autocomplete="off"
								onkeyup="value=value.replace(/\D|^0/g,'')">
						</div>
						<div class="layui-form-mid layui-word-aux">个以上关键词语，自动评审为<span
								style="color: rgb(255 223 37);">S</span></div>
					</div>
					<div class="layui-form-item">
						<label for="title" class="layui-form-label"></label>
						<div class="layui-form-mid layui-word-aux">触发</div>
						<div class="layui-input-inline" style="width: 100px;">
							<input name="score_two" class="layui-input" {notempty name="$class.sumup_score.score_two"
								}value="{$class.sumup_score.score_two}" {/notempty} lay-verify="ss" autocomplete="off"
								onkeyup="value=value.replace(/\D|^0/g,'')">
						</div>
						<div class="layui-form-mid layui-word-aux">个以上关键词语，自动评审为<span
								style="color: rgb(255 223 37);">SS</span></div>
					</div>
					<div class="layui-form-item">
						<label for="title" class="layui-form-label"></label>
						<div class="layui-form-mid layui-word-aux">触发</div>
						<div class="layui-input-inline" style="width: 100px;">
							<input name="score_three" class="layui-input" {notempty
								name="$class.sumup_score.score_three" }value="{$class.sumup_score.score_three}"
								{/notempty} lay-verify="sss" autocomplete="off"
								onkeyup="value=value.replace(/\D|^0/g,'')">
						</div>
						<div class="layui-form-mid layui-word-aux">个以上关键词语，自动评审为<span
								style="color: rgb(255 223 37);">SSS</span></div>
					</div>
					<div class="layui-form-item" style="text-align: center;margin-top: 50px;">
						<!-- <button type="button" class="layui-btn  lasTwoTrain" >上一步</button> -->
						<input class="layui-btn layui-btn-primary saveBtn" type="button" lay-submit
							lay-filter="trainClassAdd" id="trainClassAdd" value="保存">
						<button type="button" class="layui-btn cancel">取消</button>
					</div>
				</div>
			</div>
		</form>
	</div>
</div>


{/block} {block name="js"}
<script>
	layui.config({
		base: '__LAYUI__/',
		urlbase: '/sys'
	}).extend({
		index: 'lib/index' //主入口模块
	}).use(['form', 'index', 'table', 'element', 'upload'], function () {
		var $ = layui.$,
			table = layui.table,
			element = layui.element,
			upload = layui.upload,
			form = layui.form;

		$('#tab-item-1').click(function () {
			$('.layui-titlebox li').removeClass('layui-this');
			$($('.layui-titlebox li')[0]).addClass('layui-this');
			$('.layui-tab-content .layui-tab-item').removeClass('layui-show');
			$($('.layui-tab-content .layui-tab-item')[0]).addClass('layui-show');
			$('.nextprev').hide();
		})
		$('#tab-item-2').click(function () {
			$('.layui-titlebox li').removeClass('layui-this');
			$($('.layui-titlebox li')[1]).addClass('layui-this');
			$('.layui-tab-content .layui-tab-item').removeClass('layui-show');
			$($('.layui-tab-content .layui-tab-item')[1]).addClass('layui-show');
			$('.nextprev').show();
		})
		$('#tab-item-3').click(function () {
			$('.layui-titlebox li').removeClass('layui-this');
			$($('.layui-titlebox li')[2]).addClass('layui-this');
			$('.layui-tab-content .layui-tab-item').removeClass('layui-show');
			$($('.layui-tab-content .layui-tab-item')[2]).addClass('layui-show');
			$('.nextprev').hide();
		})

		$('.nexTrain').click(function () {
			$('.layui-titlebox li').removeClass('layui-this');
			$($('.layui-titlebox li')[1]).addClass('layui-this');
			$('.layui-tab-content .layui-tab-item').removeClass('layui-show');
			$($('.layui-tab-content .layui-tab-item')[1]).addClass('layui-show');
		})
		$('.nexTwoTrain').click(function () {
			$('.layui-titlebox li').removeClass('layui-this');
			$($('.layui-titlebox li')[2]).addClass('layui-this');
			$('.layui-tab-content .layui-tab-item').removeClass('layui-show');
			$($('.layui-tab-content .layui-tab-item')[2]).addClass('layui-show');
		})
		$('.lasOnwTrain').click(function () {
			$('.layui-titlebox li').removeClass('layui-this');
			$($('.layui-titlebox li')[0]).addClass('layui-this');
			$('.layui-tab-content .layui-tab-item').removeClass('layui-show');
			$($('.layui-tab-content .layui-tab-item')[0]).addClass('layui-show');
		})
		$('.lasTwoTrain').click(function () {
			$('.layui-titlebox li').removeClass('layui-this');
			$($('.layui-titlebox li')[1]).addClass('layui-this');
			$('.layui-tab-content .layui-tab-item').removeClass('layui-show');
			$($('.layui-tab-content .layui-tab-item')[1]).addClass('layui-show');
		})
		$('.cancel').click(function () {
			var index = parent.layer.getFrameIndex(window.name);
			parent.layer.close(index);
		})

		function size(value) {
			var value = value.replace(/[^\d]/g, '');
			if ('' != value) {
				value = parseInt(value);
			}
			return value;
		}
		$('#course_type').click(function () {
			var checkVal = $("#course_id").val();
			layer.open({
				type: 2,
				title: '课件列表',
				content: '{:url("train/class_choice_course")}?course_id=' + checkVal,
				area: ['90%', '90%'],
				btn: ['确定', '取消'],
				yes: function (index, layero) {
					//点击确认触发 iframe 内容中的按钮提交
					var obj = JSON.parse(layero.find('iframe').contents().find("#hiddentext").val());
					var str = "";
					var arr = $("#course_id").val() ? $("#course_id").val().split(',') : [];
					for (var i in obj) {
						arr.push(i);
						str += '<tr>' +
							'<th>' + obj[i] + '</th>' +
							'<th><a class="layui-btn layui-btn-danger szh-del layui-btn-xs" data-cid="' + i + '" lay-event="del"><i class="layui-icon layui-icon-delete"></i>删除</a></th>' +
							'</tr>';

					}
					$("#course_id").val(arr.join(','));
					$('.morecoursebox table').append(str)
					layer.close(index);

					$('.szh-del').click(function () {
						var arr = $("#course_id").val().split(',');
						for (var i in arr) {
							if (arr[i] == $(this).data("cid")) {
								arr.splice(i, 1)
							}
						}
						$("#course_id").val(arr.join(','));
						$(this).parents('tr').remove();
						console.log($("#course_id").val())
					})

				}
			});
		})
		$('.szh-del').click(function () {
			var arr = $("#course_id").val().split(',');
			for (var i in arr) {
				if (arr[i] == $(this).data("cid")) {
					arr.splice(i, 1)
				}
			}
			$("#course_id").val(arr.join(','));
			$(this).parents('tr').remove();
		})
		//拖拽上传
		upload.render({
			elem: '#upload-drag',
			accept: 'image',
			exts: 'png|jpg|ico|jpeg|bmp',
			auto: false,
			field: 'cover',
			size: 3 * 1024,
			choose: function (obj) {
				obj.preview(function (index, file, result) {
					$('#upload-drag').html('<img src="' + result + '" style="height: 100%;width:100%;">');
				});
			}
		});

		//检测关键词个数和触发设置是否匹配
		function check(value) {
			var newkey = $("#sumup_keyword").val().replace(/^\||\|$/g, '').split('|');
			var newkey = $.grep(newkey, function (n) {
				return $.trim(n).length > 0;
			});
			var keyNum = newkey.length;
			return value > keyNum ? true : false;
		}

		form.verify({
			s: function (value) {
				var status = check(value);
				if (status == true) {
					return '触发关键词个数超出输入的关键词个数';
				}
			}
			, ss: function (value) {
				var status = check(value);
				if (status == true) {
					return '触发关键词个数超出输入的关键词个数';
				}
			}
			, sss: function (value) {
				var status = check(value);
				if (status == true) {
					return '触发关键词个数超出输入的关键词个数';
				}
			}
		});

		form.on('submit(trainClassAdd)', function (data) {
			layer.confirm('提示：关联的课件如有增或删，课程统计数据会重新计算！', function () {
				var index = parent.layer.getFrameIndex(window.name);
				var formData = new FormData(data.form);
				var load = layer.load(1, { shade: [0.5, '#fff'] });
				$.ajax({
					url: "{:url('train/classEditSave')}",
					type: 'post',
					data: formData,
					dataType: 'json',
					processData: false,
					contentType: false,
					success: function (res) {
						if (res.code == 0) {
							layer.msg(res.msg, {
								icon: 1,
								time: 1000
							}, function () {
								parent.layui.table.reload('datalist');
								parent.layer.close(index);
							});
						} else {
							layer.close(load);
							layer.msg(res.msg, { time: 1000 });
						}
					}
				});
				return false;
			});
		});
		/////////添加分类
		$('#cate-add').on('click', function () {
			var typeLabel = $('#label');
            typeLabel.empty().append('<option value="">请选择标签</option>');
			addcate();
		});
		var addcate = function () {
        	layer.prompt({
				title: ['分类添加', 'color:#333333;background-color:#D8E6F1;'],
			}, function(value, index, elem) {
				var value = $.trim(value);
				if(value == '') {
					layer.msg('请输入分类名称', {anim: 6});
					return false;
				}
				if(value.length > 6) {
					layer.msg('分类名称超长', {anim: 6});
					return false;
				}
				$.post('{:url("train/class_cate_add")}', {
					'name': value
				}, function(res) {
					if(res.code == 0) {
						$('#type').append("<option selected value='"+value+"' id='"+res.id+"'>"+value+"</option>")
						form.render('select'); 
						layer.msg(res.msg, {
							anim: 0,time:1000
						}, function() {
							layer.close(index); //再执行关闭
						});
					} else {
						layer.msg(res.msg, {
							anim: 6,time:1000
						});
					}
				});
			});
		}

		//监听分类变化
		form.on('select(type)', function (data) {
			var typeLabel = $('#label');
            typeLabel.empty().append('<option value="">请选择标签</option>');

			var name = data.value;

			$.ajax({
				url: "{:url('train/get_label')}",
				type: 'post',
				data: {name:name},
				dataType: 'json',
				success: function (res) {
					if (res.code == 0) {
						for (r in res.data) {
							var arr = res.data[r];
							typeLabel.append('<option value=' + arr.name + '>' + arr.name + '</option>');
						}
						form.render();
					}
				}
			});
        });

        //添加分类下的标签
        $('#addLabel').click(function(){

			var checktTypeId = $("#type").find("option:selected").attr("id");

			if(checktTypeId == '' || checktTypeId == undefined){
				layer.msg('请先选择归属分类', {anim: 6});
				return false;
			}

			layer.prompt({
				title: ['添加标签', 'color:#333333;background-color:#D8E6F1;'],
			}, function(value, index, elem) {
				var value = $.trim(value);
				if(value == '') {
					layer.msg('请输入标签名称', {anim: 6});
					return false;
				}
				if(value.length > 5) {
					layer.msg('标签名称超长', {anim: 6});
					return false;
				}
				$.post('{:url("train/class_label_add_ajax")}', {
					name: value , pid: checktTypeId
				}, function(res) {
					if(res.code == 0) {
						$('#label').append("<option selected value='"+value+"'>"+value+"</option>")
						form.render(); 
						layer.msg(res.msg, {
							anim: 0
						}, function() {
							layer.close(index); //再执行关闭
						});
					} else {
						layer.msg(res.msg, {
							anim: 6
						});
					}
				});
			});
		});
	});
</script>
{/block}