FE_CPONE/test/vuex/one-fo-supervisor/components/oneFoSupervisorDialogBarcode.vue

<template>
<div>
    <v-dialog
    v-model="barcodedialog"
    persistent 
    
    max-width="30%"
    >
        <v-card >
            <v-card-title
                dark
                class="headline  pt-2 pb-2"
                primary-title
                style="color:white"
                v-bind:class="{ 'warning':savestatus !== 2, 'success':savestatus === 2}"
            >
            <h4 dark v-if="savestatus !== 2">Barcode</h4>
            <h4 v-if="savestatus === 2">Berhasil !</h4>
            </v-card-title>
            <v-card-text class="pt-2 pb-2">
                <v-layout row>
                    <v-flex xs12 d-flex>
                        <v-layout row>
                            <v-flex pb-1 xs12>
                                <v-layout  v-if="savestatus === 2" row>
                                    <v-flex pt-2 pr-2 xs12>
                                        Barcode berhasil diperbarui
                                    </v-flex>
                                </v-layout>   
                                <v-layout v-if="savestatus !== 2" row v-for="(vbar,idx) in vbarcode" :key="vbar.id">
                                <v-flex xs12 mb-2>
                                    <div class="body-2"> 
                                        {{vbar.name}}
                                        <v-btn small @click="addBarcode(idx,vbar)" style="min-width:25px" color="warning">+</v-btn>
                                        <!--<v-btn small @click="delBarcode(idx,vbar)" style="min-width:25px" color="error">x</v-btn>-->
                                    </div>
                                    <v-layout row>
                                        <v-flex xs12 v-for="vbarchil in vbar.children">
                                            <v-checkbox
                                            v-model="vbarchil.chex"
                                            readonly="readonly"
                                            color="warning"
                                            >
                                            <template v-slot:label>
                                                {{vbarchil.barcodenumber}}
                                            </template>
                                            </v-checkbox>
                                        </v-flex>
                                    </v-layout>
                                </v-flex>
                            </v-layout>
                            </v-flex>
                        </v-layout>
                    </v-flex>
                </v-layout> 
            </v-card-text>
            <v-divider></v-divider>
            <v-card-actions>
                <v-spacer></v-spacer>
                <v-btn
                    color="warning"
                    flat
                    v-if="savestatus !== 2"
                    @click="doSave()"
                >
                Simpan
                </v-btn>
                <v-btn
                    flat
                    @click="closeDialogBarcode()"
                >
                Tutup
                </v-btn>
            </v-card-actions>
        </v-card>
    </v-dialog>
</div>
</template>

<style scoped>
    .label-tagihan{
        text-align:left;
        font-size: 25px;
        font-family: open sans, tahoma, sans-serif;
        font-weight:700;
    }

    .sub-header{
        text-align:left;
        font-size: 18px;
        font-family: open sans, tahoma, sans-serif;
        font-weight:700;
    }

    .sub-title{
        text-align:left;
        font-size: 14px;
        font-family: open sans, tahoma, sans-serif;
        font-weight:700;
    }

    .text-tagihan{
        text-align:left;
        font-size: 42px;
        font-family: open sans, tahoma, sans-serif;
    }

    .disabled-background{
        background:#b7b7b7;
    }

    .input-cash{
        width: 100%;
        padding: 8px 14px;
        box-sizing: border-box;
        border: 2px solid grey;
        border-radius: 4px;
        font-size: 22px;
        font-weight:700;
        text-align:right;
    }
    .input-plain{
        width: 100%;
        padding: 4px 8px;
        box-sizing: border-box;
        border: 2px solid grey;
        border-radius: 4px;
        font-size: 14px;
    }
    .v-input, .v-input__slot, .v-messages{
        margin:0px;
        padding:0px;
        min-height: 0px; 
    }
    .v-input--selection-controls:not(.v-input--hide-details) .v-input__slot {
        margin-bottom: 0px;
    }
    table {
    font-family: arial, sans-serif;
    border-collapse: collapse;
    width: 100%;
    background:white;
    border: 0px;
    }

    th, td {
    border: 1px solid black;
    border-collapse: collapse;
    padding-top: 2px;
    padding-bottom: 2px;
    }
    table>tr>td {
    padding: 8px;
    }
    table>tr>td:first {
    padding-left:15px!important;
    }
    .mini-input .v-input{
        margin-top: 0px; 
    }

    .mini-input .v-input, .mini-input .v-input--selection-controls,.mini-input .v-input__slot{
        margin-top: 0px; 
        margin-bottom:0px;
        margin-left:3px;
    }
    .mini-input .v-messages{
        min-height:0px;
    }

    .border-bottom-dashed{
        border-bottom : 1px dashed rgba(0,0,0,.12);
    }
</style>
<script>
module.exports = {
    data () {
      return {
        printwidth:600
      }
    },
    computed: {
        vbarcode(){
            return this.$store.state.barcode.barcode
        },
        barcodedialog:{
            get() {
                return this.$store.state.barcode.barcode_dialog
            },
            set(val) {
                this.$store.commit("barcode/update_barcode_dialog",val)
            }
        },
        savestatus(){
            return this.$store.state.barcode.save_status
        }
    },
    methods : {
        doSave(){
            let prm = {
                'orderid':this.$store.state.patient.selected_patient.orderid,
                'barcode':this.$store.state.barcode.barcode
            }
            this.$store.dispatch("barcode/save",prm)
        },
        closeDialogBarcode(){
            if(this.savestatus !== 2){
                this.$store.commit("barcode/update_barcode_dialog",false)
            }
            else{
                let arrpatient = this.$store.state.patient.patients
                var idx = _.findIndex(arrpatient, item => item.orderid === this.$store.state.patient.selected_patient.orderid)
                console.log(idx)
                this.$store.dispatch("patient/search",{
                    search: this.$store.state.patient.search,
                    status: this.$store.state.patient.selected_status.value,
                    lastidx:idx
                })
                this.$store.commit("barcode/update_barcode_dialog",false)
            }
             
        },
        addBarcode(idx,varx){
            let vpar = varx
            let lght = vpar.children.length
            let childx = Object.assign({}, vpar.children[lght - 1])
            let oldbarcode = childx.barcodenumber
            let oldcount = oldbarcode.split(".")
            var newcount = parseInt(oldcount[2]) + 1
            var newbarcodex = oldcount[0]+'.'+oldcount[1]+'.'+newcount
            childx.barcodenumber = newbarcodex
            childx.xid = 0
            vpar.children.push(childx)

            var oldArr = this.$store.state.barcode.barcode
            oldArr[idx] = vpar
            this.$store.commit("barcode/update_barcode",oldArr)     
        }
   }
}
</script>