first commit + add fe component vue accone
This commit is contained in:
487
test/vuex/acc-one-faktur-v4/components/dialog.vue
Normal file
487
test/vuex/acc-one-faktur-v4/components/dialog.vue
Normal file
@@ -0,0 +1,487 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user