fe-accone/test/vuex/acc-one-receive-item-po-inventaris/components/dialogHandOver.vue

<template>
    <v-dialog v-model="dialog_handover" persistent width="40vw">
        <v-card>
            <v-card-title class="headline grey lighten-2" primary-title>
                SERAH TERIMA BARANG INVENTARIS
            </v-card-title>

            <v-card-text>
                <p>Apakah Anda yakin ingin melakukan serah terima barang inventaris kepada user pemohon</p>

                <v-form ref="formhandover" lazy-validation v-model="valid_formhandover">
                    <v-data-table :headers="headers" :items="list_itembelumserah" hide-actions class="elevation-1">
                        <template v-slot:items="props">
                            <tr>
                                <td class="text-xs-center">
                                    <v-checkbox v-if="props.item.isHandoverDone == 'N'" v-model="props.item.checked"
                                        hide-details @change="onChangeCheckbox(props.item)">
                                    </v-checkbox>
                                </td>
                                <td class="text-xs-center">{{ props.item.M_ItemDesc }}</td>
                                <td class="text-xs-center">{{ props.item.originalQty }}</td>
                                <td class="text-xs-center">
                                    <v-text-field v-if="props.item.checked" v-model="props.item.serahQty" type="number"
                                        solo :rules="qtyRules(props.item.sisaQty)"></v-text-field>
                                    <div v-else>
                                        {{ props.item.serahQty }}
                                    </div>
                                </td>
                            </tr>
                        </template>
                    </v-data-table>
                    <v-layout row mt-2>
                        <v-flex xs6 pr-1>
                            <v-autocomplete v-model="selected_ruangan" :items="list_lokasi" label="Lokasi Penerima*"
                                :rules="ruang_rules" outline item-value="M_RuanganID"
                                item-text="M_RuanganName"></v-autocomplete>
                        </v-flex>
                        <v-flex xs6 pl-1>
                            <v-autocomplete label="Staff Penerima*" outline :rules="rules_staff" return-object
                                v-model="selected_staff" :items="list_staff" item-text="M_UserUsername"
                                item-value="M_UserID"></v-autocomplete>
                        </v-flex>
                    </v-layout>
                </v-form>
            </v-card-text>

            <v-card-actions>
                <v-spacer></v-spacer>
                <v-btn color="red" flat outline @click="closeHandOver()">Batal</v-btn>
                <v-btn color="green" flat outline @click="simpanHandOver()">Ya, Serahkan Barang</v-btn>
            </v-card-actions>
        </v-card>
    </v-dialog>
</template>

<script>
module.exports = {
    data() {
        return {
            selected_ruangan: 0,
            temp_list: [
                { M_RuanganID: 1, M_RuanganName: "bonde" }
            ],
            valid_formhandover: true,
            ruang_rules: [v => (v && Object.keys(v).length > 0) || 'Lokasi ruangan harus diisi'],
            rules_staff: [v => (v && Object.keys(v).length > 0) || 'Staff harus diisi'],
            headers: [
                {
                    text: "", align: "center", sortable: false, value: "checked",
                    width: "10%", class: "pa-2 blue lighten-3 white--text",
                },
                {
                    text: "ITEM", align: "center", sortable: false, value: "itemname",
                    width: "50%", class: "pa-2 blue lighten-3 white--text",
                },
                {
                    text: "QTY DITERIMA", align: "center", sortable: false, value: "qtyitem",
                    width: "20%", class: "pa-2 blue lighten-3 white--text",
                },
                {
                    text: "QTY HANDOVER", align: "center", sortable: false, value: "qtysend",
                    width: "20%", class: "pa-2 blue lighten-3 white--text",
                },
            ],
        }
    },
    computed: {
        dialog_handover: {
            get() {
                return this.$store.state.ro.dialog_handover
            },
            set(val) {
                this.$store.commit("ro/update_dialog_handover", val)
            }
        },
        selected_staff: {
            get() {
                return this.$store.state.ro.selected_staff
            },
            set(val) {
                this.$store.commit("ro/update_selected_staff", val)
            }
        },
        selected_item_received: {
            get() {
                return this.$store.state.form.selected_item_received
            },
            set(val) {
                this.$store.commit("form/update_selected_item_received", val)
            }
        },
        selected_ro: {
            get() {
                return this.$store.state.ro.selected_ro
            },
            set(val) {
                this.$store.commit("ro/update_selected_ro", val);
            }
        },
        list_itembelumserah: {
            get() {
                return this.$store.state.ro.list_itembelumserah
            },
            set(val) {
                this.$store.commit("ro/update_list_itembelumserah", val)
            }
        },
        list_staff() {
            return this.$store.state.ro.list_staff
        },
        list_lokasi() {
            return this.$store.state.ro.list_lokasi
        },
    },
    methods: {
        onChangeCheckbox(item) {
            if (item.checked) {
                item.serahQty = item.sisaQty
            } else {
                item.serahQty = item.originalQty - item.sisaQty
            }
        },
        qtyRules(originalQty) {
            return [
                v => Number(v) > 0 || "Jumlah harus diatas 0",
                v => Number(v) <= Number(originalQty) || "Jumlah melebihi inventaris yang diterima"
            ];
        },
        closeHandOver() {
            this.$store.commit("ro/update_selected_staff", {});
            this.dialog_handover = false
            this.$refs.formhandover.resetValidation();
        },
        async simpanHandOver() {
            if (this.$refs.formhandover.validate()) {
                let checked = this.list_itembelumserah.filter((ele) => ele.checked);
                if (checked.length < 1) {
                    console.log("no item selected");
                    return;
                }

                let prm = {
                    staffID: this.selected_staff.M_UserID,
                    receiveOrderPoID: this.selected_ro.ReceiveOrderPoID,
                    ruanganID: this.selected_ruangan,
                    item: checked
                }

                // console.log("parameter", prm);
                await this.$store.dispatch("ro/saveHandover", prm);
                this.$refs.formhandover.resetValidation();
            }
        },
    },
}
</script>