258 lines
10 KiB
Vue
258 lines
10 KiB
Vue
<template>
|
|
<v-layout row justify-center>
|
|
<v-dialog v-model="dialog_national" persistent :width="width_screen" hide-overlay transition="dialog-bottom-transition">
|
|
|
|
|
|
<div class="view" :style="{'min-height':height_screen}">
|
|
<div class="wrapper">
|
|
<table :style="{'height':height_screen}" style="background:white" class="table">
|
|
<thead>
|
|
<tr>
|
|
<th class="sticky-col first-col">Nama</th>
|
|
<th width="150px">No. Identitas</th>
|
|
<th width="100px">Jenis kelamin</th>
|
|
<th width="180px">Tempat Lahir</th>
|
|
<th width="150px">Tanggal Lahir</th>
|
|
<th width="100px">Agama</th>
|
|
<th width="150px">No. HP</th>
|
|
<th width="150px">Email</th>
|
|
<th width="150px">Pekerjaan</th>
|
|
<th width="150px">No Induk Pegawai</th>
|
|
<th width="150px">Jabatan</th>
|
|
<th width="150px">Kedudukan</th>
|
|
<th width="150px">Penanggung Jawab</th>
|
|
<th width="150px">Lokasi</th>
|
|
<th width="200px">Catatan</th>
|
|
<th width="350px">Alamat</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr v-for="patient in patients">
|
|
<td class="sticky-col first-col">
|
|
<p><span v-if="patient.M_PatientPrefix">{{patient.M_PatientPrefix}}</span> <span v-if="patient.M_PatientName">{{patient.M_PatientName}}</span> <span v-if="patient.M_PatientSuffix">{{patient.M_PatientSuffix}}</span></p>
|
|
</td>
|
|
<td>
|
|
<p><span v-if="patient.M_IdTypeName">{{patient.M_IdTypeName}}</span> <span v-if="patient.M_PatientIDNumber">{{patient.M_PatientIDNumber}}</span></p>
|
|
</td>
|
|
<td>
|
|
<p><span v-if="patient.M_SexName">{{patient.M_SexName}}</span></p>
|
|
</td>
|
|
<td>
|
|
<p><span v-if="patient.M_PatientPOB">{{patient.M_PatientPOB}}</span></p>
|
|
</td>
|
|
<td>
|
|
<p><span v-if="patient.M_PatientDOB">{{patient.M_PatientDOB}}</span></p>
|
|
</td>
|
|
<td>
|
|
<p><span v-if="patient.M_ReligionName">{{patient.M_ReligionName}}</span></p>
|
|
</td>
|
|
<td>
|
|
<p><span v-if="patient.M_PatientHP">{{patient.M_PatientHP}}</span></p>
|
|
</td>
|
|
<td>
|
|
<p><span v-if="patient.M_PatientEmail">{{patient.M_PatientEmail}}</span></p>
|
|
</td>
|
|
<td>
|
|
<p><span v-if="patient.M_PatientJob">{{patient.M_PatientJob}}</span></p>
|
|
</td>
|
|
<td>
|
|
<p><span v-if="patient.M_PatientNIK">{{patient.M_PatientNIK}}</span></p>
|
|
</td>
|
|
<td>
|
|
<p><span v-if="patient.M_PatientJabatan">{{patient.M_PatientJabatan}}</span></p>
|
|
</td>
|
|
<td>
|
|
<p><span v-if="patient.M_PatientKedudukan">{{patient.M_PatientKedudukan}}</span></p>
|
|
</td>
|
|
<td>
|
|
<p><span v-if="patient.M_PatientPJ">{{patient.M_PatientPJ}}</span></p>
|
|
</td>
|
|
<td>
|
|
<p><span v-if="patient.M_PatientLocation">{{patient.M_PatientLocation}}</span></p>
|
|
</td>
|
|
<td>
|
|
<p><span v-if="patient.M_PatientNote">{{patient.M_PatientNote}}</span></p>
|
|
</td>
|
|
<td>
|
|
|
|
</td>
|
|
</tr>
|
|
|
|
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
</v-dialog>
|
|
</v-layout>
|
|
</template>
|
|
<style scoped>
|
|
table {
|
|
border-collapse: collapse;
|
|
border-spacing: 0;
|
|
border: 1px solid #ddd;
|
|
}
|
|
|
|
th, td {
|
|
text-align: left;
|
|
padding: 16px;
|
|
}
|
|
|
|
tr:nth-child(even) {
|
|
background-color: #f2f2f2;
|
|
}
|
|
.view {
|
|
margin: auto;
|
|
width: 300px;
|
|
}
|
|
|
|
.wrapper {
|
|
position: relative;
|
|
overflow: auto;
|
|
border: 1px solid black;
|
|
white-space: nowrap;
|
|
background: white;
|
|
}
|
|
|
|
.sticky-col {
|
|
position: -webkit-sticky;
|
|
position: sticky;
|
|
background-color: grey !important;
|
|
color:white;
|
|
}
|
|
|
|
.first-col {
|
|
width: 100px;
|
|
min-width: 100px;
|
|
max-width: 100px;
|
|
left: 0px;
|
|
}
|
|
|
|
.second-col {
|
|
width: 150px;
|
|
min-width: 150px;
|
|
max-width: 150px;
|
|
left: 100px;
|
|
}
|
|
</style>
|
|
|
|
<script>
|
|
module.exports = {
|
|
components : {
|
|
//'patient-search-box' : httpVueLoader('./patientSearchBox.vue'),
|
|
// 'patient-detail': httpVueLoader('./patientDetail.vue'),
|
|
// 'patient-notes' : httpVueLoader('./patientNotes.vue'),
|
|
|
|
},
|
|
data() {
|
|
return {
|
|
width_screen : screen.width+' px',
|
|
height_screen : screen.height+' px',
|
|
patients:[
|
|
{
|
|
"M_PatientID": "874247",
|
|
"M_PatientNoReg": "LAB0069899",
|
|
"M_PatientPrefix": null,
|
|
"M_PatientName": "DENNY HANDOYO",
|
|
"M_PatientSuffix": null,
|
|
"M_PatientHP": "082333349448",
|
|
"M_PatientEmail": "",
|
|
"M_PatientPOB": "SURABAYA",
|
|
"M_PatientPhone": "",
|
|
"M_PatientIDNumber": "3578170804790005",
|
|
"M_PatientDOB": "08-04-1979",
|
|
"M_PatientNote": "",
|
|
"M_PatientNIK": null,
|
|
"M_PatientJabatan": null,
|
|
"M_PatientKedudukan": null,
|
|
"M_PatientPJ": null,
|
|
"M_PatientLocation": null,
|
|
"M_PatientJob": null,
|
|
"M_PatientM_SexID": "1",
|
|
"M_SexName": "Laki - Laki ",
|
|
"M_PatientM_TitleID": "2",
|
|
"M_TitleName": "Tn",
|
|
"M_PatientM_ReligionID": "0",
|
|
"M_ReligionName": null,
|
|
"M_PatientM_IdTypeID": "1",
|
|
"M_IdTypeName": "KTP",
|
|
"status": "active"
|
|
},
|
|
{
|
|
"M_PatientID": "879989",
|
|
"M_PatientNoReg": "LAB0075641",
|
|
"M_PatientPrefix": null,
|
|
"M_PatientName": "DENNY HANDOYO",
|
|
"M_PatientSuffix": null,
|
|
"M_PatientHP": "082333349448",
|
|
"M_PatientEmail": "",
|
|
"M_PatientPOB": "SURABAYA",
|
|
"M_PatientPhone": "",
|
|
"M_PatientIDNumber": "3578170804790005",
|
|
"M_PatientDOB": "08-04-1979",
|
|
"M_PatientNote": "",
|
|
"M_PatientNIK": null,
|
|
"M_PatientJabatan": null,
|
|
"M_PatientKedudukan": null,
|
|
"M_PatientPJ": null,
|
|
"M_PatientLocation": null,
|
|
"M_PatientJob": null,
|
|
"M_PatientM_SexID": "1",
|
|
"M_SexName": "Laki - Laki ",
|
|
"M_PatientM_TitleID": "2",
|
|
"M_TitleName": "Tn",
|
|
"M_PatientM_ReligionID": "0",
|
|
"M_ReligionName": null,
|
|
"M_PatientM_IdTypeID": "1",
|
|
"M_IdTypeName": "KTP",
|
|
"status": "active"
|
|
},
|
|
{
|
|
"M_PatientID": "886903",
|
|
"M_PatientNoReg": "LAB0082553",
|
|
"M_PatientPrefix": null,
|
|
"M_PatientName": "DENNY HANDOYO",
|
|
"M_PatientSuffix": null,
|
|
"M_PatientHP": "082333349448",
|
|
"M_PatientEmail": "",
|
|
"M_PatientPOB": "SURABAYA",
|
|
"M_PatientPhone": "",
|
|
"M_PatientIDNumber": "3578170804790005",
|
|
"M_PatientDOB": "08-04-1979",
|
|
"M_PatientNote": "",
|
|
"M_PatientNIK": null,
|
|
"M_PatientJabatan": null,
|
|
"M_PatientKedudukan": null,
|
|
"M_PatientPJ": null,
|
|
"M_PatientLocation": null,
|
|
"M_PatientJob": null,
|
|
"M_PatientM_SexID": "1",
|
|
"M_SexName": "Laki - Laki ",
|
|
"M_PatientM_TitleID": "2",
|
|
"M_TitleName": "Tn",
|
|
"M_PatientM_ReligionID": "0",
|
|
"M_ReligionName": null,
|
|
"M_PatientM_IdTypeID": "1",
|
|
"M_IdTypeName": "KTP",
|
|
"status": "active"
|
|
}
|
|
]
|
|
};
|
|
},
|
|
computed : {
|
|
dialog_national: {
|
|
get() {
|
|
return this.$store.state.patient.dialog_national
|
|
},
|
|
set(val) {
|
|
this.$store.commit('patient/update_dialog_national',val)
|
|
}
|
|
}
|
|
},
|
|
methods: {
|
|
|
|
}
|
|
}
|
|
</script>
|