Files
FE_CPONE/test/vuex/one-klinik-resume-medic/components/oneMdPatientDetail.vue
2026-04-27 10:13:31 +07:00

267 lines
9.0 KiB
Vue

<template>
<v-layout class="mb-2" column>
<v-dialog
v-model="dialog_print"
width="80%"
>
<v-card>
<v-card-title
class="title grey lighten-2"
primary-title
>
LAPORAN
<v-spacer></v-spacer>
<v-icon @click="dialog_print = false">close</v-icon>
</v-card-title>
<v-card-text>
<v-layout v-if="reports.length > 1" wrap class="pa-2">
<v-flex xs3>
<v-btn v-for="(report,index) in reports" :key="index" block color="error" @click="openReport(report)" dark >{{report.name}}</v-btn>
</v-flex>
<v-flex xs9 class="pa-2">
<v-card
color="grey lighten-4"
flat
height="550px"
tile
>
<v-toolbar dense>
<v-toolbar-side-icon></v-toolbar-side-icon>
<v-toolbar-title>{{selected_report.name}}</v-toolbar-title>
<v-spacer></v-spacer>
</v-toolbar>
<v-card-text>
<object style="overflow: hidden;" width="100%" height="500px" :data="url_report"></object>
</v-card-text>
</v-card>
</v-flex>
</v-layout>
<v-layout v-if="reports.length == 1" wrap class="pa-2">
<v-flex xs12 class="pa-2">
<v-card>
<object style="overflow: hidden;" width="100%" height="500px" :data="url_report"></object>
</v-card>
</v-flex>
</v-layout>
</v-card-text>
<v-divider></v-divider>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn
color="grey darken-2"
flat
@click="dialog_print = false"
>
Tutup
</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
<v-card>
<v-layout row>
<v-flex xs12>
<v-subheader red--text text--lighten-1> RESUME MEDIS</v-subheader>
<v-divider></v-divider>
<v-layout pa-2 row>
<v-flex xs12 pa-2>
<v-data-table
:headers="headers"
:items="resumemedics"
:loading="progress"
>
<v-progress-linear v-slot:progress color="blue" indeterminate></v-progress-linear>
<template v-slot:items="props">
<td class="text-xs-center">{{ props.item.order_date }}</td>
<td class="text-xs-center">{{ props.item.orderNumber }}</td>
<td class="text-xs-center">
<v-btn block @click="getReports(props.item)" color="error darken-1 text-sm-left" >Lihat Resume medis</v-btn>
</td>
</template>
</v-data-table>
</v-flex>
</v-layout>
</v-flex>
</v-layout>
</v-card>
<patient-photo-dialog></patient-photo-dialog>
</v-layout>
</template>
<style scoped>
table,
td,
th {
border: 1px solid #ddd;
text-align: left;
}
table {
border-collapse: collapse;
width: 100%;
}
th,
td {
padding-top: 5px;
padding-bottom: 5px;
padding-left: 8px;
padding-right: 5px;
}
.mini-input .v-input {
margin-top: 0px;
}
.mini-input .v-input,
.mini-input .v-input--selection-controls,
.mini-input .v-input__slot {
margin-top: 0px;
margin-bottom: 0px;
margin-left: 3px;
}
.mini-input .v-messages {
min-height: 0px;
}
input.fhm-input {
border: 1px solid black;
border-radius: 2px;
-webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.1),
0 0 4px rgba(0, 0, 0, 0.1);
-moz-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.1),
0 0 4px rgba(0, 0, 0, 0.1);
box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.1),
0 0 4px rgba(0, 0, 0, 0.1);
padding: 2px 4px;
background: rgba(255, 255, 255, 0.5);
margin: 0 0 1px 0;
width: 30px;
text-align: center;
}
</style>
<script>
module.exports = {
components : {
'patient-photo-dialog': httpVueLoader('./oneDialogPhoto.vue')
},
data: () => ({
headers: [
{
text: "TANGGAL KUNJUNGAN",
align: "center",
sortable: true,
value: "order_date",
width: "35%",
class: "pa-1 teal lighten-4 "
},
{
text: "NOMOR ORDER",
align: "center",
sortable: true,
value: "orderNUmber",
width: "25%",
class: "pa-1 teal lighten-4 "
},
{
text: "AKSI",
align: "center",
sortable: false,
value: "name",
width: "45%",
class: "pa-1 teal lighten-4 "
},
],
}),
computed: {
selected_report:{
get() {
return this.$store.state.patient.selected_report
},
set(val) {
this.$store.commit("patient/update_selected_report",val)
}
},
reports:{
get() {
return this.$store.state.patient.reports
},
set(val) {
this.$store.commit("patient/update_reports",val)
}
},
url_report:{
get() {
return this.$store.state.patient.url_report
},
set(val) {
this.$store.commit("patient/update_url_report",val)
}
},
dialog_print:{
get() {
return this.$store.state.patient.dialog_print
},
set(val) {
this.$store.commit("patient/update_dialog_print",val)
}
},
progress:{
get() {
return this.$store.state.patient.get_resume_medic
},
set(val) {
this.$store.commit("patient/update_get_resume_medic",val)
}
},
resumemedics:{
get() {
return this.$store.state.patient.resume_medics
},
set(val) {
this.$store.commit("patient/update_resume_medics",val)
}
},
},
methods: {
getReports(order){
this.reports = []
let user = one_user()
let resume_rpt = "/birt/run?__report=report/one/klinik/rekam_medis.rptdesign&__format=pdf&PID="+order.orderID+"&PLang=1&username="+user.M_StaffName+"&tm="
let rpt_resume = {'url':resume_rpt,'name':'Resume Medis'}
this.reports.push(rpt_resume)
if(this.reports.length === 1){
this.openReport(this.reports[0])
}
this.dialog_print = true
},
openReport(report){
this.selected_report = report
var timestamp = new Date().getTime();
console.log(report.url)
let rpt = report.url+timestamp
this.url_report = rpt
},
doDeleteData() {
var prm = {}
prm.M_PatientID = this.$store.state.patient.selected_patient.M_PatientID
prm.M_PatientName = this.xpatientname
this.$store.commit("patient/update_pgrs_save", true)
this.$store.dispatch("patient/delete", prm)
}
}
}
</script>