invoice pdf
unknown
javascript
4 years ago
21 kB
4
Indexable
<template> <div class="pdf"> <!-- Content for Static Frame 'header_frame' --> <div id="header_content"> <img src="/img/mime_logo.png" alt="logo" width="200" height="100" /> </div> <!-- Content for Static Frame 'footer_frame' --> <div id="footer_content"></div> <!-- HTML Content --> <table class="invoice_customer_info"> <tr> <td colspan="2" style=" text-align: center; font-size: 20px; text-decoration: underline; " > <h1>Invoice</h1> </td> </tr> <tr></tr> <tr> <td><strong>Name : </strong>{{ pdf_info.customer_name }}</td> <td style="text-align: right"> <strong>Subscriber ID :</strong> {{ pdf_info.subscriber_id }} </td> </tr> <tr> <td><strong>Bill_Add:</strong> {{ pdf_info.billing_address }}</td> <td style="text-align: right"> <strong>Invoice No. :</strong> {{ pdf_info.invoice_no }} </td> </tr> <tr> <td><strong>Ins_Add:</strong> {{ pdf_info.installation_address }}</td> <td style="text-align: right"> <strong>Ref No:</strong> {{ pdf_info.ref_no }} </td> </tr> <tr> <td><strong>Contact No:</strong> {{ pdf_info.contact_no }}</td> <td style="text-align: right"> <strong>Invoice Date:</strong> {{ pdf_info.invoice_date }} </td> </tr> <tr> <td><strong>Email:</strong> {{ pdf_info.email }}</td> <td style="text-align: right"> <strong>Due Date:</strong> {{ pdf_info.due_date }} </td> </tr> <tr> <td><strong>BIN No.</strong></td> <td style="text-align: right"> <strong>Billing Period:</strong> {{ pdf_info.billing_period }} </td> </tr> <tr> <td></td> <td style="text-align: right"> <strong>Billing Month:</strong> {{ pdf_info.billing_month }} </td> </tr> </table> <br /><br /> <table class="invoice_bill"> <tr> <td colspan="2" style="text-align: left"> <strong>Current Bill (BDT)</strong> </td> </tr> <tr> <td style="width: 50%;">Package Price</td> <td style="text-align: right">{{ pdf_info.recurring_charges }}</td> </tr> <tr> <td style="width: 50%;">Inventory</td> <td style="text-align: right">{{ pdf_info.inventory_charges }}</td> </tr> <tr> <td>OTC/OTC Installment</td> <td style="text-align: right">{{ pdf_info.installation_charges }}</td> </tr> <tr> <td style="text-align: right">Gross Charges</td> <td style="text-align: right">{{ pdf_info.gross_charges }}</td> </tr> <tr> <td>Discount</td> <td style="text-align: right">{{ pdf_info.total_discount }}</td> </tr> <tr> <td style="text-align: right">Total Discount</td> <td style="text-align: right">{{ pdf_info.total_discount }}</td> </tr> <tr> <td style="text-align: right">Gross Charges after Discount</td> <td style="text-align: right"> {{ pdf_info.gross_charges_after_discount }} </td> </tr> <tr> <td>VAT</td> <td style="text-align: right">{{ pdf_info.vat }}</td> </tr> <tr> <td style="text-align: right">Sub Total</td> <td style="text-align: right">{{ pdf_info.sub_total }}</td> </tr> <tr> <td>Security Deposit Charges</td> <td style="text-align: right"> {{ pdf_info.security_deposit_charges }} </td> </tr> <tr> <td>Other Charges</td> <td style="text-align: right">{{ pdf_info.other_charges }}</td> </tr> <tr> <td style="text-align: right"> <strong>Total Current Charges</strong> </td> <td style="text-align: right">{{ pdf_info.total_current_charges }}</td> </tr> <!-- <tr> <td colspan="2"> <strong>In words: .</strong> </td> </tr> --> </table> <div class="accounting-div"> <table class="accounting"> <tr> <td style="text-align: center"><strong>Particulars</strong></td> <td style="text-align: right"><strong>Amount(BDT)</strong></td> </tr> <tr> <td>Current Outstanding</td> <td style="text-align: right"> {{ pdf_info.total_current_charges }} </td> </tr> <tr> <td>Previous Outstanding</td> <td style="text-align: right">{{ pdf_info.previous_outstanding }}</td> </tr> <tr> <td>OTC Installment Due</td> <td style="text-align: right">{{ pdf_info.due_installment }}</td> </tr> <tr> <td>Deffered Charge</td> <td style="text-align: right">{{ pdf_info.deffered_charge }}</td> </tr> <tr> <td>Total Paid</td> <td style="text-align: right">{{ pdf_info.total_paid }}</td> </tr> <tr> <td style="text-align: center"> <strong>Total Outstanding</strong> </td> <td style="text-align: right"> <strong>{{ pdf_info.total_outstanding }}</strong> </td> </tr> </table> </div> <div class="instruction-note instruction"> <h4>Payments Instruction:</h4> <ul> <li> Payment to be made by crossed cheque/Bank Draft in favor of "DigiCon Telecommunication Ltd." </li> <li> Log in your portal and follow make payment option. Portal URL: https//myisp.mimebd.com </li> </ul> </div> <div> <table class="beneficiary-bank-table"> <thead style="border: 1px solid black;"> <tr> <td colspan="3"><strong>Beneficiary Bank Details:</strong></td> </tr> <tr> <td colspan="3">BIN No. 000862204-0101</td> </tr> </thead> <tr> <td>Account Name</td> <td>DigiCon Telecommunication Limited</td> <td>DigiCon Telecommunication Limited</td> </tr> <tr> <td>Account No.</td> <td>0002-0210033602</td> <td>1031200005091</td> </tr> <tr> <td>Routing No.</td> <td>14527 5358</td> <td>090260434</td> </tr> <tr> <td>Bank Name</td> <td>Mutual Trust Bank Ltd.</td> <td>Dutch-Bangla Bank Limited</td> </tr> <tr> <td>Branch Name</td> <td>Principal</td> <td>Branch: Banani</td> </tr> <tr> <td>Swift Code</td> <td>MTBLBDDHPBR</td> <td></td> </tr> <tr style="border: 1px solid black;"> <td>bKash Merchant Payment</td> <td>01787-671362</td> <td></td> </tr> </table> </div> <div class="instruction-note"> <h4>Note:</h4> <ul> <li> If you have any queries regarding the invoice amount, please send email to: billing.mime@cg-bd.com </li> <li> This is a computer-generated invoice does not require any signature. </li> </ul> </div> <div class="company-address"> <table> <tr> <td><strong>DigiCon Telecommunication Ltd.</strong></td> <td></td> </tr> <tr> <td> Awal Center (15th Floor), 34, Kemal Ataturk Avenue, Banani C/A, Dhaka-1213, Bangladesh </td> <td></td> </tr> <tr> <td>Tel: +88-02-9822056-9, Cell: +88-01704-119545</td> <td style="text-align: right">www.mimebd.com</td> </tr> <tr> <td> Email: info.mimebd@cg-bd.com Facebook: https:www.facebook.com/MIMECG </td> <td style="text-align: right">Hotline: 16676</td> </tr> </table> </div> <div class="download-pdf"> <base-button simple type="primary" @click="downloadInvoicePdf"> Download Pdf </base-button> <base-button simple type="primary" @click="$router.go(-1)"> Back </base-button> </div> </div> </template> <script> import InvoiceService from "@/services/invoice_service"; import { mapGetters } from "vuex"; export default { props: ["swapComponent", "invoiceId"], components: { InvoiceService }, computed: { ...mapGetters({ new_invoice: "invoice_store/getInvoice", unpaid_invoice_amount: "invoice_store/getUnpaidInvoiceAmount", customer_line: "customer/getCustomerLine", customer_details: "customer/getCustomerDetails" }) }, beforeMount() { this.renderInvoice(this.$route.params.invoice); }, data() { return { invoice_obj: null, cust_line: null, cust_details: null, unpaid_amount: 0, customer_type : 'general', pdf_info: { customer_name: "", installation_address: "", billing_address: "", contact_no: "", email: "", subscriber_id: "", invoice_no: "", invoice_date: "", ref_no: "", due_date: "", billing_period: "", billing_month: "", recurring_charges: 0, deffered_charge: 0, inventory_charges: 0, installation_charges: 0, current_installment_with_vat: 0, gross_charges: 0, discount: 0, total_discount: 0, gross_charges_after_discount: 0, vat: 0, sub_total: 0, security_deposit_charges: 0, other_charges: 0, total_current_charges: 0, current_outstanding: 0, previous_outstanding: 0, due_installment: 0, total_outstanding: 0, total_paid: 0 } }; }, methods: { downloadInvoicePdf() { InvoiceService.downloadInvoice(this.pdf_info).then( request => { if (request.result.status == 200) { this.$notify({ verticalAlign: "top", horizontalAlign: "center", message: "Invoice download successfully." }); this.show_loader = false; } else { this.$notify({ verticalAlign: "top", horizontalAlign: "center", message: "Something went wrong" }); this.show_loader = false; } }, error => { this.show_loader = false; } ); }, renderInvoice(invId) { this.invoiceId = invId; this.$store .dispatch("invoice_store/setInvoiceDetails", this.invoiceId) .then(response => { this.invoice_obj = response.result; console.log('invoiced object',this.invoice_obj); var CustomerDetailsByMiMeId_url = 'customer/setCustomerDetailsByMiMeId' var CustomerLineByMiMeId_url = "customer/setCustomerLineByMiMeId" if(this.invoice_obj.customer_interested_on == 'license_lisp' || this.invoice_obj.customer_interested_on == 'non_license_lisp'){ CustomerDetailsByMiMeId_url = 'reseller/setResellerDetailsByMiMeId' CustomerLineByMiMeId_url = "reseller/setResellerBWLineByMiMeId" this.customer_type = 'reseller' } this.$store .dispatch( CustomerDetailsByMiMeId_url, this.invoice_obj.subscriber_id ) .then(response => { this.cust_details = response; this.$store .dispatch( CustomerLineByMiMeId_url, this.invoice_obj.subscriber_id ) .then(response => { this.cust_line = response.result; /* odoo product line */ let installation_charges = 0; let r_charges = 0; let inv_charges = 0; let discount = this.invoice_obj.total_discount; for ( let index = 0; index < this.invoice_obj.invoice_lines.length; index++ ) { const element = this.invoice_obj.invoice_lines[index]; if ( element.product_type == "otp" || element.unified_category_name.toLowerCase() == "otc" || element.unified_service_type_name.toLowerCase() == "otc" ) { installation_charges += parseFloat( element.price_subtotal ); this.pdf_info.current_installment_with_vat += parseFloat( element.price_unit ) * element.quantity; } else if (element.product_type == "product") { inv_charges += parseFloat(element.price_subtotal); } else { r_charges += parseFloat(element.price_subtotal); } } r_charges = r_charges - this.invoice_obj.deffered_charge; if(r_charges < 0) { r_charges = 0; } this.$store .dispatch( "invoice_store/setUnpaidInvoiceAmount", this.invoice_obj.customer_id ) .then(response => { this.unpaid_amount = response.result; let g_charges = r_charges + installation_charges + inv_charges; this.pdf_info.gross_charges = 0; let g_charges_after_discount = g_charges; let s_total = g_charges_after_discount + this.invoice_obj.vat; let t_current_charges = s_total + parseFloat(this.pdf_info.other_charges) + this.pdf_info.security_deposit_charges; let p_outstanding = 0; let t_outstanding = 0; var total_paid = 0; for ( var i = 0; i < this.invoice_obj.paid_lines.length; i++ ) { total_paid = parseFloat(total_paid) + parseFloat(this.invoice_obj.paid_lines[i].amount); } this.$store.dispatch( "customer/setCustomerOTCInstallmentLine", this.invoice_obj.subscriber_id ).then(response => { var inst_due = 0; var installmentLines = response; for (var i = 0; i < installmentLines.length; i++) { if (installmentLines[i].status == "pending") { inst_due += parseFloat( installmentLines[i].installment_amount ); } } if(this.invoice_obj.state != 'paid') { this.pdf_info.due_installment = inst_due - this.pdf_info.current_installment_with_vat; if(this.pdf_info.due_installment < 0) { this.pdf_info.due_installment = 0; } } else { this.pdf_info.due_installment = inst_due; } p_outstanding = parseFloat(this.unpaid_amount.due_amount) - (t_current_charges - total_paid); if(p_outstanding < 0) { p_outstanding = 0; } t_outstanding = t_current_charges + p_outstanding + this.pdf_info.due_installment + this.invoice_obj.deffered_charge; t_outstanding = t_outstanding - total_paid; var inv_no = ""; if (this.invoice_obj.number) { inv_no = this.invoice_obj.number; } var inv_date = ""; if (this.invoice_obj.invoice_date) { inv_date = this.invoice_obj.invoice_date; } var duedate = ""; if (this.invoice_obj.due_date) { duedate = this.invoice_obj.due_date; } this.pdf_info = { customer_name: this.cust_details.first_name + " " + this.cust_details.middle_name + " " + this.cust_details.last_name, installation_address: this.cust_details .contact_address, billing_address: this.cust_details.billing_address, contact_no: this.cust_details.mobile_primary, email: this.cust_details.email, subscriber_id: this.cust_details.username, invoice_no: inv_no, invoice_date: inv_date, ref_no: inv_no, due_date: duedate, billing_period: this.invoice_obj.billing_period, billing_month: this.invoice_obj.billing_month, recurring_charges: r_charges.toFixed(2), deffered_charge: this.invoice_obj.deffered_charge, installation_charges: installation_charges.toFixed(2), gross_charges: g_charges.toFixed(2), discount: discount.toFixed(2), total_discount: discount.toFixed(2), gross_charges_after_discount: g_charges_after_discount.toFixed( 2 ), vat: this.invoice_obj.vat.toFixed(2), sub_total: s_total.toFixed(2), security_deposit_charges: 0, other_charges: 0, total_current_charges: t_current_charges.toFixed(2), current_outstanding: t_current_charges.toFixed(2), previous_outstanding: p_outstanding.toFixed(2), total_outstanding: t_outstanding.toFixed(2), total_paid: total_paid, due_installment: this.pdf_info.due_installment, inventory_charges: inv_charges.toFixed(2), }; }); }); }); }); }); } } }; </script> <style scoped> body { font-size: 12px; } div.pdf { width: 100%; height: 100%; } table { margin: 0 auto; width: 100%; line-height: 1.5; } table td { padding: 5px; } table.invoice_bill { border: 1px solid black; border-collapse: collapse; padding-top: 5px; padding-bottom: 5px; padding-left: 5px; padding-right: 5px; } table.beneficiary-bank-table { border: 1px solid black; border-collapse: collapse; border-left: 1px solid #000; } table.beneficiary-bank-table td { border-collapse: collapse; border-left: 1px solid #000; } div.accounting-div { width: 50%; margin-top: 7%; margin-left: 50%; } div.company-address { margin-top: 10%; } div.instruction { margin-top: 7%; } .accounting td, .invoice_bill td { border: 1px solid black; border-collapse: collapse; border: 1px solid black; } .download-pdf { float: left; margin-top: 1%; } .instruction-note { margin-top: 2%; line-height: 2; font-size: 0.775rem; } </style>
Editor is loading...