first commit
This commit is contained in:
383
WebRoot/jsp/safety/SafetyCheckFileList.jsp
Normal file
383
WebRoot/jsp/safety/SafetyCheckFileList.jsp
Normal file
@ -0,0 +1,383 @@
|
||||
<!DOCTYPE html
|
||||
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
||||
<%@ page language="java" pageEncoding="utf-8" %>
|
||||
<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c" %>
|
||||
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
|
||||
<style type="text/css">
|
||||
.borde {
|
||||
text-align: left;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
border: 1px solid grey;
|
||||
width: 700px;
|
||||
}
|
||||
|
||||
.borde span {
|
||||
display: inline-block;
|
||||
background: white;
|
||||
padding: 10px;
|
||||
margin-left: -708px;
|
||||
margin-top: -10px;
|
||||
}
|
||||
#tab1Div{
|
||||
border-left: 0px;
|
||||
border-right: 0px;
|
||||
}
|
||||
#tab1Div th{
|
||||
border-left: 0px;
|
||||
border-right: 0px;
|
||||
}
|
||||
#tab1Div td{
|
||||
border-left: 0px;
|
||||
border-right: 0px;
|
||||
}
|
||||
#tab2Div{
|
||||
border-left: 0px;
|
||||
border-right: 0px;
|
||||
}
|
||||
#tab2Div th{
|
||||
border-left: 0px;
|
||||
border-right: 0px;
|
||||
}
|
||||
#tab2Div td{
|
||||
border-left: 0px;
|
||||
border-right: 0px;
|
||||
}
|
||||
#tab3Div{
|
||||
border-left: 0px;
|
||||
border-right: 0px;
|
||||
}
|
||||
#tab3Div th{
|
||||
border-left: 0px;
|
||||
border-right: 0px;
|
||||
}
|
||||
#tab3Div td{
|
||||
border-left: 0px;
|
||||
border-right: 0px;
|
||||
}
|
||||
#tab4Div{
|
||||
border-left: 0px;
|
||||
border-right: 0px;
|
||||
}
|
||||
#tab4Div th{
|
||||
border-left: 0px;
|
||||
border-right: 0px;
|
||||
}
|
||||
#tab4Div td{
|
||||
border-left: 0px;
|
||||
border-right: 0px;
|
||||
}
|
||||
.fixed-table-container{
|
||||
border: none;
|
||||
}
|
||||
.modal-full {
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
<script type="text/javascript">
|
||||
var fileGroupList = []
|
||||
$(function () {
|
||||
var flg=${doNotUpload};
|
||||
// alert(flg);
|
||||
flg=flg+'';
|
||||
if(flg=='true'){
|
||||
// alert(flg);
|
||||
$("#uploadDiv").hide();
|
||||
}
|
||||
|
||||
initTable();
|
||||
|
||||
});
|
||||
|
||||
function initTable() {
|
||||
console.log( ext.basePath)
|
||||
$.post(ext.contextPath + '/safety/SafetyFiles/list.do', {
|
||||
bizId: '${bizId}',
|
||||
functionCode: '${functionCode}',
|
||||
statusCode: '${statusCode}'
|
||||
}, function (data) {
|
||||
let res = JSON.parse(data);
|
||||
let divHeight = 0
|
||||
$('#tab1Div').html("");
|
||||
$('#tab2Div').html("");
|
||||
$('#tab3Div').html("");
|
||||
$('#tab4Div').html("");
|
||||
$('#tab5Div').html("");
|
||||
$('#tab6Div').html("");
|
||||
$('#tab7Div').html("");
|
||||
$('#tab8Div').html("");
|
||||
$('#tab9Div').html("");
|
||||
|
||||
res.result.forEach((item, index) => {
|
||||
let key = "tab" + (index + 1);
|
||||
let title = item.fileListTitle;
|
||||
initSingleTable(key, title, item.fileList,item.isEditable, function (dom) {
|
||||
// setTimeout(function () {
|
||||
divHeight += dom.height()
|
||||
$('.borde').css({'height': Math.abs(divHeight) + 100 + 'px'})
|
||||
// },500)
|
||||
})
|
||||
})
|
||||
$('#saveFile').val();
|
||||
$('#updateFile').val();
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
function updateFileClick(fileId) {
|
||||
$('#fileId').val(fileId);
|
||||
$('#updateFile').click();
|
||||
}
|
||||
function imgModalClose() {
|
||||
closeModal("imgModal");
|
||||
}
|
||||
//点击之后放到图片
|
||||
window.operateEvents = {
|
||||
'click .view': function (e, value, row, index) {
|
||||
let str = '';
|
||||
$(".view").each(function(){
|
||||
let fileName = $(this).data("name");
|
||||
let text = $(this).data("text");
|
||||
if(fileName!=null && fileName!=undefined && fileName!=''){
|
||||
let url = ext.contextPath+'/safety/SafetyFiles/toFindImg?imgUrl='+ fileName;
|
||||
str += '<div class="col-md-6"><span>'+text+'</span>' +
|
||||
'<img src="'+url+'" style="width: 100%;" alt="'+text+'">' +
|
||||
'</div>';
|
||||
}
|
||||
});
|
||||
$('#viewer').html(str);
|
||||
stopBubbleDefaultEvent();
|
||||
openModal('imgModal');
|
||||
/*layer.open({
|
||||
type: 1,
|
||||
title: false,
|
||||
closeBtn: 0,
|
||||
area: ['60%', '80%'],
|
||||
skin: 'layui-layer-nobg', //没有背景色
|
||||
shadeClose: true,
|
||||
content: '<img style="width: 100%;height: 100%" src="'+url+'"/>'
|
||||
});*/
|
||||
},
|
||||
}
|
||||
|
||||
|
||||
function initSingleTable(key, title, data,isEditable, callback) {
|
||||
$('#' + key + 'Div').html('');
|
||||
$('#' + key + 'Div').html("<table id=\"" + key + "\"></table>");
|
||||
|
||||
$("#" + key).bootstrapTable({ // 对应table标签的id
|
||||
data: data,
|
||||
cache: false, // 设置为 false 禁用 AJAX 数据缓存， 默认为true
|
||||
striped: false, //表格显示条纹，默认为false
|
||||
pagination: false, // 在表格底部显示分页组件，默认false
|
||||
queryParams: function (params) { // 请求服务器数据时发送的参数，可以在这里添加额外的查询参数，返回false则终止请求
|
||||
return {
|
||||
functionCode: 8,
|
||||
statusCode: 1
|
||||
}
|
||||
},
|
||||
sortName: 'id', // 要排序的字段
|
||||
sortOrder: 'desc', // 排序规则
|
||||
columns: [
|
||||
{
|
||||
field: '', // 返回json数据中的name
|
||||
title: title, // 表格表头显示文字
|
||||
align: 'center', // 左右居中
|
||||
valign: 'middle',
|
||||
width: 40, // 上下居中
|
||||
}, {
|
||||
field: 'originalFileName', // 返回json数据中的name
|
||||
title: '', // 表格表头显示文字
|
||||
align: 'center', // 左右居中
|
||||
valign: 'middle',
|
||||
width: 620, // 上下居中
|
||||
//定义点击之后放大图片的事件
|
||||
events: 'operateEvents',
|
||||
formatter : function (value, row, index) {
|
||||
if (row.originalFileName.includes('.jpg') || row.originalFileName.includes('.JPG')
|
||||
|| row.originalFileName.includes('.png')|| row.originalFileName.includes('.PNG')
|
||||
|| row.originalFileName.includes('.gif')|| row.originalFileName.includes('.GIF')){
|
||||
var s = '<a class="view" data-name="'+row.fileName+'" data-text="'+value+'" href="javascript:void(0)">' +
|
||||
value +
|
||||
'</a>';
|
||||
return s;
|
||||
|
||||
// '<img style="width:50px;height:40px;" src="'+ext.contextPath+'/safety/SafetyFiles/toFindImg?imgUrl='+ row.fileName+'" alt="">'
|
||||
// return "<img style='width: 50px;height: 50px;' src='" + row.absolutePath + "' alt=''>"
|
||||
}else {
|
||||
return value
|
||||
}
|
||||
}
|
||||
}, {
|
||||
title: "",
|
||||
align: 'center',
|
||||
valign: 'middle',
|
||||
width: 120, // 定义列的宽度，单位为像素px
|
||||
formatter: function (value, row, index) {
|
||||
var btn = '<div class="btn-group">' ;
|
||||
|
||||
if (isEditable) {
|
||||
|
||||
btn += '<button class="btn btn-default btn-sm" onclick="updateFileClick(\'' + row.id + '\')"><i class="fa fa-edit"></i></button>' ;
|
||||
btn += '<button class="btn btn-default btn-sm" onclick="filedel(\'' + row.id + '\')"><i class="fa fa-trash-o"></i></button>' ;
|
||||
}else {
|
||||
btn += '<button class="btn btn-default btn-sm" onclick="fileDownload(\'' + row.id + '\')"><i class="fa fa-paperclip"></i></button>' ;
|
||||
|
||||
}
|
||||
btn += '</div>';
|
||||
return btn;
|
||||
}
|
||||
}],
|
||||
onLoadSuccess: function (data) { //加载成功时执行
|
||||
$(".bs-checkbox").css({'text-align': 'left', 'vertical-align': 'middle'})
|
||||
$(key).bootstrapTable("load", data)
|
||||
},
|
||||
onLoadError: function () { //加载失败时执行
|
||||
console.info("加载数据失败");
|
||||
}
|
||||
|
||||
})
|
||||
|
||||
|
||||
var intervalKey = setInterval(function () {
|
||||
if ($('#' + key + 'Div').height() > 0) {
|
||||
if (callback) {
|
||||
callback($('#' + key + 'Div'))
|
||||
}
|
||||
clearInterval(intervalKey)
|
||||
}
|
||||
}, 200)
|
||||
|
||||
}
|
||||
|
||||
function saveFileClick() {
|
||||
$('#saveFile').click();
|
||||
};
|
||||
|
||||
var filedel = function (id) {
|
||||
$.post(ext.contextPath + '/safety/SafetyFiles/delete.do', {
|
||||
fileId: id
|
||||
}, function (data) {
|
||||
if (data.code == 1) {
|
||||
showAlert('s', '文件删除成功！');
|
||||
initTable();
|
||||
} else {
|
||||
showAlert('d', '删除失败');
|
||||
}
|
||||
}, 'json');
|
||||
};
|
||||
var fileDownload = function (id) {
|
||||
window.location.href = ext.contextPath + '/safety/SafetyFiles/download.do?fileId=' + id;
|
||||
window.event.returnValue=false
|
||||
}
|
||||
|
||||
var fileSave = function () {
|
||||
var formData = new FormData($("#saveForm")[0]);
|
||||
$.ajax({
|
||||
url: ext.contextPath + "/safety/SafetyFiles/save.do",
|
||||
type: 'POST',
|
||||
data: formData,
|
||||
async: false,
|
||||
cache: false,
|
||||
contentType: false,
|
||||
processData: false,
|
||||
dataType: 'json',
|
||||
success: function (data) {
|
||||
// console.log(data)
|
||||
if (data.code == 1) {
|
||||
showAlert('s', '文件上传成功！');
|
||||
initTable()
|
||||
} else {
|
||||
showAlert('d', '保存失败！' + data.msg);
|
||||
}
|
||||
},
|
||||
error: function (data) {
|
||||
}
|
||||
});
|
||||
};
|
||||
var fileUpdate = function () {
|
||||
var formData = new FormData($("#updateForm")[0]);
|
||||
console.log(formData)
|
||||
$.ajax({
|
||||
url: ext.contextPath + "/safety/SafetyFiles/update.do",
|
||||
type: 'POST',
|
||||
data: formData,
|
||||
async: false,
|
||||
cache: false,
|
||||
contentType: false,
|
||||
processData: false,
|
||||
dataType: 'json',
|
||||
success: function (data) {
|
||||
// console.log(data)
|
||||
if (data.code == 1) {
|
||||
showAlert('s', '文件上次成功！');
|
||||
initTable()
|
||||
} else {
|
||||
showAlert('d', '保存失败！' + data.msg);
|
||||
}
|
||||
},
|
||||
error: function (data) {
|
||||
}
|
||||
});
|
||||
};
|
||||
</script>
|
||||
<div >
|
||||
<%-- <p>附件列表</p>--%>
|
||||
<div class="borde">
|
||||
<span>附件列表</span>
|
||||
<div id="tableListDiv" class="col-sm-12 " style="margin-top: 30px;margin-left: 5px">
|
||||
<div id="tab1Div"></div>
|
||||
<div id="tab2Div"></div>
|
||||
<div id="tab3Div"></div>
|
||||
<div id="tab4Div"></div>
|
||||
<div id="tab5Div"></div>
|
||||
<div id="tab6Div"></div>
|
||||
<div id="tab7Div"></div>
|
||||
<div id="tab8Div"></div>
|
||||
<div id="tab9Div"></div>
|
||||
|
||||
|
||||
</div>
|
||||
<div id="uploadDiv" >
|
||||
<label class="col-sm-2 control-label">
|
||||
<form id="saveForm" enctype="multipart/form-data">
|
||||
<button type="button" class="btn btn-default btn-file" onclick="saveFileClick()"
|
||||
id="btn_save"><i class="fa fa-paperclip"></i>上传附件
|
||||
</button>
|
||||
<input type="file" name="saveFile" id="saveFile" multiple class="file-loading"
|
||||
onchange="fileSave()"/>
|
||||
<input type="hidden" name="bizId" value="${bizId}"/>
|
||||
<input type="hidden" name="functionCode" value="${functionCode}"/>
|
||||
<input type="hidden" name="statusCode" value="${statusCode}"/>
|
||||
</form>
|
||||
|
||||
<form id="updateForm" enctype="multipart/form-data" style="display: none">
|
||||
<input type="file" name="updateFile" id="updateFile" multiple class="file-loading"
|
||||
onchange="fileUpdate()"/>
|
||||
<input type="hidden" id="fileId" name="fileId" value=""/>
|
||||
</form>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal fade" id="imgModal">
|
||||
<div class="modal-dialog modal-full">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<button type="button" class="close" onclick="imgModalClose()" >
|
||||
<span aria-hidden="true">×</span></button>
|
||||
<h4 class="modal-title">查看图片</h4>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div class="row" id="viewer">
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-default" onclick="imgModalClose()">关闭</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- /.modal-content -->
|
||||
</div>
|
||||
<!-- /.modal-dialog -->
|
||||
</div>
|
||||
Reference in New Issue
Block a user