run the following command
npm install vuelidate --save
Create a block SalesInfoAddFormTest.vue in the location: resources\js\components\block\sales_info
<template> <div> <div class="infoHeader"> <b-row> <b-col cols="2" md="2"></b-col> <b-col cols="10" md="8"><h4>Sales Information[add test]</h4> <b-col cols="2" md="2"> <div class="rightAlign"> <router-link :to="{name:'ad_sale_list'}"><b-button variant="outline-info" class="btn_custom"><i class="fas fa-list"></i> List</b-button></router-link> </div> </b-col> </b-row> </div> </b-jumbotron> <b-card bg-variant="light"> <b-row> <b-col cols="12" md="12" class="formStyle"> <b-form @submit.prevent="onSubmit" autocomplete="off"> <b-row> <b-col cols="12" md="3"> <b-form-group id="input-group-2" label="Table No" label-for="input-2" description="" > <b-form-input id="short_name" v-model.trim="form.table_no" type="text" placeholder="enter table no" @blur="$v.form.table_no.$touch()" :state="$v.form.table_no.$dirty ? !$v.form.table_no.$anyError : null" > </b-form-input> <!--span class="error" v-if="$v.form.table_no.$dirty && !$v.form.table_no.required">Table No. is required </b-form-group> <b-form-group id="input-group-2" label="Sales Date" label-for="input-2" description="" ><!--span class="error" v-if="$v.form.sales_date.$dirty && !$v.form.sales_date.required">Sales date is required </b-form-group> <b-form-group id="input-group-2" label="Memo No" label-for="input-2" description="" > <b-form-input id="short_name" v-model.trim="form.memo_no" type="text" placeholder="enter memo no" @blur="$v.form.memo_no.$touch()" :state="$v.form.memo_no.$dirty ? !$v.form.memo_no.$anyError : null" > </b-form-input> <!--span class="error" v-if="$v.form.memo_no.$dirty && !$v.form.memo_no.required">Memo No. is required </b-form-group> </b-col> <b-col cols="12" md="3"> <b-form-group id="input-group-3" label="Customer" label-for="input-3"> <b-form-select id="" v-model.trim="form.customer_id" :options="defaultOption.concat(customerListObject)" @blur="$v.form.role_id.$touch()" :state="$v.form.customer_id.$dirty ? !$v.form.customer_id.$anyError : null" ></b-form-select> <!--span class="error" v-if="$v.form.customer_id.$dirty && !$v.form.customer_id.required">Customer is required </b-form-group> <b-form-group id="input-group-2" label="Waiter Name" label-for="input-2" description="" > <b-form-input id="short_name" v-model.trim="form.waiter_name" type="text" placeholder="enter waiter name" @blur="$v.form.waiter_name.$touch()" :state="$v.form.waiter_name.$dirty ? !$v.form.waiter_name.$anyError : null" > </b-form-input> </b-form-group> <b-form-group id="input-group-2" label="Remarks" label-for="input-2" description="" > <b-form-input id="textarea" v-model.trim="form.remarks" placeholder="" rows="3" max-rows="6" @blur="$v.form.remarks.$touch()" :state="$v.form.remarks.$dirty ? !$v.form.remarks.$anyError : null" ></b-form-input> </b-form-group> </b-col> <b-col cols="12" md="3"> <b-form-group id="input-group-2" label="Gross Sales Amount" label-for="input-2" description="" > <b-form-input id="short_name" v-model.trim="form.gross_sale_amount" type="text" placeholder="" @blur="$v.form.gross_sale_amount.$touch()" :state="$v.form.gross_sale_amount.$dirty ? !$v.form.gross_sale_amount.$anyError : null" readonly > </b-form-input> <b-row> <b-col cols="12" md="6"> <b-form-group id="input-group-2" label="Total Discount" label-for="input-2" description="" > <b-form-input id="short_name" v-model.trim="form.total_discount" type="text" placeholder="" @blur="$v.form.total_discount.$touch()" :state="$v.form.total_discount.$dirty ? !$v.form.total_discount.$anyError : null" > </b-form-input> </b-form-group> </b-col> <b-col cols="12" md="6"> <b-form-group id="input-group-2" label="Add/Less" label-for="input-2" description="" > <b-form-input id="short_name" v-model.trim="form.add_less" type="text" placeholder="" @blur="$v.form.add_less.$touch()" :state="$v.form.add_less.$dirty ? !$v.form.add_less.$anyError : null" > </b-form-input> </b-form-group> </b-col> </b-row> </b-form-group> <b-form-group id="input-group-2" label="VAT(%)" label-for="input-2" description="" > <b-row> <b-col cols="12" md="6"> <b-form-input id="short_name" v-model.trim="form.vat_percent" type="text" placeholder="7.5%" @blur="$v.form.vat_percent.$touch()" :state="$v.form.vat_percent.$dirty ? !$v.form.vat_percent.$anyError : null" > </b-form-input> </b-col> <b-col cols="12" md="6"> <b-form-input id="short_name" v-model.trim="form.vat" type="text" placeholder="" @blur="$v.form.vat.$touch()" :state="$v.form.vat.$dirty ? !$v.form.vat.$anyError : null" readonly > </b-form-input> </b-col> </b-row> </b-form-group> </b-col> <b-col cols="12" md="3"> <b-form-group id="input-group-2" label="Service Charge(%)" label-for="input-2" description="" > <b-row> <b-col cols="12" md="6"> </b-form-input> </b-col> <b-col cols="12" md="6"> <b-form-input id="short_name" v-model.trim="form.service_charge" type="text" placeholder="" @blur="$v.form.service_charge.$touch()" :state="$v.form.service_charge.$dirty ? !$v.form.service_charge.$anyError : null" > </b-form-input> </b-col> </b-row> </b-form-group> <b-form-group id="input-group-2" label="Delivery Charge(%)" label-for="input-2" description="" > <b-row> <b-col cols="12" md="6"> <b-form-input id="short_name" v-model.trim="form.delivery_charge_percent" type="text" placeholder="" @blur="$v.form.delivery_charge_percent.$touch()" :state="$v.form.delivery_charge_percent.$dirty ? !$v.form.delivery_charge_percent.$anyError : null" > </b-form-input> </b-col> <b-col cols="12" md="6"> <b-form-input id="short_name" v-model.trim="form.delivery_charge" type="text" placeholder="" @blur="$v.form.delivery_charge.$touch()" :state="$v.form.delivery_charge.$dirty ? !$v.form.delivery_charge.$anyError : null" > </b-form-input> </b-col> </b-row> </b-form-group> <b-form-group id="input-group-2" label="Total Sales Amount" label-for="input-2" description="" > <b-form-input id="short_name" v-model.trim="form.total_sales_amount" type="text" placeholder="" @blur="$v.form.total_sales_amount.$touch()" :state="$v.form.total_sales_amount.$dirty ? !$v.form.total_sales_amount.$anyError : null" readonly > </b-form-input> </b-form-group> </b-col> </b-row> </b-col> <b-col cols="12" md="12" class="formStyle"> <div class="actionBtn buttonStyle">PAID</div> <div class="actionBtn buttonStyle">Order Place</div> <div class="actionBtn"> <b-form-group label="" v-slot="{ ariaDescribedby }"> <b-form-radio-group id="radio-group-1" v-model="form.sales_type" :options="form.sales_type_option" :aria-describedby="ariaDescribedby" name="radio-options" ></b-form-radio-group> </b-form-group> </div> <div class="actionBtn"> <div class="lavel">No of Guest</div> <div class="ukinput"> <b-form-input v-model="form.no_of_guest"> </b-form-input> </div> </div> <div class="actionBtn"> <div class="lavel">Discount(%)</div> <div class="ukinput"> <b-form-input v-model="form.total_discount_percent"> </b-form-input> </div> </div> </b-col> <!-- detail form ---> <!-- start details --> <b-col cols="12" md="12" class="formStyle"> <div class="sales table-responsive"> <table class="table table-striped table-hover table-bordered"> <tr> <span v-for="(itemLabel,i) in form.detailLabelAndField" :key="itemLabel.label"> <span v-if="itemLabel.field=='item_category_id'"> <th :class="'text_field sale_label_style sale_label_width_'+i"> {{itemLabel.label}} </th> </span> <span v-else-if="itemLabel.field=='item_id'"> <th :class="'text_field sale_label_style sale_label_width_'+i"> {{itemLabel.label}} </th> </span> <span v-else-if="itemLabel.field=='rate'"> <th :class="'no_field sale_label_style sale_label_width_'+i"> {{itemLabel.label}} </th> </span> <span v-else-if="itemLabel.field=='qty'"> <th :class="'no_field sale_label_style sale_label_width_'+i"> {{itemLabel.label}} </th> </span> <span v-else-if="itemLabel.field=='total_discount'"> <th :class="'no_field sale_label_style sale_label_width_'+i"> {{itemLabel.label}} </th> </span> <span v-else-if="itemLabel.field=='total_amount'"> <th :class="'no_field sale_label_style sale_label_width_'+i"> {{itemLabel.label}} </th> </span> <span v-else-if="itemLabel.field=='is_fire'"> <th :class="'text_field2 sale_label_style sale_label_width_'+i"> {{itemLabel.label}} </th> </span> </span> <span> <th class="sale_label fire">Fire</th> <th class="sale_label action">Action</th> </span> </tr> <tr v-for="(v, i) in $v.dtl.fieldModel.$each.$iter" :id="'detail_id_'+i" class="detail-div"> <input type="hidden" :id="'is_delete_'+i" :name="'is_delete_'+i" v-model="v['is_delete']" class="form-control"> <span v-for="(itemField,j) in form.detailLabelAndField"> <td> <span v-if="itemField.field=='item_category_id'"> <input type="hidden" :id="itemField.field+'_'+i" :name="itemField.field+'_'+i" v-model.trim="itemField.field" :class="'sale_field_style sale_field_width_'+j" /> <b-form-input :id="itemField.show_item_category_name+'_'+i" :name="itemField.show_item_category_name+'_'+i" v-model.trim="v[itemField.show_item_category_name].$model" :class="'input_field sale_field_style sale_field_width_'+j" readonly @click="categoryItem(i)" @blur="v[itemField.show_item_category_name].$touch()" :state="v[itemField.show_item_category_name].$dirty ? !v[itemField.show_item_category_name].$anyError : null" ></b-form-input> </span> <span v-else-if="itemField.field=='item_id'"> <input type="hidden" :id="itemField.field+'_'+i" :name="itemField.field+'_'+i" v-model.trim="itemField.field" :class="' sale_field_style sale_field_width_'+j" /> <b-form-input :id="itemField.show_item_name+'_'+i" :name="itemField.show_item_name+'_'+i" v-model.trim="v[itemField.show_item_name].$model" :class="'input_field sale_field_style sale_field_width_'+j" readonly @click="categoryItem(i)" @blur="v[itemField.show_item_name].$touch()" :state="v[itemField.show_item_name].$dirty ? !v[itemField.show_item_name].$anyError : null" ></b-form-select> </span> <span v-else-if="itemField.field=='rate'"> <b-form-group id="input-group-2" label="" label-for="input-2" description="" > <b-form-input :id="itemField.field+'_'+i" :name="itemField.field+'_'+i" v-model.trim="v[itemField.field].$model" type="text" placeholder="" readonly :class="'input_no_field sale_field_style sale_field_width_'+j" @blur="v[itemField.field].$touch()" :state="v[itemField.field].$dirty ? !v[itemField.field].$anyError : null" > </b-form-input> </b-form-group> </span> <span v-else-if="itemField.field=='qty'"> <b-form-group id="input-group-2" label="" label-for="input-2" description="" > <b-form-input :id="itemField.field+'_'+i" :name="itemField.field+'_'+i" v-model.trim="v[itemField.field].$model" type="text" placeholder="" :class="'input_no_field sale_field_style sale_field_width_'+j" @keyup="quantityUpdate($event,i,itemField.field,v[item_id])" @blur="v[itemField.field].$touch()" :state="v[itemField.field].$dirty ? !v[itemField.field].$anyError : null" > </b-form-input> </b-form-group> </span> <span v-else-if="itemField.field=='total_discount'"> <b-form-group id="input-group-2" label="" label-for="input-2" description="" > <b-form-input :id="itemField.field+'_'+i" :name="itemField.field+'_'+i" v-model.trim="v[itemField.field].$model" type="text" placeholder="" :class="'input_no_field sale_field_style sale_field_width_'+j" @keyup="discountUpdate($event,i,itemField.field,v[item_id])" @blur="v[itemField.field].$touch()" :state="v[itemField.field].$dirty ? !v[itemField.field].$anyError : null" > </b-form-input> </b-form-group> </span> <span v-else-if="itemField.field=='is_fire'"> <span v-if="itemField.field" class="input_field2 textStyle">Order Placed</span> <span v-else>Order Not Placed</span> </span> <span v-else> <b-form-group id="input-group-2" label="" label-for="input-2" description="" > <b-form-input :id="itemField.field+'_'+i" :name="itemField.field+'_'+i" v-model.trim="v[itemField.field].$model" value="" type="text" placeholder="" readonly :class="'input_no_field sale_field_style sale_field_width_'+j" @blur="v[itemField.field].$touch()" :state="v[itemField.field].$dirty ? !v[itemField.field].$anyError : null" > </b-form-input> </b-form-group> </span> </td> </span> <span> <td align="left" class="fire2"> <span></span> <span class='delButton sale_field' @click="ActionN(i)">N</span> </td> </span> <td align="left" class="action2"> <span class='delButton sale_field' @click="ActionV(i)">V</span> <span class='delButton sale_field' @click="ActionC(i)">C</span> <span class='delButton sale_field' @click="ActionC(i)">R</span> <span class='delButton sale_field' @click="deleteDtl(i)">X</span> </td> </tr> <tr> <span v-for="(itemLabel,i) in form.detailLabelAndField" > <span v-if="itemLabel.field=='item_category_id'"> <td :class="'text_fieldTitle'"> </span> <span v-else-if="itemLabel.field=='item_id'"> <td :class="'text_fieldTitle'"> </td> </span> <span v-else-if="itemLabel.field=='rate'"> <td :class="'no_fieldTitle'"> </td> </span> <span v-else-if="itemLabel.field=='qty'"> <td :class="'no_fieldTitle'"> {{d_total_qty}} </td> </span> <span v-else-if="itemLabel.field=='total_discount'"> <td :class="'no_fieldTitle'"> {{d_total_discount}} </td> </span> <span v-else-if="itemLabel.field=='total_amount'"> <td :class="'no_fieldTitle'"> {{d_total}} </td> </span> <span v-else-if="itemLabel.field=='is_fire'"> <td :class="'text_field2Title'"> </td> </span> </span> <span> <td class="sale_labelTitle fireTitle"> </td> <td class="sale_labelTitle actionTitle"> </td> </span> </tr> </table> </div> <!--b-col cols="12" md="12" align="center"> <b-button type="button" variant="outline-primary" @click="addMore()">Add</b-button> </b-col--> </b-col> <!-- end details --> <b-col cols="12" md="12" align="center"> <b-button type="submit" variant="outline-primary">Submit</b-button> <!--b-button type="reset" variant="outline-danger">Reset</b-button--> <!--b-button variant="outline-danger" @click="onReset">Reset</b-button--> </b-col> </b-row> </b-form> </b-col> </b-row> </b-card> <b-modal v-model="show" size="xl" id="modal-scrollable" scrollable hide-backdrop content-class="shadow" title="Sales Item" :header-bg-variant="headerBgVariant" :header-text-variant="headerTextVariant" :body-bg-variant="bodyBgVariant" :body-text-variant="bodyTextVariant" :footer-bg-variant="footerBgVariant" :footer-text-variant="footerTextVariant" @ok="okSubmit" > <div class="itemSrcoll"> <b-row> <b-col cols="12" md="4" class="itemLeft"> <div v-if="categoryListObject"> <Scroll-Div class="itemSrcoll"> <h5>Select Category</h5> <ul class="catlist"> <li :class="selected_cat_id === categoryListObj.value ? 'selected cursor':'cursor'" v-for="(categoryListObj,k) in categoryListObject" @click="showItem(categoryListObj.value)" > {{k+1}}{{'-'}}{{categoryListObj.text}} </li> </ul> </Scroll-Div> </div> </b-col> <b-col cols="12" md="8" class="itemRight"> <Scroll-Div class="itemSrcoll"> <h5>Select Item</h5> <table class="table table-striped table-hover table-bordered itemTable"> <tr> <th> <input type="checkbox" class="custoCheck" v-model="itemAll" :id="'allcheck'" @change="handleCheckAll($event)"/> All </th> <th>Sl</th> <th>Img</th> <th>Item Code</th> <th>Item</th> <th>Qty</th> <th>Discount</th> </tr> <tr v-if="itemListObject.length" v-for="(itemListObj,i) in itemListObject" > <td> <input type="checkbox" class="custoCheck" v-model="eachItem[itemListObj.id]" @change="pushItem($event,itemListObj.id)"/> </th> <td>{{i+1}}</td> <td> <span v-if="itemListObj.item_image_path"> <img class="itemImgSize" :src="itemPath+itemListObj.item_image_path"/> </span> </td> <td>{{itemListObj.item_code}}</td> <td>{{itemListObj.item_name}}{{itemListObj.id}}</td> <td> <b-form-select id="is_active" v-model="no_of_qty[itemListObj.id]" :options="qty_list" class="qtysize" @change="updateItemQty(itemListObj.id)" ></b-form-select> </td> <td> <b-form-group id="input-group-2" label="" label-for="input-2" description="" > <b-form-input :id="itemListObj.id" v-model.trim="modal_discount[itemListObj.id]" value="" type="text" placeholder="" class="qtysize" @keyup="updateItemDiscount(itemListObj.id)" > </b-form-input> </b-form-group> </td> </tr> <tr v-if="! itemListObject.length"> <td :colspan="6"> <p class="no_item">No item found. Please select category</p> </td> </tr> </table> </Scroll-Div> </b-col> </b-row> </div> </b-modal> </div> </template> <script> import Vue from "vue"; import manualConfig from "../../config/configManual"; import Datepicker from 'vuejs-datepicker'; import moment from 'moment'; import { required, minLength, between,numeric,email,sameAs} from 'vuelidate/lib/validators'; import { helpers } from 'vuelidate/lib/validators'; const checkMobile = helpers.regex('checkMobile', /^[(017)|(018)|(016)|(015)|(019)]{3}[0-9]{8}$/); export default { data() { return { form: { sales_date:'', memo_no: '', customer_id: '', remarks:'', table_no:'', waiter_name:'', sales_type:'D', gross_sale_amount:0, total_discount_percent:0, total_discount:0, add_less:0, vat_percent:5, vat:0, service_charge_percent:2, service_charge:0, delivery_charge_percent:2, delivery_charge:0, total_sales_amount:0, create_by:'', company_id:'', company_name:'', userData:null, no_of_guest:0, sales_type_option: [ { text: 'Dine In', value: 'D' }, { text: 'Take Out', value: 'T' }, ], detailLabelAndField:[{'label':'Item Category','field':'item_category_id','show_item_category_name':'item_category_name'},{'label':'Item Name','field':'item_id','show_item_name':'item_name'},{'label':'Rate','field':'rate'},{'label':'QTY','field':'qty'},{'label':'Discount','field':'total_discount'},{'label':'Total','field':'total_amount'},{'label':'Is Order Placed?','field':'is_fire'}], }, dtl: { count:1, totalLoop:this.range(0,1), iterateLoop:[], fieldModel:[], }, defaultOption:[{ text: 'Select One', value:'' }], companyListObject:[], customerListObject:[], unitListObject:[], categoryListObject:[], itemListObject:[], allListObject:[], salesTypeOptions:[{ text: 'Direct', value:'direct' },{ text: 'Indirect', value: 'indirect' }], companyList:'', show: false, itemAll:false, eachItem:[], selectItemList:[], no_of_qty:[], modal_discount:[], is_fire:[], is_d:[], is_c:[], is_r:[], qty_list:[{ text: '1', value:1},{ text:'2', value: 2},{ text:'3', value:3 },{ text: '4', value: 4},{ text: '5', value: 5 },{ text: '6', value: 6 },{ text: '7', value: 7 },{ text: '8', value: 8 },{ text: '9', value: 9 },{ text: '10', value: 10 }], alertMsg: '', selected_cat_id:'', d_total_qty:0, d_total_discount:0, d_total:0, variants: ['primary', 'secondary', 'success', 'warning', 'danger', 'info', 'light', 'dark'], headerBgVariant: 'primary', headerTextVariant: 'light', bodyBgVariant: 'info', bodyTextVariant: 'light', footerBgVariant: 'warning', footerTextVariant: 'dark', } }, validations: { form:{ sales_date:{ required }, memo_no: { required }, customer_id: { required }, table_no: { required }, sales_type: { required }, remarks: { }, waiter_name: { }, gross_sale_amount: { required }, vat_percent: { required }, vat: { required }, service_charge_percent: { required }, service_charge: { required }, delivery_charge_percent: { }, delivery_charge: { }, add_less: { }, total_sales_amount: { required }, total_discount: { }, }, dtl:{ fieldModel:{ $each:{ item_category_name:{required}, item_name:{required }, item_id:{ }, qty:{ required ,numeric}, rate:{ required,numeric }, total_discount:{numeric }, total_amount:{ required,numeric } }, } }, }, components: { Datepicker, }, created(){ this.checkIsLog(); this.selectBoxList(); this.setFieldModel(); }, updated(){ }, mounted(){ }, methods: { checkIsLog(){ if(localStorage.getItem('userData') == null){ this.$router.push({name:'/',query:{msg:['pl']}}); }else{ this.userData =(localStorage.getItem('userData'))? JSON.parse(localStorage.getItem('userData')):''; this.form.company_id = this.userData.company_id; } }, customFormatter(date) { return moment(date).format('D-MM-yyyy'); }, range(start, end){ if (!end) { end = start; start = 0; } start -= 1; end -= 1; let arr = []; while (start++ !== end) { arr.push(start); } return arr; }, setFieldModel(val=0){ let detailData = this.form.detailLabelAndField; let fieldModelArray = this.dtl.fieldModel; let eachRecord ={}; Vue.set(eachRecord,'is_delete',false); Vue.set(eachRecord, 'is_check',false); Vue.set(eachRecord, 'update_qty',0); Vue.set(eachRecord, 'modal_discount',0); Vue.set(eachRecord, 'is_fire',false); Vue.set(eachRecord, 'is_d',false); Vue.set(eachRecord, 'is_c',false); Vue.set(eachRecord, 'is_r',false); detailData.forEach(function(detail,j){ if(detail.field == "item_category_id"){ Vue.set(eachRecord,detail.field,''); Vue.set(eachRecord,detail.show_item_category_name,''); }else if(detail.field == "item_id"){ Vue.set(eachRecord,detail.field,''); Vue.set(eachRecord,detail.show_item_name,''); }else{ Vue.set(eachRecord,detail.field,''); } }); fieldModelArray.push(eachRecord); return fieldModelArray; }, addMore(){ this.dtl.totalLoop.push(this.dtl.count++); //this.dtl.iterateLoop =[]; this.dtl.iterateLoop.push({'loop':(this.dtl.totalLoop.length-1)}); this.setFieldModel(this.dtl.totalLoop.length-1); return this.dtl.iterateLoop; }, deleteDtl(index){ let detailId ='#detail_id_'+index; let isDelete ='is_delete_'+index; //this.$set(this.dtl.fieldModel,"is_delete_"+index+"",'true'); //this.$set(this.dtl.fieldModel[index],"is_delete','true'); //this.dtl.fieldModel.splice(index, 'is_delete', 'true'); this.dtl.fieldModel[index].is_delete ='true'; this.dtl.fieldModel.splice(index,1); this.dtl.totalLoop.splice(index,1); //document.querySelector(detailId).style.display ="none"; }, onSubmit(event) { event.preventDefault(); this.$v.$touch(); if (this.$v.$invalid) { this.submitStatus = 'ERROR'; } else { if(this.form.company_id && JSON.parse(localStorage.getItem('userData')).id){ const data = { sales_date:moment(this.form.sales_date).format('D-MM-yyyy'), memo_no: this.form.memo_no, customer_id: this.form.customer_id, remarks:this.form.remarks, table_no:this.form.table_no, waiter_name:this.form.waiter_name, sales_type:this.form.sales_type, gross_sale_amount:this.form.gross_sale_amount, vat_percent: this.form.vat_percent, vat:this.form.vat, service_charge:this.form.service_charge, service_charge_percent:this.form.service_charge_percent, delivery_charge:this.form.delivery_charge, add_less:this.form.add_less, total_sales_amount:this.form.total_sales_amount, company_id:this.form.company_id, create_by:JSON.parse(localStorage.getItem('userData')).id, detail:this.dtl.fieldModel } this.$store.dispatch('addSales',data) .then(() => { if(this.$store.getters.getNotifications.type){ this.$notify({ group: this.$store.getters.getNotifications.group, type: this.$store.getters.getNotifications.type, title: 'Message', text: this.$store.getters.getNotifications.message, duration: 3000, speed: 300 }); } this.$store.commit('remove_notification'); }); this.onReset(event); }else{ this.$router.push({page:'home'}); this.$notify({ group:'message1', type: 'error', title: 'Message', text:'Please login first', duration: 3000, speed: 300 }); } } }, onReset(event) { event.preventDefault(); this.form.sales_date =''; this.form.memo_no =''; this.form.customer_id =''; this.form.remarks =''; this.form.table_no =''; this.form.waiter_name =''; this.form.sales_type =''; this.form.gross_sale_amount =''; this.form.vat_percent =''; this.form.vat =''; this.form.service_charge =''; this.form.service_charge_percent =''; this.form.delivery_charge =''; this.form.add_less =''; this.form.total_sales_amount =''; this.form.company_id =''; this.dtl.totalLoop =[0]; this.dtl.fieldModel =[]; let eachRecord ={}; Vue.set(eachRecord,'is_delete','false'); this.form.detailLabelAndField.forEach(function(detail,j){ Vue.set(eachRecord,detail.field,''); }); this.dtl.fieldModel.push(eachRecord); //return this.dtl.fieldModel; }, selectBoxList(){ this.$store.dispatch('getPosCompanyFilterList',{}) .then(()=>{ if(this.$store.getters.allPosCompany[0].id){ let allCom =[]; this.$store.getters.allPosCompany.forEach(function(value, key){ let comLis ={ text:value.name, value:value.id }; allCom.push(comLis); }); this.companyListObject = allCom; } }); this.$store.dispatch('editPosCompany',{ id:this.userData.company_id }).then(()=>{ if(this.$store.getters.editPosCompanyList.id){ this.form.company_name = this.$store.getters.editPosCompanyList.name; } }); this.$store.dispatch('getPosCustomerFilterList',{}) .then(()=>{ if(this.$store.getters.allPosCustomer[0].id){ let allCus =[]; this.$store.getters.allPosCustomer.forEach(function(value, key){ let cusLis ={ text:value.customer_name, value:value.id }; allCus.push(cusLis); }); this.customerListObject = allCus; } }); this.$store.dispatch('getPosUnitFilterList',{}) .then(()=>{ if(this.$store.getters.allPosUnit[0].id){ let allUnit =[]; this.$store.getters.allPosUnit.forEach(function(value, key){ let unitLis ={ text:value.unit_name, value:value.id }; allUnit.push(unitLis); }); this.unitListObject = allUnit; } }); this.$store.dispatch('getPosCategoryFilterList',{}) .then(()=>{ if(this.$store.getters.allPosCategory[0].id){ let allCat =[]; this.$store.getters.allPosCategory.forEach(function(value, key){ let catLis ={ text:value.category_name, value:value.id }; allCat.push(catLis); }); this.categoryListObject = allCat; } }); this.$store.dispatch('getPosItemFilterList',{}) .then(()=>{ if(this.$store.getters.allPosItem[0].id){ let allItem =[]; this.$store.getters.allPosItem.forEach(function(value, key){ let itemLis ={ text:value.item_name, value:value.id }; allItem.push(itemLis); }); this.allListObject = allItem; } }); }, categoryItem(index){ // get all category list let item_category_id=""; let item_category_name=""; let item_id=""; let item_name=""; item_category_id = this.dtl.fieldModel[index].item_category_id; item_category_name = this.dtl.fieldModel[index].item_category_name; item_id = this.dtl.fieldModel[index].item_id; item_name = this.dtl.fieldModel[index].item_name; this.selected_cat_id = null; this.selected_cat_id = item_category_id; this.showItem(this.selected_cat_id); this.show = true; alert(item_category_name); }, showItem(catId){ // show all category,item when click on category to open modal // also update modal discount, qty from fieldModalObjectArray if(catId){ //this.allListObject; //this.itemListObject = this.allListObject.map(item=>(item.item_category_id)); /* if (this.allListObject.find(x => x.item_category_id === catId)) { this.itemListObject.push(x); }*/ this.selected_cat_id = null; this.selected_cat_id = catId; let fieldModel = this.dtl.fieldModel; this.$Progress.start(); this.$store.dispatch('getPosItemFilterList',{ item_name:'', item_code: '', is_active: '', company_id: this.form.company_id, category_id: catId, unit_id:'' }) .then(()=>{ this.$Progress.finish(); if(this.$store.getters.allPosItem[0].id){ this.itemListObject = this.$store.getters.allPosItem; this.updatePropertyValue(); } }); } }, handleFire(event,index){ this.dtl.fieldModel[index].is_fire = event.target.checked }, pushItem(event,itemId){ // put all checked item from itemListObjectArray to selectItemObjectArray let indexOfItemObject =null; indexOfItemObject = this.itemListObject.map(item => item.id).indexOf(itemId); // check selectItemObjectArray and push or delete check itemListObjectArray this.$Progress.start(); if(event.target.checked){ // searcing temListObjectArray and update input value this.itemListObject[indexOfItemObject].is_check = event.target.checked; this.itemListObject[indexOfItemObject].update_qty = this.no_of_qty[itemId]; this.itemListObject[indexOfItemObject].modal_discount = this.modal_discount[itemId]; //alert(this.modal_discount[itemId]); //end searcing temListObjectArray and update input value // search selectItemObjectArray status if(this.selectItemList.length>=1){ let indexOfSelectedItemObject = null; this.selectItemList.forEach(function(selectItem,k){ if(selectItem.id === itemId){ indexOfSelectedItemObject = k; } }); if(indexOfSelectedItemObject){ this.selectItemList[indexOfSelectedItemObject] = this.itemListObject[indexOfItemObject]; }else{ this.selectItemList.push(this.itemListObject[indexOfItemObject]); } }else{ this.selectItemList.push(this.itemListObject[indexOfItemObject]); } // end search selectItemObjectArray status this.$Progress.finish(); }else{ // searcing selectItemObjectArray status this.itemListObject[indexOfItemObject].is_check = event.target.checked; this.itemListObject[indexOfItemObject].update_qty = this.no_of_qty[itemId]; this.itemListObject[indexOfItemObject].modal_discount = this.modal_discount[itemId]; if(this.selectItemList.length>=1){ let selectItemList = this.selectItemList; this.selectItemList.forEach(function(item,i){ if(item.id === itemId){ selectItemList.splice(selectItemList.indexOf(item),1); } }); } this.$Progress.finish(); // end selectItemObjectArray status } }, pushItem_back(event,itemId){ // put all checked item from itemListObjectArray to selectItemObjectArray //let qty = this.no_of_qty[itemId]; //let modalDiscount = this.modal_discount[itemId]; let indexOfItemObject =null; indexOfItemObject = this.itemListObject.map(item => item.id).indexOf(itemId); // check selectItemObjectArray and push or delete check itemListObjectArray if(event.target.checked){ // searcing temListObjectArray and update input value this.itemListObject[indexOfItemObject].is_check = event.target.checked; this.itemListObject[indexOfItemObject].update_qty = this.no_of_qty[itemId]; this.itemListObject[indexOfItemObject].modal_discount = this.modal_discount[itemId]; //alert(this.modal_discount[itemId]); //end searcing temListObjectArray and update input value // search selectItemObjectArray status if(this.selectItemList.length>=1){ let indexOfSelectedItemObject = null; this.selectItemList.forEach(function(selectItem,k){ if(selectItem.id === itemId){ indexOfSelectedItemObject = k; } }); if(indexOfSelectedItemObject){ this.selectItemList[indexOfSelectedItemObject] = this.itemListObject[indexOfItemObject]; }else{ this.selectItemList.push(this.itemListObject[indexOfItemObject]); } }else{ this.selectItemList.push(this.itemListObject[indexOfItemObject]); } // end search selectItemObjectArray status }else{ // searcing selectItemObjectArray status this.itemListObject[indexOfItemObject].is_check = event.target.checked; this.itemListObject[indexOfItemObject].update_qty = this.no_of_qty[itemId]; this.itemListObject[indexOfItemObject].modal_discount = this.modal_discount[itemId]; if(this.selectItemList.length>=1){ let selectItemList = this.selectItemList; this.selectItemList.forEach(function(item,i){ if(item.id === itemId){ selectItemList.splice(selectItemList.indexOf(item),1); } }); } // end selectItemObjectArray status } }, updateItemQty(itemId){ // modal quqntity update let qty = this.no_of_qty[itemId]; let isCheck = this.eachItem[itemId]; let indexOfItemObject = this.selectItemList.map(item => item.id).indexOf(itemId); if(isCheck){ this.selectItemList[indexOfItemObject].is_check = isCheck; this.selectItemList[indexOfItemObject].update_qty = qty; }else{ this.showMsgBox(); } }, updateItemDiscount(itemId){ // modal quqntity update let modalDiscount = this.modal_discount[itemId]; let isCheck = this.eachItem[itemId]; let indexOfItemObject = this.selectItemList.map(item => item.id).indexOf(itemId); if(isCheck){ this.selectItemList[indexOfItemObject].is_check = isCheck; this.selectItemList[indexOfItemObject].modal_discount = modalDiscount; }else{ this.showMsgBox(); } }, showMsgBox() { this.alertMsg = '' this.$bvModal.msgBoxOk('Please check item', { title: 'Alert', size: 'sm', buttonSize: 'sm', okVariant: 'success', headerClass: 'p-2 border-bottom-0', footerClass: 'p-2 border-top-0', centered: true }) .then(value => { this.alertMsg = value }) .catch(err => { // An error occurred }) }, okSubmit(){ // when click on ok button on modal then put all selectItemListObjectArray to fieldModelObjectArray return this.getAllLoopCalculation(); }, getAllLoopCalculation(){ // when click on ok button on modal then put all selectItemListObjectArray to fieldModelObjectArray let detailData = this.form.detailLabelAndField; let fieldModelArray =[]; // each row calculation if(this.selectItemList.length >=1){ // set master property // end set master property /* let gross_sale_amount = this.form.gross_sale_amount; let total_discount = this.form.total_discount; let total_discount_percent = this.form.total_discount_percent; let add_less = this.form.add_less; let vat_percent = this.form.vat_percent; let vat = this.form.vat; let service_charge_percent = this.form.service_charge_percent; let service_charge = this.form.service_charge; let delivery_charge_percent = this.form.delivery_charge_percent; let delivery_charge = this.form.delivery_charge; let total_sales_amount = this.form.total_sales_amount; */ // set footer description property let d_total_qty = this.d_total_qty; let d_total_discount = this.d_total_discount; let d_total = this.d_total; // end set footer description property this.selectItemList.forEach(function(selectItem,i){ let eachRecord ={}; Vue.set(eachRecord,'is_delete','false'); Vue.set(eachRecord, 'is_fire',selectItem['is_fire']); Vue.set(eachRecord, 'is_d',selectItem['is_d']); Vue.set(eachRecord, 'is_c',selectItem['is_c']); Vue.set(eachRecord, 'is_r',selectItem['is_r']); let updateQty =0; let rate =0; let discount =0; let totalAmount =0; detailData.forEach(function(detail,j){ if(detail.field == "item_category_id"){ Vue.set(eachRecord,detail.field,selectItem['category_id']); Vue.set(eachRecord,detail.show_item_category_name,selectItem['category_name']); }else if(detail.field == "item_id"){ Vue.set(eachRecord,detail.field,selectItem['id']); Vue.set(eachRecord,detail.show_item_name,selectItem['item_name']); }else if(detail.field == "rate"){ rate = selectItem[detail.field]; Vue.set(eachRecord,detail.field,rate); }else if(detail.field == "qty"){ updateQty = selectItem['update_qty']; Vue.set(eachRecord,detail.field,updateQty); d_total_qty = parseInt(d_total_qty)+parseInt(updateQty); }else if(detail.field == "total_discount"){ discount = selectItem['modal_discount']; Vue.set(eachRecord,detail.field,discount); d_total_discount = parseInt(d_total_discount) + parseInt(discount); }else if(detail.field == "total_amount"){ totalAmount = ((parseInt(rate)*parseInt(updateQty))-parseInt(discount)); Vue.set(eachRecord,detail.field,totalAmount); d_total = parseInt(d_total)+ (parseInt(totalAmount)); } }); fieldModelArray.push(eachRecord); }); this.d_total_qty = d_total_qty; this.d_total_discount = d_total_discount; this.d_total = d_total; this.form.gross_sale_amount = parseInt(d_total); this.form.total_discount = d_total_discount; this.add_less = this.add_less; if(this.form.vat_percent && parseInt(this.form.vat_percent) >0){ this.form.vat = parseInt(this.form.gross_sale_amount*(this.form.vat_percent/100)); }else{ this.form.vat = 0; } if(this.form.service_charge_percent && parseInt(this.form.service_charge_percent) >0){ this.form.service_charge = parseInt(this.form.gross_sale_amount*(this.form.service_charge_percent/100)); } if(this.form.delivery_charge_percent && parseInt(this.form.delivery_charge_percent) >0){ this.form.delivery_charge = parseInt(this.form.gross_sale_amount*(this.form.delivery_charge_percent/100)); } this.form.total_sales_amount = parseInt(this.form.gross_sale_amount + this.form.service_charge + this.form.delivery_charge - this.form.vat - this.form.total_discount - this.form.add_less); this.dtl.fieldModel =[]; this.dtl.fieldModel = fieldModelArray; } return this.dtl.fieldModel; // end each row calculation }, quantityUpdate(event,index,field){ // master dtl quqntity update if(this.dtl.fieldModel[index][field] = event.target.value){ this.no_of_qty[this.dtl.fieldModel[index].item_id] = this.dtl.fieldModel[index][field]; this.updateAllLoopCalculation(); } }, discountUpdate(event,index,field){ // master dtl discount update if(this.dtl.fieldModel[index][field] = event.target.value){ this.modal_discount[this.dtl.fieldModel[index].item_id] = this.dtl.fieldModel[index][field]; this.updateAllLoopCalculation(); } }, updateAllLoopCalculation(){ // where update qty, discount on detail form then update whole master detail data(VVI) let detailData = this.form.detailLabelAndField; // each row calculation if(this.dtl.fieldModel.length >=1){ let staticfieldModel = this.dtl.fieldModel; this.dtl.fieldModel.forEach(function(modelItem,i){ let rate =0; let qty =0; let totalDiscount =0; let totalAmount =0; detailData.forEach(function(detail,j){ if(detail.field == "item_category_id"){ }else if(detail.field == "item_id"){ }else if(detail.field == "rate"){ rate = modelItem[detail.field]; }else if(detail.field == "qty"){ qty = modelItem[detail.field]; }else if(detail.field == "total_discount"){ totalDiscount = modelItem[detail.field]; }else if(detail.field == "total_amount"){ totalAmount = ((rate*qty)-totalDiscount); } }); //let totalId ='#total_amount_'+i; //document.querySelector(totalId).value = ((modelItem.rate*modelItem.qty)-modelItem.total_discount); //document.querySelector(totalId).value = totalAmount; modelItem.total_amount = totalAmount; }); } // end each row calculation }, }, computed:{ deleteImg(){ return manualConfig.sitePath+'/public/images/database_delete.png'; }, itemPath(){ return manualConfig.sitePath+'/public/images/upload/inv/'; }, updatePropertyValue(){ let allItem =[]; // some additional field that does not save on database let no_of_qty = this.no_of_qty; let is_fire = this.is_fire; let is_d = this.is_d; let is_c = this.is_c; let is_r = this.is_r; let modal_discount = this.modal_discount; this.itemListObject.forEach(function(value, key){ // set define object property no_of_qty[value.id] = (no_of_qty[value.id])? no_of_qty[value.id]:1; modal_discount[value.id]= (modal_discount[value.id])? modal_discount[value.id]:0; // end set object property // set loop object property Vue.set(value, 'is_check',is_fire[value.id]); Vue.set(value, 'update_qty',no_of_qty[value.id]); Vue.set(value, 'modal_discount',modal_discount[value.id]); //Vue.set(value, 'is_fire',is_fire[value.id]); // Vue.set(value, 'is_d',is_d[value.id]); //Vue.set(value, 'is_c',is_c[value.id]); //Vue.set(value, 'is_r',is_r[value.id]); // end loop object property allItem.push(value); }); this.itemListObject=[]; // add all loop object to itemListObject this.itemListObject = allItem; }, updatePushItem(event,itemId){ // put all checked item from itemListObjectArray to selectItemObjectArray //let qty = this.no_of_qty[itemId]; //let modalDiscount = this.modal_discount[itemId]; let indexOfItemObject =null; indexOfItemObject = this.itemListObject.map(item => item.id).indexOf(itemId); // check selectItemObjectArray and push or delete check itemListObjectArray if(event.target.checked){ // searcing temListObjectArray and update input value this.itemListObject[indexOfItemObject].is_check = event.target.checked; this.itemListObject[indexOfItemObject].update_qty = this.no_of_qty[itemId]; this.itemListObject[indexOfItemObject].modal_discount = this.modal_discount[itemId]; //alert(this.modal_discount[itemId]); //end searcing temListObjectArray and update input value // search selectItemObjectArray status if(this.selectItemList.length>=1){ let indexOfSelectedItemObject = null; this.selectItemList.forEach(function(selectItem,k){ if(selectItem.id === itemId){ indexOfSelectedItemObject = k; } }); if(indexOfSelectedItemObject){ this.selectItemList[indexOfSelectedItemObject] = this.itemListObject[indexOfItemObject]; }else{ this.selectItemList.push(this.itemListObject[indexOfItemObject]); } }else{ this.selectItemList.push(this.itemListObject[indexOfItemObject]); } // end search selectItemObjectArray status }else{ // searcing selectItemObjectArray status this.itemListObject[indexOfItemObject].is_check = event.target.checked; this.itemListObject[indexOfItemObject].update_qty = this.no_of_qty[itemId]; this.itemListObject[indexOfItemObject].modal_discount = this.modal_discount[itemId]; if(this.selectItemList.length>=1){ let selectItemList = this.selectItemList; this.selectItemList.forEach(function(item,i){ if(item.id === itemId){ selectItemList.splice(selectItemList.indexOf(item),1); } }); } // end selectItemObjectArray status } } }, watch:{ } } </script>
Total : 18980
Today :9
Today Visit Country :