mirror of
https://gitlab.com/omair-personal/exchange.git
synced 2026-08-19 04:24:08 +00:00
Merge branch 'fix/green-report' into 'master'
Fix/green report See merge request CIEFWorldwideSdnBhd/exchange!107
This commit is contained in:
Jack Goh
@@ -1,12 +1,12 @@
|
||||
<template>
|
||||
<el-row>
|
||||
<el-steps :value="(value.term === 'x1_ba' || value.term === 'x2_cheque') && value.status > 2 ? value.status - 2 : value.status" :active="(value.term === 'x1_ba' || value.term === 'x2_cheque') && value.status > 2 ? value.status - 2 : value.status" :align-center="true" process-status="wait" finish-status="success">
|
||||
<el-steps :value="value.status" :active="value.status" :align-center="true" process-status="wait" finish-status="success">
|
||||
<el-step title="Booking"/>
|
||||
<el-step title="Verification"/>
|
||||
<el-step title="Supplier Booking"/>
|
||||
<el-step title="Supplier Report"/>
|
||||
<el-step title="Upload China Bankslip To Booking"/>
|
||||
<el-step v-if="(value.term == 'x1_cash' || value.term == 'x1_cheque' || value.term == 'x1_ba')" title="Purchase Order/Invoice"/>
|
||||
<el-step title="Purchase Order/Invoice"/>
|
||||
<el-step title="Completed"/>
|
||||
</el-steps>
|
||||
</el-row>
|
||||
|
||||
@@ -4,9 +4,9 @@
|
||||
<el-step title="Booking"/>
|
||||
<el-step title="Payment"/>
|
||||
<el-step title="Order Confirmation"/>
|
||||
<el-step v-if="(value.term == 'x1_cash' || value.term == 'x1_cheque' || value.term == 'x1_ba')" title="Processing Transfer"/>
|
||||
<el-step v-if="(value.term == 'x1_cash' || value.term == 'x1_cheque' || value.term == 'x1_ba')" title="Transfer Complete"/>
|
||||
<el-step v-if="(value.term == 'x1_cash' || value.term == 'x1_cheque' || value.term == 'x1_ba')" title="Processing Invoice"/>
|
||||
<el-step title="Processing Transfer"/>
|
||||
<el-step title="Transfer Complete"/>
|
||||
<el-step title="Processing Invoice"/>
|
||||
<el-step title="Order Complete"/>
|
||||
</el-steps>
|
||||
</el-row>
|
||||
|
||||
@@ -0,0 +1,44 @@
|
||||
<template>
|
||||
<el-row>
|
||||
<el-steps :value="value.status" :active="value.status" :align-center="true" process-status="wait" finish-status="success">
|
||||
<el-step title="Booking"/>
|
||||
<el-step title="Verification"/>
|
||||
<el-step title="Supplier Booking"/>
|
||||
<el-step title="Supplier Report"/>
|
||||
<el-step title="Upload China Bankslip To Booking"/>
|
||||
<el-step title="Completed"/>
|
||||
</el-steps>
|
||||
</el-row>
|
||||
</template>
|
||||
|
||||
<style type="text/css">
|
||||
/* .el-row {
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
.el-steps {
|
||||
padding-top: 70px;
|
||||
}
|
||||
|
||||
.el-step .el-step__main {
|
||||
transform: translateY(-70px);
|
||||
}
|
||||
.el-step__title.is-wait {
|
||||
font-size: 10pt;
|
||||
}
|
||||
.el-step__title {
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.el-step .is-success .el-step__line {
|
||||
background-color: #67c23a;
|
||||
} */
|
||||
</style>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: ['value'],
|
||||
data: () => ({
|
||||
})
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,27 @@
|
||||
<template>
|
||||
<el-row>
|
||||
<el-steps class="progressBar" :value="value.status" :active="value.status" :align-center="true" process-status="wait" finish-status="success">
|
||||
<el-step title="Booking"/>
|
||||
<el-step title="Payment"/>
|
||||
<el-step title="Order Confirmation"/>
|
||||
<el-step title="Order Complete"/>
|
||||
</el-steps>
|
||||
</el-row>
|
||||
</template>
|
||||
|
||||
<style type="text/css">
|
||||
@media screen and (max-width: 800px) {
|
||||
.progressBar {
|
||||
width: 60%;
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: ['value'],
|
||||
data: () => ({
|
||||
})
|
||||
}
|
||||
</script>
|
||||
@@ -1,6 +1,7 @@
|
||||
<template>
|
||||
<el-main>
|
||||
<progress-track v-model="trackerConfig" />
|
||||
<x2-progress-track v-if="(booking_details.admin_status == 'x2_cash' || booking_details.admin_status == 'x2_cheque' || booking_details.admin_status == 'x2_ba')" v-model="trackerConfig" />
|
||||
<progress-track v-else v-model="trackerConfig" />
|
||||
|
||||
<div align="center">
|
||||
<h4 style="margin-top:5%;"></h4>
|
||||
@@ -211,11 +212,13 @@
|
||||
</style>
|
||||
<script>
|
||||
import ProgressTrack from '~/components/AdminProgressTrack'
|
||||
import X2ProgressTrack from '~/components/X2AdminProgressTrack'
|
||||
import axios from 'axios'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'progress-track': ProgressTrack
|
||||
'progress-track': ProgressTrack,
|
||||
'x2-progress-track': X2ProgressTrack
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
<template>
|
||||
<el-main>
|
||||
<progress-track v-model="trackerConfig"/>
|
||||
<x2-progress-track v-if="(booking_details.admin_status == 'x2_cash' || booking_details.admin_status == 'x2_cheque' || booking_details.admin_status == 'x2_ba')" v-model="trackerConfig" />
|
||||
<progress-track v-else v-model="trackerConfig" />
|
||||
|
||||
<div align="center">
|
||||
<h4 style="margin-top:5%;">Order Completed</h4>
|
||||
@@ -66,7 +67,7 @@
|
||||
</el-col>
|
||||
</el-row>
|
||||
<br>
|
||||
<!-- bank slips END -->
|
||||
<!-- bank slips END -->
|
||||
|
||||
<el-row justify="center" align="center">
|
||||
<el-card class="box-card">
|
||||
@@ -91,7 +92,7 @@
|
||||
<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>
|
||||
@@ -219,7 +220,9 @@
|
||||
<div class="cell"></div>
|
||||
</td>
|
||||
<td class="el-table_3_column_12 is-left ">
|
||||
<div class="cell"><b>MYR {{ booking_details.bia }}</b></div>
|
||||
<div class="cell">
|
||||
<b>MYR {{ booking_details.bia }}</b>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="el-table__row">
|
||||
@@ -261,7 +264,37 @@
|
||||
</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" ref="myCanvas" v-insert-message="supplier_booking"></canvas>
|
||||
<br>
|
||||
<el-button @click="downloadReport()" type="text">Download Now</el-button>
|
||||
</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">
|
||||
<a target="_blank" :href="getURL(booking_details.user_bankslip_path)">
|
||||
<img v-if="isImage(booking_details.user_bankslip_path)" v-bind:src="booking_details.user_bankslip_path" class="image">
|
||||
<p v-else>Download</p>
|
||||
</a>
|
||||
</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">
|
||||
@@ -284,77 +317,269 @@
|
||||
.booking-details {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.image {
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 4px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
width: 150px;
|
||||
display: block;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 4px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
width: 150px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.image:hover {
|
||||
box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
import VueCountdown from '@dmaksimovic/vue-countdown'
|
||||
import ProgressTrack from '~/components/AdminProgressTrack'
|
||||
import axios from 'axios'
|
||||
import ProgressTrack from '~/components/AdminProgressTrack'
|
||||
import X2ProgressTrack from '~/components/X2AdminProgressTrack'
|
||||
import axios from 'axios'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'progress-track': ProgressTrack
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
trackerConfig :{
|
||||
export default {
|
||||
components: {
|
||||
'progress-track': ProgressTrack,
|
||||
'x2-progress-track': X2ProgressTrack
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
trackerConfig: {
|
||||
status: 8,
|
||||
term: null
|
||||
},
|
||||
loading_btn: false,
|
||||
booking_details:{
|
||||
supplier_booking:{},
|
||||
loading_btn: false,
|
||||
booking_details: {
|
||||
id: null,
|
||||
amount: null,
|
||||
bia: null,
|
||||
user_bankslip_path: null,
|
||||
}
|
||||
}
|
||||
},
|
||||
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) => {
|
||||
this.booking_details = response.data
|
||||
this.trackerConfig.term = response.data.term;
|
||||
loading.close()
|
||||
}).catch((error) => {
|
||||
console.log(error)
|
||||
loading.close()
|
||||
this.$router.push({
|
||||
name: 'notfound'
|
||||
})
|
||||
}
|
||||
},
|
||||
beforeCreate() {
|
||||
const loading = this.$loading({
|
||||
lock: true,
|
||||
text: 'Please wait..',
|
||||
spinner: 'el-icon-loading',
|
||||
background: 'rgba(0, 0, 0, 0.7)'
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
getExtension(path){
|
||||
return path.slice(-3);
|
||||
|
||||
axios
|
||||
.get('/api/admin/booking/' + this.$route.params.id)
|
||||
.then((response) => {
|
||||
this.booking_details = response.data
|
||||
this.trackerConfig.term = response.data.term;
|
||||
loading.close()
|
||||
}).catch((error) => {
|
||||
console.log(error)
|
||||
loading.close()
|
||||
this.$router.push({
|
||||
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()
|
||||
})
|
||||
},
|
||||
isImage(path){
|
||||
var ext = this.getExtension(path);
|
||||
return ext === 'jpg' || ext === 'jpeg' || ext === 'bmp' || ext === 'png';
|
||||
methods: {
|
||||
getExtension(path) {
|
||||
return path.slice(-3);
|
||||
},
|
||||
isImage(path) {
|
||||
var ext = this.getExtension(path);
|
||||
return ext === 'jpg' || ext === 'jpeg' || ext === 'bmp' || ext === 'png';
|
||||
},
|
||||
getURL(path) {
|
||||
var getUrl = window.location;
|
||||
var baseUrl = getUrl.protocol + "//" + getUrl.host;
|
||||
return baseUrl + path;
|
||||
}
|
||||
},
|
||||
getURL(path){
|
||||
var getUrl = window.location;
|
||||
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);
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</script>
|
||||
@@ -1,6 +1,7 @@
|
||||
<template>
|
||||
<el-main>
|
||||
<progress-track v-model="trackerConfig" />
|
||||
<x2-progress-track v-if="(booking_details.admin_status == 'x2_cash' || booking_details.admin_status == 'x2_cheque' || booking_details.admin_status == 'x2_ba')" v-model="trackerConfig" />
|
||||
<progress-track v-else v-model="trackerConfig" />
|
||||
|
||||
<div align="center">
|
||||
<h4 style="margin-top:5%;"></h4>
|
||||
@@ -237,11 +238,13 @@
|
||||
</style>
|
||||
<script>
|
||||
import ProgressTrack from '~/components/AdminProgressTrack'
|
||||
import X2ProgressTrack from '~/components/X2AdminProgressTrack'
|
||||
import axios from 'axios'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'progress-track': ProgressTrack
|
||||
'progress-track': ProgressTrack,
|
||||
'x2-progress-track': X2ProgressTrack
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
<template>
|
||||
<el-main>
|
||||
<progress-track v-model="trackerConfig" />
|
||||
<x2-progress-track v-if="(booking_details.admin_status == 'x2_cash' || booking_details.admin_status == 'x2_cheque' || booking_details.admin_status == 'x2_ba')" v-model="trackerConfig" />
|
||||
<progress-track v-else v-model="trackerConfig" />
|
||||
|
||||
<div align="center">
|
||||
<h4 style="margin-top:5%;"></h4>
|
||||
@@ -252,11 +253,12 @@
|
||||
<script>
|
||||
import ProgressTrack from '~/components/AdminProgressTrack'
|
||||
import axios from 'axios'
|
||||
import Canvas2Image from 'canvas2image'
|
||||
import X2ProgressTrack from '~/components/X2AdminProgressTrack'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'progress-track': ProgressTrack
|
||||
'progress-track': ProgressTrack,
|
||||
'x2-progress-track': X2ProgressTrack
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
||||
@@ -1,6 +1,8 @@
|
||||
<template>
|
||||
<el-main>
|
||||
<progress-track v-model="trackerConfig" />
|
||||
<x2-progress-track v-if="(booking_details.admin_status == 'x2_cash' || booking_details.admin_status == 'x2_cheque' || booking_details.admin_status == 'x2_ba')"
|
||||
v-model="trackerConfig" />
|
||||
<progress-track v-else v-model="trackerConfig" />
|
||||
|
||||
<div align="center">
|
||||
<h4 style="margin-top:5%;"></h4>
|
||||
@@ -9,6 +11,49 @@
|
||||
<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>Upload China Bankslip</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">
|
||||
|
||||
<el-form ref="chinaSlipForm" :model="chinaSlipForm" :rules="rules">
|
||||
<div align="center">
|
||||
|
||||
<!-- upload image -->
|
||||
<el-upload class="upload-demo" :action="'/api/booking/' + booking_id + '/upload-china-bankslip'" :on-preview="handlePreview"
|
||||
:on-error="uploadError" accept=".jpeg, .jpg, .png, .bmp, .doc, .docx, .xls, .xlsx, .pdf" :on-remove="handleRemove"
|
||||
:multiple="false" list-type="picture">
|
||||
<el-button size="small" type="primary">Click to upload</el-button>
|
||||
<div slot="tip" class="el-upload__tip">bmp/jpeg/jpg/png/pdf/xls/xlxs/doc/docx files with a size less than 3MB</div>
|
||||
</el-upload>
|
||||
|
||||
<br>
|
||||
<!-- upload image end -->
|
||||
<!-- <el-form-item prop="date">
|
||||
<el-date-picker v-model="chinaSlipForm.date" type="date" placeholder="Pick a day" :picker-options="pickerOptions1">
|
||||
</el-date-picker>
|
||||
</el-form-item> -->
|
||||
<el-form-item prop="actual_transfer_amount">
|
||||
<el-input v-model.number="chinaSlipForm.actual_transfer_amount" type="text" placeholder="Amount" style="width: 80%" />
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item prop="details">
|
||||
<el-input v-model="chinaSlipForm.details" type="text" placeholder="Details" style="width: 80%" />
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button :loading="loading_btn" type="primary" @click="submitChinaSlip('chinaSlipForm')">Submit</el-button>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</el-form>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-card>
|
||||
</el-row>
|
||||
<br>
|
||||
<el-row justify="center" align="center">
|
||||
<el-card class="box-card">
|
||||
@@ -166,72 +211,40 @@
|
||||
<!---->
|
||||
<!---->
|
||||
</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>
|
||||
|
||||
<br>
|
||||
<el-row justify="center" align="center">
|
||||
<el-card class="box-card">
|
||||
<div slot="header" class="clearfix">
|
||||
<span>Upload China Bankslip</span>
|
||||
<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">
|
||||
|
||||
<el-form ref="chinaSlipForm" :model="chinaSlipForm" :rules="rules">
|
||||
<div align="center">
|
||||
|
||||
<!-- upload image -->
|
||||
<el-upload class="upload-demo" :action="'/api/booking/' + booking_id + '/upload-china-bankslip'"
|
||||
:on-preview="handlePreview"
|
||||
:on-error="uploadError"
|
||||
accept=".jpeg, .jpg, .png, .bmp, .doc, .docx, .xls, .xlsx, .pdf"
|
||||
:on-remove="handleRemove" :multiple="false" list-type="picture">
|
||||
<el-button size="small" type="primary">Click to upload</el-button>
|
||||
<div slot="tip" class="el-upload__tip">bmp/jpeg/jpg/png/pdf/xls/xlxs/doc/docx files with a size less than 3MB</div>
|
||||
</el-upload>
|
||||
|
||||
<br>
|
||||
<!-- upload image end -->
|
||||
<!-- <el-form-item prop="date">
|
||||
<el-date-picker v-model="chinaSlipForm.date" type="date" placeholder="Pick a day" :picker-options="pickerOptions1">
|
||||
</el-date-picker>
|
||||
</el-form-item> -->
|
||||
<el-form-item prop="actual_transfer_amount">
|
||||
<el-input v-model.number="chinaSlipForm.actual_transfer_amount" type="text" placeholder="Amount" style="width: 80%" />
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item prop="details">
|
||||
<el-input v-model="chinaSlipForm.details" type="text" placeholder="Details" style="width: 80%" />
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button :loading="loading_btn" type="primary" @click="submitChinaSlip('chinaSlipForm')">Submit</el-button>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</el-form>
|
||||
<canvas id="myCanvas" ref="myCanvas" v-insert-message="supplier_booking"></canvas>
|
||||
<br>
|
||||
<el-button @click="downloadReport()" type="text">Download Now</el-button>
|
||||
</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">
|
||||
<a target="_blank" :href="getURL(booking_details.user_bankslip_path)">
|
||||
<img v-if="isImage(booking_details.user_bankslip_path)" v-bind:src="booking_details.user_bankslip_path" class="image">
|
||||
<p v-else>Download</p>
|
||||
</a>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-card>
|
||||
@@ -245,15 +258,17 @@
|
||||
</style>
|
||||
<script>
|
||||
import ProgressTrack from '~/components/AdminProgressTrack'
|
||||
import X2ProgressTrack from '~/components/X2AdminProgressTrack'
|
||||
import axios from 'axios'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'progress-track': ProgressTrack
|
||||
'progress-track': ProgressTrack,
|
||||
'x2-progress-track': X2ProgressTrack
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
trackerConfig :{
|
||||
trackerConfig: {
|
||||
status: 5,
|
||||
term: null
|
||||
},
|
||||
@@ -266,6 +281,7 @@
|
||||
user_bankslip_path: null,
|
||||
},
|
||||
supplier: null,
|
||||
supplier_booking: {},
|
||||
supplier_options: null,
|
||||
chinaSlipForm: {
|
||||
actual_transfer_amount: null,
|
||||
@@ -273,9 +289,17 @@
|
||||
details: null,
|
||||
},
|
||||
rules: {
|
||||
actual_transfer_amount: [
|
||||
{ required: true, message: 'Please input amount',trigger: 'change'},
|
||||
{ type: 'number', message: 'Amount must be a number',trigger: 'change'}],
|
||||
actual_transfer_amount: [{
|
||||
required: true,
|
||||
message: 'Please input amount',
|
||||
trigger: 'change'
|
||||
},
|
||||
{
|
||||
type: 'number',
|
||||
message: 'Amount must be a number',
|
||||
trigger: 'change'
|
||||
}
|
||||
],
|
||||
// date: [{
|
||||
// required: true,
|
||||
// message: 'Please input date',
|
||||
@@ -324,7 +348,7 @@
|
||||
|
||||
axios
|
||||
.get('/api/admin/booking/' + this.$route.params.id)
|
||||
.then((response) => {
|
||||
.then((response) => {
|
||||
this.booking_details = response.data
|
||||
this.trackerConfig.term = response.data.term;
|
||||
loading.close()
|
||||
@@ -335,6 +359,18 @@
|
||||
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: {
|
||||
submitChinaSlip(formName) {
|
||||
@@ -348,7 +384,7 @@
|
||||
details: this.chinaSlipForm.details,
|
||||
}
|
||||
|
||||
axios.patch('/api/booking/' + this.booking_id +'/update-china-bankslip', newChinaSlip)
|
||||
axios.patch('/api/booking/' + this.booking_id + '/update-china-bankslip', newChinaSlip)
|
||||
.then((response) => {
|
||||
this.$message({
|
||||
showClose: true,
|
||||
@@ -374,11 +410,11 @@
|
||||
} else {
|
||||
this.loading_btn = false
|
||||
this.$message({
|
||||
showClose: true,
|
||||
message: 'Please upload your bankin slip first.',
|
||||
type: 'warning',
|
||||
duration: 10000
|
||||
})
|
||||
showClose: true,
|
||||
message: 'Please upload your bankin slip first.',
|
||||
type: 'warning',
|
||||
duration: 10000
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
@@ -388,8 +424,197 @@
|
||||
handlePreview(file) {
|
||||
console.log(file);
|
||||
},
|
||||
uploadError(file,fileList){
|
||||
uploadError(file, fileList) {
|
||||
this.$message.warning(`Incorrect file format or file size too big.`)
|
||||
},
|
||||
getExtension(path){
|
||||
return path.slice(-3);
|
||||
},
|
||||
isImage(path){
|
||||
var ext = this.getExtension(path);
|
||||
return ext === 'jpg' || ext === 'jpeg' || ext === 'bmp' || ext === 'png';
|
||||
},
|
||||
getURL(path){
|
||||
var getUrl = window.location;
|
||||
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);
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
<template>
|
||||
<el-main>
|
||||
<progress-track v-model="trackerConfig" />
|
||||
<x2-progress-track v-if="(booking_details.admin_status == 'x2_cash' || booking_details.admin_status == 'x2_cheque' || booking_details.admin_status == 'x2_ba')" v-model="trackerConfig" />
|
||||
<progress-track v-else v-model="trackerConfig" />
|
||||
|
||||
<div align="center">
|
||||
<h4 style="margin-top:5%;"></h4>
|
||||
@@ -16,6 +17,56 @@
|
||||
<br>
|
||||
<!-- <el-button type="primary" @click="$router.go(-1)">Go Back</el-button> -->
|
||||
</div>
|
||||
<br>
|
||||
<el-row v-if="booking_details.user_po_path" :gutter="12" justify="center" align="center">
|
||||
<el-col :span="12">
|
||||
<el-card class="box-card">
|
||||
<div slot="header" class="clearfix">
|
||||
<span>Upload Invoice</span>
|
||||
<!-- <el-button style="float: right; padding: 3px 0" type="text">Operation button</el-button> -->
|
||||
</div>
|
||||
|
||||
<!-- upload image -->
|
||||
<el-upload :action="'/api/booking/' + booking_id + '/upload-invoice'" :on-exceed="handleExceed" :on-preview="handlePreview"
|
||||
:on-remove="handleRemove"
|
||||
:on-error="uploadError"
|
||||
accept=".jpeg, .jpg, .png, .bmp, .doc, .docx, .xls, .xlsx, .pdf"
|
||||
class="upload-demo"
|
||||
drag
|
||||
multiple>
|
||||
<i class="el-icon-upload"/>
|
||||
<div class="el-upload__text">Drop file here or
|
||||
<em>click to upload</em>
|
||||
</div>
|
||||
<div slot="tip" class="el-upload__tip">bmp/jpeg/jpg/png/pdf/xls/xlxs/doc/docx files with a size less than 3mb</div>
|
||||
</el-upload>
|
||||
|
||||
<br>
|
||||
|
||||
<div class="bottom clearfix" style="text-align:right;">
|
||||
<el-button :loading="loading_btn" type="primary" @click="confirmInvoice">Submit</el-button>
|
||||
</div>
|
||||
<!-- upload image end -->
|
||||
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-card class="box-card">
|
||||
<div slot="header" class="clearfix">
|
||||
<span>Customer Purchase Order</span>
|
||||
<!-- <el-button style="float: right; padding: 3px 0" type="text">Operation button</el-button> -->
|
||||
</div>
|
||||
<el-row :gutter="12" type="flex">
|
||||
<el-col :span="12" align="center">
|
||||
<a target="_blank" :href="getURL(booking_details.user_po_path)">
|
||||
<img v-if="isImage(booking_details.user_po_path)" v-bind:src="booking_details.user_po_path" class="image">
|
||||
<p v-else>Download</p>
|
||||
</a>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<br>
|
||||
<el-row justify="center" align="center">
|
||||
<el-card class="box-card">
|
||||
@@ -88,10 +139,6 @@
|
||||
<!---->
|
||||
<!---->
|
||||
</div>
|
||||
<!---->
|
||||
<!---->
|
||||
<!---->
|
||||
<!---->
|
||||
<div class="el-table__column-resize-proxy" style="display: none;"></div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -181,55 +228,38 @@
|
||||
</el-row>
|
||||
<br>
|
||||
|
||||
<el-row v-if="booking_details.user_po_path" :gutter="12" justify="center" align="center">
|
||||
<el-col :span="12">
|
||||
<el-card class="box-card">
|
||||
<div slot="header" class="clearfix">
|
||||
<span>Upload Invoice</span>
|
||||
<!-- <el-button style="float: right; padding: 3px 0" type="text">Operation button</el-button> -->
|
||||
</div>
|
||||
|
||||
<!-- upload image -->
|
||||
<el-upload :action="'/api/booking/' + booking_id + '/upload-invoice'" :on-exceed="handleExceed" :on-preview="handlePreview"
|
||||
:on-remove="handleRemove"
|
||||
:on-error="uploadError"
|
||||
accept=".jpeg, .jpg, .png, .bmp, .doc, .docx, .xls, .xlsx, .pdf"
|
||||
class="upload-demo"
|
||||
drag
|
||||
multiple>
|
||||
<i class="el-icon-upload"/>
|
||||
<div class="el-upload__text">Drop file here or
|
||||
<em>click to upload</em>
|
||||
</div>
|
||||
<div slot="tip" class="el-upload__tip">bmp/jpeg/jpg/png/pdf/xls/xlxs/doc/docx files with a size less than 3mb</div>
|
||||
</el-upload>
|
||||
|
||||
<br>
|
||||
|
||||
<div class="bottom clearfix" style="text-align:right;">
|
||||
<el-button :loading="loading_btn" type="primary" @click="confirmInvoice">Submit</el-button>
|
||||
</div>
|
||||
<!-- upload image end -->
|
||||
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-card class="box-card">
|
||||
<div slot="header" class="clearfix">
|
||||
<span>Customer Purchase Order</span>
|
||||
<!-- <el-button style="float: right; padding: 3px 0" type="text">Operation button</el-button> -->
|
||||
</div>
|
||||
<el-row :gutter="12" type="flex">
|
||||
<el-col :span="12" align="center">
|
||||
<a target="_blank" :href="getURL(booking_details.user_po_path)">
|
||||
<img v-if="isImage(booking_details.user_po_path)" v-bind:src="booking_details.user_po_path" class="image">
|
||||
<p v-else>Download</p>
|
||||
</a>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<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" ref="myCanvas" v-insert-message="supplier_booking"></canvas>
|
||||
<br>
|
||||
<el-button @click="downloadReport()" type="text">Download Now</el-button>
|
||||
</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">
|
||||
<a target="_blank" :href="getURL(booking_details.user_bankslip_path)">
|
||||
<img v-if="isImage(booking_details.user_bankslip_path)" v-bind:src="booking_details.user_bankslip_path" class="image">
|
||||
<p v-else>Download</p>
|
||||
</a>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-card>
|
||||
<br>
|
||||
</el-row>
|
||||
<br>
|
||||
</el-main>
|
||||
</template>
|
||||
<style>
|
||||
@@ -250,16 +280,18 @@
|
||||
</style>
|
||||
<script>
|
||||
import ProgressTrack from '~/components/AdminProgressTrack'
|
||||
import X2ProgressTrack from '~/components/X2AdminProgressTrack'
|
||||
import axios from 'axios'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'progress-track': ProgressTrack
|
||||
'progress-track': ProgressTrack,
|
||||
'x2-progress-track': X2ProgressTrack
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
trackerConfig :{
|
||||
status: 6,
|
||||
status: null,
|
||||
term: null
|
||||
},
|
||||
loading_btn: false,
|
||||
@@ -272,6 +304,7 @@
|
||||
},
|
||||
supplier: null,
|
||||
supplier_options: null,
|
||||
supplier_booking : {},
|
||||
chinaSlipForm: {
|
||||
actual_transfer_amount: null,
|
||||
date: null,
|
||||
@@ -334,7 +367,8 @@
|
||||
.then((response) => {
|
||||
loading.close()
|
||||
this.booking_details = response.data
|
||||
this.trackerConfig.term = response.data.term;
|
||||
this.trackerConfig.term = response.data.term
|
||||
this.trackerConfig.status = response.data.admin_status
|
||||
}).catch((error) => {
|
||||
console.log(error)
|
||||
loading.close()
|
||||
@@ -342,6 +376,18 @@
|
||||
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: {
|
||||
confirmInvoice () {
|
||||
@@ -383,6 +429,7 @@
|
||||
uploadError(file,fileList){
|
||||
this.$message.warning(`Incorrect file format or file size too big.`)
|
||||
},
|
||||
// TODO : refactor into library since many pages are using this
|
||||
getExtension(path){
|
||||
return path.slice(-3);
|
||||
},
|
||||
@@ -394,6 +441,182 @@
|
||||
var getUrl = window.location;
|
||||
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);
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
<template>
|
||||
<el-main>
|
||||
<progress-track v-model="trackerConfig" />
|
||||
<x2-progress-track v-if="(booking_details.admin_status == 'x2_cash' || booking_details.admin_status == 'x2_cheque' || booking_details.admin_status == 'x2_ba')" v-model="trackerConfig" />
|
||||
<progress-track v-else v-model="trackerConfig" />
|
||||
|
||||
<div align="center">
|
||||
<h4 style="margin-top:5%;"></h4>
|
||||
@@ -256,11 +257,13 @@
|
||||
</style>
|
||||
<script>
|
||||
import ProgressTrack from '~/components/AdminProgressTrack'
|
||||
import X2ProgressTrack from '~/components/X2AdminProgressTrack'
|
||||
import axios from 'axios'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'progress-track': ProgressTrack
|
||||
'progress-track': ProgressTrack,
|
||||
'x2-progress-track': X2ProgressTrack
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
<template>
|
||||
<el-main>
|
||||
<progress-track v-model="trackerConfig"/>
|
||||
<x2-progress-track v-if="(booking_details.admin_status == 'x2_cash' || booking_details.admin_status == 'x2_cheque' || booking_details.admin_status == 'x2_ba')" v-model="trackerConfig" />
|
||||
<progress-track v-else v-model="trackerConfig" />
|
||||
|
||||
<div align="center">
|
||||
<h4 style="margin-top:5%;">Order Completed</h4>
|
||||
@@ -227,6 +228,37 @@
|
||||
</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" ref="myCanvas" v-insert-message="supplier_booking"></canvas>
|
||||
<br>
|
||||
<el-button @click="downloadReport()" type="text">Download Now</el-button>
|
||||
</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">
|
||||
<a target="_blank" :href="getURL(booking_details.user_bankslip_path)">
|
||||
<img v-if="isImage(booking_details.user_bankslip_path)" v-bind:src="booking_details.user_bankslip_path" class="image">
|
||||
<p v-else>Download</p>
|
||||
</a>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-card>
|
||||
</el-row>
|
||||
<br>
|
||||
|
||||
<el-row justify="center" align="center">
|
||||
@@ -264,13 +296,14 @@
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
import VueCountdown from '@dmaksimovic/vue-countdown'
|
||||
import ProgressTrack from '~/components/AdminProgressTrack'
|
||||
import axios from 'axios'
|
||||
import ProgressTrack from '~/components/AdminProgressTrack'
|
||||
import X2ProgressTrack from '~/components/X2AdminProgressTrack'
|
||||
import axios from 'axios'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'progress-track': ProgressTrack
|
||||
export default {
|
||||
components: {
|
||||
'progress-track': ProgressTrack,
|
||||
'x2-progress-track': X2ProgressTrack
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
@@ -278,6 +311,7 @@ export default {
|
||||
status: 8,
|
||||
term: null
|
||||
},
|
||||
supplier_booking: {},
|
||||
loading_btn: false,
|
||||
booking_details:{
|
||||
id: null,
|
||||
@@ -308,6 +342,17 @@ export default {
|
||||
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){
|
||||
@@ -322,6 +367,183 @@ export default {
|
||||
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);
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
<template>
|
||||
<el-main>
|
||||
<progress-track v-model="tackerConfig"/>
|
||||
<x2-progress-track v-if="(booking_details.status == 'x2_cash' || booking_details.status == 'x2_cheque' || booking_details.status == 'x2_ba')" v-model="trackerConfig" />
|
||||
<progress-track v-else v-model="trackerConfig" />
|
||||
<h1>Order Completed</h1>
|
||||
<div class="goBackButton">
|
||||
<el-button type="primary" @click="$router.go(-1)">Go Back</el-button>
|
||||
@@ -148,13 +149,14 @@
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
import VueCountdown from '@dmaksimovic/vue-countdown'
|
||||
import ProgressTrack from '~/components/ProgressTrack'
|
||||
import X2ProgressTrack from '~/components/X2ProgressTrack'
|
||||
import axios from 'axios'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'progress-track': ProgressTrack
|
||||
'progress-track': ProgressTrack,
|
||||
'x2-progress-track': X2ProgressTrack
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
<template>
|
||||
<el-main>
|
||||
<progress-track v-model="trackerConfig"/>
|
||||
<x2-progress-track v-if="(booking_details.status == 'x2_cash' || booking_details.status == 'x2_cheque' || booking_details.status == 'x2_ba')" v-model="trackerConfig" />
|
||||
<progress-track v-else v-model="trackerConfig" />
|
||||
<h1>Bankin Slip Verification in Progress</h1>
|
||||
<div class="goBackButton">
|
||||
<el-button type="primary" @click="$router.go(-1)">Go Back</el-button>
|
||||
@@ -102,13 +103,14 @@
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
import VueCountdown from '@dmaksimovic/vue-countdown'
|
||||
import ProgressTrack from '~/components/ProgressTrack'
|
||||
import X2ProgressTrack from '~/components/X2ProgressTrack'
|
||||
import axios from 'axios'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'progress-track': ProgressTrack
|
||||
'progress-track': ProgressTrack,
|
||||
'x2-progress-track': X2ProgressTrack
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
<template>
|
||||
<el-main>
|
||||
<progress-track v-model="status"/>
|
||||
<x2-progress-track v-if="(booking_details.status == 'x2_cash' || booking_details.status == 'x2_cheque' || booking_details.status == 'x2_ba')" v-model="trackerConfig" />
|
||||
<progress-track v-else v-model="trackerConfig" />
|
||||
<h1>Processing Invoice</h1>
|
||||
<div class="goBackButton">
|
||||
<el-button type="primary" @click="$router.go(-1)">Go Back</el-button>
|
||||
@@ -144,13 +145,14 @@
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
import VueCountdown from '@dmaksimovic/vue-countdown'
|
||||
import ProgressTrack from '~/components/ProgressTrack'
|
||||
import X2ProgressTrack from '~/components/X2ProgressTrack'
|
||||
import axios from 'axios'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'progress-track': ProgressTrack
|
||||
'progress-track': ProgressTrack,
|
||||
'x2-progress-track': X2ProgressTrack
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<el-main>
|
||||
<progress-track v-model="trackerConfig"/>
|
||||
|
||||
<x2-progress-track v-if="(booking_details.status == 'x2_cash' || booking_details.status == 'x2_cheque' || booking_details.status == 'x2_ba')" v-model="trackerConfig" />
|
||||
<progress-track v-else v-model="trackerConfig" />
|
||||
<div align="center">
|
||||
<h4 style="margin-top:5%;">Processing Invoice</h4>
|
||||
<br>
|
||||
@@ -131,13 +131,14 @@
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
import VueCountdown from '@dmaksimovic/vue-countdown'
|
||||
import ProgressTrack from '~/components/ProgressTrack'
|
||||
import X2ProgressTrack from '~/components/X2ProgressTrack'
|
||||
import axios from 'axios'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'progress-track': ProgressTrack
|
||||
'progress-track': ProgressTrack,
|
||||
'x2-progress-track': X2ProgressTrack
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
<template>
|
||||
<el-main>
|
||||
<progress-track v-model="trackerConfig"/>
|
||||
<x2-progress-track v-if="(booking_details.status == 'x2_cash' || booking_details.status == 'x2_cheque' || booking_details.status == 'x2_ba')" v-model="trackerConfig" />
|
||||
<progress-track v-else v-model="trackerConfig" />
|
||||
<h1>Bankin Slip Approved</h1>
|
||||
<h2>Transfer In Progress</h2>
|
||||
<div class="goBackButton">
|
||||
@@ -123,13 +124,14 @@
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
import VueCountdown from '@dmaksimovic/vue-countdown'
|
||||
import ProgressTrack from '~/components/ProgressTrack'
|
||||
import X2ProgressTrack from '~/components/X2ProgressTrack'
|
||||
import axios from 'axios'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'progress-track': ProgressTrack
|
||||
'progress-track': ProgressTrack,
|
||||
'x2-progress-track': X2ProgressTrack
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
<template>
|
||||
<el-main>
|
||||
<progress-track v-model="trackerConfig" />
|
||||
<x2-progress-track v-if="(booking_details.status == 'x2_cash' || booking_details.status == 'x2_cheque' || booking_details.status == 'x2_ba')" v-model="trackerConfig" />
|
||||
<progress-track v-else v-model="trackerConfig" />
|
||||
<h1>Transfer Completed</h1>
|
||||
<h2> Please upload your purchase order </h2>
|
||||
<!-- upload card -->
|
||||
@@ -183,14 +184,15 @@
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
import VueCountdown from '@dmaksimovic/vue-countdown'
|
||||
import ProgressTrack from '~/components/ProgressTrack'
|
||||
import axios from 'axios'
|
||||
import ProgressTrack from '~/components/ProgressTrack'
|
||||
import X2ProgressTrack from '~/components/X2ProgressTrack'
|
||||
import axios from 'axios'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'progress-track': ProgressTrack
|
||||
},
|
||||
export default {
|
||||
components: {
|
||||
'progress-track': ProgressTrack,
|
||||
'x2-progress-track': X2ProgressTrack
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
booking_id: this.$route.params.id,
|
||||
|
||||
@@ -1,6 +1,8 @@
|
||||
<template>
|
||||
<el-main>
|
||||
<progress-track v-model="trackerConfig" />
|
||||
<x2-progress-track v-if="(booking_details.status == 'x2_cash' || booking_details.status == 'x2_cheque' || booking_details.status == 'x2_ba')"
|
||||
v-model="trackerConfig" />
|
||||
<progress-track v-else v-model="trackerConfig" />
|
||||
<div align="center" v-if="booking.user_bankslip_path">
|
||||
<h4 style="margin-top:5%">
|
||||
Your Bankslip Has Been Rejected, Please Reupload Your Bankslip
|
||||
@@ -152,6 +154,7 @@
|
||||
<script>
|
||||
import VueCountdown from '@xkeshi/vue-countdown'
|
||||
import ProgressTrack from '~/components/ProgressTrack'
|
||||
import X2ProgressTrack from '~/components/X2ProgressTrack'
|
||||
import axios from 'axios'
|
||||
|
||||
export default {
|
||||
@@ -159,7 +162,8 @@
|
||||
name: 'MyComponent',
|
||||
components: {
|
||||
'vue-countdown': VueCountdown,
|
||||
'progress-track': ProgressTrack
|
||||
'progress-track': ProgressTrack,
|
||||
'x2-progress-track': X2ProgressTrack
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
||||
@@ -1,6 +1,8 @@
|
||||
<template>
|
||||
<el-main>
|
||||
<progress-track v-model="tackerConfig"/>
|
||||
<x2-progress-track v-if="(booking_details.status == 'x2_cash' || booking_details.status == 'x2_cheque' || booking_details.status == 'x2_ba')"
|
||||
v-model="trackerConfig" />
|
||||
<progress-track v-else v-model="trackerConfig" />
|
||||
<h1>Order Completed</h1>
|
||||
<div class="goBackButton">
|
||||
<el-button type="primary" @click="$router.go(-1)">Go Back</el-button>
|
||||
@@ -11,7 +13,7 @@
|
||||
<div class="card">
|
||||
<div class="card-header">China Bank Slip</div>
|
||||
<div class="row">
|
||||
<div v-for="cn_bankslip in booking_details.china_bankslip_path" :key='cn_bankslip'>
|
||||
<div v-for="cn_bankslip in booking_details.china_bankslip_path" :key='cn_bankslip'>
|
||||
<a target="_blank" :href="getURL(cn_bankslip)">
|
||||
<img v-if="isImage(cn_bankslip)" v-bind:src="cn_bankslip" class="image">
|
||||
<p v-else>Download</p>
|
||||
@@ -24,8 +26,8 @@
|
||||
</div>
|
||||
<!-- order details -->
|
||||
<div class="card">
|
||||
<div class="card-header">Order Details</div>
|
||||
<div class="card-body">
|
||||
<div class="card-header">Order Details</div>
|
||||
<div class="card-body">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<table class="table table-striped">
|
||||
@@ -36,11 +38,11 @@
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Date :</td>
|
||||
<td>{{ booking_details.created_at }}</td>
|
||||
<td>{{ booking_details.created_at }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Customer Marking :</td>
|
||||
<td>{{ booking_details.marking }}</td>
|
||||
<td>{{ booking_details.marking }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Term: </td>
|
||||
@@ -58,15 +60,17 @@
|
||||
</tr>
|
||||
<tr>
|
||||
<td>+ Service Charge :</td>
|
||||
<td>CNY {{ booking_details.service_charge }}</td>
|
||||
<td>CNY {{ booking_details.service_charge }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>RATE :</td>
|
||||
<td>{{ booking_details.rate }}</td>
|
||||
<td>{{ booking_details.rate }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td><b>MYR {{ booking_details.bia }}</b></td>
|
||||
<td>
|
||||
<b>MYR {{ booking_details.bia }}</b>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
@@ -81,7 +85,7 @@
|
||||
<a target="_blank" :href="getURL(booking_details.user_bankslip_path)">
|
||||
<img v-if="isImage(booking_details.user_bankslip_path)" v-bind:src="booking_details.user_bankslip_path" class="image">
|
||||
<p v-else>Download</p>
|
||||
</a>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -89,98 +93,104 @@
|
||||
</template>
|
||||
<style>
|
||||
h1 {
|
||||
margin-top:5%;
|
||||
font-size:3vw;
|
||||
text-align:center;
|
||||
margin-bottom:3%;
|
||||
margin-top: 5%;
|
||||
font-size: 3vw;
|
||||
text-align: center;
|
||||
margin-bottom: 3%;
|
||||
}
|
||||
|
||||
.goBackButton {
|
||||
text-align:center;
|
||||
margin-bottom:3%;
|
||||
text-align: center;
|
||||
margin-bottom: 3%;
|
||||
}
|
||||
|
||||
.uploadedImage {
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 4px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
width: 150px;
|
||||
display: block;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 4px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
width: 150px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.uploadedImage:hover {
|
||||
box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);
|
||||
}
|
||||
|
||||
.card {
|
||||
margin-bottom: 3%;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 767px) {
|
||||
.table {
|
||||
font-size: 3.5vmin;
|
||||
}
|
||||
h1 {
|
||||
.table {
|
||||
font-size: 3.5vmin;
|
||||
}
|
||||
h1 {
|
||||
font-size: 1em;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
import VueCountdown from '@dmaksimovic/vue-countdown'
|
||||
import ProgressTrack from '~/components/ProgressTrack'
|
||||
import axios from 'axios'
|
||||
import ProgressTrack from '~/components/ProgressTrack'
|
||||
import X2ProgressTrack from '~/components/X2ProgressTrack'
|
||||
import axios from 'axios'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'progress-track': ProgressTrack
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
trackerConfig :{
|
||||
export default {
|
||||
components: {
|
||||
'progress-track': ProgressTrack,
|
||||
'x2-progress-track': X2ProgressTrack
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
trackerConfig: {
|
||||
status: 7,
|
||||
term: null,
|
||||
},
|
||||
loading_btn: false,
|
||||
booking_details:{
|
||||
},
|
||||
loading_btn: false,
|
||||
booking_details: {
|
||||
id: null,
|
||||
amount: null,
|
||||
bia: null,
|
||||
user_bankslip_path: null,
|
||||
}
|
||||
}
|
||||
},
|
||||
beforeCreate () {
|
||||
const loading = this.$loading({
|
||||
lock: true,
|
||||
text: 'Please wait..',
|
||||
spinner: 'el-icon-loading',
|
||||
background: 'rgba(0, 0, 0, 0.7)'
|
||||
})
|
||||
|
||||
axios
|
||||
.get('/api/booking/' + this.$route.params.id)
|
||||
.then((response) => {
|
||||
this.booking_details = response.data
|
||||
this.trackerConfig.term = response.data.term
|
||||
loading.close();
|
||||
|
||||
}).catch((error) => {
|
||||
console.log(error)
|
||||
loading.close()
|
||||
this.$router.push({
|
||||
name: 'notfound'
|
||||
})
|
||||
}
|
||||
},
|
||||
beforeCreate() {
|
||||
const loading = this.$loading({
|
||||
lock: true,
|
||||
text: 'Please wait..',
|
||||
spinner: 'el-icon-loading',
|
||||
background: 'rgba(0, 0, 0, 0.7)'
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
getExtension(path){
|
||||
return path.slice(-3);
|
||||
|
||||
axios
|
||||
.get('/api/booking/' + this.$route.params.id)
|
||||
.then((response) => {
|
||||
this.booking_details = response.data
|
||||
this.trackerConfig.term = response.data.term
|
||||
loading.close();
|
||||
|
||||
}).catch((error) => {
|
||||
console.log(error)
|
||||
loading.close()
|
||||
this.$router.push({
|
||||
name: 'notfound'
|
||||
})
|
||||
})
|
||||
},
|
||||
isImage(path){
|
||||
var ext = this.getExtension(path);
|
||||
return ext === 'jpg' || ext === 'jpeg' || ext === 'bmp' || ext === 'png';
|
||||
},
|
||||
getURL(path){
|
||||
var getUrl = window.location;
|
||||
var baseUrl = getUrl.protocol + "//" + getUrl.host;
|
||||
return baseUrl + path;
|
||||
methods: {
|
||||
getExtension(path) {
|
||||
return path.slice(-3);
|
||||
},
|
||||
isImage(path) {
|
||||
var ext = this.getExtension(path);
|
||||
return ext === 'jpg' || ext === 'jpeg' || ext === 'bmp' || ext === 'png';
|
||||
},
|
||||
getURL(path) {
|
||||
var getUrl = window.location;
|
||||
var baseUrl = getUrl.protocol + "//" + getUrl.host;
|
||||
return baseUrl + path;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</script>
|
||||
Reference in New Issue
Block a user