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

287 lines
8.9 KiB
Vue

<template>
<div>
<v-layout wrap>
<v-flex xs12 pl-0 pr-0 pt-2 pb-2>
<v-data-table
:headers="headers"
:items="patients"
:loading="isLoading"
hide-actions class="elevation-1">
<template slot="no-data">
<v-alert :value="isError" color="error" icon="warning">
Data Pasien tidak di temukan
{{errorMessage}}
</v-alert>
</template>
<template slot="items" slot-scope="props">
<td class="text-xs-left caption mono pt-1 pb-1 pl-2 " v-bind:class="{'teal lighten-4':props.item.divider === 'Y','amber lighten-4':props.item.selected}" @click="selectMe(props.item)">{{ props.item.M_PatientNoReg }}</td>
<td class="text-xs-left caption mono pa-1" v-bind:class="{'teal lighten-4':props.item.divider === 'Y','amber lighten-4':props.item.selected}" @click="selectMe(props.item)">{{ props.item.M_PatientName }}</td>
<td class="pa-1 caption mono " v-bind:class="{'teal lighten-4':props.item.divider === 'Y','amber lighten-4':props.item.selected}" @click="selectMe(props.item)">{{ props.item.hp }}</td>
<td class="text-xs-left caption mono pa-1" v-bind:class="{'teal lighten-4':props.item.divider === 'Y','amber lighten-4':props.item.selected}" @click="selectMe(props.item)">{{ props.item.dob_ina}}</td>
<td class="pa-1 caption mono " v-bind:class="{'teal lighten-4':props.item.divider === 'Y','amber lighten-4':props.item.selected}" @click="selectMe(props.item)">{{ props.item.M_PatientAddress}}</td>
</template>
</v-data-table>
<div class="text-xs-center pt-2">
<v-btn :loading="loading" dark v-if="show_more" @click="showMore()" small color="teal lighten-3">
Tampilkan lebih banyak
<template v-slot:loader>
sedang memuat ...
</template>
</v-btn>
<v-btn depressed v-if="!show_more" small color="grey lighten-2">Tidak ada lagi data</v-btn>
</div>
</v-flex>
</v-layout>
<v-dialog
persistent
v-model="dialog_birthday"
width="70%"
>
<v-card>
<v-card-title
class="headline teal white--text"
primary-title
>
HAPPY BIRTHDAY : UCAPKAN SELAMAT ULANG TAHUN KEPADA PASIEN
</v-card-title>
<v-card-text>
<v-layout row>
<v-flex xs12>
<v-img
src="../../../libs/image/hb.png"
contain
>
<v-layout
align-center
column
justify-center
>
</v-layout>
</v-img>
</v-flex>
</v-layout>
</v-card-text>
<v-divider></v-divider>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn
color="primary"
flat
@click="dialog_birthday = false"
>
Tutup
</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
</div>
</template>
<style scoped>
.custom-loader {
animation: loader 1s infinite;
display: flex;
}
@-moz-keyframes loader {
from {
transform: rotate(0);
}
to {
transform: rotate(360deg);
}
}
@-webkit-keyframes loader {
from {
transform: rotate(0);
}
to {
transform: rotate(360deg);
}
}
@-o-keyframes loader {
from {
transform: rotate(0);
}
to {
transform: rotate(360deg);
}
}
@keyframes loader {
from {
transform: rotate(0);
}
to {
transform: rotate(360deg);
}
}
table.v-table tbody td,table.v-table tbody th {
height: 40px;
}
table.v-table thead tr {
height: 40px;
}
</style>
<script>
module.exports = {
methods: {
showMore(){
if(!this.loading){
this.$store.commit('patient/update_loading', true)
var xnow = this.curr_page
this.curr_page = xnow + 1
}
},
selectMe(pat) {
this.$store.commit('patient/update_selected_patient', pat)
console.log(pat.info.birthday)
if(pat.info.birthday === 'Y')
this.dialog_birthday = true
this.$store.commit('patient/update_search_dialog_is_active',false)
this.$store.commit('order/update_patient_note', "")
if (pat && pat.M_PatientNote )
this.$store.commit('order/update_patient_note', pat.M_PatientNote)
this.$store.commit('order/update_catatan_fo', "")
this.$store.commit('patientaddress/testx', pat.M_PatientID);
this.$store.dispatch('patientaddress/search')
this.$store.commit('delivery/update_params', {p_id:pat.M_PatientID})
this.$store.dispatch('delivery/search_deliveries',{type:'patient',id:pat.M_PatientID})
// clear search
this.$store.commit('patient/update_search', '')
// Clear delivery
this.$store.commit('delivery/update_checked_id', [])
// Photo module
this.$store.commit('photo/update_patient_id', pat.M_PatientID)
if (pat.M_PatientPhoto == null || pat.M_PatientPhoto == "")
this.$store.commit('photo/update_photo_url', this.$store.state.photo.default_photo_url)
else
this.$store.commit('photo/update_photo_url', pat.M_PatientPhoto + "?r=" + Math.round(Math.random() * 1000000000))
// HISTORIES
//this.$store.dispatch('history/search')
}
},
computed : {
loading() {
return this.$store.state.patient.loading
},
show_more() {
return this.$store.state.patient.show_more
},
curr_page: {
get() {
return this.$store.state.patient.current_page
},
set(val) {
this.$store.commit("patient/update_current_page",val)
this.$store.dispatch('patient/search')
}
},
xtotal_page: {
get() {
return this.$store.state.patient.total_patient
},
set(val) {
this.$store.commit("patient/update_total_patient",val)
}
},
isError() {
return this.$store.state.patient.search_status == 3
},
errorMessage() {
return this.$store.state.patient.search_error_message
},
isLoading() {
return this.$store.state.patient.search_status == 1
},
patients() {
return this.$store.state.patient.patients
},
total() {
return this.$store.state.patient.total_patient
},
total_display() {
return this.$store.state.patient.total_display
},
dialog_birthday() {
return this.$store.state.patient.dialog_birthday
},
dialog_birthday: {
get() {
return this.$store.state.patient.dialog_birthday
},
set(val) {
this.$store.commit('patient/update_dialog_birthday', val)
// this.$store.commit('language/update_selected_language_2', null)
}
},
},
data() {
return {
headers: [
{
text: "NO RM",
align: "left",
sortable: false,
value: "mr",
width: "15%",
class: "pa-2 teal lighten-3 white--text"
},
{
text: "NAMA",
align: "left",
sortable: false,
value: "name",
width: "25%",
class: "pa-2 teal lighten-3 white--text"
},
{
text: "HP",
align: "left",
sortable: false,
value: "hp",
width: "15%",
class: "pa-2 teal lighten-3 white--text"
},
{
text: "DOB",
align: "left",
sortable: false,
value: "dob",
width: "15%",
class: "pa-2 teal lighten-3 white--text"
},
{
text: "ALAMAT",
align: "left",
sortable: false,
value: "address",
class: "pa-2 teal lighten-3 white--text"
}
],
};
}
}
</script>