From c41190735a8a657543e4a85b24d6161b071f7e15 Mon Sep 17 00:00:00 2001 From: dshclm <3321914460@qq.com> Date: Wed, 4 Jun 2025 10:34:20 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BA=BA=E5=91=98=E7=99=BB=E8=AE=B0=E5=85=BC?= =?UTF-8?q?=E5=AE=B9=E4=BF=AE=E6=94=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../controller/pdf/service/PdfService.java | 52 +++- .../templates/system/newdev/apply/add.html | 128 +++++---- .../templates/system/newdev/apply/edit.html | 158 +++++----- .../system/newdev/apply/editFile.html | 269 +++++++++--------- 4 files changed, 312 insertions(+), 295 deletions(-) diff --git a/ruoyi-admin/src/main/java/com/ruoyi/web/controller/pdf/service/PdfService.java b/ruoyi-admin/src/main/java/com/ruoyi/web/controller/pdf/service/PdfService.java index b0fd2f8f..668dc2bb 100644 --- a/ruoyi-admin/src/main/java/com/ruoyi/web/controller/pdf/service/PdfService.java +++ b/ruoyi-admin/src/main/java/com/ruoyi/web/controller/pdf/service/PdfService.java @@ -14,6 +14,7 @@ import org.springframework.web.multipart.MultipartFile; import java.io.ByteArrayOutputStream; import java.io.File; import java.io.IOException; +import java.util.HashMap; import java.util.Map; @Service @@ -21,12 +22,32 @@ public class PdfService { // 定义最大和最小字体大小，用于动态调整 private static final float MAX_FONT_SIZE = 12; - private static final float MIN_FONT_SIZE = 8; - // 预估的字段宽度（根据实际PDF调整） - private static final float ESTIMATED_FIELD_WIDTH = 100f; + private static final float MIN_FONT_SIZE = 10; + + // 字段宽度映射表，根据实际PDF字段宽度设置 + private static final Map FIELD_WIDTHS = new HashMap<>(); + static { + FIELD_WIDTHS.put("常住地址", 145.87099f); + FIELD_WIDTHS.put("户籍地址", 147.149f); + FIELD_WIDTHS.put("常住地公安机关", 91.56003f); + FIELD_WIDTHS.put("户籍地公安机关", 91.685f); + FIELD_WIDTHS.put("已（拟）任涉密岗位", 93.54599f); + FIELD_WIDTHS.put("涉密等级", 90.23602f); + FIELD_WIDTHS.put("联系方式", 88.69202f); + FIELD_WIDTHS.put("性别", 42.579987f); + FIELD_WIDTHS.put("单位及职务职称", 279.75403f); + FIELD_WIDTHS.put("姓名", 51.342987f); + FIELD_WIDTHS.put("曾用名", 50.871994f); + FIELD_WIDTHS.put("婚姻状况", 39.933014f); + FIELD_WIDTHS.put("民族", 42.359985f); + FIELD_WIDTHS.put("政治面貌", 50.276993f); + FIELD_WIDTHS.put("国籍", 39.713013f); + FIELD_WIDTHS.put("身份证号", 235.40901f); + } + // 需要特殊处理的字段列表 private static final String[] AUTO_WRAP_FIELDS = { - "常住地址", "户籍地址", "户籍地公安机关", "常住地公安机关","姓名","已（拟）任涉密岗位" + "常住地址", "户籍地址", "户籍地公安机关", "常住地公安机关", "姓名", "已（拟）任涉密岗位" }; public ByteArrayOutputStream fillForm(Map formData, @@ -66,21 +87,19 @@ public class PdfService { if (field != null) { // 设置表单域为不可编辑 field.setReadOnly(true); - // 设置表单域不高亮显示 -// for (PDAnnotationWidget widget : field.getWidgets()) { -// widget.setHighlightMode(PDAnnotationWidget.HIGHLIGHT_MODE_NONE); -// } if (fieldValue != null && !fieldValue.isEmpty()) { field.setValue(fieldValue); if (field instanceof PDTextField) { PDTextField textField = (PDTextField) field; if (isAutoWrapField(fieldName)) { + // 获取该字段的实际宽度 + float fieldWidth = getFieldWidth(fieldName); // 计算文本在最大字体下的宽度 float textWidth = calculateTextWidth(fieldValue, font, MAX_FONT_SIZE); - // 如果文本宽度超过预估字段宽度，启用自动换行并调整字体 - if (textWidth > ESTIMATED_FIELD_WIDTH) { + // 如果文本宽度超过字段宽度，启用自动换行并调整字体 + if (textWidth > fieldWidth) { textField.setMultiline(true); - float fontSize = calculateFontSize(fieldValue, font); + float fontSize = calculateFontSize(fieldValue, font, fieldWidth); textField.setDefaultAppearance("/" + font.getName() + " " + fontSize + " Tf 0 g"); } else { // 文本未超出，使用默认字体和不换行 @@ -175,6 +194,10 @@ public class PdfService { } return false; } + // 获取字段宽度，如果没有配置则使用默认值 + private float getFieldWidth(String fieldName) { + return FIELD_WIDTHS.getOrDefault(fieldName, 100f); + } // 计算文本在指定字体和大小下的宽度 private float calculateTextWidth(String text, PDType0Font font, float fontSize) throws IOException { @@ -186,16 +209,15 @@ public class PdfService { } // 计算适应字段的字体大小 - private float calculateFontSize(String fieldValue, PDType0Font font) throws IOException { + private float calculateFontSize(String fieldValue, PDType0Font font, float fieldWidth) throws IOException { float fontSize = MAX_FONT_SIZE; float textWidth = calculateTextWidth(fieldValue, font, fontSize); - // 循环降低字体大小直到文本适合预估宽度 - while (textWidth > ESTIMATED_FIELD_WIDTH && fontSize > MIN_FONT_SIZE) { + // 循环降低字体大小直到文本适合字段宽度 + while (textWidth > fieldWidth && fontSize > MIN_FONT_SIZE) { fontSize -= 0.5f; textWidth = calculateTextWidth(fieldValue, font, fontSize); } - return fontSize; } } \ No newline at end of file diff --git a/ruoyi-admin/src/main/resources/templates/system/newdev/apply/add.html b/ruoyi-admin/src/main/resources/templates/system/newdev/apply/add.html index 5aead50c..953ccdac 100644 --- a/ruoyi-admin/src/main/resources/templates/system/newdev/apply/add.html +++ b/ruoyi-admin/src/main/resources/templates/system/newdev/apply/add.html @@ -350,53 +350,54 @@ isLoadingLevels: false }, 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']; + var validFormats = ['image/jpeg', 'image/png']; if (!validFormats.includes(fileType)) { 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 _this = 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({ + _this.$message({ message: '请上传接近一寸照片尺寸的图片 (约295x413像素)', type: 'warning' }) } - this.selectedFile = file; + _this.selectedFile = file; }; - img.onerror = () => { - this.$message.error('无法加载图片，请重新选择') + img.onerror = function() { + _this.$message.error('无法加载图片，请重新选择') }; var data = new FormData(); data.append("file", file); - let _that = this + var _that = this; $.ajax({ type: "POST", url: ctx + "common/upload", @@ -405,24 +406,24 @@ contentType: false, processData: false, dataType: 'json', - success: function (result) { + success: function(result) { if (result.code == web_status.SUCCESS) { - _that.formData.photoUrl = result.url + _that.formData.photoUrl = result.url; } else { $.modal.alertError(result.msg); } }, - error: function (error) { + error: function(error) { $.modal.alertWarning("图片上传失败。"); } }); } }, - clearFile() { + clearFile: function() { this.selectedFile = null; document.getElementById('photo').value = ''; }, - submitForm() { + submitForm: function() { // 简单验证 if (!this.formData.name || !this.formData.sex || !this.formData.nationa || !this.formData.nationality || !this.formData.maritalStatus || !this.formData.political || !this.formData.phone || !this.formData.cerno || !this.formData.address || !this.formData.registeredAuthority || !this.formData.permanentAddress || !this.formData.residentBureau || !this.formData.positionCapacity || !this.formData.smPost || !this.formData.smGrade) { this.$message({ @@ -459,7 +460,7 @@ } // 准备表单数据 - let formData = new FormData(); + var formData = new FormData(); if (this.formData.name) formData.append("name", this.formData.name); if (this.formData.sex) formData.append("sex", this.formData.sex); if (this.formData.nationa) formData.append("nationa", this.formData.nationa); @@ -480,25 +481,26 @@ // 显示加载状态 this.isLoading = true; // 发送请求 + var _this = this; axios.post('/api/pdf/fill', formData, { responseType: 'blob' }) - .then(response => { + .then(function(response) { // 创建下载URL - let blob = new Blob([response.data], { type: 'application/pdf' }); - this.pdfUrl = window.URL.createObjectURL(blob); + var blob = new Blob([response.data], { type: 'application/pdf' }); + _this.pdfUrl = window.URL.createObjectURL(blob); // 隐藏加载状态，显示结果 - this.isLoading = false; - this.showResult = true; + _this.isLoading = false; + _this.showResult = true; }) - .catch(error => { + .catch(function(error) { console.error('Error:', error); - this.isLoading = false; - this.$message.error('生成PDF时出错，请重试'); + _this.isLoading = false; + _this.$message.error('生成PDF时出错，请重试'); }); }, - submitHandler() { + submitHandler: function() { // 简单验证 if (!this.formData.name || !this.formData.sex || !this.formData.nationa || !this.formData.nationality || !this.formData.maritalStatus || !this.formData.political || !this.formData.phone || !this.formData.cerno || !this.formData.address || !this.formData.registeredAuthority || !this.formData.permanentAddress || !this.formData.residentBureau || !this.formData.positionCapacity || !this.formData.smPost || !this.formData.smGrade) { this.$message({ @@ -535,24 +537,25 @@ return; } + var _this = this; this.$confirm('确认保存吗?', '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' - }).then(() => { - $.operate.saveTab(`${this.prefix}/add`,this.formData); - this.$message({ + }).then(function() { + $.operate.saveTab(_this.prefix + "/add", _this.formData); + _this.$message({ type: 'success', message: '保存成功!' }); - }).catch(() => { - this.$message({ + }).catch(function() { + _this.$message({ type: 'info', message: '已取消' }); }); }, - phoneCheck(phone){ + phoneCheck: function(phone) { // 验证联系方式（仅检查位数） if (phone.length !== 11) { this.$message({ @@ -562,7 +565,7 @@ return; } }, - cernoCheck(cerno){ + cernoCheck: function(cerno) { // 验证身份证号 if (!this.validateCerno(cerno)) { this.$message({ @@ -572,10 +575,9 @@ return; } }, - // 身份证号验证函数 - validateCerno(cerno) { + validateCerno: function(cerno) { // 身份证号码正则表达式 - const pattern = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/; + var pattern = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/; // 基本格式验证 if (!pattern.test(cerno)) { @@ -584,16 +586,16 @@ // 18位身份证号码的验证（包括校验位计算） if (cerno.length === 18) { - const idCardArray = cerno.split(''); - const factor = [7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2]; - const parity = ['1', '0', 'X', '9', '8', '7', '6', '5', '4', '3', '2']; - let sum = 0; + var idCardArray = cerno.split(''); + var factor = [7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2]; + var parity = ['1', '0', 'X', '9', '8', '7', '6', '5', '4', '3', '2']; + var sum = 0; - for (let i = 0; i < 17; i++) { + for (var i = 0; i < 17; i++) { sum += parseInt(idCardArray[i]) * factor[i]; } - const lastChar = idCardArray[17].toUpperCase(); + var lastChar = idCardArray[17].toUpperCase(); if (lastChar !== parity[sum % 11]) { return false; } @@ -602,36 +604,38 @@ return true; }, // 新增获取下拉框数据的方法 - fetchPostOptions() { + fetchPostOptions: function() { this.isLoadingPosts = true; + var _this = this; axios.post('/system/classifiedPost/getPostNames') - .then(response => { + .then(function(response) { // 直接使用返回的字符串数组 - this.postOptions = response.data.data || []; - this.isLoadingPosts = false; + _this.postOptions = response.data.data || []; + _this.isLoadingPosts = false; }) - .catch(error => { + .catch(function(error) { console.error('获取涉密岗位数据失败:', error); - this.isLoadingPosts = false; - this.$message.error('获取涉密岗位数据失败，请刷新页面重试'); + _this.isLoadingPosts = false; + _this.$message.error('获取涉密岗位数据失败，请刷新页面重试'); }); }, - fetchLevelOptions() { + fetchLevelOptions: function() { this.isLoadingLevels = true; + var _this = this; axios.post('/system/classifiedPost/getClassifiedLevels') - .then(response => { + .then(function(response) { // 直接使用返回的字符串数组 - this.levelOptions = response.data.data || []; - this.isLoadingLevels = false; + _this.levelOptions = response.data.data || []; + _this.isLoadingLevels = false; }) - .catch(error => { + .catch(function(error) { console.error('获取涉密等级数据失败:', error); - this.isLoadingLevels = false; - this.$message.error('获取涉密等级数据失败，请刷新页面重试'); + _this.isLoadingLevels = false; + _this.$message.error('获取涉密等级数据失败，请刷新页面重试'); }); } }, - mounted() { + mounted: function() { // 页面加载时获取下拉框数据 this.fetchPostOptions(); this.fetchLevelOptions(); diff --git a/ruoyi-admin/src/main/resources/templates/system/newdev/apply/edit.html b/ruoyi-admin/src/main/resources/templates/system/newdev/apply/edit.html index 671c4711..a0c0b5c5 100644 --- a/ruoyi-admin/src/main/resources/templates/system/newdev/apply/edit.html +++ b/ruoyi-admin/src/main/resources/templates/system/newdev/apply/edit.html @@ -350,54 +350,55 @@ isLoadingLevels: false }, 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' }) return } - this.selectedFile = file; + self.selectedFile = file; }; - img.onerror = () => { - this.$message.error('无法加载图片，请重新选择') + img.onerror = function() { + self.$message.error('无法加载图片，请重新选择') }; var data = new FormData(); data.append("file", file); - let _that = this + var _that = this $.ajax({ type: "POST", url: ctx + "common/upload", @@ -406,24 +407,24 @@ contentType: false, processData: false, dataType: 'json', - success: function (result) { + success: function(result) { if (result.code == web_status.SUCCESS) { _that.formData.photoUrl = result.url } else { $.modal.alertError(result.msg); } }, - error: function (error) { + error: function(error) { $.modal.alertWarning("图片上传失败。"); } }); } }, - clearFile() { + clearFile: function() { this.selectedFile = null; document.getElementById('photo').value = ''; }, - submitForm() { + submitForm: function() { // 简单验证 if (!this.formData.name || !this.formData.sex || !this.formData.nationa || !this.formData.nationality || !this.formData.maritalStatus || !this.formData.political || !this.formData.phone || !this.formData.cerno || !this.formData.address || !this.formData.registeredAuthority || !this.formData.permanentAddress || !this.formData.residentBureau || !this.formData.positionCapacity || !this.formData.smPost || !this.formData.smGrade) { this.$message({ @@ -441,7 +442,7 @@ return; } // 准备表单数据 - let formData = new FormData(); + var formData = new FormData(); if (this.formData.name) formData.append("name", this.formData.name); if (this.formData.sex) formData.append("sex", this.formData.sex); if (this.formData.nationa) formData.append("nationa", this.formData.nationa); @@ -462,25 +463,26 @@ // 显示加载状态 this.isLoading = true; // 发送请求 + var _this = this; axios.post('/api/pdf/fill', formData, { responseType: 'blob' }) - .then(response => { + .then(function(response) { // 创建下载URL - let blob = new Blob([response.data], { type: 'application/pdf' }); - this.pdfUrl = window.URL.createObjectURL(blob); + var blob = new Blob([response.data], { type: 'application/pdf' }); + _this.pdfUrl = window.URL.createObjectURL(blob); // 隐藏加载状态，显示结果 - this.isLoading = false; - this.showResult = true; + _this.isLoading = false; + _this.showResult = true; }) - .catch(error => { + .catch(function(error) { console.error('Error:', error); - this.isLoading = false; - this.$message.error('生成PDF时出错，请重试'); + _this.isLoading = false; + _this.$message.error('生成PDF时出错，请重试'); }); }, - submitHandler() { + submitHandler: function() { // 简单验证 if (!this.formData.name || !this.formData.sex || !this.formData.nationa || !this.formData.nationality || !this.formData.maritalStatus || !this.formData.political || !this.formData.phone || !this.formData.cerno || !this.formData.address || !this.formData.registeredAuthority || !this.formData.permanentAddress || !this.formData.residentBureau || !this.formData.positionCapacity || !this.formData.smPost || !this.formData.smGrade) { this.$message({ @@ -516,24 +518,25 @@ return; } + var _this = this; this.$confirm('确认保存吗?', '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' - }).then(() => { - $.operate.saveTab(`${this.prefix}/edit`,this.formData); - this.$message({ + }).then(function() { + $.operate.saveTab(_this.prefix + "/edit", _this.formData); + _this.$message({ type: 'success', message: '保存成功!' }); - }).catch(() => { - this.$message({ + }).catch(function() { + _this.$message({ type: 'info', message: '已取消' }); }); }, - phoneCheck(phone){ + phoneCheck: function(phone) { // 验证联系方式（仅检查位数） if (phone.length !== 11) { this.$message({ @@ -543,7 +546,7 @@ return; } }, - cernoCheck(cerno){ + cernoCheck: function(cerno) { // 验证身份证号 if (!this.validateCerno(cerno)) { this.$message({ @@ -554,9 +557,9 @@ } }, // 身份证号验证函数 - validateCerno(cerno) { + validateCerno: function(cerno) { // 身份证号码正则表达式 - const pattern = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/; + var pattern = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/; // 基本格式验证 if (!pattern.test(cerno)) { @@ -565,16 +568,16 @@ // 18位身份证号码的验证（包括校验位计算） if (cerno.length === 18) { - const idCardArray = cerno.split(''); - const factor = [7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2]; - const parity = ['1', '0', 'X', '9', '8', '7', '6', '5', '4', '3', '2']; - let sum = 0; + var idCardArray = cerno.split(''); + var factor = [7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2]; + var parity = ['1', '0', 'X', '9', '8', '7', '6', '5', '4', '3', '2']; + var sum = 0; - for (let i = 0; i < 17; i++) { + for (var i = 0; i < 17; i++) { sum += parseInt(idCardArray[i]) * factor[i]; } - const lastChar = idCardArray[17].toUpperCase(); + var lastChar = idCardArray[17].toUpperCase(); if (lastChar !== parity[sum % 11]) { return false; } @@ -583,65 +586,68 @@ return true; }, // 新增获取下拉框数据的方法 - fetchPostOptions() { + fetchPostOptions: function() { this.isLoadingPosts = true; + var _this = this; axios.post('/system/classifiedPost/getPostNames') - .then(response => { + .then(function(response) { // 直接使用返回的字符串数组 - this.postOptions = response.data.data || []; - this.isLoadingPosts = false; + _this.postOptions = response.data.data || []; + _this.isLoadingPosts = false; // 数据加载完成后，检查是否需要设置选中值 - this.setSelectedValues(); + _this.setSelectedValues(); }) - .catch(error => { + .catch(function(error) { console.error('获取涉密岗位数据失败:', error); - this.isLoadingPosts = false; - this.$message.error('获取涉密岗位数据失败，请刷新页面重试'); + _this.isLoadingPosts = false; + _this.$message.error('获取涉密岗位数据失败，请刷新页面重试'); }); }, - fetchLevelOptions() { + fetchLevelOptions: function() { this.isLoadingLevels = true; + var _this = this; axios.post('/system/classifiedPost/getClassifiedLevels') - .then(response => { + .then(function(response) { // 直接使用返回的字符串数组 - this.levelOptions = response.data.data || []; - this.isLoadingLevels = false; + _this.levelOptions = response.data.data || []; + _this.isLoadingLevels = false; // 数据加载完成后，检查是否需要设置选中值 - this.setSelectedValues(); + _this.setSelectedValues(); }) - .catch(error => { + .catch(function(error) { console.error('获取涉密等级数据失败:', error); - this.isLoadingLevels = false; - this.$message.error('获取涉密等级数据失败，请刷新页面重试'); + _this.isLoadingLevels = false; + _this.$message.error('获取涉密等级数据失败，请刷新页面重试'); }); }, // 设置下拉框的选中值 - setSelectedValues() { + setSelectedValues: function() { // 只有当两个下拉框的数据都加载完成后才设置选中值 if (this.postOptions.length > 0 && this.levelOptions.length > 0) { // 如果从后端获取的数据中有 smPost 值，并且该值存在于选项中，则设置为选中 - if (this.formData.smPost && this.postOptions.includes(this.formData.smPost)) { + if (this.formData.smPost && this.postOptions.indexOf(this.formData.smPost) !== -1) { this.formData.smPost = this.formData.smPost; } // 如果从后端获取的数据中有 smGrade 值，并且该值存在于选项中，则设置为选中 - if (this.formData.smGrade && this.levelOptions.includes(this.formData.smGrade)) { + if (this.formData.smGrade && this.levelOptions.indexOf(this.formData.smGrade) !== -1) { this.formData.smGrade = this.formData.smGrade; } } } }, - 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); }); } } // 页面加载时获取下拉框数据 @@ -649,8 +655,8 @@ this.fetchLevelOptions(); } }); - //图片上传 - $('#applyUrlId').on('change.bs.fileinput ', function (e) { + // 图片上传 + $('#applyUrlId').on('change.bs.fileinput ', function(e) { // 处理自己的业务 var file = e.target.files[0]; var data = new FormData(); @@ -663,14 +669,14 @@ contentType: false, processData: false, dataType: 'json', - success: function (result) { + success: function(result) { if (result.code == web_status.SUCCESS) { $("#photoUrl").val(result.url); } else { $.modal.alertError(result.msg); } }, - error: function (error) { + error: function(error) { $.modal.alertWarning("图片上传失败。"); } }); diff --git a/ruoyi-admin/src/main/resources/templates/system/newdev/apply/editFile.html b/ruoyi-admin/src/main/resources/templates/system/newdev/apply/editFile.html index 1d5627d4..21f6e8af 100644 --- a/ruoyi-admin/src/main/resources/templates/system/newdev/apply/editFile.html +++ b/ruoyi-admin/src/main/resources/templates/system/newdev/apply/editFile.html @@ -135,9 +135,9 @@
预览图 - - - + + +
@@ -287,19 +287,19 @@ 下载PDF - - - - - - - - - - - - - + + + + + + + + + + + + +

材料上传

@@ -451,57 +451,59 @@ prefix: ctx + "system/applyList", }, 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 self = this; + 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; + 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 = ''; }, - submitForm() { + submitForm: function() { + var self = this; // 简单验证 if (!this.formData.name || !this.formData.sex || !this.formData.nationa || !this.formData.nationality || !this.formData.maritalStatus || !this.formData.political || !this.formData.phone || !this.formData.cerno || !this.formData.address || !this.formData.registeredAuthority || !this.formData.permanentAddress || !this.formData.residentBureau || !this.formData.positionCapacity || !this.formData.smPost || !this.formData.smGrade) { this.$message({ @@ -519,7 +521,7 @@ return; } // 准备表单数据 - let formData = new FormData(); + var formData = new FormData(); if (this.formData.name) formData.append("name", this.formData.name); if (this.formData.sex) formData.append("sex", this.formData.sex); if (this.formData.nationa) formData.append("nationa", this.formData.nationa); @@ -543,65 +545,66 @@ axios.post('/api/pdf/fill', formData, { responseType: 'blob' }) - .then(response => { + .then(function(response) { // 创建下载URL - let blob = new Blob([response.data], { type: 'application/pdf' }); - this.pdfUrl = window.URL.createObjectURL(blob); - this.$message.success('生成pdf成功，请点击下载！'); + var blob = new Blob([response.data], { type: 'application/pdf' }); + self.pdfUrl = window.URL.createObjectURL(blob); + self.$message.success('生成pdf成功，请点击下载！'); // 隐藏加载状态，显示结果 - this.isLoading = false; - this.showResult = true; + self.isLoading = false; + self.showResult = true; }) - .catch(error => { + .catch(function(error) { console.error('Error:', error); - this.isLoading = false; - this.$message.error('生成PDF时出错，请重试'); + self.isLoading = false; + self.$message.error('生成PDF时出错，请重试'); }); }, // 新增文件上传相关方法 - handleFileSelection(event) { + handleFileSelection: function(event) { this.selectedFiles = event.target.files; if (this.selectedFiles && this.selectedFiles.length > 0) { // 只处理第一个文件 - let file = this.selectedFiles[0]; + var file = this.selectedFiles[0]; // 检查文件类型 - let fileExtension = file.name.split('.').pop().toLowerCase(); - let validExtensions = ['pdf', 'doc', 'docx', 'jpg', 'jpeg', 'png', 'gif', 'bmp']; - if (!validExtensions.includes(fileExtension)) { + var fileExtension = file.name.split('.').pop().toLowerCase(); + var validExtensions = ['pdf', 'doc', 'docx', 'jpg', 'jpeg', 'png', 'gif', 'bmp']; + if (validExtensions.indexOf(fileExtension) === -1) { this.$message.error('请上传PDF、Word文档或图片文件'); return; } this.uploadFile(file); } }, - uploadFile(file) { + uploadFile: function(file) { + var self = this; this.currentFileName = file.name; this.uploadProgress = 0; - let formData = new FormData(); + var formData = new FormData(); formData.append('applyId', this.formData.applyId || ''); formData.append('filename', file.name); formData.append('fileCode', 'bm_user_audit_001'); formData.append('file', file); axios.post(ctx + 'system/file/upload', formData, { - onUploadProgress: (progressEvent) => { - this.uploadProgress = Math.round((progressEvent.loaded * 100) / progressEvent.total); + onUploadProgress: function(progressEvent) { + self.uploadProgress = 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, @@ -609,43 +612,45 @@ fileUrl: response.data.data.filePath, uploadTime: new Date().toISOString() }; - this.uploadedFiles.push(fileInfo); + self.uploadedFiles.push(fileInfo); // 重置选择框 document.getElementById('fileUpload').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) { + downloadFile: function(file) { + var self = this; // 直接通过接口下载 - axios.get(ctx + 'system/file/download',{ + 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('下载文件时出错'); }); }, - submitHandler() { + submitHandler: function() { + var self = this; if (this.uploadedFiles.length == 0) { this.$message.warning('请上传所需材料'); return; @@ -655,53 +660,55 @@ confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' - }).then(() => { - $.operate.saveTab(`${this.prefix}/submit?applyId=${this.formData.applyId}`); - }).catch(() => { - this.$message({ + }).then(function() { + $.operate.saveTab(self.prefix + '/submit?applyId=' + self.formData.applyId); + }).catch(function() { + self.$message({ type: 'info', message: '已取消' }); }); }, - deleteFile(file, index) { - this.$confirm(`确定要删除文件 "${file.fileName}" 吗？`, '提示', { + deleteFile: function(file, index) { + 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.splice(index, 1); - this.$message.success('文件已成功删除'); + self.uploadedFiles.splice(index, 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: '已取消删除' }); }); }, // 获取已上传文件 - getUploadedFiles() { + getUploadedFiles: function() { + var self = this; if (!this.formData.applyId) return; axios.get(ctx + 'system/file/getFileInfo', { params: { applyId: this.formData.applyId, - fileCode:'bm_user_audit_001', + fileCode: 'bm_user_audit_001', } }) - .then(response => { + .then(function(response) { if (response.data.code === web_status.SUCCESS) { - this.uploadedFiles = response.data.data.map((file)=>{ + self.uploadedFiles = response.data.data.map(function(file) { return { id: file.fileId, fileName: file.fileName, @@ -709,47 +716,47 @@ fileType: file.fileType, fileUrl: file.filePath, uploadTime: file.createTime - } - }) + }; + }); } }) - .catch(error => { + .catch(function(error) { console.error('获取文件列表错误:', error); - this.$message.error('获取已上传文件时出错'); + self.$message.error('获取已上传文件时出错'); }); }, // 新增图片预览相关方法 - 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'; + if (['doc', 'docx'].indexOf(extension) !== -1) return 'fa-solid fa-file-word text-blue-500'; + if (['jpg', 'jpeg', 'png', 'gif', 'bmp'].indexOf(extension) !== -1) 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(); } window.open(file.fileUrl, '_blank'); - return + return; } this.previewingFile = file; 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; @@ -757,18 +764,23 @@ return ''; } }, - mounted() { + mounted: function() { + var self = this; // 从后端获取转义后的 JSON 字符串 - if ([[${applyInfoList}]]){ - this.formData = {...[[${applyInfoList}]]} + if ([[${applyInfoList}]]) { + this.formData = JSON.parse(JSON.stringify([[${applyInfoList}]])); // 获取图片并转换为 Blob if (this.formData.photoUrl) { 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); + }); } } @@ -776,33 +788,6 @@ this.getUploadedFiles(); } }); - //图片上传 - $('#applyUrlId').on('change.bs.fileinput ', function (e) { - // 处理自己的业务 - var file = e.target.files[0]; - var data = new FormData(); - data.append("file", file); - $.ajax({ - type: "POST", - url: ctx + "common/upload", - data: data, - cache: false, - contentType: false, - processData: false, - dataType: 'json', - success: function (result) { - if (result.code == web_status.SUCCESS) { - $("#photoUrl").val(result.url); - } else { - $.modal.alertError(result.msg); - } - }, - error: function (error) { - $.modal.alertWarning("图片上传失败。"); - } - }); - - });