release create warehouse arrival parcel module

This commit is contained in:
omair saleh
2022-03-24 13:11:22 +08:00
parent db03836ef5
commit 23f50faa84
3 changed files with 149 additions and 133 deletions
@@ -7,22 +7,28 @@
</div>
</div>
<error-message-component class="m-b-20" :error="error"></error-message-component>
<div class="row">
<div class="col">
<validation-wrapper-component class="m-b-15" :validator="$v.parameters.receive_date">
<div class="row m-b-25">
<div class="col p-r-5">
<validation-wrapper-component :validator="$v.parameters.receive_date">
<label class="text-primary">Receive Date</label>
<date-picker-component :parameters="parameters" :value="'receive_date'"></date-picker-component>
<date-picker-component v-model="parameters.receive_date"></date-picker-component>
</validation-wrapper-component>
<validation-wrapper-component class="m-b-15" :validator="$v.parameters.tracking">
</div>
<div class="col p-l-5">
<validation-wrapper-component :validator="$v.parameters.tracking">
<label class="text-primary">Tracking</label>
<input type="text" class="form-control fs-12" v-model.trim="parameters.tracking">
</validation-wrapper-component>
</div>
</div>
<div class="row">
<div class="col">
<package-form-component :section="section" :packages="parameters.packages"></package-form-component>
<div class="row m-t-15 align-items-center justify-content-center">
<div class="col">
<div class="btn btn-block btn-lg btn-primary b-rad-none no-border" @click="submitForm">Submit</div>
</div>
</div>
</div>
</div>
<div class="row m-t-15 align-items-center justify-content-center" v-if="parameters.packages.length > 0">
<div class="col">
<div class="btn btn-block btn-lg btn-primary b-rad-none no-border" @click="submitForm">Submit</div>
</div>
</div>
</div>
@@ -1,121 +1,101 @@
<template>
<div class="row">
<div class="col">
<div class="row no-margin">
<div class="col p-t-25 p-t-25">
<div class="row">
<div class="col p-b-10 b-b b-grey">
<div class="row align-items-center">
<div class="col-auto p-r-0" style="min-width: 40px;">
<div class="font-heading all-caps fs-10"></div>
</div>
<div class="col p-r-5">
<div class="font-heading all-caps fs-10 muted">Type</div>
</div>
<div class="col-4 p-r-5 p-l-5">
<div class="font-heading all-caps fs-10 muted">Description</div>
</div>
<div class="col text-center p-r-5 p-l-5">
<div class="font-heading all-caps fs-10 muted">Width</div>
</div>
<div class="col text-center p-r-5 p-l-5">
<div class="font-heading all-caps fs-10 muted">Height</div>
</div>
<div class="col-1 text-center p-r-5 p-l-5">
<div class="font-heading all-caps fs-10 muted">Length</div>
</div>
<div class="col-1 text-right p-r-5 p-l-5">
<div class="font-heading all-caps fs-10 muted">Weight</div>
</div>
<div class="col-1 text-right p-r-5 p-l-5">
<div class="font-heading all-caps fs-10 muted">Quantity</div>
</div>
<div class="col-1 text-right p-r-5 p-l-5">
<div class="font-heading all-caps fs-10 muted">Reference</div>
</div>
<div class="col-auto text-center">
<button class="btn btn-xs btn-outline-success b-rad-none invisible"><i class="fa fa-check"></i></button>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col">
<div class="row m-b-20">
<div class="col">
<div class="row" v-if="!submitted">
<div class="col p-b-5 p-t-5 b-b b-grey">
<div class="row align-items-center">
<div class="col-auto p-r-0" style="min-width: 40px;">
<div class="font-heading all-caps fs-10"></div>
</div>
<div class="col p-b-10 p-t-10 b-b b-grey">
<div class="row align-items-center m-b-15">
<div class="col p-r-5">
<select-component :options="[{'id': 0, 'text': 'Carton'}, {'id': 1, 'text': 'Pallet'}]" v-model="product.type"></select-component>
<validation-wrapper-component :validator="$v.product.description">
<label class="text-primary">Description</label>
<input type="text" class="form-control fs-12" v-model="product.description">
</validation-wrapper-component>
</div>
<div class="col-4 p-r-5 p-l-5">
<textarea class="form-control fs-10 b-rad-none" placeholder="Description" rows="1" @keyup="onlyEnglish($event)" v-model="product.description"></textarea>
<div class="col p-l-5">
<validation-wrapper-component :validator="$v.product.quantity">
<label class="text-primary">Quantity</label>
<input type="text" class="form-control fs-12" v-model="product.quantity">
</validation-wrapper-component>
</div>
<div class="col text-center p-r-5 p-l-5">
<input type="text" class="form-control fs-10 b-rad-none text-center" placeholder="Width" v-model.lazy="product.width"/>
</div>
<div class="row m-b-15">
<div class="col p-r-5">
<validation-wrapper-component :validator="$v.product.width">
<label class="text-primary">Width</label>
<input type="text" class="form-control fs-12" v-model="product.width">
</validation-wrapper-component>
</div>
<div class="col text-center p-r-5 p-l-5">
<input type="text" class="form-control fs-10 b-rad-none text-center" placeholder="Height" v-model.lazy="product.height"/>
<div class="col p-r-5 p-l-5">
<validation-wrapper-component :validator="$v.product.height">
<label class="text-primary">Height</label>
<input type="text" class="form-control fs-12" v-model="product.height">
</validation-wrapper-component>
</div>
<div class="col text-center p-r-5 p-l-5">
<input type="text" class="form-control fs-10 b-rad-none text-center" placeholder="Length" v-model.lazy="product.length"/>
<div class="col p-l-5">
<validation-wrapper-component :validator="$v.product.length">
<label class="text-primary">Length</label>
<input type="text" class="form-control fs-12" v-model="product.length">
</validation-wrapper-component>
</div>
<div class="col text-center p-r-5 p-l-5">
<input type="text" class="form-control fs-10 b-rad-none text-center" placeholder="Weight" v-model.lazy="product.weight"/>
</div>
<div class="col text-center p-r-5 p-l-5">
<input type="text" class="form-control fs-10 b-rad-none text-center" placeholder="Quantity" v-model.lazy="product.quantity"/>
</div>
<div class="col text-center p-r-5 p-l-5">
<input type="text" class="form-control fs-10 b-rad-none text-center" placeholder="Reference" v-model.lazy="product.reference"/>
</div>
<div class="col-auto">
<button class="btn btn-xs btn-outline-success b-rad-none" @click="addPackage()"><i class="fa fa-check"></i></button>
</div>
<div class="row">
<div class="col">
<button class="btn btn-success btn-block b-rad-none" @click="addPackage()">Add Package</button>
</div>
</div>
</div>
</div>
<div class="row" v-for="(item, index) in packages">
<div class="col p-b-10 p-t-10 b-b b-grey">
<div class="row align-items-center">
<div class="col-auto p-r-0" style="min-width: 40px;">
<div class="font-heading all-caps fs-10">{{index + 1}}</div>
</div>
<div class="col p-r-5">
<div class="font-heading all-caps fs-10">{{item.type}}</div>
</div>
<div class="col-4 p-r-5 p-l-5">
<div class="font-heading all-caps fs-10">{{item.description}}</div>
</div>
<div class="col text-center p-r-5 p-l-5">
<div class="font-heading all-caps fs-10">{{item.width}}</div>
</div>
<div class="col text-center p-r-5 p-l-5">
<div class="font-heading all-caps fs-10">{{item.height}}</div>
</div>
<div class="col-1 text-center p-r-5 p-l-5">
<div class="font-heading all-caps fs-10">{{item.length}}</div>
</div>
<div class="col-1 text-center p-r-5 p-l-5">
<div class="font-heading all-caps fs-10">{{item.weight}}</div>
</div>
<div class="col-1 text-right p-r-5 p-l-5">
<div class="font-heading all-caps fs-10">{{item.quantity}}</div>
</div>
<div class="col-1 text-right p-r-5 p-l-5">
<div class="font-heading all-caps fs-10">{{item.reference}}</div>
</div>
<div class="col-auto">
<button class="btn btn-xs btn-outline-danger b-rad-none" v-if="!submitted" @click="removePackage(index)"><i class="fa fa-times"></i></button>
<div class="row">
<div class="col">
<div class="row align-items-center m-b-15">
<div class="col-auto">
<div @click="removePackage(index)" class="pointer">
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
width="25" height="25"
viewBox="0 0 172 172"
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,172v-172h172v172z" fill="none"></path><g fill="#e74c3c"><path d="M18.87987,153.12013c2.23887,2.23819 5.86807,2.23819 8.10693,0l59.0132,-59.0132l59.0132,59.0132c2.24964,2.17277 5.82555,2.1417 8.03709,-0.06984c2.21154,-2.21154 2.24261,-5.78745 0.06984,-8.03709l-59.0132,-59.0132l59.0132,-59.0132c1.49042,-1.43949 2.08815,-3.57117 1.56346,-5.57571c-0.52469,-2.00454 -2.09015,-3.57 -4.09469,-4.09469c-2.00454,-0.52469 -4.13622,0.07305 -5.57571,1.56346l-59.0132,59.0132l-59.0132,-59.0132c-2.24964,-2.17277 -5.82555,-2.1417 -8.03709,0.06984c-2.21154,2.21154 -2.24261,5.78745 -0.06984,8.03709l59.0132,59.0132l-59.0132,59.0132c-2.23819,2.23887 -2.23819,5.86807 0,8.10693z"></path></g></g></svg>
</div>
</div>
<div class="col">
<div class="row">
<div class="col-3">
<p class="m-b-0 small muted">Description</p>
<p class="m-b-0 bold">{{item.description}}</p>
</div>
<div class="col-auto">
<p class="m-b-0 small muted">Quantity</p>
<p class="m-b-0 bold">{{item.quantity}}</p>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-12">
<div class="row align-items-center">
<div class="col-auto">
<p class="m-b-0 small muted">Width</p>
<p class="m-b-0 bold">{{item.width}}</p>
</div>
<div class="col-auto text-center">
<p class="m-b-0 small muted">Height</p>
<p class="m-b-0 bold">{{item.height}}</p>
</div>
<div class="col-auto text-center">
<p class="m-b-0 small muted">Length</p>
<p class="m-b-0 bold">{{item.length}}</p>
</div>
<div class="col text-right">
<p class="m-b-0 small muted">Total CBM</p>
<p class="m-b-0 bold text-success">{{(Math.round((((item.width / 100) * (item.height / 100) * (item.length / 100) * item.quantity)) * 1000) / 1000).toFixed(3)}}</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
@@ -129,6 +109,7 @@
</div>
</template>
<script>
import { required, numeric } from "vuelidate/lib/validators";
import formHandler from '../../../general/mixins/formHandler';
export default {
props: {
@@ -141,7 +122,7 @@
return {
submitted: false,
product: {
type: '',
type: 0,
description: '',
width: 0,
height: 0,
@@ -152,15 +133,40 @@
},
}
},
methods: {
onlyEnglish(event){
let value = event.target.value,
regex = /^[^~`!@#$%^&*()_+=[\]\{}|;':",.\/<>?a-zA-Z0-9-]+$/;
event.preventDefault();
if(regex.test(value)){
this.product.description = value.replace(regex, '');
validations: {
product: {
type: {
required
},
description: {
required
},
width: {
required,
numeric
},
height: {
required,
numeric
},
length: {
required,
numeric
},
weight: {
required,
numeric
},
quantity: {
required,
numeric
},
reference: {
required
}
},
}
},
methods: {
addPackage(){
this.packages.push({
type: this.product.type,
@@ -173,17 +179,19 @@
reference: this.product.reference,
});
this.product = {
type: '',
description: '',
width: 0,
height: 0,
length: 0,
weight: 0,
quantity: 1,
reference: 0,
};
this.resetProduct();
},
resetProduct(){
this.product = {
type: '',
description: '',
width: 0,
height: 0,
length: 0,
weight: 0,
quantity: 1,
reference: 0,
};
},
removePackage(index){
this.packages.splice(index, 1);
@@ -273,9 +273,11 @@
viewBox="0 0 172 172"
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,172v-172h172v172z" fill="none"></path><g fill="#000000"><path d="M8.6,23.65c-2.37676,0 -4.3,1.92324 -4.3,4.3c0,2.37676 1.92324,4.3 4.3,4.3c2.37676,0 4.3,-1.92324 4.3,-4.3c4.77031,0 8.6,3.82969 8.6,8.6v85.10137c0,8.28926 6.76074,15.05 15.05,15.05h0.50391c0.99941,2.98145 3.72051,5.19863 7.02109,5.19863h4.43438c-0.74746,1.26816 -1.20938,2.72949 -1.20938,4.3c0,4.72832 3.87168,8.6 8.6,8.6c4.72832,0 8.6,-3.87168 8.6,-8.6c0,-1.57051 -0.46191,-3.03184 -1.20938,-4.3h66.91875c-0.74746,1.26816 -1.20937,2.72949 -1.20937,4.3c0,4.72832 3.87168,8.6 8.6,8.6c4.72832,0 8.6,-3.87168 8.6,-8.6c0,-1.57051 -0.46191,-3.03184 -1.20937,-4.3h4.43437c3.36777,0 6.13926,-2.30117 7.08828,-5.375h0.43672v-2.15c0,-3.90527 -3.04863,-7.12188 -6.87832,-7.45781c0.26035,-0.69707 0.42832,-1.43613 0.42832,-2.21719v-40.85c0,-1.67129 -0.73066,-3.14941 -1.78887,-4.3c1.0582,-1.15059 1.78887,-2.62871 1.78887,-4.3v-43c0,-3.53574 -2.91426,-6.45 -6.45,-6.45h-94.6c-3.53574,0 -6.45,2.91426 -6.45,6.45v43c0,1.67129 0.73066,3.14941 1.78887,4.3c-1.0582,1.15059 -1.78887,2.62871 -1.78887,4.3v40.85c0,0.78105 0.16797,1.52012 0.42832,2.21719c-3.15781,0.27715 -5.75293,2.51953 -6.57598,5.48418h-0.30234c-5.96289,0 -10.75,-4.78711 -10.75,-10.75v-85.10137c0,-7.09668 -5.80332,-12.9 -12.9,-12.9zM49.45,30.1h94.6c1.21777,0 2.15,0.93223 2.15,2.15v43c0,1.21777 -0.93223,2.15 -2.15,2.15c-1.17578,0.0168 -2.11641,0.97422 -2.11641,2.15c0,1.17578 0.94062,2.1332 2.11641,2.15c1.21777,0 2.15,0.93223 2.15,2.15v40.85c0,1.21777 -0.93223,2.15 -2.15,2.15h-94.6c-1.21777,0 -2.15,-0.93223 -2.15,-2.15v-40.85c0,-1.21777 0.93223,-2.15 2.15,-2.15c1.17578,-0.0168 2.11641,-0.97422 2.11641,-2.15c0,-1.17578 -0.94063,-2.1332 -2.11641,-2.15c-1.21777,0 -2.15,-0.93223 -2.15,-2.15v-43c0,-1.21777 0.93223,-2.15 2.15,-2.15zM88.15,38.7c-0.77266,-0.0084 -1.49492,0.39473 -1.88965,1.0666c-0.38633,0.67188 -0.38633,1.49492 0,2.1668c0.39473,0.67188 1.11699,1.075 1.88965,1.0666h17.2c0.77266,0.0084 1.49492,-0.39473 1.88965,-1.0666c0.38633,-0.67187 0.38633,-1.49492 0,-2.1668c-0.39472,-0.67187 -1.11699,-1.075 -1.88965,-1.0666zM58.05,77.4c-1.18418,0 -2.15,0.96582 -2.15,2.15c0,1.18418 0.96582,2.15 2.15,2.15c1.18418,0 2.15,-0.96582 2.15,-2.15c0,-1.18418 -0.96582,-2.15 -2.15,-2.15zM66.65,77.4c-1.18418,0 -2.15,0.96582 -2.15,2.15c0,1.18418 0.96582,2.15 2.15,2.15c1.18418,0 2.15,-0.96582 2.15,-2.15c0,-1.18418 -0.96582,-2.15 -2.15,-2.15zM75.25,77.4c-1.18418,0 -2.15,0.96582 -2.15,2.15c0,1.18418 0.96582,2.15 2.15,2.15c1.18418,0 2.15,-0.96582 2.15,-2.15c0,-1.18418 -0.96582,-2.15 -2.15,-2.15zM83.85,77.4c-1.18418,0 -2.15,0.96582 -2.15,2.15c0,1.18418 0.96582,2.15 2.15,2.15c1.18418,0 2.15,-0.96582 2.15,-2.15c0,-1.18418 -0.96582,-2.15 -2.15,-2.15zM92.45,77.4c-1.18418,0 -2.15,0.96582 -2.15,2.15c0,1.18418 0.96582,2.15 2.15,2.15c1.18418,0 2.15,-0.96582 2.15,-2.15c0,-1.18418 -0.96582,-2.15 -2.15,-2.15zM101.05,77.4c-1.18418,0 -2.15,0.96582 -2.15,2.15c0,1.18418 0.96582,2.15 2.15,2.15c1.18418,0 2.15,-0.96582 2.15,-2.15c0,-1.18418 -0.96582,-2.15 -2.15,-2.15zM109.65,77.4c-1.18418,0 -2.15,0.96582 -2.15,2.15c0,1.18418 0.96582,2.15 2.15,2.15c1.18418,0 2.15,-0.96582 2.15,-2.15c0,-1.18418 -0.96582,-2.15 -2.15,-2.15zM118.25,77.4c-1.18418,0 -2.15,0.96582 -2.15,2.15c0,1.18418 0.96582,2.15 2.15,2.15c1.18418,0 2.15,-0.96582 2.15,-2.15c0,-1.18418 -0.96582,-2.15 -2.15,-2.15zM126.85,77.4c-1.18418,0 -2.15,0.96582 -2.15,2.15c0,1.18418 0.96582,2.15 2.15,2.15c1.18418,0 2.15,-0.96582 2.15,-2.15c0,-1.18418 -0.96582,-2.15 -2.15,-2.15zM135.45,77.4c-1.18418,0 -2.15,0.96582 -2.15,2.15c0,1.18418 0.96582,2.15 2.15,2.15c1.18418,0 2.15,-0.96582 2.15,-2.15c0,-1.18418 -0.96582,-2.15 -2.15,-2.15zM88.15,90.3c-0.77266,-0.0084 -1.49492,0.39473 -1.88965,1.0666c-0.38633,0.67188 -0.38633,1.49492 0,2.1668c0.39473,0.67188 1.11699,1.075 1.88965,1.0666h17.2c0.77266,0.0084 1.49492,-0.39473 1.88965,-1.0666c0.38633,-0.67187 0.38633,-1.49492 0,-2.1668c-0.39472,-0.67187 -1.11699,-1.075 -1.88965,-1.0666zM44.075,131.15h105.35c1.80566,0 3.225,1.41934 3.225,3.225c0,1.80566 -1.41934,3.225 -3.225,3.225h-105.35c-1.80566,0 -3.225,-1.41934 -3.225,-3.225c0,-1.80566 1.41934,-3.225 3.225,-3.225zM55.9,141.9c2.40195,0 4.3,1.89805 4.3,4.3c0,2.40195 -1.89805,4.3 -4.3,4.3c-2.40195,0 -4.3,-1.89805 -4.3,-4.3c0,-2.40195 1.89805,-4.3 4.3,-4.3zM137.6,141.9c2.40195,0 4.3,1.89805 4.3,4.3c0,2.40195 -1.89805,4.3 -4.3,4.3c-2.40195,0 -4.3,-1.89805 -4.3,-4.3c0,-2.40195 1.89805,-4.3 4.3,-4.3z"></path></g></g></svg>
</div>
<div class="col-auto" v-if="false">
<div data-type="createWarehousePackageList" class="btn btn-sm btn-block bg-white text-info b-rad-sm pointer requestModal">Add</div>
<modal-component class="animate__animated animate__fast animate__fadeIn" styleType="stick-up" type="createWarehousePackageList" size="large">
</div>
<div class="row" v-if="$store.getters.isSuperAdmin()">
<div class="col">
<div data-type="createWarehousePackageList" class="text-complete pointer requestModal fs-11 all-caps text-underline">Add Arrived Parcel</div>
<modal-component class="animate__animated animate__fast animate__fadeIn" styleType="stick-up" type="createWarehousePackageList" >
<create-warehouse-package-list-form-component :id="order.id" :section="section"></create-warehouse-package-list-form-component>
</modal-component>
</div>