删除无用代码,替换消息提示样式

ln_ry20250512
dshclm 3 weeks ago
parent 8e2c0e3998
commit a0a3cb2a1a

@ -5,6 +5,7 @@
<th:block th:include="include :: header('新增人员')"/> <th:block th:include="include :: header('新增人员')"/>
<th:block th:include="include :: select2-css"/> <th:block th:include="include :: select2-css"/>
<th:block th:include="include :: jasny-bootstrap-css"/> <th:block th:include="include :: jasny-bootstrap-css"/>
<th:block th:include="include :: element-css"/>
<link href="/file/pdf/test.css" rel="stylesheet"> <link href="/file/pdf/test.css" rel="stylesheet">
<script src="/file/pdf/tailwindcss.js"></script> <script src="/file/pdf/tailwindcss.js"></script>
<!-- Tailwind配置 --> <!-- Tailwind配置 -->
@ -292,6 +293,7 @@
<th:block th:include="include :: footer"/> <th:block th:include="include :: footer"/>
<th:block th:include="include :: select2-js"/> <th:block th:include="include :: select2-js"/>
<th:block th:include="include :: jasny-bootstrap-js"/> <th:block th:include="include :: jasny-bootstrap-js"/>
<th:block th:include="include :: element-js"/>
<script type="text/javascript" th:inline="javascript"> <script type="text/javascript" th:inline="javascript">
var prefix = ctx + "system/applyList"; var prefix = ctx + "system/applyList";
new Vue({ new Vue({
@ -343,18 +345,18 @@
// 检查文件类型和大小 // 检查文件类型和大小
let fileSize = file.size / 1024 / 1024; // MB let fileSize = file.size / 1024 / 1024; // MB
if (fileSize > 2) { if (fileSize > 2) {
alert('文件大小不能超过2MB'); this.$message.error('文件大小不能超过2MB')
return; return;
} }
let fileType = file.type; let fileType = file.type;
if (!fileType.startsWith('image/')) { if (!fileType.startsWith('image/')) {
alert('请上传图片文件'); this.$message.error('请上传图片文件')
return; return;
} }
// 验证图片格式 // 验证图片格式
let validFormats = ['image/jpeg', 'image/png']; let validFormats = ['image/jpeg', 'image/png'];
if (!validFormats.includes(fileType)) { if (!validFormats.includes(fileType)) {
alert('请上传JPG或PNG格式的图片'); this.$message.error('请上传JPG或PNG格式的图片')
return; return;
} }
// 验证图片尺寸是否接近一寸照片 (2.5cm x 3.5cm, 约295x413像素) // 验证图片尺寸是否接近一寸照片 (2.5cm x 3.5cm, 约295x413像素)
@ -366,12 +368,15 @@
let ratio = width / height; let ratio = width / height;
// 检查宽高比是否接近一寸照片的比例 (约0.714) // 检查宽高比是否接近一寸照片的比例 (约0.714)
if (Math.abs(ratio - 0.714) > 0.1) { if (Math.abs(ratio - 0.714) > 0.1) {
alert('建议上传一寸照片尺寸 (约295x413像素)'); this.$message({
message: '请上传接近一寸照片尺寸的图片 (约295x413像素)',
type: 'warning'
})
} }
this.selectedFile = file; this.selectedFile = file;
}; };
img.onerror = () => { img.onerror = () => {
alert('无法加载图片,请重新选择'); this.$message.error('无法加载图片,请重新选择')
}; };
var data = new FormData(); var data = new FormData();
data.append("file", file); data.append("file", file);
@ -404,12 +409,18 @@
submitForm() { submitForm() {
// 简单验证 // 简单验证
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) { 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) {
alert('请填写所有必填字段'); this.$message({
message: '请填写所有必填字段',
type: 'warning'
})
return; return;
} }
// 检查是否上传了照片 // 检查是否上传了照片
if (!this.selectedFile) { if (!this.selectedFile) {
alert('请上传一寸照片'); this.$message({
message: '请上传一寸照片',
type: 'warning'
})
return; return;
} }
// 准备表单数据 // 准备表单数据
@ -449,55 +460,48 @@
.catch(error => { .catch(error => {
console.error('Error:', error); console.error('Error:', error);
this.isLoading = false; this.isLoading = false;
alert('生成PDF时出错请重试'); this.$message.error('生成PDF时出错请重试');
}); });
}, },
submitHandler() { submitHandler() {
// 简单验证 // 简单验证
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) { 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) {
alert('请填写所有必填字段'); this.$message({
message: '请填写所有必填字段',
type: 'warning'
})
return; return;
} }
// 检查是否上传了照片 // 检查是否上传了照片
if (!this.selectedFile) { if (!this.selectedFile) {
this.$message({
message: '请上传一寸照片',
type: 'warning'
})
alert('请上传一寸照片'); alert('请上传一寸照片');
return; return;
} }
if(confirm('确认提交吗?')){ this.$confirm('确认提交吗?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
$.operate.saveTab(`${this.prefix}/add`,this.formData); $.operate.saveTab(`${this.prefix}/add`,this.formData);
} this.$message({
type: 'success',
message: '提交成功!'
});
}).catch(() => {
this.$message({
type: 'info',
message: '已取消'
});
});
}, },
}, },
mounted() { mounted() {
} }
}); });
//图片上传
$('#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("图片上传失败。");
}
});
});
</script> </script>
</body> </body>

@ -126,10 +126,17 @@
align: 'center', align: 'center',
formatter: function(value, row, index) { formatter: function(value, row, index) {
var actions = []; var actions = [];
actions.push('<a class="btn btn-info btn-xs ' + detailFlag + '" href="javascript:void(0)" onclick="openFile(\'' + row.applyId + '\')"><i class="fa fa-edit"></i>材料提交</a> '); if (row.applyStatus == 3) {
actions.push('<a class="btn btn-success btn-xs ' + editFlag + '" href="javascript:void(0)" onclick="$.operate.editTab(\'' + row.applyId + '\')"><i class="fa fa-edit"></i>编辑</a> '); actions.push('<a class="btn btn-info btn-xs ' + detailFlag + '" href="javascript:void(0)" onclick="openFile(\'' + row.applyId + '\')"><i class="fa fa-edit"></i>材料提交</a> ');
actions.push('<a class="btn btn-danger btn-xs ' + removeFlag + '" href="javascript:void(0)" onclick="$.operate.remove(\'' + row.applyId + '\')"><i class="fa fa-remove"></i>删除</a>'); actions.push('<a class="btn btn-success btn-xs ' + editFlag + '" href="javascript:void(0)" onclick="openMsg(\'' + row.applyMsg + '\')"><i class="fa fa-edit"></i>退回原因</a> ');
return actions.join(''); actions.push('<a class="btn btn-success btn-xs ' + editFlag + '" href="javascript:void(0)" onclick="$.operate.editTab(\'' + row.applyId + '\')"><i class="fa fa-edit"></i>编辑</a> ');
actions.push('<a class="btn btn-danger btn-xs ' + removeFlag + '" href="javascript:void(0)" onclick="$.operate.remove(\'' + row.applyId + '\')"><i class="fa fa-remove"></i>删除</a>');
}else{
actions.push('<a class="btn btn-info btn-xs ' + detailFlag + '" href="javascript:void(0)" onclick="openFile(\'' + row.applyId + '\')"><i class="fa fa-edit"></i>材料提交</a> ');
actions.push('<a class="btn btn-success btn-xs ' + editFlag + '" href="javascript:void(0)" onclick="$.operate.editTab(\'' + row.applyId + '\')"><i class="fa fa-edit"></i>编辑</a> ');
actions.push('<a class="btn btn-danger btn-xs ' + removeFlag + '" href="javascript:void(0)" onclick="$.operate.remove(\'' + row.applyId + '\')"><i class="fa fa-remove"></i>删除</a>');
}
return actions.join('');
} }
}] }]
}; };
@ -139,6 +146,9 @@
table.set(); table.set();
$.modal.openTab("材料提交", $.operate.detailUrl(id)); $.modal.openTab("材料提交", $.operate.detailUrl(id));
} }
function openMsg(row){
alert(row);
}
</script> </script>
</body> </body>
</html> </html>

@ -1,10 +1,10 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org"> <html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head> <head>
<th:block th:include="include :: header('新增人员')"/> <th:block th:include="include :: header('修改人员')"/>
<th:block th:include="include :: select2-css"/> <th:block th:include="include :: select2-css"/>
<th:block th:include="include :: jasny-bootstrap-css"/> <th:block th:include="include :: jasny-bootstrap-css"/>
<th:block th:include="include :: element-css"/>
<link href="/file/pdf/test.css" rel="stylesheet"> <link href="/file/pdf/test.css" rel="stylesheet">
<script src="/file/pdf/tailwindcss.js"></script> <script src="/file/pdf/tailwindcss.js"></script>
<!-- Tailwind配置 --> <!-- Tailwind配置 -->
@ -292,6 +292,7 @@
<th:block th:include="include :: footer"/> <th:block th:include="include :: footer"/>
<th:block th:include="include :: select2-js"/> <th:block th:include="include :: select2-js"/>
<th:block th:include="include :: jasny-bootstrap-js"/> <th:block th:include="include :: jasny-bootstrap-js"/>
<th:block th:include="include :: element-js"/>
<script type="text/javascript" th:inline="javascript"> <script type="text/javascript" th:inline="javascript">
var prefix = ctx + "system/applyList"; var prefix = ctx + "system/applyList";
new Vue({ new Vue({
@ -343,18 +344,18 @@
// 检查文件类型和大小 // 检查文件类型和大小
let fileSize = file.size / 1024 / 1024; // MB let fileSize = file.size / 1024 / 1024; // MB
if (fileSize > 2) { if (fileSize > 2) {
alert('文件大小不能超过2MB'); this.$message.error('文件大小不能超过2MB')
return; return;
} }
let fileType = file.type; let fileType = file.type;
if (!fileType.startsWith('image/')) { if (!fileType.startsWith('image/')) {
alert('请上传图片文件'); this.$message.error('请上传图片文件')
return; return;
} }
// 验证图片格式 // 验证图片格式
let validFormats = ['image/jpeg', 'image/png']; let validFormats = ['image/jpeg', 'image/png'];
if (!validFormats.includes(fileType)) { if (!validFormats.includes(fileType)) {
alert('请上传JPG或PNG格式的图片'); this.$message.error('请上传JPG或PNG格式的图片')
return; return;
} }
// 验证图片尺寸是否接近一寸照片 (2.5cm x 3.5cm, 约295x413像素) // 验证图片尺寸是否接近一寸照片 (2.5cm x 3.5cm, 约295x413像素)
@ -366,12 +367,15 @@
let ratio = width / height; let ratio = width / height;
// 检查宽高比是否接近一寸照片的比例 (约0.714) // 检查宽高比是否接近一寸照片的比例 (约0.714)
if (Math.abs(ratio - 0.714) > 0.1) { if (Math.abs(ratio - 0.714) > 0.1) {
alert('建议上传一寸照片尺寸 (约295x413像素)'); this.$message({
message: '请上传接近一寸照片尺寸的图片 (约295x413像素)',
type: 'warning'
})
} }
this.selectedFile = file; this.selectedFile = file;
}; };
img.onerror = () => { img.onerror = () => {
alert('无法加载图片,请重新选择'); this.$message.error('无法加载图片,请重新选择')
}; };
var data = new FormData(); var data = new FormData();
data.append("file", file); data.append("file", file);
@ -404,12 +408,18 @@
submitForm() { submitForm() {
// 简单验证 // 简单验证
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) { 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) {
alert('请填写所有必填字段'); this.$message({
message: '请填写所有必填字段',
type: 'warning'
})
return; return;
} }
// 检查是否上传了照片 // 检查是否上传了照片
if (!this.selectedFile) { if (!this.selectedFile) {
alert('请上传一寸照片'); this.$message({
message: '请上传一寸照片',
type: 'warning'
})
return; return;
} }
// 准备表单数据 // 准备表单数据
@ -449,24 +459,38 @@
.catch(error => { .catch(error => {
console.error('Error:', error); console.error('Error:', error);
this.isLoading = false; this.isLoading = false;
alert('生成PDF时出错请重试'); this.$message.error('生成PDF时出错请重试');
}); });
}, },
submitHandler() { submitHandler() {
// 简单验证 // 简单验证
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) { 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) {
alert('请填写所有必填字段'); this.$message({
message: '请填写所有必填字段',
type: 'warning'
})
return; return;
} }
// 检查是否上传了照片 // 检查是否上传了照片
if (!this.selectedFile) { if (!this.selectedFile) {
alert('请上传一寸照片'); this.$message({
message: '请上传一寸照片',
type: 'warning'
})
return; return;
} }
console.log(this.formData) this.$confirm('确认提交吗?', '提示', {
if(confirm('确认提交吗?')){ confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
$.operate.saveTab(`${this.prefix}/edit`,this.formData); $.operate.saveTab(`${this.prefix}/edit`,this.formData);
} }).catch(() => {
this.$message({
type: 'info',
message: '已取消'
});
});
}, },
}, },
mounted() { mounted() {
@ -515,4 +539,4 @@
</script> </script>
</body> </body>
</html> </html>

@ -4,6 +4,7 @@
<th:block th:include="include :: header('材料上传')"/> <th:block th:include="include :: header('材料上传')"/>
<th:block th:include="include :: select2-css"/> <th:block th:include="include :: select2-css"/>
<th:block th:include="include :: jasny-bootstrap-css"/> <th:block th:include="include :: jasny-bootstrap-css"/>
<th:block th:include="include :: element-css"/>
<link href="/file/pdf/test.css" rel="stylesheet"> <link href="/file/pdf/test.css" rel="stylesheet">
<script src="/file/pdf/tailwindcss.js"></script> <script src="/file/pdf/tailwindcss.js"></script>
<!-- Tailwind配置 --> <!-- Tailwind配置 -->
@ -411,6 +412,7 @@
<th:block th:include="include :: footer"/> <th:block th:include="include :: footer"/>
<th:block th:include="include :: select2-js"/> <th:block th:include="include :: select2-js"/>
<th:block th:include="include :: jasny-bootstrap-js"/> <th:block th:include="include :: jasny-bootstrap-js"/>
<th:block th:include="include :: element-js"/>
<script type="text/javascript" th:inline="javascript"> <script type="text/javascript" th:inline="javascript">
var prefix = ctx + "system/applyList"; var prefix = ctx + "system/applyList";
new Vue({ new Vue({
@ -463,18 +465,18 @@
// 检查文件类型和大小 // 检查文件类型和大小
let fileSize = file.size / 1024 / 1024; // MB let fileSize = file.size / 1024 / 1024; // MB
if (fileSize > 2) { if (fileSize > 2) {
alert('文件大小不能超过2MB'); this.$message.error('文件大小不能超过2MB');
return; return;
} }
let fileType = file.type; let fileType = file.type;
if (!fileType.startsWith('image/')) { if (!fileType.startsWith('image/')) {
alert('请上传图片文件'); this.$message.error('请上传图片文件');
return; return;
} }
// 验证图片格式 // 验证图片格式
let validFormats = ['image/jpeg', 'image/png']; let validFormats = ['image/jpeg', 'image/png'];
if (!validFormats.includes(fileType)) { if (!validFormats.includes(fileType)) {
alert('请上传JPG或PNG格式的图片'); this.$message.error('请上传JPG或PNG格式的图片');
return; return;
} }
// 验证图片尺寸是否接近一寸照片 (2.5cm x 3.5cm, 约295x413像素) // 验证图片尺寸是否接近一寸照片 (2.5cm x 3.5cm, 约295x413像素)
@ -486,12 +488,15 @@
let ratio = width / height; let ratio = width / height;
// 检查宽高比是否接近一寸照片的比例 (约0.714) // 检查宽高比是否接近一寸照片的比例 (约0.714)
if (Math.abs(ratio - 0.714) > 0.1) { if (Math.abs(ratio - 0.714) > 0.1) {
alert('建议上传一寸照片尺寸 (约295x413像素)'); this.$message({
message: '建议上传一寸照片尺寸 (约295x413像素)',
type: 'warning'
});
} }
this.selectedFile = file; this.selectedFile = file;
}; };
img.onerror = () => { img.onerror = () => {
alert('无法加载图片,请重新选择'); this.$message.error('无法加载图片,请重新选择');
}; };
} }
}, },
@ -502,12 +507,18 @@
submitForm() { submitForm() {
// 简单验证 // 简单验证
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) { 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) {
alert('请填写所有必填字段'); this.$message({
message: '请填写所有必填字段',
type: 'warning'
});
return; return;
} }
// 检查是否上传了照片 // 检查是否上传了照片
if (!this.selectedFile) { if (!this.selectedFile) {
alert('请上传一寸照片'); this.$message({
message: '请上传一寸照片',
type: 'warning'
});
return; return;
} }
// 准备表单数据 // 准备表单数据
@ -547,7 +558,7 @@
.catch(error => { .catch(error => {
console.error('Error:', error); console.error('Error:', error);
this.isLoading = false; this.isLoading = false;
alert('生成PDF时出错请重试'); this.$message.error('生成PDF时出错请重试');
}); });
}, },
// 新增文件上传相关方法 // 新增文件上传相关方法
@ -560,7 +571,7 @@
let fileExtension = file.name.split('.').pop().toLowerCase(); let fileExtension = file.name.split('.').pop().toLowerCase();
let validExtensions = ['pdf', 'doc', 'docx', 'jpg', 'jpeg', 'png', 'gif', 'bmp']; let validExtensions = ['pdf', 'doc', 'docx', 'jpg', 'jpeg', 'png', 'gif', 'bmp'];
if (!validExtensions.includes(fileExtension)) { if (!validExtensions.includes(fileExtension)) {
alert('请上传PDF、Word文档或图片文件'); this.$message.error('请上传PDF、Word文档或图片文件');
return; return;
} }
this.uploadFile(file); this.uploadFile(file);
@ -606,12 +617,12 @@
// 重置选择框 // 重置选择框
document.getElementById('fileUpload').value = ''; document.getElementById('fileUpload').value = '';
} else { } else {
alert(`上传失败: ${response.data.msg}`); this.$message.error(`上传失败: ${response.data.msg}`);
} }
}) })
.catch(error => { .catch(error => {
console.error('上传错误:', error); console.error('上传错误:', error);
alert('上传过程中发生错误'); this.$message.error('上传过程中发生错误');
}); });
}, },
downloadFile(file) { downloadFile(file) {
@ -634,35 +645,53 @@
}) })
.catch(error => { .catch(error => {
console.error('下载错误:', error); console.error('下载错误:', error);
alert('下载文件时出错'); this.$message.error('下载文件时出错');
}); });
}, },
submitHandler() { submitHandler() {
if (this.uploadedFiles.length == 0) { if (this.uploadedFiles.length == 0) {
alert('请上传所需材料'); this.$message.warning('请上传所需材料');
return return;
}else{
if(confirm('确认提交吗?')){
$.operate.saveTab(`${this.prefix}/submit?applyId=${this.formData.applyId}`,);
}
} }
this.$confirm('确认提交吗?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
$.operate.saveTab(`${this.prefix}/submit?applyId=${this.formData.applyId}`);
}).catch(() => {
this.$message({
type: 'info',
message: '已取消'
});
});
}, },
deleteFile(file, index) { deleteFile(file, index) {
if (confirm(`确定要删除文件 "${file.fileName}" 吗?`)) { this.$confirm(`确定要删除文件 "${file.fileName}" 吗?`, '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
axios.get(ctx + 'system/file/delFile/' + file.id) axios.get(ctx + 'system/file/delFile/' + file.id)
.then(response => { .then(response => {
if (response.data.code === web_status.SUCCESS) { if (response.data.code === web_status.SUCCESS) {
this.uploadedFiles.splice(index, 1); this.uploadedFiles.splice(index, 1);
alert('文件已成功删除'); this.$message.success('文件已成功删除');
} else { } else {
alert(`删除失败: ${response.data.msg}`); this.$message.error(`删除失败: ${response.data.msg}`);
} }
}) })
.catch(error => { .catch(error => {
console.error('删除错误:', error); console.error('删除错误:', error);
alert('删除文件时出错'); this.$message.error('删除文件时出错');
}); });
} }).catch(() => {
this.$message({
type: 'info',
message: '已取消删除'
});
});
}, },
// 获取已上传文件 // 获取已上传文件
getUploadedFiles() { getUploadedFiles() {
@ -688,7 +717,7 @@
}) })
.catch(error => { .catch(error => {
console.error('获取文件列表错误:', error); console.error('获取文件列表错误:', error);
alert('获取已上传文件时出错'); this.$message.error('获取已上传文件时出错');
}); });
}, },
// 新增图片预览相关方法 // 新增图片预览相关方法

@ -4,6 +4,7 @@
<th:block th:include="include :: header('材料上传')"/> <th:block th:include="include :: header('材料上传')"/>
<th:block th:include="include :: select2-css"/> <th:block th:include="include :: select2-css"/>
<th:block th:include="include :: jasny-bootstrap-css"/> <th:block th:include="include :: jasny-bootstrap-css"/>
<th:block th:include="include :: element-css"/>
<link href="/file/pdf/test.css" rel="stylesheet"> <link href="/file/pdf/test.css" rel="stylesheet">
<script src="/file/pdf/tailwindcss.js"></script> <script src="/file/pdf/tailwindcss.js"></script>
<!-- Tailwind配置 --> <!-- Tailwind配置 -->
@ -124,7 +125,7 @@
<i class="fa-solid fa-cloud-upload text-4xl text-gray-400 mb-2"></i> <i class="fa-solid fa-cloud-upload text-4xl text-gray-400 mb-2"></i>
<label for="photo" class="cursor-pointer bg-white rounded-md font-medium text-primary hover:text-primary/80"> <label for="photo" class="cursor-pointer bg-white rounded-md font-medium text-primary hover:text-primary/80">
<span>上传照片</span> <span>上传照片</span>
<input disabled id="photo" name="photo" type="file" accept="image/jpeg,image/png" class="sr-only" @change="handleFileUpload"> <input disabled id="photo" name="photo" type="file" accept="image/jpeg,image/png" class="sr-only">
</label> </label>
<p class="text-xs text-gray-500"> <p class="text-xs text-gray-500">
JPG, PNG (最大 2MB) JPG, PNG (最大 2MB)
@ -297,9 +298,6 @@
<button @click="downloadFile(file)" class="text-primary hover:text-primary/80 mr-3"> <button @click="downloadFile(file)" class="text-primary hover:text-primary/80 mr-3">
<i class="fa-solid fa-download"></i> <i class="fa-solid fa-download"></i>
</button> </button>
<button @click="deleteFile(file, index)" class="text-red-500 hover:text-red-700">
<i class="fa-solid fa-trash"></i>
</button>
</div> </div>
</div> </div>
</div> </div>
@ -364,6 +362,7 @@
<th:block th:include="include :: footer"/> <th:block th:include="include :: footer"/>
<th:block th:include="include :: select2-js"/> <th:block th:include="include :: select2-js"/>
<th:block th:include="include :: jasny-bootstrap-js"/> <th:block th:include="include :: jasny-bootstrap-js"/>
<th:block th:include="include :: element-js"/>
<script type="text/javascript" th:inline="javascript"> <script type="text/javascript" th:inline="javascript">
var prefix = ctx + "system/auditList"; var prefix = ctx + "system/auditList";
new Vue({ new Vue({
@ -390,17 +389,10 @@
applyId: '', applyId: '',
}, },
selectedFile: null, selectedFile: null,
isLoading: false,
showResult: false,
pdfUrl: '',
// 新增文件上传相关数据 // 新增文件上传相关数据
selectedFiles: null,
currentFileName: '',
uploadProgress: 0,
uploadedFiles: [], uploadedFiles: [],
previewModalVisible: false, previewModalVisible: false,
previewingFile: {}, previewingFile: {},
uploadSuccessMessage: '',
prefix: ctx + "system/auditList", prefix: ctx + "system/auditList",
// 退回相关数据 // 退回相关数据
rejectDialogVisible: false, rejectDialogVisible: false,
@ -412,44 +404,6 @@
} }
}, },
methods: { methods: {
handleFileUpload(event) {
let file = event.target.files[0];
if (file) {
// 检查文件类型和大小
let fileSize = file.size / 1024 / 1024; // MB
if (fileSize > 2) {
alert('文件大小不能超过2MB');
return;
}
let fileType = file.type;
if (!fileType.startsWith('image/')) {
alert('请上传图片文件');
return;
}
// 验证图片格式
let validFormats = ['image/jpeg', 'image/png'];
if (!validFormats.includes(fileType)) {
alert('请上传JPG或PNG格式的图片');
return;
}
// 验证图片尺寸是否接近一寸照片 (2.5cm x 3.5cm, 约295x413像素)
let img = new Image();
img.src = window.URL.createObjectURL(file);
img.onload = () => {
let width = img.naturalWidth;
let height = img.naturalHeight;
let ratio = width / height;
// 检查宽高比是否接近一寸照片的比例 (约0.714)
if (Math.abs(ratio - 0.714) > 0.1) {
alert('建议上传一寸照片尺寸 (约295x413像素)');
}
this.selectedFile = file;
};
img.onerror = () => {
alert('无法加载图片,请重新选择');
};
}
},
downloadFile(file) { downloadFile(file) {
// 直接通过接口下载 // 直接通过接口下载
axios.get(ctx + 'system/file/download',{ axios.get(ctx + 'system/file/download',{
@ -479,10 +433,18 @@
alert('请上传所需材料'); alert('请上传所需材料');
return; return;
} }
this.$confirm('确认提交吗?', '提示', {
if (confirm('确认通过此申请吗?')) { confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
$.operate.saveTab(`${this.prefix}/submitAudit`,{applyId:this.formData.applyId}); $.operate.saveTab(`${this.prefix}/submitAudit`,{applyId:this.formData.applyId});
} }).catch(() => {
this.$message({
type: 'info',
message: '已取消'
});
});
}, },
// 新增显示退回对话框方法 // 新增显示退回对话框方法
showRejectDialog() { showRejectDialog() {
@ -506,33 +468,6 @@
applyMsg:this.rejectReason applyMsg:this.rejectReason
}); });
}, },
submitHandler() {
if (this.uploadedFiles.length == 0) {
alert('请上传所需材料');
return
}else{
if(confirm('确认提交吗?')){
$.operate.saveTab(`${this.prefix}/submit?applyId=${this.formData.applyId}`,);
}
}
},
deleteFile(file, index) {
if (confirm(`确定要删除文件 "${file.fileName}" 吗?`)) {
axios.get(ctx + 'system/file/delFile/' + file.id)
.then(response => {
if (response.data.code === web_status.SUCCESS) {
this.uploadedFiles.splice(index, 1);
alert('文件已成功删除');
} else {
alert(`删除失败: ${response.data.msg}`);
}
})
.catch(error => {
console.error('删除错误:', error);
alert('删除文件时出错');
});
}
},
// 获取已上传文件 // 获取已上传文件
getUploadedFiles() { getUploadedFiles() {
if (!this.formData.applyId) return; if (!this.formData.applyId) return;

Loading…
Cancel
Save