mirror of
https://gitlab.com/CIEFWorldwideSdnBhd/exchange.git
synced 2026-08-19 04:14:04 +00:00
added switch case for booking status
TBD step 2-6 page beautified code from home
This commit is contained in:
Jack Goh
+418
-310
@@ -8,92 +8,155 @@
|
||||
<div class="grid-content bg-purple" align="center">
|
||||
I need :
|
||||
<el-select v-model="value" placeholder="RMB">
|
||||
<el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value"/>
|
||||
<el-option v-for="item in options2" :key="item.value2" :label="item.label2" :value="item.value2"/>
|
||||
<el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value" />
|
||||
<el-option v-for="item in options2" :key="item.value2" :label="item.label2" :value="item.value2" />
|
||||
</el-select>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<br>
|
||||
<el-row :gutter="20" type="flex" justify="center" align="middle">
|
||||
<el-col :xs="18" :sm="18" :md="8" :lg="8" :xl="8"><div class="grid-content bg-purple" align="left"><el-input v-model="booking.amount" placeholder="Amount"/></div></el-col>
|
||||
<el-col :xs="18" :sm="18" :md="8" :lg="8" :xl="8">
|
||||
<div class="grid-content bg-purple" align="left">
|
||||
<el-input v-model="booking.amount" placeholder="Amount" />
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<!-- Input-Amount-end -->
|
||||
<hr>
|
||||
<!-- Rate-Display -->
|
||||
<br>
|
||||
<el-row :gutter="20" type="flex" justify="center" align="middle">
|
||||
<el-col><div class="grid-content bg-purple" align="right"/></el-col>
|
||||
<el-col><div class="grid-content bg-purple" align="left"/></el-col>
|
||||
<el-col><div class="grid-content bg-purple" align="center">Cash/Bank Transfer</div></el-col>
|
||||
<el-col><div class="grid-content bg-purple" align="center">Cheque</div></el-col>
|
||||
<el-col><div class="grid-content bg-purple" align="center">BA</div></el-col>
|
||||
<el-col>
|
||||
<div class="grid-content bg-purple" align="right" />
|
||||
</el-col>
|
||||
<el-col>
|
||||
<div class="grid-content bg-purple" align="left" />
|
||||
</el-col>
|
||||
<el-col>
|
||||
<div class="grid-content bg-purple" align="center">Cash/Bank Transfer</div>
|
||||
</el-col>
|
||||
<el-col>
|
||||
<div class="grid-content bg-purple" align="center">Cheque</div>
|
||||
</el-col>
|
||||
<el-col>
|
||||
<div class="grid-content bg-purple" align="center">BA</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-row :gutter="20" type="flex" justify="center" align="middle">
|
||||
<el-col>
|
||||
<el-col>
|
||||
<el-tooltip class="item" effect="dark" content="Payment to China Supplier" placement="left">
|
||||
<div class="grid-content bg-purple" align="right"><i type="button" class="el-icon-question" circle/></div>
|
||||
<div class="grid-content bg-purple" align="right">
|
||||
<i type="button" class="el-icon-question" circle/>
|
||||
</div>
|
||||
</el-tooltip>
|
||||
</el-col>
|
||||
<!-- <el-col><div class="grid-content bg-purple" align="right"><i type="button" class="el-icon-question" circle/></div></el-col> -->
|
||||
<el-col><div class="grid-content bg-purple" align="left">X1 :</div></el-col>
|
||||
<el-col><div class="grid-content bg-purple" align="center">1.56</div></el-col>
|
||||
<el-col><div class="grid-content bg-purple" align="center">1.64</div></el-col>
|
||||
<el-col><div class="grid-content bg-purple" align="center">1.62</div></el-col>
|
||||
<el-col>
|
||||
<div class="grid-content bg-purple" align="left">X1 :</div>
|
||||
</el-col>
|
||||
<el-col>
|
||||
<div class="grid-content bg-purple" align="center">1.56</div>
|
||||
</el-col>
|
||||
<el-col>
|
||||
<div class="grid-content bg-purple" align="center">1.64</div>
|
||||
</el-col>
|
||||
<el-col>
|
||||
<div class="grid-content bg-purple" align="center">1.62</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-row :gutter="20" type="flex" justify="center" align="middle">
|
||||
<el-col><div class="grid-content bg-purple"/></el-col>
|
||||
<el-col><div class="grid-content bg-purple"/></el-col>
|
||||
<el-col><div class="grid-content bg-purple" align="center">
|
||||
<el-button type="text" @click="acceptTerm('x1_cash')">Book</el-button></div></el-col>
|
||||
<el-col><div class="grid-content bg-purple" align="center">
|
||||
<el-button type="text" @click="acceptTerm('x1_cheque')">Book</el-button></div></el-col>
|
||||
<el-col><div class="grid-content bg-purple" align="center">
|
||||
<el-button type="text" @click="acceptTerm('x1_ba')">Book</el-button></div></el-col>
|
||||
<el-col>
|
||||
<div class="grid-content bg-purple" />
|
||||
</el-col>
|
||||
<el-col>
|
||||
<div class="grid-content bg-purple" />
|
||||
</el-col>
|
||||
<el-col>
|
||||
<div class="grid-content bg-purple" align="center">
|
||||
<el-button type="text" @click="acceptTerm('x1_cash')">Book</el-button>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col>
|
||||
<div class="grid-content bg-purple" align="center">
|
||||
<el-button type="text" @click="acceptTerm('x1_cheque')">Book</el-button>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col>
|
||||
<div class="grid-content bg-purple" align="center">
|
||||
<el-button type="text" @click="acceptTerm('x1_ba')">Book</el-button>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<br>
|
||||
<el-row :gutter="20" type="flex" justify="center" align="middle">
|
||||
<el-col>
|
||||
<el-col>
|
||||
<el-tooltip class="item" effect="dark" content="Payment to China Supplier Only" placement="left">
|
||||
<div class="grid-content bg-purple" align="right"><i type="button" class="el-icon-question" circle/></div>
|
||||
<div class="grid-content bg-purple" align="right">
|
||||
<i type="button" class="el-icon-question" circle/>
|
||||
</div>
|
||||
</el-tooltip>
|
||||
</el-col>
|
||||
<el-col><div class="grid-content bg-purple" align="left">X2 :</div></el-col>
|
||||
<el-col><div class="grid-content bg-purple" align="center">1.56</div></el-col>
|
||||
<el-col><div class="grid-content bg-purple" align="center">1.64</div></el-col>
|
||||
<el-col><div class="grid-content bg-purple" align="center">1.62</div></el-col>
|
||||
<el-col>
|
||||
<div class="grid-content bg-purple" align="left">X2 :</div>
|
||||
</el-col>
|
||||
<el-col>
|
||||
<div class="grid-content bg-purple" align="center">1.56</div>
|
||||
</el-col>
|
||||
<el-col>
|
||||
<div class="grid-content bg-purple" align="center">1.64</div>
|
||||
</el-col>
|
||||
<el-col>
|
||||
<div class="grid-content bg-purple" align="center">1.62</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-row :gutter="20" type="flex" justify="center" align="middle">
|
||||
<el-col><div class="grid-content bg-purple"/></el-col>
|
||||
<el-col><div class="grid-content bg-purple"/></el-col>
|
||||
<el-col><div class="grid-content bg-purple" align="center">
|
||||
<el-button type="text" @click="acceptTerm('x2_cash')">Book</el-button></div></el-col>
|
||||
<el-col><div class="grid-content bg-purple" align="center">
|
||||
<el-button type="text" @click="acceptTerm('x2_cheque')">Book</el-button></div></el-col>
|
||||
<el-col><div class="grid-content bg-purple" align="center">
|
||||
<el-button type="text" @click="acceptTerm('x2_ba')">Book</el-button></div></el-col>
|
||||
<el-col>
|
||||
<div class="grid-content bg-purple" />
|
||||
</el-col>
|
||||
<el-col>
|
||||
<div class="grid-content bg-purple" />
|
||||
</el-col>
|
||||
<el-col>
|
||||
<div class="grid-content bg-purple" align="center">
|
||||
<el-button type="text" @click="acceptTerm('x2_cash')">Book</el-button>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col>
|
||||
<div class="grid-content bg-purple" align="center">
|
||||
<el-button type="text" @click="acceptTerm('x2_cheque')">Book</el-button>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col>
|
||||
<div class="grid-content bg-purple" align="center">
|
||||
<el-button type="text" @click="acceptTerm('x2_ba')">Book</el-button>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<!-- Rate-Display-end -->
|
||||
|
||||
<!-- Form_popup -->
|
||||
<el-dialog :visible.sync="dialogFormVisible" title="Booking" fullscreen="true" center>
|
||||
<el-form><div align="center">
|
||||
<el-form-item>
|
||||
<el-input v-model="booking.account_name" type="text" placeholder="China Beneficiary Account" style="width: 80%"/>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-input v-model="booking.bank_name" type="text" placeholder="Bank Name / AliPay / WechatPay" style="width: 80%"/>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-input v-model="booking.bank_branch" type="text" placeholder="Branch / 分行/支行" style="width: 80%"/>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-input v-model="booking.account_num" type="text" placeholder="Account Number / AliPay_ID / WechatPay_ID" style="width: 80%"/>
|
||||
</el-form-item></div>
|
||||
<el-dialog :visible.sync="dialogFormVisible" title="Booking" :fullscreen="true" center>
|
||||
<el-form>
|
||||
<div align="center">
|
||||
<el-form-item>
|
||||
<el-input v-model="booking.account_name" type="text" placeholder="China Beneficiary Account" style="width: 80%" />
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-input v-model="booking.bank_name" type="text" placeholder="Bank Name / AliPay / WechatPay" style="width: 80%" />
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-input v-model="booking.bank_branch" type="text" placeholder="Branch / 分行/支行" style="width: 80%" />
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-input v-model="booking.account_num" type="text" placeholder="Account Number / AliPay_ID / WechatPay_ID" style="width: 80%"
|
||||
/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</el-form>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click="dialogFormVisible = false">Cancel</el-button>
|
||||
@@ -104,12 +167,12 @@
|
||||
<!-- Form_popup-end -->
|
||||
|
||||
<!-- Booking_confirmation_popup -->
|
||||
<el-dialog :visible.sync="dialogFormVisible1" title="Booking Confirmation" fullscreen="true" center>
|
||||
<el-dialog :visible.sync="dialogFormVisible1" title="Booking Confirmation" :fullscreen="true" center>
|
||||
|
||||
<!-- Table_booking_confirmation -->
|
||||
<el-table :data="bookingConfirmTable" align="center">
|
||||
<el-table-column prop="data1" align="right" width="200"/>
|
||||
<el-table-column prop="data2" align="left" width="200"/>
|
||||
<el-table-column prop="data1" align="right" width="200" />
|
||||
<el-table-column prop="data2" align="left" width="200" />
|
||||
</el-table>
|
||||
<!-- Table_booking_confirmation-end -->
|
||||
|
||||
@@ -120,55 +183,47 @@
|
||||
</el-dialog>
|
||||
<!-- Booking_confirmation_popup -->
|
||||
|
||||
<br><br>
|
||||
<br>
|
||||
<br>
|
||||
<hr>
|
||||
|
||||
<!-- Booking Table -->
|
||||
<el-row :gutter="20" >
|
||||
<el-row :gutter="20">
|
||||
<div>
|
||||
<el-table :data="bookingTable">
|
||||
<el-table-column
|
||||
label="No."
|
||||
width="106">
|
||||
<el-button type="text" slot-scope="scope" @click="viewStatus('{{scope.row.booking_no}}')"> {{scope.row.booking_no}}</el-button>
|
||||
|
||||
|
||||
</el-table-column>
|
||||
<el-table :data="bookingTable">
|
||||
<el-table-column label="No." width="106">
|
||||
<el-button size="mini" @click="handleEdit(scope.$index, scope.row)">Update</el-button>
|
||||
<el-button type="text" slot-scope="scope" @click="(event) => { BookingStatus(event, scope.row.booking_no) }"> {{scope.row.booking_no}}</el-button>
|
||||
</el-table-column>
|
||||
<el-table-column label="Date" prop="date" width="120" sortable/>
|
||||
<!-- <el-table-column label="Term" :filters="[{text: 'X1', value: 'X1'}, {text: 'X2', value: 'X2'}]" :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="150"/>
|
||||
<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="150" />
|
||||
<!-- <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="hover" placement="top">
|
||||
<p>{{ scope.row.status_desc }}</p>
|
||||
<div slot="reference" class="name-wrapper">
|
||||
<el-tag size="medium">{{ scope.row.status }}</el-tag>
|
||||
</div>
|
||||
</el-popover>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<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.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" >
|
||||
<template slot-scope="scope">
|
||||
<el-button
|
||||
size="mini"
|
||||
@click="handleEdit(scope.$index, scope.row)">Update</el-button>
|
||||
<el-button
|
||||
size="mini"
|
||||
type="danger"
|
||||
@click="handleDelete(scope.$index, scope.row)">Cancel</el-button>
|
||||
</template>
|
||||
<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">
|
||||
<template slot-scope="scope">
|
||||
<el-button size="mini" @click="handleEdit(scope.$index, scope.row)">Update</el-button>
|
||||
<el-button size="mini" type="danger" @click="BookingStatus(scope.$index, scope.row)">Cancel</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
@@ -178,236 +233,289 @@
|
||||
</el-main>
|
||||
</template>
|
||||
<style>
|
||||
.el-tag{
|
||||
.el-tag {
|
||||
cursor: pointer;
|
||||
}
|
||||
</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 {
|
||||
booking: {amount: '', account_name: '', bank_name: '', bank_branch: '', account_num: ''},
|
||||
term: '',
|
||||
options1: [{
|
||||
data() {
|
||||
return {
|
||||
status: '',
|
||||
booking: {
|
||||
amount: '',
|
||||
account_name: '',
|
||||
bank_name: '',
|
||||
bank_branch: '',
|
||||
account_num: ''
|
||||
},
|
||||
term: '',
|
||||
options1: [{
|
||||
value: 'RMB',
|
||||
label: 'RMB'
|
||||
}],
|
||||
options2: [{
|
||||
value2: 'MYR',
|
||||
label2: 'MYR'
|
||||
}],
|
||||
value: 'RMB',
|
||||
label: 'RMB'
|
||||
}],
|
||||
options2: [{
|
||||
value2: 'MYR',
|
||||
label2: 'MYR'
|
||||
}],
|
||||
value: 'RMB',
|
||||
dialogFormVisible: false,
|
||||
dialogFormVisible1: false,
|
||||
formLabelWidth: '0px',
|
||||
bookingTable: [
|
||||
{
|
||||
date: '12/1/2018',
|
||||
booking_no: '001',
|
||||
rate: '1.23',
|
||||
amount: 'RM 1000',
|
||||
transfer_amount: 'RMB 10000',
|
||||
status: '(1/6)',
|
||||
status_desc: 'Waiting for payment',
|
||||
timeout: '56:00:00'
|
||||
},
|
||||
{
|
||||
date: '12/1/2018',
|
||||
booking_no: '002',
|
||||
rate: '1.23',
|
||||
amount: 'RM 1000',
|
||||
transfer_amount: 'RMB 10000',
|
||||
status: '(2/6)',
|
||||
status_desc: 'Waiting verification',
|
||||
timeout: '56:00:00'
|
||||
},
|
||||
{
|
||||
date: '12/1/2018',
|
||||
booking_no: '003',
|
||||
rate: '1.23',
|
||||
amount: 'RM 1000',
|
||||
transfer_amount: 'RMB 10000',
|
||||
status: '(3/6)',
|
||||
status_desc: 'Processing transfer',
|
||||
timeout: '56:00:00'
|
||||
},
|
||||
{
|
||||
date: '12/1/2018',
|
||||
booking_no: '004',
|
||||
rate: '1.23',
|
||||
amount: 'RM 1000',
|
||||
transfer_amount: 'RMB 10000',
|
||||
status: '(4/6)',
|
||||
status_desc: 'Transfer Complete, please upload your PO',
|
||||
timeout: '56:00:00'
|
||||
},
|
||||
{
|
||||
date: '12/1/2018',
|
||||
booking_no: '005',
|
||||
rate: '1.23',
|
||||
amount: 'RM 1000',
|
||||
transfer_amount: 'RMB 10000',
|
||||
status: '(5/6)',
|
||||
status_desc: 'Processing invoice',
|
||||
timeout: '56:00:00'
|
||||
},
|
||||
{
|
||||
date: '12/1/2018',
|
||||
booking_no: '006',
|
||||
rate: '1.23',
|
||||
amount: 'RM 1000',
|
||||
transfer_amount: 'RMB 10000',
|
||||
status: '(6/6)',
|
||||
status_desc: 'Order Completed',
|
||||
timeout: '56:00:00'
|
||||
}
|
||||
],
|
||||
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: ''
|
||||
}, {
|
||||
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: ''
|
||||
}, {
|
||||
data1: 'China Beneficiary Acc :',
|
||||
data2: ''
|
||||
}, {
|
||||
data1: '',
|
||||
data2: 'PENDING'
|
||||
}, {
|
||||
data1: '',
|
||||
data2: ''
|
||||
}, {
|
||||
data1: 'Bank In Amount :',
|
||||
data2: 'MYR 78,278.92'
|
||||
}, {
|
||||
data1: '',
|
||||
data2: ''
|
||||
}]
|
||||
}
|
||||
},
|
||||
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;
|
||||
dialogFormVisible: false,
|
||||
dialogFormVisible1: false,
|
||||
formLabelWidth: '0px',
|
||||
bookingTable: [{
|
||||
date: '12/1/2018',
|
||||
booking_no: '001',
|
||||
rate: '1.23',
|
||||
amount: 'RM 1000',
|
||||
transfer_amount: 'RMB 10000',
|
||||
status: '(1/6)',
|
||||
status_desc: 'Waiting for payment',
|
||||
timeout: '56:00:00'
|
||||
},
|
||||
{
|
||||
date: '12/1/2018',
|
||||
booking_no: '002',
|
||||
rate: '1.23',
|
||||
amount: 'RM 1000',
|
||||
transfer_amount: 'RMB 10000',
|
||||
status: '(2/6)',
|
||||
status_desc: 'Waiting verification',
|
||||
timeout: '56:00:00'
|
||||
},
|
||||
{
|
||||
date: '12/1/2018',
|
||||
booking_no: '003',
|
||||
rate: '1.23',
|
||||
amount: 'RM 1000',
|
||||
transfer_amount: 'RMB 10000',
|
||||
status: '(3/6)',
|
||||
status_desc: 'Processing transfer',
|
||||
timeout: '56:00:00'
|
||||
},
|
||||
{
|
||||
date: '12/1/2018',
|
||||
booking_no: '004',
|
||||
rate: '1.23',
|
||||
amount: 'RM 1000',
|
||||
transfer_amount: 'RMB 10000',
|
||||
status: '(4/6)',
|
||||
status_desc: 'Transfer Complete, please upload your PO',
|
||||
timeout: '56:00:00'
|
||||
},
|
||||
{
|
||||
date: '12/1/2018',
|
||||
booking_no: '005',
|
||||
rate: '1.23',
|
||||
amount: 'RM 1000',
|
||||
transfer_amount: 'RMB 10000',
|
||||
status: '(5/6)',
|
||||
status_desc: 'Processing invoice',
|
||||
timeout: '56:00:00'
|
||||
},
|
||||
{
|
||||
date: '12/1/2018',
|
||||
booking_no: '006',
|
||||
rate: '1.23',
|
||||
amount: 'RM 1000',
|
||||
transfer_amount: 'RMB 10000',
|
||||
status: '(6/6)',
|
||||
status_desc: 'Order Completed',
|
||||
timeout: '56:00:00'
|
||||
}
|
||||
],
|
||||
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: ''
|
||||
}, {
|
||||
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: ''
|
||||
}, {
|
||||
data1: 'China Beneficiary Acc :',
|
||||
data2: ''
|
||||
}, {
|
||||
data1: '',
|
||||
data2: 'PENDING'
|
||||
}, {
|
||||
data1: '',
|
||||
data2: ''
|
||||
}, {
|
||||
data1: 'Bank In Amount :',
|
||||
data2: 'MYR 78,278.92'
|
||||
}, {
|
||||
data1: '',
|
||||
data2: ''
|
||||
}]
|
||||
}
|
||||
this.dialogFormVisible = true
|
||||
this.term = newterm
|
||||
},
|
||||
getCalculationValue () {
|
||||
this.dialogFormVisible = false
|
||||
this.dialogFormVisible1 = true
|
||||
},
|
||||
createBooking: function () {
|
||||
this.$router.push({ name: 'booking.user.upload' })
|
||||
// this.dialogFormVisible1 = true
|
||||
methods: {
|
||||
// TODO fetch booking data on load
|
||||
|
||||
// let newBooking = {
|
||||
// amount: this.booking.amount,
|
||||
// account_name: this.booking.account_name,
|
||||
// bank_name: this.booking.bank_name,
|
||||
// bank_branch: this.booking.bank_branch,
|
||||
// account_num: this.booking.account_num,
|
||||
// term: this.term
|
||||
// }
|
||||
// console.log(newBooking)
|
||||
// axios.post('api/booking', newBooking)
|
||||
// .then((response) => {
|
||||
// console.log(response)
|
||||
|
||||
// // this code to insert the input data into the database (success)
|
||||
// // this.Booking.amount = amount;
|
||||
// // this.Booking.account_name = account_name;
|
||||
// // this.Booking.bank_name = bank_name;
|
||||
// // this.Booking.branch = bank_branch;
|
||||
// // this.Booking.account_num = account_num;
|
||||
// // this.term = term;
|
||||
// })
|
||||
// .catch((error) => {
|
||||
// console.log(error)
|
||||
// })
|
||||
},
|
||||
BookingStatus(id){
|
||||
axios.post('api/booking/'+ id + '/status', newBooking)
|
||||
.then((response) => {
|
||||
console.log(response)
|
||||
|
||||
// this code to insert the input data into the database (success)
|
||||
// this.Booking.amount = amount;
|
||||
// this.Booking.account_name = account_name;
|
||||
// this.Booking.bank_name = bank_name;
|
||||
// this.Booking.branch = bank_branch;
|
||||
// this.Booking.account_num = account_num;
|
||||
// this.term = term;
|
||||
})
|
||||
.catch((error) => {
|
||||
console.log(error)
|
||||
})
|
||||
},
|
||||
BookingList () {
|
||||
axios.get('api/booking')
|
||||
.then((response) => {
|
||||
console.log(response)
|
||||
this.list = response.data
|
||||
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
|
||||
},
|
||||
getCalculationValue() {
|
||||
this.dialogFormVisible = false
|
||||
this.dialogFormVisible1 = true
|
||||
},
|
||||
createBooking: function () {
|
||||
this.$router.push({
|
||||
name: 'booking.user.upload'
|
||||
})
|
||||
// this.dialogFormVisible1 = true
|
||||
|
||||
// let newBooking = {
|
||||
// amount: this.booking.amount,
|
||||
// account_name: this.booking.account_name,
|
||||
// bank_name: this.booking.bank_name,
|
||||
// bank_branch: this.booking.bank_branch,
|
||||
// account_num: this.booking.account_num,
|
||||
// term: this.term
|
||||
// }
|
||||
// console.log(newBooking)
|
||||
// axios.post('api/booking', newBooking)
|
||||
// .then((response) => {
|
||||
// console.log(response)
|
||||
|
||||
// // this code to insert the input data into the database (success)
|
||||
// // this.Booking.amount = amount;
|
||||
// // this.Booking.account_name = account_name;
|
||||
// // this.Booking.bank_name = bank_name;
|
||||
// // this.Booking.branch = bank_branch;
|
||||
// // this.Booking.account_num = account_num;
|
||||
// // this.term = term;
|
||||
// })
|
||||
// .catch((error) => {
|
||||
// console.log(error)
|
||||
// })
|
||||
},
|
||||
handleDelete(index, row) {
|
||||
console.log(index, row);
|
||||
},
|
||||
BookingStatus(index, row) {
|
||||
|
||||
// TODO : Get booking status from server
|
||||
this.status = 1
|
||||
|
||||
switch (this.status) {
|
||||
case 1:
|
||||
this.$router.push({
|
||||
name: 'booking.user.upload'
|
||||
})
|
||||
|
||||
case 2:
|
||||
this.$router.push({
|
||||
name: 'booking.user.upload'
|
||||
})
|
||||
break;
|
||||
case 3:
|
||||
this.$router.push({
|
||||
name: 'booking.user.upload'
|
||||
})
|
||||
break;
|
||||
case 4:
|
||||
this.$router.push({
|
||||
name: 'booking.user.upload'
|
||||
})
|
||||
break;
|
||||
|
||||
case 5:
|
||||
this.$router.push({
|
||||
name: 'booking.user.upload'
|
||||
})
|
||||
break;
|
||||
|
||||
case 6:
|
||||
this.$router.push({
|
||||
name: 'booking.user.upload'
|
||||
})
|
||||
break;
|
||||
default:
|
||||
break
|
||||
}
|
||||
|
||||
|
||||
// axios.post('api/booking/'+ id + '/status', newBooking)
|
||||
// .then((response) => {
|
||||
// console.log(response)
|
||||
|
||||
// // this code to insert the input data into the database (success)
|
||||
// // this.Booking.amount = amount;
|
||||
// // this.Booking.account_name = account_name;
|
||||
// // this.Booking.bank_name = bank_name;
|
||||
// // this.Booking.branch = bank_branch;
|
||||
// // this.Booking.account_num = account_num;
|
||||
// // this.term = term;
|
||||
// })
|
||||
// .catch((error) => {
|
||||
// console.log(error)
|
||||
// })
|
||||
},
|
||||
BookingList() {
|
||||
axios.get('api/booking')
|
||||
.then((response) => {
|
||||
console.log(response)
|
||||
this.list = response.data
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue
Block a user