From 68eaf315b64145e487d10e66183d542ee7f94d10 Mon Sep 17 00:00:00 2001
From: loulijun2021 <1694218219@qq.com>
Date: 星期二, 05 七月 2022 17:35:33 +0800
Subject: [PATCH] 1.生产管理完成部分功能2.自定义页面打印、二维码图形、水印显示实现了一个demo
---
src/views/scgl/gdpg.vue | 188 ++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 186 insertions(+), 2 deletions(-)
diff --git a/src/views/scgl/gdpg.vue b/src/views/scgl/gdpg.vue
index 09a8624..620487b 100644
--- a/src/views/scgl/gdpg.vue
+++ b/src/views/scgl/gdpg.vue
@@ -1,11 +1,195 @@
-<template />
+<template>
+ <div>
+ <el-button type="primary" @click="clickMe">鐐瑰嚮鎴�</el-button>
+
+ <el-dialog
+ title="棰勮"
+ :visible.sync="dialogVisible"
+ width="70%"
+ >
+ <!-- 瑕佹墦鍗扮殑鍖哄煙 -->
+ <div id="printMe">
+
+ <div style="display: flex;justify-content: space-around">
+ <!-- 浜岀淮鐮侀儴鍒�-->
+ <div>
+ <div id="qrCode" ref="qrCodeDiv" />
+ <!-- <img :src="QRImgUrl">-->
+
+ <div style="font-size: 18px;width: 100px;text-align: center;margin-top: 10px">MO-79601</div>
+ </div>
+ <!-- 鍏徃鍚嶇О鍙婃墦鍗板崟绫诲瀷-->
+ <div
+ style="height: 100px;display: flex;justify-content:space-between;align-items: center;flex-direction: column;font-weight: bolder"
+ >
+ <div style="font-size: 26px;">姘稿悍鏂板嚡杩伐涓氫簰鑱旀湁闄愬叕鍙�</div>
+ <div style="font-size: 22px;">濮斿娲惧崟</div>
+ </div>
+ <!--鍙充晶姘村嵃鍙婂鍚嶆棩鏈�-->
+ <div>
+ <div ref="watermark" style="width: 100px;height:100px;" />
+ <div style="font-weight: bolder">
+ <div>濮撳悕锛氬紶涓�</div>
+ <div>鏃ユ湡锛�2022-07-05</div>
+ </div>
+ </div>
+ </div>
+ <el-divider />
+ <el-table
+ :data="tableData"
+ border
+ style="width: 100%"
+ >
+ <el-table-column
+ prop="date"
+ label="鏃ユ湡"
+ width="180"
+ />
+ <el-table-column
+ prop="name"
+ label="濮撳悕"
+ width="180"
+ />
+ <el-table-column
+ prop="address"
+ label="鍦板潃"
+ />
+ </el-table>
+ </div>
+
+ <!-- <vue-easy-print ref="printRef" :button-show="true">-->
+ <!-- x-->
+ <!-- </vue-easy-print>-->
+
+ <!-- 鎵撳嵃鐨勬寜閽紝鏄剧ず鎵撳嵃棰勮 -->
+ <!-- <el-button v-print="'#printMe'">鎵撳嵃</el-button>-->
+ <el-button v-print="printObj">鎵撳嵃</el-button>
+
+ <span slot="footer" class="dialog-footer">
+ <el-button @click="dialogVisible = false">鍙� 娑�</el-button>
+ <el-button type="primary" @click="dialogVisible = false">纭� 瀹�</el-button>
+ </span>
+ </el-dialog>
+ </div>
+</template>
<script>
+import vueEasyPrint from 'vue-easy-print'
+import QRCode from 'qrcodejs2'
+// import QRCode from 'qrcode'
+
export default {
- name: 'Gdpg'
+ name: 'Gdpg',
+ components: {
+ vueEasyPrint
+ },
+ data() {
+ return {
+ firstWatermark: true, // 绗竴娆℃樉绀烘按鍗�
+ firstbindQRCode: true, // 绗竴娆℃樉绀轰簩缁寸爜
+ form: {
+ describle: ''
+ },
+ QRImgUrl: '',
+ QRlink: 'www.xxx.com',
+ dialogVisible: false,
+ printObj: {
+ id: 'printMe',
+ popTitle: '鎵撳嵃妯℃澘',
+ extraHead: '<meta http-equiv="Content-Language" content="zh-cn"/>'
+ // id: 'printMe',
+ // popTitle: '鎵撳嵃', // 鎵撳嵃閰嶇疆椤典笂鏂规爣棰�
+ // extraHead: '', // 鏈�涓婃柟鐨勫ご閮ㄦ枃瀛楋紝闄勫姞鍦╤ead鏍囩涓婄殑棰濆鏍囩,浣跨敤閫楀彿鍒嗛殧
+ // preview: '', // 鏄惁鍚姩棰勮妯″紡锛岄粯璁ゆ槸false锛堝紑鍚瑙堟ā寮忥紝鍙互鍏堥瑙堝悗鎵撳嵃锛�
+ // previewTitle: '', // 鎵撳嵃棰勮鐨勬爣棰橈紙寮�鍚瑙堟ā寮忓悗鍑虹幇锛�,
+ // previewPrintBtnLabel: '', // 鎵撳嵃棰勮鐨勬爣棰樼殑涓嬫柟鎸夐挳鏂囨湰锛岀偣鍑诲彲杩涘叆鎵撳嵃锛堝紑鍚瑙堟ā寮忓悗鍑虹幇锛�
+ // zIndex: '', // 棰勮鐨勭獥鍙ｇ殑z-index锛岄粯璁ゆ槸 20002锛堟鍊艰楂樹竴浜涳紝杩欐秹鍙婂埌棰勮妯″紡鏄惁鏄剧ず鍦ㄦ渶涓婇潰锛�
+ // previewBeforeOpenCallback() {}, // 棰勮绐楀彛鎵撳紑涔嬪墠鐨刢allback锛堝紑鍚瑙堟ā寮忚皟鐢級
+ // previewOpenCallback() {}, // 棰勮绐楀彛鎵撳紑涔嬪悗鐨刢allback锛堝紑鍚瑙堟ā寮忚皟鐢級
+ // beforeOpenCallback() {}, // 寮�鍚墦鍗板墠鐨勫洖璋冧簨浠�
+ // openCallback() {}, // 璋冪敤鎵撳嵃涔嬪悗鐨勫洖璋冧簨浠�
+ // closeCallback() {}, // 鍏抽棴鎵撳嵃鐨勫洖璋冧簨浠讹紙鏃犳硶纭畾鐐瑰嚮鐨勬槸纭杩樻槸鍙栨秷锛�
+ // url: '',
+ // standard: '',
+ // extraCss: ''
+ },
+ tableData: [{
+ date: '2016-05-02',
+ name: '鐜嬪皬铏�',
+ address: '涓婃捣甯傛櫘闄�鍖洪噾娌欐睙璺� 1518 寮�'
+ }, {
+ date: '2016-05-04',
+ name: '鐜嬪皬铏�',
+ address: '涓婃捣甯傛櫘闄�鍖洪噾娌欐睙璺� 1517 寮�'
+ }, {
+ date: '2016-05-01',
+ name: '鐜嬪皬铏�',
+ address: '涓婃捣甯傛櫘闄�鍖洪噾娌欐睙璺� 1519 寮�'
+ }, {
+ date: '2016-05-03',
+ name: '鐜嬪皬铏�',
+ address: '涓婃捣甯傛櫘闄�鍖洪噾娌欐睙璺� 1516 寮�'
+ }]
+ }
+ },
+ mounted() {
+
+ },
+ methods: {
+ addWatermark() {
+ if (this.firstWatermark) {
+ console.log(this.firstWatermark)
+ this.$watermark.set('鍑开鍒堕��', this.$refs.watermark)
+ this.firstWatermark = false
+ }
+ },
+ clickMe() {
+ this.dialogVisible = true
+ this.$nextTick(() => {
+ this.bindQRCode()
+ this.addWatermark()
+ })
+ },
+ bindQRCode() {
+ if (this.firstbindQRCode) {
+ new QRCode(this.$refs.qrCodeDiv, {
+ // text: 'Vue瀹炵幇鐢熸垚浜岀淮鐮侊紒',
+ text: 'Vue瀹炵幇鐢熸垚浜岀淮鐮侊紒',
+ width: 100,
+ height: 100,
+ colorDark: '#333333', // 浜岀淮鐮侀鑹�
+ colorLight: '#ffffff', // 浜岀淮鐮佽儗鏅壊
+ correctLevel: QRCode.CorrectLevel.L// 瀹归敊鐜囷紝L/M/H
+ })
+ this.firstbindQRCode = false
+ }
+
+ // const opts = {
+ // errorCorrectionLevel: 'L', // 瀹归敊绾у埆
+ // type: 'image/png', // 鐢熸垚鐨勪簩缁寸爜绫诲瀷
+ // quality: 0.3, // 浜岀淮鐮佽川閲�
+ // margin: 5, // 浜岀淮鐮佺暀鐧借竟璺�
+ // width: 128, // 瀹�
+ // height: 128, // 楂�
+ // text: 'http://www.baidu.com', // 浜岀淮鐮佸唴瀹�
+ // color: {
+ // dark: '#666666', // 鍓嶆櫙鑹�
+ // light: '#fff'// 鑳屾櫙鑹�
+ // }
+ // }
+ // // this.QRlink 鐢熸垚鐨勪簩缁寸爜鍦板潃url
+ // QRCode.toDataURL(this.QRlink, opts, (err, url) => {
+ // if (err) throw err
+ // // 灏嗙敓鎴愮殑浜岀淮鐮佽矾寰勫鍒剁粰data鐨凲RImgUrl
+ // this.QRImgUrl = url
+ // })
+ }
+
+ }
}
</script>
<style scoped>
</style>
+
--
Gitblit v1.9.3