mirror of
https://gitlab.com/CIEFWorldwideSdnBhd/exchange.git
synced 2026-08-19 12:24:09 +00:00
conditionally show legacy and new invoice
This commit is contained in:
Edmond Teh
@@ -1,122 +1,127 @@
|
||||
<template>
|
||||
<el-main>
|
||||
<x2-progress-track v-if="(trackerConfig.term == 'x2_cash' || trackerConfig.term == 'x2_cheque' || trackerConfig.term == 'x2_ba')" v-model="trackerConfig" />
|
||||
<progress-track v-else v-model="trackerConfig" />
|
||||
<h1>Transfer Completed</h1>
|
||||
<h2> Please upload your purchase order </h2>
|
||||
<!-- upload card -->
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<div class="card">
|
||||
<div class="card-header">Upload PO
|
||||
<a href="/CIEF-X-Plan-PO-Format-15.0.xlsm" target="_blank">(Download Po Format)</a>
|
||||
</div>
|
||||
<!-- upload image -->
|
||||
<div class="card-body">
|
||||
|
||||
<el-upload :action="'/api/booking/' + booking_id + '/upload-po'" :auto-upload="false" :on-change="beforeFileUpload" :on-exceed="handleExceed" :on-preview="handlePreview" :on-remove="handleRemove" :on-error="uploadError" class="upload-demo uploadAreaOne" accept=".jpeg, .jpg, .png, .bmp, .doc, .docx, .xls, .xlsx, .pdf" 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">bmp/jpeg/jpg/png/pdf/xls/xlxs/doc/docx files with a size less than 3MB</div>
|
||||
</el-upload>
|
||||
<el-upload :action="'/api/booking/' + booking_id + '/upload-po'" :on-preview="handlePreview" :on-remove="handleRemove" :before-remove="beforeRemove" :file-list="fileList" multiple class="upload-demo uploadAreaTwo" >
|
||||
<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 500kb</div>
|
||||
</el-upload>
|
||||
|
||||
<div class="bottom clearfix" style="text-align:right;">
|
||||
<el-button :loading="loading_btn" type="primary" @click="uploadPo">Submit</el-button>
|
||||
<div v-if="isLegacy" id="legacy-invoice">
|
||||
<x2-progress-track v-if="(trackerConfig.term == 'x2_cash' || trackerConfig.term == 'x2_cheque' || trackerConfig.term == 'x2_ba')" v-model="trackerConfig" />
|
||||
<progress-track v-else v-model="trackerConfig" />
|
||||
<h1>Transfer Completed</h1>
|
||||
<h2> Please upload your purchase order </h2>
|
||||
<!-- upload card -->
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<div class="card">
|
||||
<div class="card-header">Upload PO
|
||||
<a href="/CIEF-X-Plan-PO-Format-15.0.xlsm" target="_blank">(Download Po Format)</a>
|
||||
</div>
|
||||
<!-- upload image -->
|
||||
<div class="card-body">
|
||||
|
||||
<el-upload :action="'/api/booking/' + booking_id + '/upload-po'" :auto-upload="false" :on-change="beforeFileUpload" :on-exceed="handleExceed" :on-preview="handlePreview" :on-remove="handleRemove" :on-error="uploadError" class="upload-demo uploadAreaOne" accept=".jpeg, .jpg, .png, .bmp, .doc, .docx, .xls, .xlsx, .pdf" 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">bmp/jpeg/jpg/png/pdf/xls/xlxs/doc/docx files with a size less than 3MB</div>
|
||||
</el-upload>
|
||||
<el-upload :action="'/api/booking/' + booking_id + '/upload-po'" :on-preview="handlePreview" :on-remove="handleRemove" :before-remove="beforeRemove" :file-list="fileList" multiple class="upload-demo uploadAreaTwo" >
|
||||
<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 500kb</div>
|
||||
</el-upload>
|
||||
|
||||
<div class="bottom clearfix" style="text-align:right;">
|
||||
<el-button :loading="loading_btn" type="primary" @click="uploadPo">Submit</el-button>
|
||||
</div>
|
||||
<!-- upload image end -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="card">
|
||||
<div class="card-header">China Bank Slip</div>
|
||||
<div class="card-body">
|
||||
<a :href="getURL(booking_details.china_bankslip_path)" target="_blank" >
|
||||
<img v-if="isImage(booking_details.china_bankslip_path)" :src="booking_details.china_bankslip_path" class="image">
|
||||
<p v-else>Download</p>
|
||||
</a>
|
||||
</div>
|
||||
<!-- upload image end -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="card">
|
||||
<div class="card-header">China Bank Slip</div>
|
||||
<!-- order details -->
|
||||
<div class="card">
|
||||
<div class="card-header">Order Details</div>
|
||||
<div class="card-body">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<table class="table table-striped">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Ref No :</td>
|
||||
<td>{{ booking_details.id }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Date :</td>
|
||||
<td>{{ booking_details.created_at }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Customer Marking :</td>
|
||||
<td>{{ booking_details.marking }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Term: </td>
|
||||
<td>{{ booking_details.term }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Beneficiary Account : </td>
|
||||
<td>{{ booking_details.account_name }}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="col">
|
||||
<table class="table table-striped">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>CNY/RMB :</td>
|
||||
<td>CNY {{ booking_details.amount }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>+ Service Charge :</td>
|
||||
<td>CNY {{ booking_details.service_charge }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>RATE :</td>
|
||||
<td>{{ booking_details.rate }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td/>
|
||||
<td>
|
||||
<b>MYR {{ booking_details.bia }}</b>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Beneficiary Account Number : </td>
|
||||
<td>{{ booking_details.account_num }}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-header">Order Bankin Slip</div>
|
||||
<div class="row">
|
||||
<div class="card-body">
|
||||
<a :href="getURL(booking_details.china_bankslip_path)" target="_blank" >
|
||||
<img v-if="isImage(booking_details.china_bankslip_path)" :src="booking_details.china_bankslip_path" class="image">
|
||||
<a :href="getURL(booking_details.user_bankslip_path)" target="_blank" >
|
||||
<img v-if="isImage(booking_details.user_bankslip_path)" :src="booking_details.user_bankslip_path" class="image">
|
||||
<p v-else>Download</p>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- order details -->
|
||||
<div class="card">
|
||||
<div class="card-header">Order Details</div>
|
||||
<div class="card-body">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<table class="table table-striped">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Ref No :</td>
|
||||
<td>{{ booking_details.id }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Date :</td>
|
||||
<td>{{ booking_details.created_at }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Customer Marking :</td>
|
||||
<td>{{ booking_details.marking }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Term: </td>
|
||||
<td>{{ booking_details.term }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Beneficiary Account : </td>
|
||||
<td>{{ booking_details.account_name }}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="col">
|
||||
<table class="table table-striped">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>CNY/RMB :</td>
|
||||
<td>CNY {{ booking_details.amount }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>+ Service Charge :</td>
|
||||
<td>CNY {{ booking_details.service_charge }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>RATE :</td>
|
||||
<td>{{ booking_details.rate }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td/>
|
||||
<td>
|
||||
<b>MYR {{ booking_details.bia }}</b>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Beneficiary Account Number : </td>
|
||||
<td>{{ booking_details.account_num }}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-header">Order Bankin Slip</div>
|
||||
<div class="row">
|
||||
<div class="card-body">
|
||||
<a :href="getURL(booking_details.user_bankslip_path)" target="_blank" >
|
||||
<img v-if="isImage(booking_details.user_bankslip_path)" :src="booking_details.user_bankslip_path" class="image">
|
||||
<p v-else>Download</p>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else id="new-invoice">
|
||||
<h3>This is new invoice</h3>
|
||||
</div>
|
||||
</el-main>
|
||||
</template>
|
||||
@@ -209,6 +214,11 @@ export default {
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
isLegacy: function () {
|
||||
return this.booking_details.user_po_path && this.booking_details.user_po_path.length > 0
|
||||
}
|
||||
},
|
||||
beforeCreate () {
|
||||
const loading = this.$loading({
|
||||
lock: true,
|
||||
@@ -232,7 +242,6 @@ export default {
|
||||
})
|
||||
})
|
||||
},
|
||||
|
||||
methods: {
|
||||
uploadPo () {
|
||||
this.loading_btn = true
|
||||
|
||||
Reference in New Issue
Block a user