style:证书打印

renchao@pashanhoo.com
Showing 2 changed files with 83 additions and 10 deletions
src/image/bdcqz/bdcqzs1.jpg
src/views/workflow/components/dialog/zsdy.vue
--- a/src/image/bdcqz/bdcqzs1.jpg
View file @3d7db34
+++ b/src/image/bdcqz/bdcqzs1.jpg
View file @3d7db34
--- a/src/views/workflow/components/dialog/zsdy.vue
View file @3d7db34
+++ b/src/views/workflow/components/dialog/zsdy.vue
View file @3d7db34
 <!--
 * @Description:
 * @Autor: renchao
- * @LastEditTime: 2023-11-08 13:27:03
+ * @LastEditTime: 2023-12-18 16:00:55
 -->
 <template>
  <div>
@@ -12,7 +12,7 @@
        label-width="120px">
        <el-form-item label="印刷序列号：" prop="ysxlh">
          <el-row>
-            <el-col :span="22">
+            <el-col :span="18">
              <el-select v-model="ruleForm.ysxlh" @change="handleSelect" :disabled="disabled" placeholder="请选择">
                <el-option
                  v-for="item in ysxlh"
@@ -22,6 +22,12 @@
                </el-option>
              </el-select>
            </el-col>
+            <el-col :span="4" v-if="this.formData.bdcqzlx==1">
+              <el-tabs v-model="activeTitle">
+                <el-tab-pane label="第一页" name="title1"></el-tab-pane>
+                <el-tab-pane label="第二页" name="title2"></el-tab-pane>
+              </el-tabs>
+            </el-col>
            <el-col :span="2" v-if="this.formData.ysxlh">
              <el-button type="primary" @click="handleZF" v-if="disabled">作废</el-button>
            </el-col>
@@ -30,7 +36,8 @@
        </el-form-item>
      </el-form>
      <div class="zs-content">
-        <canvas ref="zs" width="1000" v-show="this.formData.bdcqzlx==1" height="700"></canvas>
+        <canvas ref="zs1" width="1000" v-show="this.formData.bdcqzlx==1 && activeTitle=='title1'" height="700"></canvas>
+        <canvas ref="zs" width="1000" v-show="this.formData.bdcqzlx==1 && activeTitle=='title2'" height="700"></canvas>
        <canvas ref="zm" width="1180" v-show="this.formData.bdcqzlx==2" height="780"></canvas>
      </div>
    </div>
@@ -62,12 +69,12 @@
 </template>
 <script>
+  import QRCode from 'qrcode'
  import store from '@/store/index.js'
  import { datas } from "../../javascript/zsyl.js";
  import { getPrintTemplateByCode } from "@/api/print";
  import { getLodop } from "@/utils/LodopFuncs"
  import { readYsxlh, certificate, getBdcqzDetail, invalidCertificate } from "@/api/bdcqz.js";
-  import { log } from 'bpmn-js-token-simulation';
  export default {
    props: {
      formData: {
@@ -79,11 +86,13 @@
    },
    data () {
      return {
+        activeTitle: 'title1',
        // 详细信息
        bdcqz: {},
        key: 0,
        disabled: false,
        // 不动产证书图片地址
+        imgSrc1: require('@/image/bdcqz/bdcqzs1.jpg'),
        imgSrc: require('@/image/bdcqz/bdcqzs2.jpg'),
        bdczmSrc: require('@/image/bdcqz/bdczm.jpg'),
        loading: false,
@@ -202,7 +211,42 @@
       * @description: 不动产证书
       * @author: renchao
       */
+      drawTextOnImage1 () {
+        const canvas = this.$refs.zs1;
+        const context = canvas.getContext('2d');
+        const image = new Image();
+        image.onload = () => {
+          context.drawImage(image, 0, 0);
+          context.font = '18px 楷体';
+          context.fillStyle = '#000000';
+          let date = this.bdcqz.djsj.split(' ')[0].split('/');
+          let nian = date[0]
+          let yue = date[1]
+          let ri = date[2]
+          this.bdcqz.nian = nian
+          this.bdcqz.yue = yue
+          this.bdcqz.ri = ri
+          context.fillText(nian ? nian : '', 780, 499);
+          context.fillText(yue ? yue : '', 840, 499);
+          context.fillText(ri ? ri : '', 885, 499);
+          QRCode.toDataURL(this.bdcqz.bdcqzh, { margin: 0 })
+            .then(url => {
+              const qrImage = new Image();
+              this.bdcqz.qrImage = url; // 将二维码图片的 URL 存储到 bdcqz 对象的 qrImage 属性中
+              qrImage.onload = () => {
+                context.drawImage(qrImage, 670, 400, 100, 100);
+              };
+              qrImage.src = url;
+            })
+            .catch(error => {
+              console.error(error);
+            });
+          context.fillText(this.bdcqz.bdcqzbm ? this.bdcqz.bdcqzbm : '', 745, 633);
+        };
+        image.src = this.imgSrc1;
+      },
      drawTextOnImage () {
+        this.drawTextOnImage1()
        function getByteLen (val) {
          var len = 0;
          if (!val) return len;
@@ -595,33 +639,53 @@
       * @author: renchao
       */
      handlePrint () {
+        let that = this
        if (this.ruleForm.ysxlh == '') {
          this.$message.error('请选择印刷序列号');
          return;
        }
        store.dispatch('user/reWorkFresh', false)
-        let that = this
        if (this.bdcqz.bdcqzlx == 1) {
+          if (this.activeTitle == 'title1') {
+            getPrintTemplateByCode({ tmpno: 'zsdy1' }).then(resInfo => {
+              if (resInfo.code == 200) {
+                //打开模板设计
+                let LODOP = getLodop(document.getElementById('LODOP_OB'), document.getElementById('LODOP_EM'));
+                LODOP.ADD_PRINT_DATA("ProgramData", resInfo.result.tmpcontent); //装载模板
+                console.log(that.bdcqz);
+                for (let key in that.bdcqz) {
+                  LODOP.SET_PRINT_STYLEA(key, "CONTENT", that.bdcqz[key]);
+                }
+                LODOP.PREVIEW();
+              } else {
+                that.$message.error(resInfo.message)
+              }
+              that.$popupCacel()
+              //刷新列表
+              store.dispatch('user/reWorkFresh', true)
+            })
+          } else {
            getPrintTemplateByCode({ tmpno: 'zsdy' }).then(resInfo => {
              if (resInfo.code == 200) {
                //打开模板设计
                let LODOP = getLodop(document.getElementById('LODOP_OB'), document.getElementById('LODOP_EM'));
                LODOP.ADD_PRINT_DATA("ProgramData", resInfo.result.tmpcontent); //装载模板
-              this.bdcqz.bdcdyh1 = this.bdcqz.bdcdyh.slice(0, 6) + ' ' + this.bdcqz.bdcdyh.slice(6, 12) + ' ' +
+                that.bdcqz.bdcdyh1 = that.bdcqz.bdcdyh.slice(0, 6) + ' ' + that.bdcqz.bdcdyh.slice(6, 12) + ' ' +
-                this.bdcqz.bdcdyh.slice(12, 19) + ' ' + this.bdcqz.bdcdyh.slice(19, this.bdcqz.bdcdyh.length)
+                  that.bdcqz.bdcdyh.slice(12, 19) + ' ' + that.bdcqz.bdcdyh.slice(19, that.bdcqz.bdcdyh.length)
                //todo 调取后端接口获取数据 循环set
-              for (let key in this.bdcqz) {
+                for (let key in that.bdcqz) {
-                LODOP.SET_PRINT_STYLEA(key, "CONTENT", this.bdcqz[key]);
+                  LODOP.SET_PRINT_STYLEA(key, "CONTENT", that.bdcqz[key]);
                }
                LODOP.PREVIEW();
              } else {
-              this.$message.error(resInfo.message)
+                that.$message.error(resInfo.message)
              }
              that.$popupCacel()
              //刷新列表
              store.dispatch('user/reWorkFresh', true)
            })
+          }
        } else {
          getPrintTemplateByCode({ tmpno: 'zmdy' }).then(resInfo => {
            if (resInfo.code == 200) {
@@ -679,6 +743,15 @@
 </script>
 <style scoped lang="scss">
  @import "~@/styles/mixin.scss";
+  /deep/.el-tabs__nav-wrap::after {
+    display: none;
+  }
+  /deep/.el-tabs__header {
+    margin: 0;
+  }
+  /deep/.el-form-item--small.el-form-item {
+    margin-bottom: 0;
+  }
  .zsdy-content {
    height: 80vh;
    overflow-y: scroll;