crm/app/sys/view/construction/update_step.html

{extend name="public/layout"/} {block name="title"}在施工地{/block} {block name="body"}
<style>
 html{background:#fff;height: 100%;}
.mdt30{margin-top:30px;}
.mdt20{margin-top:20px;}
.ids{display:inline-block;}
.mdlr10{margin:0 10px;}
.layui-input-block input,.layui-upload-drag,.sjsselect,.layui-input:hover, .layui-textarea:hover,.layui-textarea{border:1px solid #333 !important;}
.layui-form-label,.input::placeholder,input::-webkit-input-placeholder{color:#333;}
.sjsselect{width:100%;height:38px;}
.layui-form-box{width:94%;margin:0 auto;display: block;}
.layuiSubmit{margin-left:110px;padding:0 30px !important;display: block;}
.layui-upload-drag{height: 32px;padding: 30px 18px;line-height: 32px;}
.layui-input:focus,.layui-textarea:focus{border:1px solid #333 !important;}
.imglistbtn .addImages,.imglistbtn .imageDiv{width:100px;height: 100px;border:1px dashed #ccc;position:relative;}
.imglistbtn .imageDiv{float:left;margin:0 10px 10px 0;overflow: hidden;}
.imglistbtn .addImages{margin-right: 0;}
.imglistbtn .text-detail p{text-align: center;line-height: 100px;width:100%;}
.imgDivico{position: absolute;top:0;left:0;right:0;bottom:0;margin: auto;height: 17px;width:100%;text-align: center;}
body{padding-bottom: 40px;}
.vrdelbtn {height: 38px;float: left;line-height: 38px;position: relative;margin-left:10px;cursor: pointer;font-size: 32px;width:25px}
.lanse {color: #28A1FF;}
.width50_{width:50%}
.width100_{width:100%;}
.height{height:100%;}
.mdb20{margin-bottom: 20px;;}
.wpsa{position: absolute;}
.wpsauto{top:0;left:0;bottom:0;right:0;margin:auto;}
.ds{display: block;}
.wleft{float:left;}
.woverflow{overflow: hidden;}
.isshow{display: none;}
#upload-drag{width:100%;}
.isimgupload{width:190px !important;height: 114px;margin-right:0 !important;}
	.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;}
</style>

<!--  -->
<form class="layui-form layui-form-box">
	<input type="hidden" name="construction_id" value="{$construction_id}">
	<input type="hidden" name="id" value="{$id}">
	<input id="category_name" type="hidden" value="Construction"/>
    <div class="layui-form-item col-md5 mdt20">
        <label class="layui-form-label">施工阶段：</label>
        <div class="layui-input-block" style="max-width: 30%;">
            <select name="step_id" lay-verify="step_id" lay-filter="step_id" id="step_id" class="sjsselect">
                <option value=0>请选择一个施工阶段</option>
                {volist name='step' id='vo'}
                <option value="{$vo.id}">{$vo.name}</option>
                {/volist}
            </select>  
        </div>
    </div>
	
	
	<div class="layui-form-item woverflow mdt20">
		<label class="layui-form-label"><i style="color:red;">*</i> 上传类型：</label>
		<div class="layui-input-block lh45 mdl20" style="max-width: 370px !important;">
			<input type="radio" id="1" class="radio_input" lay-filter="types" name="type" value="img" title="图片" checked>
			<input type="radio" id="2" class="radio_input" lay-filter="types" name="type" value="vr" title="VR链接">
			<input type="radio" id="3" class="radio_input" lay-filter="types" name="type" value="video" title="视频">
			<input type="radio" id="4" class="radio_input" lay-filter="types" name="type" value="groupVr" title="VR作品">
		</div>
	</div>
	
<div class="">	
	<div class="layui-form-item col-md5 mdt20 isshow" style="display: block;">
	    <label for="title" class="layui-form-label">上传：</label>
	    <div class="imgs">
	        <div class="layui-input-block imglistbtn picDiv" id="imgs">
				{volist name='data.img' id='vo'}
				<div class="imageDiv">
					<img style="width:100%;height:100%" class="layui-upload-img" src="{$vo}" alt="">
					<div class="imgDivico"><i class="layui-icon layui-icon-delete" prop="del"></i> <i class="layui-icon layui-icon-search" prop="view" data-image="{$vo}" style="margin-left:25px;"></i></div>
                    <input type="hidden" name="image_exist[]" value="{$vo}" />
				</div>
				{/volist}
                <div class="layui-input-inline addImages" id="img">
                    <div class="text-detail" style="width:100%;">
						<p>上传图片/多图</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
	<div class="layui-form-item col-md5 mdt20 isshow">
		<div class="">
			<label class="layui-form-label"><i style="color:red;">*</i> VR链接：</label>
			<div class="wleft width50_ vrurllist">
			</div>
		</div>
	</div>
	<div class="layui-form-item col-md5 mdt20 isshow">
		<div class="layui-form-item woverflow">
			<label class="layui-form-label">视频封面图:</label>
			<div class="layui-input-inline isimgupload" style="position: relative;">
				<div class="" id="upload-drag">
					 {if condition='$data.video_cover'}
					 <img class="fmimages" src="{$data.video_cover}" alt="" style="height: 100%;width:100%;">
					{else/}
						<div class="layui-upload-drag" style="position: relative;border: 1px dashed #e2e2e2 !important;background-color: #fff;text-align: center;cursor: pointer;color: #999;height: auto;line-height:1;padding: 21px 66px !important;max-width: 190px;max-height: 114px;">
							<i class="layui-icon" style="font-size: 56px;">&#xe681;</i>
							<p>上传图片</p>
						</div>
					{/if}
				</div>
				<div class="imageDivs"><i class="layui-icon layui-icon-delete" prop="del"></i></div>
			</div>
			
			<div class="layui-form-item woverflow">
				<label class="layui-form-label"></label>
				<div style="margin-top:10px;"><i style="color:red;margin-right: 5px;">*</i><span>注：不支持拖拽文件 宽：高=5：3</span></div>
			</div>
		</div>
		<label class="layui-form-label"><span style="color: red;">*</span>视频</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="layui-btn btn layui-border-btn" id="postfiles" href="javascript:void(0);">开始上传</a>
			<div id="ossfile"></div>
			<div id="symbshowed">
				{if condition="$data.video"}
				<video width="320" height="240" src="{$data.video}" controls="" style="background-color: #000;margin-top:15px;" name="media"><source src="{$data.video}" type="video/mp4"></video>
				{/if}
			</div>
			<div class="layui-form-mid layui-word-aux" style="color: red!important;margin-left:10px;">注：选择视频并上传，限制100M内</div>
			<!--报错信息返回展示-->
			<pre id="console"></pre>
			<input type="hidden" value="{$data.video}" id="fileuri">
			<!--上传到OSS哪个文件下，在这里定义 -->
			<input type="hidden" value="dailyWechatArticle" id="wechat_label_name">
		</div>
	</div>
	<div class="layui-form-item col-md5 mdt20 isshow">
		<label class="layui-form-label">VR作品</label>
		<div class="layui-input-inline" style="width: 400px;display: block;">
			<a class="layui-btn btn layui-border-btn" style="margin-top: 5px;" id="selectVRCreate" href="javascript:void(0);">选择VR作品</a>
			<span id="vrWorks"></span>
		</div>
	</div>
</div>	
    <div class="layui-form-item layui-form-text col-md5 mdt20">
        <label class="layui-form-label">阶段描述：</label>
        <div class="layui-input-block">
          <textarea name="content" placeholder="请输入内容" class="layui-textarea" style="max-width:90%;min-height: 160px;">{$data.content}</textarea>
        </div>
    </div>
	<input type="hidden" value="{$data.video_cover}" name="video_cover">
	<input type="hidden" value="" name='vr' id="vrlists">
    <button type="button" class="layui-btn mdt20 layui-btn-normal layuiSubmit" lay-submit lay-filter="layuiadmin-zsgd-submit" id="layuiadmin-zsgd-submit">保存</button>
</form>
<!--  -->

{/block} {block name="js"}
<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 type="text/javascript" src="__STATIC__/js/Sortable.js"></script>
<script>
    layui.config({
    base: '__LAYUI__/',
    urlbase: '/sys'
}).extend({
    index: 'lib/index' //主入口模块
}).use(['index', 'form','laydate','upload','element'], function() {
    var $ = layui.$,
        form = layui.form,
		element = layui.element,
        upload = layui.upload,
		files = [],
		loadingIndex = null;
		var set_List = [{
			name: ''
		}];
		var vrlists=[];
		{notempty name="data.vr"}
			set_List=[];
			{volist name='data.vr' id='v'}
				set_List.push({name:'{$v}'});
				vrlists.push('{$v}');
			{/volist}
		{/notempty}
 
		var vrlinkVal='';
		if('{$data.vr_group_ids}'){
			vrlinkVal = '{$data.vr_group_ids}';
            $("#vrWorks").text('{$data.group_name}');
		}
		$('#vrlists').val(vrlists.join(','));
		if('{$data.type}'){
			for(var i=0;i<$('input[type="radio"]').length;i++){
				console.log($('input[type="radio"]').eq(i).val()=='{$data.type}')
				if($('input[type="radio"]').eq(i).val()=='{$data.type}'){
					$('.isshow').eq(i).show().siblings().hide();
					$('input[type="radio"]').eq(i).prop('checked',true);
				}else{
					$('input[type="radio"]').eq(i).prop('checked',false);
				}
			}
			form.render();
		}
		
		var imgslist = [];
		for(var i=0;i<$('#step_id').find("option").length;i++){
			if(parseInt($('#step_id').find("option").eq(i).val()) == parseInt("{$steps_id}")){
				$('#step_id').find('option').eq(i).prop('selected',true)
			}
		}

		form.render("select");
        //多图片上传
        upload.render({
            elem: '#img',
            accept: 'images',
            exts: 'jpg|png|bmp|jpeg|JPG|PNG|BMP|JPEG',
            field: 'image',
            size: 2 * 1024,
            auto: false,
            multiple: true,
            choose: function(obj) {
                files = obj.pushFile();
                length = $('.imageDiv').length;
                obj.preview(function(index, file, result) {
                    length++;
                    if(length > 9) {
                        if(length == 10) layer.msg('限制九张图片以下');
                        delete files[index];
                    } else {
                        $('.picDiv').prepend('<div class="imageDiv" data-id="' + index +
                            '"><img src="' + result + '" alt="' + file.name +
                            '" class="layui-upload-img" width="100%" height="100%"><div><i class="layui-icon layui-icon-delete" prop="delete"></i><i class="layui-icon layui-icon-search" prop="view" data-image="'+result+'" style="margin-left:30px;font-size: 25px;margin-top: 5px;"></i></div></div>'
                        );
                    }
                });
            }
        });
        $('.picDiv').on('click', 'i', function(e) {
            var that = this;
            if (e.target.attributes[1].nodeValue === 'del') {
                layer.confirm('确定删除该图片么？',{title: ['信息', 'color:#333333;background-color:#D8E6F1;'],}, function(index) {
                    var imgDiv = $(that).closest('.imageDiv');
                    if(id = imgDiv.data('id')) {
                        delete files[id];
                    }
                    imgDiv.remove();
                    layer.close(index);
                });
            } else {
                layer.photos({ photos: {"data": [{"src": e.target.attributes[2].nodeValue}]} ,closeBtn:true});
            }
        });

        form.on('select(step_id)', function (e) {
            var construction_id = {$construction_id};
            var step_id = e.value
            var url = "{:url('construction/update_step')}?construction_id="+construction_id+"&steps_id="+step_id

            window.location.href = url
        })
		
		//////// 
		//vr作品
        $('#selectVRCreate').click(function(){
            layer.open({
                type: 2,
                title: ['选择VR作品', 'color:#333333;background-color:#D8E6F1;'],
                content: '{:url("building/group")}?id='+(vrlinkVal?vrlinkVal:''),
                area: ['80%', '80%'],
                btn: ['确定', '取消'],
                yes: function (index, layero) {
                    let data = layero.find('iframe').contents().find("#hiddentext").val();
                    if (data) {
                        let vrObject = JSON.parse(data);
                        vrlinkVal = vrObject.id;
                        $("#vrWorks").text(vrObject.name);
                    }
                    layer.close(index);
                    //点击确认触发 iframe 内容中的按钮提交
                }
            });
        })
		
		form.on('radio(types)', function (data) {
			var this_=$(this).attr('id')-1;
			$('.isshow').eq(this_).show().siblings().hide();
		});
		
		set_step_Html(set_List);
		function set_step_Html(set_List) {
			$('.vrurllist')[0].innerHTML = $.map(set_List, (v, i) => {
				return `<div class="woverflow width100_ mdb20">
			            		<div class="layui-input-block width100_" style="max-width:50% !important;float:left;margin-left:0;">
						            <input type="text" data-type="name" data-index="${i}" placeholder="请输入标题" autocomplete="off" class="layui-input width100_" value="${v.name}">
					            </div>
					            <p class="vrdelbtn add_step" data-index="${set_List.length + 1}">
					            	<span class="wpsa wpsauto lanse ds" data-index="${set_List.length+1}">+</span>
					            </p>
					            <p class="vrdelbtn delete" style="font-size:50px;line-height: 30px;" data-index="${i}">
					            	<span class="wpsa wpsauto lanse ds" data-index="${i}">-</span>
					            </p>
			            	</div>`
			}).join('');

			setTimeout(() => {
				$('.add_step').click((e) => {
					let index = parseInt(e.target.dataset.index);
					if (set_List.length < 9) {
						set_List.push({
							id: 0,
							name: ''
						});
						set_step_Html(set_List)
					} else {
						layer.msg('最多设置9个VR链接');
					}
				})
				$('.delete').click((e) => {
					console.log(e)
					if (set_List.length <= 1) {
						layer.msg('只剩最后一个了');
					} else {
						let index = parseInt(e.target.dataset.index);
						console.log(index)
						set_List.splice(index, 1);
						set_step_Html(set_List)
					}
				})
				$('input').change((e) => {
					let type = e.target.dataset.type;
					let val = e.target.value;
					if (type && type != undefined) {
						let index = parseInt(e.target.dataset.index);
						set_List[index][type] = val;
					}
				})
			}, 500)
		}
		
		//视频封面图
		upload.render({
			elem: '#upload-drag',
			accept: 'image',
			exts: 'png|jpg|jpeg',
			auto: false,
			field: 'video_cover',
			size: 3 * 1024,
			choose: function(obj) {
				obj.preview(function(index, file, result) {
					$('#upload-drag').html('<img class="fmimages" src="' + result + '" style="height: 100%;width:100%;">');
				});
			}
		});
		
		$('.isimgupload').hover(function(){
			if($("#upload-drag: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-drag').find('img');
		           imgDiv.remove();
				   $('#upload-drag').html('<div class="layui-upload-drag" style="position: relative;border: 1px dashed #e2e2e2 !important;background-color: #fff;text-align: center;cursor: pointer;color: #999;height: auto;line-height:1;padding: 21px 66px !important;max-width: 190px;max-height: 114px;"><i class="layui-icon" style="font-size:56px">&#xe681;</i><p>上传图片</p></div>');
		           layer.close(index);
		    });
		});
		
		//添加保存
		form.on('submit(layuiadmin-zsgd-submit)', function(data) {
			var formData = new FormData(data.form);
			if(data.field['step_id']==0){
				layer.msg('请选择一个施工阶段', {anim: 0,time: 1000,icon: 5});
				return false;
			}
			/*if (typeof(files) == "undefined" || JSON.stringify(files)=="{}" || files.length==0) {
				layer.msg('请至少选择一张图片', {anim: 6,time: 1000,icon: 5});
				return false;
			}*/
			if($("#upload-drag:has(img.fmimages)").length<1){
				formData.delete('video_cover');
			}
            let el = document.querySelector('#imgs').children;
            for (let i = 0; i < el.length; i++) {
                if (el[i].className === 'imageDiv' && el[i].dataset.id) {
                    formData.append('img[]', files[el[i].dataset.id]);
                }
            }
			
			if (data.field.type == 'img') {
				// if (!Object.keys(files).length) {
				// 	layer.msg('请添加图片')
				// 	return;
				// }
				formData.delete('img');
				formData.append('vr','')
				formData.append('vr_group_ids','')
			} else if(data.field.type == 'vr'){
				let list  = set_List.filter(v => v.name);
				if (!list.length) {
					layer.msg('请添加VR链接')
					return;
				}
				let vrStr = set_List.map(v => v.name).join(',')
				formData.append('img','');
				formData.append('vr_group_ids','')
				formData.append('vr',vrStr)
			}else if(data.field.type=='groupVr'){	
				if (!vrlinkVal) {
					layer.msg('请添加VR链接')
					return;
				}
				formData.append('img','');
				formData.append('vr','');
				
				formData.append('vr_group_ids',vrlinkVal)
			} else{
				var video_url = $('#fileuri').val();
				formData.append('video',video_url);
				formData.append('vr','')
				formData.append('vr_group_ids','')
				if (video_url=='') {
					layer.msg('请选择视频', {anim: 6,time: 1000,icon: 5});
					return false;
				}
			}
			loadingIndex = layer.load('Loading...', {
                shade: [0.6,'#000'] //0.1透明度的白色背景
            });
			//单击之后提交按钮不可选,防止重复提交
            var DISABLED = 'layui-btn-disabled';
            var target = '#layuiadmin-zsgd-submit';
            $(target).addClass(DISABLED);
            $(target).attr('disabled', 'disabled');
			$.ajax({
				url: '{:url("construction/update_step")}',
				type: 'post',
				data: formData,
				dataType: 'json',
				processData: false,
				contentType: false,
				success: function(res) {
                    $(target).removeClass(DISABLED);
                    $(target).removeAttr('disabled');
					if(res.code === 0) {
						layer.close(loadingIndex);
						layer.msg(res.msg,{
							anim: 0,time: 1000,icon: 6,
						}, function() {
							var adding = $("input[name='adding']").is(":checked");
							if (adding) {
								location.href = "{:url('construction/index')}";
							} else {
								var index = parent.layer.getFrameIndex(window.name);
								parent.layui.table.reload('company-activity'); //重载表格
								parent.layer.close(index);
							}
						});
					} else {
						layer.close(loadingIndex);
						layer.msg(res.msg, {anim: 0,time: 1000,icon: 5});
					}
				},
	            error : function(e){
			        $(target).removeClass(DISABLED);
			        $(target).removeAttr('disabled');
	            }
			});

			return false;
		});
})
</script>
{/block}