Skip to content

bdc / bdcdj-web

Go to a project
Toggle navigation
Toggle navigation pinning
3d7db342 by renchao@pashanhoo.com
Options

style:证书打印

1 parent f9f7c736
Inline Side-by-side
Showing 2 changed files with 83 additions and 10 deletions

240 KB | W: | H:

328 KB | W: | H:

  • 2-up
  • Swipe
  • Onion skin
<!--
* @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) + ' ' +
this.bdcqz.bdcdyh.slice(12, 19) + ' ' + this.bdcqz.bdcdyh.slice(19, this.bdcqz.bdcdyh.length)
that.bdcqz.bdcdyh1 = that.bdcqz.bdcdyh.slice(0, 6) + ' ' + that.bdcqz.bdcdyh.slice(6, 12) + ' ' +
that.bdcqz.bdcdyh.slice(12, 19) + ' ' + that.bdcqz.bdcdyh.slice(19, that.bdcqz.bdcdyh.length)
//todo 调取后端接口获取数据 循环set
for (let key in this.bdcqz) {
LODOP.SET_PRINT_STYLEA(key, "CONTENT", this.bdcqz[key]);
for (let key in that.bdcqz) {
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;
......