| | |
| | | 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> |
| | |
| | | </div> |
| | | </div> |
| | | </div> |
| | | |
| | | <div class="form-group"> |
| | | <label class="col-sm-3 control-label is-required">隐患来源:</label> |
| | | <div class="col-sm-8"> |
| | | <select name="dangerSrc" class="form-control m-b" th:with="type=${@dict.getType('danger_source')}" required> |
| | | <option value="">--请选择隐患来源--</option> |
| | | <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"></option> |
| | | </select> |
| | | </div> |
| | | </div> |
| | | |
| | | <div class="form-group"> |
| | | <label class="col-sm-3 control-label is-required">隐患名称:</label> |
| | |
| | | <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> |
| | | |
| | | |
| | | <div class="form-group"> |
| | | <label class="col-sm-3 control-label is-required">判定人:</label> |
| | | <label class="col-sm-3 control-label is-required">隐患责任人(判定人):</label> |
| | | <div class="col-sm-8"> |
| | | <input id="judgeUserName" name="judgeUserName" placeholder="选择判定人" class="form-control" type="text" onclick="selectJudgeUser()" maxlength="30" readonly="true" required> |
| | | <input id="judgeUserName" name="judgeUserName" placeholder="选择隐患责任人(判定人)" class="form-control" type="text" onclick="selectJudgeUser()" maxlength="30" readonly="true" required> |
| | | <input id="judgeUserId" name="judgeUserId" type="hidden"> |
| | | </div> |
| | | </div> |
| | | |
| | | <div class="form-group"> |
| | | <label class="col-sm-3 control-label is-required">隐患发现时间:</label> |
| | | <div class="col-sm-8"> |
| | | <input name="findTime" placeholder="请选择隐患发现时间" class="form-control" type="text" |
| | | readonly="readonly" required> |
| | | </div> |
| | | </div> |
| | | |
| | | <div class="form-group"> |
| | | <label class="col-sm-3 control-label is-required">检查人:</label> |
| | | <div class="col-sm-8"> |
| | | <input id="checkPerson" name="checkPerson" placeholder="选择检查人" class="form-control" type="text" onclick="selectCheckPerson()" maxlength="30" readonly="true" required> |
| | | <!-- <input id="checkPersonId" name="checkPersonId" type="hidden">--> |
| | | </div> |
| | | </div> |
| | | |
| | |
| | | </div> |
| | | </div> |
| | | |
| | | <div class="form-group showByDangerLevelChange"> |
| | | <label class="col-sm-3 control-label is-required">隐患来源:</label> |
| | | <div class="col-sm-8"> |
| | | <select name="dangerSrc" class="form-control m-b" th:with="type=${@dict.getType('danger_source')}" required> |
| | | <option value="">--请选择隐患来源--</option> |
| | | <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"></option> |
| | | </select> |
| | | </div> |
| | | </div> |
| | | <!-- <div class="form-group showByDangerLevelChange">--> |
| | | <!-- <label class="col-sm-3 control-label is-required">隐患来源:</label>--> |
| | | <!-- <div class="col-sm-8">--> |
| | | <!-- <select name="dangerSrc" class="form-control m-b" th:with="type=${@dict.getType('danger_source')}" required>--> |
| | | <!-- <option value="">--请选择隐患来源--</option>--> |
| | | <!-- <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"></option>--> |
| | | <!-- </select>--> |
| | | <!-- </div>--> |
| | | <!-- </div>--> |
| | | |
| | | <div class="form-group showByDangerLevelChange"> |
| | | <label class="col-sm-3 control-label is-required">隐患类型:</label> |
| | |
| | | </div> |
| | | <div class="form-group"> |
| | | <label class="col-sm-3 control-label is-required">隐患整改资金:</label> |
| | | <div class="col-sm-8"> |
| | | <input name="rectifyFund" class="form-control" type="text" required> |
| | | <div class="col-sm-8" style="display: flex;align-items: center"> |
| | | <input name="rectifyFund" class="form-control" type="number" placeholder="请输入数字(单位:万)" required> |
| | | <span style="width: 50px;background: #ccc;height:34px;text-align: center;line-height: 34px">万</span> |
| | | </div> |
| | | </div> |
| | | <div class="form-group"> |
| | |
| | | <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> |
| | |
| | | /*登记人 选择 end*/ |
| | | |
| | | |
| | | /*判定人 选择 start*/ |
| | | /*隐患责任人 选择 start*/ |
| | | function selectJudgeUser() { |
| | | var url = ctx + "system/user/selectUserListByParentSonCompany"; |
| | | var options = { |
| | |
| | | }); |
| | | }); |
| | | } |
| | | /*判定人 选择 end*/ |
| | | /*隐患责任人 选择 end*/ |
| | | |
| | | |
| | | function selectCheckPerson() { |
| | | var url = ctx + "system/user/selectUserListByParentSonCompany"; |
| | | var options = { |
| | | title: '用户选择', |
| | | width: "800", |
| | | url: url, |
| | | }; |
| | | $.modal.openOptionsByCallback(options, function (layero, index) { |
| | | var body = layer.getChildFrame('body', index); |
| | | body.on("click", ".selectUser", function () { |
| | | var userId = $(this).data("userid"); |
| | | var userName = $(this).data("username"); |
| | | // $("#checkPersonId").val(userId); |
| | | $("#checkPerson").val(userName); |
| | | layer.close(index); |
| | | }); |
| | | }); |
| | | } |
| | | |
| | | /*核查人 选择 start*/ |
| | | function selectExamineUser() { |
| | |
| | | // form.submit(); |
| | | |
| | | var data = $('#form').serializeArray(); |
| | | // var judgeUserName = $("select[name='judgeUserId']").find("option:selected").text();//判定人名称 |
| | | // var judgeUserName = $("select[name='judgeUserId']").find("option:selected").text();//隐患责任人名称 |
| | | // data.push({"name": "judgeUserName", "value": judgeUserName}); |
| | | // |
| | | // var examineUserName = $("select[name='examineUserId']").find("option:selected").text();//核查人名称 |
| | |
| | | format: "yyyy-mm-dd hh:ii", |
| | | autoclose: true |
| | | }); |
| | | $("input[name='findTime']").datetimepicker({ |
| | | format: "yyyy-mm-dd", |
| | | minView: "month", |
| | | autoclose: true |
| | | }); |
| | | }); |
| | | |
| | | |
| | |
| | | /*区域/位置 选择 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: '#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(); |
| | | // }); |
| | | // } |
| | | // }); |
| | | // }); |
| | | |
| | | //普通图片上传 |
| | | 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 |
| | | |
| | | |
| | |
| | | |
| | | /*隐患整改责任部门 选择 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 |
| | | |
| | | |
| | |
| | | </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> |