TroubleAndRisk.git

			@@ -25,13 +25,57 @@
			position: absolute !important;
			color: #ef392b !important;
			}

			#preFileList{
			display: flex;
			align-items: flex-start;
			margin-top: 10px;
			}
			#postFileList{
			display: flex;
			align-items: flex-start;
			margin-top: 10px;
			}
			.file-list-item1,.file-temp1,.file-list-item2,.file-temp2{
			width: 100px;
			margin-right: 10px;
			}
			[class^="file-list-item"] div:nth-child(1){
			width: 100%;
			overflow: hidden;
			position: relative;
			}
			[class^="file-list-item"] div:nth-child(1) img{
			width: 100px;
			height: 100px;
			}
			[class^="file-list-item"] div:nth-child(1) .layui-badge1,.layui-badge2{
			position: absolute;
			left: 2px;
			top: 2px;
			}
			[class^="file-list-item"] div:nth-child(2){
			width: 100%;
			height: 36px;
			text-align: center;
			line-height: 36px;
			margin-top: 4px;
			}
			[class^="file-list-item"] div:nth-child(2) [class^="file-cancel"]{
			width: 100%;
			height: 36px;
			}
			[class^="file-list-item"] div:nth-child(2) [class^="file-cancel"]:hover{
			background: #ED5565;
			color: #fff;
			}
			</style>
			</head>


			<body class="white-bg">
			<div class="wrapper wrapper-content animated fadeInRight ibox-content">
			<form id="form" class="form-horizontal wizard-big">
			<div class="wrapper wrapper-content animated fadeInRight ibox-content" style="height: 100%">
			<form id="form" class="form-horizontal wizard-big" style="height: 100%">
			<h1>隐患上报</h1>
			<fieldset>
			<h4 class="form-header h4">登记隐患信息</h4>
			@@ -96,11 +140,24 @@
			<label class="col-sm-3 control-label">隐患整改前照片：</label>
			<div class="col-sm-8">
			<input name="preRectifyPhoto" id="preRectifyPhoto" type="hidden">
			<button type="button" class="layui-btn" id="preRectifyPhotoUpload">上传</button>
			<div class="layui-upload-list">
			<img class="layui-upload-img" style="width: 92px; height: 92px;" id="thumbImgPreRectifyPhoto">
			<p id="msgTextPreRectifyPhoto"></p>
			</div>
			<!-- <button type="button" class="layui-btn" id="preRectifyPhotoUpload">上传</button>-->
			<!-- <div class="layui-upload-list">-->
			<!-- <img class="layui-upload-img" style="width: 92px; height: 92px;" id="thumbImgPreRectifyPhoto">-->
			<!-- <p id="msgTextPreRectifyPhoto"></p>-->
			<!-- </div>-->
			<button type="button" class="layui-btn layui-btn-normal" id="preChooseList">选择文件(不超过3张)</button>
			<button type="button" class="layui-btn" id="preUpAction">确认上传(上传后不可修改)</button>
			<!-- <div class="layui-upload-list">-->
			<!-- <table class="layui-table">-->
			<!-- <thead>-->
			<!-- <tr><th>文件名</th>-->
			<!-- <th>状态</th>-->
			<!-- <th>操作</th>-->
			<!-- </tr></thead>-->
			<!-- <tbody id="preFileList"></tbody>-->
			<!-- </table>-->
			<!-- </div>-->
			<div id="preFileList"></div>
			</div>
			</div>

			@@ -340,11 +397,14 @@
			<label class="col-sm-3 control-label">隐患整改后照片：</label>
			<div class="col-sm-8">
			<input name="postRectifyPhoto" id="postRectifyPhoto" type="hidden">
			<button type="button" class="layui-btn" id="postRectifyPhotoUpload">上传</button>
			<div class="layui-upload-list">
			<img class="layui-upload-img" style="width: 92px; height: 92px;" id="thumbImgPostRectifyPhoto">
			<p id="msgTextPostRectifyPhoto"></p>
			</div>
			<!-- <button type="button" class="layui-btn" id="postRectifyPhotoUpload">上传</button>-->
			<!-- <div class="layui-upload-list">-->
			<!-- <img class="layui-upload-img" style="width: 92px; height: 92px;" id="thumbImgPostRectifyPhoto">-->
			<!-- <p id="msgTextPostRectifyPhoto"></p>-->
			<!-- </div>-->
			<button type="button" class="layui-btn layui-btn-normal" id="postChooseList">选择文件(不超过3张)</button>
			<button type="button" class="layui-btn" id="postUpAction">确认上传(上传后不可修改)</button>
			<div id="postFileList"></div>
			</div>
			</div>
			</fieldset>
			@@ -665,38 +725,157 @@
			/区域/位置选择 end/

			<!--layui图片文件上传-->
			layui.use('upload', function () {
			var $ = layui.jquery
			, upload = layui.upload;

			//普通图片上传
			var uploadInst = upload.render({
			elem: '#preRectifyPhotoUpload'
			, url: ctx + 'tr/upload'
			, before: function (obj) {
			//预读本地文件示例，不支持ie8
			obj.preview(function (index, file, result) {
			$('#thumbImgPreRectifyPhoto').attr('src', result); //图片链接（base64）
			});
			}
			, done: function (res) {
			//如果上传失败
			if (res.code > 0) {
			return layer.msg('上传失败');
			}
			//上传成功
			$('#preRectifyPhoto').val(res.imageUrl);
			}
			, error: function () {
			//演示失败状态，并实现重传
			var msgText = $('#msgTextPreRectifyPhoto');
			msgText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
			msgText.find('.demo-reload').on('click', function () {
			uploadInst.upload();
			});
			// layui.use('upload', function () {
			// var $ = layui.jquery
			// , upload = layui.upload;
			//
			// //普通图片上传
			// var uploadInst = upload.render({
			// elem: '#preRectifyPhotoUpload'
			// , url: ctx + 'tr/upload'
			// , before: function (obj) {
			// //预读本地文件示例，不支持ie8
			// obj.preview(function (index, file, result) {
			// $('#thumbImgPreRectifyPhoto').attr('src', result); //图片链接（base64）
			// });
			// }
			// , done: function (res) {
			// //如果上传失败
			// if (res.code > 0) {
			// return layer.msg('上传失败');
			// }
			// //上传成功
			// $('#preRectifyPhoto').val(res.imageUrl);
			// }
			// , error: function () {
			// //演示失败状态，并实现重传
			// var msgText = $('#msgTextPreRectifyPhoto');
			// msgText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
			// msgText.find('.demo-reload').on('click', function () {
			// uploadInst.upload();
			// });
			// }
			// });
			// });
			layui.use('upload', function() {
			var $ = layui.jquery;
			upload = layui.upload;
			var uploadList = {};
			var urls = []
			//多文件列表示例
			var preFileListDom = $('#preFileList')
			var uploadListIns = upload.render({
			elem: '#preChooseList',
			url: ctx + 'tr/upload' ,
			accept: 'file',
			multiple: true,
			number: 3,
			auto: false,
			bindAction: '#preUpAction',
			choose: function(obj) {
			// 展示上传按钮
			$('#preUpAction').show();
			// 将每次选择的文件追加到文件队列
			uploadList = obj.pushFile();
			const len = preFileListDom.find('.file-list-item1').length;
			// 还可以上传的文件数量
			const limit = 3 - len;
			var number = 0;
			// 预读本地文件，如果是多文件，则会遍历。(不支持ie8/9)
			obj.preview(function(index, file, result){
			if (number < limit){
			number++;
			appendFile(index, file.name, result);
			}else{
			deleteTempFile(index)
			}
			})
			},
			// before: function(obj){
			// layer.load(1);
			// },
			//上传完毕回调
			//当文件全部被提交后，才触发
			allDone: function (obj) {
			layer.msg("已上传 "+obj.successful+" 个文件");
			layer.closeAll('loading');
			deleteTempFile(0)
			},
			done: function(res, index, upload){
			preFileListDom.find('.file-temp1').each(function () {
			if (!res \|\| res.code > 0){
			// 若上传失败，则直接移除
			return layer.msg('上传失败');
			$(this).remove();
			}else{
			//上传成功
			// 添加上传返回的数据到对应的文件中
			// var hidden = '<input type="hidden" name="path[]" value="'+res.imageUrl+'"/>';
			// $(this).append(hidden);
			// 修改预览文件样式
			$(this).removeClass('file-temp1');
			// $(this).find('.file-cancel').removeClass('layui-btn-primary');
			// $(this).find('.file-cancel').addClass('layui-btn-danger');
			// $(this).find('.file-cancel').val('删除');
			$(this).find('.file-cancel1').remove();
			$(this).find('.layui-badge1').remove();
			urls.push(res.imageUrl)
			}
			$('#preRectifyPhoto').val(urls.join(','));
			})
			},
			error: function(index, upload) {
			var tr = preFileListDom.find('tr#upload-' + index),
			tds = tr.children();
			tds.eq(1).html('<span style="color: #FF5722;">上传失败</span>');
			tds.eq(2).find('.demo-reload').removeClass('layui-hide'); //显示重传
			}
			});

			// 预览选择的文件
			function appendFile(index, name, result) {
			const dom = '<div class="file-list-item1 file-temp1" data-index="'+index+'"><div><img src="'+result+'" alt="'+name+'"><span class="layui-badge1 layui-bg-blue">待上传</span></div>' +
			'<div><input type="button" class="file-cancel1" value="删除"></div></div>';
			preFileListDom.append(dom);
			fileCancelEvent();
			}
			// 为待上传文件【取消】按钮添加点击事件
			function fileCancelEvent() {
			preFileListDom.find('.file-cancel1').each(function () {
			const event = $._data($(this)[0],"events");
			// 仅对未绑定事件的按钮进行绑定
			if (!event \|\| !event["click"]){
			$(this).click(function () {
			var fileDom = $(this).parent().parent();
			var index = fileDom.data('index');
			if (index){
			deleteTempFile(index);
			}
			fileDom.remove();
			})
			}
			})
			}
			// 删除待上传的文件（从文件队列中删除文件）
			function deleteTempFile(index){
			if (index === 0){
			// 清空文件队列中所有数据
			for (const key in uploadList) {
			delete uploadList[key];
			}
			// 隐藏上传按钮
			$('#preUpAction').hide();
			}else{
			delete uploadList[index];
			var number = Object.keys(uploadList).length;
			// 若上传文件队列中无数据则隐藏上传按钮
			if (number <= 0){
			$('#preUpAction').hide();
			}
			}
			}
			});

			//隐患上报全流程。（隐患上报部分） end


			@@ -756,38 +935,150 @@

			/隐患整改责任部门选择 end/
			<!--layui图片文件上传-->
			layui.use('upload', function () {
			var $ = layui.jquery
			, upload = layui.upload;
			// layui.use('upload', function () {
			// var $ = layui.jquery
			// , upload = layui.upload;
			//
			// //普通图片上传
			// var uploadInst = upload.render({
			// elem: '#postRectifyPhotoUpload'
			// , url: ctx + 'tr/upload'
			// , before: function (obj) {
			// //预读本地文件示例，不支持ie8
			// obj.preview(function (index, file, result) {
			// $('#thumbImgPostRectifyPhoto').attr('src', result); //图片链接（base64）
			// });
			// }
			// , done: function (res) {
			// //如果上传失败
			// if (res.code > 0) {
			// return layer.msg('上传失败');
			// }
			// //上传成功
			// $('#postRectifyPhoto').val(res.imageUrl);
			// }
			// , error: function () {
			// //演示失败状态，并实现重传
			// var msgText = $('#msgTextPostRectifyPhoto');
			// msgText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
			// msgText.find('.demo-reload').on('click', function () {
			// uploadInst.upload();
			// });
			// }
			// });
			// });

			//普通图片上传
			var uploadInst = upload.render({
			elem: '#postRectifyPhotoUpload'
			, url: ctx + 'tr/upload'
			, before: function (obj) {
			//预读本地文件示例，不支持ie8
			obj.preview(function (index, file, result) {
			$('#thumbImgPostRectifyPhoto').attr('src', result); //图片链接（base64）
			});
			}
			, done: function (res) {
			//如果上传失败
			if (res.code > 0) {
			return layer.msg('上传失败');
			}
			//上传成功
			$('#postRectifyPhoto').val(res.imageUrl);
			}
			, error: function () {
			//演示失败状态，并实现重传
			var msgText = $('#msgTextPostRectifyPhoto');
			msgText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
			msgText.find('.demo-reload').on('click', function () {
			uploadInst.upload();
			});
			layui.use('upload', function() {
			var $ = layui.jquery;
			upload = layui.upload;
			var uploadList = {};
			var urls = []
			//多文件列表示例
			var postFileListDom = $('#postFileList')
			var uploadListIns = upload.render({
			elem: '#postChooseList',
			url: ctx + 'tr/upload' ,
			accept: 'file',
			multiple: true,
			number: 3,
			auto: false,
			bindAction: '#postUpAction',
			choose: function(obj) {
			// 展示上传按钮
			$('#postUpAction').show();
			// 将每次选择的文件追加到文件队列
			uploadList = obj.pushFile();
			const len = postFileListDom.find('.file-list-item2').length;
			// 还可以上传的文件数量
			const limit = 3 - len;
			var number = 0;
			// 预读本地文件，如果是多文件，则会遍历。(不支持ie8/9)
			obj.preview(function(index, file, result){
			if (number < limit){
			number++;
			appendFile(index, file.name, result);
			}else{
			deleteTempFile(index)
			}
			})
			},
			// before: function(obj){
			// layer.load(1);
			// },
			//上传完毕回调
			//当文件全部被提交后，才触发
			allDone: function (obj) {
			layer.msg("已上传 "+obj.successful+" 个文件");
			layer.closeAll('loading');
			deleteTempFile(0)
			},
			done: function(res, index, upload){
			postFileListDom.find('.file-temp2').each(function () {
			if (!res \|\| res.code > 0){
			// 若上传失败，则直接移除
			return layer.msg('上传失败');
			$(this).remove();
			}else{
			$(this).removeClass('file-temp2');
			$(this).find('.file-cancel2').remove();
			$(this).find('.layui-badge2').remove();
			urls.push(res.imageUrl)
			}
			$('#postRectifyPhoto').val(urls.join(','));
			})
			},
			error: function(index, upload) {
			var tr = postFileListDom.find('tr#upload-' + index),
			tds = tr.children();
			tds.eq(1).html('<span style="color: #FF5722;">上传失败</span>');
			tds.eq(2).find('.demo-reload').removeClass('layui-hide'); //显示重传
			}
			});

			// 预览选择的文件
			function appendFile(index, name, result) {
			const dom = '<div class="file-list-item2 file-temp2" data-index="'+index+'"><div><img src="'+result+'" alt="'+name+'"><span class="layui-badge2 layui-bg-blue">待上传</span></div>' +
			'<div><input type="button" class="file-cancel2" value="删除"></div></div>';
			postFileListDom.append(dom);
			fileCancelEvent();
			}
			// 为待上传文件【取消】按钮添加点击事件
			function fileCancelEvent() {
			postFileListDom.find('.file-cancel2').each(function () {
			const event = $._data($(this)[0],"events");
			// 仅对未绑定事件的按钮进行绑定
			if (!event \|\| !event["click"]){
			$(this).click(function () {
			var fileDom = $(this).parent().parent();
			var index = fileDom.data('index');
			if (index){
			deleteTempFile(index);
			}
			fileDom.remove();
			})
			}
			})
			}
			// 删除待上传的文件（从文件队列中删除文件）
			function deleteTempFile(index){
			if (index === 0){
			// 清空文件队列中所有数据
			for (const key in uploadList) {
			delete uploadList[key];
			}
			// 隐藏上传按钮
			$('#postUpAction').hide();
			}else{
			delete uploadList[index];
			var number = Object.keys(uploadList).length;
			// 若上传文件队列中无数据则隐藏上传按钮
			if (number <= 0){
			$('#postUpAction').hide();
			}
			}
			}
			});

			//隐患上报全流程。（隐患整改部分） end


			@@ -817,3 +1108,48 @@
			</script>
			</body>
			</html>
			<style>
			#preFileList{
			display: flex;
			align-items: flex-start;
			margin-top: 10px;
			}
			#postFileList{
			display: flex;
			align-items: flex-start;
			margin-top: 10px;
			}
			.file-list-item1,.file-temp1,.file-list-item2,.file-temp2{
			width: 100px;
			margin-right: 10px;
			}
			[class^="file-list-item"] div:nth-child(1){
			width: 100%;
			overflow: hidden;
			position: relative;
			}
			[class^="file-list-item"] div:nth-child(1) img{
			width: 100px;
			height: 100px;
			}
			[class^="file-list-item"] div:nth-child(1) .layui-badge1,.layui-badge2{
			position: absolute;
			left: 2px;
			top: 2px;
			}
			[class^="file-list-item"] div:nth-child(2){
			width: 100%;
			height: 36px;
			text-align: center;
			line-height: 36px;
			margin-top: 4px;
			}
			[class^="file-list-item"] div:nth-child(2) [class^="file-cancel"]{
			width: 100%;
			height: 36px;
			}
			[class^="file-list-item"] div:nth-child(2) [class^="file-cancel"]:hover{
			background: #ED5565;
			color: #fff;
			}
			</style>