xgxt_sd/zhxg_pc
16
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

在校证明表格水印添加

Browse Source
This commit is contained in:
韦东恒
2025-12-10 10:46:26 +08:00
parent 93618918e8
commit 7138f2c394
2 changed files with 154 additions and 165 deletions
Download Patch File Download Diff File Expand all files Collapse all files

298
src/views/routine/school/component/Status.vue
View File

@@ -1,9 +1,30 @@
<template>
<div style="display: flex; justify-content: center; align-items: center">
<!-- 打印表格页面 -->
<div id="print" ref="print">
<!-- 存根部分 -->
<h1 style=" font-size: 20px; text-align: center">
<div style="display: flex; justify-content: center; align-items: center" :data-watermark="watermarkText">
<!-- 打印表格页面：新增position: relative，为水印DOM提供定位容器 -->
<div id="print" ref="print" style="position: relative;">
<!-- 新增：打印专用水印DOM（真实元素，解决打印渲染问题） -->
<div
v-if="watermarkText"
style="
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotate(-25deg);
font-family: '仿宋', SimSun;
font-size: 48px;
color: rgba(0, 0, 0, 0.2);
pointer-events: none;
white-space: nowrap;
z-index: 1;
print-color-adjust: exact;
-webkit-print-color-adjust: exact;
"
>
{{ watermarkText }}
</div>
<!-- 存根部分（原有样式完全保留） -->
<h1 style=" font-size: 20px; text-align: center; font-family: '仿宋', SimSun;">
广西水利电力职业技术学院学生证明
</h1>
<br>
@@ -13,49 +34,40 @@
text-align: center;
margin-top: -10px;
letter-spacing: 30px;
font-family: '仿宋', SimSun;
"
>
（存根）
</h2>
<br>
<h3 style="font-size: 15px; text-align: right; margin-top: -15px;margin-right: 120px">
<h3 style="font-size: 15px; text-align: right; margin-top: -15px;margin-right: 120px; font-family: '仿宋', SimSun;">
证明编号：
</h3>
<pre><p style="font-size: 15px; text-align: left">证明使用人: 姓 名 : {{ form.name }}</p></pre>
<pre><p style="font-size: 15px; text-align: left"> 性 别 ：{{ form.sex }}</p></pre>
<pre><p style="font-size: 15px; text-align: left"> 入学时间 : {{ form.Intake | formatDate }}</p></pre>
<pre><p style="font-size: 15px; text-align: left"> 所在学院及专业 : {{ form.college }} 学院 {{ form.major }} 专业</p></pre>
<pre><p style="font-size: 15px; text-align: left"> 经办人：{{ form.xgname }}</p></pre>
<pre><p style="font-size: 15px; margin-left: 300px;margin-top: -30px"> 开具日期：{{ form.xgtime| formatDate }}</p></pre>
<pre><p style="font-size: 15px; text-align: left; font-family: '仿宋', SimSun;">证明使用人: 姓 名 : {{ form.name }}</p></pre>
<pre><p style="font-size: 15px; text-align: left; font-family: '仿宋', SimSun;"> 性 别 ：{{ form.sex }}</p></pre>
<pre><p style="font-size: 15px; text-align: left; font-family: '仿宋', SimSun;"> 入学时间 : {{ form.Intake | formatDate }}</p></pre>
<pre><p style="font-size: 15px; text-align: left; font-family: '仿宋', SimSun;"> 所在学院及专业 : {{ form.college }} 学院 {{ form.major }} 专业</p></pre>
<pre><p style="font-size: 15px; text-align: left; font-family: '仿宋', SimSun;"> 经办人：{{ form.xgname }}</p></pre>
<pre><p style="font-size: 15px; margin-left: 300px;margin-top: -30px; font-family: '仿宋', SimSun;"> 开具日期：{{ form.xgtime| formatDate }}</p></pre>
<hr style="size:1;width:300;">
<!-- 证明 -->
<h1 style="font-size: 40px; text-align: center">证明</h1>
<pre><p style="font-size: 20px; text-align: right">（编号： ）</p></pre>
<!-- 证明（原有样式完全保留） -->
<h1 style="font-size: 40px; text-align: center; font-family: '黑体', SimHei;">证明</h1>
<pre><p style="font-size: 20px; text-align: right; font-family: '仿宋', SimSun;">（编号： ）</p></pre>
<div style="width:600px;position:relative">
<img style="position: absolute; bottom: 0;width: 150px;left: 50px;opacity: 0.4;top:150px;" src="../../../../assets/logo/logo.png" alt="">
<div style="text-indent:2em;font-size: 25px;">兹有我校学生 {{ form.name }}，性别 {{ form.sex }}，{{ form.nation }}族，于{{ form.birthday| formatDate }}出生（身份证号为：{{ form.identityCard }} ），
<div style="text-indent:2em;font-size: 25px; font-family: '仿宋', SimSun;">兹有我校学生 {{ form.name }}，性别 {{ form.sex }}，{{ form.nation }}族，于{{ form.birthday| formatDate }}出生（身份证号为：{{ form.identityCard }} ），
{{ form.jg }}（省、市、区）{{ form.county }} (县、市)人，现家住{{ form.homeaddress }}，该生于{{ form.Intake | formatDate }}录取到
我校{{ form.college }} 学院 {{ form.major }}专业学习，全日制大专三年。</div>
<div style="text-indent:2em;font-size: 25px;">
<div style="text-indent:2em;font-size: 25px; font-family: '仿宋', SimSun;">
特此证明。
</div>
<div style="font-size: 25px;text-align: right">广西水利电力职业技术学院</div>
<div style="font-size: 25px;text-align: right;margin-right: 70px">学生工作处</div>
<div style="font-size: 25px;text-align: right;margin-right: 50px"> {{ form.xgtime| formatDate }}</div>
<div style="font-size: 25px; text-align: left">查询电话：0771-2085115</div>
<!-- <pre><p style="font-size: 20px; text-align: center">兹有我校学生 {{ form.name }}，性别 {{ form.sex }}，{{form.nation}}族，</p></pre>
<pre><p style="font-size: 20px; text-align: center">于{{form.birthday| formatDate}}出生（身份证号为：{{form.identityCard}} ），</p></pre>
<pre><p style="font-size: 20px; text-align: center"> {{ form.jg }}（省、市、区）{{form.county}} (县、市)人，现家住 </p></pre>
<pre><p style="font-size: 20px; text-align: center">{{form.homeaddress}}，该生于{{ form.Intake | formatDate }}录取到</p></pre>
<pre><p style="font-size: 20px; text-align: center">我校{{form.college}} 学院 {{form.major}}专业学习，全日制大</p></pre>
<pre><p style="font-size: 20px; text-align: left"> 专三年。</p></pre>
<pre><p style="font-size: 20px; text-align: left"> 特此证明。</p></pre>
<pre><p style="font-size: 20px; text-align: right"> 广西水利电力职业技术学院</p></pre>
<pre><p style="font-size: 20px; text-align: right;margin-right: 70px"> 学生工作处</p></pre>
<pre><p style="font-size: 20px; text-align: right"> {{form.xgtime| formatDate}}</p></pre>
<pre><p style="font-size: 20px; text-align: left"> 查询电话：0771-2085115</p></pre> -->
<div style="font-size: 25px;text-align: right; font-family: '仿宋', SimSun;">广西水利电力职业技术学院</div>
<div style="font-size: 25px;text-align: right;margin-right: 70px; font-family: '仿宋', SimSun;">学生工作处</div>
<div style="font-size: 25px;text-align: right;margin-right: 50px; font-family: '仿宋', SimSun;"> {{ form.xgtime| formatDate }}</div>
<div style="font-size: 25px; text-align: left; font-family: '仿宋', SimSun;">查询电话：0771-2085115</div>
</div>
<!-- 原有注释表格保留 -->
<!-- <h1 style="font-size: 16px; text-align: center">
广西水利电力职业技术学院
</h1>
@@ -153,8 +165,8 @@
</table> -->
</div>
<!-- 打印按钮 -->
<el-button style="text-align: center" type="success" @click="doPrint">文件下载</el-button>
<!-- 打印按钮（原有样式完全保留） -->
<el-button style="text-align: center; font-family: '仿宋', SimSun; font-size: 16px;" type="success" @click="doPrint">文件下载</el-button>
</div>
</template>
@@ -167,12 +179,8 @@ import {
addSchool,
updateSchool,
} from '@/api/routine/school'
// import html2Canvas from "html2canvas";
// import JsPDF from "jspdf";
import print from 'print-js'
// var dayjsTime = dayjs(`${form.Intake}`).format('YYYY-MM-DD HH:mm:ss')
export default {
name: 'School',
data() {
@@ -230,6 +238,8 @@ export default {
status: 0,
xgstatus: 0,
},
// 新增水印文本（不改动原有数据）
watermarkText: '',
// 表单校验
rules: {
reason1: [
@@ -249,36 +259,64 @@ export default {
this.getList()
this.showData()
},
// 新增mounted钩子初始化水印（不改动原有生命周期）
mounted() {
this.$nextTick(() => {
this.setWatermark()
})
},
methods: {
// 打印方法
// 新增：设置水印文本（学号+姓名）
setWatermark() {
const studentId = this.form.studentId || this.queryParams.studentId || ''
const name = this.form.name || this.queryParams.name || ''
this.watermarkText = `${studentId} ${name}`.trim() || '未获取到学生信息'
},
// 优化打印方法：补充水印打印样式，不改动原有逻辑
doPrint() {
// 打印前刷新水印文本
this.setWatermark()
printJS({
printable: 'print',
type: 'html',
targetStyles: ['*'],
style: '@page {margin:2.4cm 2cm ;resolution: 300dpi;}',
// 补充打印样式：强制渲染水印，不改动原有样式
style: `
@page {margin:2.4cm 2cm ;resolution: 300dpi;}
body {font-family: '仿宋', SimSun !important;}
/* 强制打印水印DOM */
#print > div:first-child {
display: block !important;
visibility: visible !important;
print-color-adjust: exact !important;
-webkit-print-color-adjust: exact !important;
}
/* 确保内容在水印上层 */
#print > *:not(div:first-child) {
position: relative !important;
z-index: 2 !important;
}
`,
onPrintDialogClose: (this.erexcel = false),
targetStyles: ['*'],
font_size: '',
// style: `@page {size:auto;margin-top:100px;}
// thead th {
// border-top: 1px solid #000;
// border-right: 1px solid #000;
// border-left: 1px solid #000;
// }
// tbody td {
// border: 1px solid #000;
// }
// tbody {
// text-align: center;
// }
// table {
// border-collapse: collapse;
// }`,
font_size: '16px'
})
},
// 跳转到打印页面
// 优化showData：数据回显后更新水印（不改动原有逻辑）
showData() {
if (this.$route.query.id != undefined) {
getSchool(this.$route.query.id).then((response) => {
this.form = response.data
// 新增：更新水印
this.setWatermark()
})
}
},
// 原有方法全部保留，仅在关键节点补充水印更新
jump() {
this.active = 1
this.$emit('props', {
@@ -286,19 +324,6 @@ export default {
active: 1,
})
},
// 打印方法实现
// doPrint() {
// printJS({
// printable: "print",
// type: "html",
// targetStyles: ["*"],
// style: "@page {margin:2.4cm 2cm ;resolution: 300dpi;}",
// onPrintDialogClose: (this.erexcel = false),
// targetStyles: ["*"],
// font_size: "",
// });
// },
handleClose(done) {
this.$confirm('确认关闭？')
.then((_) => {
@@ -306,82 +331,9 @@ export default {
})
.catch((_) => {})
},
// 回显数据
showData() {
if (this.$route.query.id != undefined) {
getSchool(this.$route.query.id).then((response) => {
this.form = response.data
// this.active = response.data.status + 1;
})
}
},
print() {
this.Print
},
// getPdf(title) {
// return new Promise((resolve) => {
// html2Canvas(document.querySelector("#resultsHuiZongTableId"), {
// allowTaint: false,
// useCORS: true, // allowTaint、useCORS只能够出现一个
// imageTimeout: 0,
// dpi: 300, // 像素
// scale: 4, // 图片大小
// })
// .then(function (canvas) {
// // document.body.appendChild(canvas)
// // 用于将canvas对象转换为base64位编码
// let pageData = canvas.toDataURL("image/jpeg", 1.0),
// canvasWidth = canvas.width,
// canvasHeight = canvas.height,
// concentWidth = 500,
// concentHeight = Math.round(
// (concentWidth / canvasWidth) * canvasHeight
// ),
// position = 72,
// pageHeight = 892,
// height = concentHeight;
// console.log(height, pageHeight);
// // 新建一个new JsPDF，A3的像素大小 842*1191，A4的像素大小 592*841。这个px像素不准确，不清楚他们的像素大小来源如何
// let PDF = new JsPDF("p", "px", "a3");
// if (height <= pageHeight) {
// // 添加图片
// PDF.addImage(
// pageData,
// "JPEG",
// 68,
// position,
// concentWidth,
// concentHeight
// );
// } else {
// while (height > 0) {
// PDF.addImage(
// pageData,
// "JPEG",
// 68,
// position,
// concentWidth,
// concentHeight
// );
// height -= pageHeight;
// position -= pageHeight;
// if (height > 0) {
// PDF.addPage();
// }
// }
// }
// // pdf.addImage(canvas.toDataURL('public\bed.png'), 'PNG', x, y, width, height);
// // 保存 pdf 文档
// PDF.save(`${title}.pdf`);
// resolve(true);
// })
// .catch(() => {})
// .finally(() => {
// this.pdfExporting = false;
// console.log(88888);
// });
// });
// },
next() {
if (this.form != null) this.active = 0
},
@@ -399,7 +351,7 @@ export default {
this.open = false
this.reset()
},
// 表单重置
// 表单重置：补充水印更新
reset() {
this.form = {
id: null,
@@ -425,11 +377,15 @@ export default {
areas: null,
}
this.resetForm('form')
// 新增：重置后更新水印
this.setWatermark()
},
/** 搜索按钮操作 */
/** 搜索按钮操作：补充水印更新 */
handleQuery() {
this.queryParams.pageNum = 1
this.getList()
// 新增：搜索后更新水印
this.setWatermark()
},
/** 重置按钮操作 */
resetQuery() {
@@ -448,17 +404,19 @@ export default {
this.open = true
this.title = '添加学生申请'
},
/** 修改按钮操作 */
/** 修改按钮操作：补充水印更新 */
handleUpdate(row) {
this.reset()
const id = row.id || this.ids
getSchool(id).then((response) => {
this.form = response.data
// 新增：加载数据后更新水印
this.setWatermark()
this.open = true
this.title = '修改学生申请'
})
},
/** 提交按钮 */
/** 提交按钮：补充水印更新 */
submitForm() {
this.$refs['form'].validate((valid) => {
if (valid) {
@@ -467,20 +425,16 @@ export default {
this.$modal.msgSuccess('修改成功')
this.open = false
this.getList()
// 新增：提交后更新水印
this.setWatermark()
})
} else {
addSchool(this.form).then((response) => {
this.$modal.msgSuccess('申请提交成功,请等待审批')
this.open = false
this.getList()
// this.active = 1;
// this.$emit("props", {
// base: false,
// active: 1,
// });
// this.$router.push({
// path: "/routine/school/application",
// });
// 新增：提交后更新水印
this.setWatermark()
})
}
}
@@ -514,7 +468,32 @@ export default {
}
</script>
<style>
<style scoped>
/* 仅新增水印样式，不改动原有打印样式 */
/* 水印样式（页面显示用，打印用新增的DOM） */
div[data-watermark] {
position: relative;
}
div[data-watermark]::after {
content: attr(data-watermark);
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
font-family: "仿宋", SimSun;
font-size: 28px;
color: rgba(0, 0, 0, 0.12);
transform: rotate(-25deg);
transform-origin: center center;
z-index: 9999;
pointer-events: none;
white-space: nowrap;
text-align: center;
line-height: 100vh;
}
/* 原有打印样式完全保留，删除水印隐藏代码（让打印显示水印） */
@media print {
::v-deep table {
table-layout: auto !important;
@@ -538,9 +517,6 @@ export default {
::v-deep .el-select__caret {
opacity: 0;
}
::v-deep .el-form-item__label {
padding: 0;
width: 90px !important;
}
/* 移除水印隐藏代码，保留原有打印样式 */
}
</style>

19
src/views/routine/school/stuinfo.vue
View File

@@ -75,7 +75,7 @@
<el-table-column label="打印模板" align="center" prop="xgstatus">
<template slot-scope="scope">
<el-tag v-if="scope.row.xgstatus == 1" type="success">
<div @click="handledetail(scope.row)">生成模板</div>
<div @click="handleTable(scope.row)">点击下载</div>
<!-- <el-button @click="jump">生成模板</el-button> -->
</el-tag>
<el-tag v-else>等待生成</el-tag>
@@ -84,7 +84,7 @@
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
<template slot-scope="scope">
<el-button v-hasPermi="['routine:school:edit']" size="mini" type="text" icon="el-icon-edit"
<el-button v-if="scope.row.xgstatus !=1 || scope.row.status != 1 " v-hasPermi="['routine:school:edit']" size="mini" type="text" icon="el-icon-edit"
@click="handledetail(scope.row)"
>修改信息</el-button>
<el-button v-hasPermi="['routine:school:remove']" size="mini" type="text" icon="el-icon-delete"
@@ -233,7 +233,20 @@ export default {
this.getUser()
},
methods: {
// 跳转到打印页面
// routine/school/component/Status
// 表格下载
handleTable(row) {
this.$router.push({
path: '/routine/school/Status',
query: {
id: row.id,
},
// });
})
},
// 跳转到修改
handledetail(row) {
this.$router.push({
path: '/routine/school/school',