fe-accone/test/vuex/acc-one-item-usage-v3/components/dialogUsageItem.vue

<template>
    <v-layout row justify-center>
        <v-dialog v-model="showDialog" persistent max-width="600px">
        <v-card>
            <v-card-title class="headline grey lighten-2" primary-title>
                Detail Pemakaian
            </v-card-title>
            <v-card-text class="pt-2 pb-0">
            <v-layout>
                <v-flex xs12 pa-2>
                    <p class="mb-0"><strong>Item:</strong> {{ selectedItem.M_ItemDesc }}</p>
                    <p class="mb-0"><strong>Unit Asal:</strong> {{ selectedItem.ItemUnitName }}</p>
                    <p class="mb-0"><strong>Qty:</strong> {{ selectedItem.ItemUsageQty }}</p>
                </v-flex>
            </v-layout>

            <v-layout row>
                <v-flex xs12 pa-2>
                    <v-text-field
                        v-model="usedQty"
                        label="Jumlah Digunakan"
                        hide-details
                        outline
                        type="number">
                    </v-text-field>
                    <p v-if="checkErrorForm('requireUsageQty')" class="error pl-2 pr-2" style="color:#fff">Jumlah digunakan masih kosong</p>
                </v-flex>
            </v-layout>
            <v-layout row>
                <v-flex xs12 pa-2>
                    <v-autocomplete
                        v-model="selectedItemUnit"
                        :items="unitList"
                        item-text="ToUnitName"
                        item-value="ToUnitID"
                        :loading="loadingAutocomplete"
                        return-object
                        label="Unit Digunakan"
                        outline
                        hide-details
                    ></v-autocomplete>
                    <p v-if="checkErrorForm('requireUnit')" class="error pl-2 pr-2" style="color:#fff">Unit harus dipilih</p>
                </v-flex>
            </v-layout>
            </v-card-text>
            <v-divider></v-divider>
            <v-card-actions>
                <v-spacer></v-spacer>
                <v-btn text @click="closeDialog">Batal</v-btn>
                <v-btn color="primary" @click="saveItem">Simpan</v-btn>
            </v-card-actions>
        </v-card>
        </v-dialog>
    </v-layout>
</template>

<style scoped>
.date-type-table {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.table.v-table tbody td,
table.v-table tbody th {
  height: 40px;
}

.table.v-table thead tr {
  height: 40px;
}

.scroll-container {
  scroll-padding: 50px 0 0 50px;
}
</style>

<script>
module.exports = {
  components: {

  },
  data() {
    return {

    };
  },
  mounted() {

  },
  computed: {
    showDialog: {
        get() {
            return this.$store.state.usage.dialogUsage;
        },
        set(val) {
            this.$store.commit("usage/updateDialogUsage", val);
        }
    },
    selectedItem() {
      return this.$store.state.usage.selectedItemUsage;
    },
    unitList() {
      return this.$store.state.usage.unitList;
    },
    selectedItemUnit: {
      get() {
        return this.$store.state.usage.selectedItemUnit;
      },
      set(val) {
        this.$store.commit("usage/updateSelectedItemUnit", val);
      }
    },
    loadingAutocomplete() {
      return this.$store.state.usage.loadingAutocomplete === 1;
    },
    usedQty: {
      get() {
        return this.$store.state.usage.usedQty;
      },
      set(val) {
        this.$store.commit("usage/updateUsedQty", val);
      }
    }
  },
  methods: {
    closeDialog() {
      this.showDialog = false;
      this.$store.commit("usage/updateSelectedItemUnit", {});
      this.usedQty = 0;
      this.$store.commit("usage/updateErrors", []);
    },
    checkErrorForm(val) {
        let errors = this.$store.state.usage.errors;
        if (errors.includes(val)) {
            return true;
        } else {
            return false;
        }
    },
    saveItem() {
        this.$store.commit("usage/updateErrors", []);
        var errors = this.$store.state.usage.errors;
        if (_.isEmpty(this.usedQty) || this.usedQty <= 0) {
            errors.push("requireUsageQty");
        }
        if (_.isEmpty(this.selectedItemUnit) || !this.selectedItemUnit.ToUnitID) {
            errors.push("requireUnit");
        }

        if (errors.length === 0) {
            let prm = {
                itemUsageID: this.selectedItem.ItemUsageID,
                itemID: this.selectedItem.M_ItemID,
                usedQty: this.usedQty,
                fromUnitID: this.selectedItemUnit.FromUnitID,
                toUnitID: this.selectedItemUnit.ToUnitID,
                usedPrice: this.selectedItem.ItemUsagePrice,
                currentPage: this.$store.state.used.currentPage,
                search: this.$store.state.used.search,
                statusConfirm: this.$store.state.used.statusConfirm
            };
            this.$store.dispatch("usage/saveItemUsage", prm)
        }
    }
  },
};
</script>