mirror of
https://gitlab.com/CIEFWorldwideSdnBhd/izyim.git
synced 2026-08-22 14:03:57 +00:00
Omair Saleh
467 lines
33 KiB
Vue
467 lines
33 KiB
Vue
<template>
|
|
<div class="inline">
|
|
<notification-component ref="notification"></notification-component>
|
|
<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>
|
|
<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-l-0 m-r-0 m-b-15">
|
|
<div class="col no-padding">
|
|
<div class="row packages" v-for="i in Math.ceil(packingList.packages.length / 3)">
|
|
<div class="col-4 b-r b-grey bg-master-lightest no-padding text-center package-thumbnail" v-for="(item, index) in packingList.packages.slice((i - 1) * 3, i * 3)">
|
|
<div class="row">
|
|
<div class="col no-padding">
|
|
<div class="row">
|
|
<div class="col no-padding text-left">
|
|
<div class="status-border" :class="[{'active': item.length > 0 && item.height > 0 && item.width > 0 && item.description !== '' }]"></div>
|
|
</div>
|
|
<div class="col text-right no-padding">
|
|
<i @click="removePackage(index)" class="fa fa-times text-white bg-danger padding-5 pointer"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row align-items-center justify-content-center p-t-25 p-b-25">
|
|
<div class="col-auto hint-text p-r-10">
|
|
<svg v-if="item.type === 0" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="40" height="40" viewBox="0 0 192 192" style="fill: rgb(0, 0, 0);">
|
|
<g fill="none" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal;">
|
|
<path d="M0,192v-192h192v192z" fill="none"></path>
|
|
<g fill="#000">
|
|
<path d="M187.5,43.05l-50.7,-18c-1.2,-0.45 -2.4,-0.3 -3.45,0.15c-1.65,0.75 -89.85,31.95 -89.85,31.95c-2.25,0.75 -3.75,2.85 -3.75,5.25v21c0,1.95 1.2,3.6 3,4.2l11.7,4.2c3,1.05 6,-1.05 6,-4.2v-17.55c0,-2.4 1.5,-4.5 3.75,-5.25l79.65,-27.6l28.8,10.2l-78.15,27.45v0c-1.65,0.6 -3,2.25 -3,4.2v91.2l-81,-28.65v-91.2l87,-30.75c2.4,-0.9 3.6,-3.45 2.7,-5.7c-0.9,-2.4 -3.45,-3.6 -5.7,-2.7l-90,31.8c-1.8,0.6 -3,2.4 -3,4.2v97.5c0,1.95 1.2,3.6 3,4.2l90,31.8c0.45,0.15 1.05,0.3 1.5,0.3c0.3,0 0.45,0 0.75,0h0.15c0.15,0 0.3,-0.15 0.6,-0.15v0l90,-31.8c1.8,-0.6 3,-2.4 3,-4.2v-97.5v0c0,-2.1 -1.2,-3.75 -3,-4.35z"></path>
|
|
</g>
|
|
</g>
|
|
</svg>
|
|
<svg v-if="item.type === 1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="40" height="40" viewBox="0 0 192 192" style="fill: rgb(0, 0, 0);">
|
|
<g fill="none" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal;">
|
|
<path d="M0,192v-192h192v192z" fill="none"></path>
|
|
<g fill="#000">
|
|
<g id="surface1">
|
|
<path d="M95.07692,29.53846c-0.80769,0.11538 -1.58654,0.34615 -2.30769,0.69231l-87,43.61538c-0.72115,0.11538 -1.41346,0.34615 -2.07692,0.69231c-0.08654,0.08654 -0.14423,0.14423 -0.23077,0.23077c-0.14423,0.0577 -0.31731,0.14423 -0.46154,0.23077c0,0.08654 0,0.14423 0,0.23077c-0.14423,0.0577 -0.31731,0.14423 -0.46154,0.23077c-0.08654,0.08654 -0.14423,0.14423 -0.23077,0.23077c-0.08654,0.08654 -0.14423,0.14423 -0.23077,0.23077c-0.08654,0.14423 -0.17307,0.31731 -0.23077,0.46154c-0.08654,0.08654 -0.14423,0.14423 -0.23077,0.23077c-0.08654,0.08654 -0.14423,0.14423 -0.23077,0.23077c-0.08654,0.08654 -0.14423,0.14423 -0.23077,0.23077c-0.08654,0.14423 -0.17307,0.31731 -0.23077,0.46154c-0.08654,0.08654 -0.14423,0.14423 -0.23077,0.23077c0,0.14423 0,0.31731 0,0.46154c-0.08654,0.14423 -0.17308,0.31731 -0.23077,0.46154c-0.08654,0.08654 -0.14423,0.14423 -0.23077,0.23077c0,0.08654 0,0.14423 0,0.23077c-0.08654,0.14423 -0.17308,0.31731 -0.23077,0.46154c0,0.08654 0,0.14423 0,0.23077c0,0.14423 0,0.31731 0,0.46154c0,0.14423 0,0.31731 0,0.46154c0,0.08654 0,0.14423 0,0.23077c0,0.08654 0,0.14423 0,0.23077c-0.02885,0.375 -0.02885,0.77885 0,1.15385v33.46154c-0.02885,2.85577 1.58654,5.45192 4.15385,6.69231l22.15385,11.07692c1.99038,0.98077 4.32693,0.98077 6.34615,0.0577c2.01923,-0.95193 3.49038,-2.74039 4.03846,-4.90385l29.76923,15.92308v6c0.02884,2.71154 1.52884,5.19231 3.92308,6.46154l22.15385,11.76923c2.16346,1.15385 4.75961,1.15385 6.92308,0l88.61538,-45.69231c2.39423,-1.26923 3.89423,-3.75 3.92308,-6.46154v-33.92308c0.0577,-0.54808 0.0577,-1.06731 0,-1.61538c0,-0.63461 -0.08654,-1.24039 -0.23077,-1.84615c-0.11538,-0.40384 -0.28846,-0.77885 -0.46154,-1.15385c0,-0.08654 0,-0.14423 0,-0.23077c-0.08654,-0.08654 -0.14423,-0.14423 -0.23077,-0.23077c0,-0.08654 0,-0.14423 0,-0.23077c-0.05769,-0.14423 -0.14423,-0.31731 -0.23077,-0.46154c-0.20192,-0.31731 -0.43269,-0.63461 -0.69231,-0.92308c-0.08654,-0.08654 -0.14423,-0.14423 -0.23077,-0.23077c-0.14423,-0.08654 -0.31731,-0.17307 -0.46154,-0.23077c-0.40384,-0.43269 -0.86538,-0.83654 -1.38462,-1.15385c-0.08654,0 -0.14423,0 -0.23077,0l-0.46154,-0.23077c-0.23077,-0.08654 -0.46154,-0.17307 -0.69231,-0.23077l-24.69231,-12.46154c-1.35577,-1.84615 -3.49038,-2.9423 -5.76923,-3l-23.76923,-11.76923c-1.35577,-1.84615 -3.49038,-2.9423 -5.76923,-3l-27.46154,-13.61538c-1.29808,-0.63461 -2.74039,-0.86538 -4.15385,-0.69231zM96,45.23077l12.92308,6.46154l-72,36l-12.92308,-6.46154zM125.53846,60l12.92308,6.46154l-72,36l-12.92308,-6.46154zM155.07692,74.76923l12.92308,6.46154l-72,36l-12.92308,-6.46154zM14.76923,93.23077l17.30769,8.53846c0.80769,0.66346 1.75961,1.125 2.76923,1.38462l27,13.61538c0.375,0.17308 0.75,0.34615 1.15385,0.46154l0.23077,0.23077c0.14423,0.08654 0.31731,0.17308 0.46154,0.23077h0.23077c0.14423,0.08654 0.31731,0.17308 0.46154,0.23077l28.38462,14.30769c0.43269,0.20192 0.92308,0.34615 1.38462,0.46154c0.23077,0.08654 0.46154,0.17308 0.69231,0.23077l1.15385,0.69231v20.53846l-14.76923,-7.84615v-6c-0.02884,-2.71153 -1.52884,-5.19231 -3.92308,-6.46154l-44.30769,-23.76923c-2.07692,-1.15385 -4.58654,-1.24039 -6.72115,-0.23077c-2.13462,1.00962 -3.69231,2.97116 -4.125,5.30769l-7.38462,-3.69231z"></path>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</svg>
|
|
</div>
|
|
<div class="col-auto no-padding">
|
|
<i class="fa fa-times fs-14 lh-26"></i>
|
|
</div>
|
|
<div class="col text-left p-l-10">
|
|
<div class="row">
|
|
<div class="col no-padding"><input type="text" class="fs-22 bold b-l b-t b-b b-grey bg-transparent w-100 h-100 font-montserrat p-l-10" v-model="item.quantity" v-on:keypress="isNumber(true)"></div>
|
|
<div class="col-auto bg-master-lighter no-padding h-100">
|
|
<div @click="item.quantity++" class="row align-items-center justify-content-center h-50 pointer">
|
|
<div class="col p-l-5 p-r-5">
|
|
<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 pointer">
|
|
<div class="col p-l-5 p-r-5">
|
|
<i class="fa fa-angle-down text-success"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-auto p-t-5 p-b-5 bg-master-light">
|
|
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
|
|
width="15" height="15"
|
|
viewBox="0 0 192 192"
|
|
style=" fill:#000000;"><g fill="none" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal"><path d="M0,192v-192h192v192z" fill="none"></path><g fill="#000000"><path d="M6,1.5c-2.55,0 -4.5,1.95 -4.5,4.5v180c0,2.55 1.95,4.5 4.5,4.5h33c2.55,0 4.5,-1.95 4.5,-4.5v-180c0,-2.55 -1.95,-4.5 -4.5,-4.5zM75,1.5c-10.8,0 -19.5,8.7 -19.5,19.5c0,2.55 1.95,4.5 4.5,4.5c2.55,0 4.5,-1.95 4.5,-4.5c0,-5.85 4.65,-10.5 10.5,-10.5h76.5v10.5c0,10.8 8.7,19.5 19.5,19.5h14.39942h0.60058c1.8,0 3.45117,-1.20117 4.20117,-2.70117c0.3,-0.6 0.44825,-1.19883 0.44825,-1.79883v-0.60059c-0.3,-9 -3.89825,-17.39824 -10.19825,-23.69824c-6.6,-6.6 -15.15117,-10.20117 -24.45117,-10.20117zM10.5,10.5h24v171h-24v-21h4.5c2.55,0 4.5,-1.95 4.5,-4.5c0,-2.55 -1.95,-4.5 -4.5,-4.5h-4.5v-21h4.5c2.55,0 4.5,-1.95 4.5,-4.5c0,-2.55 -1.95,-4.5 -4.5,-4.5h-4.5v-21h4.5c2.55,0 4.5,-1.95 4.5,-4.5c0,-2.55 -1.95,-4.5 -4.5,-4.5h-4.5v-21h4.5c2.55,0 4.5,-1.95 4.5,-4.5c0,-2.55 -1.95,-4.5 -4.5,-4.5h-4.5v-21h4.5c2.55,0 4.5,-1.95 4.5,-4.5c0,-2.55 -1.95,-4.5 -4.5,-4.5h-4.5zM160.5,10.95117c5.1,0.9 9.75,3.29883 13.5,7.04883c3.75,3.75 6.14883,8.4 7.04883,13.5h-10.04883c-5.85,0 -10.5,-4.65 -10.5,-10.5zM59.71289,40.54395c-0.45469,0.02109 -0.9123,0.10488 -1.3623,0.25488c-1.65,0.6 -2.85059,2.40117 -2.85059,4.20117v141c0,2.55 1.95,4.5 4.5,4.5h126c1.8,0 3.44883,-1.05117 4.04883,-2.70117c0.75,-1.65 0.45,-3.44883 -0.75,-4.79883l-126,-141c-0.9,-1.0125 -2.22188,-1.51934 -3.58594,-1.45605zM186,51c-2.55,0 -4.5,1.95 -4.5,4.5v100.5c0,2.55 1.95,4.5 4.5,4.5c2.55,0 4.5,-1.95 4.5,-4.5v-100.5c0,-2.55 -1.95,-4.5 -4.5,-4.5zM64.5,56.85059l111.45117,124.64941h-111.45117zM89.71289,119.14453c-0.45469,0.02109 -0.9123,0.10488 -1.3623,0.25488c-1.65,0.6 -2.85059,2.40117 -2.85059,4.20117v32.39941c0,2.55 1.95,4.5 4.5,4.5h28.95117c1.8,0 3.44883,-1.05117 4.04883,-2.70117c0.75,-1.65 0.45,-3.44883 -0.75,-4.79883l-28.95117,-32.39941c-0.9,-1.0125 -2.22187,-1.51934 -3.58594,-1.45605zM94.5,135.45117l14.39941,16.04883h-14.39941z"></path></g></g></svg>
|
|
<div class="absolute padding-5 bg-danger btn-rounded" style=" right: 10px; top: 6px; ">
|
|
|
|
</div>
|
|
</div>
|
|
<div class="col no-padding">
|
|
<input type="text" class="fs-12 bold bg-master-lighter no-border w-100 font-montserrat p-l-15 p-r-15 p-t-5 p-b-5 thumbnail-input" placeholder="Description" v-model="item.description">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</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 m-b-20">
|
|
<div class="col no-padding">
|
|
<div class="row ">
|
|
<div @click="AddPackage(0)" class="col-3 hint-text m-r-15 pointer bg-master-lightest text-center no-padding add-package">
|
|
<div class="row align-items-center justify-content-center relative" style="opacity: 0.3;">
|
|
<div class="col padding-15" style=" height: 125px; "><img src="https://www.pngarts.com/files/1/Package-Box-PNG-Free-Download.png" style="width: 100%;"></div>
|
|
<div class="absolute w-100 h-100 text-center plus-thumbnail"><i class="fa fa-plus fs-50 m-auto"></i></div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col bg-master-lighter fs-11 p-t-5 p-b-5 hint-text"><small class="all-caps title">Carton</small></div>
|
|
</div>
|
|
</div>
|
|
<div @click="AddPackage(1)" class="col-3 hint-text m-r-15 pointer bg-master-lightest text-center no-padding add-package">
|
|
<div class="row align-items-center justify-content-center relative" style="opacity: 0.3;">
|
|
<div class="col padding-15" style=" height: 125px; "><img src="http://iconbug.com/data/6e/256/2f229a2663bc61dfe5aedeace2ca8837.png" style="width: 100%;"></div>
|
|
<div class="absolute w-100 h-100 text-center plus-thumbnail"><i class="fa fa-plus fs-50 m-auto"></i></div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col bg-master-lighter fs-11 p-t-5 p-b-5 hint-text"><small class="all-caps title">Pallet</small></div>
|
|
</div>
|
|
</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="updatePackingList" data-dismiss="modal">Confirm</button>
|
|
</div>
|
|
</div>
|
|
</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="form-group form-group-default input-group" style=" overflow: visible; ">
|
|
<div class="form-input-group">
|
|
<label>Action Date</label>
|
|
<date-picker-component name="complete_date" v-on:updateDate="setCompleteDate($event)"></date-picker-component>
|
|
</div>
|
|
</div>
|
|
<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>
|
|
<style>
|
|
.plus-thumbnail {
|
|
display: flex;
|
|
opacity: 0.4;
|
|
background-color: #fff;
|
|
}
|
|
.add-package:hover .plus-thumbnail {
|
|
background-color: #ececec;
|
|
color: #787878;
|
|
}
|
|
.add-package:hover .title {
|
|
color: #bababa;
|
|
}
|
|
.thumbnail-input::-webkit-input-placeholder { /* Edge */
|
|
color: #bababa;
|
|
font-weight: normal !important;
|
|
}
|
|
|
|
.thumbnail-input:-ms-input-placeholder { /* Internet Explorer 10-11 */
|
|
color: #bababa;
|
|
font-weight: normal !important;
|
|
}
|
|
|
|
.thumbnail-input::placeholder {
|
|
color: #bababa;
|
|
font-weight: normal !important;
|
|
}
|
|
.packages .package-thumbnail:last-child {
|
|
border-right : none !important;
|
|
}
|
|
.package-thumbnail .status-border {
|
|
border-style: solid;
|
|
border-width: 7px 8px 0 0;
|
|
border-color: transparent;
|
|
border-top-color: #ececec ;
|
|
}
|
|
.package-thumbnail .status-border.active {
|
|
border-top-color: #47b5ab;
|
|
opacity: 0.6;
|
|
}
|
|
</style>
|
|
<script>
|
|
import notificationConstant from '../../../../../js/notification';
|
|
export default {
|
|
props: {
|
|
'data': {
|
|
type: Number,
|
|
required: true
|
|
},
|
|
'attachments': {
|
|
type: Object
|
|
}
|
|
},
|
|
data(){
|
|
return {
|
|
packingList: {
|
|
reference_no: '',
|
|
confirmed: 0,
|
|
packages: []
|
|
},
|
|
actionData: {
|
|
complete_date: ''
|
|
}
|
|
}
|
|
},
|
|
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;
|
|
|
|
let notification = this.$refs.notification;
|
|
|
|
notification.title = notificationConstant.ORDER.PACKING_LIST_NOTIFICATION.TITLE;
|
|
notification.message = notificationConstant.ORDER.PACKING_LIST_NOTIFICATION.MESSAGE;
|
|
|
|
|
|
notification.execute();
|
|
|
|
Event.$emit('updateOrdersList');
|
|
|
|
});
|
|
},
|
|
completePacking() {
|
|
|
|
//turn on loading animation
|
|
this.isLoading = true;
|
|
fetch(route('api.order.step.update', {orderId: this.data}), {
|
|
method: 'post',
|
|
body: JSON.stringify(this.actionData),
|
|
headers: {
|
|
'content-type': 'application/json'
|
|
}
|
|
}).then(() => {
|
|
//turn off loading animation
|
|
this.isLoading = false;
|
|
|
|
let notification = this.$refs.notification;
|
|
|
|
notification.title = notificationConstant.ORDER.ORDER_PACKED.TITLE;
|
|
notification.message = notificationConstant.ORDER.ORDER_PACKED.MESSAGE;
|
|
|
|
notification.execute();
|
|
|
|
Event.$emit('updateOrdersList', true);
|
|
|
|
|
|
})
|
|
},
|
|
AddPackage(type){
|
|
this.packingList.packages.push({
|
|
description: '',
|
|
type: type,
|
|
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);
|
|
},
|
|
setCompleteDate(date){
|
|
this.actionData.complete_date = date;
|
|
}
|
|
}
|
|
}
|
|
</script> |