487 lines
20 KiB
Vue
487 lines
20 KiB
Vue
<template>
|
|
<v-dialog v-model="dialogCreate" persistent max-width="85%">
|
|
<v-card>
|
|
<v-card-title class="headline grey lighten-2" primary-title>
|
|
FORM FAKTUR PO
|
|
</v-card-title>
|
|
<v-card-text class="pt-0 pb-0 mt-4">
|
|
<v-form ref="formCreate" v-model="validationForm" lazy-validation>
|
|
<v-layout row wrap>
|
|
<v-flex pr-2 xs2>
|
|
<v-menu
|
|
v-model="menuDateForm"
|
|
transition="scale-transition"
|
|
:close-on-content-click="false"
|
|
:nudge-right="40" lazy
|
|
full-width offset-y
|
|
max-width="290px" min-width="290px"
|
|
>
|
|
<template v-slot:activator="{on}">
|
|
<v-text-field
|
|
label="Tanggal Faktur" readonly
|
|
:value="DateFormatted" v-on="on"
|
|
outline hide-details
|
|
></v-text-field>
|
|
</template>
|
|
<v-date-picker
|
|
no-title v-model="form_date"
|
|
@input="menuDateForm = false"
|
|
></v-date-picker>
|
|
</v-menu>
|
|
</v-flex>
|
|
<v-flex pr-2 xs2>
|
|
<v-menu
|
|
v-model="menuDueDateForm"
|
|
transition="scale-transition"
|
|
:close-on-content-click="false"
|
|
:nudge-right="40" lazy
|
|
full-width offset-y
|
|
max-width="290px" min-width="290px"
|
|
>
|
|
<template v-slot:activator="{on}">
|
|
<v-text-field
|
|
label="Tanggal Jatuh Tempo" readonly
|
|
:value="DueDateFormatted" v-on="on"
|
|
hide-details outline
|
|
></v-text-field>
|
|
</template>
|
|
<v-date-picker
|
|
no-title v-model="form_duedate"
|
|
@input="menuDueDateForm = false"
|
|
></v-date-picker>
|
|
</v-menu>
|
|
</v-flex>
|
|
<v-flex pr-2 xs2>
|
|
<v-autocomplete readonly
|
|
v-model="form_supplier"
|
|
label="Supplier" menu-icon="mdi-chevron-down"
|
|
item-text="SupplierName"
|
|
:items="list_supplier.records"
|
|
:rules="rules_text" outline
|
|
return-object required
|
|
></v-autocomplete>
|
|
</v-flex>
|
|
<v-flex pr-2 xs2>
|
|
<v-text-field readonly
|
|
v-model="form_refnumber"
|
|
label="Nomor Referensi"
|
|
:rules="rules_text"
|
|
outline required
|
|
></v-text-field>
|
|
</v-flex>
|
|
<v-flex pr-2 xs2>
|
|
<v-text-field
|
|
v-model="form_tax_invoicenum"
|
|
label="Nomor Faktur Pajak"
|
|
:rules="rules_text"
|
|
required outline
|
|
></v-text-field>
|
|
</v-flex>
|
|
<v-flex xs2>
|
|
<v-menu
|
|
v-model="menuTaxInvoiceDateForm"
|
|
transition="scale-transition"
|
|
:close-on-content-click="false"
|
|
:nudge-right="40" lazy
|
|
full-width offset-y
|
|
max-width="290px" min-width="290px"
|
|
>
|
|
<template v-slot:activator="{on}">
|
|
<v-text-field
|
|
label="Tanggal Faktur Pajak" readonly
|
|
:value="TaxInvDateFormatted" v-on="on"
|
|
outline hide-details
|
|
></v-text-field>
|
|
</template>
|
|
<v-date-picker
|
|
no-title v-model="form_tax_invoicedate"
|
|
@input="menuTaxInvoiceDateForm = false"
|
|
></v-date-picker>
|
|
</v-menu>
|
|
</v-flex>
|
|
</v-layout>
|
|
<v-layout row wrap>
|
|
<v-flex pr-2 xs2>
|
|
<v-autocomplete
|
|
v-model="form_disc_type"
|
|
label="Tipe Diskon" menu-icon="mdi-chevron-down"
|
|
item-text="SupplierName"
|
|
:items="['Percentage', 'Absolute']"
|
|
outline required :rules="rules_text"
|
|
></v-autocomplete>
|
|
</v-flex>
|
|
<v-flex pr-2 xs2>
|
|
<v-text-field
|
|
v-if="this.form_disc_type == 'Percentage'"
|
|
v-model="form_disc_percent"
|
|
label="Diskon (%)" suffix="%"
|
|
:rules="rules_number"
|
|
outline type="number"
|
|
></v-text-field>
|
|
<v-text-field
|
|
v-else
|
|
v-model="form_disc_amount"
|
|
label="Nilai diskon"
|
|
:rules="rules_number"
|
|
outline type="number"
|
|
></v-text-field>
|
|
</v-flex>
|
|
<v-flex pr-2 xs2>
|
|
<v-text-field
|
|
v-model="form_tax_percent_pph"
|
|
label="Pajak Penghasilan (%)" suffix="%"
|
|
:rules="rules_number"
|
|
outline type="number"
|
|
></v-text-field>
|
|
</v-flex>
|
|
<v-flex pr-2 xs2>
|
|
<v-text-field
|
|
v-model="form_tax_percent_ppn"
|
|
label="Pajak Pendapatan (%)" suffix="%"
|
|
:rules="rules_number"
|
|
outline type="number"
|
|
></v-text-field>
|
|
</v-flex>
|
|
<v-flex pr-2 xs2>
|
|
<v-text-field
|
|
v-model="form_shipping_cost"
|
|
label="Biaya Pengiriman"
|
|
:rules="rules_number"
|
|
outline type="number"
|
|
></v-text-field>
|
|
</v-flex>
|
|
<v-flex xs2>
|
|
<v-text-field
|
|
v-model="form_adjust_amount"
|
|
label="Jumlah Penyesuaian"
|
|
:rules="rules_number"
|
|
outline type="number"
|
|
></v-text-field>
|
|
</v-flex>
|
|
<v-flex xs12>
|
|
<v-textarea
|
|
label="Catatan Penyesuaian"
|
|
v-model="form_adjust_note"
|
|
outline rows="2"
|
|
></v-textarea>
|
|
</v-flex>
|
|
</v-layout>
|
|
<v-layout row wrap>
|
|
<v-flex pr-2 xs3>
|
|
<v-autocomplete
|
|
v-model="form_po"
|
|
label="Purchase Order" menu-icon="mdi-chevron-down"
|
|
item-text="PurchaseOrderNumber"
|
|
:items="list_po.records" return-object
|
|
outline required :rules="rules_text"
|
|
></v-autocomplete>
|
|
</v-flex>
|
|
<v-flex pr-2 xs2>
|
|
<v-text-field
|
|
v-model="form_grandtotal"
|
|
label="Jumlah total"
|
|
:rules="rules_number"
|
|
type="number" required outline
|
|
></v-text-field>
|
|
</v-flex>
|
|
<v-flex pr-2 xs2>
|
|
<v-text-field
|
|
v-model="form_paidamount"
|
|
label="Jumlah dibayar"
|
|
:rules="rules_number"
|
|
type="number" required outline
|
|
></v-text-field>
|
|
</v-flex>
|
|
<v-flex pr-2 xs2>
|
|
<v-menu
|
|
v-model="menuReceivedDateForm"
|
|
transition="scale-transition"
|
|
:close-on-content-click="false"
|
|
:nudge-right="40" lazy
|
|
full-width offset-y
|
|
max-width="290px" min-width="290px"
|
|
>
|
|
<template v-slot:activator="{on}">
|
|
<v-text-field
|
|
label="Tanggal Diterima" readonly outline
|
|
:value="ReceivedDateFormatted" v-on="on"
|
|
></v-text-field>
|
|
</template>
|
|
<v-date-picker
|
|
no-title v-model="form_receiveddate"
|
|
@input="menuReceivedDateForm = false"
|
|
></v-date-picker>
|
|
</v-menu>
|
|
</v-flex>
|
|
<v-flex xs3>
|
|
<v-autocomplete
|
|
v-model="form_receivedby"
|
|
label="Diterima Oleh" menu-icon="mdi-chevron-down"
|
|
item-text="M_StaffName"
|
|
:items="list_staff.records"
|
|
:rules="rules_text" outline
|
|
return-object required
|
|
></v-autocomplete>
|
|
</v-flex>
|
|
<v-flex xs12>
|
|
<v-textarea
|
|
label="Catatan Faktur"
|
|
v-model="form_note"
|
|
outline rows="2"
|
|
></v-textarea>
|
|
</v-flex>
|
|
</v-layout>
|
|
</v-form>
|
|
<v-flex xs2>
|
|
<v-btn
|
|
block color="info"
|
|
:disabled="isObjectEmpty(this.form_supplier)"
|
|
@click="dialogAddItem()"
|
|
>
|
|
TAMBAHKAN ITEM
|
|
</v-btn>
|
|
</v-flex>
|
|
</v-card-text>
|
|
<v-card-actions>
|
|
<v-spacer></v-spacer>
|
|
<v-btn color="error" flat @click="closeDialog()">
|
|
Tutup
|
|
</v-btn>
|
|
<v-btn color="primary" dark @click="">
|
|
Simpan
|
|
</v-btn>
|
|
</v-card-actions>
|
|
</v-card>
|
|
</v-dialog>
|
|
</template>
|
|
|
|
<script>
|
|
module.exports = {
|
|
components: {},
|
|
mounted() {
|
|
|
|
},
|
|
data() {
|
|
return {
|
|
validationForm: false,
|
|
menuDateForm: false,
|
|
menuDueDateForm: false,
|
|
menuTaxInvoiceDateForm: false,
|
|
menuReceivedDateForm: false,
|
|
rules_text: [(v) => !!v || "Tidak boleh kosong"],
|
|
rules_number: [(v) => !isNaN(v) || "Tidak boleh kosong"],
|
|
}
|
|
},
|
|
computed: {
|
|
dialogCreate: {
|
|
get() {
|
|
return this.$store.state.form.opendialog;
|
|
},
|
|
set(val) {
|
|
this.$store.commit("form/update_opendialog", val);
|
|
}
|
|
},
|
|
form_date: {
|
|
get() {
|
|
return this.$store.state.form.form_date;
|
|
},
|
|
set(val) {
|
|
this.$store.commit("form/update_form_date", val);
|
|
}
|
|
},
|
|
DateFormatted() {
|
|
return this.formatDate(this.form_date);
|
|
},
|
|
form_duedate: {
|
|
get() {
|
|
return this.$store.state.form.form_duedate
|
|
},
|
|
set(val) {
|
|
this.$store.commit("form/update_form_duedate", val)
|
|
}
|
|
},
|
|
DueDateFormatted() {
|
|
return this.formatDate(this.form_duedate)
|
|
},
|
|
form_supplier: {
|
|
get() {
|
|
return this.$store.state.form.form_supplier;
|
|
},
|
|
set(val) {
|
|
this.$store.commit("form/update_form_supplier", val);
|
|
}
|
|
},
|
|
form_refnumber: {
|
|
get() {
|
|
return this.$store.state.form.form_refnumber;
|
|
},
|
|
set(val) {
|
|
this.$store.commit("form/update_form_refnumber", val);
|
|
}
|
|
},
|
|
form_tax_invoicenum: {
|
|
get() {
|
|
return this.$store.state.form.form_tax_invoicenum;
|
|
},
|
|
set(val) {
|
|
this.$store.commit("form/update_form_tax_invoicenum", val);
|
|
}
|
|
},
|
|
form_tax_invoicedate: {
|
|
get() {
|
|
return this.$store.state.form.form_tax_invoicedate;
|
|
},
|
|
set(val) {
|
|
this.$store.commit("form/update_form_tax_invoicedate", val);
|
|
}
|
|
},
|
|
TaxInvDateFormatted() {
|
|
return this.formatDate(this.form_tax_invoicedate);
|
|
},
|
|
form_disc_type: {
|
|
get() {
|
|
return this.$store.state.form.form_disc_type;
|
|
},
|
|
set(val) {
|
|
this.$store.commit("form/update_form_disc_type", val);
|
|
}
|
|
},
|
|
form_disc_percent: {
|
|
get() {
|
|
return this.$store.state.form.form_disc_percent;
|
|
},
|
|
set(val) {
|
|
this.$store.commit("form/update_form_disc_percent", val);
|
|
}
|
|
},
|
|
form_disc_amount: {
|
|
get() {
|
|
return this.$store.state.form.form_disc_amount;
|
|
},
|
|
set(val) {
|
|
this.$store.commit("form/update_form_disc_amount", val);
|
|
}
|
|
},
|
|
form_tax_percent_pph: {
|
|
get() {
|
|
return this.$store.state.form.form_tax_percent_pph;
|
|
},
|
|
set(val) {
|
|
this.$store.commit("form/update_form_tax_percent_pph", val);
|
|
}
|
|
},
|
|
form_tax_percent_ppn: {
|
|
get() {
|
|
return this.$store.state.form.form_tax_percent_ppn;
|
|
},
|
|
set(val) {
|
|
this.$store.commit("form/update_form_tax_percent_ppn", val);
|
|
}
|
|
},
|
|
form_shipping_cost: {
|
|
get() {
|
|
return this.$store.state.form.form_shipping_cost;
|
|
},
|
|
set(val) {
|
|
this.$store.commit("form/update_form_shipping_cost", val);
|
|
}
|
|
},
|
|
form_adjust_amount: {
|
|
get() {
|
|
return this.$store.state.form.form_adjust_amount;
|
|
},
|
|
set(val) {
|
|
this.$store.commit("form/update_form_adjust_amount", val);
|
|
}
|
|
},
|
|
form_adjust_note: {
|
|
get() {
|
|
return this.$store.state.form.form_adjust_note;
|
|
},
|
|
set(val) {
|
|
this.$store.commit("form/update_form_adjust_note", val);
|
|
}
|
|
},
|
|
form_po: {
|
|
get() {
|
|
return this.$store.state.form.form_po;
|
|
},
|
|
set(val) {
|
|
this.$store.commit("form/update_form_po", val)
|
|
}
|
|
},
|
|
form_grandtotal: {
|
|
get() {
|
|
return this.$store.state.form.form_grandtotal;
|
|
},
|
|
set(val) {
|
|
this.$store.commit("form/update_form_grandtotal", val);
|
|
}
|
|
},
|
|
form_paidamount: {
|
|
get() {
|
|
return this.$store.state.form.form_paidamount;
|
|
},
|
|
set(val) {
|
|
this.$store.commit("form/update_form_paidamount", val);
|
|
}
|
|
},
|
|
form_note: {
|
|
get() {
|
|
return this.$store.state.form.form_note;
|
|
},
|
|
set(val) {
|
|
this.$store.commit("form/update_form_note", val);
|
|
}
|
|
},
|
|
form_receiveddate: {
|
|
get() {
|
|
return this.$store.state.form.form_receiveddate;
|
|
},
|
|
set(val) {
|
|
this.$store.commit("form/update_form_receiveddate", val);
|
|
}
|
|
},
|
|
ReceivedDateFormatted() {
|
|
return this.formatDate(this.form_receiveddate);
|
|
},
|
|
form_receivedby: {
|
|
get() {
|
|
return this.$store.state.form.form_receivedby;
|
|
},
|
|
set(val) {
|
|
this.$store.commit("form/update_form_receivedby", val);
|
|
}
|
|
},
|
|
list_supplier() {
|
|
return this.$store.state.data.list_supplier;
|
|
},
|
|
list_staff() {
|
|
return this.$store.state.data.list_staff;
|
|
},
|
|
list_po() {
|
|
return this.$store.state.data.list_po;
|
|
}
|
|
},
|
|
methods: {
|
|
closeDialog() {
|
|
this.dialogCreate = false
|
|
},
|
|
formatDate(date) {
|
|
if (!date) return null;
|
|
|
|
const [year, month, day] = date.split("-");
|
|
return `${day}-${month}-${year}`;
|
|
},
|
|
dialogAddItem() {
|
|
|
|
},
|
|
isObjectEmpty(obj) {
|
|
return Object.keys(obj).length === 0 && obj.constructor === Object;
|
|
}
|
|
},
|
|
watch: {
|
|
|
|
}
|
|
}
|
|
</script> |