mirror of
https://gitlab.com/CIEFWorldwideSdnBhd/exchange-2.0.git
synced 2026-08-19 04:23:55 +00:00
update PurchaseOrderFormComponent change order item and add function edit order item
This commit is contained in:
edmondlang
@@ -29,6 +29,7 @@
|
||||
</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>
|
||||
<button class="btn btn-xs btn-outline-success b-rad-none invisible"><i class="fa fa-pencil"></i></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -61,38 +62,14 @@
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<button class="btn btn-xs btn-outline-success b-rad-none" @click="addProduct()"><i class="fa fa-check"></i></button>
|
||||
<button class="btn btn-xs btn-outline-success b-rad-none invisible"><i class="fa fa-pencil"></i></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row" v-for="(product, index) in products">
|
||||
<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">{{product.stockCode}}</div>
|
||||
</div>
|
||||
<div class="col-4 p-r-5 p-l-5">
|
||||
<div class="font-heading all-caps fs-10">{{product.description}}</div>
|
||||
</div>
|
||||
<div class="col text-center p-r-5 p-l-5">
|
||||
<div class="font-heading all-caps fs-10">{{product.quantity}}</div>
|
||||
</div>
|
||||
<div class="col text-center p-r-5 p-l-5">
|
||||
<div class="font-heading all-caps fs-10">{{product.unit_price}}</div>
|
||||
</div>
|
||||
<div class="col-1 text-center p-r-5 p-l-5">
|
||||
<div class="font-heading all-caps fs-10">{{data.fixed_currency.short_code}}</div>
|
||||
</div>
|
||||
<div class="col-1 text-right p-r-5 p-l-5">
|
||||
<div class="font-heading all-caps fs-10">{{(Math.round((product.total + Number.EPSILON) * 100) / 100).toFixed(2) }}</div>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<button class="btn btn-xs btn-outline-danger b-rad-none" v-if="!submitted" @click="removeProduct(index)"><i class="fa fa-times"></i></button>
|
||||
</div>
|
||||
</div>
|
||||
<purchase-order-item-form-component :data="product" :index="index" :currency="data.fixed_currency.short_code" :section="section" @change="updateProduct($event, index)" v-on:remove="removeProduct(index)"></purchase-order-item-form-component>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -130,7 +107,7 @@
|
||||
<div class="col">
|
||||
<div class="row m-b-10">
|
||||
<div class="col">
|
||||
<button class="btn btn-xs all-caps b-rad-none btn-primary btn-block" @click="submitForm()">{{(Math.round((poTotal + Number.EPSILON) * 1000) / 1000).toFixed(3) !== (Math.round((data.amount + Number.EPSILON) * 1000) / 1000).toFixed(3) ? 'Save Purchase Order' : 'Save & Confirm'}}</button>
|
||||
<button class="btn btn-xs all-caps b-rad-none btn-primary btn-block" @click="submitForm()">{{(Math.round((poTotal + Number.EPSILON) * 1000) / 1000).toFixed(3) !== (Math.round((data.amount + Number.EPSILON) * 1000) / 1000).toFixed(3) ? 'Save Purchase Order' : 'Save & Confirm'}}</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row" v-if="(Math.round((poTotal + Number.EPSILON) * 1000) / 1000).toFixed(3) !== data.amount">
|
||||
@@ -165,16 +142,16 @@
|
||||
import formHandler from '../../../general/mixins/formHandler';
|
||||
export default {
|
||||
data(){
|
||||
return {
|
||||
submitted: false,
|
||||
product: {
|
||||
stockCode: '',
|
||||
description: '',
|
||||
quantity: 1,
|
||||
unit_price: 0,
|
||||
},
|
||||
products: []
|
||||
}
|
||||
return {
|
||||
submitted: false,
|
||||
product: {
|
||||
stockCode: '',
|
||||
description: '',
|
||||
quantity: 1,
|
||||
unit_price: 0,
|
||||
},
|
||||
products: [],
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.products = this.data.purchase_order ? this.data.purchase_order.details : [];
|
||||
@@ -231,7 +208,16 @@
|
||||
quantity: 1,
|
||||
unit_price: 0,
|
||||
};
|
||||
|
||||
},
|
||||
updateProduct(product, index){
|
||||
console.log(product);
|
||||
this.products[index] = {
|
||||
stockCode: product.stockCode,
|
||||
description: product.description,
|
||||
quantity: product.quantity,
|
||||
unit_price: product.unit_price,
|
||||
total: product.quantity * parseFloat((product.unit_price).toString().replace(',', ''))
|
||||
};
|
||||
},
|
||||
removeProduct(index){
|
||||
this.products.splice(index, 1);
|
||||
|
||||
@@ -0,0 +1,92 @@
|
||||
<template>
|
||||
<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 v-if="!isEdit" class="font-heading all-caps fs-10">{{product.stockCode}}</div>
|
||||
<input v-if="isEdit" type="text" class="form-control fs-10 b-rad-none" placeholder="Stock Code" v-model="product.stockCode" />
|
||||
</div>
|
||||
<div class="col-4 p-r-5 p-l-5">
|
||||
<div v-if="!isEdit" class="font-heading all-caps fs-10">{{product.description}}</div>
|
||||
<textarea v-if="isEdit" class="form-control fs-10 b-rad-none" placeholder="Description" rows="1" @keyup="onlyEnglish($event)" v-model="product.description"></textarea>
|
||||
</div>
|
||||
<div class="col text-center p-r-5 p-l-5">
|
||||
<div v-if="!isEdit" class="font-heading all-caps fs-10">{{product.quantity}}</div>
|
||||
<input v-if="isEdit" type="text" class="form-control fs-10 b-rad-none text-center" placeholder="Quantity" v-model.lazy="product.quantity" v-mask="'#########'"/>
|
||||
</div>
|
||||
<div class="col text-center p-r-5 p-l-5">
|
||||
<div v-if="!isEdit" class="font-heading all-caps fs-10">{{product.unit_price}}</div>
|
||||
<input v-if="isEdit" type="text" class="form-control fs-10 b-rad-none text-center" placeholder="Unit Price" v-model.lazy="product.unit_price" v-money="productPrice" />
|
||||
</div>
|
||||
<div class="col-1 text-center p-r-5 p-l-5">
|
||||
<div class="font-heading all-caps fs-10">{{currency}}</div>
|
||||
</div>
|
||||
<div class="col-1 text-right p-r-5 p-l-5">
|
||||
<div class="font-heading all-caps fs-10">{{(Math.round((productTotal + Number.EPSILON) * 100) / 100).toFixed(2) }}</div>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<button class="btn btn-xs btn-outline-danger b-rad-none" @click="$emit('remove')"><i class="fa fa-times"></i></button>
|
||||
<button v-if="!isEdit" class="btn btn-xs btn-outline-warning b-rad-none" @click="isEdit = !isEdit"><i class="fa fa-pencil"></i></button>
|
||||
<button v-if="isEdit" class="btn btn-xs btn-outline-success b-rad-none" @click="updateProduct()"><i class="fa fa-check"></i></button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import formHandler from '../../../general/mixins/formHandler';
|
||||
export default {
|
||||
props: {
|
||||
currency:{
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
index:{
|
||||
type: Number,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
data(){
|
||||
return {
|
||||
isEdit: false,
|
||||
product: {
|
||||
stockCode: '',
|
||||
description: '',
|
||||
unit_price: 0,
|
||||
},
|
||||
products: []
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.product = this.data;
|
||||
},
|
||||
computed: {
|
||||
productTotal(){
|
||||
return this.product.quantity * parseFloat((this.product.unit_price).toString().replace(',', ''));
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
updateProduct(){
|
||||
this.isEdit = !this.isEdit;
|
||||
|
||||
this.$emit('change', {
|
||||
stockCode: this.product.stockCode,
|
||||
description: this.product.description,
|
||||
quantity: this.product.quantity,
|
||||
unit_price: this.product.unit_price,
|
||||
total: this.productTotal
|
||||
}, this.index);
|
||||
},
|
||||
onlyEnglish(event){
|
||||
let value = event.target.value,
|
||||
regex = /^[^~`!@#$%^&*()_+=[\]\{}|;':",.\/<>?a-zA-Z0-9-]+$/;
|
||||
|
||||
event.preventDefault();
|
||||
|
||||
if(regex.test(value)){
|
||||
this.product.description = value.replace(regex, '');
|
||||
}
|
||||
},
|
||||
},
|
||||
mixins: [formHandler]
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue
Block a user