From d33eacc1f85ac3a736b33ba4713a19aae466d711 Mon Sep 17 00:00:00 2001
From: loulijun2021 <1694218219@qq.com>
Date: 星期五, 05 八月 2022 16:42:53 +0800
Subject: [PATCH] 1.做适应平板显示的内容大小
---
src/views/scgl/sckbg.vue | 231 ++++++++++++++++++++++++++++++++++++++++++++-------------
1 files changed, 179 insertions(+), 52 deletions(-)
diff --git a/src/views/scgl/sckbg.vue b/src/views/scgl/sckbg.vue
index 5984778..db79de5 100644
--- a/src/views/scgl/sckbg.vue
+++ b/src/views/scgl/sckbg.vue
@@ -30,7 +30,7 @@
<div class="elTableDiv">
<el-table
:data="tableData"
- :height="tableHeight+'px'"
+ :height="isIpad? (tableHeight+50):tableHeight"
border
stripe
:style="{width: 100+'%',height:tableHeight+'px',}"
@@ -192,7 +192,7 @@
<div class="elTableDiv">
<el-table
:data="WXtableData"
- :height="tableHeight+'px'"
+ :height="isIpad? (tableHeight+50):tableHeight"
border
stripe
:style="{width: 100+'%',height:tableHeight+'px',}"
@@ -320,7 +320,7 @@
<el-dialog
:title="dialogTitle"
:visible.sync="dialogVisible"
- width="800"
+ width="850px"
class="dialogVisible"
:top="dialogTitle==='鑷埗鎶ュ伐'?'5vh':'15vh'"
:close-on-click-modal="false"
@@ -655,6 +655,69 @@
</div>
</span>
</el-dialog>
+
+ <!--鎵撳嵃棰勮椤甸潰-->
+ <el-dialog
+ title="棰勮"
+ :visible.sync="dialogVisible2"
+ width="1140"
+ :close-on-click-modal="false"
+ @close="dialogVisible2Close"
+ >
+ <!-- 瑕佹墦鍗扮殑鍖哄煙 -->
+ <div id="printMe2" style="padding: 30px;">
+ <div
+ style="display: flex;width: 250px;height: 150px;border: 1px solid #000;text-align: center;font-size: 10px;"
+ >
+
+ <div style="width: 60px;display: flex;flex-direction: column;border-right: 1px solid #000">
+ <div
+ style="display: flex;height: 75%;border-bottom:1px solid #000;justify-content: center;align-items: center "
+ >
+ <div id="qrCode2" ref="qrCodeDiv2" />
+ </div>
+ <div style="display: flex;height: 25%;justify-content: flex-start;align-items: center">
+ <div style="margin-left: 5px;width: 40px">鏁伴噺:</div>
+ {{ qrForm.startqty }}
+ </div>
+ </div>
+
+ <div style="width:190px;display: flex;flex-direction: column">
+ <div
+ style="display: flex;height: 25%;border-bottom:1px solid #000;justify-content: flex-start;align-items: center;text-align: left"
+ >
+ <div style="width: 60px;margin-left: 5px;">宸ュ崟缂栧彿:</div>
+ <div>{{ qrForm.wo_code }}</div>
+ </div>
+ <div
+ style="display: flex;height: 25%;border-bottom:1px solid #000;justify-content: flex-start;align-items: center ;text-align: left"
+ >
+ <div style="width: 60px;margin-left: 5px;">浜у搧缂栫爜:</div>
+ <div>{{ qrForm.partcode }}</div>
+ </div>
+ <div
+ style="display: flex;height: 25%;border-bottom:1px solid #000 ;justify-content: flex-start;align-items: center;text-align: left"
+ >
+ <div style="width:60px;margin-left: 5px;">浜у搧鍚嶇О:</div>
+ <div>{{ qrForm.partname }}</div>
+ </div>
+ <div style="display: flex;height: 25%;justify-content: flex-start;align-items: center;text-align: left">
+ <div style="width: 60px;margin-left: 5px;">涓嬮亾宸ュ簭:</div>
+ <div>{{ qrForm.nextstepname }}</div>
+ </div>
+
+ </div>
+
+ </div>
+ </div>
+ <span slot="footer" class="dialog-footer">
+ <div class="footerButton">
+ <el-button @click="dialogVisible2 = false">鍙� 娑�</el-button>
+ <el-button v-print="printObj2" type="primary">纭� 瀹�</el-button>
+ </div>
+ </span>
+ </el-dialog>
+
</div>
</template>
@@ -677,6 +740,7 @@
SavaMesOrderStepReport
} from '@/api/scgl'
import { urlAddRandomNo, webapp_ws_ajax_run, webapp_ws_autoupdate } from '@/utils/grwebapp'
+import QRCode from 'qrcodejs2'
const SER_HZ = /^[\u4e00-\u9fa5]+$/
export default {
@@ -706,6 +770,7 @@
return {
mainHeight: 0,
tableHeight: 0,
+ isIpad: false,
// produceCode: '', // 宸ュ簭鐮�
// WXproduceCode: '', // 澶栧崗宸ュ簭鐮�
radioSelected: '', // 宸ュ簭閫変腑
@@ -813,9 +878,53 @@
{ required: true, message: '璇疯緭鍏ユ姤宸ユ暟閲�', trigger: ['blur', 'change'] }
]
},
- activeName: ''
+ activeName: '',
+ dialogVisible2: false,
+ printObj2: {
+ id: 'printMe2',
+ popTitle: '鎵撳嵃妯℃澘',
+ preview: false,
+ extraHead: '<meta http-equiv="Content-Language" content="zh-cn"/>',
+ closeCallback(vue) { // 鍏抽棴鎵撳嵃鐨勫洖璋冧簨浠讹紙鏃犳硶纭畾鐐瑰嚮鐨勬槸纭杩樻槸鍙栨秷锛�
+ console.log('11212', vue)
+ // vue.dialogVisible = false
+ vue.dialogVisible2 = false
+ vue.dialogVisible = false
+ },
+ beforeOpenCallback(vue) {
+ vue.printLoading = true
+ console.log('鎵撳紑涔嬪墠')
+ console.log()
+ },
+ openCallback(vue) {
+ vue.printLoading = false
+ console.log('鎵ц浜嗘墦鍗�')
+ }
+ },
+ qrForm: {
+ qrvalue: '',
+ startqty: '',
+ wo_code: '',
+ partcode: '',
+ partname: '',
+ nextstepname: ''
+ }
}
},
+ // computed: {
+ // qrLink: function() {
+ // return this.$store.getters.getPreviewUrl
+ // }
+ // },
+ // watch: {
+ // qrLink: function(newVal, oldNew) {
+ // if (newVal !== oldNew) {
+ // this.$nextTick(() => {
+ // this.bindQRCode(newVal)
+ // })
+ // }
+ // }
+ // },
created() {
this.getMesOrderStepSearch()
this.tabClick()
@@ -826,9 +935,10 @@
this.$nextTick(() => {
$("input[name='produceCode']")[0].focus()
+ // this.bindQRCode('10001;001')
})
// webapp_urlprotocol_startup()
- webapp_ws_autoupdate(true)
+ // webapp_ws_autoupdate(true)
},
methods: {
async getMesOrderStepSearch() {
@@ -1265,9 +1375,10 @@
}
SavaMesOrderStepIn(data).then(res => {
if (res.code === '200') {
- this.WXprint()
+ this.WXprint2()
this.$message.success('鏀舵枡鎴愬姛锛�')
this.dialogVisible = false
+ this.dialogVisible2 = true
this.tabClick()
} else {
this.$message.error('鏀舵枡澶辫触!')
@@ -1327,11 +1438,13 @@
ngqty: this.dialogForm.noputqty === '' ? 0 : this.dialogForm.noputqty, // 涓嶈壇鏁伴噺
badcode: this.dialogForm.badcode.length < 1 ? '' : this.dialogForm.badcode.join(';')// 涓嶈壇鍘熷洜
}
+
SavaMesOrderStepReport(data).then(res => {
if (res.code === '200') {
- this.ZZprint()
+ this.ZZprint2()
this.$message.success('鎶ュ伐鎴愬姛锛�')
this.dialogVisible = false
+ this.dialogVisible2 = true
this.tabClick()
} else {
this.$message.error('鎶ュ伐澶辫触!')
@@ -1341,57 +1454,62 @@
}
})
},
- async ZZprint() {
- const obj = {
- recordset: [
- {
- wo_code: this.dialogForm.wo_code, // 宸ュ崟缂栧彿
- partcode: this.dialogForm.partcode, // 浜у搧缂栫爜
- partname: this.dialogForm.partname, // 浜у搧鍚嶇О
- next_stepname: this.dialogForm.nextstepname, // 涓嬮亾宸ュ簭
- qty: this.dialogForm.startqty, // 鏁伴噺
- // qrcode: this.form.orderstepqrcode// 浜岀淮鐮�
- qrcode: this.dialogForm.wo_code + ';' + this.dialogForm.nextstepcode // 浜岀淮鐮�
- }
- ]
- }
- const args = {
- type: 'print', // preview print
- showOptionDlg: false, // 濡傛灉涓嶆樉绀烘墦鍗板璇濇鑰岀洿鎺ユ墦鍗帮紝灏嗘琛屾敞閲婂幓鎺夊嵆鍙�
- report: urlAddRandomNo('./static/grf/鎶ュ伐浜у嚭鏍囩.grf'),
- data: obj
- }
- webapp_ws_ajax_run(args)
+ // 鐢熸垚浜岀淮鐮�
+ bindQRCode(text) {
+ new QRCode(this.$refs.qrCodeDiv2, {
+ text: text,
+ width: 50,
+ height: 50,
+ colorDark: '#000', // 浜岀淮鐮侀鑹�
+ colorLight: '#ffffff', // 浜岀淮鐮佽儗鏅壊
+ correctLevel: QRCode.CorrectLevel.L// 瀹归敊鐜囷紝L/M/H
+ })
},
- // 澶栧崗鏀舵枡鎵撳嵃
- WXprint() {
- // 鍙傛暟鍏蜂綋璇存槑璇峰弬鑰冨府鍔╂枃妗ｄ腑鐨勨�淲EB鎶ヨ〃(B/S鎶ヨ〃)->WEB鎶ヨ〃瀹㈡埛绔�->鍚姩鍙傛暟璇存槑鈥濋儴鍒�
- const obj = {
- recordset: [
- {
- wo_code: this.dialogForm.wo_code, // 宸ュ崟缂栧彿
- partcode: this.dialogForm.partcode, // 浜у搧缂栫爜
- partname: this.dialogForm.partname, // 浜у搧鍚嶇О
- next_stepname: this.dialogForm.nextstepname, // 涓嬮亾宸ュ簭
- qty: this.dialogForm.sqty, // 鏁伴噺
- // qrcode: this.WXform.orderstepqrcode// 浜岀淮鐮�
- qrcode: this.dialogForm.wo_code + ';' + this.dialogForm.nextstepcode// 浜岀淮鐮�
- }
- ]
- }
- const args = {
- type: 'print', // preview print
- showOptionDlg: false, // 濡傛灉涓嶆樉绀烘墦鍗板璇濇鑰岀洿鎺ユ墦鍗帮紝灏嗘琛屾敞閲婂幓鎺夊嵆鍙�
- report: urlAddRandomNo('./static/grf/澶栧崗鏀舵枡鏍囩.grf'),
- data: obj
- }
- webapp_ws_ajax_run(args)
+ ZZprint2() {
+ this.qrForm.qrvalue = this.dialogForm.wo_code + ';' + this.dialogForm.nextstepcode
+ this.qrForm.startqty = this.dialogForm.startqty
+ this.qrForm.wo_code = this.dialogForm.wo_code
+ this.qrForm.partcode = this.dialogForm.partcode
+ this.qrForm.partname = this.dialogForm.partname
+ this.qrForm.nextstepname = this.dialogForm.nextstepname
+
+ this.$nextTick(() => {
+ this.bindQRCode(this.qrForm.qrvalue)
+ console.log(this.$refs.qrCodeDiv2, 123)
+ // console.log(this.$refs.qrCodeDiv2.querySelectorAll('#qrCode2>img'), 1)
+ // console.log(this.$refs.qrCodeDiv2.querySelectorAll('#qrCode2>canvas'), 2)
+ })
},
+ WXprint2() {
+ this.qrForm.qrvalue = this.dialogForm.wo_code + ';' + this.dialogForm.nextstepcode
+ this.qrForm.startqty = this.dialogForm.sqty
+ this.qrForm.wo_code = this.dialogForm.wo_code
+ this.qrForm.partcode = this.dialogForm.partcode
+ this.qrForm.partname = this.dialogForm.partname
+ this.qrForm.nextstepname = this.dialogForm.nextstepname
+ this.$nextTick(() => {
+ this.bindQRCode(this.qrForm.qrvalue)
+ })
+ },
+ dialogVisible2Close() {
+ this.qrForm.qrvalue = ''
+ this.qrForm.startqty = ''
+ this.qrForm.wo_code = ''
+ this.qrForm.partcode = ''
+ this.qrForm.partname = ''
+ this.qrForm.nextstepname = ''
+ this.$refs.qrCodeDiv2 = ''
+ },
+
// 鑾峰彇椤甸潰楂樺害
getHeight() {
this.$nextTick(() => {
this.mainHeight = window.innerHeight - 250
- this.tableHeight = this.mainHeight - 80
+ this.tableHeight = this.mainHeight - 50
+ this.isIpad = window.innerHeight < 769
+ if (window.innerHeight < 769) {
+ this.tableHeight = this.tableHeight - 50
+ }
})
}
}
@@ -1576,3 +1694,12 @@
}
}
</style>
+<style media="print">
+/*@media print {*/
+@page {
+ size: auto;
+ margin: 3mm;
+ font-size: 10px;
+}
+
+</style>
--
Gitblit v1.9.3