omair/exchange
1
0
Fork 0
mirror of https://gitlab.com/omair-personal/exchange.git synced 2026-08-19 04:24:08 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix/mergeConflicts

Browse Source
This commit is contained in:
lonetrinity
2018-08-11 10:30:16 +08:00
parent 98db669a64 6442a58746
commit 326ef7dd5f
48 changed files with 1986 additions and 341 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.gitlab-ci.yml
+1 -1
View File
@@ -27,7 +27,7 @@ staging:
- chmod 400 ~/.ssh/id_rsa
- '[[ -f /.dockerenv ]] && echo -e "Host *\n\tStrictHostKeyChecking no\n\n" > ~/.ssh/config'
script:
- ssh izyim@40.76.84.105 "cd exchange && git add . && git commit -am "merge staging" && git pull origin master && sudo docker-compose -f docker-prod.yml build && sudo docker-compose -f docker-prod.yml up -d"
- ssh izyim@40.76.84.105 "cd exchange && git pull origin master && sudo docker-compose -f docker-prod.yml build && sudo docker-compose -f docker-prod.yml up -d"
environment:
name: staging
url: https://exchange-staging.izyim.com/
CHANGELOG.md
+7
View File
@@ -1,4 +1,11 @@
# Changelog
## 1.0.1-alpha - 2018-08-09
- Fixed X2 milestone, now completed at step 5
- Fixed X2 no billing charge
- Fixed forgot password bug
- Updated customer registration marking with auto capital feature
- Updated admin marking setting with auto capital feature
- Added green report info for every page after supplier booking page
## 1.0.0-alpha - 2018-08-02
- Release 1.0.0
Dockerfile
-1
View File
@@ -22,7 +22,6 @@ RUN php artisan clear-compiled
COPY wait.sh /usr/local/bin/wait.sh
RUN chmod +x /usr/local/bin/wait.sh
RUN php artisan storage:link
CMD /usr/local/bin/wait.sh && composer update --no-scripts && composer dumpautoload && php artisan migrate && php artisan serve --host=0.0.0.0 --port=8000
EXPOSE 8000
app/Http/Controllers/Auth/ForgotPasswordController.php
+9 -2
View File
@@ -26,9 +26,16 @@ class ForgotPasswordController extends Controller
* @param string $response
* @return \Illuminate\Http\RedirectResponse
*/
protected function sendResetLinkEmail($response)
protected function sendResetLink(Request $request)
{
return ['status' => trans($response)];
if($request->input('email')) {
$this->sendResetLinkEmail($request);
}
return response()->json([
'error' => false,
'status' => 'We have sent reset password link to '. $request->input('email')
]);
}
/**
app/Http/Controllers/BookingController.php
+20 -13
View File
@@ -107,6 +107,12 @@ class BookingController extends Controller
$booking->transfer_amount = $booking->bia;
$booking->track_status = "(". $booking->status ."/7)";
// all x2 until step 5 only
if ($booking->term == "x2_cash" || $booking->term == "x2_cheque" || $booking->term == "x2_ba") {
$booking->track_status = "(". $booking->status ."/5)";
}
switch ($booking->status) {
case 1:
$status_desc = "Order in progress";
@@ -122,6 +128,9 @@ class BookingController extends Controller
break;
case 5:
$status_desc = "Transfer Complete, please upload your PO";
if ($booking->term == "x2_cash" || $booking->term == "x2_cheque" || $booking->term == "x2_ba"){
$status_desc = "Order Completed";
}
break;
case 6:
$status_desc = "Processing invoice";
@@ -163,9 +172,8 @@ class BookingController extends Controller
$booking->transfer_amount = $booking->bia;
$term = $booking->term;
if($term == "x1_ba" || $term == "x2_cheque"){
$status = $booking->admin_status > 2 ? $booking->admin_status - 2 : $booking->admin_status;
$booking->track_status = "(". $status ."/5)";
if ($booking->term == "x2_cash" || $booking->term == "x2_cheque" || $booking->term == "x2_ba"){
$booking->track_status = "(". $booking->admin_status ."/6)";
}
else{
$booking->track_status = "(". $booking->admin_status ."/7)";
@@ -179,20 +187,19 @@ class BookingController extends Controller
$status_desc = "Verify user bank slip";
break;
case 3:
if($term !== "x1_ba" || $term !== "x2_cheque"){
$status_desc = "Generate supplier booking report";
break;
}
$status_desc = "Generate supplier booking report";
break;
case 4:
if($term !== "x1_ba" || $term !== "x2_cheque"){
$status_desc = "Supplier booking report. Please confirm with your booking.";
break;
}
$status_desc = "Supplier booking report. Please confirm with your booking.";
break;
case 5:
$status_desc = "Please, upload China Bankslip";
break;
case 6:
$status_desc = "Waiting customer to upload purchase order";
case 6:
$status_desc = "Waiting customer to upload purchase order";
if ($booking->term == "x2_cash" || $booking->term == "x2_cheque" || $booking->term == "x2_ba"){
$status_desc = "Order Completed";
}
break;
case 7:
$status_desc = "Customer has uploaded purchase order, please upload invoice";
app/Http/Controllers/ChinaBankSlipController.php
+1
View File
@@ -56,6 +56,7 @@ class ChinaBankSlipController extends Controller
}
$china_bankslip = new ChinaBankSlip;
$china_bankslip->bank_branch = '-';
$china_bankslip->booking_id = $booking->id;
$china_bankslip->china_bank_slip_path = $upload_path;
$china_bankslip->save();
database/migrations/2018_08_02_141753_make_nullable_in_china_bank_slips_table.php
-1
View File
@@ -20,7 +20,6 @@ class MakeNullableInChinaBankSlipsTable extends Migration
$table->string('bank_address')->nullable()->change();
$table->string('swift')->nullable()->change();
$table->string('cnap')->nullable()->change();
$table->string('bank_branch')->nullable()->change();
$table->string('order_id')->nullable()->change();
$table->decimal('transfer_amount_needed')->nullable()->change();
$table->decimal('actual_transfer_amount')->nullable()->change();
database/migrations/2018_08_08_103115_make_nullable_in_bookings_table.php
+37
View File
@@ -0,0 +1,37 @@
<?php
use Illuminate\Support\Facades\Schema;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;
class MakeNullableInBookingsTable extends Migration
{
/**
* Run the migrations.
*
* @return void
*/
public function up()
{
Schema::table('bookings', function (Blueprint $table) {
$table->string('company_name')->nullable()->change();
$table->string('company_address')->nullable()->change();
$table->string('bank_address')->nullable()->change();
$table->string('swift_code')->nullable()->change();
$table->string('cnap')->nullable()->change();
$table->string('term')->nullable()->change();
});
}
/**
* Reverse the migrations.
*
* @return void
*/
public function down()
{
Schema::table('bookings', function (Blueprint $table) {
//
});
}
}
database/migrations/2018_08_08_104726_make_nullable_in_supplier_bookings_table.php
+33
View File
@@ -0,0 +1,33 @@
<?php
use Illuminate\Support\Facades\Schema;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;
class MakeNullableInSupplierBookingsTable extends Migration
{
/**
* Run the migrations.
*
* @return void
*/
public function up()
{
Schema::table('supplier_bookings', function (Blueprint $table) {
$table->decimal('transfer_amount')->nullable()->change();
$table->decimal('rmbBankAmount')->nullable()->change();
});
}
/**
* Reverse the migrations.
*
* @return void
*/
public function down()
{
Schema::table('supplier_bookings', function (Blueprint $table) {
//
});
}
}
database/seeds/BookTableSeeder.php
+1 -1
View File
@@ -35,7 +35,7 @@ class BookTableSeeder extends Seeder
'rate_id' => $rate->id,
'user_id' => $user->id,
'status' => 2,
'admin_status' => 2,
'admin_status' => 1,
'order_no' => '001',
'payment_for' => 'FULL PAYMENT',
'created_at' => Carbon::now()->format('Y-m-d H:i:s'),
database/seeds/NotificationSeeder.php
+2 -2
View File
@@ -19,7 +19,7 @@ class NotificationSeeder extends Seeder
DB::table('notifications')->insert([
'detail' => 'This is an user seeder notification',
'user_id' => $user->id,
'link' => 'http://www.google.com',
'link' => '/',
'created_at' => Carbon::now()->format('Y-m-d H:i:s'),
'updated_at' => Carbon::now()->format('Y-m-d H:i:s'),
]);
@@ -27,7 +27,7 @@ class NotificationSeeder extends Seeder
DB::table('notifications')->insert([
'detail' => 'This is an admin seeder notification',
'user_id' => $admin->id,
'link' => 'http://www.google.com',
'link' => '/',
'created_at' => Carbon::now()->format('Y-m-d H:i:s'),
'updated_at' => Carbon::now()->format('Y-m-d H:i:s'),
]);
resources/assets/js/components/AdminProgressTrack.vue
+3 -3
View File
@@ -1,10 +1,10 @@
<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" v-if="!(value.term === 'x1_ba' || value.term === 'x2_cheque')"/>
<el-step title="Supplier Report" v-if="!(value.term === 'x1_ba' || value.term === 'x2_cheque')"/>
<el-step title="Supplier Booking"/>
<el-step title="Supplier Report"/>
<el-step title="Upload China Bankslip To Booking"/>
<el-step title="Purchase Order/Invoice"/>
<el-step title="Completed"/>
resources/assets/js/components/Navbar.vue
+3 -2
View File
@@ -104,13 +104,14 @@ export default {
unread_message_length:0,
url: '/api/notification/user',
pagination: [],
}),
computed: mapGetters({
user: 'auth/user'
}),
mounted(){
this.getNotification(this.url);
if(this.user){
this.getNotification(this.url)
}
},
methods: {
async logout(){
resources/assets/js/components/ProgressTrack.vue
+1 -21
View File
@@ -1,6 +1,6 @@
<template>
<el-row>
<el-steps class="progressBar" :value="value" :active="value" :align-center="true" process-status="wait" finish-status="success">
<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"/>
@@ -19,32 +19,12 @@
}
}
/*
.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: () => ({
status: 1
})
}
</script>
resources/assets/js/components/X2AdminProgressTrack.vue
+44
View File
@@ -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>
resources/assets/js/components/X2ProgressTrack.vue
+27
View File
@@ -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>
resources/assets/js/pages/admin/booking/bookingDetail.vue
+5 -2
View File
@@ -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 {
resources/assets/js/pages/admin/booking/completed.vue
+283 -58
View File
@@ -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>
resources/assets/js/pages/admin/booking/supplierBooking.vue
+5 -2
View File
@@ -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 {
resources/assets/js/pages/admin/booking/supplierReport.vue
+5 -3
View File
@@ -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 {
resources/assets/js/pages/admin/booking/uploadChinaBankslip.vue
+291 -66
View File
@@ -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);
}
}
}
resources/assets/js/pages/admin/booking/uploadInvoice.vue
+279 -56
View File
@@ -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);
}
}
}
resources/assets/js/pages/admin/booking/verification.vue
+5 -2
View File
@@ -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 {
resources/assets/js/pages/admin/booking/x2Completed.vue
+549
View File
@@ -0,0 +1,549 @@
<template>
<el-main>
<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>
<br>
<el-button type="primary" @click="$router.go(-1)">Go Back</el-button>
</div>
<br>
<!-- bankslip -->
<br>
<el-row justify="center" align="center">
<el-col>
<el-card class="box-card">
<div slot="header" class="clearfix">
<span>China Bank Slip</span>
<!-- <el-button style="float: right; padding: 3px 0" type="text">Operation button</el-button> -->
</div>
<el-row type="flex">
<el-col align="center">
<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>
<br/>
</a>
</div>
</el-col>
</el-row>
</el-card>
</el-col>
</el-row>
<br>
<!-- bank slips END -->
<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>
<!-- <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> -->
<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="210">
<col name="el-table_2_column_10" width="210">
</colgroup>
<tbody>
<tr class="el-table__row">
<td class="el-table_2_column_9 is-right ">
<div class="cell">Ref No :</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">{{ booking_details.marking }}</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">Beneficiary Account : </div>
</td>
<td class="el-table_2_column_10 is-left ">
<div class="cell">{{booking_details.account_name}}</div>
</td>
</tr>
<tr class="el-table__row">
<td class="el-table_2_column_9 is-right ">
<div class="cell">Beneficiary Account Number : </div>
</td>
<td class="el-table_2_column_10 is-left ">
<div class="cell">{{booking_details.account_num}}</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" 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">
<span>Payment Bankin Slip</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>
</el-main>
</template>
<style>
.booking-details {
font-weight: bold;
}
.image {
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 ProgressTrack from '~/components/AdminProgressTrack'
import X2ProgressTrack from '~/components/X2AdminProgressTrack'
import axios from 'axios'
export default {
components: {
'progress-track': ProgressTrack,
'x2-progress-track': X2ProgressTrack
},
data () {
return {
trackerConfig :{
status: 8,
term: null
},
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'
})
})
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){
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);
}
}
}
</script>
resources/assets/js/pages/admin/home.vue
+39 -32
View File
@@ -9,38 +9,38 @@
<el-tabs type="border-card" class="table-switch">
<el-tab-pane label="Booking Table">
<el-row :gutter="20">
<div>
<el-table :data="bookingTable">
<el-table-column label="Ref No." width="100">
<el-button size="mini" @click="handleEdit(scope.$index, scope.row)">Update</el-button>
<el-button slot-scope="scope" type="text" @click="(event) => { BookingStatus(scope.row.status, scope.row.id) }"> {{ scope.row.id }}</el-button>
</el-table-column>
<el-table-column label="DateTime" prop="created_at" width="180" sortable/>
<el-table-column :filters="[{text: 'X1', value: 'X1'}, {text: 'X2', value: 'X2'}]" :filter-method="filterHandler" label="Term" prop="term" width="100"/> -->
<el-table-column label="Rate" width="74" prop="rate" />
<el-table-column label="Amount" prop="amount" justify="center" width="110" />
<el-table-column :filters="[{text: 'RMB', value: 'RMB'}, {text: 'USD', value: 'USD'}]" :filter-method="filterHandler" label="Transfer Amount"
prop="transfer_amount" width="170" />
<!-- <el-table-column label="ETA" sortable width="100"/> -->
<!-- <el-table-column label="Payment Method" :filters="[{text: 'Cash', value: 'Cash'}, {text: 'Cheque', value: 'Cheque'}, {text: 'BA', value: 'BA'}]" :filter-method="filterHandler">
<div>
<el-table :data="bookingTable">
<el-table-column label="Ref No." width="100">
<el-button size="mini" @click="handleEdit(scope.$index, scope.row)">Update</el-button>
<el-button slot-scope="scope" type="text" @click="(event) => { BookingStatus(scope.row.admin_status, scope.row.id, scope.row.term) }"> {{ scope.row.id }}</el-button>
</el-table-column>
<el-table-column label="DateTime" prop="created_at" width="180" sortable/>
<el-table-column label="Marking" width="120" prop="marking" />
<el-table-column :filters="[{text: 'X1', value: 'X1'}, {text: 'X2', value: 'X2'}]" :filter-method="filterHandlerTerm" label="Term" prop="term" width="100"/>
<el-table-column label="Rate" width="74" prop="rate" />
<el-table-column label="Amount" prop="amount" justify="center" width="110" />
<el-table-column :filters="[{text: 'RMB', value: 'RMB'}, {text: 'USD', value: 'USD'}]" :filter-method="filterHandlerTranferAmount" label="Transfer Amount"
prop="transfer_amount" width="170" />
<!-- <el-table-column label="ETA" sortable width="100"/> -->
<!-- <el-table-column label="Payment Method" :filters="[{text: 'Cash', value: 'Cash'}, {text: 'Cheque', value: 'Cheque'}, {text: 'BA', value: 'BA'}]" :filter-method="filterHandler">
</el-table-column> -->
<!-- <el-table-column :filters="[{text: '(1/6)', value: '(1/6) Order Done'}, {text: '(2/6)', value: '(2/6) Waiting for Upload Bank in Slip'}, {text: '(3/6)', value: '(3/6) Order Confirmation'}, {text: '(4/6)', value: '(4/6) Processing Transfer'}, {text: '(5/6)', value: '(5/6) Waiting for Upload PO'}, {text: '(6/6)', value: '(6/6) Order Complete'}]" :filter-method="filterHandler" prop="status" label="Status"/> -->
<el-table-column label="Status" width="106">
<template slot-scope="scope">
<el-popover trigger="click" placement="top">
<p>{{ scope.row.status_desc }}</p>
<div slot="reference" class="name-wrapper">
<el-tag size="medium">{{ scope.row.track_status }}</el-tag>
</div>
</el-popover>
</template>
</el-table-column>
<!-- <el-table-column label="Balance" prop="transfer_amount" sortable width="100"/> -->
<!-- <el-table-column prop="timeout" label="Bankin Timeout" /> -->
<el-table-column :filters="[{ text: 'Success', value: 'Success' }, { text: 'Pending', value: 'Pending' }]" :filter-method="filterTag"
label="" width="180" filter-placement="bottom-end">
<el-button slot-scope="scope" type="text" @click="(event) => { BookingStatus(scope.row.status, scope.row.id) }"> View Status </el-button>
<!-- <template slot-scope="scope">
<!-- <el-table-column :filters="[{text: '(1/6)', value: '(1/6) Order Done'}, {text: '(2/6)', value: '(2/6) Waiting for Upload Bank in Slip'}, {text: '(3/6)', value: '(3/6) Order Confirmation'}, {text: '(4/6)', value: '(4/6) Processing Transfer'}, {text: '(5/6)', value: '(5/6) Waiting for Upload PO'}, {text: '(6/6)', value: '(6/6) Order Complete'}]" :filter-method="filterHandler" prop="status" label="Status"/> -->
<el-table-column label="Status" width="106" :filters="[{ text: 'Success', value: 'Success' }, { text: 'Pending', value: 'Pending' }]" :filter-method="filterHandlerStatus" prop="status_desc">
<template slot-scope="scope">
<el-popover trigger="click" placement="top">
<p>{{ scope.row.status_desc }}</p>
<div slot="reference" class="name-wrapper">
<el-tag size="medium">{{ scope.row.track_status }}</el-tag>
</div>
</el-popover>
</template>
</el-table-column>
<!-- <el-table-column label="Balance" prop="transfer_amount" sortable width="100"/> -->
<!-- <el-table-column prop="timeout" label="Bankin Timeout" /> -->
<el-table-column label="" width="180">
<el-button slot-scope="scope" type="text" @click="(event) => { BookingStatus(scope.row.admin_status, scope.row.id, scope.row.term) }"> View Status </el-button>
<!-- <template slot-scope="scope">
<el-button size="mini" @click="handleEdit(scope.$index, scope.row)">View Status</el-button>
<el-button size="mini" type="danger" @click="BookingStatus(scope.$index, scope.row)">Cancel</el-button>
</template> -->
@@ -218,7 +218,7 @@ export default {
const term = row.term;
return value.toLowerCase() === term.substring(0,2);
},
BookingStatus (status, booking_id) {
BookingStatus (status, booking_id, term) {
// TODO : Get booking status from server
this.status = status
switch (this.status) {
@@ -254,6 +254,13 @@ export default {
break
case 6:
if(term == 'x2_cash' || term == 'x2_cheque' || term == 'x2_ba'){
this.$router.push({
name: 'booking.admin.x2complete',
params: {id: booking_id }
})
break
}
this.$router.push({
name: 'booking.admin.invoice',
params: {id: booking_id }
resources/assets/js/pages/auth/login.vue
+1 -3
View File
@@ -26,9 +26,7 @@
<div class="form-group row">
<div class="col-md-3"/>
<div class="col-md-7 d-flex">
<checkbox v-model="remember" name="remember">
{{ $t('remember_me') }}
</checkbox>
<router-link :to="{ name: 'password.request' }" class="small ml-auto my-auto">
{{ $t('forgot_password') }}
resources/assets/js/pages/auth/register.vue
+7 -1
View File
@@ -8,7 +8,7 @@
<div class="form-group row">
<label class="col-md-3 col-form-label text-md-right">{{ $t('Marking') }}</label>
<div class="col-md-7">
<input v-model="form.marking" :class="{ 'is-invalid': form.errors.has('marking') }" class="form-control" type="text" name="marking">
<input style="text-transform: uppercase;" v-model="form.marking" :class="{ 'is-invalid': form.errors.has('marking') }" class="form-control" @input="forceUppercase($event, form, 'marking')" type="text" name="marking">
<has-error :form="form" field="marking"/>
</div>
</div>
@@ -108,6 +108,12 @@ export default {
methods: {
forceUppercase(e, o, prop) {
const start = e.target.selectionStart;
e.target.value = e.target.value.toUpperCase();
this.$set(o, prop, e.target.value);
e.target.setSelectionRange(start, start);
},
async register () {
var token
var data
resources/assets/js/pages/booking/completed.vue
+10 -4
View File
@@ -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>Order Completed</h1>
<div class="goBackButton">
<el-button type="primary" @click="$router.go(-1)">Go Back</el-button>
@@ -148,17 +149,21 @@
}
</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 {
status: 7,
trackerConfig :{
status: 7,
term: null,
},
loading_btn: false,
booking_details:{
id: null,
@@ -180,6 +185,7 @@ export default {
.get('/api/booking/' + this.$route.params.id)
.then((response) => {
this.booking_details = response.data
this.trackerConfig.term = response.data.term
loading.close();
}).catch((error) => {
resources/assets/js/pages/booking/confirmation.vue
+10 -4
View File
@@ -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>Bankin Slip Verification in Progress</h1>
<div class="goBackButton">
<el-button type="primary" @click="$router.go(-1)">Go Back</el-button>
@@ -102,17 +103,21 @@
}
</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 {
status: 3,
trackerConfig :{
status: 3,
term: null
},
loading_btn: false,
booking_details:{
id: null,
@@ -134,6 +139,7 @@ export default {
.get('/api/booking/' + this.$route.params.id)
.then((response) => {
this.booking_details = response.data
this.trackerConfig.term = response.data.term
loading.close()
}).catch((error) => {
resources/assets/js/pages/booking/po.vue
+10 -4
View File
@@ -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,17 +145,21 @@
}
</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 {
status: 6,
trackerConfig :{
status: 6,
term: null
},
loading_btn: false,
booking_details:{
id: null,
@@ -176,6 +181,7 @@ export default {
.get('/api/booking/' + this.$route.params.id)
.then((response) => {
this.booking_details = response.data
this.trackerConfig.term = response.data.term
loading.close()
}).catch((error) => {
resources/assets/js/pages/booking/poComplete.vue
+10 -5
View File
@@ -1,7 +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" />
<div align="center">
<h4 style="margin-top:5%;">Processing Invoice</h4>
<br>
@@ -131,17 +131,21 @@
}
</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 {
status: 6,
trackerConfig :{
status: 6,
term: null
},
loading_btn: false,
booking_details:{
id: null,
@@ -163,6 +167,7 @@ export default {
.get('/api/booking/' + this.$route.params.id)
.then((response) => {
this.booking_details = response.data
this.trackerConfig.term = response.data.term
loading.close()
}).catch((error) => {
resources/assets/js/pages/booking/transfer.vue
+10 -4
View File
@@ -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>Bankin Slip Approved</h1>
<h2>Transfer In Progress</h2>
<div class="goBackButton">
@@ -123,17 +124,21 @@
}
</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 {
status: 4,
trackerConfig :{
status: 4,
term: null
},
loading_btn: false,
booking_details:{
id: null,
@@ -155,6 +160,7 @@ export default {
.get('/api/booking/' + this.$route.params.id)
.then((response) => {
this.booking_details = response.data
this.trackerConfig.term = response.data.term
loading.close()
}).catch((error) => {
resources/assets/js/pages/booking/uploadPo.vue
+15 -9
View File
@@ -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>Transfer Completed</h1>
<h2> Please upload your purchase order </h2>
<!-- upload card -->
@@ -183,18 +184,22 @@
}
</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,
status: 5,
trackerConfig :{
status: 5,
term: null
},
loading_btn: false,
booking_details: {
id: null,
@@ -217,6 +222,7 @@
.get('/api/booking/' + this.$route.params.id)
.then((response) => {
this.booking_details = response.data
this.trackerConfig.term = response.data.term
loading.close()
}).catch((error) => {
resources/assets/js/pages/booking/uploadUserBankSlip.vue
+41 -30
View File
@@ -1,6 +1,8 @@
<template>
<el-main>
<progress-track v-model="status" />
<x2-progress-track v-if="(booking.status == 'x2_cash' || booking.status == 'x2_cheque' || booking.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
@@ -56,9 +58,8 @@
<el-dialog :visible.sync="dialogVisible">
<img :src="dialogImageUrl" width="100%" alt="">
</el-dialog> -->
<el-upload class="avatar-uploader" :action="'/api/booking/' + booking_id + '/upload-user-bankslip'" :show-file-list="false" :on-success="handleUploadSuccess"
:before-upload="beforeFileUpload"
algin="center">
<el-upload class="avatar-uploader" :action="'/api/booking/' + booking_id + '/upload-user-bankslip'" :show-file-list="false"
:on-success="handleUploadSuccess" :before-upload="beforeFileUpload" algin="center">
<img v-if="imageUrl" :src="imageUrl" class="avatar">
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
@@ -122,33 +123,38 @@
font-size: 1em;
}
}
.avatar-uploader .el-upload {
border: 1px dashed #d9d9d9;
border-radius: 6px;
cursor: pointer;
position: relative;
overflow: hidden;
}
.avatar-uploader .el-upload:hover {
border-color: #409EFF;
}
.avatar-uploader-icon {
font-size: 28px;
color: #8c939d;
width: 178px;
height: 178px;
line-height: 178px;
text-align: center;
}
.avatar {
width: 178px;
height: 178px;
display: block;
}
.avatar-uploader .el-upload {
border: 1px dashed #d9d9d9;
border-radius: 6px;
cursor: pointer;
position: relative;
overflow: hidden;
}
.avatar-uploader .el-upload:hover {
border-color: #409EFF;
}
.avatar-uploader-icon {
font-size: 28px;
color: #8c939d;
width: 178px;
height: 178px;
line-height: 178px;
text-align: center;
}
.avatar {
width: 178px;
height: 178px;
display: block;
}
</style>
<script>
import VueCountdown from '@xkeshi/vue-countdown'
import ProgressTrack from '~/components/ProgressTrack'
import X2ProgressTrack from '~/components/X2ProgressTrack'
import axios from 'axios'
export default {
@@ -156,15 +162,19 @@
name: 'MyComponent',
components: {
'vue-countdown': VueCountdown,
'progress-track': ProgressTrack
'progress-track': ProgressTrack,
'x2-progress-track': X2ProgressTrack
},
data() {
return {
status: 2,
trackerConfig: {
status: 2,
term: null
},
start: false,
loading: false,
dialogImageUrl: '',
imageUrl:null,
imageUrl: null,
dialogVisible: false,
booking_id: this.$route.params.id,
user_slip_form: {
@@ -207,6 +217,7 @@
this.booking.bankin_amount = response.data.bia;
this.booking.timeout = response.data.timeout * 1000;
this.booking.term = response.data.term;
this.booking.status = response.data.status; this.trackerConfig.term = response.data.term
if (response.data.user_bankslip_path) {
this.booking.user_bankslip_path = response.data.user_bankslip_path
resources/assets/js/pages/booking/x2Completed.vue
+196
View File
@@ -0,0 +1,196 @@
<template>
<el-main>
<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>
</div>
<!-- bankslip -->
<div class="row">
<div class="col">
<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'>
<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>
<br/>
</a>
</div>
</div>
</div>
</div>
</div>
<!-- order details -->
<div class="card">
<div class="card-header">Order Details</div>
<div class="card-body">
<div class="row">
<div class="col">
<table class="table table-striped">
<tbody>
<tr>
<td>Ref No :</td>
<td>{{ booking_details.id }}</td>
</tr>
<tr>
<td>Date :</td>
<td>{{ booking_details.created_at }}</td>
</tr>
<tr>
<td>Customer Marking :</td>
<td>{{ booking_details.marking }}</td>
</tr>
<tr>
<td>Term: </td>
<td>{{ booking_details.term }}</td>
</tr>
</tbody>
</table>
</div>
<div class="col">
<table class="table table-striped">
<tbody>
<tr>
<td>CNY/RMB :</td>
<td>CNY {{ booking_details.amount }}</td>
</tr>
<tr>
<td>+ Service Charge :</td>
<td>CNY {{ booking_details.service_charge }}</td>
</tr>
<tr>
<td>RATE :</td>
<td>{{ booking_details.rate }}</td>
</tr>
<tr>
<td></td>
<td>
<b>MYR {{ booking_details.bia }}</b>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<div class="card">
<div class="card-header">Order Bankin Slip</div>
<div class="row">
<div class="card-body">
<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>
</div>
</div>
</div>
</el-main>
</template>
<style>
h1 {
margin-top: 5%;
font-size: 3vw;
text-align: center;
margin-bottom: 3%;
}
.goBackButton {
text-align: center;
margin-bottom: 3%;
}
.uploadedImage {
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 {
font-size: 1em;
}
}
</style>
<script>
import ProgressTrack from '~/components/ProgressTrack'
import X2ProgressTrack from '~/components/X2ProgressTrack'
import axios from 'axios'
export default {
components: {
'progress-track': ProgressTrack,
'x2-progress-track': X2ProgressTrack
},
data() {
return {
trackerConfig: {
status: 7,
term: null,
},
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'
})
})
},
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>
resources/assets/js/pages/home.vue
+12 -4
View File
@@ -149,7 +149,7 @@
</el-select>
</el-form-item>
<el-form-item prop="order_no">
<el-input v-model="bookingForm.order_no" placeholder="Order No." style="width: 80%" required="true" />
<el-input v-model="bookingForm.order_no" placeholder="Order No. (Optional)" style="width: 80%" required="true" />
</el-form-item>
<el-form-item prop="account_name">
<el-input v-model="bookingForm.account_name" placeholder="China Beneficiary Name" style="width: 80%" required="true" />
@@ -285,7 +285,7 @@
<el-table :data="bookingTable">
<el-table-column label="Ref No." width="100">
<el-button size="mini" @click="handleEdit(scope.$index, scope.row)">Update</el-button>
<el-button slot-scope="scope" type="text" @click="(event) => { BookingStatus(scope.row.status, scope.row.id) }"> {{ scope.row.id }}</el-button>
<el-button slot-scope="scope" type="text" @click="(event) => { BookingStatus(scope.row.status, scope.row.id, scope.row.term) }"> {{ scope.row.id }}</el-button>
</el-table-column>
<el-table-column label="DateTime" prop="created_at" width="180" sortable/>
<el-table-column :filters="[{text: 'X1', value: 'X1'}, {text: 'X2', value: 'X2'}]" :filter-method="filterHandler" label="Term" prop="term" width="100"/> -->
@@ -311,7 +311,7 @@
<!-- <el-table-column prop="timeout" label="Bankin Timeout" /> -->
<el-table-column :filters="[{ text: 'Success', value: 'Success' }, { text: 'Pending', value: 'Pending' }]" :filter-method="filterTag"
label="" width="180" filter-placement="bottom-end">
<el-button slot-scope="scope" type="text" @click="(event) => { BookingStatus(scope.row.status, scope.row.id) }"> View Status </el-button>
<el-button slot-scope="scope" type="text" @click="(event) => { BookingStatus(scope.row.status, scope.row.id, scope.row.term) }"> View Status </el-button>
<!-- <template slot-scope="scope">
<el-button size="mini" @click="handleEdit(scope.$index, scope.row)">View Status</el-button>
<el-button size="mini" type="danger" @click="BookingStatus(scope.$index, scope.row)">Cancel</el-button>
@@ -706,7 +706,7 @@ export default {
})
},
BookingStatus (status, booking_id) {
BookingStatus (status, booking_id, term) {
console.log(status)
// TODO : Get booking status from server
this.status = status
@@ -738,6 +738,14 @@ export default {
break
case 5:
console.log(term)
if(term == 'x2_cash' || term == 'x2_cheque' || term == 'x2_ba'){
this.$router.push({
name: 'booking.user.x2complete',
params: {id: booking_id }
})
break
}
this.$router.push({
name: 'booking.user.uploadpo',
params: {id: booking_id }
resources/assets/js/pages/settings/admin-marking-setting.vue
+7 -1
View File
@@ -19,7 +19,7 @@
<el-form ref="markingForm" :model="markingForm" :rules="rules">
<div align="right">
<el-form-item label="Marking" prop="marking">
<el-input v-model="markingForm.marking" type="text" style="width: 80%" />
<input style="width: 80%; text-transform: uppercase;" v-model="markingForm.marking" class="form-control" @input="forceUppercase($event, markingForm, 'marking')" type="text" />
</el-form-item>
<el-form-item label="Email" prop="email">
<el-input v-model="markingForm.email" type="text" style="width: 80%" />
@@ -109,6 +109,12 @@
this.UpdateTableData();
},
methods: {
forceUppercase(e, o, prop) {
const start = e.target.selectionStart;
e.target.value = e.target.value.toUpperCase();
this.$set(o, prop, e.target.value);
e.target.setSelectionRange(start, start);
},
CreateMarking : function(formName){
this.loading_btn = true
this.AddDatadialogVisible = false;
resources/assets/js/router/routes.js
+5 -2
View File
@@ -24,6 +24,7 @@ const Confirmation = () => import('~/pages/booking/confirmation').then(m => m.de
const Transfer = () => import('~/pages/booking/transfer').then(m => m.default || m)
const UploadPo = () => import('~/pages/booking/uploadPo').then(m => m.default || m)
const PoComplete = () => import('~/pages/booking/poComplete').then(m => m.default || m)
const X2Completed = () => import('~/pages/booking/x2Completed').then(m => m.default || m)
const Completed = () => import('~/pages/booking/completed').then(m => m.default || m)
const PurchaseOrder = () => import('~/pages/booking/po').then(m => m.default || m)
@@ -35,7 +36,7 @@ const SupplierReport = () => import('~/pages/admin/booking/supplierReport').then
const UploadCNSlip = () => import('~/pages/admin/booking/uploadChinaBankslip').then(m => m.default || m)
const UploadInvoice = () => import('~/pages/admin/booking/uploadInvoice').then(m => m.default || m)
const adminCompleted = () => import('~/pages/admin/booking/completed').then(m => m.default || m)
// const Completed = () => import('~/pages/booking/uploadUserBankSlip').then(m => m.default || m)
const adminX2Completed = () => import('~/pages/admin/booking/x2Completed').then(m => m.default || m)
// Admin pages
const AdminHome = () => import('~/pages/admin/home').then(m => m.default || m)
@@ -75,7 +76,8 @@ export default [
{ path: '/booking/:id/po-complete', name: 'booking.user.pocomplete', component: PoComplete },
{ path: '/booking/:id/po', name: 'booking.user.po', component: PurchaseOrder },
{ path: '/booking/:id/complete', name: 'booking.user.complete', component: Completed },
{ path: '/booking/:id/x2-complete', name: 'booking.user.x2complete', component: X2Completed },
// Admin booking
{ path: '/booking/:id/booking-detail', name: 'booking.admin.booking.detail', component: BookingDetail },
{ path: '/booking/:id/verification', name: 'booking.admin.verification', component: Verification },
@@ -84,6 +86,7 @@ export default [
{ path: '/booking/:id/upload-cn-bankslip', name: 'booking.admin.cnslip', component: UploadCNSlip },
{ path: '/booking/:id/upload-invoice', name: 'booking.admin.invoice', component: UploadInvoice },
{ path: '/booking/:id/admin/complete', name: 'booking.admin.complete', component: adminCompleted },
{ path: '/booking/:id/admin/x2-complete', name: 'booking.admin.x2complete', component: adminX2Completed },
// Admin pages
{ path: '/admin', name: 'admin.home', component: AdminHome },
routes/api.php
+1 -1
View File
@@ -62,7 +62,7 @@ Route::group(['middleware' => 'auth:api'], function () {
Route::group(['middleware' => 'guest:api'], function () {
Route::post('login', 'Auth\LoginController@login')->name('login');
Route::post('register', 'Auth\RegisterController@create');
Route::post('password/email', 'Auth\ForgotPasswordController@sendResetLinkEmail');
Route::post('password/email', 'Auth\ForgotPasswordController@sendResetLink');
Route::post('password/reset', 'Auth\ResetPasswordController@reset');
Route::post('oauth/{driver}', 'Auth\OAuthController@redirectToProvider');
Route::get('oauth/{driver}/callback', 'Auth\OAuthController@handleProviderCallback')->name('oauth.callback');
storage/app/.gitignore
Regular → Executable
View File
storage/app/public/.gitignore
Regular → Executable
View File
storage/framework/.gitignore
Regular → Executable
View File
storage/framework/cache/.gitignore
Regular → Executable
View File
storage/framework/sessions/.gitignore
Regular → Executable
View File
storage/framework/testing/.gitignore
Regular → Executable
View File
storage/framework/views/.gitignore
Regular → Executable
View File
storage/logs/.gitignore
Regular → Executable
View File
tests/Feature/ChinaBankSlipTest.php
+1 -1
View File
@@ -55,7 +55,7 @@ class ChinaBankSlipTest extends TestCase
'actual_transfer_amount' => '12',
'details' => "123123",
'date' => "123123"
]);
]);
if(!file_exists($china_bank_slips_path) || $size_in_kb > 3072){
$response->assertStatus(400);
}