mirror of
https://gitlab.com/CIEFWorldwideSdnBhd/exchange.git
synced 2026-08-19 04:14:04 +00:00
weiweitoo
384 lines
14 KiB
Vue
384 lines
14 KiB
Vue
<template>
|
|
<el-main>
|
|
<progress-track v-model="trackerConfig" />
|
|
|
|
<div align="center">
|
|
<h4 style="margin-top:5%;"></h4>
|
|
<br>
|
|
<h5> Verify User Bankslip </h5>
|
|
<br>
|
|
<h5> ( Scroll down to view the customer bankslip ) </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>
|
|
<div class="el-row" style="margin-left: -6px; margin-right: -6px;">
|
|
<div class="el-col el-col-12" style="padding-left: 6px; padding-right: 6px;">
|
|
<div class="el-table el-table--fit el-table--enable-row-hover el-table--enable-row-transition" align="center">
|
|
|
|
<div class="el-table__body-wrapper is-scrolling-none">
|
|
<table class="el-table__body" style="width: 400px;" cellspacing="0" cellpadding="0" border="0">
|
|
<colgroup>
|
|
<col name="el-table_2_column_9" width="200">
|
|
<col name="el-table_2_column_10" width="200">
|
|
</colgroup>
|
|
<tbody>
|
|
<tr class="el-table__row">
|
|
<td class="el-table_2_column_9 is-right ">
|
|
<div class="cell">Order Number :</div>
|
|
</td>
|
|
<td class="el-table_2_column_10 is-left ">
|
|
<div class="cell">{{ booking_details.id }}</div>
|
|
</td>
|
|
</tr>
|
|
<tr class="el-table__row">
|
|
<td class="el-table_2_column_9 is-right ">
|
|
<div class="cell">Date :</div>
|
|
</td>
|
|
<td class="el-table_2_column_10 is-left ">
|
|
<div class="cell">{{ booking_details.created_at }}</div>
|
|
</td>
|
|
</tr>
|
|
<tr class="el-table__row">
|
|
<td class="el-table_2_column_9 is-right ">
|
|
<div class="cell">Customer Marking :</div>
|
|
</td>
|
|
<td class="el-table_2_column_10 is-left ">
|
|
<div class="cell">{{ booking_details.marking }}</div>
|
|
</td>
|
|
</tr>
|
|
<tr class="el-table__row">
|
|
<td class="el-table_2_column_9 is-right ">
|
|
<div class="cell"></div>
|
|
</td>
|
|
<td class="el-table_2_column_10 is-left ">
|
|
<div class="cell"></div>
|
|
</td>
|
|
</tr>
|
|
<tr class="el-table__row">
|
|
<td class="el-table_2_column_9 is-right ">
|
|
<div class="cell">Term :</div>
|
|
</td>
|
|
<td class="el-table_2_column_10 is-left ">
|
|
<div class="cell">{{ booking_details.term }}</div>
|
|
</td>
|
|
</tr>
|
|
<tr class="el-table__row">
|
|
<td class="el-table_2_column_9 is-right ">
|
|
<div class="cell"></div>
|
|
</td>
|
|
<td class="el-table_2_column_10 is-left ">
|
|
<div class="cell"></div>
|
|
</td>
|
|
</tr>
|
|
<!---->
|
|
</tbody>
|
|
</table>
|
|
<!---->
|
|
<!---->
|
|
</div>
|
|
<!---->
|
|
<!---->
|
|
<!---->
|
|
<!---->
|
|
<div class="el-table__column-resize-proxy" style="display: none;"></div>
|
|
</div>
|
|
</div>
|
|
<div class="el-col el-col-12" style="padding-left: 6px; padding-right: 6px;">
|
|
<div class="el-table el-table--fit el-table--enable-row-hover el-table--enable-row-transition" align="center">
|
|
<div class="hidden-columns">
|
|
<div></div>
|
|
<div></div>
|
|
</div>
|
|
<!---->
|
|
<div class="el-table__body-wrapper is-scrolling-none">
|
|
<table class="el-table__body" style="width: 400px;" cellspacing="0" cellpadding="0" border="0">
|
|
<colgroup>
|
|
<col name="el-table_3_column_11" width="200">
|
|
<col name="el-table_3_column_12" width="200">
|
|
</colgroup>
|
|
<tbody>
|
|
<tr class="el-table__row">
|
|
<td class="el-table_3_column_11 is-right ">
|
|
<div class="cell">CNY/RMB :</div>
|
|
</td>
|
|
<td class="el-table_3_column_12 is-left ">
|
|
<div class="cell">CNY {{ booking_details.amount }}</div>
|
|
</td>
|
|
</tr>
|
|
<tr class="el-table__row">
|
|
<td class="el-table_3_column_11 is-right ">
|
|
<div class="cell">+ Service Charge :</div>
|
|
</td>
|
|
<td class="el-table_3_column_12 is-left ">
|
|
<div class="cell">CNY {{ booking_details.service_charge }}</div>
|
|
</td>
|
|
</tr>
|
|
<tr class="el-table__row">
|
|
<td class="el-table_3_column_11 is-right ">
|
|
<div class="cell">/ RATE :</div>
|
|
</td>
|
|
<td class="el-table_3_column_12 is-left ">
|
|
<div class="cell">{{ booking_details.rate }}</div>
|
|
</td>
|
|
</tr>
|
|
<tr class="el-table__row">
|
|
<td class="el-table_3_column_11 is-right ">
|
|
<div class="cell"></div>
|
|
</td>
|
|
<td class="el-table_3_column_12 is-left ">
|
|
<div class="cell">MYR {{ booking_details.bia }}</div>
|
|
</td>
|
|
</tr>
|
|
<!-- <tr class="el-table__row">
|
|
<td class="el-table_3_column_11 is-right ">
|
|
<div class="cell">+ GST 6% :</div>
|
|
</td>
|
|
<td class="el-table_3_column_12 is-left ">
|
|
<div class="cell">MYR 4,430.88</div>
|
|
</td>
|
|
</tr> -->
|
|
<tr class="el-table__row">
|
|
<td class="el-table_3_column_11 is-right ">
|
|
<div class="cell"></div>
|
|
</td>
|
|
<td class="el-table_3_column_12 is-left ">
|
|
<div class="cell">
|
|
<b>MYR {{ booking_details.bia }}</b>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<tr class="el-table__row">
|
|
<td class="el-table_3_column_11 is-right ">
|
|
<div class="cell"></div>
|
|
</td>
|
|
<td class="el-table_3_column_12 is-left ">
|
|
<div class="cell"></div>
|
|
</td>
|
|
</tr>
|
|
<!---->
|
|
</tbody>
|
|
</table>
|
|
<!---->
|
|
<!---->
|
|
</div>
|
|
<!---->
|
|
<!---->
|
|
<!---->
|
|
<!---->
|
|
<div class="el-table__column-resize-proxy" style="display: none;"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- <el-row :gutter="12">
|
|
<el-col :span="12">
|
|
<el-table :data="bookingConfirmTable" :show-header="false" align="center">
|
|
<el-table-column prop="data1" align="right" width="200" />
|
|
<el-table-column prop="data2" align="left" width="200" />
|
|
</el-table>
|
|
</el-col>
|
|
<el-col :span="12">
|
|
<el-table :data="bookingConfirmTable2" :show-header="false" align="center">
|
|
<el-table-column prop="data1" align="right" width="200" />
|
|
<el-table-column prop="data2" align="left" width="200" />
|
|
</el-table>
|
|
</el-col>
|
|
</el-row> -->
|
|
</el-card>
|
|
</el-row>
|
|
<br>
|
|
|
|
<el-row justify="center" align="center">
|
|
<el-card class="box-card">
|
|
<div slot="header" class="clearfix">
|
|
<span>BankinSlip</span>
|
|
<!-- <el-button style="float: right; padding: 3px 0" type="text">Operation button</el-button> -->
|
|
</div>
|
|
<el-row :gutter="12">
|
|
<el-col :span="22" style="text-align:center">
|
|
<a target="_blank" :href="getURL(booking_details.user_bankslip_path)">
|
|
<img v-if="isImage(booking_details.user_bankslip_path)" v-bind:src="booking_details.user_bankslip_path" class="image">
|
|
<p v-else>Download</p>
|
|
</a>
|
|
</el-col>
|
|
</el-row>
|
|
</el-card>
|
|
|
|
<el-card class="box-card">
|
|
<el-row :gutter="12">
|
|
<el-col :span="22" style="text-align:center">
|
|
<el-button :loading="loading_btn" @click="approveUserSlip" type="success">Approve</el-button>
|
|
<el-button :loading="loading_btn" @click="rejectDialogVisible = true" type="danger">Reject</el-button>
|
|
</el-col>
|
|
</el-row>
|
|
</el-card>
|
|
</el-row>
|
|
|
|
<el-dialog title="Reason of Reject" :visible.sync="rejectDialogVisible" width="30%" center>
|
|
<span>
|
|
<el-input
|
|
type="textarea"
|
|
:rows="2"
|
|
placeholder="Please input the reason"
|
|
v-model="reject_reason">
|
|
</el-input>
|
|
</span>
|
|
<span slot="footer" class="dialog-footer">
|
|
<el-button @click="rejectDialogVisible = false">Cancel</el-button>
|
|
<el-button type="primary" :loading="loading_btn" @click="rejectUserSlip">Submit</el-button>
|
|
</span>
|
|
</el-dialog>
|
|
|
|
|
|
</el-main>
|
|
</template>
|
|
<style>
|
|
.booking-details {
|
|
font-weight: bold;
|
|
}
|
|
.image {
|
|
border: 1px solid #ddd;
|
|
border-radius: 4px;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
width: 150px;
|
|
display: block;
|
|
}
|
|
.image:hover {
|
|
box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);
|
|
}
|
|
</style>
|
|
<script>
|
|
import ProgressTrack from '~/components/AdminProgressTrack'
|
|
import axios from 'axios'
|
|
|
|
export default {
|
|
components: {
|
|
'progress-track': ProgressTrack
|
|
},
|
|
data() {
|
|
return {
|
|
trackerConfig :{
|
|
status: 2,
|
|
term: null
|
|
},
|
|
loading_btn: false,
|
|
rejectDialogVisible: false,
|
|
reject_reason: null,
|
|
booking_details: {
|
|
id: null,
|
|
amount: null,
|
|
bia: null,
|
|
user_bankslip_path: null,
|
|
},
|
|
estimated_arrival_time: null,
|
|
}
|
|
},
|
|
beforeCreate() {
|
|
const loading = this.$loading({
|
|
lock: true,
|
|
text: 'Please wait..',
|
|
spinner: 'el-icon-loading',
|
|
background: 'rgba(0, 0, 0, 0.7)'
|
|
})
|
|
|
|
axios
|
|
.get('/api/admin/booking/' + this.$route.params.id)
|
|
.then((response) => {
|
|
this.booking_details = response.data;
|
|
this.trackerConfig.term = response.data.term;
|
|
console.log(this.booking_details);
|
|
loading.close()
|
|
}).catch((error) => {
|
|
console.log(error)
|
|
loading.close()
|
|
this.$router.push({
|
|
name: 'notfound'
|
|
})
|
|
})
|
|
},
|
|
methods: {
|
|
approveUserSlip() {
|
|
this.loading_btn = true
|
|
|
|
let newApprove = {
|
|
estimated_arrival_time: this.estimated_arrival_time
|
|
}
|
|
|
|
axios.post('/api/booking/' + this.$route.params.id + '/approve-bank-slip', newApprove)
|
|
.then((response) => {
|
|
this.loading_btn = false
|
|
|
|
this.$message({
|
|
showClose: true,
|
|
message: 'User bankinslip accepted. Proceed with book with supplier.',
|
|
type: 'success',
|
|
duration: 5000
|
|
})
|
|
|
|
this.$router.push({
|
|
name: this.booking_details.term === 'x1_ba' || this.booking_details.term === 'x2_cheque' ? 'booking.admin.cnslip' : 'booking.admin.supplier'
|
|
})
|
|
|
|
// pass variable to another router
|
|
})
|
|
.catch((error) => {
|
|
this.loading_btn = false
|
|
console.log(error)
|
|
})
|
|
},
|
|
rejectUserSlip() {
|
|
this.loading_btn = true
|
|
this.centerDialogVisible = false
|
|
|
|
let newApprove = {
|
|
estimated_arrival_time: this.estimated_arrival_time,
|
|
reject_reason: this.reject_reason
|
|
}
|
|
|
|
axios.post('/api/booking/' + this.$route.params.id + '/reject-bank-slip', newApprove)
|
|
.then((response) => {
|
|
this.loading_btn = false
|
|
|
|
this.$message({
|
|
showClose: true,
|
|
message: 'User bankinslip rejected. Waiting user to reupload their user bankslip.',
|
|
type: 'warning',
|
|
duration: 5000
|
|
})
|
|
|
|
this.$router.push({
|
|
name: 'admin.home'
|
|
})
|
|
|
|
// pass variable to another router
|
|
})
|
|
.catch((error) => {
|
|
this.loading_btn = false
|
|
console.log(error)
|
|
})
|
|
},
|
|
getExtension(path){
|
|
return path.slice(-3);
|
|
},
|
|
isImage(path){
|
|
var ext = this.getExtension(path);
|
|
return ext === 'jpg' || ext === 'jpeg' || ext === 'bmp' || ext === 'png';
|
|
},
|
|
getURL(path){
|
|
var getUrl = window.location;
|
|
console.log(getUrl.protocol);
|
|
console.log(getUrl.host);
|
|
console.log(getUrl.pathname.split('/')[1]);
|
|
var baseUrl = getUrl.protocol + "//" + getUrl.host;
|
|
return baseUrl + path;
|
|
}
|
|
}
|
|
}
|
|
</script> |