Tenlion/system-operator
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

附件上传问题

Browse Source
This commit is contained in:
wanggeng 2024-12-10 11:14:52 +08:00
parent 9395e58307
commit 28487b8e98
2 changed files with 80 additions and 337 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

194
src/main/resources/templates/wg/show.html
View File

@ -10,6 +10,12 @@
<link rel="stylesheet" href="assets/layuiadmin/layui/css/layui.css" media="all"> <link rel="stylesheet" href="assets/layuiadmin/layui/css/layui.css" media="all">
<link rel="stylesheet" href="assets/layuiadmin/style/admin.css" media="all"> <link rel="stylesheet" href="assets/layuiadmin/style/admin.css" media="all">
<link rel="stylesheet" type="text/css" href="assets/js/vendor/viewer/viewer.min.css"> <link rel="stylesheet" type="text/css" href="assets/js/vendor/viewer/viewer.min.css">
<style>
.img-container {color: #bbbbbb; padding: 5px 0;}
.img-container .img {display: inline-block; position: relative; width: 150px; height: 100px; padding: 5px; border: 1px solid #eeeeee; box-sizing: border-box; cursor: pointer;}
.img-container .img img {width: 138px; height: 88px; object-fit: contain;}
.img-container .img .img-remove-btn {width: 20px; height: 20px; line-height: 20px; display: inline-block; position: absolute; top: 0; right: 0; text-align: center; background-color: #FF5722; color: #FFFFFF;}
</style>
</head> </head>
<body> <body>
<div class="layui-fluid layui-anim layui-anim-fadein"> <div class="layui-fluid layui-anim layui-anim-fadein">
@ -96,48 +102,7 @@
<label class="layui-form-label">票据文件</label> <label class="layui-form-label">票据文件</label>
<div class="layui-input-block"> <div class="layui-input-block">
<input type="hidden" id="fileId" name="fileId"> <input type="hidden" id="fileId" name="fileId">
<div class="layui-btn-container" id="fileIdFileBox" style="border: 1px solid #e6e6e6;"></div> <div class="img-container" id="fileIdFileBox">上传票据</div>
<script id="fileIdFileDownload" type="text/html">
{{# var fileName = 'fileId'; }}
{{# if(d[fileName] != '') { }}
{{# var files = d[fileName];}}
{{# for(var i = 0, item = files[i]; item = files[i++];) { }}
<span class="layui-btn-group">
<div class="upload-file-box">
<a class="upload-file-a" onclick="window.open('route/file/download/true/{{item.fileId}}')" href="javascript:void(0)" title="{{item.fileName}} - 点击下载">
{{# if(item.fileType == 'doc' || item.fileType == 'docx') { }}
<img src="assets/images/filetype/word.png"/>
{{# } else if(item.fileType == 'xls' || item.fileType == 'xlsx') { }}
<img src="assets/images/filetype/excel.png"/>
{{# } else if(item.fileType == 'ppt' || item.fileType == 'pptx') { }}
<img src="assets/images/filetype/ppt.png"/>
{{# } else if(item.fileType == 'apk') { }}
<img src="assets/images/filetype/apk.png"/>
{{# } else if(item.fileType == 'pdf') { }}
<img src="assets/images/filetype/pdf.png"/>
{{# } else if(item.fileType == 'rar') { }}
<img src="assets/images/filetype/rar.png"/>
{{# } else if(item.fileType == 'zip') { }}
<img src="assets/images/filetype/zip.png"/>
{{# } else if(item.fileType == 'txt') { }}
<img src="assets/images/filetype/txt.png"/>
{{# } else { }}
<img src="assets/images/filetype/file.png"/>
{{# } }}
</a>
<span class="upload-file-title">{{item.fileName}}</span>
</div>
</span>
{{# } }}
{{# } }}
{{# if(d[fileName].length < 1) { }}
<div class="upload-image-box" style="width: auto; height: auto; padding: 5px;">
<a href="javascript:void(0);" lay-form-button data-explain="平台打款凭证" data-name="fileId" lay-filter="fileIdUploadFile">
<i class="fa fa-plus-square-o" style="font-size: 70px;"></i>
</a>
</div>
{{# } }}
</script>
</div> </div>
</div> </div>
<div class="layui-form-item"> <div class="layui-form-item">
@ -176,138 +141,31 @@
var wangEditor = window.wangEditor; var wangEditor = window.wangEditor;
var wangEditorObj = {}; var wangEditorObj = {};
var viewerObj = {}; var viewerObj = {};
var fileIdArray = [];
function closeBox() { function closeBox() {
parent.layer.close(parent.layer.getFrameIndex(window.name)); parent.layer.close(parent.layer.getFrameIndex(window.name));
} }
function refreshDownloadTemplet(fileName, file) { function renderFileId() {
var dataRander = {}; var $fileIdFileBox = $('#fileIdFileBox');
dataRander[fileName] = file; var files = '';
dataRander["AgentServerUrl"] = "[[${AgentServerUrl}]]"; $.each(fileIdArray, function(index, item) {
files += `
laytpl(document.getElementById(fileName +'FileDownload').innerHTML).render(dataRander, function(html) { <div class="img" onclick="window.open('route/file/download/true/${item}')">
document.getElementById(fileName +'FileBox').innerHTML = html; <img src="assets/images/filetype/pdf.png">
}); </div>
} `
})
// 初始化文件列表 if(!files) {
function initFileList(fileName, ids, callback) { files = '最多可上传一份附件';
var dataForm = {};
dataForm[fileName] = ids;
dataForm["AgentServerUrl"] = "[[${AgentServerUrl}]]";
form.val('dataForm', dataForm);
if(!ids) {
refreshDownloadTemplet(fileName, []);
if(callback) {
callback(fileName, []);
}
return;
} }
$fileIdFileBox.empty();
top.restAjax.get(top.restAjax.path( (fileName == 'fileId' ? '' : AgentServerUrl) + 'api/file/list', []), { $fileIdFileBox.append(files);
ids: ids
}, null, function(code, data) {
refreshDownloadTemplet(fileName, data);
if(callback) {
callback(fileName, data);
}
}, function(code, data) {
top.dialog.msg(data.msg);
});
} }
// 初始化票据类型文件上传 function setFileId() {
function initFileIdUploadFile() { $('#fileId').val(fileIdArray.join(','));
var files = $('#fileId').val();
initFileList('fileId', files, function(fileName) {
});
form.on('button(fileIdUploadFile)', function(obj) {
var name = this.dataset.name;
var explain = this.dataset.explain;
top.dialog.file({
type: 'file',
title: '上传'+ explain,
width: '400px',
height: '420px',
maxFileCount: '1',
onClose: function() {
var uploadFileArray = top.dialog.dialogData.uploadFileArray;
if(typeof(uploadFileArray) != 'undefined' && uploadFileArray.length > 0) {
var files = $('#'+ name).val();
for(var j = 0, file = uploadFileArray[j]; file = uploadFileArray[j++];) {
if(files.length > 0) {
files += ',';
}
files += file.data;
}
initFileList(name, files, function(fileName) {
viewerObj[fileName].update();
});
}
}
});
});
form.on('button(fileIdRemoveFile)', function(obj) {
var name = this.dataset.name;
var id = this.dataset.id;
var files = $('#'+ name).val().replace(id, '');
files = files.replace(/\,+/g, ',');
if(files.charAt(0) == ',') {
files = files.substring(1);
}
if(files.charAt(files.length - 1) == ',') {
files = files.substring(0, files.length - 1);
}
initFileList(name, files, function(fileName) {
viewerObj[fileName].update();
});
});
}
// 初始化票据文件文件上传
function initInvoiceFileUploadFile() {
var files = $('#invoiceFile').val();
initFileList('invoiceFile', files);
form.on('button(invoiceFileUploadFile)', function(obj) {
var name = this.dataset.name;
var explain = this.dataset.explain;
top.dialog.file({
type: 'file',
title: '上传'+ explain,
width: '400px',
height: '420px',
maxFileCount: '1',
onClose: function() {
var uploadFileArray = top.dialog.dialogData.uploadFileArray;
if(typeof(uploadFileArray) != 'undefined' && uploadFileArray.length > 0) {
var files = $('#'+ name).val();
for(var j = 0, file = uploadFileArray[j]; file = uploadFileArray[j++];) {
if(files.length > 0) {
files += ',';
}
files += file.data;
}
initFileList(name, files, function() {});
}
}
});
});
form.on('button(invoiceFileRemoveFile)', function(obj) {
var name = this.dataset.name;
var id = this.dataset.id;
var files = $('#'+ name).val().replace(id, '');
files = files.replace(/\,+/g, ',');
if(files.charAt(0) == ',') {
files = files.substring(1);
}
if(files.charAt(files.length - 1) == ',') {
files = files.substring(0, files.length - 1);
}
initFileList(name, files);
});
} }
// 初始化内容 // 初始化内容
@ -335,11 +193,13 @@
} }
form.val('dataForm', dataFormData); form.val('dataForm', dataFormData);
form.render(null, 'dataForm'); form.render(null, 'dataForm');
initFileIdUploadFile();
if (data.invoiceStatus == '完成') { if (data.invoiceStatus == '完成') {
$("#fapiao1").show(); $("#fapiao1").show();
$("#fapiao2").show(); $("#fapiao2").show();
} }
fileIdArray = data.fileId.split(',');
renderFileId()
}, function(code, data) { }, function(code, data) {
top.dialog.msg(data.msg); top.dialog.msg(data.msg);
}, function() { }, function() {

223
src/main/resources/templates/wg/update.html
View File

@ -10,6 +10,12 @@
<link rel="stylesheet" href="assets/layuiadmin/layui/css/layui.css" media="all"> <link rel="stylesheet" href="assets/layuiadmin/layui/css/layui.css" media="all">
<link rel="stylesheet" href="assets/layuiadmin/style/admin.css" media="all"> <link rel="stylesheet" href="assets/layuiadmin/style/admin.css" media="all">
<link rel="stylesheet" type="text/css" href="assets/js/vendor/viewer/viewer.min.css"> <link rel="stylesheet" type="text/css" href="assets/js/vendor/viewer/viewer.min.css">
<style>
.img-container {color: #bbbbbb; padding: 5px 0;}
.img-container .img {display: inline-block; position: relative; width: 150px; height: 100px; padding: 5px; border: 1px solid #eeeeee; box-sizing: border-box; cursor: pointer;}
.img-container .img img {width: 138px; height: 88px; object-fit: contain;}
.img-container .img .img-remove-btn {width: 20px; height: 20px; line-height: 20px; display: inline-block; position: absolute; top: 0; right: 0; text-align: center; background-color: #FF5722; color: #FFFFFF;}
</style>
</head> </head>
<body> <body>
<div class="layui-fluid layui-anim layui-anim-fadein"> <div class="layui-fluid layui-anim layui-anim-fadein">
@ -85,54 +91,12 @@
</div> </div>
<blockquote class="layui-elem-quote">发票信息</blockquote> <blockquote class="layui-elem-quote">发票信息</blockquote>
<div class="layui-form-item layui-form-text"> <div class="layui-form-item layui-form-text">
<label class="layui-form-label">票据文件</label> <div class="layui-form-item layui-form-text">
<div class="layui-input-block"> <button type="button" class="layui-btn layui-btn-sm" id="uploadFileIdBtn"><i class="fa fa-upload"></i> 上传票据(PDF)</button>
<input type="hidden" id="fileId" name="fileId"> <div class="layui-input-block">
<div class="layui-btn-container" id="fileIdFileBox" style="border: 1px solid #e6e6e6;"></div> <input type="hidden" id="fileId" name="fileId">
<script id="fileIdFileDownload" type="text/html"> <div class="img-container" id="fileIdFileBox">上传票据</div>
{{# var fileName = 'fileId'; }} </div>
{{# if(d[fileName] != '') { }}
{{# var files = d[fileName];}}
{{# for(var i = 0, item = files[i]; item = files[i++];) { }}
<span class="layui-btn-group">
<div class="upload-file-box">
<a class="upload-file-a" onclick="window.open('route/file/download/true/{{item.fileId}}')" href="javascript:void(0)" title="{{item.fileName}} - 点击下载">
{{# if(item.fileType == 'doc' || item.fileType == 'docx') { }}
<img src="assets/images/filetype/word.png"/>
{{# } else if(item.fileType == 'xls' || item.fileType == 'xlsx') { }}
<img src="assets/images/filetype/excel.png"/>
{{# } else if(item.fileType == 'ppt' || item.fileType == 'pptx') { }}
<img src="assets/images/filetype/ppt.png"/>
{{# } else if(item.fileType == 'apk') { }}
<img src="assets/images/filetype/apk.png"/>
{{# } else if(item.fileType == 'pdf') { }}
<img src="assets/images/filetype/pdf.png"/>
{{# } else if(item.fileType == 'rar') { }}
<img src="assets/images/filetype/rar.png"/>
{{# } else if(item.fileType == 'zip') { }}
<img src="assets/images/filetype/zip.png"/>
{{# } else if(item.fileType == 'txt') { }}
<img src="assets/images/filetype/txt.png"/>
{{# } else { }}
<img src="assets/images/filetype/file.png"/>
{{# } }}
</a>
<span class="upload-file-title">{{item.fileName}}</span>
<a class="layui-btn layui-btn-xs layui-btn-danger text-danger remove-file" href="javascript:void(0);" lay-form-button data-id="{{item.fileId}}" data-name="{{fileName}}" lay-filter="fileIdRemoveFile">
<i class="fa fa-trash-o"></i>
</a>
</div>
</span>
{{# } }}
{{# } }}
{{# if(d[fileName].length < 1) { }}
<div class="upload-image-box" style="width: auto; height: auto; padding: 5px;">
<a href="javascript:void(0);" lay-form-button data-explain="平台打款凭证" data-name="fileId" lay-filter="fileIdUploadFile">
<i class="fa fa-plus-square-o" style="font-size: 70px;"></i>
</a>
</div>
{{# } }}
</script>
</div> </div>
</div> </div>
<div class="layui-form-item"> <div class="layui-form-item">
@ -163,147 +127,65 @@
base: 'assets/layuiadmin/' //静态资源所在路径 base: 'assets/layuiadmin/' //静态资源所在路径
}).extend({ }).extend({
index: 'lib/index' //主入口模块 index: 'lib/index' //主入口模块
}).use(['index', 'form', 'laydate', 'laytpl'], function(){ }).use(['index', 'form', 'laydate', 'laytpl', 'upload'], function(){
var $ = layui.$; var $ = layui.$;
var form = layui.form; var form = layui.form;
var laytpl = layui.laytpl; var laytpl = layui.laytpl;
var laydate = layui.laydate; var laydate = layui.laydate;
var upload = layui.upload;
var invoiceId = top.restAjax.params(window.location.href).invoiceId; var invoiceId = top.restAjax.params(window.location.href).invoiceId;
var AgentServerUrl = "[[${AgentServerUrl}]]"; var AgentServerUrl = "[[${AgentServerUrl}]]";
var wangEditor = window.wangEditor; var wangEditor = window.wangEditor;
var wangEditorObj = {}; var wangEditorObj = {};
var viewerObj = {}; var viewerObj = {};
var fileIdArray = [];
function closeBox() { function closeBox() {
parent.layer.close(parent.layer.getFrameIndex(window.name)); parent.layer.close(parent.layer.getFrameIndex(window.name));
} }
function refreshDownloadTemplet(fileName, file) { function renderFileId() {
var dataRander = {}; var $fileIdFileBox = $('#fileIdFileBox');
dataRander[fileName] = file; var files = '';
dataRander["AgentServerUrl"] = "[[${AgentServerUrl}]]"; $.each(fileIdArray, function(index, item) {
files += `
laytpl(document.getElementById(fileName +'FileDownload').innerHTML).render(dataRander, function(html) { <div class="img" onclick="window.open('route/file/download/true/${item}')">
document.getElementById(fileName +'FileBox').innerHTML = html; <img src="assets/images/filetype/pdf.png">
}); <a href="javascript:void(0);" class="img-remove-btn" data-type="logo" data-index="index"><i class="fa fa-remove"></i></a>
} </div>
`
// 初始化文件列表 })
function initFileList(fileName, ids, callback) { if(!files) {
var dataForm = {}; files = '最多可上传一份附件';
dataForm[fileName] = ids;
dataForm["AgentServerUrl"] = "[[${AgentServerUrl}]]";
form.val('dataForm', dataForm);
if(!ids) {
refreshDownloadTemplet(fileName, []);
if(callback) {
callback(fileName, []);
}
return;
} }
$fileIdFileBox.empty();
top.restAjax.get(top.restAjax.path( (fileName == 'fileId' ? '' : AgentServerUrl) + 'api/file/list', []), { $fileIdFileBox.append(files);
ids: ids
}, null, function(code, data) {
refreshDownloadTemplet(fileName, data);
if(callback) {
callback(fileName, data);
}
}, function(code, data) {
top.dialog.msg(data.msg);
});
} }
// 初始化票据类型文件上传 function setFileId() {
function initFileIdUploadFile() { $('#fileId').val(fileIdArray.join(','));
var files = $('#fileId').val();
initFileList('fileId', files, function(fileName) {
});
form.on('button(fileIdUploadFile)', function(obj) {
var name = this.dataset.name;
var explain = this.dataset.explain;
top.dialog.file({
type: 'file',
title: '上传'+ explain,
width: '400px',
height: '420px',
maxFileCount: '1',
onClose: function() {
var uploadFileArray = top.dialog.dialogData.uploadFileArray;
if(typeof(uploadFileArray) != 'undefined' && uploadFileArray.length > 0) {
var files = $('#'+ name).val();
for(var j = 0, file = uploadFileArray[j]; file = uploadFileArray[j++];) {
if(files.length > 0) {
files += ',';
}
files += file.data;
}
initFileList(name, files, function(fileName) {
viewerObj[fileName].update();
});
}
}
});
});
form.on('button(fileIdRemoveFile)', function(obj) {
var name = this.dataset.name;
var id = this.dataset.id;
var files = $('#'+ name).val().replace(id, '');
files = files.replace(/\,+/g, ',');
if(files.charAt(0) == ',') {
files = files.substring(1);
}
if(files.charAt(files.length - 1) == ',') {
files = files.substring(0, files.length - 1);
}
initFileList(name, files, function(fileName) {
viewerObj[fileName].update();
});
});
} }
function initEvent() {
// 初始化票据文件文件上传 upload.render({
function initInvoiceFileUploadFile() { elem: '#uploadFileIdBtn',
var files = $('#invoiceFile').val(); url: top.restAjax.path('api/file/uploadfile', []),
initFileList('invoiceFile', files); field: 'file',
accept: 'file',
form.on('button(invoiceFileUploadFile)', function(obj) { acceptMime: 'application/pdf',
var name = this.dataset.name; exts: 'pdf',
var explain = this.dataset.explain; done: function(res) {
top.dialog.file({ top.dialog.msg('上传成功');
type: 'file', fileIdArray.push(res.data);
title: '上传'+ explain, renderFileId();
width: '400px', if(fileIdArray.length >= 1) {
height: '420px', this.elem.attr('disabled', 'disabled');
maxFileCount: '1', this.elem.addClass('layui-disabled')
onClose: function() {
var uploadFileArray = top.dialog.dialogData.uploadFileArray;
if(typeof(uploadFileArray) != 'undefined' && uploadFileArray.length > 0) {
var files = $('#'+ name).val();
for(var j = 0, file = uploadFileArray[j]; file = uploadFileArray[j++];) {
if(files.length > 0) {
files += ',';
}
files += file.data;
}
initFileList(name, files, function() {});
}
} }
}); setFileId();
}); },
form.on('button(invoiceFileRemoveFile)', function(obj) { error: function(){
var name = this.dataset.name; top.dialog.msg('上传异常');
var id = this.dataset.id;
var files = $('#'+ name).val().replace(id, '');
files = files.replace(/\,+/g, ',');
if(files.charAt(0) == ',') {
files = files.substring(1);
} }
if(files.charAt(files.length - 1) == ',') {
files = files.substring(0, files.length - 1);
}
initFileList(name, files);
}); });
} }
@ -318,7 +200,7 @@
} }
form.val('dataForm', dataFormData); form.val('dataForm', dataFormData);
form.render(null, 'dataForm'); form.render(null, 'dataForm');
initFileIdUploadFile(); renderFileId();
}, function(code, data) { }, function(code, data) {
top.dialog.msg(data.msg); top.dialog.msg(data.msg);
}, function() { }, function() {
@ -328,6 +210,7 @@
}); });
} }
initData(); initData();
initEvent();
// 提交表单 // 提交表单
form.on('submit(submitForm2)', function(formData) { form.on('submit(submitForm2)', function(formData) {