fix(03): employee health check tab

This commit is contained in:
puriphatt 2024-07-24 09:08:52 +00:00
parent af828ca107
commit 5e93c5b01c
2 changed files with 22 additions and 17 deletions

View file

@ -83,12 +83,14 @@ onMounted(async () => {
</script>
<template>
<div>
<div class="bordered-b full-width">
<div class="full-height full-width">
<div class="bordered-b">
<q-tabs
inline-label
mobile-arrows
v-model="tab"
dense
class="text-grey"
class="text-grey full-width"
active-class="active-tab"
indicator-color="transparent"
align="left"
@ -112,7 +114,7 @@ onMounted(async () => {
class="content-tab text-capitalize"
style="z-index: 999"
>
<div class="text-weight-medium row items-center">
<div class="text-weight-medium row items-center no-wrap">
{{ $t('formDialogTabCheckup') + (index + 1) }}
<q-btn
v-if="!readonly && employeeCheckup?.length !== 1"
@ -131,7 +133,7 @@ onMounted(async () => {
</q-tabs>
</div>
<q-tab-panels v-model="tab" style="padding-top: 0px">
<q-tab-panels v-model="tab" style="padding-top: 0px" class="col">
<q-tab-panel
v-for="(checkup, index) in employeeCheckup"
v-bind:key="index"
@ -139,16 +141,16 @@ onMounted(async () => {
class="row col-12 items-start"
style="overflow: auto"
>
<div class="col-3 app-text-muted">
<div class="col-md-3 col-12 app-text-muted q-pb-sm">
{{ $t(`formDialogTitleHealthCheck`) }}
</div>
<div class="col-9 row q-col-gutter-md">
<div class="col-md-9 col-12 row q-col-gutter-md">
<q-input
:dense="dense"
outlined
:readonly="readonly"
hide-bottom-space
class="col-6"
class="col-md-6 col-12"
:label="$t('formDialogInputCheckupRes')"
v-model="checkup.checkupResult"
/>
@ -182,7 +184,7 @@ onMounted(async () => {
option-value="id"
option-label="name"
:label="$t('province')"
class="col-3"
class="col-md-3 col-6"
:options="addrOptions.provinceOps"
lazy-rules
/>
@ -191,7 +193,7 @@ onMounted(async () => {
outlined
:readonly="readonly"
hide-bottom-space
class="col-9"
class="col-md-9 col-12"
:label="$t('formDialogInputHospital')"
v-model="checkup.hospitalName"
/>
@ -248,7 +250,7 @@ onMounted(async () => {
:locale="$i18n.locale === 'th-th' ? 'th' : 'en'"
:enableTimePicker="false"
:disabled="readonly"
class="col-3"
class="col-md-3 col-6"
>
<template #year="{ value }">
{{ $i18n.locale === 'th-th' ? value + 543 : value }}
@ -307,7 +309,7 @@ onMounted(async () => {
:locale="$i18n.locale === 'th-th' ? 'th' : 'en'"
:enableTimePicker="false"
:disabled="readonly"
class="col-3"
class="col-md-3 col-6"
>
<template #year="{ value }">
{{ $i18n.locale === 'th-th' ? value + 543 : value }}

View file

@ -146,7 +146,7 @@ const currentTab = defineModel<string>('currentTab');
<!-- body -->
<div
class="col full-height column"
class="col full-height column full-width"
:class="{
dark: $q.dark.isActive,
'surface-2': !employee,
@ -159,11 +159,14 @@ const currentTab = defineModel<string>('currentTab');
style="border-bottom: 1px solid var(--brand-1)"
>
<q-tabs
inline-label
mobile-arrows
dense
class="app-text-muted cancel-overflow"
class="app-text-muted full-width"
v-model="currentTab"
active-class="active-tab"
indicator-color="transparent"
align="left"
>
<q-tab
:id="`tab-${tab.label}`"
@ -178,7 +181,7 @@ const currentTab = defineModel<string>('currentTab');
</div>
<div
class="row q-pa-lg scroll col"
class="row q-pa-lg scroll col full-width"
:class="{
dark: $q.dark.isActive,
'surface-2': !employee,
@ -204,12 +207,12 @@ const currentTab = defineModel<string>('currentTab');
<div
v-if="!noAppBox"
bordered
class="column surface-1 bordered rounded"
class="column surface-1 bordered rounded col"
:class="`${$slots.prepend ? ($q.screen.gt.sm ? 'col-10' : 'col-12') : $slots.append ? 'col-6' : 'col-12'} ${!noPaddingTab && 'q-pt-lg q-pl-lg'} ${$q.screen.gt.xs && 'full-height scroll'}`"
style="padding-right: 0; padding-bottom: 16px"
>
<div
class="row col-12 q-col-gutter-y-md q-mb-md items-start full-height"
class="row col-12 q-col-gutter-y-md q-mb-md items-start full-height full-width"
:class="noPaddingTab ? '' : 'q-pr-md'"
>
<slot name="information"></slot>