mirror of
https://gitlab.com/omair-personal/exchange.git
synced 2026-08-19 04:24:08 +00:00
added admin status to booking table
updated admin progress track steps added dummy template in admin booking
This commit is contained in:
Jack Goh
@@ -0,0 +1,33 @@
|
||||
<?php
|
||||
|
||||
use Illuminate\Support\Facades\Schema;
|
||||
use Illuminate\Database\Schema\Blueprint;
|
||||
use Illuminate\Database\Migrations\Migration;
|
||||
|
||||
class AddAdminstatusToBookingTable extends Migration
|
||||
{
|
||||
/**
|
||||
* Run the migrations.
|
||||
*
|
||||
* @return void
|
||||
*/
|
||||
public function up()
|
||||
{
|
||||
Schema::table('bookings', function (Blueprint $table) {
|
||||
$table->integer('admin_status')->default(1);
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Reverse the migrations.
|
||||
*
|
||||
* @return void
|
||||
*/
|
||||
public function down()
|
||||
{
|
||||
Schema::table('bookings', function (Blueprint $table) {
|
||||
$table->dropColumn('admin_status');
|
||||
// $table->dropColumn('reject_reason');
|
||||
});
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,29 @@
|
||||
<?php
|
||||
|
||||
use Illuminate\Support\Facades\Schema;
|
||||
use Illuminate\Database\Schema\Blueprint;
|
||||
use Illuminate\Database\Migrations\Migration;
|
||||
|
||||
class ChangeAdminstatusDefaultBookingTable extends Migration
|
||||
{
|
||||
/**
|
||||
* Run the migrations.
|
||||
*
|
||||
* @return void
|
||||
*/
|
||||
public function up()
|
||||
{
|
||||
Schema::table('bookings', function (Blueprint $table) {
|
||||
$table->integer('admin_status')->default(0)->change();
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Reverse the migrations.
|
||||
*
|
||||
* @return void
|
||||
*/
|
||||
public function down()
|
||||
{
|
||||
}
|
||||
}
|
||||
@@ -1,18 +1,17 @@
|
||||
<template>
|
||||
<el-row>
|
||||
<el-steps v-bind:value="value" :active="value" :alignCenter="true" process-status="wait" finish-status="success">
|
||||
<el-step title="Booking"></el-step>
|
||||
<el-step title="Verification"></el-step>
|
||||
<el-step title="Supplier Booking"></el-step>
|
||||
<el-step title="Supplier Report"></el-step>
|
||||
<el-step title="Upload China Bankslip To Booking"></el-step>
|
||||
<el-step title="Invoice"></el-step>
|
||||
<el-step title="Completed"></el-step>
|
||||
</el-steps>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-steps :value="value" :active="value" :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="Invoice"/>
|
||||
<el-step title="Completed"/>
|
||||
</el-steps>
|
||||
</el-row>
|
||||
</template>
|
||||
|
||||
|
||||
<style type="text/css">
|
||||
/* .el-row {
|
||||
margin: 20px 0;
|
||||
@@ -44,4 +43,4 @@ export default {
|
||||
status: 1
|
||||
})
|
||||
}
|
||||
</script>
|
||||
</script>
|
||||
|
||||
@@ -1,17 +1,16 @@
|
||||
<template>
|
||||
<el-row>
|
||||
<el-steps v-bind:value="value" :active="value" :alignCenter="true" process-status="wait" finish-status="success">
|
||||
<el-step title="Booking"></el-step>
|
||||
<el-step title="Payment"></el-step>
|
||||
<el-step title="Order Confirmation"></el-step>
|
||||
<el-step title="Processing Transfer"></el-step>
|
||||
<el-step title="Transfer Complete"></el-step>
|
||||
<el-step title="Order Complete"></el-step>
|
||||
</el-steps>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-steps :value="value" :active="value" :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="Processing Transfer"/>
|
||||
<el-step title="Transfer Complete"/>
|
||||
<el-step title="Order Complete"/>
|
||||
</el-steps>
|
||||
</el-row>
|
||||
</template>
|
||||
|
||||
|
||||
<style type="text/css">
|
||||
/* .el-row {
|
||||
margin: 20px 0;
|
||||
@@ -43,4 +42,4 @@ export default {
|
||||
status: 1
|
||||
})
|
||||
}
|
||||
</script>
|
||||
</script>
|
||||
|
||||
@@ -0,0 +1,74 @@
|
||||
<template>
|
||||
<el-main>
|
||||
<progress-track v-model="status"/>
|
||||
|
||||
<div align="center">
|
||||
<h4 style="margin-top:5%;">Transfer In Progress</h4>
|
||||
<br>
|
||||
<h5> ETA : 3 days 14 Hours </h5>
|
||||
<br>
|
||||
<el-button type="primary" @click="$router.go(-1)">Go Back</el-button>
|
||||
</div>
|
||||
<br>
|
||||
<el-row justify="center" align="center">
|
||||
<el-card class="box-card">
|
||||
<div slot="header" class="clearfix">
|
||||
<span>Order Details</span>
|
||||
<!-- <el-button style="float: right; padding: 3px 0" type="text">Operation button</el-button> -->
|
||||
</div>
|
||||
<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>BankinSlip</span>
|
||||
<!-- <el-button style="float: right; padding: 3px 0" type="text">Operation button</el-button> -->
|
||||
</div>
|
||||
<el-row :gutter="12">
|
||||
<el-col :span="22" style="text-align:center">
|
||||
<img src="http://via.placeholder.com/600x400" class="image">
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-card>
|
||||
</el-row>
|
||||
</el-main>
|
||||
</template>
|
||||
<style>
|
||||
.booking-details {
|
||||
font-weight: bold;
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
import VueCountdown from '@dmaksimovic/vue-countdown'
|
||||
import ProgressTrack from '~/components/AdminProgressTrack'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'progress-track': ProgressTrack
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
status: 4
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -0,0 +1,74 @@
|
||||
<template>
|
||||
<el-main>
|
||||
<progress-track v-model="status"/>
|
||||
|
||||
<div align="center">
|
||||
<h4 style="margin-top:5%;">Transfer In Progress</h4>
|
||||
<br>
|
||||
<h5> ETA : 3 days 14 Hours </h5>
|
||||
<br>
|
||||
<el-button type="primary" @click="$router.go(-1)">Go Back</el-button>
|
||||
</div>
|
||||
<br>
|
||||
<el-row justify="center" align="center">
|
||||
<el-card class="box-card">
|
||||
<div slot="header" class="clearfix">
|
||||
<span>Order Details</span>
|
||||
<!-- <el-button style="float: right; padding: 3px 0" type="text">Operation button</el-button> -->
|
||||
</div>
|
||||
<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>BankinSlip</span>
|
||||
<!-- <el-button style="float: right; padding: 3px 0" type="text">Operation button</el-button> -->
|
||||
</div>
|
||||
<el-row :gutter="12">
|
||||
<el-col :span="22" style="text-align:center">
|
||||
<img src="http://via.placeholder.com/600x400" class="image">
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-card>
|
||||
</el-row>
|
||||
</el-main>
|
||||
</template>
|
||||
<style>
|
||||
.booking-details {
|
||||
font-weight: bold;
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
import VueCountdown from '@dmaksimovic/vue-countdown'
|
||||
import ProgressTrack from '~/components/AdminProgressTrack'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'progress-track': ProgressTrack
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
status: 4
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -0,0 +1,74 @@
|
||||
<template>
|
||||
<el-main>
|
||||
<progress-track v-model="status"/>
|
||||
|
||||
<div align="center">
|
||||
<h4 style="margin-top:5%;">Transfer In Progress</h4>
|
||||
<br>
|
||||
<h5> ETA : 3 days 14 Hours </h5>
|
||||
<br>
|
||||
<el-button type="primary" @click="$router.go(-1)">Go Back</el-button>
|
||||
</div>
|
||||
<br>
|
||||
<el-row justify="center" align="center">
|
||||
<el-card class="box-card">
|
||||
<div slot="header" class="clearfix">
|
||||
<span>Order Details</span>
|
||||
<!-- <el-button style="float: right; padding: 3px 0" type="text">Operation button</el-button> -->
|
||||
</div>
|
||||
<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>BankinSlip</span>
|
||||
<!-- <el-button style="float: right; padding: 3px 0" type="text">Operation button</el-button> -->
|
||||
</div>
|
||||
<el-row :gutter="12">
|
||||
<el-col :span="22" style="text-align:center">
|
||||
<img src="http://via.placeholder.com/600x400" class="image">
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-card>
|
||||
</el-row>
|
||||
</el-main>
|
||||
</template>
|
||||
<style>
|
||||
.booking-details {
|
||||
font-weight: bold;
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
import VueCountdown from '@dmaksimovic/vue-countdown'
|
||||
import ProgressTrack from '~/components/AdminProgressTrack'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'progress-track': ProgressTrack
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
status: 4
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -0,0 +1,74 @@
|
||||
<template>
|
||||
<el-main>
|
||||
<progress-track v-model="status"/>
|
||||
|
||||
<div align="center">
|
||||
<h4 style="margin-top:5%;">Transfer In Progress</h4>
|
||||
<br>
|
||||
<h5> ETA : 3 days 14 Hours </h5>
|
||||
<br>
|
||||
<el-button type="primary" @click="$router.go(-1)">Go Back</el-button>
|
||||
</div>
|
||||
<br>
|
||||
<el-row justify="center" align="center">
|
||||
<el-card class="box-card">
|
||||
<div slot="header" class="clearfix">
|
||||
<span>Order Details</span>
|
||||
<!-- <el-button style="float: right; padding: 3px 0" type="text">Operation button</el-button> -->
|
||||
</div>
|
||||
<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>BankinSlip</span>
|
||||
<!-- <el-button style="float: right; padding: 3px 0" type="text">Operation button</el-button> -->
|
||||
</div>
|
||||
<el-row :gutter="12">
|
||||
<el-col :span="22" style="text-align:center">
|
||||
<img src="http://via.placeholder.com/600x400" class="image">
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-card>
|
||||
</el-row>
|
||||
</el-main>
|
||||
</template>
|
||||
<style>
|
||||
.booking-details {
|
||||
font-weight: bold;
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
import VueCountdown from '@dmaksimovic/vue-countdown'
|
||||
import ProgressTrack from '~/components/AdminProgressTrack'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'progress-track': ProgressTrack
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
status: 4
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -1,40 +1,34 @@
|
||||
<template>
|
||||
<el-main>
|
||||
<progress-track v-model="status"></progress-track>
|
||||
<progress-track v-model="status"/>
|
||||
|
||||
<div align="center">
|
||||
<h4 style="margin-top:5%;">Transfer In Progress</h4>
|
||||
<br>
|
||||
<h5> ETA : 3 days 14 Hours </h5>
|
||||
<br>
|
||||
<el-button type="primary" @click="$router.go(-1)">Go Back</el-button>
|
||||
<h4 style="margin-top:5%;">Waiting For Payment</h4>
|
||||
</div>
|
||||
<br>
|
||||
|
||||
<el-row justify="center" align="center">
|
||||
<el-card class="box-card">
|
||||
<div slot="header" class="clearfix">
|
||||
<span>Order Details</span>
|
||||
<!-- <el-button style="float: right; padding: 3px 0" type="text">Operation button</el-button> -->
|
||||
</div>
|
||||
<el-row :gutter="12">
|
||||
<el-col :span="12">
|
||||
<el-table :data="bookingConfirmTable" align="center" :show-header="false">
|
||||
<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" align="center" :show-header="false">
|
||||
<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>
|
||||
<table class="table-responsive el-table" style="display:table; width:50%; margin: 0 auto;">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="el-table_2_column_9 is-right ">Amount : </td>
|
||||
<td class="el-table_2_column_9 is-left ">
|
||||
<b> RMB {{ booking.amount }} </b>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td width="200" class="el-table_2_column_9 is-right ">Bankin Amount : </td>
|
||||
<td width="200" class="el-table_2_column_9 is-left ">
|
||||
<b> MYR {{ booking.bankin_amount }} </b>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</el-row>
|
||||
<br>
|
||||
|
||||
<el-row justify="center" align="center">
|
||||
<br>
|
||||
<!-- user bankslip -->
|
||||
<el-row justify="center" align="center">
|
||||
<el-card class="box-card">
|
||||
<div slot="header" class="clearfix">
|
||||
<span>BankinSlip</span>
|
||||
@@ -47,6 +41,32 @@
|
||||
</el-row>
|
||||
</el-card>
|
||||
</el-row>
|
||||
<!-- <el-form label-width="300px">
|
||||
<el-form-item label="Amount (RM) :"> -->
|
||||
<div align="center">
|
||||
Bankin Amount (RM) :
|
||||
<el-form ref="user_slip_form" :model="user_slip_form" :rules="rules">
|
||||
<div align="center">
|
||||
<el-form-item prop="transfer_amount">
|
||||
<el-input v-model="user_slip_form.transfer_amount" type="text" placeholder="Transfer Amount" style="width: 20%"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<div align="center">
|
||||
<el-button :loading="loading" type="primary" @click="submitUserSlip('user_slip_form')">Submit</el-button>
|
||||
<router-link :to="{ name: 'home' }" class="small ml-auto my-auto">
|
||||
Upload Later
|
||||
</router-link>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</el-form>
|
||||
<br>
|
||||
<br>
|
||||
</div>
|
||||
<!-- </el-form-item>
|
||||
</el-form> -->
|
||||
|
||||
</el-main>
|
||||
</template>
|
||||
<style>
|
||||
@@ -55,21 +75,142 @@
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
import VueCountdown from '@dmaksimovic/vue-countdown'
|
||||
import ProgressTrack from '~/components/ProgressTrack'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'progress-track': ProgressTrack
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
status: 4,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
||||
import ProgressTrack from '~/components/ProgressTrack'
|
||||
import axios from 'axios'
|
||||
|
||||
export default {
|
||||
middleware: ['auth'],
|
||||
name: 'MyComponent',
|
||||
components: {
|
||||
'progress-track': ProgressTrack
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
status: 2,
|
||||
start: false,
|
||||
loading: false,
|
||||
dialogImageUrl: '',
|
||||
dialogVisible: false,
|
||||
booking_id: this.$route.params.id,
|
||||
user_slip_form: {
|
||||
transfer_amount: ''
|
||||
},
|
||||
booking: {
|
||||
amount: '',
|
||||
bankin_amount: '',
|
||||
timeout: 1
|
||||
},
|
||||
rules: {
|
||||
transfer_amount: [{
|
||||
required: true,
|
||||
message: 'Please input amount',
|
||||
trigger: 'change'
|
||||
} ]}
|
||||
}
|
||||
},
|
||||
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) => {
|
||||
console.log(response)
|
||||
this.booking.amount = response.data.amount
|
||||
this.booking.bankin_amount = response.data.bia
|
||||
this.booking.timeout = response.data.timeout * 1000
|
||||
this.start = true
|
||||
loading.close()
|
||||
|
||||
if (this.booking.timeout < 0) {
|
||||
this.$message({
|
||||
showClose: true,
|
||||
message: 'Booking timeout, please make another booking.',
|
||||
type: 'error',
|
||||
duration: 30000
|
||||
})
|
||||
this.$router.push({
|
||||
name: 'home'
|
||||
})
|
||||
}
|
||||
}).catch((error) => {
|
||||
console.log(error)
|
||||
loading.close()
|
||||
this.$router.push({
|
||||
name: 'notfound'
|
||||
})
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
handleCoutdownend () {
|
||||
this.$message({
|
||||
showClose: true,
|
||||
message: 'Booking timeout, please make another booking.',
|
||||
type: 'error',
|
||||
duration: 30000
|
||||
})
|
||||
this.$router.push({
|
||||
name: 'home'
|
||||
})
|
||||
},
|
||||
handleRemove (file, fileList) {
|
||||
console.log(file, fileList)
|
||||
},
|
||||
handlePictureCardPreview (file) {
|
||||
this.dialogImageUrl = file.url
|
||||
this.dialogVisible = true
|
||||
},
|
||||
submitUserSlip (formName) {
|
||||
this.loading = true
|
||||
this.$refs[formName].validate((valid) => {
|
||||
if (valid) {
|
||||
let newConfirmation = {
|
||||
amount: this.booking.amount,
|
||||
term: this.term
|
||||
}
|
||||
} else {
|
||||
this.loading = false
|
||||
}
|
||||
})
|
||||
let newUserSlip = {
|
||||
transfer_amount: this.user_slip_form.transfer_amount
|
||||
}
|
||||
axios.patch('/api/booking/' + this.booking_id + '/bankslip-amount', newUserSlip)
|
||||
.then((response) => {
|
||||
this.$message({
|
||||
showClose: true,
|
||||
message: 'Your bankinslip has been submitted, please wait admin to approve.',
|
||||
type: 'success',
|
||||
duration: 5000
|
||||
})
|
||||
|
||||
console.log(response)
|
||||
this.$router.push({
|
||||
name: 'home'
|
||||
})
|
||||
})
|
||||
.catch((error) => {
|
||||
this.loading = false
|
||||
this.$message({
|
||||
showClose: true,
|
||||
message: 'Please upload your bankin slip first.',
|
||||
type: 'warning',
|
||||
duration: 10000
|
||||
})
|
||||
console.log(error)
|
||||
})
|
||||
},
|
||||
handleTimeExpire () {
|
||||
alert('Booking expired')
|
||||
},
|
||||
startTimer () {
|
||||
this.start = true
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -1,47 +1,46 @@
|
||||
<template>
|
||||
<!-- Booking Table -->
|
||||
<el-row :gutter="20">
|
||||
<div>
|
||||
<el-table :data="bookingTable">
|
||||
<el-table-column label="No." width="100">
|
||||
<el-button size="mini" @click="handleEdit(scope.$index, scope.row)">Update</el-button>
|
||||
<el-button type="text" slot-scope="scope" @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 label="Term" prop="term" :filters="[{text: 'X1', value: 'X1'}, {text: 'X2', value: 'X2'}]" width="100" :filter-method="filterHandler">
|
||||
<!-- Booking Table -->
|
||||
<el-row :gutter="20">
|
||||
<div>
|
||||
<el-table :data="bookingTable">
|
||||
<el-table-column label="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">
|
||||
</el-table-column> -->
|
||||
<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">
|
||||
</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 type="text" slot-scope="scope" @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">
|
||||
<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-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> -->
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
</el-row>
|
||||
<!-- Booking Table-end -->
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
</el-row>
|
||||
<!-- Booking Table-end -->
|
||||
</template>
|
||||
|
||||
<script>
|
||||
@@ -50,84 +49,84 @@ import axios from 'axios'
|
||||
export default {
|
||||
middleware: 'admin',
|
||||
data () {
|
||||
return{
|
||||
bookingTable: [
|
||||
]
|
||||
return {
|
||||
bookingTable: [
|
||||
]
|
||||
}
|
||||
},
|
||||
mounted(){
|
||||
axios
|
||||
.get('/api/booking/')
|
||||
.then((response) => {
|
||||
console.log(response)
|
||||
this.bookingTable = response.data
|
||||
|
||||
//loading.close()
|
||||
}).catch((error) => {
|
||||
mounted () {
|
||||
axios
|
||||
.get('/api/booking/')
|
||||
.then((response) => {
|
||||
console.log(response)
|
||||
this.bookingTable = response.data
|
||||
|
||||
// loading.close()
|
||||
}).catch((error) => {
|
||||
// console.log(error)
|
||||
// loading.close()
|
||||
// this.$router.push({
|
||||
// name: 'notfound'
|
||||
// })
|
||||
})
|
||||
},
|
||||
methods :{
|
||||
filterTag(value, row) {
|
||||
return row.tag === value
|
||||
},
|
||||
filterHandler(value, row, column) {
|
||||
const property = column['property']
|
||||
return row[property] === value
|
||||
},
|
||||
BookingStatus(status, booking_id) {
|
||||
console.log(status)
|
||||
// TODO : Get booking status from server
|
||||
this.status = status
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
filterTag (value, row) {
|
||||
return row.tag === value
|
||||
},
|
||||
filterHandler (value, row, column) {
|
||||
const property = column['property']
|
||||
return row[property] === value
|
||||
},
|
||||
BookingStatus (status, booking_id) {
|
||||
console.log(status)
|
||||
// TODO : Get booking status from server
|
||||
this.status = status
|
||||
|
||||
switch (this.status) {
|
||||
case 1:
|
||||
this.$router.push({
|
||||
name: 'booking.admin.verification',
|
||||
params: {id: booking_id }
|
||||
})
|
||||
switch (this.status) {
|
||||
case 1:
|
||||
this.$router.push({
|
||||
name: 'booking.admin.verification',
|
||||
params: {id: booking_id }
|
||||
})
|
||||
|
||||
case 2:
|
||||
this.$router.push({
|
||||
name: 'booking.admin.supplier',
|
||||
params: {id: booking_id }
|
||||
})
|
||||
break;
|
||||
case 3:
|
||||
this.$router.push({
|
||||
name: 'booking.admin.supplier.report',
|
||||
params: {id: booking_id }
|
||||
})
|
||||
break;
|
||||
case 4:
|
||||
this.$router.push({
|
||||
name: 'booking.admin.cnslip',
|
||||
params: {id: booking_id }
|
||||
})
|
||||
break;
|
||||
case 2:
|
||||
this.$router.push({
|
||||
name: 'booking.admin.supplier',
|
||||
params: {id: booking_id }
|
||||
})
|
||||
break
|
||||
case 3:
|
||||
this.$router.push({
|
||||
name: 'booking.admin.supplier.report',
|
||||
params: {id: booking_id }
|
||||
})
|
||||
break
|
||||
case 4:
|
||||
this.$router.push({
|
||||
name: 'booking.admin.cnslip',
|
||||
params: {id: booking_id }
|
||||
})
|
||||
break
|
||||
|
||||
case 5:
|
||||
this.$router.push({
|
||||
name: 'booking.admin.invoice',
|
||||
params: {id: booking_id }
|
||||
})
|
||||
break;
|
||||
case 5:
|
||||
this.$router.push({
|
||||
name: 'booking.admin.invoice',
|
||||
params: {id: booking_id }
|
||||
})
|
||||
break
|
||||
|
||||
case 6:
|
||||
this.$router.push({
|
||||
name: 'booking.complete',
|
||||
params: {id: booking_id }
|
||||
})
|
||||
break;
|
||||
default:
|
||||
break
|
||||
}
|
||||
case 6:
|
||||
this.$router.push({
|
||||
name: 'booking.complete',
|
||||
params: {id: booking_id }
|
||||
})
|
||||
break
|
||||
default:
|
||||
break
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -80,11 +80,9 @@ export default {
|
||||
|
||||
methods: {
|
||||
async login () {
|
||||
|
||||
// Submit the form.
|
||||
const { data } = await this.form.post('/api/login')
|
||||
|
||||
|
||||
// Add loading screen
|
||||
const loading = this.$loading({
|
||||
lock: true,
|
||||
@@ -96,14 +94,12 @@ export default {
|
||||
// Save the token.
|
||||
this.$store.dispatch('auth/saveToken', {
|
||||
token: data.token,
|
||||
remember: this.remember,
|
||||
remember: this.remember
|
||||
})
|
||||
|
||||
// Fetch the user.
|
||||
await this.$store.dispatch('auth/fetchUser')
|
||||
|
||||
|
||||
|
||||
// Redirect home.
|
||||
if (store.getters['auth/user'].role === 'admin') {
|
||||
this.$router.push({ name: 'admin.home' })
|
||||
|
||||
@@ -1,103 +1,103 @@
|
||||
<template>
|
||||
<el-main>
|
||||
<progress-track v-model="status"></progress-track>
|
||||
<el-main>
|
||||
<progress-track v-model="status"/>
|
||||
|
||||
<div align="center">
|
||||
<h4 style="margin-top:5%;">Order Completed</h4>
|
||||
<br>
|
||||
<div align="center">
|
||||
<h4 style="margin-top:5%;">Order Completed</h4>
|
||||
<br>
|
||||
</div>
|
||||
|
||||
<!-- upload card -->
|
||||
<br>
|
||||
<el-row :gutter="12" justify="center" align="center">
|
||||
<el-col :span="8">
|
||||
<el-card class="box-card">
|
||||
<div slot="header" class="clearfix">
|
||||
<span>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">
|
||||
<a target=" _blank" href="https://placeholder.com">
|
||||
<img width="100%" height="100%" src="http://via.placeholder.com/700x800">
|
||||
</a>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-card class="box-card">
|
||||
<div slot="header" class="clearfix">
|
||||
<span>Invoice</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">
|
||||
<a target=" _blank" href="https://placeholder.com">
|
||||
<img width="100%" height="100%" src="http://via.placeholder.com/700x800">
|
||||
</a>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<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 :gutter="12" type="flex">
|
||||
<el-col :span="12">
|
||||
<a target=" _blank" href="https://placeholder.com">
|
||||
<img width="100%" height="100%" src="http://via.placeholder.com/700x800">
|
||||
</a>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<br>
|
||||
|
||||
<!-- order details -->
|
||||
<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>
|
||||
|
||||
<!-- upload card -->
|
||||
<br>
|
||||
<el-row :gutter="12" justify="center" align="center">
|
||||
<el-col :span="8">
|
||||
<el-card class="box-card">
|
||||
<div slot="header" class="clearfix">
|
||||
<span>Purchase Order</span>
|
||||
<!-- <el-button style="float: right; padding: 3px 0" type="text">Operation button</el-button> -->
|
||||
</div>
|
||||
<el-row type="flex" :gutter="12">
|
||||
<el-col :span="12">
|
||||
<a target=" _blank" href="https://placeholder.com">
|
||||
<img width="100%" height="100%" src="http://via.placeholder.com/700x800">
|
||||
</a>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-card class="box-card">
|
||||
<div slot="header" class="clearfix">
|
||||
<span>Invoice</span>
|
||||
<!-- <el-button style="float: right; padding: 3px 0" type="text">Operation button</el-button> -->
|
||||
</div>
|
||||
<el-row type="flex" :gutter="12">
|
||||
<el-col :span="12">
|
||||
<a target=" _blank" href="https://placeholder.com">
|
||||
<img width="100%" height="100%" src="http://via.placeholder.com/700x800">
|
||||
</a>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<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" :gutter="12">
|
||||
<el-col :span="12">
|
||||
<a target=" _blank" href="https://placeholder.com">
|
||||
<img width="100%" height="100%" src="http://via.placeholder.com/700x800">
|
||||
</a>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<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>
|
||||
<br>
|
||||
</el-card>
|
||||
</el-row>
|
||||
<br>
|
||||
|
||||
<!-- order details -->
|
||||
<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" align="center" :show-header="false">
|
||||
<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" align="center" :show-header="false">
|
||||
<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 justify="center" align="center">
|
||||
<el-card class="box-card">
|
||||
<div slot="header" class="clearfix">
|
||||
<span>Order 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">
|
||||
<img src="http://via.placeholder.com/600x400" class="image">
|
||||
</el-col>
|
||||
</el-row>
|
||||
<br>
|
||||
|
||||
<el-row justify="center" align="center">
|
||||
<el-card class="box-card">
|
||||
<div slot="header" class="clearfix">
|
||||
<span>Order 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">
|
||||
<img src="http://via.placeholder.com/600x400" class="image">
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-card>
|
||||
</el-row>
|
||||
</el-main>
|
||||
</el-card>
|
||||
</el-row>
|
||||
</el-main>
|
||||
</template>
|
||||
<style>
|
||||
.booking-details {
|
||||
@@ -105,62 +105,61 @@
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
import VueCountdown from '@dmaksimovic/vue-countdown'
|
||||
import ProgressTrack from '~/components/ProgressTrack'
|
||||
import VueCountdown from '@dmaksimovic/vue-countdown'
|
||||
import ProgressTrack from '~/components/ProgressTrack'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'progress-track': ProgressTrack
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
status: 6,
|
||||
bookingConfirmTable: [{
|
||||
data1: 'Order Number :',
|
||||
data2: '001'
|
||||
}, {
|
||||
data1: 'Date :',
|
||||
data2: '25/5/2018'
|
||||
}, {
|
||||
data1: 'Customer Marking :',
|
||||
data2: 'CIEF/150ECE'
|
||||
}, {
|
||||
data1: '',
|
||||
data2: ''
|
||||
}, {
|
||||
data1: 'Payment Method :',
|
||||
data2: 'Cash/Bank Transfer'
|
||||
}, {
|
||||
data1: '',
|
||||
data2: ''
|
||||
}],
|
||||
bookingConfirmTable2: [{
|
||||
data1: 'CNY/RMB :',
|
||||
data2: 'CNY 120,500.00'
|
||||
}, {
|
||||
data1: '+ Service Charge :',
|
||||
data2: 'CNY 20.00'
|
||||
}, {
|
||||
data1: '/ RATE :',
|
||||
data2: '1.63'
|
||||
}, {
|
||||
data1: '',
|
||||
data2: 'MYR 73,848.04'
|
||||
}, {
|
||||
data1: '+ GST 6% :',
|
||||
data2: 'MYR 4,430.88'
|
||||
}, {
|
||||
data1: '',
|
||||
data2: 'MYR 78,278.92'
|
||||
}, {
|
||||
data1: '',
|
||||
data2: ''
|
||||
}]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
||||
|
||||
}
|
||||
export default {
|
||||
components: {
|
||||
'progress-track': ProgressTrack
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
status: 6,
|
||||
bookingConfirmTable: [{
|
||||
data1: 'Order Number :',
|
||||
data2: '001'
|
||||
}, {
|
||||
data1: 'Date :',
|
||||
data2: '25/5/2018'
|
||||
}, {
|
||||
data1: 'Customer Marking :',
|
||||
data2: 'CIEF/150ECE'
|
||||
}, {
|
||||
data1: '',
|
||||
data2: ''
|
||||
}, {
|
||||
data1: 'Payment Method :',
|
||||
data2: 'Cash/Bank Transfer'
|
||||
}, {
|
||||
data1: '',
|
||||
data2: ''
|
||||
}],
|
||||
bookingConfirmTable2: [{
|
||||
data1: 'CNY/RMB :',
|
||||
data2: 'CNY 120,500.00'
|
||||
}, {
|
||||
data1: '+ Service Charge :',
|
||||
data2: 'CNY 20.00'
|
||||
}, {
|
||||
data1: '/ RATE :',
|
||||
data2: '1.63'
|
||||
}, {
|
||||
data1: '',
|
||||
data2: 'MYR 73,848.04'
|
||||
}, {
|
||||
data1: '+ GST 6% :',
|
||||
data2: 'MYR 4,430.88'
|
||||
}, {
|
||||
data1: '',
|
||||
data2: 'MYR 78,278.92'
|
||||
}, {
|
||||
data1: '',
|
||||
data2: ''
|
||||
}]
|
||||
}
|
||||
</script>
|
||||
},
|
||||
methods: {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<el-main>
|
||||
<progress-track v-model="status"></progress-track>
|
||||
<progress-track v-model="status"/>
|
||||
|
||||
<div align="center">
|
||||
<h4 style="margin-top:5%;">Bankin Slip Verification In Progress</h4>
|
||||
@@ -16,13 +16,13 @@
|
||||
</div>
|
||||
<el-row :gutter="12">
|
||||
<el-col :span="12">
|
||||
<el-table :data="bookingConfirmTable" align="center" :show-header="false">
|
||||
<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" align="center" :show-header="false">
|
||||
<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>
|
||||
@@ -32,7 +32,7 @@
|
||||
</el-row>
|
||||
<br>
|
||||
|
||||
<el-row justify="center" align="center">
|
||||
<el-row justify="center" align="center">
|
||||
<el-card class="box-card">
|
||||
<div slot="header" class="clearfix">
|
||||
<span>BankinSlip</span>
|
||||
@@ -53,63 +53,62 @@
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
import VueCountdown from '@dmaksimovic/vue-countdown'
|
||||
import ProgressTrack from '~/components/ProgressTrack'
|
||||
import VueCountdown from '@dmaksimovic/vue-countdown'
|
||||
import ProgressTrack from '~/components/ProgressTrack'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'progress-track': ProgressTrack
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
status: 3,
|
||||
bookingConfirmTable: [{
|
||||
data1: 'Order Number :',
|
||||
data2: '001'
|
||||
}, {
|
||||
data1: 'Date :',
|
||||
data2: '25/5/2018'
|
||||
}, {
|
||||
data1: 'Customer Marking :',
|
||||
data2: 'CIEF/150ECE'
|
||||
}, {
|
||||
data1: '',
|
||||
data2: ''
|
||||
}, {
|
||||
data1: 'Payment Method :',
|
||||
data2: 'Cash/Bank Transfer'
|
||||
}, {
|
||||
data1: '',
|
||||
data2: ''
|
||||
}],
|
||||
bookingConfirmTable2:[{
|
||||
data1: 'CNY/RMB :',
|
||||
data2: 'CNY 120,500.00'
|
||||
}, {
|
||||
data1: '+ Service Charge :',
|
||||
data2: 'CNY 20.00'
|
||||
}, {
|
||||
data1: '/ RATE :',
|
||||
data2: '1.63'
|
||||
}, {
|
||||
data1: '',
|
||||
data2: 'MYR 73,848.04'
|
||||
}, {
|
||||
data1: '+ GST 6% :',
|
||||
data2: 'MYR 4,430.88'
|
||||
}, {
|
||||
data1: '',
|
||||
data2: 'MYR 78,278.92'
|
||||
}, {
|
||||
data1: '',
|
||||
data2: ''
|
||||
}
|
||||
]
|
||||
export default {
|
||||
components: {
|
||||
'progress-track': ProgressTrack
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
status: 3,
|
||||
bookingConfirmTable: [{
|
||||
data1: 'Order Number :',
|
||||
data2: '001'
|
||||
}, {
|
||||
data1: 'Date :',
|
||||
data2: '25/5/2018'
|
||||
}, {
|
||||
data1: 'Customer Marking :',
|
||||
data2: 'CIEF/150ECE'
|
||||
}, {
|
||||
data1: '',
|
||||
data2: ''
|
||||
}, {
|
||||
data1: 'Payment Method :',
|
||||
data2: 'Cash/Bank Transfer'
|
||||
}, {
|
||||
data1: '',
|
||||
data2: ''
|
||||
}],
|
||||
bookingConfirmTable2: [{
|
||||
data1: 'CNY/RMB :',
|
||||
data2: 'CNY 120,500.00'
|
||||
}, {
|
||||
data1: '+ Service Charge :',
|
||||
data2: 'CNY 20.00'
|
||||
}, {
|
||||
data1: '/ RATE :',
|
||||
data2: '1.63'
|
||||
}, {
|
||||
data1: '',
|
||||
data2: 'MYR 73,848.04'
|
||||
}, {
|
||||
data1: '+ GST 6% :',
|
||||
data2: 'MYR 4,430.88'
|
||||
}, {
|
||||
data1: '',
|
||||
data2: 'MYR 78,278.92'
|
||||
}, {
|
||||
data1: '',
|
||||
data2: ''
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
||||
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
||||
}
|
||||
</script>
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -1,88 +1,88 @@
|
||||
<template>
|
||||
<el-main>
|
||||
<progress-track v-model="status"></progress-track>
|
||||
<el-main>
|
||||
<progress-track v-model="status"/>
|
||||
|
||||
<div align="center">
|
||||
<h4 style="margin-top:5%;">Processing Invoice</h4>
|
||||
<br>
|
||||
<div align="center">
|
||||
<h4 style="margin-top:5%;">Processing Invoice</h4>
|
||||
<br>
|
||||
</div>
|
||||
|
||||
<!-- upload card -->
|
||||
<br>
|
||||
<el-row :gutter="12" justify="center" align="center">
|
||||
<el-col :span="12">
|
||||
<el-card class="box-card">
|
||||
<div slot="header" class="clearfix">
|
||||
<span>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">
|
||||
<a target=" _blank" href="https://placeholder.com">
|
||||
<img width="100%" height="100%" src="http://via.placeholder.com/700x800">
|
||||
</a>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<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 :gutter="12" type="flex">
|
||||
<el-col :span="12">
|
||||
<a target=" _blank" href="https://placeholder.com">
|
||||
<img width="100%" height="100%" src="http://via.placeholder.com/700x800">
|
||||
</a>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<br>
|
||||
|
||||
<!-- order details -->
|
||||
<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>
|
||||
|
||||
<!-- upload card -->
|
||||
<br>
|
||||
<el-row :gutter="12" justify="center" align="center">
|
||||
<el-col :span="12">
|
||||
<el-card class="box-card">
|
||||
<div slot="header" class="clearfix">
|
||||
<span>Purchase Order</span>
|
||||
<!-- <el-button style="float: right; padding: 3px 0" type="text">Operation button</el-button> -->
|
||||
</div>
|
||||
<el-row type="flex" :gutter="12">
|
||||
<el-col :span="12">
|
||||
<a target=" _blank" href="https://placeholder.com">
|
||||
<img width="100%" height="100%" src="http://via.placeholder.com/700x800">
|
||||
</a>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<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" :gutter="12">
|
||||
<el-col :span="12">
|
||||
<a target=" _blank" href="https://placeholder.com">
|
||||
<img width="100%" height="100%" src="http://via.placeholder.com/700x800">
|
||||
</a>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<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>
|
||||
<br>
|
||||
</el-card>
|
||||
</el-row>
|
||||
<br>
|
||||
|
||||
<!-- order details -->
|
||||
<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" align="center" :show-header="false">
|
||||
<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" align="center" :show-header="false">
|
||||
<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 justify="center" align="center">
|
||||
<el-card class="box-card">
|
||||
<div slot="header" class="clearfix">
|
||||
<span>Order 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">
|
||||
<img src="http://via.placeholder.com/600x400" class="image">
|
||||
</el-col>
|
||||
</el-row>
|
||||
<br>
|
||||
|
||||
<el-row justify="center" align="center">
|
||||
<el-card class="box-card">
|
||||
<div slot="header" class="clearfix">
|
||||
<span>Order 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">
|
||||
<img src="http://via.placeholder.com/600x400" class="image">
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-card>
|
||||
</el-row>
|
||||
</el-main>
|
||||
</el-card>
|
||||
</el-row>
|
||||
</el-main>
|
||||
</template>
|
||||
<style>
|
||||
.booking-details {
|
||||
@@ -90,62 +90,61 @@
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
import VueCountdown from '@dmaksimovic/vue-countdown'
|
||||
import ProgressTrack from '~/components/ProgressTrack'
|
||||
import VueCountdown from '@dmaksimovic/vue-countdown'
|
||||
import ProgressTrack from '~/components/ProgressTrack'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'progress-track': ProgressTrack
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
status: 5,
|
||||
bookingConfirmTable: [{
|
||||
data1: 'Order Number :',
|
||||
data2: '001'
|
||||
}, {
|
||||
data1: 'Date :',
|
||||
data2: '25/5/2018'
|
||||
}, {
|
||||
data1: 'Customer Marking :',
|
||||
data2: 'CIEF/150ECE'
|
||||
}, {
|
||||
data1: '',
|
||||
data2: ''
|
||||
}, {
|
||||
data1: 'Payment Method :',
|
||||
data2: 'Cash/Bank Transfer'
|
||||
}, {
|
||||
data1: '',
|
||||
data2: ''
|
||||
}],
|
||||
bookingConfirmTable2: [{
|
||||
data1: 'CNY/RMB :',
|
||||
data2: 'CNY 120,500.00'
|
||||
}, {
|
||||
data1: '+ Service Charge :',
|
||||
data2: 'CNY 20.00'
|
||||
}, {
|
||||
data1: '/ RATE :',
|
||||
data2: '1.63'
|
||||
}, {
|
||||
data1: '',
|
||||
data2: 'MYR 73,848.04'
|
||||
}, {
|
||||
data1: '+ GST 6% :',
|
||||
data2: 'MYR 4,430.88'
|
||||
}, {
|
||||
data1: '',
|
||||
data2: 'MYR 78,278.92'
|
||||
}, {
|
||||
data1: '',
|
||||
data2: ''
|
||||
}]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
||||
|
||||
}
|
||||
export default {
|
||||
components: {
|
||||
'progress-track': ProgressTrack
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
status: 5,
|
||||
bookingConfirmTable: [{
|
||||
data1: 'Order Number :',
|
||||
data2: '001'
|
||||
}, {
|
||||
data1: 'Date :',
|
||||
data2: '25/5/2018'
|
||||
}, {
|
||||
data1: 'Customer Marking :',
|
||||
data2: 'CIEF/150ECE'
|
||||
}, {
|
||||
data1: '',
|
||||
data2: ''
|
||||
}, {
|
||||
data1: 'Payment Method :',
|
||||
data2: 'Cash/Bank Transfer'
|
||||
}, {
|
||||
data1: '',
|
||||
data2: ''
|
||||
}],
|
||||
bookingConfirmTable2: [{
|
||||
data1: 'CNY/RMB :',
|
||||
data2: 'CNY 120,500.00'
|
||||
}, {
|
||||
data1: '+ Service Charge :',
|
||||
data2: 'CNY 20.00'
|
||||
}, {
|
||||
data1: '/ RATE :',
|
||||
data2: '1.63'
|
||||
}, {
|
||||
data1: '',
|
||||
data2: 'MYR 73,848.04'
|
||||
}, {
|
||||
data1: '+ GST 6% :',
|
||||
data2: 'MYR 4,430.88'
|
||||
}, {
|
||||
data1: '',
|
||||
data2: 'MYR 78,278.92'
|
||||
}, {
|
||||
data1: '',
|
||||
data2: ''
|
||||
}]
|
||||
}
|
||||
</script>
|
||||
},
|
||||
methods: {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<el-main>
|
||||
<progress-track v-model="status"></progress-track>
|
||||
<progress-track v-model="status"/>
|
||||
|
||||
<div align="center">
|
||||
<h4 style="margin-top:5%;">Transfer In Progress</h4>
|
||||
@@ -18,13 +18,13 @@
|
||||
</div>
|
||||
<el-row :gutter="12">
|
||||
<el-col :span="12">
|
||||
<el-table :data="bookingConfirmTable" align="center" :show-header="false">
|
||||
<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" align="center" :show-header="false">
|
||||
<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>
|
||||
@@ -34,7 +34,7 @@
|
||||
</el-row>
|
||||
<br>
|
||||
|
||||
<el-row justify="center" align="center">
|
||||
<el-row justify="center" align="center">
|
||||
<el-card class="box-card">
|
||||
<div slot="header" class="clearfix">
|
||||
<span>BankinSlip</span>
|
||||
@@ -55,63 +55,62 @@
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
import VueCountdown from '@dmaksimovic/vue-countdown'
|
||||
import ProgressTrack from '~/components/ProgressTrack'
|
||||
import VueCountdown from '@dmaksimovic/vue-countdown'
|
||||
import ProgressTrack from '~/components/ProgressTrack'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'progress-track': ProgressTrack
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
status: 4,
|
||||
bookingConfirmTable: [{
|
||||
data1: 'Order Number :',
|
||||
data2: '001'
|
||||
}, {
|
||||
data1: 'Date :',
|
||||
data2: '25/5/2018'
|
||||
}, {
|
||||
data1: 'Customer Marking :',
|
||||
data2: 'CIEF/150ECE'
|
||||
}, {
|
||||
data1: '',
|
||||
data2: ''
|
||||
}, {
|
||||
data1: 'Payment Method :',
|
||||
data2: 'Cash/Bank Transfer'
|
||||
}, {
|
||||
data1: '',
|
||||
data2: ''
|
||||
}],
|
||||
bookingConfirmTable2:[{
|
||||
data1: 'CNY/RMB :',
|
||||
data2: 'CNY 120,500.00'
|
||||
}, {
|
||||
data1: '+ Service Charge :',
|
||||
data2: 'CNY 20.00'
|
||||
}, {
|
||||
data1: '/ RATE :',
|
||||
data2: '1.63'
|
||||
}, {
|
||||
data1: '',
|
||||
data2: 'MYR 73,848.04'
|
||||
}, {
|
||||
data1: '+ GST 6% :',
|
||||
data2: 'MYR 4,430.88'
|
||||
}, {
|
||||
data1: '',
|
||||
data2: 'MYR 78,278.92'
|
||||
}, {
|
||||
data1: '',
|
||||
data2: ''
|
||||
}
|
||||
]
|
||||
export default {
|
||||
components: {
|
||||
'progress-track': ProgressTrack
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
status: 4,
|
||||
bookingConfirmTable: [{
|
||||
data1: 'Order Number :',
|
||||
data2: '001'
|
||||
}, {
|
||||
data1: 'Date :',
|
||||
data2: '25/5/2018'
|
||||
}, {
|
||||
data1: 'Customer Marking :',
|
||||
data2: 'CIEF/150ECE'
|
||||
}, {
|
||||
data1: '',
|
||||
data2: ''
|
||||
}, {
|
||||
data1: 'Payment Method :',
|
||||
data2: 'Cash/Bank Transfer'
|
||||
}, {
|
||||
data1: '',
|
||||
data2: ''
|
||||
}],
|
||||
bookingConfirmTable2: [{
|
||||
data1: 'CNY/RMB :',
|
||||
data2: 'CNY 120,500.00'
|
||||
}, {
|
||||
data1: '+ Service Charge :',
|
||||
data2: 'CNY 20.00'
|
||||
}, {
|
||||
data1: '/ RATE :',
|
||||
data2: '1.63'
|
||||
}, {
|
||||
data1: '',
|
||||
data2: 'MYR 73,848.04'
|
||||
}, {
|
||||
data1: '+ GST 6% :',
|
||||
data2: 'MYR 4,430.88'
|
||||
}, {
|
||||
data1: '',
|
||||
data2: 'MYR 78,278.92'
|
||||
}, {
|
||||
data1: '',
|
||||
data2: ''
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
||||
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
||||
}
|
||||
</script>
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -1,102 +1,102 @@
|
||||
<template>
|
||||
<el-main>
|
||||
<progress-track v-model="status"></progress-track>
|
||||
<el-main>
|
||||
<progress-track v-model="status"/>
|
||||
|
||||
<div align="center">
|
||||
<h4 style="margin-top:5%;">Transfer Completed</h4>
|
||||
<h5> Please upload your PO </h5>
|
||||
<br>
|
||||
<div align="center">
|
||||
<h4 style="margin-top:5%;">Transfer Completed</h4>
|
||||
<h5> Please upload your PO </h5>
|
||||
<br>
|
||||
</div>
|
||||
|
||||
<!-- upload card -->
|
||||
<br>
|
||||
<el-row :gutter="12" justify="center" align="center">
|
||||
<el-col :span="12">
|
||||
<el-card class="box-card">
|
||||
<div slot="header" class="clearfix">
|
||||
<span>Upload PO</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-po'" :on-exceed="handleExceed" :on-preview="handlePreview"
|
||||
:on-remove="handleRemove"
|
||||
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">jpg/png/pdf files with a size less than 3mb</div>
|
||||
</el-upload>
|
||||
|
||||
<br>
|
||||
|
||||
<div class="bottom clearfix" style="text-align:right;">
|
||||
<el-button :loading="loading" type="primary" @click="uploadPo">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>China Bank Slip</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">
|
||||
<a href="https://placeholder.com">
|
||||
<img width="100%" height="100%" src="http://via.placeholder.com/700x800">
|
||||
</a>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<br>
|
||||
|
||||
<!-- order details -->
|
||||
<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>
|
||||
|
||||
<!-- upload card -->
|
||||
<br>
|
||||
<el-row :gutter="12" justify="center" align="center">
|
||||
<el-col :span="12">
|
||||
<el-card class="box-card">
|
||||
<div slot="header" class="clearfix">
|
||||
<span>Upload PO</span>
|
||||
<!-- <el-button style="float: right; padding: 3px 0" type="text">Operation button</el-button> -->
|
||||
</div>
|
||||
|
||||
<!-- upload image -->
|
||||
<el-upload class="upload-demo" drag v-bind:action="'/api/booking/' + booking_id + '/upload-po'"
|
||||
:on-exceed="handleExceed"
|
||||
:on-preview="handlePreview"
|
||||
:on-remove="handleRemove"
|
||||
multiple>
|
||||
<i class="el-icon-upload"></i>
|
||||
<div class="el-upload__text">Drop file here or
|
||||
<em>click to upload</em>
|
||||
</div>
|
||||
<div class="el-upload__tip" slot="tip">jpg/png/pdf files with a size less than 3mb</div>
|
||||
</el-upload>
|
||||
|
||||
<br>
|
||||
|
||||
<div class="bottom clearfix" style="text-align:right;">
|
||||
<el-button @click="uploadPo" :loading="loading" type="primary">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>China Bank Slip</span>
|
||||
<!-- <el-button style="float: right; padding: 3px 0" type="text">Operation button</el-button> -->
|
||||
</div>
|
||||
<el-row type="flex" :gutter="12">
|
||||
<el-col :span="12">
|
||||
<a href="https://placeholder.com">
|
||||
<img width="100%" height="100%" src="http://via.placeholder.com/700x800">
|
||||
</a>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<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>
|
||||
<br>
|
||||
</el-card>
|
||||
</el-row>
|
||||
<br>
|
||||
|
||||
<!-- order details -->
|
||||
<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" align="center" :show-header="false">
|
||||
<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" align="center" :show-header="false">
|
||||
<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 justify="center" align="center">
|
||||
<el-card class="box-card">
|
||||
<div slot="header" class="clearfix">
|
||||
<span>Order 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">
|
||||
<img src="http://via.placeholder.com/600x400" class="image">
|
||||
</el-col>
|
||||
</el-row>
|
||||
<br>
|
||||
|
||||
<el-row justify="center" align="center">
|
||||
<el-card class="box-card">
|
||||
<div slot="header" class="clearfix">
|
||||
<span>Order 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">
|
||||
<img src="http://via.placeholder.com/600x400" class="image">
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-card>
|
||||
</el-row>
|
||||
</el-main>
|
||||
</el-card>
|
||||
</el-row>
|
||||
</el-main>
|
||||
</template>
|
||||
<style>
|
||||
.booking-details {
|
||||
@@ -104,101 +104,100 @@
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
import VueCountdown from '@dmaksimovic/vue-countdown'
|
||||
import ProgressTrack from '~/components/ProgressTrack'
|
||||
import axios from 'axios'
|
||||
import VueCountdown from '@dmaksimovic/vue-countdown'
|
||||
import ProgressTrack from '~/components/ProgressTrack'
|
||||
import axios from 'axios'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'progress-track': ProgressTrack
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
booking_id: this.$route.params.id,
|
||||
status: 5,
|
||||
loading: false,
|
||||
bookingConfirmTable: [{
|
||||
data1: 'Order Number :',
|
||||
data2: '001'
|
||||
}, {
|
||||
data1: 'Date :',
|
||||
data2: '25/5/2018'
|
||||
}, {
|
||||
data1: 'Customer Marking :',
|
||||
data2: 'CIEF/150ECE'
|
||||
}, {
|
||||
data1: '',
|
||||
data2: ''
|
||||
}, {
|
||||
data1: 'Payment Method :',
|
||||
data2: 'Cash/Bank Transfer'
|
||||
}, {
|
||||
data1: '',
|
||||
data2: ''
|
||||
}],
|
||||
bookingConfirmTable2: [{
|
||||
data1: 'CNY/RMB :',
|
||||
data2: 'CNY 120,500.00'
|
||||
}, {
|
||||
data1: '+ Service Charge :',
|
||||
data2: 'CNY 20.00'
|
||||
}, {
|
||||
data1: '/ RATE :',
|
||||
data2: '1.63'
|
||||
}, {
|
||||
data1: '',
|
||||
data2: 'MYR 73,848.04'
|
||||
}, {
|
||||
data1: '+ GST 6% :',
|
||||
data2: 'MYR 4,430.88'
|
||||
}, {
|
||||
data1: '',
|
||||
data2: 'MYR 78,278.92'
|
||||
}, {
|
||||
data1: '',
|
||||
data2: ''
|
||||
}]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
uploadPo(){
|
||||
this.loading = true
|
||||
axios
|
||||
.post('/api/booking/' + this.$route.params.id + '/confirm-po')
|
||||
.then((response) => {
|
||||
console.log(response)
|
||||
this.$message({
|
||||
showClose: true,
|
||||
message: 'Your PO has been uploaded. We are processing the Invoice.',
|
||||
type: 'success',
|
||||
duration: 5000,
|
||||
});
|
||||
this.$router.push({
|
||||
name: 'home'
|
||||
})
|
||||
this.loading = false
|
||||
|
||||
}).catch((error) => {
|
||||
console.log(error)
|
||||
loading.close()
|
||||
this.$router.push({
|
||||
name: 'notfound'
|
||||
})
|
||||
this.loading = false
|
||||
})
|
||||
},
|
||||
handleRemove(file, fileList) {
|
||||
console.log(file, fileList);
|
||||
},
|
||||
handlePreview(file) {
|
||||
console.log(file);
|
||||
},
|
||||
handleExceed(files, fileList) {
|
||||
this.$message.warning(`The limit is 3, you selected ${files.length} files this time, add up to ${files.length + fileList.length} totally`);
|
||||
},
|
||||
beforeRemove(file, fileList) {
|
||||
return this.$confirm(`确定移除 ${ file.name }？`);
|
||||
}
|
||||
}
|
||||
export default {
|
||||
components: {
|
||||
'progress-track': ProgressTrack
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
booking_id: this.$route.params.id,
|
||||
status: 5,
|
||||
loading: false,
|
||||
bookingConfirmTable: [{
|
||||
data1: 'Order Number :',
|
||||
data2: '001'
|
||||
}, {
|
||||
data1: 'Date :',
|
||||
data2: '25/5/2018'
|
||||
}, {
|
||||
data1: 'Customer Marking :',
|
||||
data2: 'CIEF/150ECE'
|
||||
}, {
|
||||
data1: '',
|
||||
data2: ''
|
||||
}, {
|
||||
data1: 'Payment Method :',
|
||||
data2: 'Cash/Bank Transfer'
|
||||
}, {
|
||||
data1: '',
|
||||
data2: ''
|
||||
}],
|
||||
bookingConfirmTable2: [{
|
||||
data1: 'CNY/RMB :',
|
||||
data2: 'CNY 120,500.00'
|
||||
}, {
|
||||
data1: '+ Service Charge :',
|
||||
data2: 'CNY 20.00'
|
||||
}, {
|
||||
data1: '/ RATE :',
|
||||
data2: '1.63'
|
||||
}, {
|
||||
data1: '',
|
||||
data2: 'MYR 73,848.04'
|
||||
}, {
|
||||
data1: '+ GST 6% :',
|
||||
data2: 'MYR 4,430.88'
|
||||
}, {
|
||||
data1: '',
|
||||
data2: 'MYR 78,278.92'
|
||||
}, {
|
||||
data1: '',
|
||||
data2: ''
|
||||
}]
|
||||
}
|
||||
</script>
|
||||
},
|
||||
methods: {
|
||||
uploadPo () {
|
||||
this.loading = true
|
||||
axios
|
||||
.post('/api/booking/' + this.$route.params.id + '/confirm-po')
|
||||
.then((response) => {
|
||||
console.log(response)
|
||||
this.$message({
|
||||
showClose: true,
|
||||
message: 'Your PO has been uploaded. We are processing the Invoice.',
|
||||
type: 'success',
|
||||
duration: 5000
|
||||
})
|
||||
this.$router.push({
|
||||
name: 'home'
|
||||
})
|
||||
this.loading = false
|
||||
}).catch((error) => {
|
||||
console.log(error)
|
||||
loading.close()
|
||||
this.$router.push({
|
||||
name: 'notfound'
|
||||
})
|
||||
this.loading = false
|
||||
})
|
||||
},
|
||||
handleRemove (file, fileList) {
|
||||
console.log(file, fileList)
|
||||
},
|
||||
handlePreview (file) {
|
||||
console.log(file)
|
||||
},
|
||||
handleExceed (files, fileList) {
|
||||
this.$message.warning(`The limit is 3, you selected ${files.length} files this time, add up to ${files.length + fileList.length} totally`)
|
||||
},
|
||||
beforeRemove (file, fileList) {
|
||||
return this.$confirm(`确定移除 ${file.name}？`)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<el-main>
|
||||
<progress-track v-model="status"></progress-track>
|
||||
<progress-track v-model="status"/>
|
||||
|
||||
<div align="center">
|
||||
<h4 style="margin-top:5%;">Waiting For Payment</h4>
|
||||
@@ -26,10 +26,8 @@
|
||||
</el-row>
|
||||
<br>
|
||||
|
||||
|
||||
<!-- action="https://jsonplaceholder.typicode.com/posts/" -->
|
||||
|
||||
|
||||
<div align="center">
|
||||
|
||||
<vue-countdown :countdownend="handleCoutdownend" :time="booking.timeout">
|
||||
@@ -39,11 +37,9 @@
|
||||
</div>
|
||||
<br>
|
||||
|
||||
|
||||
|
||||
<!-- upload image -->
|
||||
<el-upload v-bind:action="'/api/booking/' + booking_id + '/upload-user-bankslip'" :on-preview="handlePictureCardPreview" :on-remove="handleRemove"
|
||||
list-type="picture-card" align="center">
|
||||
<el-upload :action="'/api/booking/' + booking_id + '/upload-user-bankslip'" :on-preview="handlePictureCardPreview" :on-remove="handleRemove"
|
||||
list-type="picture-card" align="center">
|
||||
<i class="el-icon-plus" />
|
||||
</el-upload>
|
||||
<el-dialog :visible.sync="dialogVisible">
|
||||
@@ -56,15 +52,15 @@
|
||||
<el-form-item label="Amount (RM) :"> -->
|
||||
<div align="center">
|
||||
Bankin Amount (RM) :
|
||||
<el-form :model="user_slip_form" :rules="rules" ref="user_slip_form">
|
||||
<el-form ref="user_slip_form" :model="user_slip_form" :rules="rules">
|
||||
<div align="center">
|
||||
<el-form-item prop="transfer_amount">
|
||||
<el-input v-model="user_slip_form.transfer_amount" type="text" placeholder="Transfer Amount" style="width: 20%"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<div align="center">
|
||||
<el-button type="primary" :loading="loading" @click="submitUserSlip('user_slip_form')">Submit</el-button>
|
||||
<div align="center">
|
||||
<el-button :loading="loading" type="primary" @click="submitUserSlip('user_slip_form')">Submit</el-button>
|
||||
<router-link :to="{ name: 'home' }" class="small ml-auto my-auto">
|
||||
Upload Later
|
||||
</router-link>
|
||||
@@ -78,8 +74,6 @@
|
||||
<!-- </el-form-item>
|
||||
</el-form> -->
|
||||
|
||||
|
||||
|
||||
</el-main>
|
||||
</template>
|
||||
<style>
|
||||
@@ -88,151 +82,144 @@
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
import VueCountdown from '@xkeshi/vue-countdown'
|
||||
import ProgressTrack from '~/components/ProgressTrack'
|
||||
import axios from 'axios'
|
||||
import VueCountdown from '@xkeshi/vue-countdown'
|
||||
import ProgressTrack from '~/components/ProgressTrack'
|
||||
import axios from 'axios'
|
||||
|
||||
export default {
|
||||
middleware: ['auth'],
|
||||
name: 'MyComponent',
|
||||
components: {
|
||||
'vue-countdown': VueCountdown,
|
||||
'progress-track': ProgressTrack
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
status: 2,
|
||||
start: false,
|
||||
loading: false,
|
||||
dialogImageUrl: '',
|
||||
dialogVisible: false,
|
||||
booking_id: this.$route.params.id,
|
||||
user_slip_form:{
|
||||
transfer_amount : ''
|
||||
},
|
||||
booking: {
|
||||
amount: '',
|
||||
bankin_amount: '',
|
||||
timeout: 1
|
||||
},
|
||||
rules: {
|
||||
transfer_amount: [{
|
||||
required: true,
|
||||
message: 'Please input amount',
|
||||
trigger: 'change'
|
||||
}, ],}
|
||||
}
|
||||
},
|
||||
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) => {
|
||||
console.log(response)
|
||||
this.booking.amount = response.data.amount
|
||||
this.booking.bankin_amount = response.data.bia
|
||||
this.booking.timeout = response.data.timeout * 1000
|
||||
this.start = true;
|
||||
loading.close()
|
||||
|
||||
if(this.booking.timeout < 0 ){
|
||||
this.$message({
|
||||
showClose: true,
|
||||
message: 'Booking timeout, please make another booking.',
|
||||
type: 'error',
|
||||
duration: 30000,
|
||||
});
|
||||
this.$router.push({
|
||||
name: 'home'
|
||||
})
|
||||
}
|
||||
|
||||
}).catch((error) => {
|
||||
console.log(error)
|
||||
loading.close()
|
||||
this.$router.push({
|
||||
name: 'notfound'
|
||||
})
|
||||
})
|
||||
|
||||
},
|
||||
methods: {
|
||||
handleCoutdownend(){
|
||||
this.$message({
|
||||
showClose: true,
|
||||
message: 'Booking timeout, please make another booking.',
|
||||
type: 'error',
|
||||
duration: 30000,
|
||||
});
|
||||
this.$router.push({
|
||||
name: 'home'
|
||||
})
|
||||
export default {
|
||||
middleware: ['auth'],
|
||||
name: 'MyComponent',
|
||||
components: {
|
||||
'vue-countdown': VueCountdown,
|
||||
'progress-track': ProgressTrack
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
status: 2,
|
||||
start: false,
|
||||
loading: false,
|
||||
dialogImageUrl: '',
|
||||
dialogVisible: false,
|
||||
booking_id: this.$route.params.id,
|
||||
user_slip_form: {
|
||||
transfer_amount: ''
|
||||
},
|
||||
handleRemove(file, fileList) {
|
||||
console.log(file, fileList)
|
||||
booking: {
|
||||
amount: '',
|
||||
bankin_amount: '',
|
||||
timeout: 1
|
||||
},
|
||||
handlePictureCardPreview(file) {
|
||||
this.dialogImageUrl = file.url
|
||||
this.dialogVisible = true
|
||||
},
|
||||
submitUserSlip(formName) {
|
||||
this.loading = true
|
||||
this.$refs[formName].validate((valid) => {
|
||||
if (valid) {
|
||||
let newConfirmation = {
|
||||
amount: this.booking.amount,
|
||||
term: this.term
|
||||
}
|
||||
}
|
||||
else{
|
||||
this.loading = false
|
||||
return
|
||||
}
|
||||
});
|
||||
let newUserSlip = {
|
||||
transfer_amount : this.user_slip_form.transfer_amount
|
||||
}
|
||||
axios.patch('/api/booking/'+ this.booking_id +'/bankslip-amount', newUserSlip)
|
||||
.then((response) => {
|
||||
|
||||
this.$message({
|
||||
showClose: true,
|
||||
message: 'Your bankinslip has been submitted, please wait admin to approve.',
|
||||
type: 'success',
|
||||
duration: 5000,
|
||||
});
|
||||
|
||||
console.log(response)
|
||||
this.$router.push({
|
||||
name: 'home'
|
||||
})
|
||||
|
||||
})
|
||||
.catch((error) => {
|
||||
this.loading = false
|
||||
this.$message({
|
||||
showClose: true,
|
||||
message: 'Please upload your bankin slip first.',
|
||||
type: 'warning',
|
||||
duration: 10000,
|
||||
});
|
||||
console.log(error)
|
||||
return
|
||||
})
|
||||
},
|
||||
handleTimeExpire() {
|
||||
alert('Booking expired')
|
||||
},
|
||||
startTimer() {
|
||||
this.start = true
|
||||
},
|
||||
|
||||
rules: {
|
||||
transfer_amount: [{
|
||||
required: true,
|
||||
message: 'Please input amount',
|
||||
trigger: 'change'
|
||||
} ]}
|
||||
}
|
||||
},
|
||||
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) => {
|
||||
console.log(response)
|
||||
this.booking.amount = response.data.amount
|
||||
this.booking.bankin_amount = response.data.bia
|
||||
this.booking.timeout = response.data.timeout * 1000
|
||||
this.start = true
|
||||
loading.close()
|
||||
|
||||
if (this.booking.timeout < 0) {
|
||||
this.$message({
|
||||
showClose: true,
|
||||
message: 'Booking timeout, please make another booking.',
|
||||
type: 'error',
|
||||
duration: 30000
|
||||
})
|
||||
this.$router.push({
|
||||
name: 'home'
|
||||
})
|
||||
}
|
||||
}).catch((error) => {
|
||||
console.log(error)
|
||||
loading.close()
|
||||
this.$router.push({
|
||||
name: 'notfound'
|
||||
})
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
handleCoutdownend () {
|
||||
this.$message({
|
||||
showClose: true,
|
||||
message: 'Booking timeout, please make another booking.',
|
||||
type: 'error',
|
||||
duration: 30000
|
||||
})
|
||||
this.$router.push({
|
||||
name: 'home'
|
||||
})
|
||||
},
|
||||
handleRemove (file, fileList) {
|
||||
console.log(file, fileList)
|
||||
},
|
||||
handlePictureCardPreview (file) {
|
||||
this.dialogImageUrl = file.url
|
||||
this.dialogVisible = true
|
||||
},
|
||||
submitUserSlip (formName) {
|
||||
this.loading = true
|
||||
this.$refs[formName].validate((valid) => {
|
||||
if (valid) {
|
||||
let newConfirmation = {
|
||||
amount: this.booking.amount,
|
||||
term: this.term
|
||||
}
|
||||
} else {
|
||||
this.loading = false
|
||||
}
|
||||
})
|
||||
let newUserSlip = {
|
||||
transfer_amount: this.user_slip_form.transfer_amount
|
||||
}
|
||||
axios.patch('/api/booking/' + this.booking_id + '/bankslip-amount', newUserSlip)
|
||||
.then((response) => {
|
||||
this.$message({
|
||||
showClose: true,
|
||||
message: 'Your bankinslip has been submitted, please wait admin to approve.',
|
||||
type: 'success',
|
||||
duration: 5000
|
||||
})
|
||||
|
||||
console.log(response)
|
||||
this.$router.push({
|
||||
name: 'home'
|
||||
})
|
||||
})
|
||||
.catch((error) => {
|
||||
this.loading = false
|
||||
this.$message({
|
||||
showClose: true,
|
||||
message: 'Please upload your bankin slip first.',
|
||||
type: 'warning',
|
||||
duration: 10000
|
||||
})
|
||||
console.log(error)
|
||||
})
|
||||
},
|
||||
handleTimeExpire () {
|
||||
alert('Booking expired')
|
||||
},
|
||||
startTimer () {
|
||||
this.start = true
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
}
|
||||
</script>
|
||||
|
||||
+237
-241
@@ -140,8 +140,8 @@
|
||||
<!-- Rate-Display-end -->
|
||||
|
||||
<!-- Form_popup -->
|
||||
<el-dialog :visible.sync="dialogFormVisible" title="Booking" :fullscreen="true" center>
|
||||
<el-form :model="bookingForm" :rules="rules" ref="bookingForm">
|
||||
<el-dialog :visible.sync="dialogFormVisible" :fullscreen="true" title="Booking" center>
|
||||
<el-form ref="bookingForm" :model="bookingForm" :rules="rules">
|
||||
<div align="center">
|
||||
<el-form-item prop="account_name">
|
||||
<el-input v-model="bookingForm.account_name" placeholder="China Beneficiary Account" style="width: 80%" required="true" />
|
||||
@@ -159,7 +159,7 @@
|
||||
<el-form-item>
|
||||
<el-button @click="dialogFormVisible = false">Cancel</el-button>
|
||||
|
||||
<el-button type="primary" :loading="loading" @click="getCalculationValue('bookingForm')">Book Now</el-button>
|
||||
<el-button :loading="loading" type="primary" @click="getCalculationValue('bookingForm')">Book Now</el-button>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</el-form>
|
||||
@@ -167,7 +167,7 @@
|
||||
<!-- Form_popup-end -->
|
||||
|
||||
<!-- Booking_confirmation_popup -->
|
||||
<el-dialog :visible.sync="dialogFormVisible1" title="Booking Confirmation" :fullscreen="true" center>
|
||||
<el-dialog :visible.sync="dialogFormVisible1" :fullscreen="true" title="Booking Confirmation" center>
|
||||
|
||||
<!-- Table_booking_confirmation -->
|
||||
<!-- <el-table :data="bookingConfirmTable" align="center">
|
||||
@@ -203,12 +203,12 @@
|
||||
<td width="200" class="el-table_2_column_9 is-left "> {{ bookingConfirmTable.rate }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td width="200" class="el-table_2_column_9 is-right "> </td>
|
||||
<td width="200" class="el-table_2_column_9 is-right "/>
|
||||
<td width="200" class="el-table_2_column_9 is-left "> RM {{ bookingConfirmTable.bankin_amount }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td width="200" class="el-table_2_column_9 is-right "> </td>
|
||||
<td width="200" class="el-table_2_column_9 is-left "></td>
|
||||
<td width="200" class="el-table_2_column_9 is-right "/>
|
||||
<td width="200" class="el-table_2_column_9 is-left "/>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
@@ -226,7 +226,7 @@
|
||||
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<!-- <el-button @click="dialogFormVisible = false">Cancel</el-button> -->
|
||||
<el-button type="primary" :loading="loading" @click="createBooking">Confirm</el-button>
|
||||
<el-button :loading="loading" type="primary" @click="createBooking">Confirm</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
<!-- Booking_confirmation_popup -->
|
||||
@@ -241,15 +241,14 @@
|
||||
<el-table :data="bookingTable">
|
||||
<el-table-column label="No." width="100">
|
||||
<el-button size="mini" @click="handleEdit(scope.$index, scope.row)">Update</el-button>
|
||||
<el-button type="text" slot-scope="scope" @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.id }}</el-button>
|
||||
</el-table-column>
|
||||
<el-table-column label="DateTime" prop="created_at" width="180" sortable/>
|
||||
<el-table-column label="Term" prop="term" :filters="[{text: 'X1', value: 'X1'}, {text: 'X2', value: 'X2'}]" width="100" :filter-method="filterHandler">
|
||||
</el-table-column> -->
|
||||
<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" />
|
||||
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> -->
|
||||
@@ -267,8 +266,8 @@
|
||||
<!-- <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 type="text" slot-scope="scope" @click="(event) => { BookingStatus(scope.row.status, scope.row.id) }"> View Status </el-button>
|
||||
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-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>
|
||||
@@ -287,247 +286,244 @@
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
import Form from 'vform'
|
||||
import LoginWithGithub from '~/components/LoginWithGithub'
|
||||
import store from '~/store'
|
||||
import axios from 'axios'
|
||||
import Form from 'vform'
|
||||
import LoginWithGithub from '~/components/LoginWithGithub'
|
||||
import store from '~/store'
|
||||
import axios from 'axios'
|
||||
|
||||
export default {
|
||||
middleware: ['auth'],
|
||||
export default {
|
||||
middleware: ['auth'],
|
||||
|
||||
data() {
|
||||
return {
|
||||
confirmForm: new Form({
|
||||
term: '',
|
||||
amount: ''
|
||||
}),
|
||||
loading: false,
|
||||
status: '',
|
||||
booking: {
|
||||
amount: '',
|
||||
rate: ''
|
||||
},
|
||||
bookingForm: {
|
||||
//amount: '',
|
||||
account_name: '',
|
||||
bank_name: '',
|
||||
bank_branch: '',
|
||||
account_num: ''
|
||||
},
|
||||
rules: {
|
||||
amount: [{
|
||||
required: true,
|
||||
message: 'Please input amount',
|
||||
trigger: 'change'
|
||||
}, ],
|
||||
bank_name: [{
|
||||
required: true,
|
||||
message: 'Please input bank name',
|
||||
trigger: 'change'
|
||||
}, ],
|
||||
account_name: [{
|
||||
required: true,
|
||||
message: 'Please input account name',
|
||||
trigger: 'change'
|
||||
}],
|
||||
bank_branch: [{
|
||||
required: true,
|
||||
message: 'Please input branch',
|
||||
trigger: 'change'
|
||||
}],
|
||||
account_num: [{
|
||||
required: true,
|
||||
message: 'Please input account number',
|
||||
trigger: 'change'
|
||||
}]
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
confirmForm: new Form({
|
||||
term: '',
|
||||
options1: [{
|
||||
value: 'RMB',
|
||||
label: 'RMB'
|
||||
amount: ''
|
||||
}),
|
||||
loading: false,
|
||||
status: '',
|
||||
booking: {
|
||||
amount: '',
|
||||
rate: ''
|
||||
},
|
||||
bookingForm: {
|
||||
// amount: '',
|
||||
account_name: '',
|
||||
bank_name: '',
|
||||
bank_branch: '',
|
||||
account_num: ''
|
||||
},
|
||||
rules: {
|
||||
amount: [{
|
||||
required: true,
|
||||
message: 'Please input amount',
|
||||
trigger: 'change'
|
||||
} ],
|
||||
bank_name: [{
|
||||
required: true,
|
||||
message: 'Please input bank name',
|
||||
trigger: 'change'
|
||||
} ],
|
||||
account_name: [{
|
||||
required: true,
|
||||
message: 'Please input account name',
|
||||
trigger: 'change'
|
||||
}],
|
||||
options2: [{
|
||||
value2: 'MYR',
|
||||
label2: 'MYR'
|
||||
bank_branch: [{
|
||||
required: true,
|
||||
message: 'Please input branch',
|
||||
trigger: 'change'
|
||||
}],
|
||||
account_num: [{
|
||||
required: true,
|
||||
message: 'Please input account number',
|
||||
trigger: 'change'
|
||||
}]
|
||||
},
|
||||
term: '',
|
||||
options1: [{
|
||||
value: 'RMB',
|
||||
dialogFormVisible: false,
|
||||
dialogFormVisible1: false,
|
||||
formLabelWidth: '0px',
|
||||
bookingTable: [
|
||||
],
|
||||
bookingConfirmTable: {
|
||||
date: 'undefined',
|
||||
marking: 'undefined',
|
||||
payment_method: 'undefined',
|
||||
amount: 'undefined',
|
||||
service_charge: 'undefined',
|
||||
rate: 'undefined',
|
||||
bankin_amount: 'undefined',
|
||||
china_beneficiary: 'undefined',
|
||||
status: 2
|
||||
}
|
||||
label: 'RMB'
|
||||
}],
|
||||
options2: [{
|
||||
value2: 'MYR',
|
||||
label2: 'MYR'
|
||||
}],
|
||||
value: 'RMB',
|
||||
dialogFormVisible: false,
|
||||
dialogFormVisible1: false,
|
||||
formLabelWidth: '0px',
|
||||
bookingTable: [
|
||||
],
|
||||
bookingConfirmTable: {
|
||||
date: 'undefined',
|
||||
marking: 'undefined',
|
||||
payment_method: 'undefined',
|
||||
amount: 'undefined',
|
||||
service_charge: 'undefined',
|
||||
rate: 'undefined',
|
||||
bankin_amount: 'undefined',
|
||||
china_beneficiary: 'undefined',
|
||||
status: 2
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
axios
|
||||
.get('/api/booking/')
|
||||
.then((response) => {
|
||||
console.log(response)
|
||||
this.bookingTable = response.data
|
||||
|
||||
// loading.close()
|
||||
}).catch((error) => {
|
||||
// console.log(error)
|
||||
// loading.close()
|
||||
// this.$router.push({
|
||||
// name: 'notfound'
|
||||
// })
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
// TODO fetch booking data on load
|
||||
formatter (row, column) {
|
||||
return row.address
|
||||
},
|
||||
mounted(){
|
||||
axios
|
||||
.get('/api/booking/')
|
||||
filterTag (value, row) {
|
||||
return row.tag === value
|
||||
},
|
||||
filterHandler (value, row, column) {
|
||||
const property = column['property']
|
||||
return row[property] === value
|
||||
},
|
||||
acceptTerm: function (newterm) {
|
||||
if (this.booking.amount == '') {
|
||||
this.$message({
|
||||
message: 'Please input amount',
|
||||
type: 'warning'
|
||||
})
|
||||
return
|
||||
}
|
||||
this.dialogFormVisible = true
|
||||
this.term = newterm
|
||||
},
|
||||
BookingList () {
|
||||
axios.get('api/booking')
|
||||
.then((response) => {
|
||||
console.log(response)
|
||||
this.bookingTable = response.data
|
||||
|
||||
//loading.close()
|
||||
}).catch((error) => {
|
||||
// console.log(error)
|
||||
// loading.close()
|
||||
// this.$router.push({
|
||||
// name: 'notfound'
|
||||
// })
|
||||
this.list = response.data
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
// TODO fetch booking data on load
|
||||
formatter(row, column) {
|
||||
return row.address
|
||||
},
|
||||
filterTag(value, row) {
|
||||
return row.tag === value
|
||||
},
|
||||
filterHandler(value, row, column) {
|
||||
const property = column['property']
|
||||
return row[property] === value
|
||||
},
|
||||
acceptTerm: function (newterm) {
|
||||
if (this.booking.amount == '') {
|
||||
this.$message({
|
||||
message: 'Please input amount',
|
||||
type: 'warning'
|
||||
});
|
||||
return;
|
||||
}
|
||||
this.dialogFormVisible = true
|
||||
this.term = newterm
|
||||
},
|
||||
BookingList() {
|
||||
axios.get('api/booking')
|
||||
.then((response) => {
|
||||
console.log(response)
|
||||
this.list = response.data
|
||||
})
|
||||
},
|
||||
// Get calculation before submitting booking
|
||||
getCalculationValue(formName) {
|
||||
this.loading = true
|
||||
this.$refs[formName].validate((valid) => {
|
||||
if (valid) {
|
||||
let newConfirmation = {
|
||||
amount: this.booking.amount,
|
||||
term: this.term
|
||||
}
|
||||
axios.post('api/booking/calculation', newConfirmation)
|
||||
.then((response) => {
|
||||
this.loading = false
|
||||
console.log(response)
|
||||
this.bookingConfirmTable.date = response.data.date
|
||||
this.bookingConfirmTable.marking = response.data.marking
|
||||
this.bookingConfirmTable.payment_method = response.data.payment_method
|
||||
this.bookingConfirmTable.amount = response.data.amount
|
||||
this.bookingConfirmTable.service_charge = response.data.service_charge
|
||||
this.bookingConfirmTable.rate = response.data.rate
|
||||
this.bookingConfirmTable.bankin_amount = response.data.bankin_amount
|
||||
this.bookingConfirmTable.account_name = this.bookingForm.account_name
|
||||
this.dialogFormVisible = false
|
||||
this.dialogFormVisible1 = true
|
||||
})
|
||||
.catch((error) => {
|
||||
this.loading = false
|
||||
console.log(error)
|
||||
})
|
||||
} else {
|
||||
return;
|
||||
// Get calculation before submitting booking
|
||||
getCalculationValue (formName) {
|
||||
this.loading = true
|
||||
this.$refs[formName].validate((valid) => {
|
||||
if (valid) {
|
||||
let newConfirmation = {
|
||||
amount: this.booking.amount,
|
||||
term: this.term
|
||||
}
|
||||
});
|
||||
axios.post('api/booking/calculation', newConfirmation)
|
||||
.then((response) => {
|
||||
this.loading = false
|
||||
console.log(response)
|
||||
this.bookingConfirmTable.date = response.data.date
|
||||
this.bookingConfirmTable.marking = response.data.marking
|
||||
this.bookingConfirmTable.payment_method = response.data.payment_method
|
||||
this.bookingConfirmTable.amount = response.data.amount
|
||||
this.bookingConfirmTable.service_charge = response.data.service_charge
|
||||
this.bookingConfirmTable.rate = response.data.rate
|
||||
this.bookingConfirmTable.bankin_amount = response.data.bankin_amount
|
||||
this.bookingConfirmTable.account_name = this.bookingForm.account_name
|
||||
this.dialogFormVisible = false
|
||||
this.dialogFormVisible1 = true
|
||||
})
|
||||
.catch((error) => {
|
||||
this.loading = false
|
||||
console.log(error)
|
||||
})
|
||||
} else {
|
||||
|
||||
},
|
||||
createBooking: function () {
|
||||
this.loading = true,
|
||||
this.dialogFormVisible1 = true
|
||||
|
||||
let newBooking = {
|
||||
account_name: this.bookingForm.account_name,
|
||||
account_num: this.bookingForm.account_num,
|
||||
bank_name: this.bookingForm.bank_name,
|
||||
bank_branch: this.bookingForm.bank_branch,
|
||||
amount: this.booking.amount,
|
||||
term: this.term
|
||||
}
|
||||
|
||||
console.log(newBooking)
|
||||
axios.post('api/booking', newBooking)
|
||||
.then((response) => {
|
||||
this.loading = false
|
||||
// push with return id
|
||||
this.$router.push({
|
||||
name: 'booking.user.upload',
|
||||
params: {id: response.data.id }
|
||||
})
|
||||
|
||||
// pass variable to another router
|
||||
|
||||
})
|
||||
.catch((error) => {
|
||||
console.log(error)
|
||||
return
|
||||
})
|
||||
},
|
||||
BookingStatus(status, booking_id) {
|
||||
console.log(status)
|
||||
// TODO : Get booking status from server
|
||||
this.status = status
|
||||
|
||||
switch (this.status) {
|
||||
case 1:
|
||||
this.$router.push({
|
||||
name: 'booking.user.upload',
|
||||
params: {id: booking_id }
|
||||
})
|
||||
|
||||
case 2:
|
||||
this.$router.push({
|
||||
name: 'booking.confirmation',
|
||||
params: {id: booking_id }
|
||||
})
|
||||
break;
|
||||
case 3:
|
||||
this.$router.push({
|
||||
name: 'booking.transfer',
|
||||
params: {id: booking_id }
|
||||
})
|
||||
break;
|
||||
case 4:
|
||||
this.$router.push({
|
||||
name: 'booking.user.uploadpo',
|
||||
params: {id: booking_id }
|
||||
})
|
||||
break;
|
||||
|
||||
case 5:
|
||||
this.$router.push({
|
||||
name: 'booking.user.pocomplete',
|
||||
params: {id: booking_id }
|
||||
})
|
||||
break;
|
||||
|
||||
case 6:
|
||||
this.$router.push({
|
||||
name: 'booking.complete',
|
||||
params: {id: booking_id }
|
||||
})
|
||||
break;
|
||||
default:
|
||||
break
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
createBooking: function () {
|
||||
this.loading = true,
|
||||
this.dialogFormVisible1 = true
|
||||
|
||||
let newBooking = {
|
||||
account_name: this.bookingForm.account_name,
|
||||
account_num: this.bookingForm.account_num,
|
||||
bank_name: this.bookingForm.bank_name,
|
||||
bank_branch: this.bookingForm.bank_branch,
|
||||
amount: this.booking.amount,
|
||||
term: this.term
|
||||
}
|
||||
|
||||
console.log(newBooking)
|
||||
axios.post('api/booking', newBooking)
|
||||
.then((response) => {
|
||||
this.loading = false
|
||||
// push with return id
|
||||
this.$router.push({
|
||||
name: 'booking.user.upload',
|
||||
params: {id: response.data.id }
|
||||
})
|
||||
|
||||
// pass variable to another router
|
||||
})
|
||||
.catch((error) => {
|
||||
console.log(error)
|
||||
})
|
||||
},
|
||||
BookingStatus (status, booking_id) {
|
||||
console.log(status)
|
||||
// TODO : Get booking status from server
|
||||
this.status = status
|
||||
|
||||
switch (this.status) {
|
||||
case 1:
|
||||
this.$router.push({
|
||||
name: 'booking.user.upload',
|
||||
params: {id: booking_id }
|
||||
})
|
||||
|
||||
case 2:
|
||||
this.$router.push({
|
||||
name: 'booking.confirmation',
|
||||
params: {id: booking_id }
|
||||
})
|
||||
break
|
||||
case 3:
|
||||
this.$router.push({
|
||||
name: 'booking.transfer',
|
||||
params: {id: booking_id }
|
||||
})
|
||||
break
|
||||
case 4:
|
||||
this.$router.push({
|
||||
name: 'booking.user.uploadpo',
|
||||
params: {id: booking_id }
|
||||
})
|
||||
break
|
||||
|
||||
case 5:
|
||||
this.$router.push({
|
||||
name: 'booking.user.pocomplete',
|
||||
params: {id: booking_id }
|
||||
})
|
||||
break
|
||||
|
||||
case 6:
|
||||
this.$router.push({
|
||||
name: 'booking.complete',
|
||||
params: {id: booking_id }
|
||||
})
|
||||
break
|
||||
default:
|
||||
break
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -18,15 +18,13 @@ const UploadPo = () => import('~/pages/booking/uploadPo').then(m => m.default ||
|
||||
const PoComplete = () => import('~/pages/booking/poComplete').then(m => m.default || m)
|
||||
const Completed = () => import('~/pages/booking/completed').then(m => m.default || m)
|
||||
|
||||
|
||||
// Admin booking
|
||||
const Verification = () => import('~/pages/admin/booking/verification').then(m => m.default || m)
|
||||
const Supplier = () => import('~/pages/admin/booking/supplierBooking').then(m => m.default || m)
|
||||
const SupplierReport = () => import('~/pages/admin/booking/supplierReport').then(m => m.default || m)
|
||||
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 Completed = () => import('~/pages/booking/uploadUserBankSlip').then(m => m.default || m)
|
||||
|
||||
// const Completed = () => import('~/pages/booking/uploadUserBankSlip').then(m => m.default || m)
|
||||
|
||||
const AdminHome = () => import('~/pages/admin/home').then(m => m.default || m)
|
||||
|
||||
@@ -45,7 +43,7 @@ export default [
|
||||
{ path: 'profile', name: 'settings.profile', component: SettingsProfile },
|
||||
{ path: 'password', name: 'settings.password', component: SettingsPassword }
|
||||
] },
|
||||
|
||||
|
||||
// Booking
|
||||
{ path: '/booking/:id/upload-user-bankslip', name: 'booking.user.upload', component: Upload },
|
||||
{ path: '/booking/:id/confirmation', name: 'booking.confirmation', component: Confirmation },
|
||||
@@ -54,15 +52,14 @@ export default [
|
||||
{ path: '/booking/:id/po-complete', name: 'booking.user.pocomplete', component: PoComplete },
|
||||
{ path: '/booking/:id/complete', name: 'booking.complete', component: Completed },
|
||||
|
||||
// Admin booking
|
||||
// Admin booking
|
||||
{ path: '/booking/:id/verification', name: 'booking.admin.verification', component: Verification },
|
||||
{ path: '/booking/:id/supplier', name: 'booking.admin.supplier', component: Supplier },
|
||||
{ path: '/booking/:id/supplier-report', name: 'booking.admin.supplier.report', component: SupplierReport },
|
||||
{ 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/complete', name: 'booking.complete', component: Completed },
|
||||
|
||||
// { path: '/booking/:id/complete', name: 'booking.complete', component: Completed },
|
||||
|
||||
{ path: '/admin', name: 'admin.home', component: AdminHome },
|
||||
{ path: '*', name:'notfound', component: NotFound }
|
||||
{ path: '*', name: 'notfound', component: NotFound }
|
||||
]
|
||||
|
||||
@@ -37,7 +37,7 @@ export const mutations = {
|
||||
|
||||
[types.LOGOUT] (state) {
|
||||
state.user = null
|
||||
state.role = null
|
||||
state.role = null
|
||||
state.token = null
|
||||
|
||||
Cookies.remove('token')
|
||||
|
||||
Reference in New Issue
Block a user