231 lines
9.7 KiB
Vue
231 lines
9.7 KiB
Vue
<template>
|
|
<div>
|
|
<v-container class="bg-white rounded-lg" fluid>
|
|
<div class="bg-primary-lighten rounded-lg pa-5">
|
|
<v-row>
|
|
<v-col cols="2">
|
|
<div class="rounded-lg bg-secondary-lighten" style="width: 100px; height: 100px;">
|
|
<!-- placeholder photo -->
|
|
</div>
|
|
</v-col>
|
|
<v-col cols="8">
|
|
<h4>{{ selected.noreg }}</h4>
|
|
<h4 class="text-grey-darken-1">{{ selected.nama }}</h4>
|
|
</v-col>
|
|
<v-col cols="2" align-self="center" class="d-flex justify-end">
|
|
<div
|
|
style="height: 40px; width: 40px; display: flex; align-items: center; justify-content: center;"
|
|
class="rounded-lg pa-2 mr-2 bg-grey-lighten-5 pointer"
|
|
>
|
|
<iconify-icon
|
|
class="text-grey"
|
|
style="font-size: 1.5rem;"
|
|
icon="fluent:arrow-previous-24-regular"
|
|
></iconify-icon>
|
|
</div>
|
|
<div
|
|
style="height: 40px; width: 40px; display: flex; align-items: center; justify-content: center;"
|
|
class="rounded-lg bg-secondary-lighten pa-2 pointer"
|
|
>
|
|
<iconify-icon
|
|
class="text-secondary-darken"
|
|
style="font-size: 1.5rem;"
|
|
icon="fluent:speaker-2-24-regular"
|
|
icon="fluent:arrow-sync-24-regular"
|
|
></iconify-icon>
|
|
</div>
|
|
</v-col>
|
|
</v-row>
|
|
<v-row>
|
|
<v-col cols="10">
|
|
<p class="font-weight-medium">PID</p>
|
|
</v-col>
|
|
<v-col cols="2" class="text-end">
|
|
<p class="font-weight-medium" style="color: slategray;">asd</p>
|
|
</v-col>
|
|
</v-row>
|
|
<v-row no-gutters>
|
|
<v-col cols="4">
|
|
<p class="font-weight-medium">Tanggal Lahir dan Umur</p>
|
|
</v-col>
|
|
<v-col cols="4" class="text-end">
|
|
<p class="font-weight-medium" style="color: slategray;">10-11-1999</p>
|
|
</v-col>
|
|
<v-col cols="4" class="text-end">
|
|
<p class="font-weight-medium" style="color: slategray;">24 Tahun 8 Bulan 21 Hari</p>
|
|
</v-col>
|
|
</v-row>
|
|
</div>
|
|
</v-container>
|
|
<v-container class="bg-white rounded-lg mt-5" fluid>
|
|
<div class="bg-secondary-lighten rounded-lg pa-5 mb-5">
|
|
<v-row>
|
|
<v-col cols="10" align-self="center">
|
|
<h3 class="primary-lighten">STAF: NOVITA</h3>
|
|
</v-col>
|
|
<v-col cols="2" align-self="center" class="d-flex justify-end">
|
|
<div
|
|
style="height: 32px; width: 32px; display: flex; align-items: center; justify-content: center;"
|
|
class="rounded-lg bg-primary-lighten pa-2 pointer"
|
|
>
|
|
<iconify-icon
|
|
class="text-primary-darken"
|
|
style="font-size: 1.5rem;"
|
|
icon="fluent:note-add-24-regular"
|
|
></iconify-icon>
|
|
</div>
|
|
<div
|
|
style="height: 32px; width: 32px; display: flex; align-items: center; justify-content: center;"
|
|
class="rounded-lg bg-success-lighten pa-2 ml-2 pointer"
|
|
>
|
|
<iconify-icon
|
|
class="text-success-darken"
|
|
style="font-size: 1.5rem;"
|
|
icon="fluent:notepad-person-24-regular"
|
|
></iconify-icon>
|
|
</div>
|
|
</v-col>
|
|
</v-row>
|
|
</div>
|
|
<v-data-table
|
|
:items="items"
|
|
:headers="headers"
|
|
hide-default-footer
|
|
>
|
|
<template v-slot:item="{ item }">
|
|
<tr>
|
|
<td>
|
|
<p class="font-weight-medium">{{ item.specimen }}</p>
|
|
</td>
|
|
<td>
|
|
<p class="font-weight-medium">{{ item.barcode }}</p>
|
|
</td>
|
|
<td align="center">
|
|
<div
|
|
style="display: flex; align-items: center; justify-content: center;"
|
|
class="rounded-lg pa-2"
|
|
>
|
|
<div
|
|
class="pointer"
|
|
style="height: 32px; width: 32px; display: flex; align-items: center; justify-content: center;"
|
|
>
|
|
<iconify-icon
|
|
class="text-grey"
|
|
style="font-size: 1.5rem;"
|
|
icon="fluent:dismiss-24-regular"
|
|
></iconify-icon>
|
|
</div>
|
|
<div
|
|
class="pointer"
|
|
style="height: 32px; width: 32px; display: flex; align-items: center; justify-content: center; margin-left: 8px;"
|
|
>
|
|
<iconify-icon
|
|
class="text-grey"
|
|
style="font-size: 1.5rem;"
|
|
icon="fluent:checkmark-24-regular"
|
|
></iconify-icon>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
<td align="center" class="py-1">
|
|
<div class="bg-warning rounded-lg pa-1 text-white">
|
|
06-08-2024 14:17
|
|
</div>
|
|
<div class="bg-grey-lighten-5 rounded-lg pa-1 mt-1">
|
|
00-00-0000 00:00
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
</template>
|
|
</v-data-table>
|
|
<div class="ml-3">
|
|
<v-chip class="mr-5 mt-2" color="primary">DARAH</v-chip>
|
|
<v-chip class="mr-5 mt-2" color="primary">SWAB/SEKRET</v-chip>
|
|
</div>
|
|
</v-container>
|
|
<v-container class="bg-white rounded-lg mt-5" fluid>
|
|
<div class="bg-secondary-lighten rounded-lg pa-5">
|
|
<h3 class="primary-lighten">PEMERIKSAAN</h3>
|
|
</div>
|
|
<div>
|
|
<v-chip class="mr-5 mt-5" color="success">Hematologi Lengkap</v-chip>
|
|
<v-chip class="mr-5 mt-5" color="success">Golongan Darah Rhesus</v-chip>
|
|
<v-chip class="mr-5 mt-5" color="success">Kultur Usap Tenggorok (Vitek)</v-chip>
|
|
</div>
|
|
</v-container>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: "rightcomp",
|
|
components: {
|
|
|
|
},
|
|
mounted() {},
|
|
data() {
|
|
return {
|
|
menu: false,
|
|
visible: false,
|
|
items: [
|
|
{
|
|
specimen: "EDTA Rutin",
|
|
barcode: "055000035LSE1A",
|
|
},
|
|
{
|
|
specimen: "EDTA Rutin",
|
|
barcode: "0550000AA223FF",
|
|
},
|
|
],
|
|
headers: [
|
|
{
|
|
title: "SPECIMEN",
|
|
align: "start",
|
|
sortable: false,
|
|
key: "name",
|
|
width: "20%",
|
|
class: "font-weight-bold",
|
|
},
|
|
{
|
|
title: "BARCODE",
|
|
align: "start",
|
|
sortable: false,
|
|
key: "name",
|
|
width: "20%",
|
|
class: "font-weight-bold",
|
|
},
|
|
{
|
|
title: "REQUIREMENT",
|
|
align: "center",
|
|
sortable: false,
|
|
key: "name",
|
|
width: "20%",
|
|
class: "font-weight-bold",
|
|
},
|
|
{
|
|
title: "AKSI",
|
|
align: "center",
|
|
sortable: false,
|
|
key: "name",
|
|
width: "20%",
|
|
class: "font-weight-bold",
|
|
},
|
|
],
|
|
};
|
|
},
|
|
computed: {
|
|
selected() {
|
|
return this.$store.state.collection.selected_patients;
|
|
}
|
|
},
|
|
methods: {
|
|
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.pointer {
|
|
cursor: pointer;
|
|
}
|
|
</style> |