384 lines
13 KiB
Plaintext
384 lines
13 KiB
Plaintext
<!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>
|