From 9193459fbb692abc227b1643ae52f65a2e782ebd Mon Sep 17 00:00:00 2001
From: loulijun2021 <1694218219@qq.com>
Date: 星期四, 28 七月 2022 14:25:18 +0800
Subject: [PATCH] 1.自定义打印完成
---
src/views/kb/printMe.vue | 138 +++++++++++++++++++++-------------------------
1 files changed, 63 insertions(+), 75 deletions(-)
diff --git a/src/views/kb/index.vue b/src/views/kb/printMe.vue
similarity index 84%
rename from src/views/kb/index.vue
rename to src/views/kb/printMe.vue
index d3dee41..c5998db 100644
--- a/src/views/kb/index.vue
+++ b/src/views/kb/printMe.vue
@@ -6,7 +6,7 @@
<el-dialog
title="棰勮"
:visible.sync="dialogVisible"
- width="1140"
+ width="812px"
>
<!-- 瑕佹墦鍗扮殑鍖哄煙 -->
<div id="printMe" style="padding: 30px">
@@ -42,60 +42,52 @@
id="table"
:data="tableData"
border
+ :header-cell-style="{ background: '#c0c0c0',textAlign:'center',color:'#000'}"
+ :cell-style="{textAlign: 'center',color:'#000',}"
class="elTable"
style="width: 100%;"
>
<el-table-column
id="column0"
- prop="date"
- label="鏃ユ湡"
- width="100"
+ prop="id"
+ label="宸ュ簭鍙�"
+ width="70"
/>
<el-table-column
id="column1"
- prop="name"
- label="濮撳悕"
+ prop="stepcode"
+ label="宸ュ簭浜岀淮鐮�"
width="100"
/>
<el-table-column
id="column2"
- prop="address"
- label="鍦板潃"
- width="150"
+ prop="stepname"
+ label="宸ュ簭"
+ width="120"
/>
<el-table-column
id="column3"
- prop="address"
- label="鍦板潃"
- width="150"
+ prop="plan_qty"
+ label="鍔犲伐鏁伴噺"
+ width="100"
/>
<el-table-column
id="column4"
- prop="address"
- width="150"
-
- label="鍦板潃"
+ prop="good_qty"
+ width="100"
+ label="鍚堟牸鏁伴噺"
/>
<el-table-column
id="column5"
- width="150"
-
- prop="address"
- label="鍦板潃"
+ width="100"
+ prop="ng_qty"
+ label="涓嶈壇鏁伴噺"
/>
<el-table-column
id="column6"
- prop="address"
+ prop="desc"
width="120"
-
- label="鍦板潃"
- />
- <el-table-column
- id="column7"
- width="119"
-
- prop="address"
- label="鍦板潃"
+ label="澶囨敞"
/>
</el-table>
</div>
@@ -226,7 +218,7 @@
},
QRImgUrl: '',
QRlink: 'www.xxx.com',
- dialogVisible: false,
+ dialogVisible: true,
printObj: {
id: 'printMe',
popTitle: '鎵撳嵃妯℃澘',
@@ -283,23 +275,10 @@
// 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 寮�'
- }],
+ tableData: [
+ { id: 1, stepcode: '001', stepname: '棰嗘枡', plan_qty: 100, good_qty: 10, ng_qty: 5, desc: '鍚堟牸' },
+ { id: 2, stepcode: '001', stepname: '棰嗘枡', plan_qty: 100, good_qty: 10, ng_qty: 5, desc: '鍚堟牸' }
+ ],
printContentObj: {}
}
},
@@ -311,9 +290,9 @@
// 濡傛灉WEB鎶ヨ〃瀹㈡埛绔▼搴忎负寮�鏈鸿嚜鍚姩锛屼互涓嬭皟鐢ㄥ簲璇ュ幓鎺夈�傛洿澶氳鏄庤鍙傝�冨府鍔┾�淲EB鎶ヨ〃(B/S鎶ヨ〃)->WEB鎶ヨ〃瀹㈡埛绔�->閮ㄧ讲涓庡畨瑁呪�濋儴鍒嗕腑涓庤胺姝孋hrome娴忚鍣ㄧ殑鐩稿叧璇存槑
webapp_urlprotocol_startup() // 鍚姩WEB鎶ヨ〃瀹㈡埛绔▼搴忥紝浠ヤ究渚﹀惉鎺ュ彈 WebSocket 鏁版嵁
// }
- // this.$nextTick(() => {
- // this.bindQRCode()
- // })
+ this.$nextTick(() => {
+ this.bindQRCode()
+ })
},
methods: {
// addWatermark() {
@@ -324,32 +303,32 @@
// }
// },
clickMe() {
- // this.dialogVisible = true
- // this.$nextTick(() => {
- // this.bindQRCode()
- // this.addWatermark()
- // console.log(document.getElementById('column0').style.width = '200px', 0)
- // console.log(document.getElementById('column7'), 7)
- // console.log(document.getElementById('table'), 2)
- // console.log(document.getElementById('table').getElementsByTagName('el-table'), 1)
- // })
+ // this.dialogVisible = true
+ // this.$nextTick(() => {
+ // this.bindQRCode()
+ // this.addWatermark()
+ // console.log(document.getElementById('column0').style.width = '200px', 0)
+ // console.log(document.getElementById('column7'), 7)
+ // console.log(document.getElementById('table'), 2)
+ // console.log(document.getElementById('table').getElementsByTagName('el-table'), 1)
+ // })
this.dialogVisible = true
},
- // bindQRCode() {
- // if (this.firstbindQRCode) {
- // const text = 'PO202206280001;Step02'
- // new QRCode(this.$refs.qrCodeDiv2, {
- // // text: 'Vue瀹炵幇鐢熸垚浜岀淮鐮侊紒',
- // text: text,
- // width: 80,
- // height: 80,
- // colorDark: '#333333', // 浜岀淮鐮侀鑹�
- // colorLight: '#ffffff', // 浜岀淮鐮佽儗鏅壊
- // correctLevel: QRCode.CorrectLevel.L// 瀹归敊鐜囷紝L/M/H
- // })
- // this.firstbindQRCode = false
- // }
- // },
+ bindQRCode() {
+ if (this.firstbindQRCode) {
+ const text = 'PO202206280001;Step02'
+ new QRCode(this.$refs.qrCodeDiv, {
+ // text: 'Vue瀹炵幇鐢熸垚浜岀淮鐮侊紒',
+ text: text,
+ width: 80,
+ height: 80,
+ colorDark: '#333333', // 浜岀淮鐮侀鑹�
+ colorLight: '#ffffff', // 浜岀淮鐮佽儗鏅壊
+ correctLevel: QRCode.CorrectLevel.L// 瀹归敊鐜囷紝L/M/H
+ })
+ this.firstbindQRCode = false
+ }
+ },
async TestClick() {
const data = {
mesordercode: 'PO202206280001_4',
@@ -433,5 +412,14 @@
/*/deep/.el-table__body-wrapper::-webkit-scrollbar{*/
/* width: 0;*/
/*}*/
+
+/*.el-table--border,.el-table--fit{*/
+/* border-right: 1px solid #000 !important;*/
+/* border-bottom: 1px solid #000 !important;*/
+/*}*/
+/*.el-table--border td, .el-table--border th, .el-table__body-wrapper .el-table--border.is-scrolling-left~.el-table__fixed{*/
+/* border-left: 1px solid #000 !important;*/
+/* border-top: 1px solid #000 !important;*/
+/*}*/
</style>
--
Gitblit v1.9.3