add ui specimen collection hardcode
This commit is contained in:
114
x-page/components/filter.vue
Normal file
114
x-page/components/filter.vue
Normal file
@@ -0,0 +1,114 @@
|
||||
<template>
|
||||
<div>
|
||||
<v-container class="bg-white rounded-lg" fluid>
|
||||
<v-row>
|
||||
<v-col cols="2.2">
|
||||
<v-menu
|
||||
v-model="menu"
|
||||
:close-on-content-click="false"
|
||||
transition="scale-transition"
|
||||
offset-y
|
||||
min-width="auto"
|
||||
max-width="290px"
|
||||
>
|
||||
<template v-slot:activator="{ props }">
|
||||
<v-text-field
|
||||
:model-value="formatDate()"
|
||||
label="Tanggal"
|
||||
prepend-inner-icon="mdi-calendar"
|
||||
hide-details
|
||||
readonly
|
||||
variant="outlined"
|
||||
v-bind="props"
|
||||
></v-text-field>
|
||||
</template>
|
||||
<v-date-picker
|
||||
hide-header
|
||||
show-adjacent-months
|
||||
rounded="lg"
|
||||
color="primary"
|
||||
v-model="date"
|
||||
@update:modelValue="menu=false"
|
||||
></v-date-picker>
|
||||
</v-menu>
|
||||
</v-col>
|
||||
<v-col cols="2.2">
|
||||
<v-text-field
|
||||
label="No Reg / Nama"
|
||||
variant="outlined"
|
||||
hide-details
|
||||
append-inner-icon="mdi-magnify"
|
||||
></v-text-field>
|
||||
</v-col>
|
||||
<v-col cols="2.2">
|
||||
<v-autocomplete
|
||||
label="Kel Pelanggan"
|
||||
variant="outlined"
|
||||
hide-details
|
||||
menu-icon="mdi-chevron-down"
|
||||
:items="['lorem', 'ipsum', 'dolor', 'is', 'amet']"
|
||||
></v-autocomplete>
|
||||
</v-col>
|
||||
<v-col cols="2.2">
|
||||
<v-autocomplete
|
||||
label="Station"
|
||||
variant="outlined"
|
||||
hide-details
|
||||
menu-icon="mdi-chevron-down"
|
||||
:items="['lorem', 'ipsum', 'dolor', 'is', 'amet']"
|
||||
></v-autocomplete>
|
||||
</v-col>
|
||||
<v-col cols="2.2">
|
||||
<v-autocomplete
|
||||
label="Lokasi"
|
||||
variant="outlined"
|
||||
hide-details
|
||||
menu-icon="mdi-chevron-down"
|
||||
:items="['lorem', 'ipsum', 'dolor', 'is', 'amet']"
|
||||
></v-autocomplete>
|
||||
</v-col>
|
||||
<v-col cols="1">
|
||||
<div
|
||||
style="height: 100%; display: flex; align-items: center; justify-content: center;"
|
||||
class="rounded-lg bg-primary pa-2 h-100"
|
||||
>
|
||||
<iconify-icon
|
||||
style="font-size: 2rem;"
|
||||
icon="fluent:search-20-regular"
|
||||
></iconify-icon>
|
||||
</div>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-container>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "filtercomp",
|
||||
components: {},
|
||||
mounted() {
|
||||
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
menu: false,
|
||||
visible: false,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
date: {
|
||||
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
formatDate() {
|
||||
if (!this.date) return null;
|
||||
|
||||
return moment(this.date).format("DD-MM-YYYY");
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped></style>
|
||||
118
x-page/components/left.vue
Normal file
118
x-page/components/left.vue
Normal file
@@ -0,0 +1,118 @@
|
||||
<template>
|
||||
<div>
|
||||
<v-container class="bg-white rounded-lg" fluid>
|
||||
<div class="bg-secondary-lighten rounded-lg pa-5 mb-5">
|
||||
<h3 class="primary-lighten">PASIEN</h3>
|
||||
</div>
|
||||
<v-data-table
|
||||
v-model="selectedItems"
|
||||
:items="items"
|
||||
:headers="headers"
|
||||
hide-default-footer
|
||||
>
|
||||
<template v-slot:item="{ item }">
|
||||
<tr>
|
||||
<td>
|
||||
<p class="font-weight-medium">{{ item.tanggal }}</p>
|
||||
</td>
|
||||
<td>
|
||||
<p class="font-weight-medium">{{ item.noreg }}</p>
|
||||
</td>
|
||||
<td>
|
||||
<p class="font-weight-medium">{{ item.kelpelanggan }}</p>
|
||||
</td>
|
||||
<td>
|
||||
<p class="font-weight-medium">{{ item.nama }}</p>
|
||||
</td>
|
||||
<td>
|
||||
<p class="font-weight-medium">{{ item.status }}</p>
|
||||
</td>
|
||||
</tr>
|
||||
</template>
|
||||
</v-data-table>
|
||||
</v-container>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "leftcomp",
|
||||
components: {},
|
||||
mounted() {
|
||||
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
menu: false,
|
||||
visible: false,
|
||||
items: [
|
||||
{
|
||||
tanggal: "31-07-2024",
|
||||
noreg: "055000035LA",
|
||||
kelpelanggan: "PASIEN MANDIRI",
|
||||
nama: "Tn. Alpha",
|
||||
status: "New",
|
||||
},
|
||||
{
|
||||
tanggal: "31-07-2024",
|
||||
noreg: "055000036LA",
|
||||
kelpelanggan: "PASIEN KLINISI",
|
||||
nama: "Tn. Beta",
|
||||
status: "New",
|
||||
},
|
||||
],
|
||||
selectedItems: [],
|
||||
headers: [
|
||||
{
|
||||
title: "TANGGAL",
|
||||
align: "start",
|
||||
sortable: false,
|
||||
key: "name",
|
||||
width: "20%",
|
||||
class: "font-weight-bold",
|
||||
},
|
||||
{
|
||||
title: "NO. REG",
|
||||
align: "start",
|
||||
sortable: false,
|
||||
key: "name",
|
||||
width: "20%",
|
||||
class: "font-weight-bold",
|
||||
},
|
||||
{
|
||||
title: "KEL. PELANGGAN",
|
||||
align: "start",
|
||||
sortable: false,
|
||||
key: "name",
|
||||
width: "20%",
|
||||
class: "font-weight-bold",
|
||||
},
|
||||
{
|
||||
title: "NAMA",
|
||||
align: "start",
|
||||
sortable: false,
|
||||
key: "name",
|
||||
width: "20%",
|
||||
class: "font-weight-bold",
|
||||
},
|
||||
{
|
||||
title: "STATUS",
|
||||
align: "start",
|
||||
sortable: false,
|
||||
key: "name",
|
||||
width: "20%",
|
||||
class: "font-weight-bold",
|
||||
},
|
||||
],
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
|
||||
},
|
||||
methods: {
|
||||
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped></style>
|
||||
@@ -3,7 +3,15 @@
|
||||
<one-navbar></one-navbar>
|
||||
<v-main>
|
||||
<div class="pa-5 bg-primary-lighten ml-2 rounded-xl h-100">
|
||||
|
||||
<one-filter></one-filter>
|
||||
<v-row>
|
||||
<v-col cols="12" md="6" sm="12" xs="12" class="mt-5">
|
||||
<one-left></one-left>
|
||||
</v-col>
|
||||
<v-col cols="12" md="6" sm="12" xs="12" class="mt-5">
|
||||
<one-right></one-right>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</div>
|
||||
</v-main>
|
||||
</v-app>
|
||||
@@ -11,20 +19,28 @@
|
||||
|
||||
<script type="module">
|
||||
import NavbarComponent from "../../globalcomponent/one-navbar.vue";
|
||||
import FilterComponent from "./filter.vue";
|
||||
import LeftComponent from "./left.vue";
|
||||
import RightComponent from "./right.vue";
|
||||
export default {
|
||||
name: "x-page"
|
||||
name: "x-page",
|
||||
components: {
|
||||
"one-navbar": NavbarComponent,
|
||||
}
|
||||
"one-filter": FilterComponent,
|
||||
"one-left": LeftComponent,
|
||||
"one-right": RightComponent,
|
||||
},
|
||||
mounted() {},
|
||||
data() {
|
||||
return {
|
||||
visible: false,
|
||||
}
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
|
||||
},
|
||||
computed: {},
|
||||
methods: {
|
||||
|
||||
|
||||
},
|
||||
};
|
||||
</script>
|
||||
187
x-page/components/right.vue
Normal file
187
x-page/components/right.vue
Normal 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>
|
||||
@@ -45,7 +45,7 @@
|
||||
// }
|
||||
|
||||
const options = {
|
||||
modulesCache: {
|
||||
moduleCache: {
|
||||
vue: Vue,
|
||||
},
|
||||
getFile(url) {
|
||||
@@ -82,7 +82,7 @@
|
||||
return {
|
||||
visible: false,
|
||||
bg_src: "",
|
||||
loading: false, // Initialize loading state
|
||||
loading: false,
|
||||
};
|
||||
},
|
||||
|
||||
|
||||
Reference in New Issue
Block a user