style: improve booking detail UI , show booking status.

This commit is contained in:
weichien
2021-05-05 11:47:23 +08:00
parent a889a5082a
commit 4274a9d34b
2 changed files with 54 additions and 64 deletions
@@ -0,0 +1,12 @@
<template>
<div class="row p-t-10 p-b-10" v-if="item && item.status === 3">
<div class="col p-b-10 bg-white text-center"><h4>Order Completed</h4></div>
</div>
</template>
<script>
import componentHandler from "../../../general/mixins/componentHandler";
export default {
mixins: [componentHandler],
};
</script>
@@ -2,8 +2,9 @@
<div class="row parentContainer">
<div class="col">
<loading-component style="height: 200px; top: 0;" key="1" color="success" v-show="isLoading"></loading-component>
<booking-status-component :data="booking"></booking-status-component>
<div class="row" v-show="!isLoading" v-if="booking">
<div class="col-7">
<div class="col-12 col-sm-12 col-md-7">
<div class="row">
<div class="col bg-white padding-25">
<div class="absolute" style="top: -5px;right: -5px;width: 0px;height: 0px;border-style: solid;border-width: 0px 110px 110px 0px;border-color: transparent rgb(249, 249, 249) transparent transparent;z-index: 2;">
@@ -101,7 +102,7 @@
</div>
</div>
</div>
<div class="col-3">
<div class="col-12 col-sm-12 col-md-3">
<booking-payment-quotation-component :data="booking" :section="section"></booking-payment-quotation-component>
<div class="row m-t-20" v-if="booking.payment_attempts.length">
<div class="col">
@@ -224,72 +225,49 @@
<div class="font-head fs-10 all-caps">Invoice</div>
</div>
</div>
<div class="row">
<div class="col">
<div class="col p-t-10 p-b-10 p-r-0 bg-white">
<div v-if="booking.purchase_order_document" class="row align-items-end m-b-10 ">
<div class="col">
<div class="font-heading all-caps fs-10">Purchase Order:</div>
</div>
<div class="col-auto text-right">
<div class="col-auto no-padding m-r-5">
<document-file-viewr-component :file="booking.purchase_order_document.files[0]">
<template slot="button">
<div class="icon-thumbnail fs-11 text-white icon-25 bg-primary btn-rounded float-left m-r-5">
<i class="fa fa-file-image-o fs-10"></i>
</div>
</template>
</document-file-viewr-component>
</div>
</div>
<div class="col p-t-10 p-b-10 bg-white">
<div v-if="booking.purchase_order_document" class="m-b-10">
<document-file-viewr-component :file="booking.purchase_order_document.files[0]">
<template slot="button">
<button type="button" class="btn btn-primary btn-lg btn-block b-rad-none fs-12">
View Purchase Order
</button>
</template>
</document-file-viewr-component>
</div>
<div v-if="booking.deliver_order_document" class="row align-items-end m-b-10 ">
<div class="col">
<div class="font-heading all-caps fs-10">Deliver Order:</div>
</div>
<div class="col-auto text-right">
<div class="col-auto no-padding m-r-5">
<document-file-viewr-component :file="booking.deliver_order_document.files[0]">
<template slot="button">
<div class="icon-thumbnail fs-11 text-white icon-25 bg-primary btn-rounded float-left m-r-5">
<i class="fa fa-file-image-o fs-10"></i>
</div>
</template>
</document-file-viewr-component>
</div>
</div>
<div v-if="booking.deliver_order_document" class="m-b-10">
<document-file-viewr-component :file="booking.deliver_order_document.files[0]">
<template slot="button">
<button type="button" class="btn btn-primary btn-lg btn-block fs-12">
View Deliver Order
</button>
</template>
</document-file-viewr-component>
</div>
<div v-if="booking.payment_order_document" class="row align-items-end m-b-10 ">
<div class="col">
<div class="font-heading all-caps fs-10">Payment Order:</div>
</div>
<div class="col-auto text-right">
<div class="col-auto no-padding m-r-5">
<document-file-viewr-component :file="booking.payment_order_document.files[0]">
<template slot="button">
<div class="icon-thumbnail fs-11 text-white icon-25 bg-primary btn-rounded float-left m-r-5">
<i class="fa fa-file-image-o fs-10"></i>
</div>
</template>
</document-file-viewr-component>
</div>
</div>
<div v-if="booking.payment_order_document" class="m-b-10">
<document-file-viewr-component :file="booking.payment_order_document.files[0]">
<template slot="button">
<button type="button" class="btn btn-primary btn-lg btn-block fs-12">
View Payment Order
</button>
</template>
</document-file-viewr-component>
</div>
<div v-if="booking.supplier_order_document" class="row align-items-end m-b-10 ">
<div class="col">
<div class="font-heading all-caps fs-10">Supplier Deliver Order:</div>
</div>
<div class="col-auto text-right">
<div class="col-auto no-padding m-r-5">
<document-file-viewr-component :file="booking.supplier_order_document.files[0]">
<template slot="button">
<div class="icon-thumbnail fs-11 text-white icon-25 bg-primary btn-rounded float-left m-r-5">
<i class="fa fa-file-image-o fs-10"></i>
</div>
</template>
</document-file-viewr-component>
</div>
</div>
<div v-if="booking.supplier_order_document" class="m-b-10">
<document-file-viewr-component :file="booking.supplier_order_document.files[0]">
<template slot="button">
<button type="button" class="btn btn-primary btn-lg btn-block fs-12">
View Supplier Deliver Order
</button>
</template>
</document-file-viewr-component>
</div>
</div>
</div>
@@ -340,7 +318,7 @@
</div>
</div>
</div>
<div class="col p-l-0">
<div class="col p-l-0 col-sm-2 col-md-2">
<verification-warning-component :data="booking.company"></verification-warning-component>
</div>
</div>