Files
FE_CPONE/test/vuex/cpone-masterdata-patient/components/oneMdPatientList.vue
2026-04-27 10:13:31 +07:00

700 lines
30 KiB
Vue

<template>
<v-layout class="fill-height" column>
<!-- dialog confirmation start -->
<v-dialog v-model="dialogconfirmationdeletex" persistent max-width="290">
<v-card>
<v-card-title dark class="headline error pt-2 pb-2" primary-title style="color:white">
<h4 dark>Konfirmasi</h4>
</v-card-title>
<v-card-text>
{{msgconfirmationdeletex}}
</v-card-text>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn small color="error darken-1 text-sm-left" flat @click="doDeleteData()">Hapus</v-btn>
<v-btn small color="primary darken-1 text-sm-right" flat @click="dialogconfirmationdeletex = false">Batal</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
<!-- dialog confirmation end -->
<v-dialog v-model="dialogsuccess" persistent max-width="290">
<v-card>
<v-card-title color="success" class="headline">Berhasil !</v-card-title>
<v-card-text>
{{ msgsuccess }}
</v-card-text>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn color="green darken-1" flat @click="closeDialogSuccess">OK</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
<v-dialog v-model="dialogsuccessorder" persistent max-width="290">
<v-card>
<v-card-title color="success" class="headline">Berhasil !</v-card-title>
<v-card-text>
<h1>{{ nomor_order }}</h1>
</v-card-text>
<v-card-actions>
<v-btn color="grey darken-1" flat @click="dialogsuccessorder = false">Tutup</v-btn>
<v-spacer></v-spacer>
<v-btn color="green darken-1" flat @click="goToPay()">Bayar</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
<v-card class="mb-2 pa-2 searchbox">
<v-layout row>
<v-flex xs1>
<span @click="setNewPatient"
class="icon-medium-fill-base xs1 white--text primary ml-1 icon-add"></span>
</v-flex>
<!-- <v-flex xs3>
<v-text-field class="xs3 ma-1" label="PID" outline @keyup.enter="searchPatient" v-model="snorm"
hide-details></v-text-field>
</v-flex> -->
<v-flex xs11>
<v-text-field class="xs6 ma-1" label="Nama" outline
@keyup.enter="searchPatient" v-model="name" hide-details></v-text-field>
</v-flex>
<!-- <span @click="searchPatient" class="icon-medium-fill-base xs1 white--text success iconsearch-search"></span>-->
</v-layout>
<v-layout row v-if="onsearch"><v-progress-linear :indeterminate="true"></v-progress-linear></v-layout>
</v-card>
<v-card>
<v-layout row>
<v-flex xs12 pl-2 pr-2 pt-2 pb-2>
<v-data-table :headers="headers" :items="patients" :loading="isLoading" hide-actions
class="elevation-1">
<template slot="items" slot-scope="props">
<td v-bind:class="{ 'blue lighten-4': props.item.divider === 'Y', 'amber lighten-4': props.item.selected, 'amber lighten-4': isSelected(props.item) }"
class="text-xs-left pa-2" @click="selectMe(props.item)">{{ props.item.M_PatientName }}</td>
<td v-bind:class="{ 'blue lighten-4': props.item.divider === 'Y', 'amber lighten-4': props.item.selected, 'amber lighten-4': isSelected(props.item) }"
class="text-xs-left pa-2" @click="selectMe(props.item)">{{ props.item.M_PatientHp }}</td>
<td v-bind:class="{ 'blue lighten-4': props.item.divider === 'Y', 'amber lighten-4': props.item.selected, 'amber lighten-4': isSelected(props.item) }"
class="text-xs-center pa-2" @click="selectMe(props.item)">{{ props.item.M_PatientGender }}</td>
<td v-bind:class="{ 'blue lighten-4': props.item.divider === 'Y', 'amber lighten-4': props.item.selected, 'amber lighten-4': isSelected(props.item) }"
class="text-xs-left pa-2" @click="selectMe(props.item)">{{ props.item.M_PatientAddress }}</td>
<td v-bind:class="{ 'blue lighten-4': props.item.divider === 'Y', 'amber lighten-4': props.item.selected, 'amber lighten-4': isSelected(props.item) }"
class="text-xs-left pa-2" @click="selectMe(props.item)">
<v-btn
style="min-width:25px;margin:0" @click="deleteData(props.item)" small color="error"><v-icon small>close</v-icon></v-btn>
</td>
</template>
</v-data-table>
<div class="text-xs-center pt-2">
<v-btn :loading="isLoading" dark v-if="show_more" @click="showMore()" small color="blue darken-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-pagination style="margin-top:10px;margin-bottom:10px" :total-visible="15" v-model="curr_page" :length="xtotal_page"></v-pagination>-->
</v-flex>
</v-layout>
</v-card>
<!-- <v-card class="mt-2 mb-2">
<v-layout class="pa-2" row>
<v-flex xs9 class="mr-2">
<v-textarea auto-grow rows="1" v-model="keluhan" label="Keluhan" hide-details>
</v-textarea>
</v-flex>
<v-flex xs3 class="pt-1">
<v-text-field v-model="queueNumber" label="Nomor Antrian" hide-details></v-text-field>
</v-flex>
</v-layout>
</v-card> -->
<!-- <v-card>
<v-layout class="pa-2" row>
<v-flex xs12>
<v-btn @click="saveOrder()" v-if="!_.isEmpty(selected_patient)"
:disabled="pgrs_save || _.isEmpty(selected_patient)" block dark color="red lighten-2">Simpan</v-btn>
<v-btn color="grey" v-if="_.isEmpty(selected_patient)" dark block>Simpan</v-btn>
</v-flex>
</v-layout>
</v-card> -->
<one-dialog-alert :status="openalertconfirmation" :msg="msgalertconfirmation"
@forget-dialog-alert="forgetAlertConfirmation()"
@close-dialog-alert="closeAlertConfirmation()"></one-dialog-alert>
</v-layout>
</template>
<style scoped>
.searchbox .v-input.v-text-field .v-input__slot {
min-height: 60px;
}
.searchbox .v-btn {
min-height: 60px;
}
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-info': httpVueLoader('../../common/oneDialogInfo.vue'),
'one-dialog-alert': httpVueLoader('../../common/oneDialogAlert.vue')
},
mounted() {
//this.$store.dispatch('patient/getprovinces')
// this.$store.dispatch("patient/getsexreg")
this.$store.dispatch("patient/search", {
search: this.name,
snorm: this.snorm,
current_page: this.curr_page,
lastid: -1
})
var url_string = window.location.href
var url = new URL(url_string);
var queue = url.searchParams.get("que")
var queueID = url.searchParams.get("id_queue")
if (queue) {
this.queueNumber = queue;
// this.$store.dispatch("patient/getdoctors", { orderNumber: id })
}
if (queueID) {
this.queueID = queueID;
// this.$store.dispatch("patient/getdoctors", { orderNumber: id })
}
},
methods: {
setNewPatient() {
this.$store.commit("patient/update_patient_prefix", "")
this.$store.commit("patient/update_patient_prefix2", "")
this.$store.commit("patient/update_patient_name", "")
this.$store.commit("patient/update_patient_suffix", "")
this.$store.commit("patient/update_patient_suffix2", "")
this.$store.commit("patient/update_selected_title", {})
this.$store.commit("patient/update_noidentitas", "")
this.$store.commit("patient/update_inp_CorporateAddress", "")
this.$store.commit("patient/update_hp", "")
this.$store.commit("patient/update_email", "")
this.$store.commit("patient/update_selected_sex", {})
this.$store.commit("patient/update_dob", "")
this.$store.commit("patient/update_selected_bloodtype", {})
this.$store.commit("patient/update_selected_bloodrh", {})
this.$store.commit("patient/update_selected_education", {})
this.$store.commit("patient/update_selected_citizenship", {})
this.$store.commit("patient/update_selected_etnicity", {})
this.$store.commit("patient/update_selected_religion", {})
this.$store.commit("patient/update_selected_kartuidentitas", {})
this.$store.commit("patient/update_selected_specialist", {})
this.$store.commit("patient/update_inp_CorporateAddressState", "")
this.$store.commit("patient/update_inp_CorporateAddressVillage", "")
this.$store.commit("patient/update_inp_CorporateAddressState", "")
this.$store.commit("patient/update_inp_CorporateAddressCity", "")
this.$store.commit("patient/update_inp_CorporateAddressDistrict", "")
this.$store.commit("patient/update_inp_CorporateAddressRT", "")
this.$store.commit("patient/update_inp_CorporateAddressRW", "")
this.$store.commit("patient/update_selected_countryCb", {})
this.$store.commit("patient/update_ageYear", 0)
this.$store.commit("patient/update_ageMonth", 0)
this.$store.commit("patient/update_ageDay", 0)
this.$store.commit('photo/update_photo_url', this.$store.state.photo.default_photo_url)
this.$store.commit("patient/update_no_save", 0)
},
doDeleteData(){
// console.log('delete process')
var prm = {}
prm.M_PatientID = this.$store.state.patient.selected_patient.M_PatientID
prm.M_PatientName = this.$store.state.patient.selected_patient.M_PatientName
this.$store.dispatch("patient/deletev0", prm)
},
deleteData(row){
console.log('item delete ', row)
this.$store.commit("patient/update_selected_patient", row)
console.log(this.$store.state.patient.selected_patient)
let msg = "Yakin, akan menghapus data doctor " + this.$store.state.patient.selected_patient.M_PatientName + " ?"
this.$store.commit("patient/update_msg_confirmation_deletex", msg)
this.$store.commit("patient/update_dialog_confirmation_deletex", true)
},
goToPay() {
this.dialogsuccessorder = false
location.replace("/one-ui/test/vuex/one-fo-cashier-klinik/?id=" + this.nomor_order)
},
saveOrder() {
this.$store.commit('patient/update_pgrs_save', true)
this.$store.dispatch("patient/saveorder", {
patient: this.selected_patient,
keluhan: this.keluhan,
queueNumber: this.queueNumber,
queueID: this.queueID
})
},
showMore() {
if (!this.isLoading) {
this.$store.commit('patient/update_search_status', true)
var xnow = this.curr_page
this.curr_page = xnow + 1
}
},
isSelected(p) {
return p.M_PatientID == this.$store.state.patient.selected_patient.M_PatientID
},
searchPatient() {
console.log(this.name)
this.$store.dispatch("patient/search", {
search: this.name,
snorm: this.snorm,
current_page: 1,
lastid: -1
})
this.$store.commit("patient/update_current_page", 1)
},
selectMe(pat) {
// Photo module
// clear form
this.$store.commit("patient/update_patient_prefix", "")
this.$store.commit("patient/update_patient_prefix2", "")
this.$store.commit("patient/update_patient_name", "")
this.$store.commit("patient/update_patient_suffix", "")
this.$store.commit("patient/update_patient_suffix2", "")
this.$store.commit("patient/update_selected_title", {})
this.$store.commit("patient/update_noidentitas", "")
this.$store.commit("patient/update_inp_CorporateAddress", "")
this.$store.commit("patient/update_hp", "")
this.$store.commit("patient/update_email", "")
this.$store.commit("patient/update_selected_sex", {})
this.$store.commit("patient/update_dob", "")
this.$store.commit("patient/update_selected_bloodtype", {})
this.$store.commit("patient/update_selected_bloodrh", {})
this.$store.commit("patient/update_selected_education", {})
this.$store.commit("patient/update_selected_citizenship", {})
this.$store.commit("patient/update_selected_etnicity", {})
this.$store.commit("patient/update_selected_religion", {})
this.$store.commit("patient/update_selected_kartuidentitas", {})
this.$store.commit("patient/update_selected_specialist", {})
this.$store.commit("patient/update_inp_CorporateAddressState", "")
this.$store.commit("patient/update_inp_CorporateAddressVillage", "")
this.$store.commit("patient/update_inp_CorporateAddressState", "")
this.$store.commit("patient/update_inp_CorporateAddressCity", "")
this.$store.commit("patient/update_inp_CorporateAddressDistrict", "")
this.$store.commit("patient/update_inp_CorporateAddressRT", "")
this.$store.commit("patient/update_inp_CorporateAddressRW", "")
this.$store.commit("patient/update_selected_countryCb", {})
this.$store.commit("patient/update_ageYear", 0)
this.$store.commit("patient/update_ageMonth", 0)
this.$store.commit("patient/update_ageDay", 0)
// clear form
if (this.$store.state.patient.no_save == 0) {
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))
console.log('data edit doctor',pat)
this.$store.commit("patient/update_selected_patient", pat)
this.$store.commit("patient/update_patient_prefix", pat.M_PatientPrefix)
this.$store.commit("patient/update_patient_prefix2", pat.M_PatientPrefix2)
this.$store.commit("patient/update_patient_name", pat.M_PatientName)
this.$store.commit("patient/update_patient_suffix", pat.M_PatientSuffix)
this.$store.commit("patient/update_patient_suffix2", pat.M_PatientSuffix2)
this.$store.commit("patient/update_patient_suffix2", pat.M_PatientSuffix2)
if(pat.title.length > 0){
this.$store.commit("patient/update_selected_title", {
M_TitleID: pat.title[0].M_TitleID,
M_TitleName: pat.title[0].M_TitleName,
})
} else{
this.$store.commit("patient/update_selected_title", {})
}
this.$store.commit("patient/update_noidentitas", pat.M_PatientIdentifierValue)
this.$store.commit("patient/update_inp_CorporateAddress", pat.M_PatientAddress)
this.$store.commit("patient/update_hp", pat.M_PatientHp)
this.$store.commit("patient/update_email", pat.M_PatientEmail)
if(pat.M_PatientGender != ""){
this.$store.commit("patient/update_selected_sex", {
M_PatientGender: pat.M_PatientGender
})
}
if(pat.M_PatientDOB != "00-00-0000"){
this.$store.commit("patient/update_dob", pat.M_PatientDOB)
}
if(pat.bloodtype.length > 0){
this.$store.commit("patient/update_selected_bloodtype", {
code:pat.bloodtype[0].code,
display:pat.bloodtype[0].display,
display_en:pat.bloodtype[0].display_en,
code_system:pat.bloodtype[0].code_system,
})
}
if(pat.bloodrhesus.length > 0){
this.$store.commit("patient/update_selected_bloodrh", {
code:pat.bloodrhesus[0].code,
display:pat.bloodrhesus[0].display,
display_en:pat.bloodrhesus[0].display_en,
code_system:pat.bloodrhesus[0].code_system,
})
}
if(pat.education.length > 0){
this.$store.commit("patient/update_selected_education", {
code:pat.education[0].code,
display:pat.education[0].display,
display_en:pat.education[0].display_en,
code_system:pat.education[0].code_system,
})
}
if(pat.kewarganegaraan.records[0].M_PatientCitizenship != ""){
this.$store.commit("patient/update_selected_citizenship", {
M_PatientCitizenship: pat.kewarganegaraan.records[0].M_PatientCitizenship
})
}
if(pat.etnicity.length > 0){
this.$store.commit("patient/update_selected_etnicity", {
code:pat.etnicity[0].code,
display:pat.etnicity[0].display,
display_en:pat.etnicity[0].display_en,
code_system:pat.etnicity[0].code_system,
})
}
if(pat.religion.length > 0){
this.$store.commit("patient/update_selected_religion", {
code:pat.religion[0].code,
display:pat.religion[0].display,
display_en:pat.religion[0].display_en,
code_system:pat.religion[0].code_system,
})
}
if(pat.identifier.length > 0){
this.$store.commit("patient/update_selected_kartuidentitas", {
code:pat.identifier[0].code,
display:pat.identifier[0].display,
display_en:pat.identifier[0].display_en,
code_system:pat.identifier[0].code_system,
})
}
if(pat.specialist.length > 0){
this.$store.commit("patient/update_selected_specialist", {
M_SpecialistID:pat.specialist[0]. M_SpecialistID,
M_SpecialistName:pat.specialist[0].M_SpecialistName,
})
}
this.$store.commit("patient/update_inp_CorporateAddressState", pat.M_PatientAddressState)
this.$store.commit("patient/update_inp_CorporateAddressVillage", pat.M_PatientAddressVillage)
this.$store.commit("patient/update_inp_CorporateAddressState", pat.M_PatientAddressState)
this.$store.commit("patient/update_inp_CorporateAddressCity", pat.M_PatientAddressCity)
this.$store.commit("patient/update_inp_CorporateAddressDistrict", pat.M_PatientAddressDistrict)
this.$store.commit("patient/update_inp_CorporateAddressRT", pat.M_PatientAddressRT)
this.$store.commit("patient/update_inp_CorporateAddressRW", pat.M_PatientAddressRW)
if(pat.country.length > 0){
this.$store.commit("patient/update_selected_countryCb", {
code:pat.country[0].code,
display:pat.country[0].display,
display_en:pat.country[0].display_en,
code_system:pat.country[0].code_system,
})
}
this.$store.commit("patient/update_errors", [])
this.$store.commit("patient/update_act", 'edit')
} else {
this.$store.commit("patient/update_open_alert_confirmation", true)
}
},
closeAlertConfirmation() {
this.$store.commit("patient/update_open_alert_confirmation", false)
},
forgetAlertConfirmation() {
this.$store.commit("patient/update_no_save", 0)
this.$store.commit("patient/update_open_alert_confirmation", false)
},
updateAlert_success(val) {
this.$store.commit("patient/update_alert_success", val)
},
setNewPatientOld() {
this.$store.commit("patient/update_selected_patient", {})
this.$store.commit("patient/update_norm", '')
this.$store.commit("patient/update_patient_name", '')
this.$store.commit("patient/update_selected_title", {})
this.$store.commit("patient/update_selected_sex", {})
this.$store.commit("patient/update_selected_religion", {})
this.$store.commit("patient/update_dob", '')
this.$store.commit("patient/update_hp", '')
this.$store.commit("patient/update_phone", '')
this.$store.commit("patient/update_email", '')
this.$store.commit("patient/update_pob", '')
this.$store.commit("patient/update_selected_kartuidentitas", {})
this.$store.commit("patient/update_noidentitas", '')
this.$store.commit("patient/update_note", '')
this.$store.commit("patient/update_nik", '')
this.$store.commit("patient/update_jabatan", '')
this.$store.commit("patient/update_kedudukan", '')
this.$store.commit("patient/update_pj", '')
this.$store.commit("patient/update_location", '')
this.$store.commit("patient/update_job", '')
this.$store.commit("patient/update_addresses", [])
this.$store.commit("patient/update_address", '')
this.$store.commit("patient/update_selected_patient", {})
this.$store.commit('photo/update_photo_url', this.$store.state.photo.default_photo_url)
this.$store.commit("patient/update_no_save", 0)
},
closeDialogSuccess() {
this.setNewPatient()
this.$store.commit("patient/update_patients", [])
// this.$store.dispatch("patient/getsexreg")
this.$store.dispatch("patient/search", {
search: this.name,
snorm: this.snorm,
current_page: 1,
lastid: -1
})
this.dialogsuccess = false
}
},
computed: {
dialogconfirmationdeletex: {
get() {
return this.$store.state.patient.dialog_confirmation_deletex
},
set(val) {
this.$store.commit("patient/update_dialog_confirmation_deletex", val)
}
},
msgconfirmationdeletex() {
return this.$store.state.patient.msg_confirmation_deletex
},
dialogsuccessorder: {
get() {
return this.$store.state.patient.dialogsuccessorder
},
set(val) {
this.$store.commit("patient/update_dialogsuccessorder", val)
}
},
nomor_order: {
get() {
return this.$store.state.patient.nomor_order
},
set(val) {
this.$store.commit("patient/update_nomor_order", val)
}
},
selected_patient: {
get() {
return this.$store.state.patient.selected_patient
},
set(val) {
this.$store.commit("patient/update_selected_patient", val)
}
},
keluhan: {
get() {
return this.$store.state.patient.keluhan
},
set(val) {
this.$store.commit("patient/update_keluhan", val)
}
},
queueNumber: {
get() {
return this.$store.state.patient.queueNumber
},
set(val) {
this.$store.commit("patient/update_queueNumber", val)
}
},
queueID: {
get() {
return this.$store.state.patient.queueID
},
set(val) {
this.$store.commit("patient/update_queueID", val)
}
},
pgrs_save() {
return this.$store.state.patient.pgrs_save
},
onsearch() {
return this.$store.state.patient.onsearch
},
dialogsuccess: {
get() {
return this.$store.state.patient.dialog_success
},
set(val) {
this.$store.commit("patient/update_dialog_success", val)
}
},
msgsuccess() {
return this.$store.state.patient.msg_success
},
snackbar: {
get() {
return this.$store.state.patient.alert_success
},
set(val) {
this.$store.commit("patient/update_alert_success", val)
}
},
isLoading() {
return this.$store.state.patient.search_status == 1
},
patients() {
return this.$store.state.patient.patients
},
totalpatient() {
return this.$store.state.patient.total_patient
},
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", {
search: this.name,
snorm: this.snorm,
current_page: val,
lastid: -1
})
}
},
xtotal_page: {
get() {
return this.$store.state.patient.total_patient
},
set(val) {
this.$store.commit("patient/update_total_patient", val)
}
},
openalertconfirmation: {
get() {
return this.$store.state.patient.open_alert_confirmation
},
set(val) {
this.$store.commit("patient/update_open_alert_confirmation", val)
}
},
show_more() {
return this.$store.state.patient.show_more
},
},
data() {
return {
msgalertconfirmation: "Perubahan yang telah dilakukan belum disimpan dong !",
items: [],
name: '',
snorm: '',
page: 1,
headers: [
{
text: "NAMA",
align: "left",
sortable: false,
value: "lab",
width: "15%",
class: "pa-2 blue darken-2 white--text"
},
{
text: "NO HP",
align: "center",
sortable: false,
value: "name",
width: "15%",
class: "pa-2 blue darken-2 white--text"
},
{
text: "JENIS KELAMIN",
align: "left",
sortable: false,
value: "status",
width: "15%",
class: "pa-2 blue darken-2 white--text"
},
{
text: "ALAMAT",
align: "left",
sortable: false,
value: "status",
width: "20%",
class: "pa-2 blue darken-2 white--text"
},
{
text: "AKSI",
align: "left",
sortable: false,
value: "status",
width: "10%",
class: "pa-2 blue darken-2 white--text"
}
],
pagination: {
descending: false,
page: 1,
rowsPerPage: 5,
sortBy: 'M_PatientName',
totalItems: this.$store.state.patient.total_patients
}
};
}
}
</script>