打印准考证

ruoyi-ui/src/views/smartSchool/openRecruitment/examManage/components/examRoomAllocate.vue

@@ -80,6 +80,11 @@
           <el-button size="mini" type="text" icon="el-icon-view" @click="handleView(scope.row)"
                      v-if="status == '3'||status == '4'">查看
           </el-button>
+          <el-button
+            v-if="status == '3'||status == '4'"
+            type="text" icon="el-icon-printer"
+            @click="handlePrint(scope.row)"
+          >打印准考证</el-button>
         </template>
       </el-table-column>
     </el-table>
@@ -172,6 +177,69 @@
         <el-button @click="cancel">取 消</el-button>
       </div>
     </el-dialog>
+    <el-dialog title="打印准考证" width="1100px" :visible.sync="printOpen" append-to-body>
+      <el-card style="width: 940px; margin: auto">
+        <br/>
+        <div id="printArea" class="main">
+          <br/>
+          <div class="title">{{ todayYear }}{{ form.examName }}</div>
+          <div class="titleSub">
+            准考证
+          </div>
+          <br/><br/><br/>
+          <div>
+            <div class="left">
+              <ul style="margin-left: 40px">
+                <li>
+                  <b>姓名：</b>{{ form.studentName }}<br/><br/>
+                </li>
+                <li>
+                  <b>准考证号：</b>{{ form.examNumber }}<br/><br/>
+                </li>
+                <li>
+                  <b>报考岗位：</b>{{ form.project }}<br/><br/>
+                </li>
+                <li>
+                  <b>组别(座号)：</b>{{ form.inGroup }}<br/><br/>
+                </li>
+                <li>
+                  <b>联系电话：</b>{{ form.telephone1 }}<br/><br/>
+                </li>
+              </ul>
+            </div>
+            <div class="right">
+              <el-image :src="baseUrl + form.photo"
+                        style="width: 180px; height: 220px;"></el-image>
+            </div>
+          </div>
+
+          <table border="1" class="table">
+            <tr>
+              <th style="width: 35%;height: 30px;text-align: center;">考试时间({{
+                  todayYear
+                }}年)
+              </th>
+              <th style="width: 30%;height: 30px;text-align: center;">考试时间</th>
+              <th style="width: 35%;height: 30px;text-align: center;">考试地点</th>
+            </tr>
+            <tr>
+              <th style="height: 30px;text-align: center;">{{ form.examDate }}</th>
+              <th style="height: 30px;text-align: center;">{{ form.examTime }}</th>
+              <th style="height: 30px;text-align: center;">{{ form.examAddress }}</th>
+            </tr>
+          </table>
+          <br/>
+          <div style="width: 800px;height:600px; margin: auto">
+            <b style="font-size: 16px; line-height: 30px">注意事项：</b>
+            <p v-html="form.notice" style="line-height: 22px; font-size: 14px"></p>
+          </div>
+        </div>
+      </el-card>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="printStart">打 印</el-button>
+        <el-button @click="printOpen = false">取 消</el-button>
+      </div>
+    </el-dialog>
   </div>
 </template>
 
@@ -186,6 +254,7 @@ import {
 } from "@/api/smartSchool/openRecruitment";
 import {getToken} from "@/utils/auth";
 import {Gender} from "@/enums/common";
+import printJS from "print-js";
 
 export default {
   name: "Relation",
@@ -193,6 +262,7 @@ export default {
   props: ['examId'],
   data() {
     return {
+      printOpen: false,
       baseUrl: [process.env.VUE_APP_BASE_API],
       // 遮罩层
       loading: true,
@@ -276,12 +346,35 @@ export default {
       }
     };
   },
+  computed: {
+    todayYear() {
+      const time = new Date()
+      return time.getFullYear()
+    }
+  },
   created() {
     // this.getList();
     // this.getTestList();
 
   },
   methods: {
+    printStart() {
+      printJS({
+        printable: 'printArea',
+        targetStyles: ['*'],
+        type: "html",
+      })
+    },
+    handlePrint(row) {
+      this.reset();
+      this.isHandle = true
+      const id = row.id || this.ids
+      getAddressInfo(id).then(response => {
+        this.form = response.data;
+        this.imageUrl = this.isEmptyAvatar(this.form.photo, this.form.sex);
+        this.printOpen = true;
+      });
+    },
     /** 查询【请填写功能名称】列表 */
     getList() {
       this.loading = true;
@@ -474,7 +567,7 @@ export default {
   }
 };
 </script>
-<style scoped>
+<style scoped lang="less">
 .fullbg {
   background-color: rgb(201, 201, 201);
   left: 0;
@@ -514,4 +607,74 @@ export default {
   display: block;
 }
 
+.main {
+  width: 95%;
+  height: 1200px;
+  margin: auto;
+  border: 1px solid rgb(101, 98, 98);
+}
+
+.notice {
+  width: 700px;
+  margin: auto;
+}
+
+.left {
+  width: 65%;
+  height: 260px;
+  display: inline-block;
+  vertical-align: top;
+//background: red;
+
+  ul li {
+    list-style: none;
+  }
+}
+
+.right {
+  display: inline-block;
+  width: 25%;
+//background: yellow;
+}
+
+.table {
+  border-color: rgb(101, 98, 98);
+  border-collapse: collapse;
+  width: 100%;
+  height: 120px;
+}
+
+.el-divider--horizontal {
+  margin: 15px 0;
+}
+
+.print {
+  width: 100%;
+//background:firebrick ;
+  height: 780px;
+  overflow-y: auto;
+}
+
+.title {
+  font-size: 32px;
+  font-weight: bolder;
+  text-align: center;
+  letter-spacing: 5px
+}
+
+.titleSub {
+  text-align: center;
+  font-weight: bold;
+  font-size: 30px;
+  margin-top: 15px;
+  letter-spacing: 10px
+}
+
+.pic {
+  width: 210px;
+  height: 199px;
+  margin: 110px auto;
+  background-image: url(../../../../../assets/image/nocard.png);
+}
+
 </style>

ruoyi-ui/vue.config.js

@@ -48,8 +48,8 @@ module.exports = {
         //学校内网
         // target: `http://10.20.100.201:57321`,
         // target: `http://47.105.176.202:5115`,
-        // target: `http://172.16.100.96:5131`,
-        target: 'http://192.168.31.14:5131',
+        target: `http://172.16.100.114:5131`,
+        // target: 'http://192.168.31.14:5131',
         // target: `http://172.18.6.157:8848`,
         changeOrigin: true,
         pathRewrite: {