mirror of
https://gitlab.com/CIEFWorldwideSdnBhd/shipping-portal.git
synced 2026-08-19 04:24:12 +00:00
omair saleh
142 lines
8.1 KiB
Vue
142 lines
8.1 KiB
Vue
<template>
|
|
<div class="row m-l-0 m-r-0 m-b-30 parentContainer">
|
|
<div class="col bg-white">
|
|
<div class="row align-items-center">
|
|
<div class="col no-padding">
|
|
<div class="row">
|
|
<div class="col">
|
|
<a :href="route('order.qr.download', item.id)" target="_blank">
|
|
<div class="peelable-corner overflow-hidden relative">
|
|
<img :src="'https://chart.googleapis.com/chart?chs=150x150&cht=qr&chl={id:'+item.id+'}'" class="w-100">
|
|
</div>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col">
|
|
<div class="row m-b-5">
|
|
<div class="col">
|
|
<small class="fs-10 all-caps muted">Order No.</small>
|
|
<h6 class="no-margin small">{{item.reference}}</h6>
|
|
</div>
|
|
</div>
|
|
<div class="row m-b-5">
|
|
<div class="col">
|
|
<small class="fs-10 all-caps muted">Warehouse</small>
|
|
<h6 class="no-margin small">{{item.warehouse.id === 3 ? 'Guang Zhou' : 'Yiwu'}}</h6>
|
|
</div>
|
|
</div>
|
|
<div class="row m-b-5">
|
|
<div class="col">
|
|
<small class="fs-10 all-caps muted">Delivery Address</small>
|
|
<h6 class="no-margin small">{{item.address.reference}} <i class="fa fa-info-circle m-l-5" v-tooltip:right="item.address.street_one+' '+(item.address.street_two ? item.address.street_two : '')+', '+ item.address.district.name+', '+item.address.post_code+' '+item.address.state.name+', '+item.address.country.name" ></i></h6>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row b-t b-grey">
|
|
<div class="col">
|
|
<div class="row text-center">
|
|
<div class="col b-r b-grey text-info p-t-5 p-b-10">
|
|
<small class="fs-10 all-caps bold">Received</small>
|
|
<h6 class="bold no-margin text-info">{{item.parcels.reduce((total, obj) => obj.quantity + total, 0)}}</h6>
|
|
</div>
|
|
<div class="col b-r b-grey text-primary p-t-5 p-b-10">
|
|
<small class="fs-10 all-caps bold">In Transit</small>
|
|
<h6 class="bold no-margin text-primary">{{item.in_transit_packages.reduce((total, obj) => obj.quantity + total, 0)}}</h6>
|
|
</div>
|
|
<div class="col text-success p-t-5 p-b-10">
|
|
<small class="fs-10 all-caps bold">Delivered</small>
|
|
<h6 class="bold no-margin text-success">{{item.delivered_packages.reduce((total, obj) => obj.quantity + total, 0)}}</h6>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row p-t-5 p-b-15 b-t b-grey">
|
|
<div class="col">
|
|
<div class="row">
|
|
<div class="col-auto" v-if="$store.getters.isAdmin">
|
|
<small class="fs-10 all-caps muted">Marking</small>
|
|
<a :href="route('customer.profile', item.company_module.marking)">
|
|
<h6 class="no-margin small">{{item.company_module.marking}}</h6>
|
|
</a>
|
|
</div>
|
|
<div class="col">
|
|
<small class="fs-10 all-caps muted">Date</small>
|
|
<h6 class="no-margin small">{{item.created_at}}</h6>
|
|
</div>
|
|
<div class="col-auto text-right">
|
|
<small class="fs-10 all-caps muted">Total CBM</small>
|
|
<h6 class="no-margin semi-bold">{{(Math.round((item.origin_warehouse_packages.reduce((total, obj) => obj.cbm + total, 0) + item.in_transit_packages.reduce((total, obj) => obj.cbm + total, 0) + item.delivered_packages.reduce((total, obj) => obj.cbm + total, 0)) * 10000) / 10000).toFixed(3)}}</h6>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col no-padding">
|
|
<div class="row">
|
|
<div class="col">
|
|
<a :href="route('order.show', item.reference)">
|
|
<div class="btn btn-sm btn-default bg-master-lighter no-border btn-block b-rad-none">More Details</div>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-auto no-padding">
|
|
<div class="row">
|
|
<div class="col">
|
|
<div class="btn btn-sm btn-default bg-master-light text-info btn-block b-rad-none no-border" @click="expanded = !expanded">
|
|
<i class="fa fa-fw" :class="{'fa-ellipsis-v': !expanded, 'fa-times': expanded}"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<transition-component group enter-class="animate__animated animate__flipInX animate__fast" leave-class="animate__animated animate__fadeOut animate__faster">
|
|
<div class="absolute w-50" style="bottom: 32px; right: 15px;" key="1" v-if="expanded">
|
|
<div class="row">
|
|
<div class="col bg-master-lightest b-a b-grey">
|
|
<div class="row p-t-15 p-b-15 b-b b-grey pointer requestModal" v-if="item.status !== 5" data-type="cancelOrder">
|
|
<div class="col">
|
|
<h6 class="light no-margin fs-13 text-danger"><i class="fa fa-times m-r-10"></i>Cancel Order</h6>
|
|
</div>
|
|
</div>
|
|
<div class="row p-t-15 p-b-15 b-b b-grey pointer requestModal" v-if="item.status === 5" data-type="restoreOrder">
|
|
<div class="col">
|
|
<h6 class="light no-margin fs-13 text-success"><i class="fa fa-history m-r-10"></i>Restore Order</h6>
|
|
</div>
|
|
</div>
|
|
<a :href="route('order.qr.download', item.id)" target="_blank">
|
|
<div class="row p-t-15 p-b-15 b-b b-grey pointer">
|
|
<div class="col">
|
|
<h6 class="light no-margin fs-13"><i class="fa fa-cloud-download m-r-10"></i>Download QR Cod PDF</h6>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</transition-component>
|
|
</div>
|
|
<modal-component class="animate__animated animate__fast animate__fadeIn" styleType="fill-in" type="cancelOrder">
|
|
<cancel-order-form-component :data="item" section="oderList" class="text-center"></cancel-order-form-component>
|
|
</modal-component>
|
|
<modal-component class="animate__animated animate__fast animate__fadeIn" styleType="fill-in" type="restoreOrder">
|
|
<restore-order-form-component :data="item" section="oderList" class="text-center"></restore-order-form-component>
|
|
</modal-component>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import componentHandler from '../../../general/mixins/componentHandler';
|
|
export default {
|
|
created(){
|
|
$('[data-toggle="tooltip"]').tooltip()
|
|
},
|
|
data(){
|
|
return {
|
|
expanded: false
|
|
}
|
|
},
|
|
mixins: [componentHandler]
|
|
}
|
|
</script> |