crm/app/adminall/view/train/class_add.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 .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-form-radio>i {
		font-size: 18px;
	}
	.plr20{
		padding: 0px 20px;
	}
	.layui-tab-content {
		padding-top: 20px;
	}
	.wflex {
		display: flex;
		align-items: center;
		box-sizing: border-box;
	}
	.wlabel {
		width: 110px;
		box-sizing: border-box;
		padding: 9px 15px;
		text-align: right;
	}
	.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;}
</style>
<div class="layui-fluid">
	<div class="layui-table">
		<ul class="layui-titlebox">
		    <li class="layui-this">基础信息</li>
		    <li>设置课件</li>
		    <li>智能观后感</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="" 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}">{$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-inline" style="margin-right: 0px;">
							<label class="layui-form-label">讲师：</label>
							<div class="layui-input-inline">
								<select name="lecturer_id" lay-filter="type" id="type_id">
									<option value="">请选择类型</option>
									{volist name="lecturer" id="i"}
									<option value="{$i.id}">{$i.name}</option>
									{/volist}
								</select>
							</div>
						</div>
						<div class="layui-form-item col-md5" style="margin-top: 10px;">
							<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">
									<div class="layui-upload-drag">
										<i class="layui-icon">&#xe681;</i>
										<p>获取图片</p>
									</div>
								</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>建议上传图片宽高比例5:3，图片大小不超过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"></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"/>
								<input type="radio" name="type" value="free" title="自由学习" lay-filter="type" checked/>
							</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" />
								<input type="radio" name="category" value="elective" title="选修" lay-filter="type" checked/>
							</div>
						</div>
						<div class="layui-form-item" style="text-align: center;margin-top: 50px;">
			            <button type="button" class="layui-btn plr20 nexTrain">下一步</button>
			            <button type="button" class="layui-btn plr20 cancel">取消</button>
			       </div>
			  </div>
			  <div class="layui-tab-item submit-btn">
			    	<input type="hidden" name="course_id" id="course_id"  />
			    	<button type="button" class="layui-btn" id="course_type">+添加课件</button>
			    	<div class="morecoursebox">
			    		<table id="morecoursebox" border="" cellspacing="" cellpadding="">
			    			
			    		</table>
			    	</div>
					<div class="layui-form-item nextprev">
						<button type="button" class="layui-btn plr20 lasOnwTrain" >上一步</button>
						<button type="button" class="layui-btn plr20 nexTwoTrain" >下一步</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" 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,'')" 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" value="" 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" value="" 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" value="" 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 plr20 lasTwoTrain" >上一步</button>
			    		<input class="layui-btn layui-btn-primary plr20 saveBtn" type="button" lay-submit lay-filter="trainClassAdd" id="trainClassAdd" value="保存">
			    	 </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;
		
		for(let i=0;i< $('.layui-titlebox li').length;i++){
			$('.layui-titlebox li')[i].index=i;
			$($('.layui-titlebox li')[i]).click(function () {
				let index=this.index;

				$('.layui-titlebox li').removeClass('layui-this');
				$(this).addClass('layui-this');

				if(index==0){
					$('.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();
				}else if(index==1){
					$('.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();
				}else{
					$('.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');
				}
			})
		}
		
		$('.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');
			$('.nextprev').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');
			$('.nextprev').hide();
		})
		$('.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: ['课件列表', 'color:#333333;background-color:#D8E6F1;'],
				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() ? $("#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())
					})

				}
			});
		})

		//拖拽上传
		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) {
			let title = $('#title')[0].value;
			if (title.length > 16) {
				layer.msg('课程名称限制十六个汉字以内');
				return false;
			}
			let img = $('#upload-drag')[0].children;
			let textarea = $('.layui-textarea')[0].value;
			let cate = $('#type').val();

			if (!title) {
				layer.msg('课程名称必填');
				return;
			} else if (cate == '') {
				layer.msg('请选择分类');
				return;
			} else if (!(img && img[0].localName == 'img')) {
				layer.msg('请上传封面');
				return;
			}

			let tbodys = $('tbody');
			if ((tbodys.length == 0) || (tbodys.length > 0 && tbodys[0].children.length == 0)) {
				layer.msg('请添加课件');
				return;
			}


			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/classAddSave')}",
				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(); 
						layer.msg(res.msg, {
							anim: 0,time:1000
						}, function() {
							layer.close(index); //再执行关闭
						});
					} else {
						layer.msg(res.msg, {
							anim: 6,time:1000
						});
					}
				});
			});
			form.render();
		}

		//监听分类变化
        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 + '  id=' + arr.id + '>' + arr.name + '</option>');
						}
						form.render();
					}
				}
			});
        });

        //添加分类下的标签
        $('#addLabel').click(function(){
        	var checktTypeId = $("#type").find("option:selected").attr("id");

			console.log(checktTypeId)
			
        	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}