<template>
|
<div style="padding: 10px">
|
<el-button type="primary" @click="getTemp">打印</el-button>
|
<!-- <el-button type="primary" @click="getTempMeta">获取元数据</el-button> -->
|
<div id="report_holder"></div>
|
</div>
|
</template>
|
|
<script>
|
import PrintJS from "print-js";
|
import axios from "axios";
|
import { watch } from "vue";
|
export default {
|
name: "HBarPlanPrintWeb",
|
data() {
|
return {
|
styleList: [],
|
handleMessage: this.$route.query,
|
pageSize: {
|
width: 0,
|
height: 0,
|
},
|
reportViewer: null,
|
baseUrl: process.env.VUE_APP_BASE_API,
|
json_data: {
|
recordset: [],
|
},
|
grfPath: "",
|
oriention: null,
|
};
|
},
|
async mounted() {
|
// 获取 打印的数据
|
await this.getPrintData();
|
// 获取打印纸张大小
|
rubylong.grhtml5.barcodeURL = this.baseUrl + "/Utility/Barcode.ashx";
|
this.reportViewer = rubylong.grhtml5.insertReportViewer(
|
"report_holder",
|
this.grfPath,
|
this.json_data
|
);
|
this.reportViewer.start();
|
},
|
watch: {
|
// 监听reportViewer是否已经构建完成，构建完成后 获取grf文件的打印页面大小
|
'reportViewer.generated'(newVal, oldVal) {
|
if(newVal == true) {
|
this.getTempMeta()
|
}
|
},
|
},
|
methods: {
|
getUrlVars_JSON() {
|
var datajson;
|
var str = this.propsData; //获取链接中传递的参数
|
var arr = str.substring(str.lastIndexOf("=") + 1);
|
datajson = JSON.parse(decodeURI(arr));
|
return datajson;
|
},
|
async getPrintData() {
|
// 在大批量打印的时候 url长度可能超get允许的长度 后端需按需求 改成POST请求
|
let OpenTmp = decodeURIComponent(this.$route.query.OpenTmp);
|
let sql = "";
|
if (this.$route.query.Type == "Kf_SellOutBillList") {
|
sql =
|
"exec h_p_Kf_SellOutBillList_PrintSellOutBill " +
|
this.handleMessage.linterid.toString();
|
} else if (this.$route.query.Type == "HGy_BarCodeBill") {
|
sql =
|
"select * from h_v_IF_BarCodeBillList where hmainid in(" +
|
this.handleMessage.linterid.toString() +
|
") order by hmainid desc";
|
} else if (this.$route.query.Type == "HGy_BarCodeBillList") {
|
sql =
|
"select * from h_v_IF_BarCodeBillList where hmainid in(" +
|
this.handleMessage.linterid.toString() +
|
") order by hmainid desc";
|
} else if (this.$route.query.Type == "HPOInStockBill") {
|
sql =
|
"select * from h_v_Sc_PrintMouldProdOutBillList where hmainid=" +
|
this.handleMessage.linterid.toString() +
|
" order by hmainid";
|
} else if (this.$route.query.Type == "HGyStockPlaceBarCode") {
|
let condition = decodeURI(this.handleMessage.linterid.toString());
|
condition = condition.split(',').map(e => `'${e}'`).join(',')
|
sql = `exec h_p_GetSPBarCode_Swell N'${condition}'`;
|
}
|
try{
|
let res = await axios.get(this.baseUrl + "/CommonModel/searchMethod", {
|
params: {
|
sql: sql,
|
user: sessionStorage["HUserName"],
|
ModRightNameCheck: "",
|
// , "HSubID": data[i].hsubid
|
},
|
});
|
// 将 渲染数据 和 模板加载到本地
|
let result = res.data;
|
this.json_data.recordset = result.data;
|
this.grfPath = "./static/grf/" + OpenTmp + ".grf";
|
console.log(this.json_data);
|
} catch (err) {
|
this.$modal.msgError("接口请求失败!" + err);
|
}
|
},
|
getTempMeta() {
|
let grfMeta = JSON.parse(this.reportViewer.reportText);
|
console.log("grfMeta", grfMeta)
|
this.pageSize.width = grfMeta.Printer.Width * 10 + "mm";
|
this.pageSize.height = grfMeta.Printer.Height * 10 + "mm";
|
console.log("pageSize: ",this.pageSize)
|
this.oriention = grfMeta.Printer.Oriention.toLowerCase()
|
},
|
getTemp() {
|
// 对每个要打印的对象添加分页
|
let docs = document.querySelectorAll("[_grrecno]");
|
// this.pageSize.width = docs[0].offsetWidth;
|
// this.pageSize.height = docs[0].offsetHeight;
|
docs.forEach((elem, index) => {
|
elem.classList.add("printable");
|
});
|
let styles = document.querySelectorAll('[id^="_gridcss"]');
|
this.styleList.push(...styles);
|
|
this.execPrint();
|
},
|
execPrint() {
|
PrintJS({
|
printable: "report_holder",
|
scanStyles: false,
|
type: "html",
|
style:
|
this.styleList[0].innerText +
|
`
|
.printable {
|
page-break-inside: avoid;
|
page-break-after: always;
|
box-sizing: border-box !important; /* 内边距不影响宽高 */
|
}
|
|
@page {
|
size: ${this.pageSize.width} ${this.pageSize.height};
|
margin: 0;
|
padding: 0;
|
}
|
|
table { border-collapse: collapse !important; }
|
|
* {
|
margin: 0;
|
padding: 0;
|
color: #000 !important;
|
opacity: 1 !important;
|
filter: none !important;
|
text-shadow: none !important;
|
-webkit-print-color-adjust: exact; /* 强制还原颜色（避免淡色） */
|
}
|
`,
|
});
|
},
|
},
|
};
|
</script>
|
|
<style>
|
</style>
|
