From a9b30e2bb99714a9aba2a1a64b7185b2f70ad0d9 Mon Sep 17 00:00:00 2001 From: Jack Goh Date: Thu, 9 Aug 2018 12:08:03 +0800 Subject: [PATCH] added supplier booking report to complete page at admin side --- .../js/pages/admin/booking/completed.vue | 221 ++++++++++++++++- .../js/pages/admin/booking/x2Completed.vue | 222 +++++++++++++++++- 2 files changed, 441 insertions(+), 2 deletions(-) diff --git a/resources/assets/js/pages/admin/booking/completed.vue b/resources/assets/js/pages/admin/booking/completed.vue index ee794a63..2b2ab439 100644 --- a/resources/assets/js/pages/admin/booking/completed.vue +++ b/resources/assets/js/pages/admin/booking/completed.vue @@ -264,7 +264,37 @@
- + + +
+ Supplier Report + +
+ + + +
+ Download Now + + + +
+ +
+ User BankinSlip + +
+ + + + +

Download

+ + + + + +
@@ -317,6 +347,7 @@ status: 8, term: null }, + supplier_booking:{}, loading_btn: false, booking_details: { id: null, @@ -347,6 +378,17 @@ name: 'notfound' }) }) + axios.get('/api/supplier-booking/' + this.$route.params.id) + .then((response) => { + this.supplier_booking = response.data + loading.close() + }).catch((error) => { + console.log(error) + this.$router.push({ + name: 'notfound' + }) + loading.close() + }) }, methods: { getExtension(path) { @@ -361,6 +403,183 @@ var baseUrl = getUrl.protocol + "//" + getUrl.host; return baseUrl + path; } + }, + directives: { + insertMessage: function (canvasElement, binding) { + setTimeout(function (canvasElement, binding) { + ////////////////// variable ////////////////////////// + var canvasWidth = 450; + var rowHeight = [20, 40, 60, 80, 100, 120, 140, 170, 190, 210, 230, 250, 270, 290, 310, 330, 350, 390, + 410, + 470, 490, 510, 610, 630 + ] + const canvasHeight = rowHeight[rowHeight.length - 1]; + + var column1X = 220; + var column2X = 320; + var column3X = 420; + + ///////////////////Canvast Init//////////////////// + var canvas = document.getElementById("myCanvas"); + canvas.width = canvasWidth; + canvas.height = canvasHeight; + // Get canvas context + var ctx = canvasElement.getContext("2d"); + // Clear the canvas + ctx.clearRect(0, 0, 300, 150); + + ctx.fillStyle = "#FFFFFF"; + ctx.fillRect(0, 0, canvasWidth, rowHeight[0]); + for (var i = 1; i < rowHeight.length; i++) { + if (i % 2 == 1) + ctx.fillStyle = "#A9D08E"; + else + ctx.fillStyle = "#FFFFFF"; + ctx.fillRect(0, rowHeight[i - 1], canvasWidth, rowHeight[i]); + } + ///////////// fillup with text//////////////// + //// config canvas + ctx.fillStyle = "#000000"; + ctx.font = "13px Arial"; + ctx.textAlign = "right"; + //// Row 1 + ctx.fillText("Ref No. :", column1X, rowHeight[1] - 5); + ctx.fillText(binding.value.booking_id, column3X, rowHeight[1] - 5); + //// Row 2 + ctx.fillText("Date :", column1X, rowHeight[2] - 5); + ctx.fillText(binding.value.date, column3X, rowHeight[2] - 5); + //// Row 3 + ctx.fillText("Marking :", column1X, rowHeight[3] - 5); + ctx.font = "bold 14px Arial"; + ctx.fillStyle = "#0070D5"; + ctx.fillText(binding.value.marking, column3X, rowHeight[3] - 5); + ctx.fillStyle = "#000000"; + ctx.font = "13px Arial"; + //// Row 4 + ctx.fillText("Payment For(Order No.) :", column1X, rowHeight[4] - 5); + ctx.fillText(binding.value.order_no, column3X, rowHeight[4] - 5); + //// Row 4 + ctx.fillText("Payment For :", column1X, rowHeight[5] - 5); + ctx.fillText(binding.value.payment_for, column3X, rowHeight[5] - 5); + //// Row 5 + ctx.fillText("Payment Method :", column1X, rowHeight[6] - 5); + ctx.fillText(binding.value.payment_method, column3X, rowHeight[6] - 5); + //// Row 6 + ctx.fillText("Remark :", column1X, rowHeight[7] - 10); + //// Row 7 + // Empty + //// Row 8 + ctx.fillText("MYR/RM :", column1X, rowHeight[9] - 5); + ctx.fillText("MYR", column2X, rowHeight[9] - 5); + ctx.font = "bold 14px Arial"; + ctx.fillText(binding.value.amount_in_myr, column3X, rowHeight[9] - 5); + ctx.font = "13px Arial"; + //// Row 8 + ctx.fillText("* RATE :", column1X, rowHeight[10] - 5); + ctx.fillText(binding.value.rate, column3X, rowHeight[10] - 5); + //// Row 9 + ctx.fillText("REBATE :", column1X, rowHeight[11] - 5); + ctx.fillText("MYR", column2X, rowHeight[11] - 5); + ctx.font = "14px Arial"; + ctx.fillText(binding.value.rebate, column3X, rowHeight[11] - 5); + ctx.font = "13px Arial"; + //// Row 10 + ctx.font = "bold 14px Arial"; + ctx.fillText("CNY", column2X, rowHeight[12] - 5); + ctx.fillText(binding.value.amountInRMB, column3X, rowHeight[12] - 5); + ctx.font = "13px Arial"; + //line + ctx.beginPath(); + ctx.lineWidth = 1; + ctx.moveTo(column1X + 30, rowHeight[11]); + ctx.lineTo(column3X + 20, rowHeight[11]); + ctx.stroke(); + ctx.beginPath(); + ctx.lineWidth = 2; + ctx.moveTo(column1X + 30, rowHeight[12]); + ctx.lineTo(column3X + 20, rowHeight[12]); + ctx.stroke(); + //// Row 11 + ctx.fillText("MYR/RM :", column1X, rowHeight[14] - 5); + ctx.fillText("MYR", column2X, rowHeight[14] - 5); + ctx.fillText(binding.value.amount_in_myr, column3X, rowHeight[14] - 5); + //// Row 12 + // ctx.fillText("Billing(1.0%) :", column1X, rowHeight[15] - 5); + // ctx.fillText("MYR", column2X, rowHeight[15] - 5); + // ctx.fillText(binding.value.billing_amount, column3X, rowHeight[15] - 5); + //// Row 13 + + ctx.fillText("+ TAX " + (Math.round((binding.value.tax_rate * 100 - 100) * 100) / 100) + "% :", + column1X, rowHeight[16] - 5); // TODO : Change to percentage + ctx.fillText("MYR", column2X, rowHeight[16] - 5); + ctx.fillText(binding.value.salestax_amount, column3X, rowHeight[16] - 5); + // //// Row 14 + // ctx.fillText("+ GST 6% :", column1X, rowHeight[17] - 15); + // ctx.fillText("MYR", column2X, rowHeight[17] - 15); + // ctx.fillText("289.84", column3X, rowHeight[17] - 15); + //// Row 15 + ctx.font = "bold 14px Arial"; + ctx.fillText("Bank In Amount :", column1X, rowHeight[18] - 5); + ctx.fillStyle = "#0070D5"; + ctx.fillText("MYR", column2X, rowHeight[18] - 5); + ctx.fillText(binding.value.amount_after_tax, column3X, rowHeight[18] - 5); + ctx.fillStyle = "#000000"; + ctx.font = "13px Arial"; + //line + ctx.lineWidth = 1; + ctx.beginPath(); + ctx.moveTo(column1X + 30, rowHeight[17]); + ctx.lineTo(column3X + 20, rowHeight[17]); + ctx.stroke(); + ctx.beginPath(); + ctx.moveTo(column1X + 30, rowHeight[18] + 1); + ctx.lineTo(column3X + 20, rowHeight[18] + 1); + ctx.stroke(); + ctx.beginPath(); + ctx.moveTo(column1X + 30, rowHeight[18] - 2); + ctx.lineTo(column3X + 20, rowHeight[18] - 2); + ctx.stroke(); + //// Row 16 + // ctx.fillText("Rebate :", column1X, rowHeight[19] - 25); + // ctx.fillText("CNY", column2X, rowHeight[19] - 25); + // ctx.fillText("224.68", column3X, rowHeight[19] - 25); + //// Row 16 + ctx.font = "bold 14px Arial"; + ctx.fillText("Bank In to Account Below :", column1X, rowHeight[20] - 5); + ctx.font = "bold italic 15px Arial"; + ctx.fillStyle = "#0070D5"; + ctx.fillText("CNY", column2X, rowHeight[20] - 5); + ctx.fillText(binding.value.amountInRMB, column3X - 20, rowHeight[20] - 5); + ctx.fillStyle = "#000000"; + ctx.font = "13px Arial"; + //// Row 17 + //// Row 18 + //// Row 19 + // var img = new Image(); + // img.src = "/banklogo.png"; + // img.crossOrigin = "anonymous"; + // var maxwidth = 70; + // var ratio = maxwidth / img.width; + // var offset = ((rowHeight[22] - rowHeight[21]) / 2) - (img.height * ratio / 2); + // var y = rowHeight[21] + offset; // to make it always center + + // img.onload=function(){ + // ctx.drawImage(img, 50, 530, 80, 50); + // }; + + // text + ctx.font = "bold 14px Arial"; + ctx.textAlign = "center"; + ctx.fillText("China beneficiary Account", column2X - 40, rowHeight[22] - 80); + ctx.fillText("户名 : " + binding.value.acc_name, column2X - 40, rowHeight[22] - 60); + ctx.fillText(binding.value.acc_no, column2X - 40, rowHeight[22] - 40); + ctx.fillText(binding.value.bank_name, column2X - 40, rowHeight[22] - 20); + ctx.fillText(binding.value.bank_branch, column2X - 40, rowHeight[22] - 2); + + ctx.font = "13px Arial"; + }, 1000, canvasElement, binding); + + } } } \ No newline at end of file diff --git a/resources/assets/js/pages/admin/booking/x2Completed.vue b/resources/assets/js/pages/admin/booking/x2Completed.vue index 7409a70a..556765e9 100644 --- a/resources/assets/js/pages/admin/booking/x2Completed.vue +++ b/resources/assets/js/pages/admin/booking/x2Completed.vue @@ -228,6 +228,37 @@ --> +
+ + +
+ Supplier Report + +
+ + + +
+ Download Now + + + +
+ +
+ User BankinSlip + +
+ + + + +

Download

+ + + + +
@@ -280,6 +311,7 @@ status: 8, term: null }, + supplier_booking: {}, loading_btn: false, booking_details:{ id: null, @@ -310,6 +342,17 @@ name: 'notfound' }) }) + axios.get('/api/supplier-booking/' + this.$route.params.id) + .then((response) => { + this.supplier_booking = response.data + loading.close() + }).catch((error) => { + console.log(error) + this.$router.push({ + name: 'notfound' + }) + loading.close() + }) }, methods: { getExtension(path){ @@ -324,6 +367,183 @@ var baseUrl = getUrl.protocol + "//" + getUrl.host; return baseUrl + path; } - } + }, + directives: { + insertMessage: function (canvasElement, binding) { + setTimeout(function (canvasElement, binding) { + ////////////////// variable ////////////////////////// + var canvasWidth = 450; + var rowHeight = [20, 40, 60, 80, 100, 120, 140, 170, 190, 210, 230, 250, 270, 290, 310, 330, 350, 390, + 410, + 470, 490, 510, 610, 630 + ] + const canvasHeight = rowHeight[rowHeight.length - 1]; + + var column1X = 220; + var column2X = 320; + var column3X = 420; + + ///////////////////Canvast Init//////////////////// + var canvas = document.getElementById("myCanvas"); + canvas.width = canvasWidth; + canvas.height = canvasHeight; + // Get canvas context + var ctx = canvasElement.getContext("2d"); + // Clear the canvas + ctx.clearRect(0, 0, 300, 150); + + ctx.fillStyle = "#FFFFFF"; + ctx.fillRect(0, 0, canvasWidth, rowHeight[0]); + for (var i = 1; i < rowHeight.length; i++) { + if (i % 2 == 1) + ctx.fillStyle = "#A9D08E"; + else + ctx.fillStyle = "#FFFFFF"; + ctx.fillRect(0, rowHeight[i - 1], canvasWidth, rowHeight[i]); + } + ///////////// fillup with text//////////////// + //// config canvas + ctx.fillStyle = "#000000"; + ctx.font = "13px Arial"; + ctx.textAlign = "right"; + //// Row 1 + ctx.fillText("Ref No. :", column1X, rowHeight[1] - 5); + ctx.fillText(binding.value.booking_id, column3X, rowHeight[1] - 5); + //// Row 2 + ctx.fillText("Date :", column1X, rowHeight[2] - 5); + ctx.fillText(binding.value.date, column3X, rowHeight[2] - 5); + //// Row 3 + ctx.fillText("Marking :", column1X, rowHeight[3] - 5); + ctx.font = "bold 14px Arial"; + ctx.fillStyle = "#0070D5"; + ctx.fillText(binding.value.marking, column3X, rowHeight[3] - 5); + ctx.fillStyle = "#000000"; + ctx.font = "13px Arial"; + //// Row 4 + ctx.fillText("Payment For(Order No.) :", column1X, rowHeight[4] - 5); + ctx.fillText(binding.value.order_no, column3X, rowHeight[4] - 5); + //// Row 4 + ctx.fillText("Payment For :", column1X, rowHeight[5] - 5); + ctx.fillText(binding.value.payment_for, column3X, rowHeight[5] - 5); + //// Row 5 + ctx.fillText("Payment Method :", column1X, rowHeight[6] - 5); + ctx.fillText(binding.value.payment_method, column3X, rowHeight[6] - 5); + //// Row 6 + ctx.fillText("Remark :", column1X, rowHeight[7] - 10); + //// Row 7 + // Empty + //// Row 8 + ctx.fillText("MYR/RM :", column1X, rowHeight[9] - 5); + ctx.fillText("MYR", column2X, rowHeight[9] - 5); + ctx.font = "bold 14px Arial"; + ctx.fillText(binding.value.amount_in_myr, column3X, rowHeight[9] - 5); + ctx.font = "13px Arial"; + //// Row 8 + ctx.fillText("* RATE :", column1X, rowHeight[10] - 5); + ctx.fillText(binding.value.rate, column3X, rowHeight[10] - 5); + //// Row 9 + ctx.fillText("REBATE :", column1X, rowHeight[11] - 5); + ctx.fillText("MYR", column2X, rowHeight[11] - 5); + ctx.font = "14px Arial"; + ctx.fillText(binding.value.rebate, column3X, rowHeight[11] - 5); + ctx.font = "13px Arial"; + //// Row 10 + ctx.font = "bold 14px Arial"; + ctx.fillText("CNY", column2X, rowHeight[12] - 5); + ctx.fillText(binding.value.amountInRMB, column3X, rowHeight[12] - 5); + ctx.font = "13px Arial"; + //line + ctx.beginPath(); + ctx.lineWidth = 1; + ctx.moveTo(column1X + 30, rowHeight[11]); + ctx.lineTo(column3X + 20, rowHeight[11]); + ctx.stroke(); + ctx.beginPath(); + ctx.lineWidth = 2; + ctx.moveTo(column1X + 30, rowHeight[12]); + ctx.lineTo(column3X + 20, rowHeight[12]); + ctx.stroke(); + //// Row 11 + ctx.fillText("MYR/RM :", column1X, rowHeight[14] - 5); + ctx.fillText("MYR", column2X, rowHeight[14] - 5); + ctx.fillText(binding.value.amount_in_myr, column3X, rowHeight[14] - 5); + //// Row 12 + // ctx.fillText("Billing(1.0%) :", column1X, rowHeight[15] - 5); + // ctx.fillText("MYR", column2X, rowHeight[15] - 5); + // ctx.fillText(binding.value.billing_amount, column3X, rowHeight[15] - 5); + //// Row 13 + + ctx.fillText("+ TAX " + (Math.round((binding.value.tax_rate * 100 - 100) * 100) / 100) + "% :", + column1X, rowHeight[16] - 5); // TODO : Change to percentage + ctx.fillText("MYR", column2X, rowHeight[16] - 5); + ctx.fillText(binding.value.salestax_amount, column3X, rowHeight[16] - 5); + // //// Row 14 + // ctx.fillText("+ GST 6% :", column1X, rowHeight[17] - 15); + // ctx.fillText("MYR", column2X, rowHeight[17] - 15); + // ctx.fillText("289.84", column3X, rowHeight[17] - 15); + //// Row 15 + ctx.font = "bold 14px Arial"; + ctx.fillText("Bank In Amount :", column1X, rowHeight[18] - 5); + ctx.fillStyle = "#0070D5"; + ctx.fillText("MYR", column2X, rowHeight[18] - 5); + ctx.fillText(binding.value.amount_after_tax, column3X, rowHeight[18] - 5); + ctx.fillStyle = "#000000"; + ctx.font = "13px Arial"; + //line + ctx.lineWidth = 1; + ctx.beginPath(); + ctx.moveTo(column1X + 30, rowHeight[17]); + ctx.lineTo(column3X + 20, rowHeight[17]); + ctx.stroke(); + ctx.beginPath(); + ctx.moveTo(column1X + 30, rowHeight[18] + 1); + ctx.lineTo(column3X + 20, rowHeight[18] + 1); + ctx.stroke(); + ctx.beginPath(); + ctx.moveTo(column1X + 30, rowHeight[18] - 2); + ctx.lineTo(column3X + 20, rowHeight[18] - 2); + ctx.stroke(); + //// Row 16 + // ctx.fillText("Rebate :", column1X, rowHeight[19] - 25); + // ctx.fillText("CNY", column2X, rowHeight[19] - 25); + // ctx.fillText("224.68", column3X, rowHeight[19] - 25); + //// Row 16 + ctx.font = "bold 14px Arial"; + ctx.fillText("Bank In to Account Below :", column1X, rowHeight[20] - 5); + ctx.font = "bold italic 15px Arial"; + ctx.fillStyle = "#0070D5"; + ctx.fillText("CNY", column2X, rowHeight[20] - 5); + ctx.fillText(binding.value.amountInRMB, column3X - 20, rowHeight[20] - 5); + ctx.fillStyle = "#000000"; + ctx.font = "13px Arial"; + //// Row 17 + //// Row 18 + //// Row 19 + // var img = new Image(); + // img.src = "/banklogo.png"; + // img.crossOrigin = "anonymous"; + // var maxwidth = 70; + // var ratio = maxwidth / img.width; + // var offset = ((rowHeight[22] - rowHeight[21]) / 2) - (img.height * ratio / 2); + // var y = rowHeight[21] + offset; // to make it always center + + // img.onload=function(){ + // ctx.drawImage(img, 50, 530, 80, 50); + // }; + + // text + ctx.font = "bold 14px Arial"; + ctx.textAlign = "center"; + ctx.fillText("China beneficiary Account", column2X - 40, rowHeight[22] - 80); + ctx.fillText("户名 : " + binding.value.acc_name, column2X - 40, rowHeight[22] - 60); + ctx.fillText(binding.value.acc_no, column2X - 40, rowHeight[22] - 40); + ctx.fillText(binding.value.bank_name, column2X - 40, rowHeight[22] - 20); + ctx.fillText(binding.value.bank_branch, column2X - 40, rowHeight[22] - 2); + + ctx.font = "13px Arial"; + }, 1000, canvasElement, binding); + + } + } }