crm/app/sys/view/train/course_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;
		padding: 15px 30px;
		background-color: #ffffff;
	}
	
	.layui-tab {
		padding: 15px;
		height: 100%;
	}

	.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;
	}
	.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: 50%;
	    text-align: center;
	    cursor: pointer;
	    box-sizing: border-box;
	}
	.layui-titlebox .layui-this {
	    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;
	}
	.saveBtn,.cancel,.cancel:hover,.saveBtn:hover {
		background-color: #fff;
		color: #249EFB;
		border: 1px solid #249EFB;
	}
	.layui-icon-add-circle::before {
		font-size: 30px;
	}
	.layui-border-btn,.layui-border-btn:hover {
		border: 1px solid #249EFB;
		background-color: #fff;
		color: #249EFB;
	}
	.layui-tab-content {
		padding-top: 20px;
	}
	.plr20{
		padding: 0px 20px;
	}
	.layui-form-radio>i {
		font-size: 18px;
	}
	.uploadbtnhide{
		display: none;
	}
	.uploadbtnshow{
		display: inline-block;
	}
	.imageDivs{position: absolute;top:0;left:0;width:100%;height: 100%;background: rgba(230,230,230,.5);display: none;}
	.imageDivs i{display: block;width:18px;height: 18px;position: absolute;top:0;left:0;bottom:0;right: 0;margin:auto;}
	.layui-upload-drag{padding:18px 44px}
	.layui-upload-drag i{font-size: 58px;}
	.layui-table img{max-width: 100% !important;}
	#upload-drag12{width: 100%;}
	.isimgupload{margin-right: 0 !important;}
	#upload-drag {
		width: 190px;
		height: 140px;
	}
</style>
<div class="layui-fluid">
	<div class="layui-table">
		<ul class="layui-titlebox">
		    <li class="layui-this">基础信息</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">
						<label for="title" class="layui-form-label"><i style="color:red;">*</i>课件名称：</label>
						<div class="layui-input-block">
							<input name="title" id="title" style="max-width: 500px;" class="layui-input" required placeholder="请输入课件名称">
						</div>
					</div>
					<div class="layui-form-item">
						<label for="type" class="layui-form-label"><i style="color:red;">*</i>课件场景：</label>
						<div class="layui-input-inline" style="display: flex; align-items: center;">
							<select id="type" name="type_id">
								<option value="">请选择类型</option>
								{volist name="type" id="i"}
								<option value="{$i.id}">{$i.type}</option>
								{/volist}
							</select>
							<!-- <i class="layui-icon layui-icon-add-circle adding" style="margin-left:10px;margin-top: 1px;" id="addtype"></i> -->
						</div>
					</div>
					<div class="layui-form-item">
						<label class="layui-form-label"><i style="color:red;">*</i>课件分类：</label>
						<div class="layui-input-block">
							<input type="radio" name="type" value="video" title="视频课程" lay-filter="type" checked/>
							<input type="radio" name="type" value="image" title="图文课程" lay-filter="type" />
							<input type="radio" name="type" value="audio" title="音频课程" lay-filter="type" />
                            <input type="radio" name="type" value="pdf" title="pdf课程" lay-filter="type" />
						</div>
					</div>
					<div class="layui-form-item layui-hide">
						<label class="layui-form-label">视频</label>
						<div class="layui-input-inline" style="width: 290px;">
							<input type="radio" name="myradio" value="random_name" checked=true/> 上传文件名字是随机文件名, 后缀保留
						</div>
					</div>
					<div class="layui-form-item videoImg">
						<label class="layui-form-label">视频封面图</label>
						<div class="layui-input-inline isimgupload" style="position: relative;width:190px;height: 114px;overflow: hidden;">
							<div class="" id="upload-drag12">
								<div class="layui-upload-drag">
									<i class="layui-icon">&#xe681;</i>
									<p style="width: 100px;">上传图片</p>
								</div>
							</div>
							<div class="imageDivs"><i class="layui-icon layui-icon-delete" prop="del"></i></div>
						</div>
					</div>
					<div class="layui-form-item videoTips">
						<label class="layui-form-label"></label>
						<div><i style="color:red;margin-right:5px;">*</i>建议上传图片宽高比例5:3，图片大小不超过1M</div>
					</div>
					<div class="layui-form-item video">
						<label class="layui-form-label"><i style="color:red;">*</i>上传</label>
						<div class="layui-input-inline" style="width: 290px;display: block;" id="container">
							<!-- <a class="layui-btn btn layui-border-btn" id="selectfiles" href="javascript:void(0);">选择视频</a> -->

							<a class="trainuploadbtn layui-btn btn layui-border-btn uploadbtnhide  uploadbtnshow" id="selectfiles" href="javascript:void(0);">选择视频</a>
							<!-- <a class="trainuploadbtn layui-btn btn layui-border-btn uploadbtnhide " id="selectfiles1" href="javascript:void(0);">选择视频</a> -->
							<a class="trainuploadbtn layui-btn btn layui-border-btn uploadbtnhide" id="selectfiles2" href="javascript:void(0);">选择音频</a>
							<a class="trainuploadbtn layui-btn btn layui-border-btn uploadbtnhide" id="selectfiles3" href="javascript:void(0);">选择pdf</a>

							<a class="layui-btn btn layui-border-btn" id="postfiles" href="javascript:void(0);">开始上传</a>
							<a class="layui-btn btn layui-border-btn" style="display:none;" id="postfiles1" href="javascript:void(0);">开始上传</a>
							<a class="layui-btn btn layui-border-btn" style="display:none;" id="postfiles2" href="javascript:void(0);">开始上传</a>
							<a class="layui-btn btn layui-border-btn" style="display:none;" id="postfiles3" href="javascript:void(0);">开始上传</a>
							<div id="ossfile"></div>
							<div id="symbshowed"></div>
							<!--报错信息返回展示-->
							<pre id="console"></pre>
							<input type="hidden" value="" id="fileuri">
							<!--上传到OSS哪个文件下，在这里定义-->
							<input type="hidden" value="Trainimage" id="category_name">
							<input type="hidden" value="Trainvideo" id="category_name1">
							<input type="hidden" value="Trainaudio" id="category_name2">
							<input type="hidden" value="Trainpdf" id="category_name3">
						</div>
					</div>
					<div class="layui-form-item videolimit">
						<label class="layui-form-label"></label>
						<div><i style="color:red;margin-right:5px;">*</i><span id="limitVA">上传视频大小不超过280M</span></div>
					</div>
					<div class="layui-form-item images layui-hide">
						<label class="layui-form-label"><i style="color:red;">*</i>上传图片</label>
						<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 class="layui-form-item tipsds layui-hide">
						<label 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="content" class="layui-form-label"><i id="contentrequire" style="color:red;">*</i>内容：</label>
						<div class="layui-input-block">
							<!-- <textarea name="content" id="content" cols="50" rows="20" required></textarea> -->
							<textarea id='content' name='content' cols="50" rows="20" required style="height: 350px;"></textarea >
						</div>
					</div>
					<div class="layui-form-item" style="text-align: center;margin-top: 50px;">
			            <button type="button" class="layui-btn  nexTrain plr20">下一步</button>
			            <button type="button" class="layui-btn cancel plr20">取消</button>
			       </div>
		        </div>
		    	<div class="layui-tab-item">
		    		<div class="layui-form-item">
						学习时长限制
					</div>
					<div class="layui-form-item">
						<input type="radio" name="time_check" value="1" title="开启" checked>
      					<input type="radio" name="time_check" value="0" title="关闭" >
					</div>
		    		<div class="layui-form-item">
						<div class="layui-form-mid layui-word-aux">当员工在页面学习</div>
						<div class="layui-input-inline">
							<input name="study_time" class="layui-input" value="1" autocomplete="off" onkeyup="value=value.replace(/\D|^0/g,'')">
						</div>
						<div class="layui-form-mid layui-word-aux">分钟后，课件学习完毕。</div>
					</div>
					<div class="layui-form-item">
						评论字数限制
					</div>
					<div class="layui-form-item">
						<input type="radio" name="word_check" value="1" title="开启">
						<input type="radio" name="word_check" value="0" title="关闭" checked>
					</div>
		    		<div class="layui-form-item">
						<div class="layui-form-mid layui-word-aux">当员工评论内容大于</div>
						<div class="layui-input-inline">
							<input name="comment_word_num" class="layui-input" value="10" autocomplete="off" onkeyup="value=value.replace(/\D|^0/g,'')">
						</div>
						<div class="layui-form-mid layui-word-aux">字后，课件学习完毕。</div>
					</div>
					<div class="layui-form-item" style="text-align: center;margin-top: 80px;">
			    		<button type="button" class="layui-btn lasTrain plr20" >上一步</button>
			    		<input class="layui-btn layui-btn-primary saveBtn plr20" type="button" lay-submit lay-filter="Add" id="Add" value="保存">
			    	</div>
		    	</div>
			</div>   
		</form>
	</div>
</div>
{/block} {block name="js"}
<!-- 配置文件 -->
<script type="text/javascript" src="__STATIC__/ueditor/dist/utf8-php/ueditor.config.js"></script>
<!-- 编辑器源码文件 -->
<script type="text/javascript" src="__STATIC__/ueditor/dist/utf8-php/ueditor.all.js"></script>
<!-- 实例化编辑器 -->
<script type="text/javascript">
	var ue = UE.getEditor('content');
</script>
<script type="text/javascript" src="__STATIC__/js/plupload/js/plupload.full.min.js"></script>
<script type="text/javascript" src="__STATIC__/js/plupload/ossupload.js"></script>
<script>
	layui.config({
		base: '__LAYUI__/',
		urlbase: '/sys'
	}).extend({
		index: 'lib/index'
	}).use(['index', 'table', 'layedit', 'element', 'upload'], function() {
		var $ = layui.$,
			table = layui.table,
			element = layui.element,
			form = layui.form,
			upload = layui.upload,
			layedit = layui.layedit;
		
		$('.nexTrain').click(function(){
			let title = $('#title')[0].value;
			if (title.length>16) {
				layer.msg('课件名称限制十六个汉字以内');
				return false;
			}
			var type = $("input[name='type']:checked").val();
			var textarea = ue.getContent();
			let img = $('#upload-drag')[0].children;
			let vaData = $('#fileuri').val();
			if (!title) {
				layer.msg('课件名称必填');
				return;
			} else if (!textarea && type != 'pdf') {
				layer.msg('内容必填');
				return;
			} else if ((type == 'video' || type == 'audio') && !vaData) {
				let info = (type == 'video') ? '请选择视频' : '请选择音频'
				layer.msg(info);
				return;
			} else if (type == 'pdf' && !vaData) {
				layer.msg('请选择pdf文件');
				return;
			} else if (!(img && img[0].localName == 'img') && type == 'image') {
				layer.msg('请上传图片');
				return;
			}
			var ret = /^[ ]+$/;
			if (ret.test(title)) {
				layer.msg('课件名称不能为空');
				return false;
			}
			var check = textarea.replace(/&nbsp;/gi, "");
			var ret = /^[ ]+$/;
			if (ret.test(check)) {
				layer.msg('内容必填');
				return false;
			}
			$('.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');
		})
		$('.lasTrain').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');
		})
		$('.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;
		}
				
		// layedit.set({
		// 	//暴露layupload参数设置接口 --详细查看layupload参数说明
		// 	uploadImage: {
		// 		url: '{:url("train/fileupload")}',
		// 		accept: 'image',
		// 		acceptMime: 'image/*',
		// 		exts: 'jpg|png|gif|bmp|jpeg',
		// 		size: '10240'
		// 	},
		// 	calldel: {
		// 		url: '{:url("train/filedelete")}'
		// 	},
		// 	devmode: true,
		// 	codeConfig: {
		// 		hide: true, //是否显示编码语言选择框
		// 		default: 'javascript' //hide为true时的默认语言格式
		// 	},
		// 	tool: [
		//         'html', 'code', 'strong', 'italic', 'underline', 'del', 'addhr', '|', 'fontFomatt', 'colorpicker', 'face'
		//         , '|', 'left', 'center', 'right', '|', 'link', 'unlink', 'image_alt', 'video', 'anchors','image'
		//         , '|', 'fullScreen'
		//     ],
		// 	height: '80%'
		// });
		// var ieditor = layedit.build('content');

		form.on('submit(Add)', function (data) {
            var type = $("input[name='type']:checked").val();
            var index = parent.layer.getFrameIndex(window.name);
            var formData = new FormData(data.form);
			if($("#upload-drag12:has(img.fmimages)").length<1){
				 formData.delete('video_img');
			}
            if (type == 'audio') {
            	formData.append('file_audio',$('#fileuri').val());
            } else if(type == 'video') {
            	formData.append('file_video',$('#fileuri').val());
            } else if (type == 'pdf') {
                formData.append('file_pdf',$('#fileuri').val());
            }
            ue.ready(function () {
				formData.append('content', ue.getContent());
			});
            //formData.set('content', layedit.getContent(ieditor));
            var load = layer.load(1, {shade: [0.5, '#fff']});
            $.ajax({
                url: '{:url("train/courseAddSave")}',
                data: formData,
                type: 'post',
                dataType: 'json',
                processData: false,
                contentType: false,
                success: function (res) {
                    if (res.code == 0) {
                        layer.msg('添加成功', {
                            icon: 1,
                            time: 1000
                        },function(){
                            parent.layui.table.reload('datalist');
                            parent.layer.close(index);
                        });
                    } else {
                        layer.close(load);
                        layer.msg(res.msg);
                    }
                }
				
            });
        });
        
		//课件场景添加
		$('#addtype').click(function() {
			layer.prompt({
				formType: 0,
				value: '',
				title: ['请输入场景', 'color:#333333;background-color:#D8E6F1;'],
				area: ['800px', '350px']
			}, function(value, index, elem) {
				$.ajax({
					url: '{:url("train/add_train_type")}',
					data: {
						type: value
					},
					type: 'post',
					success: function(res) {
						$('#type').append('<option value="' + res.data.id + '">' + value + '</option>');
						form.render();
						layer.msg(res.msg, {
							anim: 0
						}, function() {
							layer.close(index); //再执行关闭
						});
					}
				});
			});
		});


		form.on('radio(type)', function(data) {
            // $('#fileuri').val('');//切换后清空地址
            // $('#ossfile').children().remove();//切换后清空地址
            // $('#symbshowed').children().remove();//切换后清空地址
            $('#contentrequire').removeClass('layui-hide');
			if(data.value == 'video') {
				$('.video').removeClass('layui-hide');
				$('.videoImg').removeClass('layui-hide');
				$('.videolimit').removeClass('layui-hide');
				$('.videoTips').removeClass('layui-hide');
				$('.images').addClass('layui-hide');
				$('.tipsds').addClass('layui-hide')
				$('#selectfiles').html('选择视频');
				$('#limitVA').html('上传视频大小不超过280M');
				$('.trainuploadbtn')[0].style.display = "inline-block";
				$('.trainuploadbtn')[1].style.display = "none";
				$('.trainuploadbtn')[2].style.display = "none";
				$("#postfiles").show();
				$("#postfiles1").hide();
				$("#postfiles2").hide();
				$("#postfiles3").hide();
			} else if (data.value=='audio') {
				$('.video').removeClass('layui-hide');
				$('.videolimit').removeClass('layui-hide');
				$('.images').addClass('layui-hide');
				$('.tipsds').addClass('layui-hide');
				$('.videoImg').addClass('layui-hide');
				$('.videoTips').addClass('layui-hide');
				$('#selectfiles').html('选择音频');
				$('#limitVA').html('上传音频大小不超过280M');
				$('.trainuploadbtn')[0].style.display = "none";
				$('.trainuploadbtn')[1].style.display = "inline-block";
				$('.trainuploadbtn')[2].style.display = "none";

				$("#postfiles").hide();
				$("#postfiles1").hide();
				$("#postfiles2").show();
				$("#postfiles3").hide();
			} else if (data.value=='pdf') {
				$('.video').removeClass('layui-hide');
				$('.videolimit').removeClass('layui-hide');
				$('.images').addClass('layui-hide');
				$('.tipsds').addClass('layui-hide');
				$('.videoImg').addClass('layui-hide');
				$('.videoTips').addClass('layui-hide');
				$('#selectfiles').html('选择pdf');
				$('#limitVA').html('上传pdf文件大小不超过280M');
        		$('#contentrequire').addClass('layui-hide');
				$('.trainuploadbtn')[0].style.display = "none";
				$('.trainuploadbtn')[1].style.display = "none";
				$('.trainuploadbtn')[2].style.display = "inline-block";
				$("#postfiles").hide();
				$("#postfiles1").hide();
				$("#postfiles2").hide();
				$("#postfiles3").show();
      } else {
				$('.images').removeClass('layui-hide');
				$('.tipsds').removeClass('layui-hide');
				$('.video').addClass('layui-hide');
				$('.videoImg').addClass('layui-hide');
				$('.videoTips').addClass('layui-hide');
				$('.videolimit').addClass('layui-hide');
				$('.trainuploadbtn')[0].style.display = "none";
				$('.trainuploadbtn')[1].style.display = "none";
				$('.trainuploadbtn')[2].style.display = "none";

				$("#postfiles").hide();
				$("#postfiles1").show();
				$("#postfiles2").hide();
				$("#postfiles3").hide();
			}
		});
		
		//拖拽上传
		upload.render({
			elem: '#upload-drag',
			accept: 'image',
			exts: 'png|jpg|jpeg',
			auto: false,
			field: 'file_image',
			size: 3 * 1024,
			choose: function(obj) {
				obj.preview(function(index, file, result) {
					$('#upload-drag').html('<img src="' + result + '" style="height: 100%;width:100%;">');
				});
			}
		});
		//拖拽上传
		upload.render({
			elem: '#upload-drag12',
			accept: 'image',
			exts: 'png|jpg|jpeg',
			auto: false,
			field: 'video_img',
			size: 3 * 1024,
			choose: function(obj) {
				obj.preview(function(index, file, result) {
					$('#upload-drag12').html('<img class="fmimages" src="' + result + '" style="width:100%;">');
				});
			}
		});
		
		$('.isimgupload').hover(function(){
			if($("#upload-drag12:has(img.fmimages)").length>0){
				$('.imageDivs').show();
			}
		},function(){
			$('.imageDivs').hide(); 
		})
		
		$('.imageDivs').on('click', function(e) {
		    var that = this;
			layer.confirm('确定删除该图片么？',{title: ['信息', 'color:#333333;background-color:#D8E6F1;'],}, function(index) {
		           var imgDiv = $('#upload-drag12').find('img');
		           imgDiv.remove();
				   $('#upload-drag12').html('<div class="layui-upload-drag"><i class="layui-icon">&#xe681;</i><p style="width: 100px;">上传图片</p></div>');
		           layer.close(index);
		    });
		});
	});
</script>
{/block}