FE_CPONE/test/vuex/cpone-card-reader/components/patientDetail.vue

<template>
   <div id="e3" style="max-width: 400px; margin: auto;" class="grey lighten-3">
      <v-dialog v-model="dialog_card" width="65%">
         <v-card>
            <v-card-title class="teal subheading  white--text pt-2 pb-2" primary-title align-center>
               <span class="font-weight-thin">KARTU ANGGOTA</span>
            </v-card-title>
            <v-card-text class="pt-2 pb-1">
               <v-layout>
                  <v-flex xs12>
                     <object :data="rpt_card" width="100%" height="512px"></object>
                  </v-flex>
               </v-layout>
            </v-card-text>
         </v-card>
      </v-dialog>
      <v-toolbar color="pink" dark>
         <v-toolbar-side-icon></v-toolbar-side-icon>
         <v-toolbar-title>My Music</v-toolbar-title>
         <v-spacer></v-spacer>
         <v-btn icon>
            <v-icon>search</v-icon>
         </v-btn>
      </v-toolbar>

      <v-card>
         <v-container fluid grid-list-lg>
            <v-layout row>
               <v-flex xs12>
                  <v-card color="cyan darken-2" class="white--text">
                     <v-layout>
                        <v-flex xs5>
                           <v-img :src="patient_photo" aspect-ratio="1" height="125px" class="cyan darken-2  ma-3 pa-2"
                              contain>
                              <template v-slot:placeholder>
                                 <v-layout fill-height align-center justify-center ma-0>
                                    <v-progress-circular indeterminate color="grey lighten-5"></v-progress-circular>
                                 </v-layout>
                              </template>
                           </v-img>
                        </v-flex>
                        <v-flex xs7>
                           <v-card-title primary-title>
                              <div>
                                 <div class="headline">Supermodel</div>
                                 <div>Foster the People</div>
                                 <div>(2014)</div>
                              </div>
                           </v-card-title>
                        </v-flex>
                     </v-layout>
                     <v-divider light></v-divider>
                     <v-card-actions class="pa-3">
                        <v-btn small color="primary" @click="update_photo" dark>Upload Card</v-btn>
                     </v-card-actions>
                  </v-card>
               </v-flex>
            </v-layout>
         </v-container>
         <v-container>
            <!-- display debug resp.data.data from photo.js/update_resp_data -->
            <div class="div">{{ ocr_resp_msg }}</div>
            <div class="div">{{ ocr_resp_data }}</div>
         </v-container>
      </v-card>

      <patient-photo-dialog></patient-photo-dialog>

   </div>
</template>

<style scoped>
.v-messages {
   display: none;
}

.v-input__slot {
   margin-bottom: 0px;
}
</style>

<script>

module.exports = {
   components: {
      'patient-search-dialog': httpVueLoader('./patientSearchDialog.vue'),
      'patient-history-dialog': httpVueLoader('./patientHistoryDialog.vue'),
      'patient-photo-dialog': httpVueLoader('./oneDialogPhoto.vue')
   },
   data() {
      return {
         showinfo: false,
         dialog_card: false,
         rpt_card: ''
      };
   },
   computed: {
      diagnosa: {
         get() {
            return this.$store.state.order.diagnosa
         },
         set(val) {
            this.$store.commit('order/update_diagnosa', val)
         }
      },
      patient() {
         return this.$store.state.patient.selected_patient
      },

      patient_note: {
         get() {
            return this.$store.state.order.patient_note
         },
         set(val) {
            this.$store.commit('order/update_patient_note', val)
         }
      },

      patient_age: {
         get() {
            return this.$store.state.patient.selected_patient.patient_age
         },

         set(v) {
            return
         }
      },

      ocr_resp_data() {
         return this.$store.state.photo.resp_data
      },

      ocr_resp_msg() {
         return this.$store.state.photo.resp_msg
      },

      patient_dob() {
         try {
            return this.$store.state.patient.selected_patient.M_PatientDOB.split('-').reverse().join('-')
         } catch (e) {
         }

      },
      patient_photo() {
         return this.$store.state.photo.photo_url
      },


   },
   methods: {
      update_photo() {
         this.$store.commit('photo/update_dialog_photo', true)
      },
      update_resp_data() {
         this.$store.commit('photo/update_resp_data', true)
      },
      edit_patient() {
         this.$store.commit('patient/update_edit', true)
         this.$store.commit('patient/update_patient_new_dialog_is_active', true)
      },
      getHistories(visit) {
         console.log(visit)
         if (parseInt(visit) > 1) {
            this.$store.dispatch('history/search')
         }
      },
      generate_card() {
         var xid = this.$store.state.patient.selected_patient.M_PatientID
         this.rpt_card = "/birt/run?__report=report/one/fo/rpt_card.rptdesign&__format=pdf&username=admin%20&PID=" + xid
         this.dialog_card = true
      }
   }
}
</script>