351 lines
11 KiB
Vue
351 lines
11 KiB
Vue
<template>
|
|
<div>
|
|
<v-snackbar
|
|
v-model="snackbar.value"
|
|
:color="snackbar.color"
|
|
:multi-line="snackbar.mode === 'multi-line'"
|
|
:timeout="snackbar.timeout"
|
|
:vertical="snackbar.mode === 'vertical'"
|
|
>
|
|
{{ snackbar.text }}
|
|
<v-btn
|
|
dark
|
|
flat
|
|
@click="snackbar.value = false"
|
|
>
|
|
Tutup
|
|
</v-btn>
|
|
</v-snackbar>
|
|
<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 pa-1 pr-2">
|
|
<v-chip v-if="props.item.isConfirmed === 'Y'" color="teal" text-color="white">
|
|
<v-avatar>
|
|
<v-icon>check_circle</v-icon>
|
|
</v-avatar>
|
|
Verified
|
|
</v-chip>
|
|
<v-chip v-if="props.item.isConfirmed === 'N'" color="grey" text-color="white">
|
|
<v-avatar>
|
|
<v-icon>remove_circle</v-icon>
|
|
</v-avatar>
|
|
Not Verified Yet
|
|
</v-chip>
|
|
</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)">
|
|
<p class="mb-0">{{ props.item.name }}</p>
|
|
<p class="mb-0 caption">{{ props.item.bizone.Nat_PatientIDNumber }}</p>
|
|
</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)">{{ formatDate(props.item.dob)}}</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)">
|
|
<p class="mb-1" v-for="address in props.item.address">{{address.Nat_PatientAddressDescription}}</p>
|
|
</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)">
|
|
<p class="mb-1">{{props.item.M_BranchCode}}</p>
|
|
</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)">
|
|
<v-btn small @click="downloadData(props.item)" color="blue lighten-2">Unduh Data</v-btn>
|
|
</td>
|
|
</template>
|
|
|
|
</v-data-table>
|
|
</v-flex>
|
|
</v-layout>
|
|
<v-dialog
|
|
v-model="dialog_error"
|
|
width="500"
|
|
>
|
|
|
|
|
|
<v-card>
|
|
<v-card-title
|
|
class="headline grey lighten-2"
|
|
primary-title
|
|
>
|
|
Error
|
|
</v-card-title>
|
|
|
|
<v-card-text>
|
|
{{error_message}}
|
|
</v-card-text>
|
|
|
|
<v-divider></v-divider>
|
|
|
|
<v-card-actions>
|
|
<v-spacer></v-spacer>
|
|
<v-btn
|
|
color="primary"
|
|
flat
|
|
@click="dialog_error = 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 = {
|
|
components:{
|
|
'one-dialog-error' : httpVueLoader('../common/oneDialogError.vue')
|
|
},
|
|
methods: {
|
|
formatDate (date) {
|
|
if (!date) return null
|
|
|
|
const [year, month, day] = date.split('-')
|
|
return `${day}-${month}-${year}`
|
|
},
|
|
downloadData(data){
|
|
this.$store.commit('patient/update_loading', true)
|
|
this.$store.dispatch('patient/download_data',{patient:data.bizone,address:data.address})
|
|
},
|
|
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)
|
|
this.$store.commit('patient/update_nik_exist', pat.M_PatientIDNumber)
|
|
|
|
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 : {
|
|
dialog_error: {
|
|
get() {
|
|
return this.$store.state.patient.dialog_error
|
|
},
|
|
set(val) {
|
|
this.$store.commit("patient/update_dialog_error",val)
|
|
}
|
|
},
|
|
error_message: {
|
|
get() {
|
|
return this.$store.state.patient.error_message
|
|
},
|
|
set(val) {
|
|
this.$store.commit("patient/update_error_message",val)
|
|
}
|
|
},
|
|
snackbar() {
|
|
return this.$store.state.patient.snackbar
|
|
},
|
|
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: "STATUS",
|
|
align: "left",
|
|
sortable: false,
|
|
value: "name",
|
|
width: "10%",
|
|
class: "pa-2 red lighten-3 white--text"
|
|
},
|
|
{
|
|
text: "NAMA",
|
|
align: "left",
|
|
sortable: false,
|
|
value: "name",
|
|
width: "25%",
|
|
class: "pa-2 red lighten-3 white--text"
|
|
},
|
|
{
|
|
text: "HP",
|
|
align: "left",
|
|
sortable: false,
|
|
value: "hp",
|
|
width: "15%",
|
|
class: "pa-2 red lighten-3 white--text"
|
|
},
|
|
{
|
|
text: "DOB",
|
|
align: "left",
|
|
sortable: false,
|
|
value: "dob",
|
|
width: "15%",
|
|
class: "pa-2 red lighten-3 white--text"
|
|
},
|
|
{
|
|
text: "ALAMAT",
|
|
align: "left",
|
|
sortable: false,
|
|
value: "address",
|
|
class: "pa-2 red lighten-3 white--text"
|
|
},
|
|
{
|
|
text: "CABANG",
|
|
align: "left",
|
|
width: "10%",
|
|
sortable: false,
|
|
value: "address",
|
|
class: "pa-2 red lighten-3 white--text"
|
|
},
|
|
{
|
|
text: "AKSI",
|
|
align: "center",
|
|
width: "5%",
|
|
sortable: false,
|
|
value: "action",
|
|
class: "pa-2 red lighten-3 white--text"
|
|
}
|
|
],
|
|
};
|
|
}
|
|
}
|
|
</script>
|
|
|