mirror of
https://gitlab.com/CIEFWorldwideSdnBhd/izyim.git
synced 2026-08-31 02:13:57 +00:00
Omair Saleh
307 lines
17 KiB
Vue
307 lines
17 KiB
Vue
<template>
|
|
<div class="inline">
|
|
<div class="btn btn-sm btn-success b-rad-none requestModal" v-if="this.packingList.confirmed" data-type="packed">Order Packed</div>
|
|
<div class="btn btn-sm btn-complete b-rad-none requestModal" data-type="packingList">Packing List</div>
|
|
<modal-component type="packingList" large>
|
|
<div class="card card-default no-border">
|
|
<div class="card-block no-padding">
|
|
<div class="row p-t-30">
|
|
<div class="col no-padding">
|
|
<div class="b-l b-success p-l-15 m-b-15" style="border-left-width: 3px;">
|
|
<h6 class="bold all-caps no-margin text-success">Packing List</h6>
|
|
<div class="muted all-caps fs-12">Order Packages Details</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<form method="post" >
|
|
<div class="form-group form-group-default input-group">
|
|
<div class="row w-100">
|
|
<div class="col no-padding">
|
|
<label class="muted block">Packing List No.</label>
|
|
<input class="form-control block" v-model="packingList.reference_no">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row m-b-15" v-for="(item, index) in packingList.packages">
|
|
<div class="col p-b-15 bg-master-lightest">
|
|
<div class="row p-t-10 p-b-10">
|
|
<div class="col p-l-5 b-l b-grey" style=" border-left-width: 3px; ">
|
|
<span class="bold muted fs-10 all-caps">Package {{index + 1}}</span>
|
|
</div>
|
|
<div class="col-auto text-danger no-padding">
|
|
<i @click="removePackage(index)" v-if="index !== 0" class="fa fa-times"></i>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col p-l-0">
|
|
<div class="form-group form-group-default input-group">
|
|
<div class="row w-100">
|
|
<div class="col no-padding">
|
|
<label class="muted block">Description</label>
|
|
<input class="form-control block" v-model="item.description">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-4 no-padding">
|
|
<div class="form-group form-group-default input-group">
|
|
<div class="row w-100">
|
|
<div class="col no-padding">
|
|
<label class="muted block">Quantity</label>
|
|
<input class="form-control block" v-model="item.quantity" v-on:keypress="isNumber(false)" >
|
|
</div>
|
|
<div class="col-auto no-padding">
|
|
<div class="input-group-addon pointer inline no-padding" style=" min-width: auto; ">
|
|
<div class="row align-items-center justify-content-center h-100">
|
|
<div class="col no-padding h-100">
|
|
<div @click="item.quantity++" class="row align-items-center justify-content-center h-50">
|
|
<div class="col p-l-10 p-r-10">
|
|
<i class="fa fa-angle-up text-success"></i>
|
|
</div>
|
|
</div>
|
|
<div @click="item.quantity > 1 ? item.quantity-- : item.quantity" class="row align-items-center justify-content-center h-50">
|
|
<div class="col p-l-10 p-r-10">
|
|
<i class="fa fa-angle-down text-success"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col p-l-5 p-r-0">
|
|
<div class="form-group form-group-default input-group">
|
|
<div class="row w-100">
|
|
<div class="col no-padding">
|
|
<label class="muted block">Length</label>
|
|
<input class="form-control block" v-model="item.length" v-on:keypress="isNumber(true)">
|
|
</div>
|
|
<div class="col-auto no-padding">
|
|
<div class="input-group-addon inline" style="min-width:auto;">
|
|
<div class="row align-items-center justify-content-center h-100">
|
|
<div class="col no-padding text-center">
|
|
<small>cm</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col p-l-0 p-r-5">
|
|
<div class="form-group form-group-default input-group">
|
|
<div class="row w-100">
|
|
<div class="col no-padding">
|
|
<label class="muted block">Width</label>
|
|
<input class="form-control block" v-model="item.width" v-on:keypress="isNumber(true)">
|
|
</div>
|
|
<div class="col-auto no-padding">
|
|
<div class="input-group-addon inline" style="min-width:auto;">
|
|
<div class="row align-items-center justify-content-center h-100">
|
|
<div class="col no-padding text-center">
|
|
<small>cm</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col p-l-5 p-r-5">
|
|
<div class="form-group form-group-default input-group">
|
|
<div class="row w-100">
|
|
<div class="col no-padding">
|
|
<label class="muted block">Height</label>
|
|
<input class="form-control block" v-model="item.height" v-on:keypress="isNumber(true)">
|
|
</div>
|
|
<div class="col-auto no-padding">
|
|
<div class="input-group-addon inline" style="min-width:auto;">
|
|
<div class="row align-items-center justify-content-center h-100">
|
|
<div class="col no-padding text-center">
|
|
<small>cm</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col p-l-0">
|
|
<div @click="AddPackage" class="btn btn-xs btn-complete pointer all-caps b-rad-none"><i class="fa fa-plus m-r-0"></i> Add Package</div>
|
|
</div>
|
|
<div class="col-auto no-padding">
|
|
<button class="btn b-rad-none btn-default" data-dismiss="modal">Cancel</button>
|
|
<button type="submit" class="btn b-rad-none btn-success" @click="updatePackingList" data-dismiss="modal">Confirm</button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</modal-component>
|
|
<modal-component type="packed" large>
|
|
<div class="card card-default no-border">
|
|
<div class="card-block no-padding">
|
|
<div class="row p-t-30">
|
|
<div class="col no-padding">
|
|
<div class="b-l b-success p-l-15 m-b-15" style="border-left-width: 3px;">
|
|
<h6 class="bold all-caps no-margin text-success">Order Packed</h6>
|
|
<div class="muted all-caps fs-12">Confirm order has been packed</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row m-b-20">
|
|
<div class="col no-padding bg-master-lightest">
|
|
<div class="row">
|
|
<div class="col p-t-10 p-b-10 b-b b-grey bg-master-lighter">
|
|
<p class="no-margin text-info"><small class="muted all-caps fs-12 m-r-5">Packing List No:</small> {{packingList.reference_no}}</p>
|
|
</div>
|
|
</div>
|
|
<div class="row p-t-10 p-b-10 b-b b-grey align-items-center justify-content-center" v-for="item in packingList.packages">
|
|
<div class="col">
|
|
<p class="no-margin">{{item.description}}</p>
|
|
</div>
|
|
<div class="col-2 text-center">
|
|
Qty {{item.quantity}}
|
|
</div>
|
|
<div class="col-3 text-right">
|
|
<p class="no-margin">{{(((item.width/100) * (item.length/100) * (item.height/100)) * item.quantity).toFixed(5)}} CBM</p>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col p-t-10 p-b-10 b-b b-grey bg-master-lighter text-right">
|
|
<h6 class="no-margin all-caps bold">Total: <span class="text-info" v-text="this.totalCBM() + ' CBM'"></span></h6>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col text-right no-padding">
|
|
<button class="btn b-rad-none btn-default" data-dismiss="modal">Cancel</button>
|
|
<button type="submit" class="btn b-rad-none btn-success" @click="completePacking" data-dismiss="modal">Confirm</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</modal-component>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
props: {
|
|
'data': {
|
|
type: Number,
|
|
required: true
|
|
},
|
|
'attachments': {
|
|
type: Object
|
|
}
|
|
},
|
|
data(){
|
|
return {
|
|
packingList: {
|
|
reference_no: '',
|
|
confirmed: 0,
|
|
packages: [{
|
|
description: '',
|
|
quantity: 1,
|
|
width: 0.0,
|
|
height: 0.0,
|
|
length: 0.0
|
|
}]
|
|
}
|
|
}
|
|
},
|
|
created(){
|
|
if(this.attachments !== null){
|
|
this.packingList = this.attachments;
|
|
}
|
|
},
|
|
watch: {
|
|
'attachments': function() {
|
|
this.packingList = this.attachments;
|
|
}
|
|
},
|
|
methods: {
|
|
updatePackingList() {
|
|
//turn on loading animation
|
|
this.isLoading = true;
|
|
fetch(route('api.order.packages.update', {orderId: this.data}), {
|
|
method: 'post',
|
|
body: JSON.stringify(this.packingList),
|
|
headers: {
|
|
'content-type': 'application/json'
|
|
}
|
|
}).then((response) => {
|
|
//turn off loading animation
|
|
this.isLoading = false;
|
|
|
|
Event.$emit('updateOrdersList');
|
|
|
|
});
|
|
},
|
|
completePacking() {
|
|
|
|
//turn on loading animation
|
|
this.isLoading = true;
|
|
fetch(route('api.order.step.update', {orderId: this.data}), {
|
|
method: 'post',
|
|
headers: {
|
|
'content-type': 'application/json'
|
|
}
|
|
}).then(() => {
|
|
//turn off loading animation
|
|
this.isLoading = false;
|
|
|
|
Event.$emit('updateOrdersList', true);
|
|
|
|
|
|
})
|
|
},
|
|
AddPackage(){
|
|
this.packingList.packages.push({
|
|
description: '',
|
|
quantity: 1,
|
|
width: 0.0,
|
|
height: 0.0,
|
|
length: 0.0
|
|
});
|
|
},
|
|
isNumber(decimal) {
|
|
let charCode = (window.event.which) ? window.event.which : window.event.keyCode;
|
|
if ((charCode > 31 && (charCode < 48 || charCode > 57 ))) {
|
|
|
|
if(decimal){
|
|
if(charCode === 46){
|
|
return true
|
|
}
|
|
}
|
|
|
|
window.event.preventDefault();
|
|
|
|
} else {
|
|
return true;
|
|
}
|
|
},
|
|
removePackage(index){
|
|
this.packingList.packages.splice(index, 1);
|
|
},
|
|
totalCBM(){
|
|
var total = 0;
|
|
$.each(this.packingList.packages, function(key, object){
|
|
total += (((object.width/100) * (object.length/100) * (object.height/100)) * object.quantity)
|
|
});
|
|
return total.toFixed(5);
|
|
}
|
|
}
|
|
}
|
|
</script> |