FE_CPONE/test/vuex/one-fo-verification-simple/components/oneFoVerificationBarcode.vue

<template>
    <v-layout column >
        <v-card>
            <v-layout row>
                <v-flex xs12>
                    <v-subheader red--text text--lighten-1> BARCODE
                    <v-flex text-md-right>
                        <v-btn v-if="vshowprint" small @click="printBarcode()" color="primary">Print</v-btn>
                        
                    </v-flex>
                    </v-subheader>
                    <v-divider></v-divider>
                    <v-layout row wrap>
                        <v-flex xs12 pt-2 pl-4 pr-4 pb-4>
                            <v-layout 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="primary">+</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="green"
                                            >
                                            <template v-slot:label>
                                                {{vbarchil.barcodenumber}}
                                            </template>
                                            </v-checkbox>
                                        </v-flex>
                                    </v-layout>
                                </v-flex>
                            </v-layout>
                            
                        </v-flex>
                    </v-layout>
                </v-flex>
            </v-flex>          
        </v-card>
    </v-layout>
</template>

<style scoped>
table, td, th {  
  border: 1px solid #ddd;
  text-align: left;
}

table {
  border-collapse: collapse;
  width: 100%;
}

th, td {
  padding-top: 5px;
  padding-bottom: 5px;
  padding-left: 8px;
  padding-right: 5px;
}

.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;
}
input.fhm-input{
    border: 1px solid black; 
    border-radius: 2px;
    -webkit-box-shadow: 
      inset 0 0 2px  rgba(0,0,0,0.1),
            0 0 4px rgba(0,0,0,0.1); 
    -moz-box-shadow: 
      inset 0 0 2px  rgba(0,0,0,0.1),
            0 0 4px rgba(0,0,0,0.1); 
    box-shadow: 
      inset 0 0 2px  rgba(0,0,0,0.1),
            0 0 4px rgba(0,0,0,0.1); 
    padding: 2px 4px;
    background: rgba(255,255,255,0.5);
    margin: 0 0 1px 0;
    width:30px;
    text-align:center;
}
</style>

<script>
module.exports = {
    data: () => ({
    items: [
      {
        id: 1,
        name: 'Applications',
        children: [
          { id: 2, name: 'Calendar : app' },
          { id: 3, name: 'Chrome : app' },
          { id: 4, name: 'Webstorm : app' }
        ]
      },
      {
        id: 2,
        name: 'fasfsafsafasf',
        children: [
          { id: 2, name: 'Calendar : app' },
          { id: 3, name: 'Chrome : app' },
          { id: 4, name: 'Webstorm : app' }
        ]
      }
    ]
  }),
   computed: {
        vbarcode() {
            return this.$store.state.verification.verification_barcode
        },
        vshowprint(){
            var xdt = this.$store.state.verification.verification_barcode
            var xx = _.findIndex(xdt, function(o) { return o.xid == 0 })
            var rst = (xx == -1)?true:false
            return rst
        }
   },
   methods : {
        updateDataQtyParentBarcode(idx, val) {
            var prm = {idx:idx,val:val}
            this.$store.commit("verification/update_testing_qty_parent_barcode",prm)  
        },
        updateDataCbxParentBarcode(idx, val) {
            var prm = {idx:idx,val:val}
            this.$store.commit("verification/update_testing_cbx_parent_barcode",prm)  
        },
        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.patient.selected_patient
            oldArr.verification_barcode[idx] = vpar
            this.$store.commit("patient/update_selected_patient",oldArr) 

           
        },
        delBarcode(idx,varx){
            let vpar = varx
            let lght = vpar.children.length
            if(lght > 1){
                var inx = parseInt(idx);
                var oldArr = this.$store.state.patient.selected_patient
                oldArr.verification_barcode[idx].children.splice(lght-1,1)
            
                this.$store.commit("verification/update_verification_barcode",oldArr.verification_barcode)
                this.$store.commit("patient/update_selected_patient",oldArr)
            }
        },
        printBarcode(){
            var xarr = []
            var selpat = this.$store.state.patient.selected_patient
            var barcodes = this.$store.state.verification.verification_barcode
            barcodes.forEach(function(barcode) {
                var xbarcode = barcode
                xbarcode.M_PatientName = selpat.M_PatientName
                xbarcode.M_PatientDOB = selpat.M_PatientDOB
                xbarcode.T_OrderHeaderLabNumber = selpat.T_OrderHeaderLabNumber
                xbarcode.T_OrderHeaderDate = selpat.T_OrderHeaderDate
                xbarcode.M_PatientNoReg = selpat.M_PatientNoReg
                xbarcode.M_DoctorName = selpat.M_DoctorName
                xbarcode.M_CompanyName = selpat.M_CompanyName
                xbarcode.M_PatientAddress = selpat.M_PatientAddress
                xbarcode.CityUtama = selpat.CityUtama
                xbarcode.M_SexName = selpat.M_SexName
                xarr.push(xbarcode)
            });
            console.log(xarr)
        }
   }
}
</script>