mirror of
https://gitlab.com/CIEFWorldwideSdnBhd/shipping-portal.git
synced 2026-08-19 04:24:12 +00:00
edmondlang
4e53e1b48a
- admin cancel order
- add filter to display only active orders
- hide customer page
- show parcel weight as total weight (quantity * weight per quantity)
- in create order form
- order table
- export excel
- update export excel, only include the data of the selected Ids
172 lines
11 KiB
Vue
172 lines
11 KiB
Vue
<template>
|
|
<div class="row">
|
|
<div class="col no-margin">
|
|
<loading-component style="height: 200px; top: 0;" key="1" color="success" v-show="$store.getters.isLoading(section)"></loading-component>
|
|
<div class="row" v-show="!$store.getters.isLoading(section)">
|
|
<div class="col">
|
|
<div class="row m-b-15" v-if="$store.getters.isAdmin || $store.getters.getCompanyModuleType === 8">
|
|
<div class="col-auto p-r-5">
|
|
<a :href="route('last_mile_delivery.order.export') + '?ids=' + JSON.stringify(selectedOrderId)" target="_blank">
|
|
<button type="button" class="btn btn-sm btn-block p-t-10 p-b-10 p-r-35 p-l-35 btn-complete b-rad-none">
|
|
<div class="row align-items-center">
|
|
<div class="col-auto p-r-0 p-l-0">
|
|
<i class="fa fa-file-excel-o fs-16"></i>
|
|
</div>
|
|
<div class="col p-r-5">Export To Excel</div>
|
|
</div>
|
|
</button>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<div class="row overflow-hidden" key="2" v-show="!$store.getters.isLoading(section)">
|
|
<div class="col">
|
|
<div class="row">
|
|
<div class="col">
|
|
<div class="row scrollable">
|
|
<div class="col">
|
|
<table class="table" style="width: 2500px">
|
|
<thead class="thead-dark">
|
|
<tr>
|
|
<th class="col-auto pointer align-items-center" @click="chooseAllOrder()">
|
|
<i class="fa fs-30 fa-fw" :class="{'fa-square-o': !selectAllOrder, 'fa-check-square': selectAllOrder}" ></i>
|
|
</th>
|
|
<th scope="col">Order Number</th>
|
|
<th scope="col">Marking</th>
|
|
<th scope="col">Service Type</th>
|
|
<th scope="col">Parcel Type</th>
|
|
<th scope="col">Item Content</th>
|
|
<th scope="col">Quantity</th>
|
|
<th scope="col">Weight</th>
|
|
<th scope="col">Sender Name</th>
|
|
<th scope="col">Sender Address</th>
|
|
<th scope="col">Sender Phone</th>
|
|
<th scope="col">Receiver Name</th>
|
|
<th scope="col">Receiver Address</th>
|
|
<th scope="col">Receiver Phone</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr v-for="data in $store.getters.getListData(section)">
|
|
<td class="col-auto pointer align-items-center" @click="selectOrder(data.id)">
|
|
<i class="fa fs-30 fa-fw" :class="{'fa-square-o': !selectedOrderId.includes(data.id), 'fa-check-square': selectedOrderId.includes(data.id), 'text-complete': selectedOrderId.includes(data.id)}" ></i>
|
|
</td>
|
|
<td class="parentContainer">
|
|
{{data.reference}}
|
|
<a :href="'https://www.tracking.my/lineclear/'+data.reference" target="_blank"><div class="btn btn-xs btn-success m-l-10">Track <i class="fa fa-angle-right m-l-5"></i></div></a>
|
|
<div class="btn btn-xs btn-danger m-l-10 requestModal" v-if="$store.getters.isAdmin || $store.getters.getCompanyModuleType === 8" data-type="cancelOrder">Cancel <i class="fa fa-times m-l-5"></i></div>
|
|
<modal-component class="animate__animated animate__fast animate__fadeIn" type="cancelOrder">
|
|
<cancel-delivery-order-form-component :data="data" :section="section" class="text-center"></cancel-delivery-order-form-component>
|
|
</modal-component>
|
|
</td>
|
|
<td>{{data.company_module.marking}}</td>
|
|
<td>Walk In</td>
|
|
<td>{{data.packingList.type === 0 ? 'Package' : data.packingList.type === 1 ? 'Pallet' : 'Documents'}}</td>
|
|
<td>{{data.packingList.description}}</td>
|
|
<td>{{data.packingList.quantity}}</td>
|
|
<td>{{(Math.round((parseFloat(data.packingList.weight.toString().replace(",", "")) * data.packingList.quantity + Number.EPSILON) * 10) / 10).toFixed(1)}}KG</td>
|
|
<td>{{data.sender_address.contact.reference}}</td>
|
|
<td>{{data.sender_address.street_one+' '+(data.sender_address.street_two ? data.sender_address.street_two : '')+', '+ data.sender_address.district.name+', '+data.sender_address.post_code+' '+data.sender_address.state.name+', '+data.sender_address.country.name}}</td>
|
|
<td>{{data.sender_address.contact.phone}}</td>
|
|
<td>{{data.delivery_address.contact.reference}}</td>
|
|
<td>{{data.delivery_address.street_one+' '+(data.delivery_address.street_two ? data.delivery_address.street_two : '')+', '+ data.delivery_address.district.name+', '+data.delivery_address.post_code+' '+data.delivery_address.state.name+', '+data.delivery_address.country.name}}</td>
|
|
<td>{{data.delivery_address.contact.phone}}</td>
|
|
</tr>
|
|
<tr v-if="$store.getters.getListData(section).length === 0">
|
|
<td colspan="100%" class="text-center">No data available in table</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
<div class="row m-t-20">
|
|
<div class="col"></div>
|
|
<div class="col-auto p-r-0" v-show="filters.per_page < metaData.total">
|
|
<pagination-component :section="section" class="mb-5" ref="pagination"></pagination-component>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import componentHandler from '../../../general/mixins/componentHandler';
|
|
export default {
|
|
data(){
|
|
return {
|
|
section: 'ListOrderTableSection',
|
|
selectAllOrder: false,
|
|
selectedOrderId: [],
|
|
emptyListSection: false,
|
|
filters: this.data ? {
|
|
company_module_id: this.data.company_module.id,
|
|
per_page: 20,
|
|
status_in: [2],
|
|
order_by: {
|
|
column: 'id',
|
|
DESC: true,
|
|
},
|
|
} : {
|
|
per_page: 100,
|
|
status_in: [2],
|
|
order_by: {
|
|
column: 'id',
|
|
DESC: true,
|
|
}
|
|
},
|
|
metaData: {
|
|
from: null,
|
|
to: null,
|
|
total: null,
|
|
current_page: null,
|
|
},
|
|
}
|
|
},
|
|
created(){
|
|
this.setDecoratorDefault();
|
|
this.$store.dispatch('updateListQueue', {'name': this.section, 'page': 1, 'filters': this.filters});
|
|
},
|
|
computed: {
|
|
pendingList () {
|
|
return this.$store.getters.isInCompleteQueue(this.section);
|
|
}
|
|
},
|
|
watch: {
|
|
pendingList(inComplete){
|
|
if(inComplete){
|
|
this.fetchList();
|
|
}
|
|
}
|
|
},
|
|
methods: {
|
|
fetchList(){
|
|
let listDecorators = this.$store.getters.getListDetails(this.section);
|
|
this.submit(this.route('api.delivery.order.list') + '?page=' + listDecorators.page + '&filters=' + JSON.stringify(listDecorators.filters), 'get', this.section, false, false)
|
|
},
|
|
successHandler(response){
|
|
this.$store.dispatch('completeList', {'name': this.section, 'data': response.payload.data});
|
|
this.$refs.pagination.makePagination(response.payload.meta, response.payload.links);
|
|
this.metaData = response.payload.meta;
|
|
},
|
|
chooseAllOrder(){
|
|
this.selectAllOrder = !this.selectAllOrder;
|
|
this.selectedOrderId = [];
|
|
if (this.selectAllOrder) {
|
|
this.$store.getters.getListData(this.section).forEach((value, index) => {
|
|
this.selectedOrderId.push(value.id);
|
|
});
|
|
}
|
|
},
|
|
selectOrder(orderId){
|
|
this.selectedOrderId.includes(orderId) ? this.selectedOrderId.splice(this.selectedOrderId.indexOf(orderId), 1) : this.selectedOrderId.push(orderId);
|
|
this.selectedOrderId.length === this.$store.getters.getListData(this.section).length ? this.selectAllOrder = true : this.selectAllOrder = false;
|
|
}
|
|
},
|
|
mixins: [componentHandler]
|
|
}
|
|
</script>
|