src/main/resources/templates/tr/hiddenDangerCheck/dangerRectify/editDangerRectify.html
@@ -20,6 +20,49 @@ label.error{ position :absolute !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"> @@ -341,11 +384,14 @@ <label class="col-sm-3 control-label is-required">隐患整改后照片：</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="ThumbImg"> <p id="msgText"></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="ThumbImg">--> <!-- <p id="msgText"></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> @@ -435,37 +481,147 @@ <!--layui图片文件上传--> 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) { $('#ThumbImg').attr('src', result); //图片链接（base64） }); } , done: function (res) { //如果上传失败 if (res.code > 0) { return layer.msg('上传失败'); } //上传成功 $('#postRectifyPhoto').val(res.imageUrl); } , error: function () { //演示失败状态，并实现重传 var msgText = $('#msgText'); 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: '#postRectifyPhotoUpload' // , url: ctx + 'tr/upload' // , before: function (obj) { // //预读本地文件示例，不支持ie8 // obj.preview(function (index, file, result) { // $('#ThumbImg').attr('src', result); //图片链接（base64） // }); // } // , done: function (res) { // //如果上传失败 // if (res.code > 0) { // return layer.msg('上传失败'); // } // //上传成功 // $('#postRectifyPhoto').val(res.imageUrl); // } // , error: function () { // //演示失败状态，并实现重传 // var msgText = $('#msgText'); // 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(); } } } }); </script> src/main/resources/templates/tr/hiddenDangerCheck/dangerReport/addDangerReport.html
@@ -93,11 +93,14 @@ <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="ThumbImg"> <p id="msgText"></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="ThumbImg">--> <!-- <p id="msgText"></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 id="preFileList"></div> </div> </div> @@ -223,40 +226,157 @@ <!--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: '#preRectifyPhotoUpload' // , url: ctx + 'tr/upload' // , before: function (obj) { // //预读本地文件示例，不支持ie8 // obj.preview(function (index, file, result) { // $('#ThumbImg').attr('src', result); //图片链接（base64） // }); // } // , done: function (res) { // //如果上传失败 // if (res.code > 0) { // return layer.msg('上传失败'); // } // //上传成功 // $('#preRectifyPhoto').val(res.imageUrl); // } // , error: function () { // //演示失败状态，并实现重传 // var msgText = $('#msgText'); // 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: '#preRectifyPhotoUpload' , url: ctx + 'tr/upload' , before: function (obj) { //预读本地文件示例，不支持ie8 obj.preview(function (index, file, result) { $('#ThumbImg').attr('src', result); //图片链接（base64） }); } , done: function (res) { //如果上传失败 if (res.code > 0) { return layer.msg('上传失败'); } //上传成功 $('#preRectifyPhoto').val(res.imageUrl); } , error: function () { //演示失败状态，并实现重传 var msgText = $('#msgText'); 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(); } } } }); </script> </body> </html> src/main/resources/templates/tr/hiddenDangerCheck/dangerReport/addDangerReportWholeProcess.html
@@ -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> src/main/resources/templates/tr/hiddenDangerCheck/dangerReport/detailNotDanger.html
@@ -103,11 +103,13 @@ <div class="form-group"> <label class="col-sm-4 control-label ">隐患视图：</label> <div class="col-sm-8"> <img style="width: 100px; height: 100px;cursor:pointer;" <img style="width: 100px; height: 100px;cursor:pointer;display: none" title="查看图片" class="allPics" th:src="*{preRectifyPhoto}" onclick="showPicture(this.getAttribute('data-id'),'preRectifyPhoto')" th:data-id="${hiddenDangerCheckPoint.id}"> <div class="image-container"></div> </div> </div> </div> @@ -146,6 +148,28 @@ <th:block th:include="include :: footer"/> <th:block th:include="include :: jquery-steps-js"/> <script type="text/javascript"> $(document).ready(function () { var imgsUrl = $('.allPics'); var imageUrls = imgsUrl.attr('src') var imageContainer = document.querySelector('.image-container'); // 将逗号分隔的字符串拆分为URL数组 var imageUrlArray = imageUrls.split(','); // 遍历URL数组并创建img元素 imageUrlArray.forEach(function(url) { var img = document.createElement('img'); img.setAttribute('src', url); img.setAttribute('style', 'width: 100px; height: 100px; cursor: pointer;'); img.setAttribute('title', '查看图片'); img.setAttribute('data-id', hiddenDangerCheckPoint.id); img.addEventListener('click', function() { showPicture(this.getAttribute('data-id'), 'preRectifyPhoto'); }); imageContainer.appendChild(img); }); }); /* 图片--查看 */ function showPicture(id,type) { var showPictureUrl = "/tr/hiddenDangerCheck/dangerBase/showPicture/{type}/{id}"; src/main/resources/templates/tr/hiddenDangerCheck/dangerReport/detailNotJudge.html
@@ -102,11 +102,13 @@ <div class="form-group"> <label class="col-sm-4 control-label ">隐患视图：</label> <div class="col-sm-8"> <img style="width: 100px; height: 100px;cursor:pointer;" <img style="width: 100px; height: 100px;cursor:pointer;display: none" title="查看图片" class="allPics" th:src="*{preRectifyPhoto}" onclick="showPicture(this.getAttribute('data-id'),'preRectifyPhoto')" th:data-id="${hiddenDangerCheckPoint.id}"> <div class="image-container"></div> </div> </div> </div> @@ -145,6 +147,27 @@ <th:block th:include="include :: footer"/> <th:block th:include="include :: jquery-steps-js"/> <script type="text/javascript"> $(document).ready(function () { var imgsUrl = $('.allPics'); var imageUrls = imgsUrl.attr('src') var imageContainer = document.querySelector('.image-container'); // 将逗号分隔的字符串拆分为URL数组 var imageUrlArray = imageUrls.split(','); // 遍历URL数组并创建img元素 imageUrlArray.forEach(function(url) { var img = document.createElement('img'); img.setAttribute('src', url); img.setAttribute('style', 'width: 100px; height: 100px; cursor: pointer;'); img.setAttribute('title', '查看图片'); img.setAttribute('data-id', hiddenDangerCheckPoint.id); img.addEventListener('click', function() { showPicture(this.getAttribute('data-id'), 'preRectifyPhoto'); }); imageContainer.appendChild(img); }); }); /* 图片--查看 */ function showPicture(id,type) { var showPictureUrl = "/tr/hiddenDangerCheck/dangerBase/showPicture/{type}/{id}"; src/main/resources/templates/tr/hiddenDangerCheck/dangerReport/detailYesDanger.html
@@ -156,11 +156,13 @@ <div class="form-group"> <label class="col-sm-4 control-label ">隐患视图：</label> <div class="col-sm-8"> <img style="width: 100px; height: 100px;cursor:pointer;" <img style="width: 100px; height: 100px;cursor:pointer;display: none" title="查看图片" class="allPics" th:src="*{preRectifyPhoto}" onclick="showPicture(this.getAttribute('data-id'),'preRectifyPhoto')" th:data-id="${hiddenDangerCheckPoint.id}"> <div class="image-container"></div> </div> </div> </div> @@ -199,6 +201,27 @@ <th:block th:include="include :: footer"/> <th:block th:include="include :: jquery-steps-js"/> <script type="text/javascript"> $(document).ready(function () { var imgsUrl = $('.allPics'); var imageUrls = imgsUrl.attr('src') var imageContainer = document.querySelector('.image-container'); // 将逗号分隔的字符串拆分为URL数组 var imageUrlArray = imageUrls.split(','); // 遍历URL数组并创建img元素 imageUrlArray.forEach(function(url) { var img = document.createElement('img'); img.setAttribute('src', url); img.setAttribute('style', 'width: 100px; height: 100px; cursor: pointer;'); img.setAttribute('title', '查看图片'); img.setAttribute('data-id', hiddenDangerCheckPoint.id); img.addEventListener('click', function() { showPicture(this.getAttribute('data-id'), 'preRectifyPhoto'); }); imageContainer.appendChild(img); }); }); /* 图片--查看 */ function showPicture(id,type) { var showPictureUrl = "/tr/hiddenDangerCheck/dangerBase/showPicture/{type}/{id}";
