附件上传问题
This commit is contained in:
parent
9395e58307
commit
28487b8e98
@ -10,6 +10,12 @@
|
||||
<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" 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>
|
||||
<body>
|
||||
<div class="layui-fluid layui-anim layui-anim-fadein">
|
||||
@ -96,48 +102,7 @@
|
||||
<label class="layui-form-label">票据文件</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="hidden" id="fileId" name="fileId">
|
||||
<div class="layui-btn-container" id="fileIdFileBox" style="border: 1px solid #e6e6e6;"></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 class="img-container" id="fileIdFileBox">上传票据</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
@ -176,138 +141,31 @@
|
||||
var wangEditor = window.wangEditor;
|
||||
var wangEditorObj = {};
|
||||
var viewerObj = {};
|
||||
var fileIdArray = [];
|
||||
|
||||
function closeBox() {
|
||||
parent.layer.close(parent.layer.getFrameIndex(window.name));
|
||||
}
|
||||
|
||||
function refreshDownloadTemplet(fileName, file) {
|
||||
var dataRander = {};
|
||||
dataRander[fileName] = file;
|
||||
dataRander["AgentServerUrl"] = "[[${AgentServerUrl}]]";
|
||||
|
||||
laytpl(document.getElementById(fileName +'FileDownload').innerHTML).render(dataRander, function(html) {
|
||||
document.getElementById(fileName +'FileBox').innerHTML = html;
|
||||
});
|
||||
}
|
||||
|
||||
// 初始化文件列表
|
||||
function initFileList(fileName, ids, callback) {
|
||||
var dataForm = {};
|
||||
dataForm[fileName] = ids;
|
||||
dataForm["AgentServerUrl"] = "[[${AgentServerUrl}]]";
|
||||
form.val('dataForm', dataForm);
|
||||
|
||||
if(!ids) {
|
||||
refreshDownloadTemplet(fileName, []);
|
||||
if(callback) {
|
||||
callback(fileName, []);
|
||||
}
|
||||
return;
|
||||
function renderFileId() {
|
||||
var $fileIdFileBox = $('#fileIdFileBox');
|
||||
var files = '';
|
||||
$.each(fileIdArray, function(index, item) {
|
||||
files += `
|
||||
<div class="img" onclick="window.open('route/file/download/true/${item}')">
|
||||
<img src="assets/images/filetype/pdf.png">
|
||||
</div>
|
||||
`
|
||||
})
|
||||
if(!files) {
|
||||
files = '最多可上传一份附件';
|
||||
}
|
||||
|
||||
top.restAjax.get(top.restAjax.path( (fileName == 'fileId' ? '' : AgentServerUrl) + 'api/file/list', []), {
|
||||
ids: ids
|
||||
}, null, function(code, data) {
|
||||
refreshDownloadTemplet(fileName, data);
|
||||
if(callback) {
|
||||
callback(fileName, data);
|
||||
}
|
||||
}, function(code, data) {
|
||||
top.dialog.msg(data.msg);
|
||||
});
|
||||
$fileIdFileBox.empty();
|
||||
$fileIdFileBox.append(files);
|
||||
}
|
||||
|
||||
// 初始化票据类型文件上传
|
||||
function initFileIdUploadFile() {
|
||||
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);
|
||||
});
|
||||
function setFileId() {
|
||||
$('#fileId').val(fileIdArray.join(','));
|
||||
}
|
||||
|
||||
// 初始化内容
|
||||
@ -335,11 +193,13 @@
|
||||
}
|
||||
form.val('dataForm', dataFormData);
|
||||
form.render(null, 'dataForm');
|
||||
initFileIdUploadFile();
|
||||
if (data.invoiceStatus == '完成') {
|
||||
$("#fapiao1").show();
|
||||
$("#fapiao2").show();
|
||||
}
|
||||
|
||||
fileIdArray = data.fileId.split(',');
|
||||
renderFileId()
|
||||
}, function(code, data) {
|
||||
top.dialog.msg(data.msg);
|
||||
}, function() {
|
||||
|
||||
@ -10,6 +10,12 @@
|
||||
<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" 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>
|
||||
<body>
|
||||
<div class="layui-fluid layui-anim layui-anim-fadein">
|
||||
@ -85,54 +91,12 @@
|
||||
</div>
|
||||
<blockquote class="layui-elem-quote">发票信息</blockquote>
|
||||
<div class="layui-form-item layui-form-text">
|
||||
<label class="layui-form-label">票据文件</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="hidden" id="fileId" name="fileId">
|
||||
<div class="layui-btn-container" id="fileIdFileBox" style="border: 1px solid #e6e6e6;"></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>
|
||||
<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 class="layui-form-item layui-form-text">
|
||||
<button type="button" class="layui-btn layui-btn-sm" id="uploadFileIdBtn"><i class="fa fa-upload"></i> 上传票据(PDF)</button>
|
||||
<div class="layui-input-block">
|
||||
<input type="hidden" id="fileId" name="fileId">
|
||||
<div class="img-container" id="fileIdFileBox">上传票据</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
@ -163,147 +127,65 @@
|
||||
base: 'assets/layuiadmin/' //静态资源所在路径
|
||||
}).extend({
|
||||
index: 'lib/index' //主入口模块
|
||||
}).use(['index', 'form', 'laydate', 'laytpl'], function(){
|
||||
}).use(['index', 'form', 'laydate', 'laytpl', 'upload'], function(){
|
||||
var $ = layui.$;
|
||||
var form = layui.form;
|
||||
var laytpl = layui.laytpl;
|
||||
var laydate = layui.laydate;
|
||||
var upload = layui.upload;
|
||||
var invoiceId = top.restAjax.params(window.location.href).invoiceId;
|
||||
var AgentServerUrl = "[[${AgentServerUrl}]]";
|
||||
var wangEditor = window.wangEditor;
|
||||
var wangEditorObj = {};
|
||||
var viewerObj = {};
|
||||
var fileIdArray = [];
|
||||
|
||||
function closeBox() {
|
||||
parent.layer.close(parent.layer.getFrameIndex(window.name));
|
||||
}
|
||||
|
||||
function refreshDownloadTemplet(fileName, file) {
|
||||
var dataRander = {};
|
||||
dataRander[fileName] = file;
|
||||
dataRander["AgentServerUrl"] = "[[${AgentServerUrl}]]";
|
||||
|
||||
laytpl(document.getElementById(fileName +'FileDownload').innerHTML).render(dataRander, function(html) {
|
||||
document.getElementById(fileName +'FileBox').innerHTML = html;
|
||||
});
|
||||
}
|
||||
|
||||
// 初始化文件列表
|
||||
function initFileList(fileName, ids, callback) {
|
||||
var dataForm = {};
|
||||
dataForm[fileName] = ids;
|
||||
dataForm["AgentServerUrl"] = "[[${AgentServerUrl}]]";
|
||||
form.val('dataForm', dataForm);
|
||||
|
||||
if(!ids) {
|
||||
refreshDownloadTemplet(fileName, []);
|
||||
if(callback) {
|
||||
callback(fileName, []);
|
||||
}
|
||||
return;
|
||||
function renderFileId() {
|
||||
var $fileIdFileBox = $('#fileIdFileBox');
|
||||
var files = '';
|
||||
$.each(fileIdArray, function(index, item) {
|
||||
files += `
|
||||
<div class="img" onclick="window.open('route/file/download/true/${item}')">
|
||||
<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>
|
||||
`
|
||||
})
|
||||
if(!files) {
|
||||
files = '最多可上传一份附件';
|
||||
}
|
||||
|
||||
top.restAjax.get(top.restAjax.path( (fileName == 'fileId' ? '' : AgentServerUrl) + 'api/file/list', []), {
|
||||
ids: ids
|
||||
}, null, function(code, data) {
|
||||
refreshDownloadTemplet(fileName, data);
|
||||
if(callback) {
|
||||
callback(fileName, data);
|
||||
}
|
||||
}, function(code, data) {
|
||||
top.dialog.msg(data.msg);
|
||||
});
|
||||
$fileIdFileBox.empty();
|
||||
$fileIdFileBox.append(files);
|
||||
}
|
||||
|
||||
// 初始化票据类型文件上传
|
||||
function initFileIdUploadFile() {
|
||||
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 setFileId() {
|
||||
$('#fileId').val(fileIdArray.join(','));
|
||||
}
|
||||
|
||||
// 初始化票据文件文件上传
|
||||
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() {});
|
||||
}
|
||||
function initEvent() {
|
||||
upload.render({
|
||||
elem: '#uploadFileIdBtn',
|
||||
url: top.restAjax.path('api/file/uploadfile', []),
|
||||
field: 'file',
|
||||
accept: 'file',
|
||||
acceptMime: 'application/pdf',
|
||||
exts: 'pdf',
|
||||
done: function(res) {
|
||||
top.dialog.msg('上传成功');
|
||||
fileIdArray.push(res.data);
|
||||
renderFileId();
|
||||
if(fileIdArray.length >= 1) {
|
||||
this.elem.attr('disabled', 'disabled');
|
||||
this.elem.addClass('layui-disabled')
|
||||
}
|
||||
});
|
||||
});
|
||||
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);
|
||||
setFileId();
|
||||
},
|
||||
error: function(){
|
||||
top.dialog.msg('上传异常');
|
||||
}
|
||||
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.render(null, 'dataForm');
|
||||
initFileIdUploadFile();
|
||||
renderFileId();
|
||||
}, function(code, data) {
|
||||
top.dialog.msg(data.msg);
|
||||
}, function() {
|
||||
@ -328,6 +210,7 @@
|
||||
});
|
||||
}
|
||||
initData();
|
||||
initEvent();
|
||||
|
||||
// 提交表单
|
||||
form.on('submit(submitForm2)', function(formData) {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user