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...