<template> <div> <template> <el-button style="position:fixed;right:25px;z-index:999" :loading="loading" size="small" icon="el-icon-printer" @click="printThisPage" type="primary" >打印</el-button > </template> <div class="app-container" style="padding-top:40px;"> <div class='dialysisPage'> <div v-if="org_id != 10106 && org_id != 10215 && org_id != 4 && org_id != 10188 && org_id != 10217 && org_id != 0" > <printOne v-if="org_id != 10088 " :paramsObj="invoiceParams"></printOne> <printThree v-if="org_id == 10088" :paramsObj="invoiceParams"></printThree> </div> <printTwo v-if="org_id == 10106" :paramsObj="invoiceParams"></printTwo> <printFour v-if="org_id == 10215 || org_id == 4" :paramsObj="invoiceParams"></printFour> <printFive v-if="org_id == 10188 " :paramsObj="invoiceParams"></printFive> <printSix v-if="org_id == 10217|| org_id == 0" :paramsObj="invoiceParams"></printSix> </div> </div> </div> </template> <script> import printOne from './invoiceTemplate/printOne' import printTwo from './invoiceTemplate/printTwo' import printThree from './invoiceTemplate/printThree' import printFour from './invoiceTemplate/printFour' import printFive from './invoiceTemplate/printFive' import printSix from './invoiceTemplate/printSix' export default { name: "invoicePrint", components: { printOne, printTwo, printThree, printFour, printFive, printSix }, props:{ invoiceParams:Object }, data() { return { childResponse: {}, // invoiceParams:{}, org_id:'' }; }, methods: { getAdminUser(id) { if (id == 0) { return ""; } if (id == undefined) { return ""; } for (let i = 0; i < this.adminUser.length; i++) { if (this.adminUser[i].id == id) { return this.adminUser[i].name; } } }, getTime(value, temp) { if (value == 0) { return ""; } if (value != undefined) { return uParseTime(value, temp); } return ""; }, printThisPage() { const style = '@media print {#invoice-print{font-size:12px;}.printTitle{font-size: 22px;text-align: center;font-weight: bold;}.infoMain{display: flex;flex-wrap: wrap;padding:0 10px;margin-top:10px;}.infoMain .infoP{width: 33%;}.chargeBox{border: 1px solid #000;}.chargeUl{display:flex;justify-content: space-between;text-align: center;}.chargeUl p{line-height: 1px;}.chargeP{line-height: 1px;padding-bottom:16px;}.moneyBox{display: flex;justify-content: space-between;padding: 0 10px;background: #eeeeee;-webkit-print-color-adjust:exact;-moz-print-color-adjust:exact;-ms-print-color-adjust:exact;print-color-adjust:exact;height: 40px;align-items: center;border:1px solid #000; border-top:none}.actionBar{display: flex;justify-content: space-between; line-height: 24px;padding:0 10px;}.actionBar div{width:150px;}}'; printJS({ printable: "invoice-print", type: "html", style: style, scanStyles: false }); // if (this.org_template_info.template_id == 1) { // printJS({ // printable: "dialysis-print-box", // type: "html", // style: style, // scanStyles: false // }); // } }, }, created() { console.log('this.invoiceParams',this.invoiceParams) this.org_id = this.$store.getters.xt_user.org_id }, watch:{ paramsObj:{//深度监听,可监听到对象、数组的变化 handler(val, oldVal){ this.invoiceParams = val }, deep:true } } }; </script> <style lang="scss" scoped> .printTitle{ font-size: 22px; text-align: center; font-weight: bold; } .infoMain{ display: flex; flex-wrap: wrap; border-bottom: 2px solid #000; padding:0 10px; } .infoMain .infoP{ width: 33%; line-height: 24px; } .prescriptionBox{ padding:0 10px; height:600px; } .Rp{ font-size: 22px; font-weight: bold; } .drugsBox{ padding-left: 40px; margin-bottom: 10px; } .drugsBox p{ line-height: 30px; } .drugsOne{ line-height: 24px; } .drugsOne span{ margin-right: 20px; } .doctorBox{ display: flex; justify-content: space-between; padding:0 10px; line-height: 24px; border-bottom: 2px solid #000; } .actionBar{ display: flex; justify-content: space-between; line-height: 24px; padding:0 10px; } .actionBar p{ width:150px; } </style>