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

Write Preview
Loading…
Cancel
Save