Browse Source

[feat]

前端项目引入 file-input-language 识别语言的js文件
修改国税发票的上传组件,可以支持pdf的预览和下载。office类型文档的下载,图片类型的下载
dev
liuxiaoxu 1 month ago
parent
commit
dc30569420
  1. 128
      ruoyi-admin/src/main/resources/static/ajax/libs/bootstrap-fileinput/locales/zh.js
  2. 31
      ruoyi-admin/src/main/resources/templates/financial/taxInvoice/uploadInvoiceRmb.html
  3. 48
      ruoyi-admin/src/main/resources/templates/financial/taxInvoice/uploadInvoiceRmbDetail.html
  4. 11
      ruoyi-admin/src/main/resources/templates/financial/taxInvoice/uploadInvoiceUsd.html
  5. 33
      ruoyi-admin/src/main/resources/templates/financial/taxInvoice/uploadInvoiceUsdDetail.html
  6. 4
      ruoyi-admin/src/main/resources/templates/include.html

128
ruoyi-admin/src/main/resources/static/ajax/libs/bootstrap-fileinput/locales/zh.js

@ -0,0 +1,128 @@
/*!
* FileInput Chinese Translations
*
* This file must be loaded after 'fileinput.js'. Patterns in braces '{}', or
* any HTML markup tags in the messages must not be converted or translated.
*
* @see http://github.com/kartik-v/bootstrap-fileinput
* @author kangqf <kangqingfei@gmail.com>
*
* NOTE: this file must be saved in UTF-8 encoding.
*/
(function (factory) {
'use strict';
if (typeof define === 'function' && define.amd) {
define(['jquery'], factory);
} else if (typeof module === 'object' && typeof module.exports === 'object') {
factory(require('jquery'));
} else {
factory(window.jQuery);
}
}(function ($) {
"use strict";
$.fn.fileinputLocales['zh'] = {
sizeUnits: ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'],
bitRateUnits: ['B/s', 'KB/s', 'MB/s', 'GB/s', 'TB/s', 'PB/s', 'EB/s', 'ZB/s', 'YB/s'],
fileSingle: '文件',
filePlural: '个文件',
browseLabel: '选择 &hellip;',
removeLabel: '移除',
removeTitle: '清除选中文件',
cancelLabel: '取消',
cancelTitle: '取消进行中的上传',
pauseLabel: '暂停',
pauseTitle: '暂停上传',
uploadLabel: '上传',
uploadTitle: '上传选中文件',
msgNo: '没有',
msgNoFilesSelected: '未选择文件',
msgPaused: '已暂停',
msgCancelled: '取消',
msgPlaceholder: '选择 {files} ...',
msgZoomModalHeading: '详细预览',
msgFileRequired: '必须选择一个文件上传.',
msgSizeTooSmall: '文件 "{name}" (<b>{size}</b>) 必须大于限定大小 <b>{minSize}</b>.',
msgSizeTooLarge: '文件 "{name}" (<b>{size}</b>) 超过了允许大小 <b>{maxSize}</b>.',
msgMultipleSizeTooLarge: '文件 "{name}" (<b>{size}</b>) 超过了允许大小 <b>{maxSize}</b>.',
msgFilesTooLess: '你必须选择最少 <b>{n}</b> {files} 来上传. ',
msgFilesTooMany: '选择的上传文件个数 <b>({n})</b> 超出最大文件的限制个数 <b>{m}</b>.',
msgTotalFilesTooMany: '你最多可以上传 <b>{m}</b> 个文件 (当前有<b>{n}</b> 个文件).',
msgFileNotFound: '文件 "{name}" 未找到!',
msgFileSecured: '安全限制,为了防止读取文件 "{name}".',
msgFileNotReadable: '文件 "{name}" 不可读.',
msgFilePreviewAborted: '取消 "{name}" 的预览.',
msgFilePreviewError: '读取 "{name}" 时出现了一个错误.',
msgInvalidFileName: '文件名 "{name}" 包含非法字符.',
msgInvalidFileType: '不正确的类型 "{name}". 只支持 "{types}" 类型的文件.',
msgInvalidFileExtension: '不正确的文件扩展名 "{name}". 只支持 "{extensions}" 的文件扩展名.',
msgFileTypes: {
'image': 'image',
'html': 'HTML',
'text': 'text',
'video': 'video',
'audio': 'audio',
'flash': 'flash',
'pdf': 'PDF',
'object': 'object'
},
msgUploadAborted: '该文件上传被中止',
msgUploadThreshold: '处理中 &hellip;',
msgUploadBegin: '正在初始化 &hellip;',
msgUploadEnd: '完成',
msgUploadResume: '继续上传 &hellip;',
msgUploadEmpty: '无效的文件上传.',
msgUploadError: '上传出错',
msgDeleteError: '删除出错',
msgProgressError: '上传出错',
msgValidationError: '验证错误',
msgLoading: '加载第 {index} 文件 共 {files} &hellip;',
msgProgress: '加载第 {index} 文件 共 {files} - {name} - {percent}% 完成.',
msgSelected: '{n} {files} 选中',
msgProcessing: '处理中 ...',
msgFoldersNotAllowed: '只支持拖拽文件! 跳过 {n} 拖拽的文件夹.',
msgImageWidthSmall: '图像文件的"{name}"的宽度必须是至少{size}像素.',
msgImageHeightSmall: '图像文件的"{name}"的高度必须至少为{size}像素.',
msgImageWidthLarge: '图像文件"{name}"的宽度不能超过{size}像素.',
msgImageHeightLarge: '图像文件"{name}"的高度不能超过{size}像素.',
msgImageResizeError: '无法获取的图像尺寸调整。',
msgImageResizeException: '调整图像大小时发生错误。<pre>{errors}</pre>',
msgAjaxError: '{operation} 发生错误. 请重试!',
msgAjaxProgressError: '{operation} 失败',
msgDuplicateFile: '文件 "{name}",大小 "{size}" 已经被选中.忽略相同的文件.',
msgResumableUploadRetriesExceeded: '文件 <b>{file}</b> 上传失败超过 <b>{max}</b> 次重试 ! 错误详情: <pre>{error}</pre>',
msgPendingTime: '{time} 剩余',
msgCalculatingTime: '计算剩余时间',
ajaxOperations: {
deleteThumb: '删除文件',
uploadThumb: '上传文件',
uploadBatch: '批量上传',
uploadExtra: '表单数据上传'
},
dropZoneTitle: '拖拽文件到这里 &hellip;<br>支持多文件同时上传',
dropZoneClickTitle: '<br>(或点击{files}按钮选择文件)',
fileActionSettings: {
removeTitle: '删除文件',
uploadTitle: '上传文件',
downloadTitle: '下载文件',
uploadRetryTitle: '重试',
rotateTitle: '顺时针旋转90度',
zoomTitle: '查看详情',
dragTitle: '移动 / 重置',
indicatorNewTitle: '没有上传',
indicatorSuccessTitle: '上传',
indicatorErrorTitle: '上传错误',
indicatorPausedTitle: '上传已暂停',
indicatorLoadingTitle: '上传 &hellip;'
},
previewZoomButtonTitles: {
prev: '预览上一个文件',
next: '预览下一个文件',
rotate: '顺时针旋转90度',
toggleheader: '缩放',
fullscreen: '全屏',
borderless: '无边界模式',
close: '关闭当前预览'
}
};
}));

31
ruoyi-admin/src/main/resources/templates/financial/taxInvoice/uploadInvoiceRmb.html

@ -264,16 +264,7 @@
<th:block th:include="include :: footer" />
<th:block th:include="include :: datetimepicker-js" />
<th:block th:include="include :: bootstrap-fileinput-js" />
<!-- buffer.min.js 和 filetype.min.js 是必需的,按列出的顺序进行高级 MIME 类型分析和更正确
预览。这是自 v5.5.0 以来可用的功能,如果您想确保解析文件 mime 类型,则需要此功能
即使本地文件的扩展名命名不正确,也能正确。这将确保更正确地预览
选定的文件(注意:这将涉及在本地扫描文件内容时产生的少量处理开销)。如果你
不要加载这些脚本,那么 MIME 类型解析将主要使用文件名中的扩展名派生
以及一些基本的文件内容解析签名。-->
<script src=“https://cdn.jsdelivr.net/gh/kartik-v/bootstrap-fileinput@5.5.0/js/plugins/buffer.min.js” type=“text/javascript”></script>
<script src=“https://cdn.jsdelivr.net/gh/kartik-v/bootstrap-fileinput@5.5.0/js/plugins/filetype.min.js” type=“text/javascript”></script>
<!--可选地,如果您需要翻译您的语言,请包含以下所述的区域设置文件(将LANG.js替换为您的语言区域设置)-->
<script src=“https://cdn.jsdelivr.net/gh/kartik-v/bootstrap-fileinput@5.5.0/js/locales/zh.js”></script>
<th:block th:include="include:: zh-js" />
<script th:inline="javascript">
var materialProcessMethodDatas = [[${@dict.getType('processMethod')}]];
@ -390,9 +381,8 @@
uploadUrl: ctx + "common/uploadSingleFile",
language: 'zh', //设置语言
maxFileCount: 1,
overwriteInitial: false,
autoReplace: true,
allowedFileExtensions: ['bmp', 'gif', 'jpg', 'jpeg', 'png', 'doc', 'docx', 'xls', 'xlsx', 'ppt', 'pptx', 'html', 'htm', 'txt', 'text', 'rar', 'zip', 'gz', 'bz2', 'pdf', 'bpmn', 'bar', 'db'],
previewFileType: ['image', 'txt', 'text', 'pdf', 'bpmn', 'bar', 'db','doc','docx'],
showUpload: false, // 不显示上传按钮
showCaption: false, // 不显示标题
showRemove: true, // 显示移除按钮
@ -401,7 +391,22 @@
removeIcon: "<i class='fa fa-trash'></i>", // 移除按钮图标
browseLabel: "选择文件", // 浏览按钮文本
removeLabel: "删除", // 移除按钮文本
preferIconicPreview: true, // this will force thumbnails to display icons for following file extensions
initialPreviewAsData: true,
// initialPreviewFileType: 'image', // image is the default and can be overridden in config below
// initialPreview: [
// // OFFICE EXCEL DATA
// 'https://kartik-v.github.io/bootstrap-fileinput-samples/samples/SampleXLSFile_38kb.xls',
// // PDF DATA
// 'https://kartik-v.github.io/bootstrap-fileinput-samples/samples/pdf-sample.pdf',
// ],
// initialPreviewConfig: [
// //{type: "office", description: "<h5>Word Document</h5> This is a representative description number four for this file.", size: 102400, caption: "SampleDOCFile_100kb.doc", url: "/file-upload-batch/2", key: 4},
// {type: "xls", description: "<h5>Excel Spreadsheet</h5> This is a representative description number five for this file.", size: 45056, caption: "SampleXLSFile_38kb.xls", url: "/file-upload-batch/2", key: 5},
// //{type: "office", description: "<h5>Powerpoint Presentation</h5> This is a representative description number six for this file.", size: 512000, caption: "SamplePPTFile_500kb.ppt", url: "/file-upload-batch/2", key: 6},
// {type: "pdf", description: "<h5>PDF File</h5> This is a representative description number ten for this file.", size: 8000, caption: "About.pdf", key: 10, downloadUrl: false}, // disable download
// ],
uploadExtraData: {
img_key: "1000",
img_keywords: "happy, nature",

48
ruoyi-admin/src/main/resources/templates/financial/taxInvoice/uploadInvoiceRmbDetail.html

@ -264,16 +264,7 @@
<th:block th:include="include :: footer" />
<th:block th:include="include :: datetimepicker-js" />
<th:block th:include="include :: bootstrap-fileinput-js" />
<!--可选地,如果您需要翻译您的语言,请包含以下所述的区域设置文件(将LANG.js替换为您的语言区域设置)-->
<script src=“https://cdn.jsdelivr.net/gh/kartik-v/bootstrap-fileinput@5.5.0/js/locales/zh.js”></script>
<!-- buffer.min.js 和 filetype.min.js 是必需的,按列出的顺序进行高级 MIME 类型分析和更正确
预览。这是自 v5.5.0 以来可用的功能,如果您想确保解析文件 mime 类型,则需要此功能
即使本地文件的扩展名命名不正确,也能正确。这将确保更正确地预览
选定的文件(注意:这将涉及在本地扫描文件内容时产生的少量处理开销)。如果你
不要加载这些脚本,那么 MIME 类型解析将主要使用文件名中的扩展名派生
以及一些基本的文件内容解析签名。-->
<script src=“https://cdn.jsdelivr.net/gh/kartik-v/bootstrap-fileinput@5.5.0/js/plugins/buffer.min.js” type=“text/javascript”></script>
<script src=“https://cdn.jsdelivr.net/gh/kartik-v/bootstrap-fileinput@5.5.0/js/plugins/filetype.min.js” type=“text/javascript”></script>
<th:block th:include="include:: zh-js" />
<script th:inline="javascript">
@ -322,21 +313,24 @@
// 单图上传
$("#singleFile").fileinput({
uploadUrl: ctx + "common/uploadSingleFile",
dropZoneTitle: '可以将文件拖放到这里,支持文件上传',
language: 'zh',
allowedFileExtensions: ['bmp', 'gif', 'jpg', 'jpeg', 'png', 'doc', 'docx', 'xls', 'xlsx', 'ppt', 'pptx', 'html', 'htm', 'txt', 'text', 'rar', 'zip', 'gz', 'bz2', 'pdf', 'bpmn', 'bar', 'db'],
showPreview: true, // 是否显示预览
showCaption: false, // 是否显示标题
fileSizeGetter: true,
previewFileType: ['image', 'txt', 'text','pdf'],
validateInitialCount: true,
preferIconicPreview: true, // 这将强制缩略图按照以下文件扩展名的图标显示
maxFileCount: 1,
autoReplace: true, // 自动替换
overwriteInitial: false,
autoReplace: true,
showUpload: false, // 不显示上传按钮
showCaption: false, // 不显示标题
showRemove: false, // 显示移除按钮
// browseClass: "btn btn-primary", // 浏览按钮样式
// removeClass: "btn btn-danger", // 移除按钮样式
// removeIcon: "<i class='fa fa-trash'></i>", // 移除按钮图标
browseLabel: "选择文件", // 浏览按钮文本
removeLabel: "删除", // 移除按钮文本
initialPreviewAsData: true,
initialPreview: initialPreview,
initialPreviewConfig: initialPreviewConfig,
initialPreviewFileType: initialPreviewFileType,
initialPreviewAsData: true, // 默认为数据
}).on('filebatchselected', function (event, data, previewId, index) {
// 当文件被选中时,开始上传
$(this).fileinput("upload");
@ -388,6 +382,22 @@
return "txt";
case 'db':
return "db";
case 'png':
return "png";
case 'jpg':
return "jpg";
case 'jpeg':
return "jpeg";
case 'gif':
return "gif";
case 'doc':
return "office";
case 'docx':
return "office";
case 'xls':
return "office";
case 'xlsx':
return "office";
default:
return "";
}

11
ruoyi-admin/src/main/resources/templates/financial/taxInvoice/uploadInvoiceUsd.html

@ -269,6 +269,7 @@
<th:block th:include="include :: footer" />
<th:block th:include="include :: datetimepicker-js" />
<th:block th:include="include :: bootstrap-fileinput-js" />
<th:block th:include="include:: zh-js" />
<script th:inline="javascript">
var materialProcessMethodDatas = [[${@dict.getType('processMethod')}]];
@ -383,10 +384,10 @@
// 单图上传
$(".file-upload").fileinput({
uploadUrl: ctx + "common/uploadSingleFile",
language: 'zh', //设置语言
maxFileCount: 1,
overwriteInitial: false,
autoReplace: true,
allowedFileExtensions: ['bmp', 'gif', 'jpg', 'jpeg', 'png', 'doc', 'docx', 'xls', 'xlsx', 'ppt', 'pptx', 'html', 'htm', 'txt', 'text', 'rar', 'zip', 'gz', 'bz2', 'pdf', 'bpmn', 'bar', 'db'],
previewFileType: ['image', 'txt', 'text', 'pdf', 'bpmn', 'bar', 'db',"doc","docx"],
showUpload: false, // 不显示上传按钮
showCaption: false, // 不显示标题
showRemove: true, // 显示移除按钮
@ -395,11 +396,7 @@
removeIcon: "<i class='fa fa-trash'></i>", // 移除按钮图标
browseLabel: "选择文件", // 浏览按钮文本
removeLabel: "删除", // 移除按钮文本
layoutTemplates: {
main2: "{preview}\n" +
"{remove}\n" +
"{browse}"
}
initialPreviewAsData: true,
}).on('filepreupload', function (event, data, previewId, index) {
// 在文件上传前的处理
// 可以在这里设置一些上传前的逻辑

33
ruoyi-admin/src/main/resources/templates/financial/taxInvoice/uploadInvoiceUsdDetail.html

@ -270,6 +270,7 @@
<th:block th:include="include :: footer" />
<th:block th:include="include :: datetimepicker-js" />
<th:block th:include="include :: bootstrap-fileinput-js" />
<th:block th:include="include:: zh-js" />
<script th:inline="javascript">
var materialProcessMethodDatas = [[${@dict.getType('processMethod')}]];
@ -410,23 +411,23 @@
// 单图上传
$("#singleFile").fileinput({
uploadUrl: ctx + "common/uploadSingleFile",
dropZoneTitle: '可以将文件拖放到这里,支持文件上传',
language: 'zh',
allowedFileExtensions: ['bmp', 'gif', 'jpg', 'jpeg', 'png', 'doc', 'docx', 'xls', 'xlsx', 'ppt', 'pptx', 'html', 'htm', 'txt', 'text', 'rar', 'zip', 'gz', 'bz2', 'pdf', 'bpmn', 'bar', 'db'],
showPreview: true, // 是否显示预览
fileSizeGetter: true,
previewFileType: ['image', 'txt', 'text','pdf'],
validateInitialCount: true,
preferIconicPreview: true, // 这将强制缩略图按照以下文件扩展名的图标显示
maxFileCount: 1,
autoReplace: true, // 自动替换
overwriteInitial: false,
autoReplace: true,
showUpload: false, // 不显示上传按钮
showCaption: false, // 不显示标题
showRemove: false, // 显示移除按钮
// browseClass: "btn btn-primary", // 浏览按钮样式
// removeClass: "btn btn-danger", // 移除按钮样式
// removeIcon: "<i class='fa fa-trash'></i>", // 移除按钮图标
browseLabel: "选择文件", // 浏览按钮文本
removeLabel: "删除", // 移除按钮文本
initialPreviewAsData: true,
initialPreview: initialPreview,
initialPreviewConfig: initialPreviewConfig,
initialPreviewFileType: initialPreviewFileType,
initialPreviewAsData: true, // 默认为数据
}).on('filebatchselected', function (event, data, previewId, index) {
// 当文件被选中时,开始上传
$(this).fileinput("upload");
@ -478,6 +479,22 @@
return "txt";
case 'db':
return "db";
case 'png':
return "png";
case 'jpg':
return "jpg";
case 'jpeg':
return "jpeg";
case 'gif':
return "gif";
case 'doc':
return "office";
case 'docx':
return "office";
case 'xls':
return "office";
case 'xlsx':
return "office";
default:
return "";
}

4
ruoyi-admin/src/main/resources/templates/include.html

@ -134,7 +134,9 @@
<div th:fragment="bootstrap-fileinput-js">
<script th:src="@{/ajax/libs/bootstrap-fileinput/fileinput.min.js?v=5.5.2}"></script>
</div>
<div th:fragment="zh-js">
<script th:src="@{/ajax/libs/bootstrap-fileinput/locales/zh.js}"></script>
</div>

Loading…
Cancel
Save