andy/westone-ui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

add ui specimen collection hardcode

Browse Source
This commit is contained in:
adibwp
2024-08-15 17:07:59 +07:00
parent 281993b01e
commit 13e203fb57
5 changed files with 443 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

187
x-page/components/right.vue Normal file
View File

@@ -0,0 +1,187 @@
<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>055000035LA</h4>
<h4 style="color: slategray;">Tn. Alpha</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 bg-secondary-lighten pa-2"
>
<iconify-icon
class="text-secondary-darken"
style="font-size: 1.5rem;"
icon="fluent:speaker-2-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="1" 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"
>
<iconify-icon
class="text-primary-darken"
style="font-size: 1.5rem;"
icon="fluent:note-add-24-regular"
></iconify-icon>
</div>
</v-col>
<v-col cols="1" 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"
>
<iconify-icon
class="text-primary-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>
<p class="font-weight-medium">-</p>
</td>
<td>
<p class="font-weight-medium">-</p>
</td>
</tr>
</template>
</v-data-table>
<div class="ml-5">
<v-chip class="mr-5 mt-5" color="primary">DARAH</v-chip>
<v-chip class="mr-5 mt-5" 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: "start",
sortable: false,
key: "name",
width: "20%",
class: "font-weight-bold",
},
{
title: "AKSI",
align: "start",
sortable: false,
key: "name",
width: "20%",
class: "font-weight-bold",
},
],
};
},
computed: {
},
methods: {
},
}
</script>
<style scoped></style>