luoluo
/
ry_zhky
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge remote-tracking branch 'origin/ln_ry20250512' into ln_ry20250512

Browse Source
ln_ry20250512
wangxy 4 days ago
parent 665c935ca0 07429e4264
commit f93b0b9a71
2 changed files with 104 additions and 92 deletions
Show Stats Download Patch File Download Diff File

190
ruoyi-admin/src/main/resources/templates/system/newdev/abroad/editAbroad.html
Unescape View File

@ -135,9 +135,9 @@
<!-- 预览区域（选中后显示） --> <!-- 预览区域（选中后显示） -->
<div v-else class="h-full flex flex-col items-center justify-center p-3"> <div v-else class="h-full flex flex-col items-center justify-center p-3">
<img :src="previewUrl" alt="预览图" class="max-h-full max-w-full object-cover rounded-lg mb-2" style="max-height: 200px;"> <img :src="previewUrl" alt="预览图" class="max-h-full max-w-full object-cover rounded-lg mb-2" style="max-height: 200px;">
<!-- <button type="button" @click="clearFile" class="text-xs text-red-500 hover:text-red-700">--> <!-- <button type="button" @click="clearFile" class="text-xs text-red-500 hover:text-red-700">-->
<!-- <i class="fa-solid fa-times-circle mr-1"></i> 移除--> <!-- <i class="fa-solid fa-times-circle mr-1"></i> 移除-->
<!-- </button>--> <!-- </button>-->
</div> </div>
</div> </div>
</div> </div>
@ -461,7 +461,7 @@
selectedFiles: Array(6).fill(null), selectedFiles: Array(6).fill(null),
currentFileName: Array(6).fill(''), currentFileName: Array(6).fill(''),
uploadProgress: Array(6).fill(0), uploadProgress: Array(6).fill(0),
uploadedFiles: Array(6).fill([]).map(() => []), uploadedFiles: Array(6).fill([]).map(function() { return []; }),
previewModalVisible: false, previewModalVisible: false,
previewingFile: {}, previewingFile: {},
uploadSuccess: false, uploadSuccess: false,
@ -469,69 +469,72 @@
prefix: ctx + "system/abroadList", prefix: ctx + "system/abroadList",
}, },
computed: { computed: {
previewUrl() { previewUrl: function() {
return this.selectedFile ? window.URL.createObjectURL(this.selectedFile) : ''; return this.selectedFile ? window.URL.createObjectURL(this.selectedFile) : '';
} }
}, },
methods: { methods: {
handleFileUpload(event) { handleFileUpload: function(event) {
let file = event.target.files[0]; var file = event.target.files[0];
if (file) { if (file) {
// 检查文件类型和大小 // 检查文件类型和大小
let fileSize = file.size / 1024 / 1024; // MB var fileSize = file.size / 1024 / 1024; // MB
if (fileSize > 2) { if (fileSize > 2) {
this.$message.error('文件大小不能超过2MB'); this.$message.error('文件大小不能超过2MB');
return; return;
} }
let fileType = file.type; var fileType = file.type;
if (!fileType.startsWith('image/')) { if (!fileType.startsWith('image/')) {
this.$message.error('请上传图片文件'); this.$message.error('请上传图片文件');
return; return;
} }
// 验证图片格式 // 验证图片格式
let validFormats = ['image/jpeg', 'image/png']; var validFormats = ['image/jpeg', 'image/png'];
if (!validFormats.includes(fileType)) { if (validFormats.indexOf(fileType) === -1) {
this.$message.error('请上传JPG或PNG格式的图片'); this.$message.error('请上传JPG或PNG格式的图片');
return; return;
} }
// 验证图片尺寸是否接近一寸照片 (2.5cm x 3.5cm, 约295x413像素) // 验证图片尺寸是否接近一寸照片 (2.5cm x 3.5cm, 约295x413像素)
let img = new Image(); var img = new Image();
img.src = window.URL.createObjectURL(file); img.src = window.URL.createObjectURL(file);
img.onload = () => { var self = this;
let width = img.naturalWidth; img.onload = function() {
let height = img.naturalHeight; var width = img.naturalWidth;
let ratio = width / height; var height = img.naturalHeight;
var ratio = width / height;
// 检查宽高比是否接近一寸照片的比例 (约0.714) // 检查宽高比是否接近一寸照片的比例 (约0.714)
if (Math.abs(ratio - 0.714) > 0.1) { if (Math.abs(ratio - 0.714) > 0.1) {
this.$message({ self.$message({
message: '建议上传一寸照片尺寸 (约295x413像素)', message: '建议上传一寸照片尺寸 (约295x413像素)',
type: 'warning' type: 'warning'
}); });
} }
this.selectedFile = file; self.selectedFile = file;
}; };
img.onerror = () => { img.onerror = function() {
this.$message.error('无法加载图片，请重新选择'); self.$message.error('无法加载图片，请重新选择');
}; };
} }
}, },
clearFile() { clearFile: function() {
this.selectedFile = null; this.selectedFile = null;
document.getElementById('photo').value = ''; document.getElementById('photo').value = '';
}, },
// 文件上传处理 // 文件上传处理
handleFileSelection(index) { handleFileSelection: function(index) {
this.selectedFiles[index] = event.target.files[0]; this.selectedFiles[index] = event.target.files[0];
if (this.selectedFiles[index]) { if (this.selectedFiles[index]) {
let file = this.selectedFiles[index]; var file = this.selectedFiles[index];
let fileExtension = file.name.split('.').pop().toLowerCase(); var fileExtension = file.name.split('.').pop().toLowerCase();
// 根据材料类型验证文件格式 // 根据材料类型验证文件格式
let validExtensions = this.materials[index].accept.split(',').map(ext => ext.trim().replace('.', '')); var validExtensions = this.materials[index].accept.split(',').map(function(ext) {
return ext.trim().replace('.', '');
});
if (!validExtensions.includes(fileExtension)) { if (validExtensions.indexOf(fileExtension) === -1) {
this.$message.error(`请上传${this.materials[index].description.split('：')[1]}`); this.$message.error('请上传' + this.materials[index].description.split('：')[1]);
document.getElementById(`fileUpload${index}`).value = ''; // 清空选择 document.getElementById('fileUpload' + index).value = ''; // 清空选择
return; return;
} }
@ -539,34 +542,35 @@
} }
}, },
uploadFile(file, index) { uploadFile: function(file, index) {
this.currentFileName[index] = file.name; this.currentFileName[index] = file.name;
this.uploadProgress[index] = 0; this.uploadProgress[index] = 0;
let formData = new FormData(); var formData = new FormData();
formData.append('applyId', this.formData.applyId || ''); formData.append('applyId', this.formData.applyId || '');
formData.append('filename', file.name); formData.append('filename', file.name);
formData.append('fileCode', this.materials[index].code); formData.append('fileCode', this.materials[index].code);
formData.append('file', file); formData.append('file', file);
var self = this;
axios.post(ctx + 'system/file/upload', formData, { axios.post(ctx + 'system/file/upload', formData, {
onUploadProgress: (progressEvent) => { onUploadProgress: function(progressEvent) {
this.uploadProgress[index] = Math.round((progressEvent.loaded * 100) / progressEvent.total); self.uploadProgress[index] = Math.round((progressEvent.loaded * 100) / progressEvent.total);
} }
}) })
.then(response => { .then(function(response) {
if (response.data.code === web_status.SUCCESS) { if (response.data.code === web_status.SUCCESS) {
// 显示上传成功提示 // 显示上传成功提示
this.uploadSuccess = true; self.uploadSuccess = true;
this.uploadSuccessMessage = `文件 "${file.name}" 上传成功`; self.uploadSuccessMessage = '文件 "' + file.name + '" 上传成功';
// 3秒后隐藏提示 // 3秒后隐藏提示
setTimeout(() => { setTimeout(function() {
this.uploadSuccess = false; self.uploadSuccess = false;
}, 3000); }, 3000);
// 更新文件列表 // 更新文件列表
let fileInfo = { var fileInfo = {
id: response.data.data.fileId, id: response.data.data.fileId,
fileName: file.name, fileName: file.name,
fileSize: file.size, fileSize: file.size,
@ -574,66 +578,68 @@
fileUrl: response.data.data.filePath, fileUrl: response.data.data.filePath,
uploadTime: new Date().toISOString() uploadTime: new Date().toISOString()
}; };
this.$set(this.uploadedFiles, index, [...this.uploadedFiles[index], fileInfo]); self.$set(self.uploadedFiles, index, self.uploadedFiles[index].concat(fileInfo));
// 重置选择框 // 重置选择框
document.getElementById(`fileUpload${index}`).value = ''; document.getElementById('fileUpload' + index).value = '';
} else { } else {
this.$message.error(`上传失败: ${response.data.msg}`); self.$message.error('上传失败: ' + response.data.msg);
} }
}) })
.catch(error => { .catch(function(error) {
console.error('上传错误:', error); console.error('上传错误:', error);
this.$message.error('上传过程中发生错误'); self.$message.error('上传过程中发生错误');
}); });
}, },
downloadFile(file, index) { downloadFile: function(file, index) {
// 直接通过接口下载 // 直接通过接口下载
axios.get(ctx + 'system/file/download',{ var self = this;
axios.get(ctx + 'system/file/download', {
params: { fileId: file.id }, params: { fileId: file.id },
responseType: 'blob', // 重要：指定响应类型为blob responseType: 'blob', // 重要：指定响应类型为blob
headers: { headers: {
'Content-Type': 'application/json', 'Content-Type': 'application/json',
} }
}) })
.then(response => { .then(function(response) {
let url = window.URL.createObjectURL(new Blob([response.data])); var url = window.URL.createObjectURL(new Blob([response.data]));
let link = document.createElement('a'); var link = document.createElement('a');
link.href = url; link.href = url;
link.setAttribute('download', file.fileName); link.setAttribute('download', file.fileName);
document.body.appendChild(link); document.body.appendChild(link);
link.click(); link.click();
document.body.removeChild(link); document.body.removeChild(link);
}) })
.catch(error => { .catch(function(error) {
console.error('下载错误:', error); console.error('下载错误:', error);
this.$message.error('下载文件时出错'); self.$message.error('下载文件时出错');
}); });
}, },
deleteFile(file, materialIndex, fileIndex) { deleteFile: function(file, materialIndex, fileIndex) {
this.$confirm(`确定要删除文件 "${file.fileName}" 吗？`, '提示', { var self = this;
this.$confirm('确定要删除文件 "' + file.fileName + '" 吗？', '提示', {
confirmButtonText: '确定', confirmButtonText: '确定',
cancelButtonText: '取消', cancelButtonText: '取消',
type: 'warning' type: 'warning'
}).then(() => { }).then(function() {
axios.get(ctx + 'system/file/delFile/' + file.id) axios.get(ctx + 'system/file/delFile/' + file.id)
.then(response => { .then(function(response) {
if (response.data.code === web_status.SUCCESS) { if (response.data.code === web_status.SUCCESS) {
this.uploadedFiles[materialIndex].splice(fileIndex, 1); self.uploadedFiles[materialIndex].splice(fileIndex, 1);
this.$message.success('文件已成功删除'); self.$message.success('文件已成功删除');
} else { } else {
this.$message.error(`删除失败: ${response.data.msg}`); self.$message.error('删除失败: ' + response.data.msg);
} }
}) })
.catch(error => { .catch(function(error) {
console.error('删除错误:', error); console.error('删除错误:', error);
this.$message.error('删除文件时出错'); self.$message.error('删除文件时出错');
}); });
}).catch(() => { }).catch(function() {
this.$message({ self.$message({
type: 'info', type: 'info',
message: '已取消删除' message: '已取消删除'
}); });
@ -641,21 +647,22 @@
}, },
// 获取已上传文件 // 获取已上传文件
getUploadedFiles() { getUploadedFiles: function() {
if (!this.formData.applyId) return; if (!this.formData.applyId) return;
// 使用forEach确保每个请求有自己的作用域 // 使用forEach确保每个请求有自己的作用域
this.materials.forEach((material, index) => { var self = this;
this.materials.forEach(function(material, index) {
axios.get(ctx + 'system/file/getFileInfo', { axios.get(ctx + 'system/file/getFileInfo', {
params: { params: {
applyId: this.formData.applyId, applyId: self.formData.applyId,
fileCode: material.code, fileCode: material.code,
} }
}) })
.then(response => { .then(function(response) {
if (response.data.code === web_status.SUCCESS) { if (response.data.code === web_status.SUCCESS) {
// 使用Vue.set确保响应式更新 // 使用Vue.set确保响应式更新
this.$set(this.uploadedFiles, index, response.data.data.map((file) => { self.$set(self.uploadedFiles, index, response.data.data.map(function(file) {
return { return {
id: file.fileId, id: file.fileId,
fileName: file.fileName, fileName: file.fileName,
@ -666,37 +673,37 @@
} }
})); }));
} else { } else {
console.error(`获取${material.name}文件列表失败:`, response.data.msg); console.error('获取' + material.name + '文件列表失败:', response.data.msg);
this.$message.error(`获取${material.name}已上传文件失败: ${response.data.msg}`); self.$message.error('获取' + material.name + '已上传文件失败: ' + response.data.msg);
} }
}) })
.catch(error => { .catch(function(error) {
console.error(`获取${material.name}文件列表错误:`, error); console.error('获取' + material.name + '文件列表错误:', error);
this.$message.error(`获取${material.name}已上传文件时出错`); self.$message.error('获取' + material.name + '已上传文件时出错');
}); });
}); });
}, },
// 图片预览相关方法 // 图片预览相关方法
isImageFile(fileName) { isImageFile: function(fileName) {
const imageExtensions = ['jpg', 'jpeg', 'png', 'gif', 'bmp','pdf']; var imageExtensions = ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'pdf'];
const extension = fileName.split('.').pop().toLowerCase(); var extension = fileName.split('.').pop().toLowerCase();
return imageExtensions.includes(extension); return imageExtensions.indexOf(extension) !== -1;
}, },
getFileIcon(fileName) { getFileIcon: function(fileName) {
const extension = fileName.split('.').pop().toLowerCase(); var extension = fileName.split('.').pop().toLowerCase();
if (extension === 'pdf') return 'fa-solid fa-file-pdf text-red-500'; if (extension === 'pdf') return 'fa-solid fa-file-pdf text-red-500';
if (['doc', 'docx'].includes(extension)) return 'fa-solid fa-file-word text-blue-500'; if (['doc', 'docx'].includes(extension)) return 'fa-solid fa-file-word text-blue-500';
if (['jpg', 'jpeg', 'png', 'gif', 'bmp'].includes(extension)) return 'fa-solid fa-file-image text-green-500'; if (['jpg', 'jpeg', 'png', 'gif', 'bmp'].includes(extension)) return 'fa-solid fa-file-image text-green-500';
return 'fa-solid fa-file text-gray-500'; return 'fa-solid fa-file text-gray-500';
}, },
previewFile(file) { previewFile: function(file) {
let extension = file.fileName.split('.').pop().toLowerCase(); var extension = file.fileName.split('.').pop().toLowerCase();
if (extension === 'pdf') { if (extension === 'pdf') {
// 使用preventDefault阻止默认行为，避免影响当前页面状态 // 使用preventDefault阻止默认行为，避免影响当前页面状态
let event = window.event; var event = window.event;
if (event) { if (event) {
event.preventDefault(); event.preventDefault();
} }
@ -707,12 +714,12 @@
this.previewModalVisible = true; this.previewModalVisible = true;
}, },
closePreviewModal() { closePreviewModal: function() {
this.previewModalVisible = false; this.previewModalVisible = false;
this.previewingFile = {}; this.previewingFile = {};
}, },
getPreviewUrl(file) { getPreviewUrl: function(file) {
// 如果是图片，直接返回URL // 如果是图片，直接返回URL
if (this.isImageFile(file.fileName)) { if (this.isImageFile(file.fileName)) {
return ctx + 'system/file/download?fileId=' + file.id; return ctx + 'system/file/download?fileId=' + file.id;
@ -720,18 +727,23 @@
return ''; return '';
} }
}, },
mounted() { mounted: function() {
// 从后端获取转义后的 JSON 字符串 // 从后端获取转义后的 JSON 字符串
if ([[${applyInfoList}]]){ if ([[${applyInfoList}]]) {
this.formData = {...[[${applyInfoList}]]} this.formData = JSON.parse(JSON.stringify([[${applyInfoList}]]));
// 获取图片并转换为 Blob // 获取图片并转换为 Blob
if (this.formData.photoUrl) { if (this.formData.photoUrl) {
var self = this;
fetch(this.formData.photoUrl) fetch(this.formData.photoUrl)
.then(response => response.blob()) .then(function(response) {
.then(blob => { return response.blob();
this.selectedFile = blob; })
.then(function(blob) {
self.selectedFile = blob;
}) })
.catch(error => console.error('处理图片时出错:', error)); .catch(function(error) {
console.error('处理图片时出错:', error);
});
} }
} }

6
ruoyi-admin/src/main/resources/templates/system/newdev/onduty/editDuty.html
Unescape View File

@ -139,9 +139,9 @@
<!-- 预览区域（选中后显示） --> <!-- 预览区域（选中后显示） -->
<div v-else class="h-full flex flex-col items-center justify-center p-3"> <div v-else class="h-full flex flex-col items-center justify-center p-3">
<img :src="previewUrl" alt="预览图" class="max-h-full max-w-full object-cover rounded-lg mb-2" style="max-height: 200px;"> <img :src="previewUrl" alt="预览图" class="max-h-full max-w-full object-cover rounded-lg mb-2" style="max-height: 200px;">
<button type="button" @click="clearFile" class="text-xs text-red-500 hover:text-red-700"> <!-- <button type="button" @click="clearFile" class="text-xs text-red-500 hover:text-red-700">-->
<i class="fa-solid fa-times-circle mr-1"></i> 移除 <!-- <i class="fa-solid fa-times-circle mr-1"></i> 移除-->
</button> <!-- </button>-->
</div> </div>
</div> </div>
</div> </div>

Write Preview
Loading…
Cancel
Save