mirror of
https://gitlab.com/CIEFWorldwideSdnBhd/shipping-portal.git
synced 2026-08-19 04:24:12 +00:00
edmondlang
252 lines
16 KiB
Vue
252 lines
16 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">
|
|
<div class="row m-b-20">
|
|
<div class="col">
|
|
<div class="row m-l-0 m-r-0 bg-master-light padding-10" @keyup.enter="submitSearch()">
|
|
<div class="col-12 col-md mb-2 mb-md-0">
|
|
<div class="row">
|
|
<div class="col p-r-0 h-100">
|
|
<validation-wrapper-component :validator="$v.orderNumber">
|
|
<label class="all-caps">Order Number</label>
|
|
<input class="form-control" v-model.lazy="orderNumber">
|
|
</validation-wrapper-component>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-12 col-md mb-2 mb-md-0">
|
|
<div class="row">
|
|
<div class="col p-r-0 h-100">
|
|
<validation-wrapper-component :validator="$v.orderMarking">
|
|
<label class="all-caps">Marking</label>
|
|
<input class="form-control" v-model.lazy="orderMarking">
|
|
</validation-wrapper-component>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-12 col-md mb-2 mb-md-0">
|
|
<div class="row">
|
|
<div class="col p-r-0 h-100">
|
|
<validation-wrapper-component :validator="$v.orderSenderName">
|
|
<label class="all-caps">Sender Name</label>
|
|
<input class="form-control" v-model.lazy="orderSenderName">
|
|
</validation-wrapper-component>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-12 col-md-auto mb-2 mb-md-0">
|
|
<div class="row h-100">
|
|
<div class="col p-r-0 h-100">
|
|
<div class="btn btn-primary b-rad-none w-100 h-100 d-flex justify-content-center align-items-center p-l-30 p-r-30" @click="submitSearch()">
|
|
Search
|
|
</div>
|
|
</div>
|
|
<div class="col p-l-0 h-100">
|
|
<div class="btn btn-secondary b-rad-none w-100 h-100 d-flex justify-content-center align-items-center p-l-30 p-r-30" @click="resetSearch()">
|
|
Reset
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<a :href="route('last_mile_delivery.order.export') + '?ids=' + JSON.stringify(selectedOrderId)" target="_blank">
|
|
<button type="button" class="btn btn-sm 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()" v-if="$store.getters.isAdmin || $store.getters.getCompanyModuleType === 8">
|
|
<i class="fa fs-30 fa-fw" :class="{'fa-square-o': !selectAllOrder, 'fa-check-square': selectAllOrder}" ></i>
|
|
</th>
|
|
<th scope="col">Created Date</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 orderData">
|
|
<td class="col-auto pointer align-items-center" @click="selectOrder(data.id)" v-if="$store.getters.isAdmin || $store.getters.getCompanyModuleType === 8">
|
|
<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>{{data.created_at}}</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="orderData.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',
|
|
orderData: [],
|
|
selectAllOrder: false,
|
|
selectedOrderId: [],
|
|
emptyListSection: false,
|
|
filters: this.data ? {
|
|
company_module_id: this.data.company_module.id,
|
|
per_page: 20,
|
|
reference_like: '',
|
|
orderMarking: '',
|
|
orderSenderName: '',
|
|
status_in: [2],
|
|
order_by: {
|
|
column: 'id',
|
|
DESC: true,
|
|
},
|
|
} : {
|
|
per_page: 100,
|
|
reference_like: '',
|
|
orderMarking: '',
|
|
orderSenderName: '',
|
|
status_in: [2],
|
|
order_by: {
|
|
column: 'id',
|
|
DESC: true,
|
|
}
|
|
},
|
|
metaData: {
|
|
from: null,
|
|
to: null,
|
|
total: null,
|
|
current_page: null,
|
|
},
|
|
orderNumber: '',
|
|
orderMarking: '',
|
|
orderSenderName: ''
|
|
}
|
|
},
|
|
validations: {
|
|
orderNumber: { },
|
|
orderMarking: { },
|
|
orderSenderName: { }
|
|
},
|
|
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);
|
|
listDecorators.filters.reference_like = this.orderNumber;
|
|
listDecorators.filters.orderMarking = this.orderMarking;
|
|
listDecorators.filters.orderSenderName = this.orderSenderName;
|
|
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;
|
|
this.orderData = response.payload.data;
|
|
},
|
|
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;
|
|
},
|
|
submitSearch(){
|
|
this.fetchList();
|
|
},
|
|
resetSearch() {
|
|
this.orderNumber = '';
|
|
this.orderMarking = '';
|
|
this.orderSenderName = '';
|
|
this.fetchList();
|
|
},
|
|
},
|
|
mixins: [componentHandler]
|
|
}
|
|
</script>
|