@@ -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);
+
+ }
+ }
}