File manager - Edit - /var/www/payraty/inventory_main/resources/js/components/admin/invoices/InvoiceEdit.vue
Back
<template> <div class="row"> <div class="col-12" v-if="isExistsValidationErrors"> <div class="row"> <div class="col-12"> <div class="alert alert-danger alert-important alert-dismissible fade show mb-0" role="alert"> <button type="button" class="close" data-dismiss="alert" aria-label="Close"> <span aria-hidden="true">×</span> </button> <li v-for="(validationError, index) in validationErrors.errors" :key="index"> {{ validationError[0] }} </li> </div> </div> </div> </div> <div class="col-12"> <div class="row"> <div class="col-lg-5 col-xl-6"> <div class="card"> <div class="card-body"> <div class="row"> <div class="col-sm-6 col-lg-6 col-md-6"> <form @submit.prevent="submitBarcode()"> <div class="form-group"> <input v-focus v-model="search" type="text" class="form-control" placeholder="Search Product or Scan Barcode" @keyup="searchSelectSku($event)" /> </div> </form> </div> <div class="col-sm-6 col-lg-6 col-md-6"> <Select2 v-model="selected_category" :options="categories" :settings="{ placeholder: 'Select Category' }" @select="selectCategory($event)" ></Select2> </div> </div> <div class="ic-product-head" v-if="showProduct"> <div v-for="(product_stock, index) in product_list" :key="index" class="product-items pt-0" > <div class="product-item" @click="addNewItem(product_stock)"> <div class="ic-images-out-of-stock"> <img class="img-fluid list-image card-img-top" :src="product_stock.product.thumb_url" alt="Product" /> <div v-if="product_stock.product.stock < 1" class="ic-stock-overlay"> <p>{{ __("custom.stock_out") }}</p> </div> </div> <div class="product-item-body p-2"> <label class="m-0">{{ product_stock.product.name }}</label> <p class="card-text p-0 m-0" v-if="product_stock.product.is_variant == 1"> {{ product_stock.attribute.name }}: {{ product_stock.attribute_item.name }} </p> <p class="card-text p-0 m-0"> {{ __("custom.price") }}: {{ currency_symbol }} {{ product_stock.price_for_sale }} </p> <p class="card-text p-0 m-0"> {{ __("custom.stock") }}: {{ product_stock.quantity }} </p> </div> </div> </div> </div> <div v-else> <p class="text-white m-0">{{ __("custom.no_product_found") }}</p> </div> </div> </div> </div> <div class="col-lg-7 col-xl-6"> <div class="card"> <div class="card-body"> <div class="form-group mb-0"> <div> <label class="float-left" ><span class="mr-1">{{ __("custom.customer") }} </span> </label> <div class="custom-control custom-checkbox float-right"> <input v-model="formData.is_walkin_customer" class="form-check-input custom-control-input" type="checkbox" id="walkinCustomer" @click="btnWalkinCustomer" /> <label class="form-check-label custom-control-label checkbox-label" for="walkinCustomer" > {{ __("custom.walk_in_customer") }} </label> </div> </div> <Select2 v-if="!formData.is_walkin_customer" v-model="formData.customer_id" :id="'customer-id'" :options="customers" :settings="{ placeholder: 'Select Customer' }" @select="selectedCustomer($event)" ></Select2> </div> <div class="mb-3 w-100" v-if="formData.is_walkin_customer"> <div class="from-group"> <label for="">{{ __("custom.name") }}</label> <input type="text" class="form-control" v-model="formData.walkin_customer.full_name" /> </div> <div class="from-group"> <label for="">{{ __("custom.phone") }}</label> <input type="text" class="form-control" v-model="formData.walkin_customer.phone" /> </div> </div> <div class="col-sm-12 p-0 mt-3"> <div class="col-sm-12 p-0"> <label for="" class="text-muted w-100 mb-0" >{{ __("custom.billing_info") }} <a class="float-right" href="#" data-toggle="modal" data-target=".billing-info-edit" ><i class="fa fa-edit"></i></a ></label> </div> <div class="col-sm-12 mt-1 p-0 float-left" v-if="isCustomerSelected || formData.is_walkin_customer" > <p class="m-0">{{ formData.billing.name }}</p> <p class="m-0">{{ formData.billing.email }}</p> <p class="m-0">{{ formData.billing.phone }}</p> <p class="m-0">{{ billinAddressFull() }}</p> </div> </div> <div class="col-sm-12 p-0 mt-3"> <div class="col-sm-12 p-0"> <label for="" class="text-muted mb-0 w-100"> {{ __("custom.shipping_info") }} <a class="float-right" href="#" data-toggle="modal" data-target=".shipping-info-edit" ><i class="fa fa-edit"></i></a ></label> <div class="custom-control custom-checkbox"> <input v-model="is_shipping_same_billing" class="form-check-input custom-control-input" type="checkbox" id="shippingSameBilling" @change="shippingSameBilling($event)" /> <label class="form-check-label custom-control-label checkbox-label" for="shippingSameBilling" > {{ __("custom.same_as_billing") }} </label> </div> </div> <div class="col-sm-12 mt-1 p-0" v-if="isCustomerSelected || formData.is_walkin_customer" > <p class="m-0">{{ formData.shipping.name }}</p> <p class="m-0">{{ formData.shipping.email }}</p> <p class="m-0">{{ formData.shipping.phone }}</p> <p class="m-0">{{ shippingAddressFull() }}</p> </div> </div> <div class="from-group mt-3 mb-3"> <label for="">{{ __("custom.date") }}</label> <datepicker input-class="form-control" v-model="formData.date" format="yyyy-MM-dd" :use-utc=true placeholder="Select date" v-model.trim="$v.formData.date.$model" ></datepicker> <small class="error" v-if="!$v.formData.date.required"> {{ __("custom.required") }} </small> </div> <div class="from-group mt-3 mb-3"> <label for="">{{ __("custom.due_date") }}</label> <datepicker input-class="form-control" v-model="formData.due_date" format="yyyy-MM-dd" :use-utc=true placeholder="Select due date" ></datepicker> </div> <div class="table-responsive ic-table-responsive-heading"> <table class=" table table-hover table-sm table-borderedless table-striped " > <thead> <tr> <th>{{ __("custom.item") }}</th> <th class="text-center">{{ __("custom.price") }} ({{ currency_symbol }})</th> <th class="text-center">{{ __("custom.qty") }}</th> <th class="text-center">{{ __("custom.dis") }}</th> <th class="text-center">{{ __("custom.dis_type") }}</th> <th class="text-center">{{ __("custom.sub_total") }}</th> <th class="text-center">{{ __("custom.action") }}</th> </tr> </thead> <tbody> <tr v-for="(item, index) in formData.items" :key="index"> <td> <p class="p-0 m-0" v-if="item.is_variant">{{ item.name }} ({{ item.attribute.name + ':' + item.attribute_item.name}})</p> <p class="p-0 m-0" v-else>{{ item.name }}</p> </td> <td> <input min="1" type="number" v-model="item.price" @input="updatePrice($event, index)" class="form-control text-center" /> </td> <td> <input min="1" type="number" v-model="item.quantity" @input="updateQuantity($event, index)" class="form-control text-center" /> </td> <td> <input min="0" type="number" v-model="item.discount" class="form-control text-center" /> </td> <td> <select v-model="item.discount_type" class="form-control"> <option value="percent">%</option> <option value="fixed">{{ __("custom.fixed") }}</option> </select> </td> <td>₦{{ calculateSubtotal(index) }}</td> <td class="text-center"> <button type="button" class="btn btn-sm btn-outline-danger" @click.prevent="deleteItem(index)" > <i class="fa fa-trash"></i> </button> </td> </tr> </tbody> <tfoot> <tr> <td colspan="5"> <b>{{ __("custom.sub_total") }}</b> </td> <td> <b>{{ currency_symbol }} {{ calculateTotalWithOutTax() }}</b> </td> <td></td> </tr> <tr v-if="cartNotEmpty"> <td colspan="2"> <b>{{ __("custom.discount") }}</b> </td> <td> <input type="number" v-model="formData.discount" class="form-control" /> </td> <td colspan="2"> <select v-model="formData.discount_type" class="form-control" > <option value="percent">%</option> <option value="fixed">{{ __("custom.fixed") }}</option> </select> </td> <td> <b>{{ currency_symbol }} {{ calculateGlobalDiscount() }}</b> </td> <td></td> </tr> <tr v-if="cartNotEmpty"> <td colspan="5"> <b>{{ __("custom.total_discount") }}</b> </td> <td> <b>{{ currency_symbol }} {{ calculateTotalDiscount() }}</b> </td> <td></td> </tr> <tr> <td colspan="5"> <b>{{ __("custom.tax") }}</b> </td> <td> <b>{{ currency_symbol }} {{ totalTax() }}</b> </td> <td></td> </tr> <tr> <td colspan="5"> <b>{{ __("custom.total") }}</b> </td> <td> <b style="font-size:22px">{{ currency_symbol }} {{ calculateTotalWithTax() }}</b> </td> <td></td> </tr> </tfoot> </table> </div> <div class="col-sm-12 p-0" style="margin-top:20px"> <label for="" class="w-100">{{ __("custom.payment") }}</label> <div class="ic-payment-method"> <div class="payment-method mr-1"> <input v-model="formData.payment_type" type="radio" value="cash" id="cash" name="payment_type" /> <label class="radio-inline radio-image" for="cash"> <span></span> <img :src="asset('admin/images/cash.png')" alt="images"/> </label> </div> <div class="payment-method mr-1"> <input v-model="formData.payment_type" type="radio" value="online" id="paypal" name="payment_type" /> <label class="radio-inline radio-image" for="paypal"> <span></span> <img :src="asset('admin/images/online.png')" class="ic-paypal" alt="images" /> </label> </div> <div class="payment-method mr-1"> <input v-model="formData.payment_type" type="radio" value="bank" id="bank" name="payment_type" /> <label class="radio-inline radio-image" for="bank"> <span></span> <img :src="asset('admin/images/bank.png')" class="ic-paypal" alt="images" /> </label> </div> </div> <div class="from-group" style="margin-top:20px"> <label for="">{{ __("custom.total_paid") }}</label> <input v-model="formData.total_paid" type="number" min="0" class="form-control" /> </div> <div v-if="formData.payment_type == 'bank'"> <div class="from-group"> <label for="">{{ __("custom.account_number") }}</label> <input v-model="formData.bank_info.ac_no" type="text" class="form-control" /> </div> <div class="from-group"> <label for="">{{ __("custom.transaction_no") }}</label> <input v-model="formData.bank_info.t_no" type="text" class="form-control" /> </div> <div class="from-group mt-3 mb-3"> <label for="">{{ __("custom.transaction_date") }}</label> <datepicker input-class="form-control" v-model="formData.bank_info.date" format="yyyy-MM-dd" :use-utc=true ></datepicker> </div> </div> </div> <div class="form-grou" style="margin-top:20px"> <label for="">{{ __("custom.note") }}</label> <textarea v-model="formData.notes" cols="30" rows="10" class="form-control" ></textarea> </div> <div class="col-sm-12 p-0 mt-3"> <div class="text-center"> <button v-if="cartNotEmpty" type="button" class="btn btn-dark btn-block" @click="submitInvoice" > {{ __("custom.confirm") }} </button> </div> </div> </div> </div> </div> <!-- Billing info edit modal --> <div class="modal fade billing-info-edit" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true" > <div class="modal-dialog modal-lg"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title">{{ __("custom.billing_info") }}</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close" > <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> <div class="row"> <div class="col-sm-4"> <label for="">{{ __("custom.name") }}</label> <input type="text" class="form-control" v-model="formData.billing.name" /> </div> <div class="col-sm-4"> <label for="">{{ __("custom.email") }}</label> <input type="email" class="form-control" v-model="formData.billing.email" /> </div> <div class="col-sm-4"> <label for="">{{ __("custom.phone") }}</label> <input type="text" class="form-control" v-model="formData.billing.phone" /> </div> <div class="col-sm-4"> <label for="">{{ __("custom.address_line_1") }}</label> <input type="text" class="form-control" v-model="formData.billing.address_line_1" /> </div> <div class="col-sm-4"> <label for="">{{ __("custom.address_line_2") }}</label> <input type="text" class="form-control" v-model="formData.billing.address_line_2" /> </div> <div class="col-sm-4"> <label for="">{{ __("custom.city") }}</label> <input type="text" class="form-control" v-model="formData.billing.city" /> </div> <div class="col-sm-4"> <label for="">{{ __("custom.state") }}</label> <input type="text" class="form-control" v-model="formData.billing.state" /> </div> <div class="col-sm-4"> <label for="">{{ __("custom.zipcode") }}</label> <input type="text" class="form-control" v-model="formData.billing.zip" /> </div> <div class="col-sm-4"> <label for="">{{ __("custom.country") }}</label> <input type="text" class="form-control" v-model="formData.billing.country" /> </div> </div> </div> <div class="modal-footer text-right"> <button type="button" class="btn btn-primary" data-dismiss="modal"> {{ __("custom.save_and_close") }} </button> </div> </div> </div> </div> <!-- Shipping info edit modal --> <div class="modal fade shipping-info-edit" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel1" aria-hidden="true" > <div class="modal-dialog modal-lg"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title">{{ __("custom.shipping_info") }}</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close" > <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> <div class="row"> <div class="col-sm-4"> <label for="">{{ __("custom.name") }}</label> <input type="text" class="form-control" v-model="formData.shipping.name" /> </div> <div class="col-sm-4"> <label for="">{{ __("custom.email") }}</label> <input type="email" class="form-control" v-model="formData.shipping.email" /> </div> <div class="col-sm-4"> <label for="">{{ __("custom.phone") }}</label> <input type="text" class="form-control" v-model="formData.shipping.phone" /> </div> <div class="col-sm-4"> <label for="">{{ __("custom.address_line_1") }}</label> <input type="text" class="form-control" v-model="formData.shipping.address_line_1" /> </div> <div class="col-sm-4"> <label for="">{{ __("custom.address_line_2") }}</label> <input type="text" class="form-control" v-model="formData.shipping.address_line_2" /> </div> <div class="col-sm-4"> <label for="">{{ __("custom.city") }}</label> <input type="text" class="form-control" v-model="formData.shipping.city" /> </div> <div class="col-sm-4"> <label for="">{{ __("custom.state") }}</label> <input type="text" class="form-control" v-model="formData.shipping.state" /> </div> <div class="col-sm-4"> <label for="">{{ __("post_code_or_zip_code") }}</label> <input type="text" class="form-control" v-model="formData.shipping.zip" /> </div> <div class="col-sm-4"> <label for="">{{ __("custom.country") }}</label> <input type="text" class="form-control" v-model="formData.shipping.country" /> </div> </div> </div> <div class="modal-footer text-right"> <button type="button" class="btn btn-primary" data-dismiss="modal"> {{ __("custom.save_and_close") }} </button> </div> </div> </div> </div> </div> </div> </div> </template> <script> import moment from "moment"; import axios from "axios"; import Datepicker from "vuejs-datepicker"; import {required} from "vuelidate/lib/validators"; export default { props: [ "app_name", "product_stocks", "categories", "customers", "user", "default_tax", "invoice", "warehouse_id", "currency_symbol" ], components: { Datepicker, }, data() { return { validationErrors: [], isExistsValidationErrors: 0, product_list: {}, selected_category: "all", search: "", char_limit: 200, is_shipping_same_billing: false, formData: { warehouse_id: this.warehouse_id, payment_type: "cash", is_walkin_customer: false, walkin_customer: { full_name: "", phone: "", }, bank_info: { ac_no: "", t_no: "", date: "", }, date: "", due_date: "", customer_id: "", billing: { name: "", email: "", phone: "", address_line_1: "", address_line_2: "", city: "", state: "", zip: "", country: "", }, shipping: { name: "", email: "", phone: "", address_line_1: "", address_line_2: "", city: "", state: "", zip: "", country: "", }, items: [], status: "", notes: "", tax: 0, discount: 0, discount_type: "percent", // percent, fixed total_paid: 0, }, }; }, mounted() { // Set old data this.formData.customer_id = this.invoice.customer_id; this.formData.billing = this.invoice.billing_info; this.formData.shipping = this.invoice.shipping_info; this.formData.date = this.invoice.date; this.formData.due_date = this.invoice.due_date; this.formData.items = this.invoice.items_data; this.formData.payment_type = this.invoice.payment_type; this.formData.total_paid = this.invoice.total_paid; this.formData.notes = this.invoice.notes; this.formData.bank_info = this.invoice.bank_info; this.formData.discount = this.invoice.global_discount; this.formData.discount_type = this.invoice.global_discount_type; this.product_list = this.product_stocks; if (!this.invoice.customer_id) { this.formData.is_walkin_customer = true; this.formData.walkin_customer = this.invoice.customer; } }, computed: { showProduct: function () { return this.product_stocks.length > 0 ? true : false; }, cartNotEmpty: function () { return this.formData.items.length; }, charactersLeft() { let char = this.form.note.length; return this.char_limit - char + " / " + this.char_limit; }, isCustomerSelected: function () { if (this.formData.customer_id) { return true; } else { return false; } }, }, methods: { searchSelectSku(e) { let query = e.target.value; if (query.length > 1) { // Search product by sku axios .get(`/admin/app/api/product-stocks/name-sku/search/${query}/${this.warehouse_id}`) .then((res) => { this.product_list = res.data.data; }) .catch((err) => { }); } else if(query.length == 0) { let warehouse_id = this.warehouse_id; axios .get(`/admin/app/api/product-stocks/warehouse/search/${warehouse_id}`) .then((res) => { this.product_list = res.data.data; }) .catch((err) => { }); // this.searched_product = []; } else { this.searched_product = []; } }, submitBarcode() { axios .get(`/admin/app/api/product-stocks/barcode/${this.search}`) .then((res) => { let product_stock = res.data.data; if (product_stock) { if (product_stock.stock < 1) { this.$swal("Error!!!", `Out of stock`, "warning"); // Empty search field this.search = ""; return; } let already_added = this.formData.items.find( (i) => i.id == product_stock.id ); if (already_added) { already_added.quantity = already_added.quantity + 1; } else { if(product_stock.product.is_variant == 1){ this.formData.items.push({ id: product_stock.id, attribute:{ id: product_stock.attribute.id, name: product_stock.attribute.name, }, attribute_item: { id: product_stock.attribute_item.id, name: product_stock.attribute_item.name, }, is_variant: product_stock.product.is_variant, product_id: product_stock.product.id, split_sale: product_stock.product.split_sale, sku: product_stock.product.sku, name: product_stock.product.name, price: product_stock.price_for_sale, stock: product_stock.quantity, quantity: 1, tax_status: product_stock.product.tax_status, custom_tax: product_stock.product.custom_tax, discount: 0, discount_type: "percent", }); }else{ this.formData.items.push({ id: product_stock.id, attribute:{ id: '', name: '', }, attribute_item: { id: '', name: '', }, is_variant: product_stock.product.is_variant, product_id: product_stock.product.id, split_sale: product_stock.product.split_sale, sku: product_stock.product.sku, name: product_stock.product.name, price: product_stock.price_for_sale, stock: product_stock.quantity, quantity: 1, tax_status: product_stock.product.tax_status, custom_tax: product_stock.product.custom_tax, discount: 0, discount_type: "percent", }); } } } let warehouse_id = this.warehouse_id; axios .get(`/admin/app/api/product-stocks/warehouse/search/${warehouse_id}`) .then((res) => { this.product_list = res.data.data; }) .catch((err) => { }); }) .catch((err) => { }); // Empty search field this.search = ""; }, selectCategory({id}) { axios .get(`/admin/app/api/product-stocks/category/${id}/${this.warehouse_id}`) .then((res) => { this.product_list = res.data.data; }) .catch((err) => { }); }, shippingSameBilling(e) { if (this.is_shipping_same_billing) { this.formData.shipping.name = this.formData.billing.name; this.formData.shipping.email = this.formData.billing.email; this.formData.shipping.phone = this.formData.billing.phone; this.formData.shipping.address_line_1 = this.formData.billing.address_line_1; this.formData.shipping.address_line_2 = this.formData.billing.address_line_2; this.formData.shipping.city = this.formData.billing.city; this.formData.shipping.state = this.formData.billing.state; this.formData.shipping.zip = this.formData.billing.zip; this.formData.shipping.country = this.formData.billing.country; } }, billinAddressFull() { let {address_line_1, address_line_2, city, state, zip, country} = this.formData.billing; return `${address_line_1 != null ? address_line_1+', ' : ''} ${address_line_2 != null ? address_line_2+', ' : '' } ${city != null ? city + ', ' : ''} ${state != null ? state + ', ' : ''} ${zip != null ? zip + ', ' : ''} ${country != null ? country + ', ' : ''}`; }, shippingAddressFull() { let {address_line_1, address_line_2, city, state, zip, country} = this.formData.shipping; return `${address_line_1 != null ? address_line_1+', ' : ''} ${address_line_2 != null ? address_line_2+', ' : '' } ${city != null ? city + ', ' : ''} ${state != null ? state + ', ' : ''} ${zip != null ? zip + ', ' : ''} ${country != null ? country + ', ' : ''}`; // return `${address_line_1}, ${address_line_2}, ${city}, ${state}, ${zip}, ${country}`; }, selectedCustomer({id}) { let customer = this.customers.find((item) => item.id == id); // Set billing address this.formData.billing = { name: customer.full_name, email: customer.email, phone: customer.b_phone, address_line_1: customer.b_address_line_1, address_line_2: customer.b_address_line_2, city: customer.b_city_data ? customer.b_city_data.name : "", state: customer.b_state_data ? customer.b_state_data.name : "", zip: customer.b_zipcode, country: customer.b_country_data ? customer.b_country_data.name : "", }; }, addNewItem(product_stock) { let found = this.formData.items.findIndex((p) => p.id == product_stock.id); if (found >= 0) { let item = this.formData.items[found]; if (item.quantity >= product_stock.quantity) { item.quantity = product_stock.quantity; this.$swal("Error!!!", `Out of stock`, "warning"); // Empty search field this.search = ""; return; } item.quantity = Number(item.quantity) + 1; } else { if (product_stock.stock < 1) { this.$swal("Error!!!", `Out of stock`, "warning"); // Empty search field this.search = ""; return; } if(product_stock.product.is_variant == 1){ this.formData.items.push({ id: product_stock.id, attribute:{ id: product_stock.attribute.id, name: product_stock.attribute.name, }, attribute_item: { id: product_stock.attribute_item.id, name: product_stock.attribute_item.name, }, is_variant: product_stock.product.is_variant, product_id: product_stock.product.id, split_sale: product_stock.product.split_sale, sku: product_stock.product.sku, name: product_stock.product.name, price: product_stock.price_for_sale, stock: product_stock.quantity, quantity: 1, tax_status: product_stock.product.tax_status, custom_tax: product_stock.product.custom_tax, discount: 0, discount_type: "percent", }); }else{ this.formData.items.push({ id: product_stock.id, attribute:{ id: '', name: '', }, attribute_item: { id: '', name: '', }, is_variant: product_stock.product.is_variant, product_id: product_stock.product.id, split_sale: product_stock.product.split_sale, sku: product_stock.product.sku, name: product_stock.product.name, price: product_stock.price_for_sale, stock: product_stock.quantity, quantity: 1, tax_status: product_stock.product.tax_status, custom_tax: product_stock.product.custom_tax, discount: 0, discount_type: "percent", }); } } }, deleteItem: function (index) { this.formData.items.splice(index, 1); }, updatePrice(event, index) { const value = event.target.valueAsNumber; let item = this.formData.items[index]; }, updateQuantity(event, index) { const value = event.target.valueAsNumber; let item = this.formData.items[index]; if (value > item.stock) { item.quantity = item.stock; this.$swal("Error!!!", `Out of stock`, "warning"); return; } }, calculateSubtotal(index) { let item = this.formData.items[index]; const total = item.quantity * (item.price - this.calculateDiscount(item)); // const total = // (Number(item.price) + Number(this.calculateTax(item))) * item.quantity; return total.toFixed(2); }, calculateTotalWithOutTax() { const total = this.itemsTotal() - this.totalTax(); return Number(total).toFixed(2); }, calculateTotalWithTax() { const total = this.itemsTotal() - this.calculateGlobalDiscount(); return Number(total).toFixed(2); }, itemsTotal() { if (this.formData.items.length > 0) { let total = 0; this.formData.items.map((item) => { total = (Number(item.price - this.calculateDiscount(item)) + Number(this.calculateTax(item))) * item.quantity + Number(total); }); return total.toFixed(2); } return 0; }, totalTax() { let total = 0; this.formData.items.map((item) => { total = Number(this.calculateTax(item)) * item.quantity + Number(total); }); return total.toFixed(2); }, calculateTax(item) { let tax = 0; // Tax include if (item.tax_status == "included") { if (item.custom_tax) { tax = item.price * (item.custom_tax / 100); } else { tax = item.price * (Number(this.default_tax) / 100); } } return tax; }, calculateDiscount(item) { if (item.discount_type == "percent") { const total = item.price * (item.discount / 100); return total.toFixed(2); } else { return item.discount; } }, calculateGlobalDiscount() { if (this.formData.discount_type == "percent") { const total = this.calculateTotalWithOutTax() * (this.formData.discount / 100); return total.toFixed(2); } else { return this.formData.discount; } }, calculateAllDiscount() { let total = 0; this.formData.items.map((item) => { total += item.quantity * this.calculateDiscount(item); }); return total.toFixed(2); }, calculateTotalDiscount() { let total = 0; this.formData.items.map((item) => { total += item.quantity * this.calculateDiscount(item); }); if (Number(this.formData.discount) > 0) { total = Number(total) + Number(this.calculateGlobalDiscount()); } return Number(total).toFixed(2); }, calculateDue() { let due = this.calculateTotalWithOutTax() - this.formData.total_paid; if (due <= 0) return 0; return due.toFixed(2); }, calculateExchange() { let exchange = this.formData.total_paid - this.calculateTotalWithOutTax(); if (exchange > 0) { this.form.exchange = exchange; return exchange.toFixed(2); } else { this.form.exchange = 0; return false; } }, submitInvoice() { axios .put(`/admin/invoices/${this.invoice.id}`, this.formData) .then((res) => { window.location.href = "/admin/invoices/" + res.data.invoice; }) .catch((err) => { if (err.response.data.success == false){ this.isExistsValidationErrors = 0 this.$swal("Error!!!", "Some thing went wrong!", "error"); }else { this.validationErrors = err.response.data this.isExistsValidationErrors = Object.keys(this.validationErrors.errors).length this.$swal("Error!!!", "Some thing went wrong!", "error"); } }); }, print() { this.$htmlToPaper("invoice-print"); }, btnWalkinCustomer(){ this.formData.walkin_customer.full_name = ''; this.formData.walkin_customer.phone = ''; this.formData.customer_id = ''; this.formData.billing.name = ''; this.formData.billing.email = ''; this.formData.billing.phone = ''; this.formData.billing.address_line_1 = ''; this.formData.billing.address_line_2 = ''; this.formData.billing.city = ''; this.formData.billing.state = ''; this.formData.billing.zip = ''; this.formData.billing.country = ''; this.formData.shipping.name = ''; this.formData.shipping.email = ''; this.formData.shipping.phone = ''; this.formData.shipping.address_line_1 = ''; this.formData.shipping.address_line_2 = ''; this.formData.shipping.city = ''; this.formData.shipping.state = ''; this.formData.shipping.zip = ''; this.formData.shipping.country = ''; }, }, filters: { custom_date: function (value) { if (value) { return moment(String(value)).format("YYYY-MM-DD hh:mm a"); } }, }, validations: { formData: { date: { required, }, customer_id: { required, }, status: { required, }, }, }, }; </script> <style scoped> .from-group { margin-bottom: 10px; } .list-image { height: 100px; object-fit: cover; object-position: center; } .product-item:hover { cursor: pointer; } .modal-footer { display: -ms-flexbox; display: block; -ms-flex-align: center; align-items: center; -ms-flex-pack: end; justify-content: flex-end; padding: 1rem; border-top: 1px solid #dee2e6; border-bottom-right-radius: 0.3rem; border-bottom-left-radius: 0.3rem; } </style>
| ver. 1.4 |
Github
|
.
| PHP 8.3.30 | Generation time: 0 |
proxy
|
phpinfo
|
Settings