fe-accone/test/vuex/acc-one-penyesuaian-harga/components/adjustment_form.vue

<template>
    <v-dialog v-model="dialog_adjustment" persistent max-width="500px">
        <v-card>
            <v-card-title class="headline grey lighten-2" primary-title>
                FORM PENAMBAHAN HARGA
            </v-card-title>
            <v-card-text>
                <v-form ref="formAdj" v-model="validationAdj" lazy-validation>
                    <v-text-field
                        v-model="formatted_original" label="Harga Awal" 
                        required outline hide-details prefix="Rp. " readonly
                    ></v-text-field>
                    <v-text-field
                        v-model="formatted_adjustment" label="Harga Tambahan" 
                        required outline hide-details prefix="Rp ." class="mt-2"
                        @blur="onBlurInput" @focus="onFocusInput"
                    ></v-text-field>
                    <v-autocomplete
                        v-model="selected_account" :items="list_account" outline
                        label="Account Tambahan" hide-details class="mt-2"
                        item-text="coaDescription" item-value="coaAccountNo"
                    >
                        <template slot="item" slot-scope="{item}">
                            <v-list-tile-content>
                                <v-list-tile-title>{{ item.coaDescription }}</v-list-tile-title>
                                <v-list-tile-sub-title>{{ item.coaSubDescription }}</v-list-tile-sub-title>
                            </v-list-tile-content>
                        </template>
                    </v-autocomplete>
                </v-form>
            </v-card-text>
            <v-card-actions>
                <v-spacer></v-spacer>
                <v-btn color="error" flat @click="cancelAdjusment()" outline>Batal</v-btn>
                <v-btn color="primary" @click="simpanAdjustment()" dark>Simpan</v-btn>
            </v-card-actions>
        </v-card>
    </v-dialog>
</template>

<script>
module.exports = {
    data() {
        return {
            validationAdj: false,
            price_original: 0,
            price_adjustment: 0,
            rules: [v => !!v || "tidak boleh kosong"]
        }
    },
    computed: {
        dialog_adjustment: {
            get() {
                return this.$store.state.voucher.dialog_adjustment;
            },
            set(val) {
                this.$store.commit("voucher/update_dialog_adjustment", val);
            }
        },
        formatted_original() {
            return this.price_original;
        },
        formatted_adjustment: {
            get() {
                return this.price_adjustment;
            },
            set(val) {
                const raw = val.replace(/\./g, '').replace(',', '.');
                this.selected_detail_voucher.PurchaseRequestDirectAdjustment = Number(raw);
            }
        },
        selected_detail_voucher: {
            get() {
                return this.$store.state.voucher.selected_detail_voucher;
            },
            set(val) {
                this.$store.commit("voucher/update_selected_detail_voucher", val);
            }
        },
        selected_account: {
            get() {
                return this.selected_detail_voucher.PurchaseRequestDirectAdjustmentAccount
            },
            set(val) {
                this.selected_detail_voucher.PurchaseRequestDirectAdjustmentAccount = val
            }
        },
        list_account() {
            return this.$store.state.voucher.list_account
        }
    },
    methods: {
        oneMoney(value) {
            let splitvalue = value.toString().split(".");
            if (splitvalue.length > 1) {
                const real = splitvalue[0];
                const deci = parseInt(splitvalue[1], 10);

                let decimal = 0
                if (isNaN(deci) || deci <= 0) {
                    decimal = '00';
                } else {                   
                    const scale = 10 ** splitvalue[1].length;
                    decimal = Math.round((deci / scale) * 100);
                }
                
                return real.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ".") + "," + decimal;
            } else {
                return value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ".");
            }
        },
        onBlurInput() {
            const price_adjst = this.selected_detail_voucher.PurchaseRequestDirectAdjustment;
            this.price_adjustment = this.oneMoney(price_adjst);
        },
        onFocusInput() {
            const price_adjst = this.selected_detail_voucher.PurchaseRequestDirectAdjustment;
            this.price_adjustment = price_adjst.toString().replace('.', ',');
        },
        cancelAdjusment() {
            this.price_adjustment = 0;
            this.price_original = 0;
            this.selected_detail_voucher = {};

            this.$refs.formAdj.resetValidation();
            this.dialog_adjustment = false;
        },
        simpanAdjustment() {
            if (this.$refs.formAdj.validate()) {
                this.$store.dispatch("voucher/updateAdjusment");
            }
        }
    },
    watch: {
        dialog_adjustment(val) {
            if (val) {
                this.$nextTick(() => {
                    this.$refs.formAdj?.resetValidation();
                    const detail = this.selected_detail_voucher
                    this.price_original = this.oneMoney(detail.PaymentVoucherDetailTotal);
                    this.price_adjustment = this.oneMoney(detail.PurchaseRequestDirectAdjustment);
                })
            }
        }
    }
}
</script>