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

<template>
    <v-dialog v-model="dialog_barcode" persistent max-width="600">
      <v-card>
        <v-card-title style="color: #fff" class="headline grey darken-1">Cetak Barcode</v-card-title>
        <v-card-text>
          <v-layout pa-2 class="grey lighten-2" row>
            <v-flex xs1>
              <v-checkbox style="padding-top: 0; margin-top: 0" hide-details color="grey darken-1"
                :indeterminate="indeterminatex"  @change="changeCbxAll(bar_chx_all)" v-model="bar_chx_all">
              </v-checkbox>
            </v-flex>
            <v-flex xs5> ITEM </v-flex>
            <v-flex xs5> NUMBER BARCODE </v-flex>
            <v-flex xs1> CETAK </v-flex>
          </v-layout>
          <v-layout align-center pa-2 v-for="(vs, idx) in barcodes" :key="vs.id" class="grey lighten-4" row>
            <v-flex xs1>
              <v-checkbox style="padding-top: 0; margin-top: 0" color="grey darken-1" hide-details v-model="vs.chex"
                @change="checkTop()"></v-checkbox>
            </v-flex>
            <v-flex xs5>
              {{ vs.M_ItemDesc }}
            </v-flex>
            <v-flex xs5>
              {{ vs.T_BarcodeBarangNumber }}
            </v-flex>
            <v-flex xs1>
              <span @click="printSingleBarcode(vs)"
                class="icon-medium-fill-base-small xs1 white--text grey darken-1 ml-1 icon-print"></span>
            </v-flex>
          </v-layout>
        </v-card-text>
        <v-card-actions>
          <v-spacer></v-spacer>
          <v-btn color="grey darken-1" flat @click="dialog_barcode = false">Tutup</v-btn>
          <!-- <v-btn dark color="grey darken-3" @click="printRobo"
            >Cetak Robo
          </v-btn> -->
          <v-btn dark color="grey darken-1" @click="printMultipleBarcode">Cetak terpilih [ {{ selected_barcode.length }}
            ]</v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
</template>

<script>
module.exports = {
    data() {
        return {
            valid_formhandover: true
        }
    },
    computed: {
        dialog_barcode: {
            get() {
                return this.$store.state.ro.dialog_barcode
            },
            set(val) {
                this.$store.commit("ro/update_dialog_barcode", val)
            }
        },
        barcodes: {
            get() {
                return this.$store.state.ro.barcodes
            },
            set(val) {
                this.$store.commit("ro/update_barcodes", 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_staff() {
            return this.$store.state.ro.list_staff
        },
        urlQrCode: {
            get() {
                return this.$store.state.ro.urlQrCode;
            },
            set(val) {
                this.$store.commit("ro/update_urlQrCode", val);
            },
        },
        indeterminatex: {
            get() {
                return this.$store.state.ro.indeterminatex;
            },
            set(val) {
                this.$store.commit("ro/update_indeterminatex", val);
            },
        },
        bar_chx_all: {
            get() {
                return this.$store.state.ro.bar_chx_all;
            },
            set(val) {
                this.$store.commit("ro/update_bar_chx_all", val);
            },
        },
        selected_barcode: {
            get() {
                return this.$store.state.ro.selected_barcode;
            },
            set(val) {
                this.$store.commit("ro/update_selected_barcode", val);
            },
        },
    },
    methods: {
        changeCbxAll(value) {
            var arr = this.barcodes;
            this.indeterminatex = false;
            arr.forEach((el) => {
                el.chex = value;
            });
            var selected = _.filter(arr, function (o) {
                return o.chex;
            });
            this.selected_barcode = selected;
        },
        checkTop() {
            var barcodes = this.barcodes;
            var selected = _.filter(barcodes, function (o) {
                return o.chex;
            });
            this.bar_chx_all = false;
            this.indeterminatex = false;
            if (selected.length > 0 && barcodes.length === selected.length) {
                this.bar_chx_all = true;
                this.indeterminatex = false;
            }
            if (selected.length > 0 && barcodes.length > selected.length) {
                this.bar_chx_all = false;
                this.indeterminatex = true;
            }
            this.selected_barcode = selected;
            console.log(selected);
        },
        printSingleBarcode(value) {
            var inp = {
                nama_item: value.M_ItemDesc,
                no_inv: value.T_BarcodeBarangNumber,
                lokasi: value.M_RuanganName,
                cabang: value.M_BranchName
            };

            one_print_qrcode_inv(inp);
        },
        printMultipleBarcode() {
            var barcodes = this.selected_barcode;
            barcodes.forEach(value => {
                var inp = {
                    nama_item: value.M_ItemDesc,
                    no_inv: value.T_BarcodeBarangNumber,
                    lokasi: value.M_RuanganName,
                    cabang: value.M_BranchName
                };

                one_print_qrcode_inv(inp);
            });
        },
    },
}
</script>