115 lines
4.0 KiB
Vue
115 lines
4.0 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
|
|
></v-text-field>
|
|
</v-flex>
|
|
<v-flex xs3 pa-1>
|
|
<v-text-field
|
|
:value="formattedDateKontrak" hide-details readonly outline
|
|
label="Tanggal Kontrak"
|
|
></v-text-field>
|
|
</v-flex>
|
|
<v-flex xs3 pa-1>
|
|
<v-text-field
|
|
:value="formattedStartdateKontrak" outline hide-details
|
|
label="Tanggal Mulai Kontrak" readonly
|
|
></v-text-field>
|
|
</v-flex>
|
|
<v-flex xs3 pa-1>
|
|
<v-text-field
|
|
:value="formattedEnddateKontrak" outline hide-details
|
|
label="Tanggal Akhir Kontrak" readonly
|
|
></v-text-field>
|
|
</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
|
|
></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
|
|
></v-text-field>
|
|
</v-flex>
|
|
<v-flex xs2 pa-1>
|
|
<v-text-field
|
|
v-model="form_kontrak.besarNilai_cicilan" hide-details
|
|
label="Besar Bayar Cicilan" placeholder="0" prefix="Rp."
|
|
outline readonly
|
|
></v-text-field>
|
|
</v-flex>
|
|
<v-flex xs1 pa-1>
|
|
<v-autocomplete
|
|
:items="['nominal', 'percent']" label="Tipe Nilai"
|
|
v-model="form_kontrak.type_downpayment" hide-details
|
|
outline disabled
|
|
></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
|
|
></v-text-field>
|
|
<v-text-field
|
|
v-else label="Jumlah Uang Muka" hide-details
|
|
placeholder="0" prefix="Rp." outline readonly
|
|
v-model="form_kontrak.besarNilai_downpayment"
|
|
></v-text-field>
|
|
</v-flex>
|
|
</v-layout>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
module.exports = {
|
|
data() {
|
|
return {
|
|
|
|
};
|
|
},
|
|
computed: {
|
|
form_kontrak: {
|
|
get() {
|
|
return this.$store.state.formView.form_kontrak;
|
|
},
|
|
set(val) {
|
|
this.$store.commit("formView/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);
|
|
},
|
|
},
|
|
methods: {
|
|
formatDate(date) {
|
|
if (!date) return null;
|
|
const [year, month, day] = date.split('-');
|
|
return `${day}-${month}-${year}`;
|
|
}
|
|
}
|
|
}
|
|
</script>
|