mirror of
https://gitlab.com/omair-personal/exchange.git
synced 2026-08-19 04:24:08 +00:00
lonetrinity
284 lines
12 KiB
Vue
284 lines
12 KiB
Vue
<template>
|
|
<div>
|
|
<div align="right">
|
|
<el-button :loading="loading_btn" type="primary" size="mini" @click="RefreshBooking()">Refresh</el-button>
|
|
</div>
|
|
|
|
<!-- Booking Table -->
|
|
|
|
<el-tabs type="border-card" class="table-switch">
|
|
<el-tab-pane label="Booking Table">
|
|
<el-row :gutter="20">
|
|
<div>
|
|
<el-table :data="bookingTable">
|
|
<el-table-column label="Ref No." width="100">
|
|
<el-button size="mini" @click="handleEdit(scope.$index, scope.row)">Update</el-button>
|
|
<el-button slot-scope="scope" type="text" @click="(event) => { BookingStatus(scope.row.admin_status, scope.row.id, scope.row.term) }"> {{ scope.row.id }}</el-button>
|
|
</el-table-column>
|
|
<el-table-column label="DateTime" prop="created_at" width="180" sortable/>
|
|
<el-table-column label="Marking" width="120" prop="marking" />
|
|
<el-table-column :filters="[{text: 'X1', value: 'X1'}, {text: 'X2', value: 'X2'}]" :filter-method="filterHandlerTerm" label="Term" prop="term" width="100"/>
|
|
<el-table-column label="Rate" width="74" prop="rate" />
|
|
<el-table-column label="Amount" prop="amount" justify="center" width="110" />
|
|
<el-table-column :filters="[{text: 'RMB', value: 'RMB'}, {text: 'USD', value: 'USD'}]" :filter-method="filterHandlerTranferAmount" label="Transfer Amount"
|
|
prop="transfer_amount" width="170" />
|
|
<!-- <el-table-column label="ETA" sortable width="100"/> -->
|
|
<!-- <el-table-column label="Payment Method" :filters="[{text: 'Cash', value: 'Cash'}, {text: 'Cheque', value: 'Cheque'}, {text: 'BA', value: 'BA'}]" :filter-method="filterHandler">
|
|
</el-table-column> -->
|
|
<!-- <el-table-column :filters="[{text: '(1/6)', value: '(1/6) Order Done'}, {text: '(2/6)', value: '(2/6) Waiting for Upload Bank in Slip'}, {text: '(3/6)', value: '(3/6) Order Confirmation'}, {text: '(4/6)', value: '(4/6) Processing Transfer'}, {text: '(5/6)', value: '(5/6) Waiting for Upload PO'}, {text: '(6/6)', value: '(6/6) Order Complete'}]" :filter-method="filterHandler" prop="status" label="Status"/> -->
|
|
<el-table-column label="Status" width="106" :filters="[{ text: 'Success', value: 'Success' }, { text: 'Pending', value: 'Pending' }]" :filter-method="filterHandlerStatus" prop="status_desc">
|
|
<template slot-scope="scope">
|
|
<el-popover trigger="click" placement="top">
|
|
<p>{{ scope.row.status_desc }}</p>
|
|
<div slot="reference" class="name-wrapper">
|
|
<el-tag size="medium">{{ scope.row.track_status }}</el-tag>
|
|
</div>
|
|
</el-popover>
|
|
</template>
|
|
</el-table-column>
|
|
<!-- <el-table-column label="Balance" prop="transfer_amount" sortable width="100"/> -->
|
|
<!-- <el-table-column prop="timeout" label="Bankin Timeout" /> -->
|
|
<el-table-column label="" width="180">
|
|
<el-button slot-scope="scope" type="text" @click="(event) => { BookingStatus(scope.row.admin_status, scope.row.id, scope.row.term) }"> View Status </el-button>
|
|
<!-- <template slot-scope="scope">
|
|
<el-button size="mini" @click="handleEdit(scope.$index, scope.row)">View Status</el-button>
|
|
<el-button size="mini" type="danger" @click="BookingStatus(scope.$index, scope.row)">Cancel</el-button>
|
|
</template> -->
|
|
</el-table-column>
|
|
</el-table>
|
|
<div align="right">
|
|
<el-button type="primary" size="mini" @click="fetchPaginateBooking(pagination.prev_page_url)" :disabled="!pagination.prev_page_url">
|
|
Previous
|
|
</el-button>
|
|
<span>Page {{pagination.current_page}} of {{pagination.last_page}}</span>
|
|
<el-button type="primary" size="mini" @click="fetchPaginateBooking(pagination.next_page_url)" :disabled="!pagination.next_page_url">
|
|
Next
|
|
</el-button>
|
|
</div>
|
|
</div>
|
|
</el-row><br><br></el-tab-pane>
|
|
|
|
<el-tab-pane label="Booking Completed Table">
|
|
<el-row :gutter="20">
|
|
<div>
|
|
<el-table :data="bookingTableComplete">
|
|
<el-table-column label="Ref No." width="100">
|
|
<el-button size="mini" @click="handleEdit(scope.$index, scope.row)">Update</el-button>
|
|
<el-button slot-scope="scope" type="text" @click="(event) => { BookingStatus(scope.row.status, scope.row.id) }"> {{ scope.row.id }}</el-button>
|
|
</el-table-column>
|
|
<el-table-column label="DateTime" prop="created_at" width="180" sortable/>
|
|
<el-table-column :filters="[{text: 'X1', value: 'X1'}, {text: 'X2', value: 'X2'}]" :filter-method="filterHandler" label="Term" prop="term" width="100"/> -->
|
|
<el-table-column label="Rate" width="74" prop="rate" />
|
|
<el-table-column label="Amount" prop="amount" justify="center" width="110" />
|
|
<el-table-column :filters="[{text: 'RMB', value: 'RMB'}, {text: 'USD', value: 'USD'}]" :filter-method="filterHandler" label="Transfer Amount"
|
|
prop="transfer_amount" width="170" />
|
|
<!-- <el-table-column label="ETA" sortable width="100"/> -->
|
|
<!-- <el-table-column label="Payment Method" :filters="[{text: 'Cash', value: 'Cash'}, {text: 'Cheque', value: 'Cheque'}, {text: 'BA', value: 'BA'}]" :filter-method="filterHandler">
|
|
</el-table-column> -->
|
|
<!-- <el-table-column :filters="[{text: '(1/6)', value: '(1/6) Order Done'}, {text: '(2/6)', value: '(2/6) Waiting for Upload Bank in Slip'}, {text: '(3/6)', value: '(3/6) Order Confirmation'}, {text: '(4/6)', value: '(4/6) Processing Transfer'}, {text: '(5/6)', value: '(5/6) Waiting for Upload PO'}, {text: '(6/6)', value: '(6/6) Order Complete'}]" :filter-method="filterHandler" prop="status" label="Status"/> -->
|
|
<el-table-column label="Status" width="106">
|
|
<template slot-scope="scope">
|
|
<el-popover trigger="click" placement="top">
|
|
<p>{{ scope.row.status_desc }}</p>
|
|
<div slot="reference" class="name-wrapper">
|
|
<el-tag size="medium">{{ scope.row.track_status }}</el-tag>
|
|
</div>
|
|
</el-popover>
|
|
</template>
|
|
</el-table-column>
|
|
<!-- <el-table-column label="Balance" prop="transfer_amount" sortable width="100"/> -->
|
|
<!-- <el-table-column prop="timeout" label="Bankin Timeout" /> -->
|
|
<el-table-column :filters="[{ text: 'Success', value: 'Success' }, { text: 'Pending', value: 'Pending' }]" :filter-method="filterTag"
|
|
label="" width="180" filter-placement="bottom-end">
|
|
<el-button slot-scope="scope" type="text" @click="(event) => { BookingStatus(scope.row.status, scope.row.id) }"> View Status </el-button>
|
|
<!-- <template slot-scope="scope">
|
|
<el-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 align="right">
|
|
<el-button type="primary" size="mini" @click="fetchCompletePaginateBooking(completePagination.prev_page_url)" :disabled="!completePagination.prev_page_url">
|
|
Previous
|
|
</el-button>
|
|
<span>Page {{completePagination.current_page}} of {{completePagination.last_page}}</span>
|
|
<el-button type="primary" size="mini" @click="fetchCompletePaginateBooking(completePagination.next_page_url)" :disabled="!completePagination.next_page_url">
|
|
Next
|
|
</el-button>
|
|
</div>
|
|
</div>
|
|
</el-row><br><br>
|
|
</el-tab-pane>
|
|
</el-tabs>
|
|
|
|
|
|
|
|
|
|
|
|
<!-- Booking Table-end -->
|
|
</div>
|
|
</template>
|
|
<style type="text/css">
|
|
.el-table__column-filter-trigger i {
|
|
font-size: 18px;
|
|
font-weight: 900;
|
|
vertical-align: sub;
|
|
}
|
|
</style>
|
|
<script>
|
|
import axios from 'axios'
|
|
|
|
export default {
|
|
middleware: 'admin',
|
|
data () {
|
|
return {
|
|
status: null,
|
|
bookingTable: [],
|
|
bookingTableComplete: [],
|
|
url: 'api/admin/booking',
|
|
completeBookingurl : "api/admin-complete-booking",
|
|
pagination: [],
|
|
completePagination: [],
|
|
|
|
loading_btn: false,
|
|
}
|
|
},
|
|
mounted () {
|
|
this.getBooking();
|
|
this.getBookingTableComplete();
|
|
},
|
|
methods: {
|
|
getBooking(){
|
|
let $this = this
|
|
axios.get(this.url).then(response => {
|
|
this.bookingTable = response.data.data;
|
|
$this.makePagination(response.data);
|
|
})
|
|
},
|
|
getBookingTableComplete(){
|
|
let $this = this
|
|
axios.get(this.completeBookingurl).then(response => {
|
|
this.bookingTableComplete = response.data.data
|
|
$this.makeCompletePagination(response.data)
|
|
})
|
|
},
|
|
RefreshBooking() {
|
|
let $this = this
|
|
this.loading_btn = true
|
|
axios.get(this.url).then(response => {
|
|
this.loading_btn = false;
|
|
this.bookingTable = response.data.data
|
|
this.$message({
|
|
showClose: true,
|
|
message: 'Booking is updated',
|
|
type: 'success',
|
|
duration: 5000
|
|
})
|
|
})
|
|
},
|
|
makePagination(data){
|
|
let pagination ={
|
|
current_page: data.current_page,
|
|
last_page: data.last_page,
|
|
next_page_url: data.next_page_url,
|
|
prev_page_url: data.prev_page_url
|
|
}
|
|
this.pagination = pagination
|
|
},
|
|
makeCompletePagination(data){
|
|
let pagination ={
|
|
current_page: data.current_page,
|
|
last_page: data.last_page,
|
|
next_page_url: data.next_page_url,
|
|
prev_page_url: data.prev_page_url
|
|
}
|
|
this.completePagination = pagination
|
|
},
|
|
fetchPaginateBooking(url) {
|
|
this.url = url
|
|
this.getBooking()
|
|
|
|
},
|
|
fetchCompletePaginateBooking(url) {
|
|
this.completeBookingurl = url
|
|
this.getBookingTableComplete()
|
|
},
|
|
filterHandlerStatus (value, row, column) {
|
|
const status = row.track_status;
|
|
if(value ==="Success")
|
|
return status === "(5/5)" || status === "(7/7)";
|
|
else
|
|
return !(status === "(5/5)" || status === "(7/7)");
|
|
},
|
|
filterHandlerTranferAmount (value, row, column) {
|
|
// Pending...lol
|
|
return false;
|
|
},
|
|
filterHandlerTerm(value, row, column){
|
|
const term = row.term;
|
|
return value.toLowerCase() === term.substring(0,2);
|
|
},
|
|
BookingStatus (status, booking_id, term) {
|
|
// TODO : Get booking status from server
|
|
this.status = status
|
|
switch (this.status) {
|
|
case 1:
|
|
this.$router.push({
|
|
name: 'booking.admin.booking.detail',
|
|
params: {id: booking_id }
|
|
})
|
|
break
|
|
case 2:
|
|
this.$router.push({
|
|
name: 'booking.admin.verification',
|
|
params: {id: booking_id }
|
|
})
|
|
break
|
|
case 3:
|
|
this.$router.push({
|
|
name: 'booking.admin.supplier',
|
|
params: {id: booking_id }
|
|
})
|
|
break
|
|
case 4:
|
|
this.$router.push({
|
|
name: 'booking.admin.supplier.report',
|
|
params: {id: booking_id }
|
|
})
|
|
break
|
|
case 5:
|
|
this.$router.push({
|
|
name: 'booking.admin.cnslip',
|
|
params: {id: booking_id }
|
|
})
|
|
break
|
|
|
|
case 6:
|
|
if(term == 'x2_cash' || term == 'x2_cheque' || term == 'x2_ba'){
|
|
this.$router.push({
|
|
name: 'booking.admin.x2complete',
|
|
params: {id: booking_id }
|
|
})
|
|
break
|
|
}
|
|
this.$router.push({
|
|
name: 'booking.admin.invoice',
|
|
params: {id: booking_id }
|
|
})
|
|
break
|
|
|
|
case 7:
|
|
this.$router.push({
|
|
name: 'booking.admin.complete',
|
|
params: {id: booking_id }
|
|
})
|
|
break
|
|
default:
|
|
break
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
</script>
|