Files
exchange-2.0/resources/assets/vue/components/bookings/elements/BillingDocumentComponent.vue
T
2022-03-02 21:32:58 +08:00

68 lines
3.3 KiB
Vue

<template>
<div class="row">
<div class="col">
<div class="row align-items-center m-b-15 parentContainer position-relative">
<div class="col-auto">
<div class="row">
<div class="col-auto p-r-10 all-caps">
<div class="font-heading all-caps bold">{{item.owner.marking}}</div>
</div>
</div>
<div class="row">
<div class="col">
<div class="font-heading all-caps muted fs-11">{{item.owner.created_at}}</div>
</div>
</div>
</div>
<div class="col-2">
<div class="font-heading fs-10 muted all-caps">Marking</div>
<div class="font-heading">
<a :href="route('customer.profile', item.owner.company.reference)">{{this.item.owner.company.reference}}</a>
</div>
</div>
<div class="col-auto">
<div class="font-heading fs-10 muted all-caps">Document Type</div>
<div class="font-heading">
<span v-if="item.document_type === 'INVOICE'">Invoice</span>
<span v-if="item.document_type === 'PURCHASE_ORDER'">Purchase Order</span>
<span v-if="item.document_type === 'DELIVER_ORDER'">Delivery Order</span>
<span v-if="item.document_type === 'SUPPLIER_DELIVER_ORDER'">Supplier Delivery Order</span>
</div>
</div>
<div class="col-auto d-none d-lg-block">
<div class="font-heading fs-10 muted all-caps">Currency</div>
<div class="font-heading bold">
<span class="flag-icon" :class="'flag-icon-'+item.owner.convertible_currency.country.short_code.toLowerCase()"></span> {{item.owner.convertible_currency.short_code}}
</div>
</div>
<div class="col">
<div class="font-heading fs-10 muted all-caps">Payable Amount</div>
<div class="font-heading text-success bold">{{item.owner.amount}} {{item.owner.fixed_currency.short_code}}</div>
</div>
<div class="col">
<div class="row">
<div class="col-auto">
<document-file-viewer-component :file="item.files[0]">
<template slot="button">
<button class="btn btn-success w-100">Download</button>
</template>
</document-file-viewer-component>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import componentHandler from '../../../general/mixins/componentHandler';
export default {
data(){
return {
}
},
mixins: [componentHandler]
}
</script>