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

add quick menu, header table

Browse Source
This commit is contained in:
adibwp
2024-08-29 09:31:49 +07:00
parent b5babbfeac
commit 087bb1dc47
9 changed files with 624 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

116
status-patient/components/content.vue Normal file
View File

@@ -0,0 +1,116 @@
<template>
<v-container fluid class="bg-white rounded-lg my-5">
<div class="bg-secondary-lighten rounded-lg pa-5 mb-5">
<v-row>
<v-col cols="11">
<h3>{{ $t('message.table.title') }}</h3>
</v-col>
<v-col cols="1" align="end">
<h3>6</h3>
</v-col>
</v-row>
</div>
<v-data-table
:headers="headers"
hide-default-footer
>
<template v-slot:headers="{ columns }">
<tr>
<template v-for="column in columns" :key="column.key">
<td :class="column.class" :style="{ width: column.width, textAlign: column.align }">
<span>{{ column.title }}</span>
</td>
</template>
</tr>
</template>
</v-data-table>
</v-container>
</template>
<script>
export default {
name: "contentcomp",
components: {},
mounted() {},
data() {
return {
menu: false,
visible: false,
headers : [
{
title: this.$t('message.table.h_no'),
align: "start",
sortable: false,
key: "name",
width: "5%",
class: "font-weight-bold",
},
{
title: this.$t('message.table.h_orderr'),
align: "center",
sortable: false,
key: "name",
width: "15%",
class: "font-weight-bold",
},
{
title: this.$t('message.table.h_pasien'),
align: "center",
sortable: false,
key: "name",
width: "20%",
class: "font-weight-bold",
},
{
title: this.$t('message.table.h_status'),
align: "center",
sortable: false,
key: "name",
width: "10%",
class: "font-weight-bold",
},
{
title: this.$t('message.table.h_sample'),
align: "center",
sortable: false,
key: "name",
width: "10%",
class: "font-weight-bold",
},
{
title: this.$t('message.table.h_proces'),
align: "center",
sortable: false,
key: "name",
width: "10%",
class: "font-weight-bold",
},
{
title: this.$t('message.table.h_resver'),
align: "center",
sortable: false,
key: "name",
width: "10%",
class: "font-weight-bold",
},
{
title: this.$t('message.table.h_resval'),
align: "center",
sortable: false,
key: "name",
width: "10%",
class: "font-weight-bold",
},
{
title: this.$t('message.table.h_printt'),
align: "center",
sortable: false,
key: "name",
width: "10%",
class: "font-weight-bold",
},
]
};
},
}
</script>

114
status-patient/components/filter.vue Normal file
View File

@@ -0,0 +1,114 @@
<template>
<v-container fluid class="bg-white rounded-lg">
<v-row>
<v-col cols="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="$t('message.filter.date')"
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">
<v-text-field
:label="$t('message.filter.noreg')"
variant="outlined"
hide-details
append-inner-icon="mdi-magnify"
></v-text-field>
</v-col>
<v-col cols="2">
<v-autocomplete
:label="$t('message.filter.group')"
variant="outlined"
hide-details
menu-icon="mdi-chevron-down"
:items="temp_dropdown"
></v-autocomplete>
</v-col>
<v-col cols="5"></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 pointer"
>
<iconify-icon
style="font-size: 2rem;"
icon="fluent:search-20-regular"
></iconify-icon>
</div>
</v-col>
</v-row>
</v-container>
</template>
<script>
export default {
name: "filtercomponent",
components: {},
mounted() {
},
data() {
return {
menu: false,
visible: false,
}
},
computed: {
date: {
get() {
return this.$store.state.stored.date;
},
set(val) {
this.$store.commit("setDate", val);
}
},
temp_dropdown: {
get() {
return this.$store.state.stored.temp_dropdown;
}
}
},
methods: {
formatDate() {
if (!this.date) return null;
return moment(this.date).format("DD-MM-YYYY");
},
deFormatedDate(date) {
if (!date) return null;
const [day, month, year] = date.split("-");
return `${year}-${month.padStart(2, "0")}-${day.padStart(2, "0")}`;
}
},
}
</script>
<style scoped>
.pointer {
cursor: pointer;
}
</style>

42
status-patient/components/main.vue Normal file
View File

@@ -0,0 +1,42 @@
<template>
<v-app id="inspire">
<one-navbar></one-navbar>
<v-main>
<quick-menu></quick-menu>
<div class="pa-5 bg-primary-lighten mx-2 rounded-xl" style="height: 100%;">
<one-filter></one-filter>
<one-content></one-content>
</div>
</v-main>
</v-app>
</template>
<script type="module">
import NavbarComponent from "../../globalcomponent/one-navbar.vue";
import QuickMenu from "../../globalcomponent/quick-menu.vue";
import Content from "./content.vue";
import Filter from "./filter.vue";
export default {
name: "Status Pasien",
components: {
"one-navbar": NavbarComponent,
"quick-menu": QuickMenu,
"one-content": Content,
"one-filter": Filter,
},
mounted() {
},
data() {
return {
visible: false
}
},
computed: {
},
methods: {
},
}
</script>