在校证明表格水印添加

src/views/routine/school/component/Status.vue

@@ -1,9 +1,30 @@
 <template>
-  <div style="display: flex; justify-content: center; align-items: center">
+  <div style="display: flex; justify-content: center; align-items: center" :data-watermark="watermarkText">
-    <!-- 打印表格页面 -->
+    <!-- 打印表格页面：新增position: relative，为水印DOM提供定位容器 -->
-    <div id="print" ref="print">
+    <div id="print" ref="print" style="position: relative;">
-      <!-- 存根部分 -->
+      <!-- 新增：打印专用水印DOM（真实元素，解决打印渲染问题） -->
-      <h1 style=" font-size: 20px; text-align: center">
+      <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; font-family: '仿宋', SimSun;">证明使用人: 姓    名 : {{ 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; font-family: '仿宋', SimSun;">            性    别 ：{{ 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; font-family: '仿宋', SimSun;">            入学时间 : {{ 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; font-family: '仿宋', SimSun;">      所在学院及专业 : {{ 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; text-align: left; font-family: '仿宋', SimSun;">           经办人：{{ 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; 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>
+      <h1 style="font-size: 40px; text-align: center; font-family: '黑体', SimHei;">证明</h1>
-      <pre><p style="font-size: 20px; text-align: right">（编号：          ）</p></pre>
+      <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; font-family: '仿宋', SimSun;">广西水利电力职业技术学院</div>
-        <div style="font-size: 25px;text-align: right;margin-right: 70px">学生工作处</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"> {{ form.xgtime| formatDate }}</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">查询电话：0771-2085115</div>
+        <div style="font-size: 25px; text-align: left; font-family: '仿宋', SimSun;">查询电话：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>
       
+      <!-- 原有注释表格保留 -->
       <!-- <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: '',
+        font_size: '16px'
-
-        // 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;
-        //     }`,
       })
     },
-    // 跳转到打印页面
+
+    // 优化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", {
+              this.setWatermark()
-              //   base: false,
-              //   active: 1,
-              // });
-              // this.$router.push({
-              //   path: "/routine/school/application",
-              // });
             })
           }
         }
@@ -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>
+</style>

src/views/routine/school/stuinfo.vue

@@ -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',