FE_CPONE/test/vuex/one-result-print-adm/components/oneProcessRePatientDetail.vue

<template>
    <v-layout row wrap>
        <v-flex xs12>
            <v-card class="mb-1"  >
                <v-layout align-center class="pr-2" row>
                    <v-flex xs2 pl-2 style="color:#9e9e9ea1" class="mono">Pengiriman Hasil</v-flex>
                    <v-flex class="text-xs-right" xs10>
                        <v-chip label  v-for="delivery in deliveries" :color="delivery.color" text-color="white">
                        <v-avatar>
                        <v-icon>{{delivery.icon}}</v-icon>
                        </v-avatar>
                        {{delivery.name}} <span class="pl-1" v-if="delivery.code === 'EMAIL'">( {{delivery.T_OrderDeliveryDestination}} )</span>
                        </v-chip>
                    </v-flex>
                </v-layout>
            </v-card>
            <v-card>
                <v-layout align-center class="pr-2" row>
                    <v-flex text-xs-center xs10>
                        <v-btn v-for="(xgroup,index) in xgroups_rpt" 
                            @click="generateReport(xgroup,index)"
                            :dark="xgroup.selected === 'N'" small 
                            :outline="xgroup.selected === 'Y'" 
                            mr-1 
                            color="purple">{{xgroup.group_name}}</v-btn>
                   
                        <v-btn v-for="(xgroup_info,index) in xgroups_info" 
                            dark small 
                            mr-1 
                            color="black">{{xgroup_info.group_name}}</v-btn>
                    </v-flex>
                    <v-flex style="color:#9e9e9ea1" class="mono caption" text-xs-right pr-2 xs2>
                        diprint sebanyak : <span style="color:black">{{printcount}}</span> kali
                    </v-flex>
                </v-layout>
                <v-layout class="pt-1 pl-2 pr-2 pb-2" style="min-height:570px;" wrap>
                    <v-layout row>
                        <v-flex xs12>
                            <object  style="overflow-y:scroll;" width="100%" :height="xheight" :data="xurl"></object>
                        </v-flex>
                    </v-layout>
                </v-layout>
            </v-card>
        </v-flex>
        <one-dialog-info :status="opendialoginfo" :msg="msginfo" @close-dialog-info="opendialoginfo = false"></one-dialog-info>
    </v-layout>
    
</template>

<style scoped>
    .btn-detail {
        min-width: 0px !important;
        height: auto;
        padding: 0px;
        top: 5px;
        right: 5px;
    }

    
  .scroll-container {
    scroll-padding: 50px 0 0 50px;
  }

  ::-webkit-scrollbar {
    width: 7px;
  }

  /* this targets the default scrollbar (compulsory) */

  ::-webkit-scrollbar-track {
    background-color: #73baf3;
  }

  /* the new scrollbar will have a flat appearance with the set background color */

  ::-webkit-scrollbar-thumb {
    background-color: #2196f3;
  }

  /* this will style the thumb, ignoring the track */

  ::-webkit-scrollbar-button {
    background-color: #0079da;
  }

  /* optionally, you can style the top and the bottom buttons (left and right for horizontal bars) */

  ::-webkit-scrollbar-corner {
    background-color: black;
  }
</style>

<script>
module.exports = 
{
    components : {
      'one-dialog-info':httpVueLoader('../../common/oneDialogInfo.vue')
   },
    data() {
      return {
        detail: false,
            xheight:'100%'
        
      };
   },
    computed : {
        opendialoginfo: {
            get() {
                return this.$store.state.re_patient.open_dialog_info
            },
            set(val) {
                this.$store.commit("re_patient/update_open_dialog_info",false)
            }
        },
        msginfo(){
            return this.$store.state.re_patient.msg_info
        },
        printcount(){
            return this.$store.state.re_patient.print_count
        },
        deliveries() {
         return this.$store.state.re_patient.deliveries
        },
        xgroups_rpt() {
            let groups = this.$store.state.re_patient.groups
         return  _.filter(groups, function(o) { return o.type === 'rpt' })
        },
        xgroups_info() {
            let groups = this.$store.state.re_patient.groups
         return  _.filter(groups, function(o) { return o.type === 'info' })
        },
        xurl: {
            get() {
                return this.$store.state.re_patient.url_print
            },
            set(val) {
                this.$store.commit("re_patient/update_url_print",val)
            }
        },
        selected_patient () {
            let x = this.$store.state.re_patient.selected_patient
            if (x)
                return x
            return {}
        },
        order_date() {
            let d = this.selected_patient.T_OrderHeaderDate
            let e = ''
            try {
                e = d.substr(0,10).split('-').reverse().join('-')
            } catch(e) { /*console.log(e.message)*/ }
            
            return e
        },

        dob_date() {
            let d = this.selected_patient.M_PatientDOB
            let e = ''
            try {
                e = d.substr(0,10).split('-').reverse().join('-')
            } catch(e) { /*console.log(e.message)*/ }
            
            return e
        },

        age() {
            let d = this.selected_patient.T_OrderHeaderM_PatientAge
            let e = ''
            try {
                e = d.replace(/tahun/, 'th').replace(/bulan/, 'bl').replace(/hari/, 'hr')
            } catch(e) { /*console.log(e.message)*/ }
            
            return e
        },

        langs() {
            let x = this.selected_patient
            if (!x) return ''

            let si_01 = x.T_OrderHeaderLangIsSI == 'Y' ? ' (SI)' : ''
            let si_02 = x.T_OrderHeaderAddOnSecondLangIsSI == 'Y' ? ' (SI)' : ''

            if (!x.SecondM_LangID) return x.M_LangName + si_01

            return x.M_LangName + si_01 + ', ' + x.SecondM_LangName + si_02
        }
    },
    methods : {
        generateReport(value,idx){
            if(value.type === 'rpt'){
                let groups = this.$store.state.re_patient.groups
                groups.forEach((el)=>{el.selected = 'N'})
                groups[idx].selected = 'Y'
                this.$store.commit('re_patient/update_groups', groups)
                var selected_group = value
                this.$store.commit('re_patient/update_selected_group', selected_group)
                let user = one_user()
                var xurl = "/birt/frameset?__report=report/one/lab/"+selected_group.rpt+".rptdesign&__format=pdf&username="+user.M_UserUsername+"&PID="+selected_group.order_id+"&tm="+Date.now()
                console.log(xurl)
                this.$store.commit('re_patient/update_url_print', xurl)
            }
      },
    }
}
</script>