mirror of
https://gitlab.com/CIEFWorldwideSdnBhd/exchange.git
synced 2026-08-27 16:24:24 +00:00
Jack Goh
105b61eab3
updated chinabankslip error message to be more clear fixed supplier booking report loading button updated upload invoice frontend to show user po image
401 lines
15 KiB
Vue
401 lines
15 KiB
Vue
<template>
|
|
<el-main>
|
|
<progress-track v-model="status" />
|
|
|
|
<div align="center">
|
|
<h4 style="margin-top:5%;"></h4>
|
|
<br>
|
|
<h5> Upload China Bankslip To Customer </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">CIEF/150ECE</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>Upload China Bankslip</span>
|
|
<!-- <el-button style="float: right; padding: 3px 0" type="text">Operation button</el-button> -->
|
|
</div>
|
|
<el-row :gutter="12" style="text-align:center">
|
|
<el-col :span="20" style="text-align:center">
|
|
|
|
<el-form ref="chinaSlipForm" :model="chinaSlipForm" :rules="rules">
|
|
<div align="center">
|
|
|
|
<!-- upload image -->
|
|
<el-upload class="upload-demo" :action="'/api/booking/' + booking_id + '/upload-china-bankslip'" :on-preview="handlePreview"
|
|
:on-remove="handleRemove" :multiple="false" list-type="picture">
|
|
<el-button size="small" type="primary">Click to upload</el-button>
|
|
<div slot="tip" class="el-upload__tip">jpg/png files with a size less than 3mb</div>
|
|
</el-upload>
|
|
|
|
<br>
|
|
<!-- upload image end -->
|
|
<el-form-item prop="date">
|
|
<el-date-picker v-model="chinaSlipForm.date" type="date" placeholder="Pick a day" :picker-options="pickerOptions1">
|
|
</el-date-picker>
|
|
</el-form-item>
|
|
<el-form-item prop="actual_transfer_amount">
|
|
<el-input v-model="chinaSlipForm.actual_transfer_amount" type="text" placeholder="Amount" style="width: 80%" />
|
|
</el-form-item>
|
|
|
|
<el-form-item prop="details">
|
|
<el-input v-model="chinaSlipForm.details" type="text" placeholder="Details" style="width: 80%" />
|
|
</el-form-item>
|
|
<el-form-item>
|
|
<el-button :loading="loading_btn" type="primary" @click="submitChinaSlip('chinaSlipForm')">Submit</el-button>
|
|
</el-form-item>
|
|
</div>
|
|
</el-form>
|
|
</el-col>
|
|
</el-row>
|
|
</el-card>
|
|
</el-row>
|
|
</el-main>
|
|
</template>
|
|
<style>
|
|
.booking-details {
|
|
font-weight: bold;
|
|
}
|
|
</style>
|
|
<script>
|
|
import ProgressTrack from '~/components/AdminProgressTrack'
|
|
import axios from 'axios'
|
|
|
|
export default {
|
|
components: {
|
|
'progress-track': ProgressTrack
|
|
},
|
|
data() {
|
|
return {
|
|
status: 5,
|
|
loading_btn: false,
|
|
booking_id: this.$route.params.id,
|
|
booking_details: {
|
|
id: null,
|
|
amount: null,
|
|
bia: null,
|
|
user_bankslip_path: null,
|
|
},
|
|
supplier: null,
|
|
supplier_options: null,
|
|
chinaSlipForm: {
|
|
actual_transfer_amount: null,
|
|
date: null,
|
|
details: null,
|
|
},
|
|
rules: {
|
|
actual_transfer_amount: [{
|
|
required: true,
|
|
message: 'Please input amount',
|
|
trigger: 'change'
|
|
}],
|
|
date: [{
|
|
required: true,
|
|
message: 'Please input bank name',
|
|
trigger: 'change'
|
|
}],
|
|
details: [{
|
|
required: true,
|
|
message: 'Please input details',
|
|
trigger: 'change'
|
|
}]
|
|
},
|
|
pickerOptions1: {
|
|
disabledDate(time) {
|
|
return time.getTime() > Date.now();
|
|
},
|
|
shortcuts: [{
|
|
text: 'Today',
|
|
onClick(picker) {
|
|
picker.$emit('pick', new Date());
|
|
}
|
|
}, {
|
|
text: 'Yesterday',
|
|
onClick(picker) {
|
|
const date = new Date();
|
|
date.setTime(date.getTime() - 3600 * 1000 * 24);
|
|
picker.$emit('pick', date);
|
|
}
|
|
}, {
|
|
text: 'A week ago',
|
|
onClick(picker) {
|
|
const date = new Date();
|
|
date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
|
|
picker.$emit('pick', date);
|
|
}
|
|
}]
|
|
}
|
|
}
|
|
},
|
|
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) => {
|
|
loading.close()
|
|
this.booking_details = response.data
|
|
}).catch((error) => {
|
|
console.log(error)
|
|
loading.close()
|
|
this.$router.push({
|
|
name: 'notfound'
|
|
})
|
|
})
|
|
|
|
axios
|
|
.get('/api/setting-supplier/')
|
|
.then((response) => {
|
|
loading.close()
|
|
this.supplier_options = response.data
|
|
}).catch((error) => {
|
|
loading.close()
|
|
console.log(error)
|
|
this.$router.push({
|
|
name: 'notfound'
|
|
})
|
|
})
|
|
|
|
},
|
|
methods: {
|
|
submitChinaSlip(formName) {
|
|
this.loading_btn = true
|
|
|
|
this.$refs[formName].validate((valid) => {
|
|
if (valid) {
|
|
let newChinaSlip = {
|
|
date: this.chinaSlipForm.date,
|
|
actual_transfer_amount: this.chinaSlipForm.actual_transfer_amount,
|
|
details: this.chinaSlipForm.details,
|
|
}
|
|
|
|
axios.patch('/api/booking/' + this.booking_id +'/update-china-bankslip', newChinaSlip)
|
|
.then((response) => {
|
|
this.$message({
|
|
showClose: true,
|
|
message: 'Your bankinslip has been submitted, please wait customer to upload their purchase order.',
|
|
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)
|
|
this.loading_btn = false
|
|
})
|
|
|
|
} else {
|
|
this.loading_btn = false
|
|
}
|
|
})
|
|
|
|
|
|
},
|
|
handleRemove(file, fileList) {
|
|
console.log(file, fileList);
|
|
},
|
|
handlePreview(file) {
|
|
console.log(file);
|
|
}
|
|
}
|
|
}
|
|
</script> |