195 lines
8.6 KiB
Vue
195 lines
8.6 KiB
Vue
<template>
|
|
<div>
|
|
<v-layout row wrap>
|
|
<v-flex xs3 pa-1>
|
|
<v-text-field v-model="form_kontrak.nama_kontrak" hide-details outline label="Nama Kontrak"
|
|
placeholder="masukan nama kontrak" :readonly="viewonlymode"></v-text-field>
|
|
</v-flex>
|
|
<v-flex xs3 pa-1>
|
|
<v-menu v-model="menuKontrakDate" offset-y lazy min-width="290px" transition="scale-transition"
|
|
max-width="290px" full-width :nudge-right="40" :close-on-content-click="false">
|
|
<template v-slot:activator="{ on }">
|
|
<v-text-field v-model="formattedDateKontrak" v-on="on" hide-details readonly outline
|
|
label="Tanggal Kontrak"></v-text-field>
|
|
</template>
|
|
<v-date-picker v-model="form_kontrak.tanggal_kontrak" no-title
|
|
@input="menuKontrakDate = false" :readonly="viewonlymode"></v-date-picker>
|
|
</v-menu>
|
|
</v-flex>
|
|
<v-flex xs3 pa-1>
|
|
<v-menu v-model="menuKontrakStartdate" offset-y lazy min-width="290px" transition="scale-transition"
|
|
max-width="290px" full-width :nudge-right="40" :close-on-content-click="false">
|
|
<template v-slot:activator="{ on }">
|
|
<v-text-field v-model="formattedStartdateKontrak" outline v-on="on" hide-details
|
|
label="Tanggal Mulai Kontrak" readonly></v-text-field>
|
|
</template>
|
|
<v-date-picker v-model="form_kontrak.tanggalAwal_kontrak" no-title
|
|
@input="menuKontrakStartdate = false" :readonly="viewonlymode"></v-date-picker>
|
|
</v-menu>
|
|
</v-flex>
|
|
<v-flex xs3 pa-1>
|
|
<v-menu v-model="menuKontrakEnddate" offset-y lazy min-width="290px" transition="scale-transition"
|
|
max-width="290px" full-width :nudge-right="40" :close-on-content-click="false">
|
|
<template v-slot:activator="{ on }">
|
|
<v-text-field v-model="formattedEnddateKontrak" outline v-on="on" hide-details
|
|
label="Tanggal Akhir Kontrak" readonly></v-text-field>
|
|
</template>
|
|
<v-date-picker v-model="form_kontrak.tanggalAkhir_kontrak" no-title
|
|
@input="menuKontrakEnddate = false" :readonly="viewonlymode"></v-date-picker>
|
|
</v-menu>
|
|
</v-flex>
|
|
</v-layout>
|
|
|
|
<v-layout row wrap>
|
|
<v-flex xs2 pa-1>
|
|
<v-text-field v-model="form_kontrak.durasi_cicilan" hide-details outline placeholder="1"
|
|
label="Durasi Kontrak (Bulan)" readonly></v-text-field>
|
|
</v-flex>
|
|
<v-flex xs2 pa-1>
|
|
<v-text-field v-model="form_kontrak.jumlah_cicilan" hide-details placeholder="1" outline
|
|
label="Jumlah Cicilan" :readonly="viewonlymode"></v-text-field>
|
|
</v-flex>
|
|
<v-flex xs2 pa-1>
|
|
<v-text-field v-model="form_kontrak.tanggalBayar_cicilan" hide-details placeholder="1" outline
|
|
label="Tanggal Bayar Cicilan" :readonly="viewonlymode"></v-text-field>
|
|
</v-flex>
|
|
<v-flex xs2 pa-1>
|
|
<v-text-field v-model="form_kontrak.besarNilai_cicilan"
|
|
placeholder="0" prefix="Rp." outline hide-details :readonly="viewonlymode"
|
|
@blur="handleBlur(form_kontrak, 'cicil')" label="Besar Bayar Cicilan"
|
|
@focus="handleFocus(form_kontrak, 'cicil')"></v-text-field>
|
|
</v-flex>
|
|
<v-flex xs1 pa-1>
|
|
<v-autocomplete :items="['nominal', 'percent']" label="Tipe Nilai" :readonly="viewonlymode"
|
|
v-model="form_kontrak.type_downpayment" hide-details @input="changeTypeAmount('DP')"
|
|
@change="$store.dispatch('orderAsset/recalculateOrderSummary')" outline></v-autocomplete>
|
|
</v-flex>
|
|
<v-flex xs3 pa-1>
|
|
<v-text-field v-if="form_kontrak.type_downpayment == 'percent'" label="Jumlah Uang Muka" hide-details
|
|
v-model="form_kontrak.besarNilai_downpayment" placeholder="0" suffix="%" outline :readonly="viewonlymode"
|
|
@input="$store.dispatch('orderAsset/recalculateOrderSummary')"></v-text-field>
|
|
<v-text-field v-else label="Jumlah Uang Muka" hide-details placeholder="0"
|
|
v-model="form_kontrak.besarNilai_downpayment" prefix="Rp." outline
|
|
@input="$store.dispatch('orderAsset/recalculateOrderSummary')"
|
|
@blur="handleBlur(form_kontrak, 'dp')" :readonly="viewonlymode"
|
|
@focus="handleFocus(form_kontrak, 'dp')"></v-text-field>
|
|
</v-flex>
|
|
</v-layout>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
module.exports = {
|
|
data() {
|
|
return {
|
|
menuKontrakDate: false,
|
|
menuKontrakStartdate: false,
|
|
menuKontrakEnddate: false,
|
|
};
|
|
},
|
|
computed: {
|
|
form_kontrak: {
|
|
get() {
|
|
return this.$store.state.kontrakAsset.form_kontrak
|
|
},
|
|
set(val) {
|
|
this.$store.commit("kontrakAsset/update_form_kontrak", val);
|
|
}
|
|
},
|
|
formattedDateKontrak() {
|
|
return this.formatDate(this.form_kontrak.tanggal_kontrak);
|
|
},
|
|
formattedStartdateKontrak() {
|
|
return this.formatDate(this.form_kontrak.tanggalAwal_kontrak);
|
|
},
|
|
formattedEnddateKontrak() {
|
|
return this.formatDate(this.form_kontrak.tanggalAkhir_kontrak);
|
|
},
|
|
viewonlymode() {
|
|
return this.$store.state.common.viewonlymode;
|
|
}
|
|
},
|
|
methods: {
|
|
formatDate(date) {
|
|
if (!date) return null;
|
|
const [year, month, day] = date.split('-');
|
|
return `${day}-${month}-${year}`;
|
|
},
|
|
countMonths(startdate, enddate) {
|
|
const start = new Date(startdate);
|
|
const end = new Date(enddate);
|
|
|
|
let months = (end.getFullYear() - start.getFullYear()) * 12 + (end.getMonth() - start.getMonth());
|
|
if (end.getDate() > start.getDate()) {
|
|
months += 1;
|
|
}
|
|
|
|
return Math.max(months, 1);
|
|
},
|
|
updateDurasiCicilan() {
|
|
const form = this.form_kontrak;
|
|
if (!form.tanggalAwal_kontrak || !form.tanggalAkhir_kontrak) return;
|
|
|
|
form.durasi_cicilan = this.countMonths(
|
|
form.tanggalAwal_kontrak,
|
|
form.tanggalAkhir_kontrak
|
|
);
|
|
|
|
this.form_kontrak = form;
|
|
},
|
|
changeTypeAmount(name) {
|
|
let form = this.form_kontrak;
|
|
if (name == 'DP') {
|
|
form.besarNilai_downpayment = 0;
|
|
}
|
|
|
|
this.$store.dispatch('orderAsset/recalculateOrderSummary');
|
|
},
|
|
formatCurrency(value) {
|
|
const num = parseFloat(value);
|
|
if (isNaN(num)) return 0;
|
|
return num.toFixed(2).replace('.', ',').replace(/\B(?=(\d{3})+(?!\d))/g, ".");
|
|
},
|
|
parseCurrency(value) {
|
|
let cleanValue = String(value).replace(/\./g, '');
|
|
cleanValue = cleanValue.replace(',', '.');
|
|
return parseFloat(cleanValue) || 0;
|
|
},
|
|
handleFocus(item, field) {
|
|
if (field == 'dp') {
|
|
const currprice = item.besarNilai_downpayment;
|
|
const parsedprice = this.parseCurrency(currprice);
|
|
item.besarNilai_downpayment = parsedprice;
|
|
}
|
|
|
|
if (field == 'cicil') {
|
|
const currdisc = item.besarNilai_cicilan;
|
|
const parseddisc = this.parseCurrency(currdisc);
|
|
item.besarNilai_cicilan = parseddisc;
|
|
}
|
|
},
|
|
handleBlur(item, field) {
|
|
if (field == 'dp') {
|
|
const currprice = item.besarNilai_downpayment;
|
|
const parsedprice = this.parseCurrency(currprice);
|
|
item.besarNilai_downpayment = this.formatCurrency(parsedprice);
|
|
}
|
|
|
|
if (field == 'cicil') {
|
|
const currdisc = item.besarNilai_cicilan;
|
|
const parseddisc = this.parseCurrency(currdisc);
|
|
item.besarNilai_cicilan = this.formatCurrency(parseddisc);
|
|
}
|
|
},
|
|
},
|
|
watch: {
|
|
"form_kontrak.tanggalAwal_kontrak"() {
|
|
this.updateDurasiCicilan();
|
|
},
|
|
"form_kontrak.tanggalAkhir_kontrak"() {
|
|
this.updateDurasiCicilan();
|
|
}
|
|
}
|
|
}
|
|
</script>
|