fe-accone/test/vuex/acc-one-approval-po-asset/components/dialog-confirm.vue

<template>
    <v-dialog v-model="dialog_confirm_order" persistent width="80vw">
        <v-card class="style-card">
            <v-card-title class="headline grey lighten-2">KONFIRMASI ORDER ASET</v-card-title>
            <template>
                <div class="style-content">
                    <v-stepper non-linear v-model="steps">
                        <v-stepper-header>
                            <v-stepper-step editable step="1" @click="steps = 1">
                                FORM ORDER ASET
                            </v-stepper-step>
                            <v-divider></v-divider>
                            <v-stepper-step editable step="2" @click="steps = 2">
                                FORM KONTRAK ASET
                            </v-stepper-step>
                            <v-divider></v-divider>
                            <v-stepper-step editable step="3" @click="steps = 3">
                                ITEM ORDER ASET
                            </v-stepper-step>
                        </v-stepper-header>

                        <v-stepper-items>
                            <v-stepper-content step="1">
                                <form-order-asset></form-order-asset>
                            </v-stepper-content>

                            <v-stepper-content step="2">
                                <form-kontrak-asset></form-kontrak-asset>
                            </v-stepper-content>

                            <v-stepper-content step="3">
                                <form-item-request-asset></form-item-request-asset>
                                <dialog-select-request-asset></dialog-select-request-asset>
                            </v-stepper-content>
                        </v-stepper-items>
                    </v-stepper>
                    <v-card-text>
                        <v-layout v-for="(item, index) in summary_items" :key="index"
                            row wrap align-center>
                                <v-flex xs2 pa-1>
                                    <strong>{{ item.label }}</strong>
                                </v-flex>
                                <v-flex grow></v-flex>
                                <v-flex xs2 pa-1 class="text-xs-right">
                                    <strong>Rp. {{ formatCurrency(item.value) }}</strong>
                                </v-flex>
                        </v-layout>
                    </v-card-text>
                </div>
            </template>
            <v-card-actions>
                <v-btn @click="lihatLampiran()" color="info" class="white--text">Lampiran</v-btn>
                <v-spacer></v-spacer>
                <v-btn @click="batalConfirm()" color="error" class="white--text">Batal</v-btn>
                <v-btn @click="confirmOrder()" color="primary" class="white--text"
                    v-show="!view_detail_mode">
                    {{ user.M_UserM_ApproveLevelID == '1' ? "Verifikasi" : "Approve" }}
                </v-btn>
            </v-card-actions>
        </v-card>
    </v-dialog>
</template>

<style scoped>
.style-card {
  max-height: 60vh;
  display: flex;
  flex-direction: column;
}

.style-content {
  overflow-y: auto;
  flex: 1 1 auto;
  min-height: 0;
}
</style>

<script>
module.exports = {
    data() {
        return {
            steps: 1
        }
    },
    components: {
        'form-order-asset': httpVueLoader('./form-order-asset.vue'),
        'form-kontrak-asset': httpVueLoader('./form-kontrak-asset.vue'),
        'form-item-request-asset': httpVueLoader('./form-item-request-asset.vue'),
        'dialog-select-request-asset': httpVueLoader('./dialog-select-request-asset.vue')
    },
    computed: {
        dialog_confirm_order: {
            get() {
                return this.$store.state.orderAsset.dialog_confirm_order;
            },
            set(val) {
                this.$store.commit("orderAsset/update_dialog_confirm_order", val);
            }
        },
        summary_order: {
            get() {
                return this.$store.state.formView.summary_order;
            },
            set(val) {
                this.$store.commit("formView/update_summary_order", val);
            }
        },
        summary_items() {
            if (!this.summary_order) return [];
            return [
                {label: 'JUMLAH', value: this.summary_order.subtotal},
                {label: 'DISKON', value: this.summary_order.diskon},
                {label: 'PAJAK', value: this.summary_order.pajak},
                {label: 'DOWN PAYMENT', value: this.summary_order.downpayment},
                {label: 'TOTAL', value: this.summary_order.total}
            ]
        },
        loading_process() {
            return this.$store.state.orderAsset.loading_process;
        },
        selected_order() {
            return this.$store.state.orderAsset.selected_order;
        },
        view_detail_mode() {
            return this.$store.state.orderAsset.view_detail_mode;
        },
        user() {
            return this.$store.state.orderAsset.user
        }
    },
    methods: {
        formatCurrency(value) {
            const num = parseFloat(value);
            if (isNaN(num)) return 0;
            return num.toFixed(2).replace('.', ',').replace(/\B(?=(\d{3})+(?!\d))/g, ".");
        },
        lihatLampiran() {
            this.$store.commit("orderAsset/update_dialog_attachment", true)
        },
        confirmOrder() {
            if (!this.loading_process) {
                const poID = this.selected_order.PurchaseOrderID
                this.$store.dispatch("orderAsset/confirmOrderAsset", poID)
            }
        },
        batalConfirm() {
            this.$store.commit("formView/update_form_order", {
                podate: moment(new Date()).format('YYYY-MM-DD'),
                supplierID: "",
                reference: "",
                branchID: "",
                typepajak: "percent",
                valuepajak: 0,
                typediskon: "percent",
                valuediskon: 0
            });
            this.$store.commit("formView/update_form_kontrak", {
                nama_kontrak: '',
                tanggal_kontrak: moment(new Date()).format('YYYY-MM-DD'),
                tanggalAwal_kontrak: moment(new Date()).format('YYYY-MM-DD'),
                tanggalAkhir_kontrak: moment(new Date()).format('YYYY-MM-DD'),
                durasi_cicilan: 1,
                jumlah_cicilan: 1,
                tanggalBayar_cicilan: 1,
                besarNilai_cicilan: 0,
                type_downpayment: 'percent',
                besarNilai_downpayment: 0
            });
            this.$store.commit("formView/update_received_order", []);

            this.summary_order = {
                subtotal: 0,
                diskon: 0,
                pajak: 0,
                downpayment: 0,
                total_before_downpayment: 0,
                total: 0
            };

            this.$store.commit("orderAsset/update_view_detail_mode", false);
            this.dialog_confirm_order = false;
        }
    },
    watch: { }
}
</script>