From 19ea22141e287706d91a38341f583d35ff7ac763 Mon Sep 17 00:00:00 2001 From: weiweitoo Date: Thu, 12 Jul 2018 22:42:16 +0800 Subject: [PATCH] dynamically show chinabank in supplier report --- .../js/pages/admin/booking/supplierReport.vue | 381 ++++++++++-------- routes/api.php | 2 - 2 files changed, 211 insertions(+), 172 deletions(-) diff --git a/resources/assets/js/pages/admin/booking/supplierReport.vue b/resources/assets/js/pages/admin/booking/supplierReport.vue index 41400042..ce6dca4b 100644 --- a/resources/assets/js/pages/admin/booking/supplierReport.vue +++ b/resources/assets/js/pages/admin/booking/supplierReport.vue @@ -270,13 +270,23 @@ }, supplier_booking:{ }, + active_bank_setting: { + x1_bank_id: null, + x2_bank_id: null, + beneficiary_id: null + }, + beneficiaryDetail:{ + company_name: '奕继椿', + bank_name: '民生银行 深川红荔支行', + acc_no: '123456789', + }, supplier: null, supplier_options: null, exampleContent: "This is TEXT" - } }, beforeCreate() { + const loading = this.$loading({ lock: true, text: 'Please wait..', @@ -297,8 +307,7 @@ }) }) - axios - .get('/api/supplier-booking/' + this.$route.params.id) + axios.get('/api/supplier-booking/' + this.$route.params.id) .then((response) => { loading.close() this.supplier_booking = response.data @@ -310,18 +319,45 @@ }) }) - - + axios.get('/api/active-bank') + .then((response) => { + axios.get('/api/setting-beneficiary/' + response.data.beneficiary_id) + .then((response) => { + this.supplier_booking.china_bank_name = response.data.bank_name; + this.supplier_booking.china_company_name = response.data.company_name; + this.supplier_booking.china_acc_no = response.data.acc_no; + console.log(this.supplier_booking); + }) + .catch((error) => { + console.log(error); + this.$message({ + showClose: true, + message: 'Fetch data fail', + type: 'error', + duration: 10000 + }); + }); + }) + .catch((error) => { + console.log(error); + this.$message({ + showClose: true, + message: 'Fetch data fail', + type: 'error', + duration: 10000 + }); + }); + }, methods: { downloadReport(){ let canvas = document.getElementById('myCanvas') - var dataString = canvas.toDataURL("image/png"); - console.log(dataString) - var link = document.createElement("a"); - link.download = 'image'; - link.href = dataString; - link.click(); + var dataString = canvas.toDataURL("image/png"); + console.log(dataString) + var link = document.createElement("a"); + link.download = 'image'; + link.href = dataString; + link.click(); }, goToSupplierBooking(){ this.$router.push({ @@ -330,7 +366,7 @@ }) }, completeReport() { - // TODO : send request to change status + // TODO : send request to change status this.loading_btn = true axios .post('/api/booking/' + this.$route.params.id + '/confirm-supplier') @@ -362,174 +398,179 @@ id: this.$route.params.id } }) - } - + }, }, directives: { insertMessage: 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]; + 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; + 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); + ///////////////////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("Payment Voucher :", column1X, rowHeight[1] - 5); - ctx.fillText(binding.value.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("CIEF/605HOS", 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.id, column3X, rowHeight[4] - 5); - //// Row 4 - ctx.fillText("Payment For :", column1X, rowHeight[5] - 5); - ctx.fillText("Full Payment", 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.transfer_amount, 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 - // Empty - //// 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("4830.68", 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("+ SALES TAX (10%) :", column1X, rowHeight[16] - 5); - 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("Customer Bank In Amount :", column1X, rowHeight[18] - 5); - ctx.fillStyle = "#0070D5"; - ctx.fillText("MYR", column2X, rowHeight[18] - 5); - ctx.fillText(binding.value.amountInRMB, 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("7692.17", 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 + 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("Payment Voucher :", column1X, rowHeight[1] - 5); + ctx.fillText(binding.value.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("CIEF/605HOS", 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.id, column3X, rowHeight[4] - 5); + //// Row 4 + ctx.fillText("Payment For :", column1X, rowHeight[5] - 5); + ctx.fillText("Full Payment", 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.transfer_amount, 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 + // Empty + //// 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("4830.68", 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("+ SALES TAX (10%) :", column1X, rowHeight[16] - 5); + 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("Customer Bank In Amount :", column1X, rowHeight[18] - 5); + ctx.fillStyle = "#0070D5"; + ctx.fillText("MYR", column2X, rowHeight[18] - 5); + ctx.fillText(binding.value.amountInRMB, 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("7692.17", 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("户名 : 奕继椿", column2X - 40, rowHeight[22] - 60); - ctx.fillText("6226 1906 8014 3314", column2X - 40, rowHeight[22] - 40); - ctx.fillText("民生银行 深川红荔支行", column2X - 40, rowHeight[22] - 20); - ctx.font = "13px Arial"; + img.onload=function(){ + ctx.drawImage(img, 50, 530, 80, 50); + }; + // text + ctx.font = "bold 14px Arial"; + ctx.textAlign = "center"; + console.log(binding.value.amountInRMB); + console.log(binding.value); + ctx.fillText("China beneficiary Account", column2X - 40, rowHeight[22] - 80); + ctx.fillText("户名 : " + binding.value.china_company_name, column2X - 40, rowHeight[22] - 60); + ctx.fillText(binding.value.china_acc_no, column2X - 40, rowHeight[22] - 40); + ctx.fillText(binding.value.china_bank_name , column2X - 40, rowHeight[22] - 20); + + ctx.font = "13px Arial"; + }, 1000,canvasElement,binding); + } } + } \ No newline at end of file diff --git a/routes/api.php b/routes/api.php index 75d54e38..5e860f45 100644 --- a/routes/api.php +++ b/routes/api.php @@ -52,8 +52,6 @@ Route::group(['middleware' => 'auth:api'], function () { Route::get('malaysia-bank/{malaysiaBank}', 'SettingMalaysiaBankController@show'); }); - - Route::group(['middleware' => 'guest:api'], function () { Route::post('login', 'Auth\LoginController@login')->name('login'); Route::post('register', 'Auth\RegisterController@create');