tudc
/
guomao


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240
							<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>问题编辑</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <script src="../../js/min-loader-next.js"></script>
    <style type="text/css">
	    .layui-anim-upbit {
		    animation-name: layui-upbit;
		    z-index: 1000 !important;
		}
    </style>
</head>

<body class="">
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
    </fieldset>

<form class="layui-form" action="javascript:void(0)" id = "form2">
	<div class="layui-form-item">
		<div class="layui-inline">
			<label class="layui-form-label">*问题标题：</label>
			<div class="layui-input-inline">
				<input type="text" name="name" id="name" lay-verify="name" maxlength="20" autocomplete="off" placeholder="请输入问题标题" class="layui-input">
			</div>
		</div>
		<div class="layui-inline">
			<label class="layui-form-label">*严重程度：</label>
			<div class="layui-input-inline">
				<select name="degree" id="degree">
					<option value="1" selected>1</option>
					<option value="2">2</option>
					<option value="3">3</option>
					<option value="4">4</option>
				</select>
			</div>
		</div>
		
		<div class="layui-form-item">
			<div class="layui-inline">
				<label class="layui-form-label">*系统/模块：</label>
				<div class="layui-input-inline" style = "width: 400px;">
					<select name="module" id = "module" lay-search>
						
					</select>
				</div>
			</div>
		</div>
		<div class="layui-form-item">
			<div class="layui-inline">
				<label class="layui-form-label">*期望完成时间：</label>
				<div class="layui-input-inline">
					<input type="text" name="expectTime" id="expectTime" maxlength="10" autocomplete="off" placeholder="请选择日期" class="layui-input" readOnly>
				</div>
			</div>
		</div>
	</div>
	
	<div class="layui-form-item">	
		<div class="layui-inline">
			<label class="layui-form-label">*重现步骤：</label>
			<div class="layui-input-inline">
				<textarea name="step" id="step" class="layui-textarea" style="width:1024px;height:500px;"></textarea>
			</div>
		</div>
	</div>
	
	<div class="layui-upload" style="margin-left: 40px; padding-bottom: 70px;">
	  <button type="button" class="layui-btn" id="test2">图片上传</button> 
	  <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
	    预览图：
	    <div class="layui-upload-list" id="demo2"></div>
	 </blockquote>
	</div>
	
      <div class="layui-form-item box-button">
          <div class="layui-input-block">
              <button class="layui-btn" lay-submit="" lay-filter="demo1">提交</button>
          </div>
      </div>
      
	</form>
    <!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
    <script>
    //建议使用工厂方法getEditor创建和引用编辑器实例，如果在某个闭包下引用该编辑器，直接调用UE.getEditor('editor')就能拿到相关的实例
	$(function(){
		layui.use(['form', 'laydate', 'upload'], function() {
			var form = layui.form;
			var laydate = layui.laydate;
			var upload = layui.upload;

			var oqId = getQueryString("oqId");
			$.request({
				action : 'ObsQuestionManage/questionQuery',
				data :  {'oqId': oqId},
				success : function(data) {
					var oqModule = data.data.oqModule;
					var oqExpectTime = data.data.oqExpectTime;
					$("#name").val(data.data.oqName);
					var options = $("#degree").children("option");
					for(let i = 0; i < options.length; i ++) {
						if($(options[i]).attr("value") != data.data.oqDegree) {
							$(options[i]).removeAttr("selected");
						} else {
							$(options[i]).attr("selected", true);
						}
					}
					if(isEmpty(data.data.oqStep)) {
						$("#step").val('[步骤]\n\n[结果]\n\n[期望]\n');
					} else {
						$("#step").val(decodeURIComponent(window.atob(data.data.oqStep)));
					}
					
					laydate.render({
						elem: '#expectTime' //指定元素
						,trigger: 'click'
						,value: oqExpectTime.substring(0,4) + "-" + oqExpectTime.substring(4,6) + "-" + oqExpectTime.substring(6,8)
					});
					
					var picture = data.data.picture;
					if(!isEmpty(picture)) {
						var pictureUrl = picture.split(",");
						for(var i = 0; i < pictureUrl.length; i++) {
							$('#demo2').append('<img onclick="isDelete(this)" width="100px" style="margin:10px;" height="100px" src="'+ pictureUrl[i] +'" class="layui-upload-img">')
						}
					}
					
					// 查询模块数据
					$.request({
						action : 'ObsQuestionManage/menuList',
						data :  {},
						success : function(data) {
							let optionHtml = '<option value="" selected></option>';
							for(let menu of data.data) {
								if(oqModule == menu.id){
									optionHtml += '<option value="' + menu.id + '" selected>' + menu.menuName + '</option>';
								} else {
									optionHtml += '<option value="' + menu.id + '">' + menu.menuName + '</option>';
								}
							}
							$("#module").html(optionHtml);
							form.render();
						},
						error : function(data2) {
							layer.alert(data2.MINErrorMessage, {
								icon: 5,
								title: "提示"
							});
						}
					});
				},
				error : function(data2) {
					layer.alert(data2.MINErrorMessage, {
						icon: 5,
						title: "提示"
					});
				}
			});
				

			
			//监听提交
			form.on('submit(demo1)', function(data) {
				var param = {};
				param.id = getQueryString("oqId");
				param.name = data.field.name;
				param.degree = data.field.degree;
				param.module = data.field.module;
				param.expectTime = data.field.expectTime;
				param.step = window.btoa(encodeURI($("#step").val()));
				
				var categoryImg = new Array();
				var imgNode = $("#demo2").find("img");
				for(var index = 0; index < imgNode.length; index ++) {
					var url = $(imgNode[index]).attr("src");
					categoryImg.push(url);
				}
				param.pictureUrl = categoryImg.join(",");
				
				$.request({
					action : 'ObsQuestionManage/questionEdit',
					data :  param,
					success : function(data) {
						layer.alert('保存成功!',  function(){
							window.parent.location.reload();
							parent.layer.close(layer.index);
						});
					},
					error : function(data2) {
						layer.alert(data2.MINErrorMessage, {
							icon: 5,
							title: "提示"
						});
					}
				});
			})
			
		  upload.render({
		    elem: '#test2'
		    ,url: '../../FileManageAction/uploadFile' //此处配置你自己的上传接口即可
		    ,multiple: false
		    ,data: {
		    	fileType : '00',
		    	MINView : 'JSON'
		    }
		    ,before: function(obj){
		    	load = layer.load();
		    }
		    ,done: function(res){
		    	layer.close(load);
		    	if (res.MINStatus != 0) {
					layer.alert(res.MINErrorMessage, {
  						icon: 5,
  						title: "提示"
  					}); 
					return;
				}	
		    	var url = res.data.src;
		    	url = window.location.origin + url.replace("http://127.0.0.1", "")
		    	$('#demo2').append('<img onclick="isDelete(this)" width="100px" style="margin:10px;" height="100px" src="'+ url +'" class="layui-upload-img">')
		    }
		  });
		})
	})

    function isDelete(t){
		layer.confirm('确认删除此图片？', function(index){
        	$(t).remove();
			layer.close(index);//关闭弹窗
    	});
	}
    </script>

</body>

</html>