mirror of
https://gitlab.com/CIEFWorldwideSdnBhd/exchange.git
synced 2026-08-19 04:14:04 +00:00
dynamically show chinabank in supplier report
This commit is contained in:
weiweitoo
@@ -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);
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
@@ -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');
|
||||
|
||||
Reference in New Issue
Block a user