fix(03): form employee health check
This commit is contained in:
puriphatt
parent
6b2c407946
commit
72bce36373
2 changed files with 330 additions and 308 deletions
|
|
@ -55,6 +55,11 @@ withDefaults(
|
||||||
showBtnSave: false,
|
showBtnSave: false,
|
||||||
},
|
},
|
||||||
);
|
);
|
||||||
|
|
||||||
|
defineEmits<{
|
||||||
|
(e: 'save', id: string): void;
|
||||||
|
}>();
|
||||||
|
|
||||||
async function fetchProvince() {
|
async function fetchProvince() {
|
||||||
const result = await adrressStore.fetchProvince();
|
const result = await adrressStore.fetchProvince();
|
||||||
|
|
||||||
|
|
@ -67,7 +72,7 @@ async function fetchProvince() {
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
function addData() {
|
function addCheckup() {
|
||||||
const canAdd = checkTabBeforeAdd(employeeCheckup.value || []);
|
const canAdd = checkTabBeforeAdd(employeeCheckup.value || []);
|
||||||
if (canAdd) {
|
if (canAdd) {
|
||||||
employeeCheckup.value?.push({
|
employeeCheckup.value?.push({
|
||||||
|
|
@ -131,7 +136,7 @@ const insuranceCompanyFilter = selectFilterOptionRefMod(
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div class="full-height full-width column">
|
<!-- <div class="full-height full-width column">
|
||||||
<div class="bordered-b full-width row no-wrap">
|
<div class="bordered-b full-width row no-wrap">
|
||||||
<q-btn
|
<q-btn
|
||||||
@click="addData"
|
@click="addData"
|
||||||
|
|
@ -186,339 +191,358 @@ const insuranceCompanyFilter = selectFilterOptionRefMod(
|
||||||
</div>
|
</div>
|
||||||
</q-tab>
|
</q-tab>
|
||||||
</q-tabs>
|
</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
|
<q-tab-panel
|
||||||
v-for="(checkup, index) in employeeCheckup"
|
v-for="(checkup, index) in employeeCheckup"
|
||||||
v-bind:key="index"
|
v-bind:key="index"
|
||||||
:name="`tab${index}`"
|
:name="`tab${index}`"
|
||||||
class="row col-12 items-start"
|
class="row col-12 items-start"
|
||||||
style="overflow: auto"
|
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">
|
<template v-slot:no-option>
|
||||||
• {{ $t(`formDialogTitleHealthCheck`) }}
|
<q-item>
|
||||||
</div>
|
<q-item-section class="text-grey">
|
||||||
<div class="col-md-9 col-12 row q-col-gutter-md">
|
{{ $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
|
<q-input
|
||||||
lazy-rules="ondemand"
|
lazy-rules="ondemand"
|
||||||
|
:id="`${prefixId}-input-birth-date`"
|
||||||
|
:for="`${prefixId}-input-birth-date`"
|
||||||
|
:label="$t('formDialogInputCoverageStartDate')"
|
||||||
:dense="dense"
|
:dense="dense"
|
||||||
outlined
|
outlined
|
||||||
:readonly="readonly"
|
:readonly="readonly"
|
||||||
hide-bottom-space
|
placeholder="DD/MM/YYYY"
|
||||||
class="col-md-6 col-12"
|
:mask="readonly ? '' : '##/##/####'"
|
||||||
:label="$t('formDialogInputCheckupRes')"
|
:model-value="
|
||||||
v-model="checkup.checkupResult"
|
checkup.coverageStartDate
|
||||||
/>
|
? readonly
|
||||||
<q-select
|
? dateFormat(checkup.coverageStartDate)
|
||||||
outlined
|
: dateFormat(checkup.coverageStartDate, false, false, true)
|
||||||
clearable
|
: undefined
|
||||||
use-input
|
"
|
||||||
fill-input
|
@update:model-value="
|
||||||
emit-value
|
(v) => {
|
||||||
map-options
|
if (v && v.toString().length === 10) {
|
||||||
hide-selected
|
checkup.coverageStartDate = parseAndFormatDate(v, locale);
|
||||||
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"
|
|
||||||
>
|
>
|
||||||
<template v-slot:no-option>
|
<template v-slot:prepend>
|
||||||
<q-item>
|
<q-icon
|
||||||
<q-item-section class="text-grey">
|
size="xs"
|
||||||
{{ $t('noResults') }}
|
name="mdi-calendar-blank-outline"
|
||||||
</q-item-section>
|
class="cursor-pointer"
|
||||||
</q-item>
|
color="positive"
|
||||||
|
/>
|
||||||
</template>
|
</template>
|
||||||
</q-select>
|
<template v-slot:append>
|
||||||
<q-select
|
<q-icon
|
||||||
outlined
|
v-if="checkup.coverageStartDate && !readonly"
|
||||||
clearable
|
name="mdi-close-circle"
|
||||||
use-input
|
class="cursor-pointer app-text-muted"
|
||||||
fill-input
|
size="sm"
|
||||||
emit-value
|
@click.stop="checkup.coverageStartDate = undefined"
|
||||||
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>
|
</template>
|
||||||
</q-select>
|
</q-input>
|
||||||
<!-- @filter="provinceFilter" -->
|
</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
|
<q-input
|
||||||
lazy-rules="ondemand"
|
lazy-rules="ondemand"
|
||||||
|
id="input-birth-date"
|
||||||
|
:label="$t('formDialogInputCoverageExpiretDate')"
|
||||||
:dense="dense"
|
:dense="dense"
|
||||||
outlined
|
outlined
|
||||||
:readonly="readonly"
|
:readonly="readonly"
|
||||||
hide-bottom-space
|
placeholder="DD/MM/YYYY"
|
||||||
class="col-md-9 col-12"
|
:mask="readonly ? '' : '##/##/####'"
|
||||||
:label="$t('formDialogInputHospital')"
|
:model-value="
|
||||||
v-model="checkup.hospitalName"
|
checkup.coverageExpireDate
|
||||||
:for="`${prefixId}-input-hospital`"
|
? readonly
|
||||||
/>
|
? dateFormat(checkup.coverageExpireDate)
|
||||||
<q-input
|
: dateFormat(checkup.coverageExpireDate, false, false, true)
|
||||||
lazy-rules="ondemand"
|
: undefined
|
||||||
:label="$t('formDialogInputRemark')"
|
"
|
||||||
:dense="dense"
|
@update:model-value="
|
||||||
outlined
|
(v) => {
|
||||||
:readonly="readonly"
|
if (v && v.toString().length === 10) {
|
||||||
hide-bottom-space
|
checkup.coverageExpireDate = parseAndFormatDate(v, locale);
|
||||||
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"
|
|
||||||
>
|
>
|
||||||
<template v-slot:no-option>
|
<template v-slot:prepend>
|
||||||
<q-item>
|
<q-icon
|
||||||
<q-item-section class="text-grey">
|
size="xs"
|
||||||
{{ $t('noResults') }}
|
name="mdi-calendar-blank-outline"
|
||||||
</q-item-section>
|
class="cursor-pointer"
|
||||||
</q-item>
|
color="positive"
|
||||||
|
/>
|
||||||
</template>
|
</template>
|
||||||
</q-select>
|
<template v-slot:append>
|
||||||
<q-select
|
<q-icon
|
||||||
outlined
|
v-if="checkup.coverageExpireDate && !readonly"
|
||||||
clearable
|
name="mdi-close-circle"
|
||||||
use-input
|
class="cursor-pointer app-text-muted"
|
||||||
fill-input
|
size="sm"
|
||||||
emit-value
|
@click.stop="checkup.coverageExpireDate = undefined"
|
||||||
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>
|
</template>
|
||||||
</q-select>
|
</q-input>
|
||||||
<VueDatePicker
|
</template>
|
||||||
utc
|
</VueDatePicker>
|
||||||
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>
|
|
||||||
|
|
||||||
<div class="col-12 row justify-end" style="min-height: 50px">
|
<q-select
|
||||||
<q-btn
|
outlined
|
||||||
v-if="!readonly && showBtnSave"
|
clearable
|
||||||
dense
|
use-input
|
||||||
unelevated
|
fill-input
|
||||||
id="save-basic-info"
|
emit-value
|
||||||
color="primary"
|
map-options
|
||||||
class="q-px-md"
|
hide-selected
|
||||||
:label="$t('save')"
|
hide-bottom-space
|
||||||
@click="$emit('save', index)"
|
class="col-7"
|
||||||
/>
|
input-debounce="0"
|
||||||
</div>
|
option-label="label"
|
||||||
</div>
|
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"
|
v-if="separator"
|
||||||
class="col-12 q-mt-xl q-mb-md"
|
class="col-12 q-mt-xl q-mb-md"
|
||||||
style="padding-block: 0.5px"
|
style="padding-block: 0.5px"
|
||||||
/>
|
/>
|
||||||
</q-tab-panel>
|
</q-tab-panel>
|
||||||
</q-tab-panels>
|
</q-tab-panels>
|
||||||
</div>
|
</div> -->
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
|
|
|
||||||
|
|
@ -163,17 +163,15 @@ const currentTab = defineModel<string>('currentTab');
|
||||||
inline-label
|
inline-label
|
||||||
mobile-arrows
|
mobile-arrows
|
||||||
dense
|
dense
|
||||||
class="app-text-muted full-width"
|
class="full-width"
|
||||||
v-model="currentTab"
|
v-model="currentTab"
|
||||||
active-class="active-tab"
|
|
||||||
indicator-color="transparent"
|
|
||||||
align="left"
|
align="left"
|
||||||
>
|
>
|
||||||
<q-tab
|
<q-tab
|
||||||
:id="`tab-${tab.label}`"
|
|
||||||
v-for="tab in tabsList"
|
v-for="tab in tabsList"
|
||||||
v-bind:key="tab.name"
|
v-bind:key="tab.name"
|
||||||
class="content-tab text-capitalize"
|
:id="`tab-${tab.label}`"
|
||||||
|
class="text-capitalize"
|
||||||
:name="tab.name"
|
:name="tab.name"
|
||||||
:label="$t(tab.label)"
|
:label="$t(tab.label)"
|
||||||
/>
|
/>
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue