From 64352347cdeab2f4f5c1d5e3fa32548bfad1a682 Mon Sep 17 00:00:00 2001
From: zhouwx <1175765986@qq.com>
Date: 星期一, 14 十月 2024 09:21:21 +0800
Subject: [PATCH] 打印、导出

---
 src/main.js                                         |    3 +
 src/views/onlineEducation/classCertManage/index.vue |   69 ++++++++++++++++++++++++++++++----
 2 files changed, 63 insertions(+), 9 deletions(-)

diff --git a/src/main.js b/src/main.js
index 686802e..5607eeb 100644
--- a/src/main.js
+++ b/src/main.js
@@ -39,6 +39,8 @@
 import DictData from '@/components/DictData'
 import '@/utils/filter'
 import '@/utils/validate'
+import Print from 'vue-print-nb'
+
 // 全局方法挂载
 Vue.prototype.getDicts = getDicts
 Vue.prototype.getConfigKey = getConfigKey
@@ -62,6 +64,7 @@
 Vue.use(directive)
 Vue.use(plugins)
 Vue.use(VueMeta)
+Vue.use(Print)
 DictData.install()
 
 /**
diff --git a/src/views/onlineEducation/classCertManage/index.vue b/src/views/onlineEducation/classCertManage/index.vue
index 851b40b..6f188f0 100644
--- a/src/views/onlineEducation/classCertManage/index.vue
+++ b/src/views/onlineEducation/classCertManage/index.vue
@@ -69,7 +69,7 @@
         <template #default="scope">
           <el-button size="mini" type="text" style="color: #1890ff" @click="viewPic(scope.row)">查看</el-button>
           <el-button size="mini" type="text" style="color: #1890ff" @click="downloadByBlob(scope.row)">下载</el-button>
-          <el-button size="mini" type="text" style="color: #1890ff">打印</el-button>
+          <el-button size="mini" type="text" style="color: #1890ff" @click="print(scope.row)">打印</el-button>
         </template>
       </el-table-column>
     </el-table>
@@ -92,10 +92,26 @@
         </el-image>
       </div>
     </el-dialog>
+    <el-dialog
+      :visible.sync="printDialog"
+      width="500px"
+      :before-close="handlePrintClose">
+      <div style="display: flex;flex-direction: column;align-items: flex-end">
+        <el-button type="primary" style="margin-bottom: 5px" v-print="'#printPic'">打印</el-button>
+      </div>
+      <div style="display: flex;justify-content: center" ref="printPic" id="printPic">
+        <el-image
+          style="width: 85%; height: auto;margin-top: 10px"
+          :src="printUrl"
+          >
+        </el-image>
+      </div>
+    </el-dialog>
   </div>
 </template>
 
 <script>
+
 import { listBatch, listQuestion } from '@/api/onlineEducation/student'
 import { listPlatSelect } from '@/api/onlineEducation/plat'
 import moment from 'moment/moment'
@@ -128,17 +144,34 @@
       trainOrgList: [],
       jsonData: [],
       json_fields: {
-        ID: "id",
-        姓名: "name",
-        身份证号: "idcard",
-        推送平台: "institutionName",
-        所属机构: "trainOrgName",
-        批次: "batchName",
-        证书生成时间: "certTime",
+        'ID': {
+          field: 'id',
+          callback: value => {
+            return '&nbsp;'+value
+          }
+        },
+        '姓名': "name",
+        '身份证号': {
+          field: 'idcard',
+          callback: value => {
+            return '&nbsp;'+value
+          }
+        },
+        '推送平台': "institutionName",
+        '所属机构': {
+          field: 'trainOrgName',
+          callback: value => {
+            return '&nbsp;'+value
+          }
+        },
+        '批次': "batchName",
+        '证书生成时间': "certTime",
       },
       picDialog: false,
       viewUrl: '',
-      srcList: []
+      srcList: [],
+      printDialog: false,
+      printUrl: '',
     };
   },
   created() {
@@ -226,6 +259,15 @@
       // this.srcList = []
       this.picDialog = false
     },
+    handlePrintClose() {
+      this.printUrl = ''
+      this.printDialog = false
+    },
+    print(val){
+      this.printUrl = val.certUrl
+
+      this.printDialog = true
+    },
     downloadByBlob(val) {
       let image = new Image()
       image.setAttribute('crossOrigin', 'anonymous')
@@ -254,3 +296,12 @@
   }
 };
 </script>
+<style media="printPic" scoped>
+@page {
+  margin: 0; /* this affects the margin in the printer settings */
+  display: block;
+  width: 100%;
+  overflow: hidden;
+}
+
+</style>

--
Gitblit v1.9.2