fix(03): form employee health check

This commit is contained in:
puriphatt 2024-08-06 03:14:56 +00:00
parent 6b2c407946
commit 72bce36373
2 changed files with 330 additions and 308 deletions

View file

@ -55,6 +55,11 @@ withDefaults(
showBtnSave: false,
},
);
defineEmits<{
(e: 'save', id: string): void;
}>();
async function fetchProvince() {
const result = await adrressStore.fetchProvince();
@ -67,7 +72,7 @@ async function fetchProvince() {
);
}
function addData() {
function addCheckup() {
const canAdd = checkTabBeforeAdd(employeeCheckup.value || []);
if (canAdd) {
employeeCheckup.value?.push({
@ -131,7 +136,7 @@ const insuranceCompanyFilter = selectFilterOptionRefMod(
</script>
<template>
<div class="full-height full-width column">
<!-- <div class="full-height full-width column">
<div class="bordered-b full-width row no-wrap">
<q-btn
@click="addData"
@ -186,339 +191,358 @@ const insuranceCompanyFilter = selectFilterOptionRefMod(
</div>
</q-tab>
</q-tabs>
</div>
</div> -->
<q-tab-panels v-model="tab" style="padding-top: 0px" class="col">
<!-- <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"
:name="`tab${index}`"
class="row col-12 items-start"
style="overflow: auto"
> -->
<div class="row col-12">
<div class="col-12 q-pb-sm text-weight-bold text-body1">
<q-icon
flat
size="xs"
class="q-pa-sm rounded q-mr-xs"
color="info"
name="mdi-hospital-box"
style="background-color: var(--surface-3)"
/>
{{ $t(`formDialogTitleHealthCheck`) }}
<q-btn icon="mdi-plus" flat dense @click="addCheckup" v-if="!readonly" />
</div>
<div
v-for="(checkup, index) in employeeCheckup"
v-bind:key="index"
class="col-12 row q-col-gutter-sm"
>
<span class="col-12 app-text-muted-2 flex justify-between items-center">
{{ `ครั้งที่ ${index + 1}` }}
<q-btn
v-if="!readonly"
dense
unelevated
id="save-basic-info"
color="primary"
class="q-px-md rounded"
:label="$t('save')"
@click="$emit('save', index)"
/>
</span>
<q-input
lazy-rules="ondemand"
:dense="dense"
outlined
:readonly="readonly"
hide-bottom-space
class="col-5"
:label="$t('formDialogInputCheckupRes')"
v-model="checkup.checkupResult"
/>
<q-select
outlined
clearable
use-input
fill-input
emit-value
map-options
hide-selected
hide-bottom-space
class="col-5"
input-debounce="0"
option-value="value"
option-label="label"
lazy-rules="ondemand"
v-model="checkup.checkupType"
:dense="dense"
:readonly="readonly"
:options="checkupTypeOptions"
:hide-dropdown-icon="readonly"
:for="`${prefixId}-select-checkup-type`"
:label="$t('formDialogInputCheckupType')"
@filter="checkupTypeFilter"
>
<div class="col-md-3 col-12 app-text-muted q-pb-sm">
{{ $t(`formDialogTitleHealthCheck`) }}
</div>
<div class="col-md-9 col-12 row q-col-gutter-md">
<template v-slot:no-option>
<q-item>
<q-item-section class="text-grey">
{{ $t('noResults') }}
</q-item-section>
</q-item>
</template>
</q-select>
<q-select
outlined
clearable
use-input
fill-input
emit-value
map-options
hide-selected
hide-bottom-space
option-value="id"
input-debounce="0"
option-label="name"
lazy-rules="ondemand"
class="col-2"
v-model="checkup.provinceId"
:dense="dense"
:readonly="readonly"
:label="$t('province')"
:hide-dropdown-icon="readonly"
:for="`${prefixId}-select-province`"
:options="provinceOptions"
@filter="provinceFilter"
>
<template v-slot:no-option>
<q-item>
<q-item-section class="text-grey">
{{ $t('noResults') }}
</q-item-section>
</q-item>
</template>
</q-select>
<!-- @filter="provinceFilter" -->
<q-input
lazy-rules="ondemand"
:dense="dense"
outlined
:readonly="readonly"
hide-bottom-space
class="col-5"
:label="$t('formDialogInputHospital')"
v-model="checkup.hospitalName"
:for="`${prefixId}-input-hospital`"
/>
<q-select
outlined
clearable
use-input
fill-input
emit-value
map-options
hide-selected
hide-bottom-space
class="col-5"
input-debounce="0"
option-value="value"
option-label="label"
lazy-rules="ondemand"
v-model="checkup.medicalBenefitScheme"
:dense="dense"
:readonly="readonly"
:hide-dropdown-icon="readonly"
:options="medicalBenefitOptions"
:for="`${prefixId}-select-province`"
:label="$t('formDialogInputMedicalBenefit')"
@filter="medicalBenefitFilter"
>
<template v-slot:no-option>
<q-item>
<q-item-section class="text-grey">
{{ $t('noResults') }}
</q-item-section>
</q-item>
</template>
</q-select>
<q-input
lazy-rules="ondemand"
:label="$t('formDialogInputRemark')"
:dense="dense"
outlined
:readonly="readonly"
hide-bottom-space
class="col-12"
v-model="checkup.remark"
type="textarea"
:for="`${prefixId}-input-remark`"
/>
<VueDatePicker
utc
autoApply
v-model="checkup.coverageStartDate"
:teleport="true"
:dark="$q.dark.isActive"
:locale="$i18n.locale === 'th-th' ? 'th' : 'en'"
:enableTimePicker="false"
:disabled="readonly"
class="col"
>
<template #year="{ value }">
{{ $i18n.locale === 'th-th' ? value + 543 : value }}
</template>
<template #year-overlay-value="{ value }">
{{ $i18n.locale === 'th-th' ? value + 543 : value }}
</template>
<template #trigger>
<q-input
lazy-rules="ondemand"
:id="`${prefixId}-input-birth-date`"
:for="`${prefixId}-input-birth-date`"
:label="$t('formDialogInputCoverageStartDate')"
:dense="dense"
outlined
:readonly="readonly"
hide-bottom-space
class="col-md-6 col-12"
:label="$t('formDialogInputCheckupRes')"
v-model="checkup.checkupResult"
/>
<q-select
outlined
clearable
use-input
fill-input
emit-value
map-options
hide-selected
hide-bottom-space
class="col-6"
input-debounce="0"
option-value="value"
option-label="label"
lazy-rules="ondemand"
v-model="checkup.checkupType"
:dense="dense"
:readonly="readonly"
:options="checkupTypeOptions"
:hide-dropdown-icon="readonly"
:for="`${prefixId}-select-checkup-type`"
:label="$t('formDialogInputCheckupType')"
@filter="checkupTypeFilter"
placeholder="DD/MM/YYYY"
:mask="readonly ? '' : '##/##/####'"
:model-value="
checkup.coverageStartDate
? readonly
? dateFormat(checkup.coverageStartDate)
: dateFormat(checkup.coverageStartDate, false, false, true)
: undefined
"
@update:model-value="
(v) => {
if (v && v.toString().length === 10) {
checkup.coverageStartDate = parseAndFormatDate(v, locale);
}
}
"
>
<template v-slot:no-option>
<q-item>
<q-item-section class="text-grey">
{{ $t('noResults') }}
</q-item-section>
</q-item>
<template v-slot:prepend>
<q-icon
size="xs"
name="mdi-calendar-blank-outline"
class="cursor-pointer"
color="positive"
/>
</template>
</q-select>
<q-select
outlined
clearable
use-input
fill-input
emit-value
map-options
hide-selected
hide-bottom-space
option-value="id"
input-debounce="0"
option-label="name"
lazy-rules="ondemand"
class="col-md-3 col-6"
v-model="checkup.provinceId"
:dense="dense"
:readonly="readonly"
:label="$t('province')"
:hide-dropdown-icon="readonly"
:for="`${prefixId}-select-province`"
:options="provinceOptions"
@filter="provinceFilter"
>
<template v-slot:no-option>
<q-item>
<q-item-section class="text-grey">
{{ $t('noResults') }}
</q-item-section>
</q-item>
<template v-slot:append>
<q-icon
v-if="checkup.coverageStartDate && !readonly"
name="mdi-close-circle"
class="cursor-pointer app-text-muted"
size="sm"
@click.stop="checkup.coverageStartDate = undefined"
/>
</template>
</q-select>
<!-- @filter="provinceFilter" -->
</q-input>
</template>
</VueDatePicker>
<VueDatePicker
utc
autoApply
v-model="checkup.coverageExpireDate"
:teleport="true"
:dark="$q.dark.isActive"
:locale="$i18n.locale === 'th-th' ? 'th' : 'en'"
:enableTimePicker="false"
:disabled="readonly"
class="col"
>
<template #year="{ value }">
{{ $i18n.locale === 'th-th' ? value + 543 : value }}
</template>
<template #year-overlay-value="{ value }">
{{ $i18n.locale === 'th-th' ? value + 543 : value }}
</template>
<template #trigger>
<q-input
lazy-rules="ondemand"
id="input-birth-date"
:label="$t('formDialogInputCoverageExpiretDate')"
:dense="dense"
outlined
:readonly="readonly"
hide-bottom-space
class="col-md-9 col-12"
:label="$t('formDialogInputHospital')"
v-model="checkup.hospitalName"
:for="`${prefixId}-input-hospital`"
/>
<q-input
lazy-rules="ondemand"
:label="$t('formDialogInputRemark')"
:dense="dense"
outlined
:readonly="readonly"
hide-bottom-space
class="col-12"
v-model="checkup.remark"
type="textarea"
:for="`${prefixId}-input-remark`"
/>
<q-select
outlined
clearable
use-input
fill-input
emit-value
map-options
hide-selected
hide-bottom-space
class="col-6"
input-debounce="0"
option-value="value"
option-label="label"
lazy-rules="ondemand"
v-model="checkup.medicalBenefitScheme"
:dense="dense"
:readonly="readonly"
:hide-dropdown-icon="readonly"
:options="medicalBenefitOptions"
:for="`${prefixId}-select-province`"
:label="$t('formDialogInputMedicalBenefit')"
@filter="medicalBenefitFilter"
placeholder="DD/MM/YYYY"
:mask="readonly ? '' : '##/##/####'"
:model-value="
checkup.coverageExpireDate
? readonly
? dateFormat(checkup.coverageExpireDate)
: dateFormat(checkup.coverageExpireDate, false, false, true)
: undefined
"
@update:model-value="
(v) => {
if (v && v.toString().length === 10) {
checkup.coverageExpireDate = parseAndFormatDate(v, locale);
}
}
"
>
<template v-slot:no-option>
<q-item>
<q-item-section class="text-grey">
{{ $t('noResults') }}
</q-item-section>
</q-item>
<template v-slot:prepend>
<q-icon
size="xs"
name="mdi-calendar-blank-outline"
class="cursor-pointer"
color="positive"
/>
</template>
</q-select>
<q-select
outlined
clearable
use-input
fill-input
emit-value
map-options
hide-selected
hide-bottom-space
class="col-6"
input-debounce="0"
option-label="label"
option-value="value"
lazy-rules="ondemand"
v-model="checkup.insuranceCompany"
:dense="dense"
:readonly="readonly"
:hide-dropdown-icon="readonly"
:options="insuranceCompanyOptions"
:for="`${prefixId}-select-province`"
:label="$t('formDialogInputInsuranceCompany')"
@filter="insuranceCompanyFilter"
>
<template v-slot:no-option>
<q-item>
<q-item-section class="text-grey">
{{ $t('noResults') }}
</q-item-section>
</q-item>
<template v-slot:append>
<q-icon
v-if="checkup.coverageExpireDate && !readonly"
name="mdi-close-circle"
class="cursor-pointer app-text-muted"
size="sm"
@click.stop="checkup.coverageExpireDate = undefined"
/>
</template>
</q-select>
<VueDatePicker
utc
autoApply
v-model="checkup.coverageStartDate"
:teleport="true"
:dark="$q.dark.isActive"
:locale="$i18n.locale === 'th-th' ? 'th' : 'en'"
:enableTimePicker="false"
:disabled="readonly"
class="col-md-3 col-6"
>
<template #year="{ value }">
{{ $i18n.locale === 'th-th' ? value + 543 : value }}
</template>
<template #year-overlay-value="{ value }">
{{ $i18n.locale === 'th-th' ? value + 543 : value }}
</template>
<template #trigger>
<q-input
lazy-rules="ondemand"
:id="`${prefixId}-input-birth-date`"
:for="`${prefixId}-input-birth-date`"
:label="$t('formDialogInputCoverageStartDate')"
:dense="dense"
outlined
:readonly="readonly"
placeholder="DD/MM/YYYY"
:mask="readonly ? '' : '##/##/####'"
:model-value="
checkup.coverageStartDate
? readonly
? dateFormat(checkup.coverageStartDate)
: dateFormat(
checkup.coverageStartDate,
false,
false,
true,
)
: undefined
"
@update:model-value="
(v) => {
if (v && v.toString().length === 10) {
checkup.coverageStartDate = parseAndFormatDate(v, locale);
}
}
"
>
<template v-slot:prepend>
<q-icon
size="xs"
name="mdi-calendar-blank-outline"
class="cursor-pointer"
color="positive"
/>
</template>
<template v-slot:append>
<q-icon
v-if="checkup.coverageStartDate && !readonly"
name="mdi-close-circle"
class="cursor-pointer app-text-muted"
size="sm"
@click.stop="checkup.coverageStartDate = undefined"
/>
</template>
</q-input>
</template>
</VueDatePicker>
<VueDatePicker
utc
autoApply
v-model="checkup.coverageExpireDate"
:teleport="true"
:dark="$q.dark.isActive"
:locale="$i18n.locale === 'th-th' ? 'th' : 'en'"
:enableTimePicker="false"
:disabled="readonly"
class="col-md-3 col-6"
>
<template #year="{ value }">
{{ $i18n.locale === 'th-th' ? value + 543 : value }}
</template>
<template #year-overlay-value="{ value }">
{{ $i18n.locale === 'th-th' ? value + 543 : value }}
</template>
<template #trigger>
<q-input
lazy-rules="ondemand"
id="input-birth-date"
:label="$t('formDialogInputCoverageExpiretDate')"
:dense="dense"
outlined
:readonly="readonly"
placeholder="DD/MM/YYYY"
:mask="readonly ? '' : '##/##/####'"
:model-value="
checkup.coverageExpireDate
? readonly
? dateFormat(checkup.coverageExpireDate)
: dateFormat(
checkup.coverageExpireDate,
false,
false,
true,
)
: undefined
"
@update:model-value="
(v) => {
if (v && v.toString().length === 10) {
checkup.coverageExpireDate = parseAndFormatDate(
v,
locale,
);
}
}
"
>
<template v-slot:prepend>
<q-icon
size="xs"
name="mdi-calendar-blank-outline"
class="cursor-pointer"
color="positive"
/>
</template>
<template v-slot:append>
<q-icon
v-if="checkup.coverageExpireDate && !readonly"
name="mdi-close-circle"
class="cursor-pointer app-text-muted"
size="sm"
@click.stop="checkup.coverageExpireDate = undefined"
/>
</template>
</q-input>
</template>
</VueDatePicker>
</q-input>
</template>
</VueDatePicker>
<div class="col-12 row justify-end" style="min-height: 50px">
<q-btn
v-if="!readonly && showBtnSave"
dense
unelevated
id="save-basic-info"
color="primary"
class="q-px-md"
:label="$t('save')"
@click="$emit('save', index)"
/>
</div>
</div>
<q-select
outlined
clearable
use-input
fill-input
emit-value
map-options
hide-selected
hide-bottom-space
class="col-7"
input-debounce="0"
option-label="label"
option-value="value"
lazy-rules="ondemand"
v-model="checkup.insuranceCompany"
:dense="dense"
:readonly="readonly"
:hide-dropdown-icon="readonly"
:options="insuranceCompanyOptions"
:for="`${prefixId}-select-province`"
:label="$t('formDialogInputInsuranceCompany')"
@filter="insuranceCompanyFilter"
>
<template v-slot:no-option>
<q-item>
<q-item-section class="text-grey">
{{ $t('noResults') }}
</q-item-section>
</q-item>
</template>
</q-select>
<q-separator
<!-- <div class="col-12 row justify-end" style="min-height: 50px">
<q-btn
v-if="!readonly && showBtnSave"
dense
unelevated
id="save-basic-info"
color="primary"
class="q-px-md"
:label="$t('save')"
@click="$emit('save', index)"
/>
</div> -->
</div>
</div>
<!-- <q-separator
v-if="separator"
class="col-12 q-mt-xl q-mb-md"
style="padding-block: 0.5px"
/>
</q-tab-panel>
</q-tab-panels>
</div>
</div> -->
</template>
<style scoped>

View file

@ -163,17 +163,15 @@ const currentTab = defineModel<string>('currentTab');
inline-label
mobile-arrows
dense
class="app-text-muted full-width"
class="full-width"
v-model="currentTab"
active-class="active-tab"
indicator-color="transparent"
align="left"
>
<q-tab
:id="`tab-${tab.label}`"
v-for="tab in tabsList"
v-bind:key="tab.name"
class="content-tab text-capitalize"
:id="`tab-${tab.label}`"
class="text-capitalize"
:name="tab.name"
:label="$t(tab.label)"
/>