FE_CPONE/test/vuex/one-fo-verification-simple-barcode/components/oneFoVerificationList.1.vue

<template>
   <v-layout class="fill-height" column>
      <v-card   class="mb-2 pa-2 searchbox">
         <v-layout >

            <v-text-field class="xs3 ma-1"
                          placeholder="No Lab"
                          single-line
                          outline
                          v-model="nolab"
                          hide-details
                          ></v-text-field>

               <v-text-field class="xs6 ma-1"
                             label=""
                             placeholder="Nama"
                             single-line
                             outline
                             v-model="name"
                             hide-details
                             ></v-text-field>

               <v-select class="xs6 ma-1" :items="statuses" 
                  item-text="name"
                  return-object
                  v-model="status"
                  label="Status" outline   hide-details></v-select>



            <v-btn class="xs3 ma-1" color="success"  @click="searchPatient" >Search</v-btn>


         </v-layout>
      </v-card>


      <v-card class="grow">

         <v-data-table 
            :headers="headers" 
            :items="patients"
            :loading="isLoading"
            hide-actions class="elevation-1">
            <template slot="items" slot-scope="props">
               <td class="text-xs-left pa-2" v-bind:class="{'amber lighten-4':isSelected(props.item)}" @click="selectMe(props.item)">{{ props.item.M_PatientNoReg }}</td>
               <td class="pa-2" v-bind:class="{'amber lighten-4':isSelected(props.item)}" @click="selectMe(props.item)">{{ props.item.T_OrderHeaderLabNumber}}</td>
               <td class="text-xs-left pa-2" v-bind:class="{'amber lighten-4':isSelected(props.item)}" @click="selectMe(props.item)">{{ props.item.M_PatientName}}</td>
               <td class="text-xs-left pa-2" v-bind:class="{'amber lighten-4':isSelected(props.item)}" @click="selectMe(props.item)">{{ props.item.M_StatusName}}</td>
            </template>

         </v-data-table>

      </v-card>
   </v-layout>
</template>

<style scoped>
.searchbox .v-input.v-text-field .v-input__slot{
   min-height:60px;
}
.searchbox .v-btn {
   min-height:60px;
}
table.v-table tbody td,table.v-table tbody th {
   height: 40px;
}

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

</style>

<script>
module.exports = {
   mounted() {
      this.$store.dispatch("status/lookup")
      this.$store.dispatch("patient/search",{
            name:this.name,
            nolab: this.nolab,
            status: this.status.code
         })
   },
   methods : {
      isSelected(p) {
         return p.T_OrderHeaderID == this.$store.state.patient.selected_patient.T_OrderHeaderID
      },
      searchPatient() {
         this.$store.dispatch("patient/search",{
            name:this.name,
            nolab: this.nolab,
            status: this.status.code
         })
      },
      selectMe(pat) {
         this.$store.commit("patient/update_selected_patient",pat)
         this.$store.commit("verification/update_verification_patient",pat)
         this.$store.commit("verification/update_verification_doctor",pat)
         this.$store.commit("verification/update_verification_delivery",pat)
         this.$store.commit("verification/update_verification_payment",pat)
         this.$store.commit("verification/update_verification_supplies",pat)
         this.$store.commit("verification/update_verification_barcode",pat)
         this.$store.commit("verification/update_verification_company_mou",pat)
         this.$store.commit("verification/update_verification_px",pat)
         this.$store.dispatch("verificationdoctor/lookup",{
            ohid:this.$store.state.patient.selected_patient.ohid
         })
      }
   },
   computed: {
      statuses() {
         return this.$store.state.status.statuses
      },
      status: {
         get() {
            return this.$store.state.status.selected_status
         },
         set(val) {
            this.$store.commit("status/update_selected_status",val)
         }
      },
      isLoading() {
         return this.$store.state.patient.search_status == 1
      },
      patients() {
         return this.$store.state.patient.patients
      }
   },
   data() {
      return {
         items: [],
         name: '',
         nolab: '',
         headers: [
            {
               text: "NO REG",
               align: "left",
               sortable: false,
               value: "mr",
               width: "15%",
               class: "pa-2 blue lighten-3 white--text"
            },
            {
               text: "NO LAB",
               align: "left",
               sortable: false,
               value: "lab",
               width: "15%",
               class: "pa-2 blue lighten-3 white--text"
            },
            {
               text: "NAMA",
               align: "left",
               sortable: false,
               value: "name",
               width: "25%",
               class: "pa-2 blue lighten-3 white--text"
            },

            {
               text: "STATUS",
               align: "left",
               sortable: false,
               value: "status",
               width: "15%",
               class: "pa-2 blue lighten-3 white--text"
            }
         ],
      };
   }
}
</script>