实现打印存根

ruoyi-ui/package.json

@@ -51,6 +51,7 @@
     "file-saver": "2.0.5",
     "fuse.js": "6.4.3",
     "highlight.js": "9.18.5",
+    "html-to-image": "^1.11.11",
     "js-beautify": "1.13.0",
     "js-cookie": "3.0.1",
     "jsencrypt": "3.0.0-rc.1",

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

@@ -39,7 +39,7 @@
       <el-button type="danger" plain icon="el-icon-back" size="mini" v-if="status == '1'" @click="handleBack"
                  :disabled="multiple">退回修改
       </el-button>
-<!--      <el-button type="danger" icon="el-icon-s-release" size="mini" v-if="status == '1'" @click="handleReject"
+      <!--      <el-button type="danger" icon="el-icon-s-release" size="mini" v-if="status == '1'" @click="handleReject"
                        :disabled="multiple">驳回
             </el-button>-->
       <el-button type="info" icon="el-icon-finished" size="mini" v-if="status == '1'" @click="handleFinished">结束
@@ -118,12 +118,12 @@
           <el-button size="mini" type="text" icon="el-icon-back" v-if="scope.row.auditStatus == '3' && status == '1'"
                      @click="handleBackOne(scope.row)" v-hasPermi="['system:relation:edit']">退回修改
           </el-button>
-<!--          <el-button size="mini" type="text" icon="el-icon-s-release"
+          <!--          <el-button size="mini" type="text" icon="el-icon-s-release"
                                v-if="scope.row.auditStatus == '3' && status == '1'"
                                @click="handleRejectOne(scope.row)" v-hasPermi="['system:relation:remove']">驳回
                     </el-button>-->
           <el-button size="mini" type="text" icon="el-icon-view" @click="handleView(scope.row)"
-                     v-if="scope.row.auditStatus === '3' && scope.row.auditStatus != null"
+                     v-if="scope.row.auditStatus != null"
                      v-hasPermi="['system:relation:edit']">查看
           </el-button>
         </template>
@@ -136,11 +136,13 @@
     <!-- 添加或修改【请填写功能名称】对话框 -->
     <el-dialog :visible.sync="open" width="1200px" append-to-body @close="cancel">
       <el-form ref="form" :model="form" :rules="rules">
-        <el-descriptions title="报名信息" border>
-          <el-descriptions-item label="照片" span="3">
-            <el-image :src="baseUrl + form.photo" style="width: 150px;height: auto" fit="fill"></el-image>
+        <div id="printDom" ref="printDom">
+          <div style="display: flex;width: 100%;margin-bottom: 10px;">
+            <div style="flex: 1">
+              <el-descriptions :column="1" border>
+                <el-descriptions-item label="姓名">
+                  <div style="width: 500px">{{ form.studentName }}</div>
                 </el-descriptions-item>
-          <el-descriptions-item label="姓名">{{ form.studentName }}</el-descriptions-item>
                 <el-descriptions-item label="身份证号码">{{ form.idCard }}</el-descriptions-item>
                 <el-descriptions-item label="性别">
                   <dict-tag :options="dict.type.sys_user_sex" :value="form.sex"/>
@@ -154,13 +156,23 @@
                       <el-input v-model="form.eduStudentName"></el-input>
                     </el-form-item>
                   </el-descriptions-item>
-<!--              <el-descriptions-item label="身份证号（教育部）" :span="2">-->
-<!--                <el-form-item prop="eduIdCard">-->
-<!--                  <el-input v-model="form.eduIdCard"></el-input>-->
-<!--                </el-form-item>-->
-<!--              </el-descriptions-item>-->
+                  <!--              <el-descriptions-item label="身份证号（教育部）" :span="2">-->
+                  <!--                <el-form-item prop="eduIdCard">-->
+                  <!--                  <el-input v-model="form.eduIdCard"></el-input>-->
+                  <!--                </el-form-item>-->
+                  <!--              </el-descriptions-item>-->
                 </template>
                 <el-descriptions-item label="身份证号（教育部）" :span="2">{{ form.eduIdCard }}</el-descriptions-item>
+              </el-descriptions>
+            </div>
+            <el-image
+              :src="baseUrl + form.photo"
+              :preview-src-list="[baseUrl + form.photo]"
+              style="width: auto;height: 211px;float: right;margin-left: 10px"
+              fit="fill"
+            ></el-image>
+          </div>
+          <el-descriptions border>
             <el-descriptions-item label="测试项目">{{ form.project }}</el-descriptions-item>
             <el-descriptions-item label="联系方式1">{{ form.telephone1 }}</el-descriptions-item>
             <el-descriptions-item label="联系方式2">{{ form.telephone2 }}</el-descriptions-item>
@@ -197,13 +209,22 @@
             </el-descriptions-item>
             <el-descriptions-item label="资料" :span="3">
               <template v-for="item in form.fileList">
-              <el-image :src="baseUrl + item.fjlj" style="width: 150px;height: auto" fit="fill"></el-image>
+                <!--              <el-image :src="baseUrl + item.fjlj" style="width: 150px;height: auto" fit="fill"></el-image>-->
+                <el-link
+                  type="primary"
+                  :href="baseUrl + item.fjlj"
+                  target="_blank"
+                  style="display: block"
+                >{{ item.fjmc }}
+                </el-link>
               </template>
             </el-descriptions-item>
           </el-descriptions>
+        </div>
       </el-form>
       <span slot="footer" class="dialog-footer">
         <el-button @click="cancel">取 消</el-button>
+        <el-button v-if="form.auditStatus === '1'" type="warning" @click="print">打印</el-button>
         <el-button v-if="!isHandle" type="primary" @click="submitForm">提 交</el-button>
       </span>
     </el-dialog>
@@ -293,6 +314,8 @@
 </template>
 
 <script>
+import printJS from 'print-js'
+import * as htmlToImage from 'html-to-image'
 import {
   addRelation,
   back,
@@ -432,8 +455,18 @@ export default {
       }
     };
   },
-
   methods: {
+    print() {
+      htmlToImage.toPng(this.$refs.printDom, {
+        pixelRatio: 5
+      }).then((dataUrl) => {
+        printJS({
+          type: 'image',
+          printable: [dataUrl],
+          documentTitle: '报名审核存根'
+        })
+      })
+    },
     /** 查询【请填写功能名称】列表 */
     getList() {
       this.loading = true;
@@ -927,12 +960,12 @@ export default {
 </script>
 
 <style scoped>
-._status_success{
+._status_success {
   color: #47bb02;
   font-weight: bold;
 }
 
-._status_error{
+._status_error {
   color: red;
   font-weight: bold;
 }