Files
FE_CPONE/test/vuex/cpone-card-reader/components/patientHistoryDialog.vue
2026-04-27 10:13:31 +07:00

212 lines
9.6 KiB
Vue

<template>
<v-dialog
v-model="dialog"
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">RIWAYAT PASIEN</span>
</v-card-title>
<v-card-text class="pt-2 pb-1">
<v-layout v-for="(history,index) in histories" @click="opendetail(history,index)" row>
<v-flex xs12>
<v-layout align-center mb-1 row>
<v-flex xs12>
<v-card flat :color="getcolorlist(history.xshow)" class="white--text pt-1 pb-1 pl-2 pr-2">
<v-layout row>
<v-flex xs10>
<h3 class="subheading">
<kbd class="mono">{{history.labnumber_ext}} | {{history.xdate}} | {{history.M_MouName}} | <span :title="history.realdoctor">{{history.M_DoctorName}}</span></kbd>
</h3>
</v-flex>
<v-flex class="text-xs-right" xs2>
<!--<v-icon v-if="history.xshow === 'N'" style="cursor:pointer" @click="opendetail(history,index)" dark>more_horiz</v-icon>
<v-icon v-if="history.xshow === 'Y'" style="cursor:pointer" @click="opendetail(history,index)" dark>minimize</v-icon>-->
</v-flex>
</v-layout>
</v-card>
</v-flex>
</v-layout>
<v-layout v-if="history.xshow === 'Y'" mb-2 row>
<v-flex xs12>
<v-card flat color="#fcac8c" class="pt-2 pb-0 pl-2 pr-2">
<v-layout row>
<v-flex class="text-xs-left" xs12>
<v-btn @click="setToOrder(history.T_OrderHeaderID)" class="mb-0 mt-0 ml-0" dark color="#3c70a4">
jadikan order
</v-btn>
</v-flex>
</v-layout>
<v-divider dark class="mt-1 mb-1"></v-divider>
<v-card>
<v-layout pl-3 pt-2 pb-2 pr-3 row>
<v-flex xs2>
<h5 class="subtitle-2">NO REG</h5>
<p class="body-1 mb-0">{{history.labnumber_ext}}</p>
</v-flex>
<v-flex xs2>
<h5 class="subtitle-2 ma-0 pa-0">TANGGAL</h5>
<p class="body-1 mb-0">{{history.xdate}}</p>
</v-flex>
<v-flex xs4>
<h5 class="subtitle-2 ma-0 pa-0">DOKTER</h5>
<p class="body-1 mb-0">{{history.M_DoctorName}}</p>
</v-flex>
<v-flex xs4>
<h5 class="subtitle-2 ma-0 pa-0">AGREEMENT</h5>
<p class="body-1 mb-0">{{history.M_MouName}}</p>
</v-flex>
</v-layout>
</v-card>
<v-divider dark class="mt-1 mb-1"></v-divider>
<v-card>
<v-layout pl-3 pt-2 pb-2 pr-3 row>
<v-flex xs6>
<h5 class="subtitle-2 ma-0 pa-0">CATATAN PASIEN</h5>
<p class="body-1 mb-0">{{history.M_PatientNote}}</p>
</v-flex>
<v-flex xs6>
<h5 class="subtitle-2 ma-0 pa-0">CATATAN FO</h5>
<p class="body-1 mb-0">{{history.T_OrderHeaderFoNote}}</p>
</v-flex>
</v-layout>
</v-card>
<v-divider dark class="mt-1 mb-1"></v-divider>
<v-layout row>
<v-flex xs12>
<v-data-table
:headers="headers"
:items="history.details"
class="elevation-1"
hide-actions
>
<template v-slot:items="props">
<td>{{ props.item.test_name }}</td>
<td class="text-xs-right">{{ props.item.str_price }}</td>
<td class="text-xs-right">{{ props.item.str_disc }}</td>
<td class="text-xs-right">{{ props.item.str_total }}</td>
</template>
<template v-slot:footer>
<td><strong>TOTAL</strong></td>
<td class="text-xs-right"><strong>{{ history.T_OrderHeaderSubTotal }}</strong></td>
<td class="text-xs-right"><strong>{{ history.total_disc }}</strong></td>
<td class="text-xs-right"><strong>{{ history.T_OrderHeaderTotal }}</strong></td>
</template>
</v-data-table>
</v-flex>
</v-layout>
<v-divider dark class="mt-1 mb-1"></v-divider>
<v-layout mb-2 pb-2 row>
<v-flex xs12>
<v-card>
<v-layout v-for="delivery in history.deliveries" pl-3 pt-2 pb-2 pr-3 row>
<v-flex xs12>
<h5 class="subtitle-2 ma-0 pa-0">{{delivery.M_DeliveryName.toUpperCase() }}</h5>
<p class="body-1 mb-0">{{delivery.T_OrderDeliveryDestination}}</p>
<p class="mb-0"><kbd>catatan : {{ delivery.xnote }}</kbd></p>
</v-flex>
</v-layout>
</v-card>
</v-flex>
</v-layout>
</v-card>
</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="grey"
flat
@click="dialog = false"
>
Tutup
</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
</template>
<style scoped>
.v-list--two-line .v-list__tile {
height: 55px!important;
}
.v-dialog__container {
display: block !important;
}
</style>
<script>
module.exports = {
components : {
'patient-history': httpVueLoader('./patientHistory.vue')
},
methods : {
setToOrder(id){
this.$store.dispatch('history/get_databyorder_id', {'order_id':id})
},
getcolorlist(value){
var rtn = "teal lighten-2"
if(value === 'Y')
rtn = "#ff8a5c"
return rtn
},
opendetail(value,idx){
console.log(value.xshow)
console.log(idx)
var all = this.$store.state.history.histories
all[idx].xshow = value.xshow == 'N'?'Y':'N'
console.log(all[idx].xshow)
console.log(all)
this.$store.commit('history/update_histories',all)
}
},
computed: {
no_history() {
if (! this.$store.state.patient.selected_patient.M_PatientID) return true
return this.$store.state.history.histories.length == 0
},
dialog: {
get() {
return this.$store.state.history.history_dialog
},
set(val) {
this.$store.commit('history/update_history_dialog',val)
}
},
histories(){
return this.$store.state.history.histories
}
},
data () {
return {
headers: [
{
text: 'PEMERIKSAAN',
align: 'left',
sortable: false,
},
{ text: 'BRUTO',align: 'right',sortable: false},
{ text: 'DISKON',align: 'right',sortable: false },
{ text: 'HARGA',align: 'right',sortable: false}
]
}
},
watch : {
}
}
</script>