mirror of
https://gitlab.com/CIEFWorldwideSdnBhd/exchange.git
synced 2026-08-19 04:14:04 +00:00
Jack Goh
489 lines
18 KiB
Vue
489 lines
18 KiB
Vue
<template>
|
|
<el-main>
|
|
<progress-track v-model="status" />
|
|
|
|
<div align="center">
|
|
<h4 style="margin-top:5%;"></h4>
|
|
<br>
|
|
<h5> Supplier Report</h5>
|
|
<br>
|
|
<!-- <el-button type="primary" @click="$router.go(-1)">Go Back</el-button> -->
|
|
</div>
|
|
<br>
|
|
<el-row justify="center" align="center">
|
|
<el-card class="box-card">
|
|
<div slot="header" class="clearfix">
|
|
<span>Order Details</span>
|
|
<!-- <el-button style="float: right; padding: 3px 0" type="text">Operation button</el-button> -->
|
|
</div>
|
|
<div class="el-row" style="margin-left: -6px; margin-right: -6px;">
|
|
<div class="el-col el-col-12" style="padding-left: 6px; padding-right: 6px;">
|
|
<div class="el-table el-table--fit el-table--enable-row-hover el-table--enable-row-transition" align="center">
|
|
|
|
<div class="el-table__body-wrapper is-scrolling-none">
|
|
<table class="el-table__body" style="width: 400px;" cellspacing="0" cellpadding="0" border="0">
|
|
<colgroup>
|
|
<col name="el-table_2_column_9" width="200">
|
|
<col name="el-table_2_column_10" width="200">
|
|
</colgroup>
|
|
<tbody>
|
|
<tr class="el-table__row">
|
|
<td class="el-table_2_column_9 is-right ">
|
|
<div class="cell">Order Number :</div>
|
|
</td>
|
|
<td class="el-table_2_column_10 is-left ">
|
|
<div class="cell">{{ booking_details.id }}</div>
|
|
</td>
|
|
</tr>
|
|
<tr class="el-table__row">
|
|
<td class="el-table_2_column_9 is-right ">
|
|
<div class="cell">Date :</div>
|
|
</td>
|
|
<td class="el-table_2_column_10 is-left ">
|
|
<div class="cell">{{ booking_details.created_at }}</div>
|
|
</td>
|
|
</tr>
|
|
<tr class="el-table__row">
|
|
<td class="el-table_2_column_9 is-right ">
|
|
<div class="cell">Customer Marking :</div>
|
|
</td>
|
|
<td class="el-table_2_column_10 is-left ">
|
|
<div class="cell">CIEF/150ECE</div>
|
|
</td>
|
|
</tr>
|
|
<tr class="el-table__row">
|
|
<td class="el-table_2_column_9 is-right ">
|
|
<div class="cell"></div>
|
|
</td>
|
|
<td class="el-table_2_column_10 is-left ">
|
|
<div class="cell"></div>
|
|
</td>
|
|
</tr>
|
|
<tr class="el-table__row">
|
|
<td class="el-table_2_column_9 is-right ">
|
|
<div class="cell">Term :</div>
|
|
</td>
|
|
<td class="el-table_2_column_10 is-left ">
|
|
<div class="cell">{{ booking_details.term }}</div>
|
|
</td>
|
|
</tr>
|
|
<tr class="el-table__row">
|
|
<td class="el-table_2_column_9 is-right ">
|
|
<div class="cell"></div>
|
|
</td>
|
|
<td class="el-table_2_column_10 is-left ">
|
|
<div class="cell"></div>
|
|
</td>
|
|
</tr>
|
|
<!---->
|
|
</tbody>
|
|
</table>
|
|
<!---->
|
|
<!---->
|
|
</div>
|
|
<!---->
|
|
<!---->
|
|
<!---->
|
|
<!---->
|
|
<div class="el-table__column-resize-proxy" style="display: none;"></div>
|
|
</div>
|
|
</div>
|
|
<div class="el-col el-col-12" style="padding-left: 6px; padding-right: 6px;">
|
|
<div class="el-table el-table--fit el-table--enable-row-hover el-table--enable-row-transition" align="center">
|
|
<div class="hidden-columns">
|
|
<div></div>
|
|
<div></div>
|
|
</div>
|
|
<!---->
|
|
<div class="el-table__body-wrapper is-scrolling-none">
|
|
<table class="el-table__body" style="width: 400px;" cellspacing="0" cellpadding="0" border="0">
|
|
<colgroup>
|
|
<col name="el-table_3_column_11" width="200">
|
|
<col name="el-table_3_column_12" width="200">
|
|
</colgroup>
|
|
<tbody>
|
|
<tr class="el-table__row">
|
|
<td class="el-table_3_column_11 is-right ">
|
|
<div class="cell">CNY/RMB :</div>
|
|
</td>
|
|
<td class="el-table_3_column_12 is-left ">
|
|
<div class="cell">CNY {{ booking_details.amount }}</div>
|
|
</td>
|
|
</tr>
|
|
<tr class="el-table__row">
|
|
<td class="el-table_3_column_11 is-right ">
|
|
<div class="cell">+ Service Charge :</div>
|
|
</td>
|
|
<td class="el-table_3_column_12 is-left ">
|
|
<div class="cell">CNY {{ booking_details.service_charge }}</div>
|
|
</td>
|
|
</tr>
|
|
<tr class="el-table__row">
|
|
<td class="el-table_3_column_11 is-right ">
|
|
<div class="cell">/ RATE :</div>
|
|
</td>
|
|
<td class="el-table_3_column_12 is-left ">
|
|
<div class="cell">{{ booking_details.rate }}</div>
|
|
</td>
|
|
</tr>
|
|
<tr class="el-table__row">
|
|
<td class="el-table_3_column_11 is-right ">
|
|
<div class="cell"></div>
|
|
</td>
|
|
<td class="el-table_3_column_12 is-left ">
|
|
<div class="cell">MYR {{ booking_details.bia }}</div>
|
|
</td>
|
|
</tr>
|
|
<!-- <tr class="el-table__row">
|
|
<td class="el-table_3_column_11 is-right ">
|
|
<div class="cell">+ GST 6% :</div>
|
|
</td>
|
|
<td class="el-table_3_column_12 is-left ">
|
|
<div class="cell">MYR 4,430.88</div>
|
|
</td>
|
|
</tr> -->
|
|
<tr class="el-table__row">
|
|
<td class="el-table_3_column_11 is-right ">
|
|
<div class="cell"></div>
|
|
</td>
|
|
<td class="el-table_3_column_12 is-left ">
|
|
<div class="cell">
|
|
<b>MYR {{ booking_details.bia }}</b>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<tr class="el-table__row">
|
|
<td class="el-table_3_column_11 is-right ">
|
|
<div class="cell"></div>
|
|
</td>
|
|
<td class="el-table_3_column_12 is-left ">
|
|
<div class="cell"></div>
|
|
</td>
|
|
</tr>
|
|
<!---->
|
|
</tbody>
|
|
</table>
|
|
<!---->
|
|
<!---->
|
|
</div>
|
|
<!---->
|
|
<!---->
|
|
<!---->
|
|
<!---->
|
|
<div class="el-table__column-resize-proxy" style="display: none;"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- <el-row :gutter="12">
|
|
<el-col :span="12">
|
|
<el-table :data="bookingConfirmTable" :show-header="false" align="center">
|
|
<el-table-column prop="data1" align="right" width="200" />
|
|
<el-table-column prop="data2" align="left" width="200" />
|
|
</el-table>
|
|
</el-col>
|
|
<el-col :span="12">
|
|
<el-table :data="bookingConfirmTable2" :show-header="false" align="center">
|
|
<el-table-column prop="data1" align="right" width="200" />
|
|
<el-table-column prop="data2" align="left" width="200" />
|
|
</el-table>
|
|
</el-col>
|
|
</el-row> -->
|
|
</el-card>
|
|
</el-row>
|
|
<br>
|
|
|
|
<el-row justify="center" align="center">
|
|
<el-card class="box-card">
|
|
<div slot="header" class="clearfix">
|
|
<span>Supplier Report</span>
|
|
<!-- <el-button style="float: right; padding: 3px 0" type="text">Operation button</el-button> -->
|
|
</div>
|
|
<el-row :gutter="12" style="text-align:center">
|
|
<el-col :span="20" style="text-align:center">
|
|
<canvas id="myCanvas" v-insert-message="exampleContent"></canvas>
|
|
</el-col>
|
|
</el-row>
|
|
</el-card>
|
|
<br>
|
|
<el-card class="box-card">
|
|
<div slot="header" class="clearfix">
|
|
<span>User BankinSlip</span>
|
|
<!-- <el-button style="float: right; padding: 3px 0" type="text">Operation button</el-button> -->
|
|
</div>
|
|
<el-row :gutter="12">
|
|
<el-col :span="22" style="text-align:center">
|
|
<img v-bind:src="booking_details.user_bankslip_path" class="image">
|
|
</el-col>
|
|
</el-row>
|
|
</el-card>
|
|
<br>
|
|
<el-card class="box-card">
|
|
<el-row :gutter="12">
|
|
<el-col :span="22" style="text-align:center">
|
|
<el-button :loading="loading_btn" @click="$router.go(-1)" type="primary">Edit</el-button>
|
|
<el-button :loading="loading_btn" @click="completeReport" type="success">Done</el-button>
|
|
</el-col>
|
|
</el-row>
|
|
</el-card>
|
|
</el-row>
|
|
</el-main>
|
|
</template>
|
|
<style>
|
|
.booking-details {
|
|
font-weight: bold;
|
|
}
|
|
</style>
|
|
<script>
|
|
import ProgressTrack from '~/components/AdminProgressTrack'
|
|
import axios from 'axios'
|
|
|
|
export default {
|
|
components: {
|
|
'progress-track': ProgressTrack
|
|
},
|
|
data() {
|
|
return {
|
|
status: 4,
|
|
loading_btn: false,
|
|
booking_details: {
|
|
id: null,
|
|
amount: null,
|
|
bia: null,
|
|
user_bankslip_path: null,
|
|
},
|
|
supplier: null,
|
|
supplier_options: null,
|
|
exampleContent: "This is TEXT"
|
|
|
|
}
|
|
},
|
|
beforeCreate() {
|
|
const loading = this.$loading({
|
|
lock: true,
|
|
text: 'Please wait..',
|
|
spinner: 'el-icon-loading',
|
|
background: 'rgba(0, 0, 0, 0.7)'
|
|
})
|
|
|
|
axios
|
|
.get('/api/admin/booking/' + this.$route.params.id)
|
|
.then((response) => {
|
|
loading.close()
|
|
this.booking_details = response.data
|
|
}).catch((error) => {
|
|
console.log(error)
|
|
loading.close()
|
|
this.$router.push({
|
|
name: 'notfound'
|
|
})
|
|
})
|
|
|
|
|
|
|
|
},
|
|
methods: {
|
|
completeReport() {
|
|
// TODO : send request to change status
|
|
this.loading_btn = true
|
|
axios
|
|
.post('/api/booking/' + this.$route.params.id + '/confirm-supplier')
|
|
.then((response) => {
|
|
this.loading_btn = false
|
|
this.$message({
|
|
showClose: true,
|
|
message: 'Success, please comeback after getting china bankslip',
|
|
type: 'success',
|
|
duration: 5000
|
|
})
|
|
this.$router.push({
|
|
name: 'home'
|
|
})
|
|
//this.booking_details = response.data
|
|
}).catch((error) => {
|
|
this.loading_btn = false
|
|
console.log(error)
|
|
this.$message({
|
|
showClose: true,
|
|
message: 'Suceess',
|
|
type: 'success',
|
|
duration: 5000
|
|
})
|
|
})
|
|
this.$router.push({
|
|
name: 'booking.admin.cnslip',
|
|
params: {
|
|
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];
|
|
|
|
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("Payment Voucher :", column1X, rowHeight[1] - 5);
|
|
ctx.fillText("0323", column3X, rowHeight[1] - 5);
|
|
//// Row 2
|
|
ctx.fillText("Date :", column1X, rowHeight[2] - 5);
|
|
ctx.fillText("4 September 2017", 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("010707", 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("CASH", 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("4830.68", column3X, rowHeight[9] - 5);
|
|
ctx.font = "13px Arial";
|
|
//// Row 8
|
|
ctx.fillText("* RATE :", column1X, rowHeight[10] - 5);
|
|
ctx.fillText("1.550", column3X, rowHeight[10] - 5);
|
|
//// Row 9
|
|
// Empty
|
|
//// Row 10
|
|
ctx.font = "bold 14px Arial";
|
|
ctx.fillText("CNY", column2X, rowHeight[12] - 5);
|
|
ctx.fillText("7467.55", 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("62.46", column3X, rowHeight[15] - 5);
|
|
//// Row 13
|
|
ctx.fillText("+ SALES TAX (10%) :", column1X, rowHeight[16] - 5);
|
|
ctx.fillText("MYR", column2X, rowHeight[16] - 5);
|
|
ctx.fillText("483.07", 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("5676.05", 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, 110, y, img.width * ratio, img.height * ratio);
|
|
to_image();
|
|
};
|
|
|
|
// 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";
|
|
|
|
}
|
|
}
|
|
}
|
|
</script> |