feature: po pay downpayment

test/vuex/acc-one-approval-po-asset/components/form-kontrak-asset.vue

@@ -0,0 +1,114 @@
+<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>