<template>
|
<div>
|
|
<el-button type="primary" @click="clickMe">点击我</el-button>
|
|
<el-dialog
|
title="预览"
|
:visible.sync="dialogVisible"
|
width="812px"
|
>
|
<!-- 要打印的区域 -->
|
<div id="printMe" style="padding: 30px">
|
|
<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="color:#0f0f0f;;width: 100px;margin-top:40px;height: 50px;text-align: center">凯迪制造</div>
|
<div style="font-weight: bolder">
|
<div>姓名：张三</div>
|
<div>日期：2022-07-05</div>
|
</div>
|
</div>
|
</div>
|
<!-- <el-divider />-->
|
<div style="width:100%;height: 30px;border-bottom: 1px solid #eee;margin-bottom: 20px" />
|
<el-table
|
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="id"
|
label="工序号"
|
width="70"
|
/>
|
<el-table-column
|
id="column1"
|
prop="stepcode"
|
label="工序二维码"
|
width="100"
|
/>
|
<el-table-column
|
id="column2"
|
prop="stepname"
|
label="工序"
|
width="120"
|
/>
|
<el-table-column
|
id="column3"
|
prop="plan_qty"
|
label="加工数量"
|
width="100"
|
/>
|
<el-table-column
|
id="column4"
|
prop="good_qty"
|
width="100"
|
label="合格数量"
|
/>
|
<el-table-column
|
id="column5"
|
width="100"
|
prop="ng_qty"
|
label="不良数量"
|
/>
|
<el-table-column
|
id="column6"
|
prop="desc"
|
width="120"
|
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>
|
|
<!--2222-->
|
<el-dialog
|
title="预览"
|
:visible.sync="dialogVisible2"
|
width="1140"
|
>
|
<!-- 要打印的区域 -->
|
<div id="printMe2" style="padding: 30px;">
|
<!-- <div style="width: 500px; height: 300px;">-->
|
|
<div
|
style="display: flex;width: 300px;height: 200px;border: 1px solid #000;text-align: center;font-size: 16px;"
|
>
|
<div style="width: 100px;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: center;align-items: center">
|
数量：100
|
</div>
|
</div>
|
<div style="width:200px;display: flex;flex-direction: column">
|
<div
|
style="display: flex;height: 25%;border-bottom:1px solid #000;justify-content: center;align-items: center "
|
>
|
工单编号：1403-001-0001
|
</div>
|
<div
|
style="display: flex;height: 25%;border-bottom:1px solid #000;justify-content: center;align-items: center "
|
>
|
工单编号：1403-001-0001
|
</div>
|
<div
|
style="display: flex;height: 25%;border-bottom:1px solid #000 ;justify-content: center;align-items: center"
|
>
|
工单编号：1403-001-0001
|
</div>
|
<div style="display: flex;height: 25%;justify-content: center;align-items: center">
|
工单编号：1403-001-0001
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- </div>-->
|
</div>
|
|
<!-- <vue-easy-print ref="printRef" :button-show="true">-->
|
<!-- x-->
|
<!-- </vue-easy-print>-->
|
|
<!-- 打印的按钮，显示打印预览 -->
|
<!-- <el-button v-print="'#printMe'">打印</el-button>-->
|
<el-button v-print="printObj2">打印</el-button>
|
|
<span slot="footer" class="dialog-footer">
|
<el-button @click="dialogVisible2 = false">取 消</el-button>
|
<el-button type="primary" @click="dialogVisible2 = false">确 定</el-button>
|
</span>
|
</el-dialog>
|
|
<el-button type="text" @click="outerVisible = true">点击打开外层 Dialog</el-button>
|
|
<el-button type="primary" @click="ws_ajax_preview">jhjhjh</el-button>
|
|
</div>
|
</template>
|
|
<script>
|
// import vueEasyPrint from 'vue-easy-print'
|
import QRCode from 'qrcodejs2'
|
import { MesOrderPrintSearch, MesOrderPrintSearch1 } from '@/api/utils'
|
import { urlAddRandomNo, webapp_ws_ajax_run, webapp_urlprotocol_startup } from '@/utils/grwebapp'
|
import { getCookie } from '@/utils/auth'
|
// import QRCode from 'qrcode'
|
|
export default {
|
name: 'Gdpg',
|
// components: {
|
// vueEasyPrint
|
// },
|
data() {
|
return {
|
outerVisible: false,
|
innerVisible: false,
|
dialogVisible2: false,
|
printObj2: {
|
id: 'printMe2',
|
beforeOpenCallback(vue) {
|
vue.printLoading = true
|
console.log('打开之前')
|
console.log()
|
},
|
openCallback(vue) {
|
vue.printLoading = false
|
console.log('执行了打印')
|
},
|
closeCallback(vue) {
|
console.log('关闭了打印工具')
|
}
|
|
},
|
firstWatermark: true, // 第一次显示水印
|
firstbindQRCode: true, // 第一次显示二维码
|
form: {
|
describle: ''
|
},
|
QRImgUrl: '',
|
QRlink: 'www.xxx.com',
|
dialogVisible: true,
|
printObj: {
|
id: 'printMe',
|
popTitle: '打印模板',
|
preview: false,
|
extraHead: '<meta http-equiv="Content-Language" content="zh-cn"/>',
|
previewBeforeOpenCallback() {
|
}, // 预览窗口打开之前的callback（开启预览模式调用）
|
previewOpenCallback() {
|
}, // 预览窗口打开之后的callback（开启预览模式调用）
|
beforeEntryIframe() {
|
const widthArr = ['10%', '10%', '15%', '15%', '15%', '15%', '10%', '10%']
|
// const tables = document.getElementById('table').getElementsByTagName('el-table') // 获取打印的表格
|
const tables = document.getElementById('table') // 获取打印的表格
|
// const headcolgroupCol0 = tables[0].getElementsByTagName('colgroup')[0].getElementsByTagName('col')
|
// const headcolgroupCol0 = document.getElementById('column0').style.width = '400px'
|
// const headcolgroupCol1 = document.getElementById('column1')
|
// const headcolgroupCol2 = document.getElementById('column2')
|
// const headcolgroupCol3 = document.getElementById('column3')
|
// const headcolgroupCol4 = document.getElementById('column4')
|
// const headcolgroupCol5 = document.getElementById('column5')
|
// const headcolgroupCol6 = document.getElementById('column6')
|
// const headcolgroupCol7 = document.getElementById('column7')
|
// const headcolgroupCol1 = tables[1].getElementsByTagName('colgroup')[0].getElementsByTagName('col')
|
// widthArr.forEach((val, index) => {
|
// headcolgroupCol0[index].width = val
|
// headcolgroupCol1[index].width = val
|
// headcolgroupCol2[index].width = val
|
// headcolgroupCol3[index].width = val
|
// headcolgroupCol4[index].width = val
|
// headcolgroupCol5[index].width = val
|
// headcolgroupCol6[index].width = val
|
// headcolgroupCol7[index].width = val
|
// })
|
},
|
openCallback() {
|
|
}, // 调用打印之后的回调事件
|
closeCallback() {
|
} // 关闭打印的回调事件（无法确定点击的是确认还是取消）
|
|
// id: 'printMe',
|
// popTitle: '打印', // 打印配置页上方标题
|
// extraHead: '', // 最上方的头部文字，附加在head标签上的额外标签,使用逗号分隔
|
// preview: '', // 是否启动预览模式，默认是false（开启预览模式，可以先预览后打印）
|
// previewTitle: '', // 打印预览的标题（开启预览模式后出现）,
|
// previewPrintBtnLabel: '', // 打印预览的标题的下方按钮文本，点击可进入打印（开启预览模式后出现）
|
// zIndex: '', // 预览的窗口的z-index，默认是 20002（此值要高一些，这涉及到预览模式是否显示在最上面）
|
// previewBeforeOpenCallback() {}, // 预览窗口打开之前的callback（开启预览模式调用）
|
// previewOpenCallback() {}, // 预览窗口打开之后的callback（开启预览模式调用）
|
// beforeOpenCallback() {}, // 开启打印前的回调事件
|
// openCallback() {}, // 调用打印之后的回调事件
|
// closeCallback() {}, // 关闭打印的回调事件（无法确定点击的是确认还是取消）
|
// url: '',
|
// standard: '',
|
// extraCss: ''
|
},
|
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: {}
|
}
|
},
|
mounted() {
|
// this.TestClick()
|
|
// function window_onload() {
|
//* 这句特别重要*：只有在WEB报表客户端程序后，才能进行WebSocket通讯
|
// 如果WEB报表客户端程序为开机自启动，以下调用应该去掉。更多说明请参考帮助“WEB报表(B/S报表)->WEB报表客户端->部署与安装”部分中与谷歌Chrome浏览器的相关说明
|
webapp_urlprotocol_startup() // 启动WEB报表客户端程序，以便侦听接受 WebSocket 数据
|
// }
|
this.$nextTick(() => {
|
this.bindQRCode()
|
})
|
},
|
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()
|
// 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.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',
|
username: getCookie('admin')
|
}
|
// const res = await MesOrderPrintSearch(data)
|
const res = await MesOrderPrintSearch1(data)
|
console.log(res, 1)
|
},
|
ws_ajax_preview() {
|
// 参数具体说明请参考帮助文档中的“WEB报表(B/S报表)->WEB报表客户端->启动参数说明”部分
|
var args = {
|
type: 'preview',
|
showOptionDlg: true,
|
report: urlAddRandomNo('../grf/报工产出标签.grf'),
|
|
// report: urlAddRandomNo('https://www.gridreport.cn/demos/grf/1a.grf'),
|
// data: 'http://www.gridreport.cn/demos/data/DataCenter.ashx?data=Customer'
|
data:
|
{
|
'recordset': [
|
{
|
'wo_code': 'PO202206280001_1',
|
'partcode': '1403-001-0001',
|
'partname': '圆钢F45MnVSφ20',
|
'qty': '100',
|
'next_stepname': '测试工序2',
|
'qrcode': 'PO202206280001_1;Step02'
|
},
|
{
|
'wo_code': 'PO202206280001_1',
|
'partcode': '1403-001-0001',
|
'partname': '圆钢F45MnVSφ20',
|
'qty': '100',
|
'next_stepname': '测试工序2',
|
'qrcode': 'PO202206280001_1;Step02'
|
}
|
]
|
}
|
|
}
|
console.log(args)
|
webapp_ws_ajax_run(args)
|
}
|
|
}
|
}
|
</script>
|
|
<style media="print">
|
/*@media print {*/
|
@page {
|
/*size: auto;*/
|
size: auto;
|
margin: 3mm;
|
/*margin: 0mm;*/
|
/*padding: 0;*/
|
}
|
|
/*}*/
|
/*.elTable {*/
|
|
/*::v-deep .el-table {*/
|
/* margin-top: 10px;*/
|
/*}*/
|
/*table {*/
|
/* width: 100% !important;*/
|
/*}*/
|
|
/*.el-table__body,*/
|
/*.el-table__header {*/
|
/* width: 100% !important;*/
|
/*}*/
|
|
/*.el-table__body {*/
|
/* width: 100% !important;*/
|
/*}*/
|
|
/*}*/
|
|
/*/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>
|
