mirror of
https://gitlab.com/CIEFWorldwideSdnBhd/exchange.git
synced 2026-08-19 04:14:04 +00:00
frontend create invoice
This commit is contained in:
Edmond Teh
@@ -4,276 +4,278 @@
|
||||
<h3 class="title">Purchase Order</h3>
|
||||
|
||||
<div class="invoice-container">
|
||||
<div class="buyer-detail card">
|
||||
<div class="card-body">
|
||||
<div class="card-title">
|
||||
<h5>
|
||||
My Infomation
|
||||
</h5>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="marking">Marking</label>
|
||||
<input id="marking" v-model="$v.form.formData.marking.$model" type="text" class="form-control" disabled>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="buyer-company">Buyer's Company</label>
|
||||
<input id="buyer-company"
|
||||
v-model="$v.form.formData.buyer_company.$model"
|
||||
:class="{
|
||||
'is-invalid': $v.form.formData.buyer_company.$invalid && $v.form.formData.buyer_company.$dirty,
|
||||
'is-valid': !$v.form.formData.buyer_company.$invalid && $v.form.formData.buyer_company.$dirty
|
||||
}"
|
||||
type="text"
|
||||
class="form-control"
|
||||
@blur="$v.form.formData.buyer_company.$touch()">
|
||||
<div class="invalid-feedback">
|
||||
Buyer Company Required
|
||||
<form @submit.prevent="submitForm">
|
||||
<div class="buyer-detail card">
|
||||
<div class="card-body">
|
||||
<div class="card-title">
|
||||
<h5>
|
||||
My Infomation
|
||||
</h5>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div class="form-group">
|
||||
<label for="gst-id">GST ID</label>
|
||||
<input id="gst-id" type="text" class="form-control" disabled>
|
||||
</div> -->
|
||||
<div class="form-group">
|
||||
<label for="contact-number">Contact Number</label>
|
||||
<input id="contact-number"
|
||||
v-model.trim="$v.form.formData.contact_no.$model"
|
||||
:class="{
|
||||
'is-invalid': $v.form.formData.contact_no.$invalid && $v.form.formData.contact_no.$dirty,
|
||||
'is-valid': !$v.form.formData.contact_no.$invalid && $v.form.formData.contact_no.$dirty
|
||||
}"
|
||||
type="tel"
|
||||
class="form-control"
|
||||
@blur="$v.form.formData.contact_no.$touch()">
|
||||
<div class="invalid-feedback">
|
||||
Contact Number Required
|
||||
<div class="form-group">
|
||||
<label for="marking">Marking</label>
|
||||
<input id="marking" v-model="$v.form.formData.marking.$model" type="text" class="form-control" disabled>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="address">Address</label>
|
||||
<textarea id="address"
|
||||
v-model="$v.form.formData.address.$model"
|
||||
:class="{
|
||||
'is-invalid': $v.form.formData.address.$invalid && $v.form.formData.address.$dirty,
|
||||
'is-valid': !$v.form.formData.address.$invalid && $v.form.formData.address.$dirty
|
||||
}"
|
||||
class="form-control"
|
||||
cols="30"
|
||||
rows="4"
|
||||
@blur="$v.form.formData.address.$touch()"/>
|
||||
<div class="invalid-feedback">
|
||||
Address Required
|
||||
<div class="form-group">
|
||||
<label for="buyer-company">Buyer's Company</label>
|
||||
<input id="buyer-company"
|
||||
v-model="$v.form.formData.buyer_company.$model"
|
||||
:class="{
|
||||
'is-invalid': $v.form.formData.buyer_company.$invalid && $v.form.formData.buyer_company.$dirty,
|
||||
'is-valid': !$v.form.formData.buyer_company.$invalid && $v.form.formData.buyer_company.$dirty
|
||||
}"
|
||||
type="text"
|
||||
class="form-control"
|
||||
@blur="$v.form.formData.buyer_company.$touch()">
|
||||
<div class="invalid-feedback">
|
||||
Buyer Company Required
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div class="form-group">
|
||||
<label for="gst-id">GST ID</label>
|
||||
<input id="gst-id" type="text" class="form-control" disabled>
|
||||
</div> -->
|
||||
<div class="form-group">
|
||||
<label for="contact-number">Contact Number</label>
|
||||
<input id="contact-number"
|
||||
v-model.trim="$v.form.formData.contact_no.$model"
|
||||
:class="{
|
||||
'is-invalid': $v.form.formData.contact_no.$invalid && $v.form.formData.contact_no.$dirty,
|
||||
'is-valid': !$v.form.formData.contact_no.$invalid && $v.form.formData.contact_no.$dirty
|
||||
}"
|
||||
type="tel"
|
||||
class="form-control"
|
||||
@blur="$v.form.formData.contact_no.$touch()">
|
||||
<div class="invalid-feedback">
|
||||
Contact Number Required
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="address">Address</label>
|
||||
<textarea id="address"
|
||||
v-model="$v.form.formData.address.$model"
|
||||
:class="{
|
||||
'is-invalid': $v.form.formData.address.$invalid && $v.form.formData.address.$dirty,
|
||||
'is-valid': !$v.form.formData.address.$invalid && $v.form.formData.address.$dirty
|
||||
}"
|
||||
class="form-control"
|
||||
cols="30"
|
||||
rows="4"
|
||||
@blur="$v.form.formData.address.$touch()"/>
|
||||
<div class="invalid-feedback">
|
||||
Address Required
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="conversion-rate">
|
||||
<h5>
|
||||
Conversion: {{ rate }}
|
||||
</h5>
|
||||
</div>
|
||||
<div class="billing-detail-title">
|
||||
<h5>Billing Detail</h5>
|
||||
</div>
|
||||
<div class="billing-detail-lines">
|
||||
<table class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="align-middle">#</th>
|
||||
<th class="align-middle">Stock Code</th>
|
||||
<th class="align-middle">Description</th>
|
||||
<th class="text-center align-middle">Qty</th>
|
||||
<th class="text-center align-middle">Unit Price (RMB)</th>
|
||||
<th class="text-center align-middle">Unit Price (RM)</th>
|
||||
<th class="text-center align-middle">Total Amount (RM)</th>
|
||||
<th> </th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td> </td>
|
||||
<td>
|
||||
<div class="form-group">
|
||||
<input v-model="$v.form.addLine.stock_code.$model"
|
||||
:class="{
|
||||
'is-invalid': $v.form.addLine.stock_code.$invalid && $v.form.addLine.stock_code.$dirty,
|
||||
'is-valid': !$v.form.addLine.stock_code.$invalid && $v.form.addLine.stock_code.$dirty
|
||||
}"
|
||||
name="stockcode" type="text"
|
||||
class="form-control"
|
||||
@blur="$v.form.addLine.stock_code.$touch()">
|
||||
<div class="invalid-feedback">
|
||||
Stock Code Required
|
||||
<div class="conversion-rate">
|
||||
<h5>
|
||||
Conversion: {{ rate }}
|
||||
</h5>
|
||||
</div>
|
||||
<div class="billing-detail-title">
|
||||
<h5>Billing Detail</h5>
|
||||
</div>
|
||||
<div class="billing-detail-lines">
|
||||
<table class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="align-middle">#</th>
|
||||
<th class="align-middle">Stock Code</th>
|
||||
<th class="align-middle">Description</th>
|
||||
<th class="text-center align-middle">Qty</th>
|
||||
<th class="text-center align-middle">Unit Price (RMB)</th>
|
||||
<th class="text-center align-middle">Unit Price (RM)</th>
|
||||
<th class="text-center align-middle">Total Amount (RM)</th>
|
||||
<th> </th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td> </td>
|
||||
<td>
|
||||
<div class="form-group">
|
||||
<input v-model="$v.form.addLine.stock_code.$model"
|
||||
:class="{
|
||||
'is-invalid': $v.form.addLine.stock_code.$invalid && $v.form.addLine.stock_code.$dirty,
|
||||
'is-valid': !$v.form.addLine.stock_code.$invalid && $v.form.addLine.stock_code.$dirty
|
||||
}"
|
||||
name="stockcode" type="text"
|
||||
class="form-control"
|
||||
@blur="$v.form.addLine.stock_code.$touch()">
|
||||
<div class="invalid-feedback">
|
||||
Stock Code Required
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="form-group">
|
||||
<textarea id="description"
|
||||
v-model="$v.form.addLine.description.$model"
|
||||
:class="{
|
||||
'is-invalid': $v.form.addLine.description.$invalid && $v.form.addLine.description.$dirty,
|
||||
'is-valid': !$v.form.addLine.description.$invalid && $v.form.addLine.description.$dirty
|
||||
}"
|
||||
name="description" cols="20" rows="2"
|
||||
@blur="$v.form.addLine.description.$touch()"/>
|
||||
<div class="invalid-feedback">
|
||||
Description Required
|
||||
</td>
|
||||
<td>
|
||||
<div class="form-group">
|
||||
<textarea id="description"
|
||||
v-model="$v.form.addLine.description.$model"
|
||||
:class="{
|
||||
'is-invalid': $v.form.addLine.description.$invalid && $v.form.addLine.description.$dirty,
|
||||
'is-valid': !$v.form.addLine.description.$invalid && $v.form.addLine.description.$dirty
|
||||
}"
|
||||
name="description" cols="20" rows="2"
|
||||
@blur="$v.form.addLine.description.$touch()"/>
|
||||
<div class="invalid-feedback">
|
||||
Description Required
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="form-group">
|
||||
<input id="quantity"
|
||||
v-model="$v.form.addLine.quantity.$model"
|
||||
:class="{
|
||||
'is-invalid': $v.form.addLine.quantity.$invalid && $v.form.addLine.quantity.$dirty,
|
||||
'is-valid': !$v.form.addLine.quantity.$invalid && $v.form.addLine.quantity.$dirty
|
||||
}"
|
||||
type="number"
|
||||
min="1"
|
||||
class="form-control"
|
||||
name="quantity"
|
||||
@change="onUnitPriceRM()"
|
||||
@blur="$v.form.addLine.quantity.$touch()">
|
||||
<div class="invalid-feedback">
|
||||
Quantity Required
|
||||
</td>
|
||||
<td>
|
||||
<div class="form-group">
|
||||
<input id="quantity"
|
||||
v-model="$v.form.addLine.quantity.$model"
|
||||
:class="{
|
||||
'is-invalid': $v.form.addLine.quantity.$invalid && $v.form.addLine.quantity.$dirty,
|
||||
'is-valid': !$v.form.addLine.quantity.$invalid && $v.form.addLine.quantity.$dirty
|
||||
}"
|
||||
type="number"
|
||||
min="1"
|
||||
class="form-control"
|
||||
name="quantity"
|
||||
@change="onUnitPriceRM()"
|
||||
@blur="$v.form.addLine.quantity.$touch()">
|
||||
<div class="invalid-feedback">
|
||||
Quantity Required
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="form-group">
|
||||
<input id="rmb-unit-price"
|
||||
v-model="$v.form.addLine.unit_price_rmb.$model"
|
||||
:class="{
|
||||
'is-invalid': $v.form.addLine.unit_price_rmb.$invalid && $v.form.addLine.unit_price_rmb.$dirty,
|
||||
'is-valid': !$v.form.addLine.unit_price_rmb.$invalid && $v.form.addLine.unit_price_rmb.$dirty
|
||||
}"
|
||||
type="number"
|
||||
min="0"
|
||||
name="rmb-unit-price"
|
||||
class="form-control"
|
||||
@change="onUnitPriceRMB()"
|
||||
@blur="$v.form.addLine.unit_price_rmb.$touch()">
|
||||
<div class="invalid-feedback">
|
||||
Unit Price Required
|
||||
</td>
|
||||
<td>
|
||||
<div class="form-group">
|
||||
<input id="rmb-unit-price"
|
||||
v-model="$v.form.addLine.unit_price_rmb.$model"
|
||||
:class="{
|
||||
'is-invalid': $v.form.addLine.unit_price_rmb.$invalid && $v.form.addLine.unit_price_rmb.$dirty,
|
||||
'is-valid': !$v.form.addLine.unit_price_rmb.$invalid && $v.form.addLine.unit_price_rmb.$dirty
|
||||
}"
|
||||
type="number"
|
||||
min="0"
|
||||
name="rmb-unit-price"
|
||||
class="form-control"
|
||||
@change="onUnitPriceRMB()"
|
||||
@blur="$v.form.addLine.unit_price_rmb.$touch()">
|
||||
<div class="invalid-feedback">
|
||||
Unit Price Required
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="form-group">
|
||||
<input id="rm-unit-price"
|
||||
v-model="$v.form.addLine.unit_price_rm.$model"
|
||||
:class="{
|
||||
'is-invalid': $v.form.addLine.unit_price_rm.$invalid && $v.form.addLine.unit_price_rm.$dirty,
|
||||
'is-valid': !$v.form.addLine.unit_price_rm.$invalid && $v.form.addLine.unit_price_rm.$dirty
|
||||
}"
|
||||
type="number"
|
||||
min="0"
|
||||
name="rm-unit-price"
|
||||
class="form-control"
|
||||
@change="onUnitPriceRM()"
|
||||
@blur="$v.form.addLine.unit_price_rm.$touch()">
|
||||
<div class="invalid-feedback">
|
||||
Unit Price Required
|
||||
</td>
|
||||
<td>
|
||||
<div class="form-group">
|
||||
<input id="rm-unit-price"
|
||||
v-model="$v.form.addLine.unit_price_rm.$model"
|
||||
:class="{
|
||||
'is-invalid': $v.form.addLine.unit_price_rm.$invalid && $v.form.addLine.unit_price_rm.$dirty,
|
||||
'is-valid': !$v.form.addLine.unit_price_rm.$invalid && $v.form.addLine.unit_price_rm.$dirty
|
||||
}"
|
||||
type="number"
|
||||
min="0"
|
||||
name="rm-unit-price"
|
||||
class="form-control"
|
||||
@change="onUnitPriceRM()"
|
||||
@blur="$v.form.addLine.unit_price_rm.$touch()">
|
||||
<div class="invalid-feedback">
|
||||
Unit Price Required
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="form-group">
|
||||
<input id="total"
|
||||
v-model="$v.form.addLine.total.$model"
|
||||
type="number"
|
||||
min="0"
|
||||
name="subtotal"
|
||||
class="form-control"
|
||||
disabled>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<button class="btn btn-success" type="button" @click="onAddLine()">
|
||||
Add
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr v-for="(line, index) in form.formData.lines" :key="index">
|
||||
<td class="line-number text-center align-middle">
|
||||
{{ index + 1 }}
|
||||
</td>
|
||||
<td class="stock-code text-center align-middle">
|
||||
{{ line.stock_code }}
|
||||
</td>
|
||||
<td class="description align-middle">
|
||||
{{ line.description }}
|
||||
</td>
|
||||
<td class="quantity text-center align-middle">
|
||||
{{ line.quantity }}
|
||||
</td>
|
||||
<td class="unit-price-rmb text-center align-middle">
|
||||
{{ line.unit_price_rmb }}
|
||||
</td>
|
||||
<td class="unit-price-rm text-center align-middle">
|
||||
{{ line.unit_price_rm }}
|
||||
</td>
|
||||
<td class="line-subtotal text-center align-middle">
|
||||
{{ line.total }}
|
||||
</td>
|
||||
<td>
|
||||
<button class="btn btn-danger" @click="onRemoveLine(index)">
|
||||
Remove
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tfoot>
|
||||
<tr class="subtotal-line">
|
||||
<td colspan="5"/>
|
||||
<td class="subtotal-title text-center">
|
||||
Subtotal
|
||||
</td>
|
||||
<td class="subtotal text-center">
|
||||
{{ subtotal }}
|
||||
</td>
|
||||
<td>
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
<tr v-if="tax > 0" class="gst-line">
|
||||
<td colspan="5"/>
|
||||
<td class="gst-title text-center">
|
||||
GST
|
||||
</td>
|
||||
<td class="gst-total text-center">
|
||||
{{ tax }}
|
||||
</td>
|
||||
<td>
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="total-line">
|
||||
<td colspan="5"/>
|
||||
<td class="total-title text-center">
|
||||
Total
|
||||
</td>
|
||||
<td class="total text-center">
|
||||
{{ total }}
|
||||
</td>
|
||||
<td>
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="5"> </td>
|
||||
<td colspan="2">
|
||||
<button class="btn btn-success btn-block">
|
||||
Create PO
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="form-group">
|
||||
<input id="total"
|
||||
v-model="$v.form.addLine.total.$model"
|
||||
type="number"
|
||||
min="0"
|
||||
name="subtotal"
|
||||
class="form-control"
|
||||
disabled>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<button class="btn btn-success" type="button" @click="onAddLine()">
|
||||
Add
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr v-for="(line, index) in form.formData.lines" :key="index">
|
||||
<td class="line-number text-center align-middle">
|
||||
{{ index + 1 }}
|
||||
</td>
|
||||
<td class="stock-code text-center align-middle">
|
||||
{{ line.stock_code }}
|
||||
</td>
|
||||
<td class="description align-middle">
|
||||
{{ line.description }}
|
||||
</td>
|
||||
<td class="quantity text-center align-middle">
|
||||
{{ line.quantity }}
|
||||
</td>
|
||||
<td class="unit-price-rmb text-center align-middle">
|
||||
{{ line.unit_price_rmb }}
|
||||
</td>
|
||||
<td class="unit-price-rm text-center align-middle">
|
||||
{{ line.unit_price_rm }}
|
||||
</td>
|
||||
<td class="line-subtotal text-center align-middle">
|
||||
{{ line.total }}
|
||||
</td>
|
||||
<td>
|
||||
<button class="btn btn-danger" @click="onRemoveLine(index)">
|
||||
Remove
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tfoot>
|
||||
<tr class="subtotal-line">
|
||||
<td colspan="5"/>
|
||||
<td class="subtotal-title text-center">
|
||||
Subtotal
|
||||
</td>
|
||||
<td class="subtotal text-center">
|
||||
{{ subtotal }}
|
||||
</td>
|
||||
<td>
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
<tr v-if="tax > 0" class="gst-line">
|
||||
<td colspan="5"/>
|
||||
<td class="gst-title text-center">
|
||||
GST
|
||||
</td>
|
||||
<td class="gst-total text-center">
|
||||
{{ tax }}
|
||||
</td>
|
||||
<td>
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="total-line">
|
||||
<td colspan="5"/>
|
||||
<td class="total-title text-center">
|
||||
Total
|
||||
</td>
|
||||
<td class="total text-center">
|
||||
{{ total }}
|
||||
</td>
|
||||
<td>
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="5"> </td>
|
||||
<td colspan="2">
|
||||
<button class="btn btn-success btn-block" type="submit">
|
||||
Create PO
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
</div>
|
||||
</form>
|
||||
</div> <!-- invoice-container -->
|
||||
</div>
|
||||
</template>
|
||||
<style>
|
||||
@@ -336,7 +338,8 @@
|
||||
<script>
|
||||
import Vue from 'vue'
|
||||
import Vuelidate from 'vuelidate'
|
||||
import { required, numeric, or, decimal } from 'vuelidate/lib/validators'
|
||||
import { required, numeric, decimal } from 'vuelidate/lib/validators'
|
||||
import axios from 'axios'
|
||||
Vue.use(Vuelidate)
|
||||
|
||||
export default {
|
||||
@@ -433,15 +436,15 @@ export default {
|
||||
},
|
||||
unit_price_rmb: {
|
||||
required,
|
||||
mycustomval: or(numeric, decimal)
|
||||
decimal
|
||||
},
|
||||
unit_price_rm: {
|
||||
required,
|
||||
mycustomval: or(numeric, decimal)
|
||||
decimal
|
||||
},
|
||||
total: {
|
||||
required,
|
||||
mycustomval: or(numeric, decimal)
|
||||
decimal
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -469,7 +472,6 @@ export default {
|
||||
this.service_charge = service_charge
|
||||
this.amount = amount
|
||||
this.rate = rate
|
||||
|
||||
}
|
||||
},
|
||||
created: {
|
||||
@@ -478,7 +480,6 @@ export default {
|
||||
methods: {
|
||||
onAddLine: function () {
|
||||
if (this.$v.form.addLine.$invalid) {
|
||||
console.log('invalid', this.$v.form.addLine.$invalid)
|
||||
this.$v.form.addLine.$touch()
|
||||
return
|
||||
}
|
||||
@@ -523,13 +524,39 @@ export default {
|
||||
},
|
||||
clearAddLine: function () {
|
||||
this.form.addLine.order = null
|
||||
this.formaddLine.description = null
|
||||
this.form.addLine.description = null
|
||||
this.form.addLine.quantity = null
|
||||
this.form.addLine.unit_price_rmb = null
|
||||
this.form.addLine.unit_price_rm = null
|
||||
this.form.addLine.stock_code = null
|
||||
this.form.addLine.total = null
|
||||
this.$v.form.addLine.$reset()
|
||||
},
|
||||
submitForm () {
|
||||
if (this.$v.form.formData.$invalid) {
|
||||
this.$v.form.formData.$touch()
|
||||
console.log('form not valid')
|
||||
return
|
||||
}
|
||||
|
||||
if (this.amount != this.total) {
|
||||
console.log('amount not matched')
|
||||
alert(`PO Total RM${this.total} Does Not Match Expected RM${this.amount}`)
|
||||
return
|
||||
}
|
||||
|
||||
const url = '/api/invoice/' + this.booking_id
|
||||
|
||||
// create order in line
|
||||
this.form.formData.lines
|
||||
.forEach((el, i) => {
|
||||
this.form.formData.lines[i].order = (i + 1)
|
||||
})
|
||||
|
||||
axios
|
||||
.post(url, this.form.formData)
|
||||
.then(resp => console.log(resp))
|
||||
.catch(err => console.error(err))
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user