cief/exchange
1
0
Fork 0
mirror of https://gitlab.com/CIEFWorldwideSdnBhd/exchange.git synced 2026-08-30 01:34:16 +00:00
Code Issues Packages Projects Releases Wiki Activity

final commit

Browse Source
This commit is contained in:
Mouhamed Lamine
2018-07-17 16:52:30 +08:00
parent fb102df36c
commit 3410008dd4
1 changed files with 285 additions and 283 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/assets/js/pages/home.vue
+285 -283
View File
@@ -1,289 +1,291 @@
<template>
<el-container>
<el-main>
<!-- Input-Amount :sm="6" :md="6" :lg="6" :xl="6" :sm="12" :md="12" :lg="12" :xl="10" :sm="8" :md="8" :lg="10" :xl="10"-->
<el-row :gutter="10" type="flex" justify="center" align="middle">
<el-col :sm="8" align="right">
I need:
</el-col>
<el-col :sm="8" align="center">
<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-select>
</el-col>
<el-col :sm="8" align="center">
<el-input v-model="booking.amount" placeholder="Amount" />
</el-col>
</el-row>
<br>
<!-- 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-row>
<el-row :gutter="20" type="flex" justify="center" align="middle">
<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>
</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">{{ rate.x1_cash }}</div>
</el-col>
<el-col>
<div class="grid-content bg-purple" align="center">{{ rate.x1_cheque }}</div>
</el-col>
<el-col>
<div class="grid-content bg-purple" align="center">{{ rate.x1_ba }}</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-row>
<br>
<el-row :gutter="20" type="flex" justify="center" align="middle">
<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>
</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">{{ rate.x2_cash }}</div>
</el-col>
<el-col>
<div class="grid-content bg-purple" align="center">{{ rate.x2_cheque }}</div>
</el-col>
<el-col>
<div class="grid-content bg-purple" align="center">{{ rate.x2_ba }}</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-row>
<!-- Rate-Display-end -->
<!-- Form_popup -->
<el-dialog :visible.sync="dialogFormVisible" :fullscreen="true" title="Booking" center>
<el-form ref="bookingForm" :model="bookingForm" :rules="rules">
<div align="center">
<el-form-item prop="account_name">
<el-input v-model="bookingForm.account_name" placeholder="China Beneficiary Account" style="width: 80%" required="true" />
</el-form-item>
<el-form-item prop="bank_name">
<el-input v-model="bookingForm.bank_name" type="text" placeholder="Bank Name / AliPay / WechatPay" style="width: 80%" />
</el-form-item>
<el-form-item prop="bank_branch">
<el-input v-model="bookingForm.bank_branch" type="text" placeholder="Branch / 分行/支行" style="width: 80%" />
</el-form-item>
<el-form-item prop="account_num">
<el-input v-model="bookingForm.account_num" type="text" placeholder="Account Number / AliPay_ID / WechatPay_ID" style="width: 80%"
/>
</el-form-item>
<el-form-item>
<el-button @click="dialogFormVisible = false">Cancel</el-button>
<el-button :loading="loading" type="primary" @click="getCalculationValue('bookingForm')">Book Now</el-button>
</el-form-item>
</div>
</el-form>
</el-dialog>
<!-- Form_popup-end -->
<!-- Booking_confirmation_popup -->
<el-dialog :visible.sync="dialogFormVisible1" :fullscreen="true" title="Booking Confirmation" 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> -->
<!-- Table_booking_confirmation-end -->
<table class="table-responsive el-table" style="display:table; width:80%; margin: 0 auto;">
<tbody>
<tr>
<td class="el-table_2_column_9 is-right ">Date : </td>
<td class="el-table_2_column_9 is-left ">&nbsp;&nbsp; {{ bookingConfirmTable.date }}</td>
</tr>
<tr>
<td width="200" class="el-table_2_column_9 is-right ">Customer Marking : </td>
<td width="200" class="el-table_2_column_9 is-left ">&nbsp;&nbsp; {{ bookingConfirmTable.marking }}</td>
</tr>
<tr>
<td width="200" class="el-table_2_column_9 is-right ">Payment Method : </td>
<td width="200" class="el-table_2_column_9 is-left ">&nbsp;&nbsp; {{ bookingConfirmTable.payment_method }}</td>
</tr>
<tr>
<td width="200" class="el-table_2_column_9 is-right ">CNY/RMB : </td>
<td width="200" class="el-table_2_column_9 is-left ">&nbsp;&nbsp; {{ bookingConfirmTable.amount }}</td>
</tr>
<tr>
<td width="200" class="el-table_2_column_9 is-right ">+ Service Charge : </td>
<td width="200" class="el-table_2_column_9 is-left ">&nbsp;&nbsp; RMB {{ bookingConfirmTable.service_charge }}</td>
</tr>
<tr>
<td width="200" class="el-table_2_column_9 is-right "> RATE :</td>
<td width="200" class="el-table_2_column_9 is-left ">&nbsp;&nbsp; {{ bookingConfirmTable.rate }}</td>
</tr>
<tr>
<td width="200" class="el-table_2_column_9 is-right "/>
<td width="200" class="el-table_2_column_9 is-left ">&nbsp;&nbsp; RM {{ bookingConfirmTable.bankin_amount }}</td>
</tr>
<tr>
<td width="200" class="el-table_2_column_9 is-right "/>
<td width="200" class="el-table_2_column_9 is-left "/>
</tr>
<tr>
<td width="200" class="el-table_2_column_9 is-right ">China Beneficiary Acc :</td>
<td width="200" class="el-table_2_column_9 is-left ">&nbsp;&nbsp; {{ bookingConfirmTable.account_name }}</td>
</tr>
<tr>
<td width="200" class="el-table_2_column_9 is-right ">Bank in Amount :</td>
<td width="200" class="el-table_2_column_9 is-left ">&nbsp;&nbsp;
<b> RM {{ bookingConfirmTable.bankin_amount }}</b>
</td>
</tr>
</tbody>
</table>
<span slot="footer" class="dialog-footer">
<!-- <el-button @click="dialogFormVisible = false">Cancel</el-button> -->
<el-button :loading="loading" type="primary" @click="createBooking">Confirm</el-button>
</span>
</el-dialog>
<!-- Booking_confirmation_popup -->
<br>
<br>
<hr>
<div align="right">
<el-button icon="el-icon-refresh" type="primary" size="mini" @click="RefreshBooking()">Refresh</el-button></div>
<!-- Booking Table -->
<el-row :gutter="20">
<div>
<el-table :data="bookingTable">
<el-table-column label="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>
<el-main>
<!-- Input-Amount -->
<el-row :gutter="20" type="flex" justify="center" align="middle">
<el-col :span="20">
<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-select>
</div>
</el-row><br><br>
<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>
</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-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-row>
<el-row :gutter="20" type="flex" justify="center" align="middle">
<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>
</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">{{ rate.x1_cash }}</div>
</el-col>
<el-col>
<div class="grid-content bg-purple" align="center">{{ rate.x1_cheque }}</div>
</el-col>
<el-col>
<div class="grid-content bg-purple" align="center">{{ rate.x1_ba }}</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-row>
<br>
<el-row :gutter="20" type="flex" justify="center" align="middle">
<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>
</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">{{ rate.x2_cash }}</div>
</el-col>
<el-col>
<div class="grid-content bg-purple" align="center">{{ rate.x2_cheque }}</div>
</el-col>
<el-col>
<div class="grid-content bg-purple" align="center">{{ rate.x2_ba }}</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-row>
<!-- Rate-Display-end -->
<!-- Form_popup -->
<el-dialog :visible.sync="dialogFormVisible" :fullscreen="true" title="Booking" center>
<el-form ref="bookingForm" :model="bookingForm" :rules="rules">
<div align="center">
<el-form-item prop="account_name">
<el-input v-model="bookingForm.account_name" placeholder="China Beneficiary Account" style="width: 80%" required="true" />
</el-form-item>
<el-form-item prop="bank_name">
<el-input v-model="bookingForm.bank_name" type="text" placeholder="Bank Name / AliPay / WechatPay" style="width: 80%" />
</el-form-item>
<el-form-item prop="bank_branch">
<el-input v-model="bookingForm.bank_branch" type="text" placeholder="Branch / 分行/支行" style="width: 80%" />
</el-form-item>
<el-form-item prop="account_num">
<el-input v-model="bookingForm.account_num" type="text" placeholder="Account Number / AliPay_ID / WechatPay_ID" style="width: 80%"
/>
</el-form-item>
<el-form-item>
<el-button @click="dialogFormVisible = false">Cancel</el-button>
<el-button :loading="loading" type="primary" @click="getCalculationValue('bookingForm')">Book Now</el-button>
</el-form-item>
</div>
</el-form>
</el-dialog>
<!-- Form_popup-end -->
<!-- Booking_confirmation_popup -->
<el-dialog :visible.sync="dialogFormVisible1" :fullscreen="true" title="Booking Confirmation" 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> -->
<!-- Table_booking_confirmation-end -->
<table class="table-responsive el-table" style="display:table; width:80%; margin: 0 auto;">
<tbody>
<tr>
<td class="el-table_2_column_9 is-right ">Date : </td>
<td class="el-table_2_column_9 is-left ">&nbsp;&nbsp; {{ bookingConfirmTable.date }}</td>
</tr>
<tr>
<td width="200" class="el-table_2_column_9 is-right ">Customer Marking : </td>
<td width="200" class="el-table_2_column_9 is-left ">&nbsp;&nbsp; {{ bookingConfirmTable.marking }}</td>
</tr>
<tr>
<td width="200" class="el-table_2_column_9 is-right ">Payment Method : </td>
<td width="200" class="el-table_2_column_9 is-left ">&nbsp;&nbsp; {{ bookingConfirmTable.payment_method }}</td>
</tr>
<tr>
<td width="200" class="el-table_2_column_9 is-right ">CNY/RMB : </td>
<td width="200" class="el-table_2_column_9 is-left ">&nbsp;&nbsp; {{ bookingConfirmTable.amount }}</td>
</tr>
<tr>
<td width="200" class="el-table_2_column_9 is-right ">+ Service Charge : </td>
<td width="200" class="el-table_2_column_9 is-left ">&nbsp;&nbsp; RMB {{ bookingConfirmTable.service_charge }}</td>
</tr>
<tr>
<td width="200" class="el-table_2_column_9 is-right "> RATE :</td>
<td width="200" class="el-table_2_column_9 is-left ">&nbsp;&nbsp; {{ bookingConfirmTable.rate }}</td>
</tr>
<tr>
<td width="200" class="el-table_2_column_9 is-right "/>
<td width="200" class="el-table_2_column_9 is-left ">&nbsp;&nbsp; RM {{ bookingConfirmTable.bankin_amount }}</td>
</tr>
<tr>
<td width="200" class="el-table_2_column_9 is-right "/>
<td width="200" class="el-table_2_column_9 is-left "/>
</tr>
<tr>
<td width="200" class="el-table_2_column_9 is-right ">China Beneficiary Acc :</td>
<td width="200" class="el-table_2_column_9 is-left ">&nbsp;&nbsp; {{ bookingConfirmTable.account_name }}</td>
</tr>
<tr>
<td width="200" class="el-table_2_column_9 is-right ">Bank in Amount :</td>
<td width="200" class="el-table_2_column_9 is-left ">&nbsp;&nbsp;
<b> RM {{ bookingConfirmTable.bankin_amount }}</b>
</td>
</tr>
</tbody>
</table>
<span slot="footer" class="dialog-footer">
<!-- <el-button @click="dialogFormVisible = false">Cancel</el-button> -->
<el-button :loading="loading" type="primary" @click="createBooking">Confirm</el-button>
</span>
</el-dialog>
<!-- Booking_confirmation_popup -->
<br>
<br>
<hr>
<div align="right">
<el-button icon="el-icon-refresh" type="primary" size="mini" @click="RefreshBooking()">Refresh</el-button></div>
<!-- Booking Table -->
<el-row :gutter="20">
<div>
<el-table :data="bookingTable">
<el-table-column label="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>
<!-- Booking Table-end -->
</el-main>
</el-container>
</el-row><br><br>
<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>
<!-- Booking Table-end -->
</el-main>
</template>
<style>
.el-tag {