chamomind/jws-frontend
chamomind/jws-frontend
7
0
Fork 0
Code Issues Projects Releases Packages 1 Wiki Activity Actions

fix(03): employee health check tab

Browse source
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
Download patch file Download diff file Expand all files Collapse all files

26
src/components/03_customer-management/FormEmployeeHealthCheck.vue
View file

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

13
src/components/FormDialog.vue
View file

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