refactor(03): use share DatePicker
This commit is contained in:
puriphatt
parent
6a6cbdb34c
commit
5775c9d5f1
5 changed files with 89 additions and 752 deletions
|
|
@ -10,6 +10,7 @@ import { EmployeeCheckupCreate } from 'stores/employee/types';
|
|||
import { useI18n } from 'vue-i18n';
|
||||
import { checkTabBeforeAdd, selectFilterOptionRefMod } from 'stores/utils';
|
||||
import { QSelect } from 'quasar';
|
||||
import DatePicker from '../shared/DatePicker.vue';
|
||||
import {
|
||||
AddButton,
|
||||
EditButton,
|
||||
|
|
@ -154,7 +155,7 @@ const insuranceCompanyFilter = selectFilterOptionRefMod(
|
|||
size="xs"
|
||||
class="q-pa-sm rounded q-mr-sm"
|
||||
color="info"
|
||||
name="mdi-hospital-box"
|
||||
name="mdi-hospital-box-outline"
|
||||
style="background-color: var(--surface-3)"
|
||||
/>
|
||||
{{ $t(`formDialogTitleHealthCheck`) }}
|
||||
|
|
@ -347,131 +348,22 @@ const insuranceCompanyFilter = selectFilterOptionRefMod(
|
|||
type="textarea"
|
||||
:for="`${prefixId}-input-remark`"
|
||||
/>
|
||||
<VueDatePicker
|
||||
utc
|
||||
autoApply
|
||||
<DatePicker
|
||||
:label="$t('formDialogInputCoverageStartDate')"
|
||||
v-model="checkup.coverageStartDate"
|
||||
:teleport="true"
|
||||
:dark="$q.dark.isActive"
|
||||
:locale="$i18n.locale === 'th-th' ? 'th' : 'en'"
|
||||
:enableTimePicker="false"
|
||||
:disabled="readonly || checkup.statusSave"
|
||||
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 || checkup.statusSave"
|
||||
placeholder="DD/MM/YYYY"
|
||||
:mask="readonly || checkup.statusSave ? '' : '##/##/####'"
|
||||
:model-value="
|
||||
checkup.coverageStartDate
|
||||
? readonly || checkup.statusSave
|
||||
? 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="primary"
|
||||
/>
|
||||
</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
|
||||
:id="`${prefixId}-input-coverage-start-date`"
|
||||
:readonly="readonly || checkup.statusSave"
|
||||
clearable
|
||||
/>
|
||||
<DatePicker
|
||||
:label="$t('formDialogInputCoverageExpiretDate')"
|
||||
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 || checkup.statusSave"
|
||||
placeholder="DD/MM/YYYY"
|
||||
:mask="readonly || checkup.statusSave ? '' : '##/##/####'"
|
||||
:model-value="
|
||||
checkup.coverageExpireDate
|
||||
? readonly || checkup.statusSave
|
||||
? 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="primary"
|
||||
/>
|
||||
</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>
|
||||
:id="`${prefixId}-input-coverage-expire-date`"
|
||||
:readonly="readonly || checkup.statusSave"
|
||||
clearable
|
||||
/>
|
||||
|
||||
<q-select
|
||||
outlined
|
||||
|
|
|
|||
|
|
@ -7,6 +7,7 @@ import { useI18n } from 'vue-i18n';
|
|||
import useOptionStore from 'stores/options';
|
||||
import { watch } from 'vue';
|
||||
import { onMounted } from 'vue';
|
||||
import DatePicker from '../shared/DatePicker.vue';
|
||||
|
||||
const optionStore = useOptionStore();
|
||||
const { locale } = useI18n();
|
||||
|
|
@ -213,122 +214,29 @@ watch(
|
|||
</q-item>
|
||||
</template>
|
||||
</q-select>
|
||||
<VueDatePicker
|
||||
<DatePicker
|
||||
:id="`${prefixId}-date-picker-passport-issueance`"
|
||||
utc
|
||||
autoApply
|
||||
:label="$t('formDialogInputPassportIssuance')"
|
||||
v-model="passportIssueDate"
|
||||
: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`"
|
||||
hide-bottom-space
|
||||
:label="$t('formDialogInputPassportIssuance')"
|
||||
:dense="dense"
|
||||
outlined
|
||||
:readonly="readonly"
|
||||
:rules="[
|
||||
(val: string) =>
|
||||
!!val ||
|
||||
$t('selectValidate') + $t('formDialogInputPassportIssuance'),
|
||||
]"
|
||||
placeholder="DD/MM/YYYY"
|
||||
:mask="readonly ? '' : '##/##/####'"
|
||||
:model-value="
|
||||
passportIssueDate && readonly
|
||||
? dateFormat(passportIssueDate)
|
||||
: dateFormat(passportIssueDate, false, false, true)
|
||||
"
|
||||
@update:model-value="
|
||||
(v) => {
|
||||
if (v && v.toString().length === 10) {
|
||||
passportIssueDate = parseAndFormatDate(v, locale);
|
||||
}
|
||||
}
|
||||
"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon
|
||||
size="xs"
|
||||
name="mdi-calendar-blank-outline"
|
||||
class="cursor-pointer"
|
||||
color="primary"
|
||||
/>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</VueDatePicker>
|
||||
<VueDatePicker
|
||||
:readonly="readonly"
|
||||
:rules="[
|
||||
(val: string) =>
|
||||
!!val ||
|
||||
$t('selectValidate') + $t('formDialogInputPassportIssuance'),
|
||||
]"
|
||||
/>
|
||||
<DatePicker
|
||||
:id="`${prefixId}-date-picker-passport-expire`"
|
||||
utc
|
||||
autoApply
|
||||
:label="$t('formDialogInputPassportExpire')"
|
||||
v-model="passportExpiryDate"
|
||||
: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`"
|
||||
hide-bottom-space
|
||||
:label="$t('formDialogInputPassportExpire')"
|
||||
:dense="dense"
|
||||
outlined
|
||||
:readonly="readonly"
|
||||
:rules="[
|
||||
(val: string) =>
|
||||
!!val ||
|
||||
$t('selectValidate') + $t('formDialogInputPassportExpire'),
|
||||
]"
|
||||
placeholder="DD/MM/YYYY"
|
||||
:mask="readonly ? '' : '##/##/####'"
|
||||
:model-value="
|
||||
passportExpiryDate && readonly
|
||||
? dateFormat(passportExpiryDate)
|
||||
: dateFormat(passportExpiryDate, false, false, true)
|
||||
"
|
||||
@update:model-value="
|
||||
(v) => {
|
||||
if (v && v.toString().length === 10) {
|
||||
passportExpiryDate = parseAndFormatDate(v, locale);
|
||||
}
|
||||
}
|
||||
"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon
|
||||
size="xs"
|
||||
name="mdi-calendar-blank-outline"
|
||||
class="cursor-pointer"
|
||||
color="primary"
|
||||
/>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</VueDatePicker>
|
||||
:readonly="readonly"
|
||||
:rules="[
|
||||
(val: string) =>
|
||||
!!val || $t('selectValidate') + $t('formDialogInputPassportExpire'),
|
||||
]"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -11,6 +11,7 @@ import { useI18n } from 'vue-i18n';
|
|||
import { selectFilterOptionRefMod } from 'stores/utils';
|
||||
import useOptionStore from 'stores/options';
|
||||
import { watch } from 'vue';
|
||||
import DatePicker from '../shared/DatePicker.vue';
|
||||
|
||||
const optionStore = useOptionStore();
|
||||
const { locale } = useI18n();
|
||||
|
|
@ -154,146 +155,22 @@ watch(
|
|||
(val: string) =>
|
||||
!!val || $t('inputValidate') + $t('formDialogInputVisaNo'),
|
||||
]" -->
|
||||
<VueDatePicker
|
||||
<DatePicker
|
||||
class="col-2"
|
||||
:id="`${prefixId}-date-picker-visa-issuance`"
|
||||
utc
|
||||
autoApply
|
||||
:readonly="readonly"
|
||||
:label="$t('formDialogInputVisaIssuance')"
|
||||
v-model="visaIssueDate"
|
||||
:teleport="true"
|
||||
:dark="$q.dark.isActive"
|
||||
:locale="$i18n.locale === 'th-th' ? 'th' : 'en'"
|
||||
:enableTimePicker="false"
|
||||
:disabled="readonly"
|
||||
clearable
|
||||
/>
|
||||
<DatePicker
|
||||
class="col-2"
|
||||
>
|
||||
<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`"
|
||||
hide-bottom-space
|
||||
:label="$t('formDialogInputVisaIssuance')"
|
||||
:dense="dense"
|
||||
outlined
|
||||
:readonly="readonly"
|
||||
placeholder="DD/MM/YYYY"
|
||||
:mask="readonly ? '' : '##/##/####'"
|
||||
:model-value="
|
||||
visaIssueDate
|
||||
? readonly
|
||||
? dateFormat(visaIssueDate)
|
||||
: dateFormat(visaIssueDate, false, false, true)
|
||||
: readonly
|
||||
? '-'
|
||||
: undefined
|
||||
"
|
||||
@update:model-value="
|
||||
(v) => {
|
||||
if (v && v.toString().length === 10) {
|
||||
visaIssueDate = parseAndFormatDate(v, locale);
|
||||
}
|
||||
}
|
||||
"
|
||||
>
|
||||
<!-- :rules="[
|
||||
(val: string) =>
|
||||
!!val || $t('selectValidate') + $t('formDialogInputVisaIssuance'),
|
||||
]" -->
|
||||
<template v-slot:prepend>
|
||||
<q-icon
|
||||
size="xs"
|
||||
name="mdi-calendar-blank-outline"
|
||||
class="cursor-pointer"
|
||||
color="primary"
|
||||
/>
|
||||
</template>
|
||||
<template v-slot:append>
|
||||
<q-icon
|
||||
v-if="visaIssueDate && !readonly"
|
||||
name="mdi-close-circle"
|
||||
class="cursor-pointer app-text-muted"
|
||||
size="sm"
|
||||
@click="visaIssueDate = undefined"
|
||||
/>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</VueDatePicker>
|
||||
<VueDatePicker
|
||||
:id="`${prefixId}-date-picker-visa-expire`"
|
||||
utc
|
||||
autoApply
|
||||
:readonly="readonly"
|
||||
:label="$t('formDialogInputVisaExpire')"
|
||||
v-model="visaExpiryDate"
|
||||
:teleport="true"
|
||||
:dark="$q.dark.isActive"
|
||||
:locale="$i18n.locale === 'th-th' ? 'th' : 'en'"
|
||||
:enableTimePicker="false"
|
||||
:disabled="readonly"
|
||||
class="col-2"
|
||||
>
|
||||
<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`"
|
||||
hide-bottom-space
|
||||
:label="$t('formDialogInputVisaExpire')"
|
||||
:dense="dense"
|
||||
outlined
|
||||
:readonly="readonly"
|
||||
placeholder="DD/MM/YYYY"
|
||||
:mask="readonly ? '' : '##/##/####'"
|
||||
:model-value="
|
||||
visaExpiryDate
|
||||
? readonly
|
||||
? dateFormat(visaExpiryDate)
|
||||
: dateFormat(visaExpiryDate, false, false, true)
|
||||
: readonly
|
||||
? '-'
|
||||
: undefined
|
||||
"
|
||||
@update:model-value="
|
||||
(v) => {
|
||||
if (v && v.toString().length === 10) {
|
||||
visaExpiryDate = parseAndFormatDate(v, locale);
|
||||
}
|
||||
}
|
||||
"
|
||||
>
|
||||
<!-- :rules="[
|
||||
(val: string) =>
|
||||
!!val || $t('selectValidate') + $t('formDialogInputVisaExpire'),
|
||||
]" -->
|
||||
<template v-slot:prepend>
|
||||
<q-icon
|
||||
size="xs"
|
||||
name="mdi-calendar-blank-outline"
|
||||
class="cursor-pointer"
|
||||
color="primary"
|
||||
/>
|
||||
</template>
|
||||
<template v-slot:append>
|
||||
<q-icon
|
||||
v-if="visaExpiryDate && !readonly"
|
||||
name="mdi-close-circle"
|
||||
class="cursor-pointer app-text-muted"
|
||||
size="sm"
|
||||
@click="visaExpiryDate = undefined"
|
||||
/>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</VueDatePicker>
|
||||
clearable
|
||||
/>
|
||||
|
||||
<q-input
|
||||
lazy-rules="ondemand"
|
||||
|
|
@ -313,77 +190,14 @@ watch(
|
|||
(val: string) =>
|
||||
!!val || $t('selectValidate') + $t('formDialogInputVisaPlace'),
|
||||
]" -->
|
||||
<VueDatePicker
|
||||
:id="`${prefixId}-date-picker-visa-until`"
|
||||
utc
|
||||
autoApply
|
||||
v-model="visaStayUntilDate"
|
||||
:teleport="true"
|
||||
:dark="$q.dark.isActive"
|
||||
:locale="$i18n.locale === 'th-th' ? 'th' : 'en'"
|
||||
:enableTimePicker="false"
|
||||
:disabled="readonly"
|
||||
<DatePicker
|
||||
class="col-4"
|
||||
>
|
||||
<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`"
|
||||
hide-bottom-space
|
||||
:label="$t('formDialogInputVisaStayUntil')"
|
||||
:dense="dense"
|
||||
outlined
|
||||
:readonly="readonly"
|
||||
placeholder="DD/MM/YYYY"
|
||||
:mask="readonly ? '' : '##/##/####'"
|
||||
:model-value="
|
||||
visaStayUntilDate
|
||||
? readonly
|
||||
? dateFormat(visaStayUntilDate)
|
||||
: dateFormat(visaStayUntilDate, false, false, true)
|
||||
: readonly
|
||||
? '-'
|
||||
: undefined
|
||||
"
|
||||
@update:model-value="
|
||||
(v) => {
|
||||
if (v && v.toString().length === 10) {
|
||||
visaStayUntilDate = parseAndFormatDate(v, locale);
|
||||
}
|
||||
}
|
||||
"
|
||||
>
|
||||
<!-- :rules="[
|
||||
(val: string) =>
|
||||
!!val ||
|
||||
$t('selectValidate') + $t('formDialogInputVisaStayUntil'),
|
||||
]" -->
|
||||
<template v-slot:prepend>
|
||||
<q-icon
|
||||
size="xs"
|
||||
name="mdi-calendar-blank-outline"
|
||||
class="cursor-pointer"
|
||||
color="primary"
|
||||
/>
|
||||
</template>
|
||||
<template v-slot:append>
|
||||
<q-icon
|
||||
v-if="visaStayUntilDate && !readonly"
|
||||
name="mdi-close-circle"
|
||||
class="cursor-pointer app-text-muted"
|
||||
size="sm"
|
||||
@click="visaStayUntilDate = undefined"
|
||||
/>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</VueDatePicker>
|
||||
:id="`${prefixId}-date-picker-visa-until`"
|
||||
:readonly="readonly"
|
||||
:label="$t('formDialogInputVisaStayUntil')"
|
||||
v-model="visaStayUntilDate"
|
||||
clearable
|
||||
/>
|
||||
|
||||
<q-input
|
||||
lazy-rules="ondemand"
|
||||
|
|
@ -404,75 +218,14 @@ watch(
|
|||
(val: string) =>
|
||||
!!val || $t('inputValidate') + $t('formDialogInputVisaTM6'),
|
||||
]" -->
|
||||
<VueDatePicker
|
||||
:id="`${prefixId}-date-picker-visa-enter`"
|
||||
utc
|
||||
autoApply
|
||||
v-model="entryDate"
|
||||
:teleport="true"
|
||||
:dark="$q.dark.isActive"
|
||||
:locale="$i18n.locale === 'th-th' ? 'th' : 'en'"
|
||||
:enableTimePicker="false"
|
||||
:disabled="readonly"
|
||||
<DatePicker
|
||||
class="col-4"
|
||||
>
|
||||
<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`"
|
||||
:label="$t('formDialogInputVisaEnter')"
|
||||
:dense="dense"
|
||||
outlined
|
||||
:readonly="readonly"
|
||||
placeholder="DD/MM/YYYY"
|
||||
:mask="readonly ? '' : '##/##/####'"
|
||||
:model-value="
|
||||
entryDate
|
||||
? readonly
|
||||
? dateFormat(entryDate)
|
||||
: dateFormat(entryDate, false, false, true)
|
||||
: readonly
|
||||
? '-'
|
||||
: undefined
|
||||
"
|
||||
@update:model-value="
|
||||
(v) => {
|
||||
if (v && v.toString().length === 10) {
|
||||
entryDate = parseAndFormatDate(v, locale);
|
||||
}
|
||||
}
|
||||
"
|
||||
>
|
||||
<!-- :rules="[
|
||||
(val: string) =>
|
||||
!!val || $t('selectValidate') + $t('formDialogInputVisaEnter'),
|
||||
]" -->
|
||||
<template v-slot:prepend>
|
||||
<q-icon
|
||||
size="xs"
|
||||
name="mdi-calendar-blank-outline"
|
||||
class="cursor-pointer"
|
||||
color="primary"
|
||||
/>
|
||||
</template>
|
||||
<template v-slot:append>
|
||||
<q-icon
|
||||
v-if="entryDate && !readonly"
|
||||
name="mdi-close-circle"
|
||||
class="cursor-pointer app-text-muted"
|
||||
size="sm"
|
||||
@click.stop="entryDate = undefined"
|
||||
/>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</VueDatePicker>
|
||||
:id="`${prefixId}-date-picker-visa-enter`"
|
||||
:readonly="readonly"
|
||||
:label="$t('formDialogInputVisaEnter')"
|
||||
v-model="entryDate"
|
||||
clearable
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -4,6 +4,8 @@ import { dateFormat, parseAndFormatDate } from 'src/utils/datetime';
|
|||
import { EmployeeWorkCreate } from 'stores/employee/types';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { checkTabBeforeAdd, selectFilterOptionRefMod } from 'stores/utils';
|
||||
import DatePicker from '../shared/DatePicker.vue';
|
||||
|
||||
import {
|
||||
AddButton,
|
||||
EditButton,
|
||||
|
|
@ -109,7 +111,7 @@ const workplaceFilter = selectFilterOptionRefMod(
|
|||
size="xs"
|
||||
class="q-pa-sm rounded q-mr-xs"
|
||||
color="info"
|
||||
name="mdi-briefcase"
|
||||
name="mdi-briefcase-outline"
|
||||
style="background-color: var(--surface-3)"
|
||||
/>
|
||||
{{ $t(`workHistory`) }}
|
||||
|
|
@ -248,69 +250,15 @@ const workplaceFilter = selectFilterOptionRefMod(
|
|||
v-model="work.remark"
|
||||
type="textarea"
|
||||
/>
|
||||
<VueDatePicker
|
||||
:id="`${prefixId}-date-picker-work-end-date`"
|
||||
utc
|
||||
autoApply
|
||||
<DatePicker
|
||||
:label="$t('formDialogInputWorkUntil')"
|
||||
v-model="work.workEndDate"
|
||||
:teleport="true"
|
||||
:dark="$q.dark.isActive"
|
||||
:locale="$i18n.locale === 'th-th' ? 'th' : 'en'"
|
||||
:enableTimePicker="false"
|
||||
:disabled="readonly || work.statusSave"
|
||||
class="col-3"
|
||||
>
|
||||
<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`"
|
||||
:label="$t('formDialogInputWorkUntil')"
|
||||
:dense="dense"
|
||||
outlined
|
||||
:readonly="readonly || work.statusSave"
|
||||
placeholder="DD/MM/YYYY"
|
||||
:mask="readonly ? '' : '##/##/####'"
|
||||
:model-value="
|
||||
work.workEndDate
|
||||
? readonly || work.statusSave
|
||||
? dateFormat(work.workEndDate)
|
||||
: dateFormat(work.workEndDate, false, false, true)
|
||||
: undefined
|
||||
"
|
||||
@update:model-value="
|
||||
(v) => {
|
||||
if (v && v.toString().length === 10) {
|
||||
work.workEndDate = parseAndFormatDate(v, locale);
|
||||
}
|
||||
}
|
||||
"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon
|
||||
size="xs"
|
||||
name="mdi-calendar-blank-outline"
|
||||
class="cursor-pointer"
|
||||
color="primary"
|
||||
/>
|
||||
</template>
|
||||
<template v-slot:append>
|
||||
<q-icon
|
||||
v-if="work.workEndDate && !readonly"
|
||||
name="mdi-close-circle"
|
||||
class="cursor-pointer app-text-muted"
|
||||
size="sm"
|
||||
@click.stop="work.workEndDate = undefined"
|
||||
/>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</VueDatePicker>
|
||||
:id="`${prefixId}-input-work-until-date`"
|
||||
:readonly="readonly || work.statusSave"
|
||||
clearable
|
||||
/>
|
||||
|
||||
<q-input
|
||||
lazy-rules="ondemand"
|
||||
:for="`${prefixId}-input-work-permit-no`"
|
||||
|
|
@ -322,132 +270,23 @@ const workplaceFilter = selectFilterOptionRefMod(
|
|||
:label="$t('formDialogInputWorkPermitNo')"
|
||||
v-model="work.workPermitNo"
|
||||
/>
|
||||
<VueDatePicker
|
||||
:id="`${prefixId}-date-picker-work-permit-issu-date`"
|
||||
utc
|
||||
autoApply
|
||||
<DatePicker
|
||||
:label="$t('formDialogInputWorkPermitIssueDate')"
|
||||
v-model="work.workPermitIssuDate"
|
||||
:teleport="true"
|
||||
:dark="$q.dark.isActive"
|
||||
:locale="$i18n.locale === 'th-th' ? 'th' : 'en'"
|
||||
:enableTimePicker="false"
|
||||
:disabled="readonly || work.statusSave"
|
||||
class="col-3"
|
||||
>
|
||||
<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`"
|
||||
:label="$t('formDialogInputWorkPermitIssueDate')"
|
||||
:dense="dense"
|
||||
outlined
|
||||
:readonly="readonly || work.statusSave"
|
||||
placeholder="DD/MM/YYYY"
|
||||
:mask="readonly || work.statusSave ? '' : '##/##/####'"
|
||||
:model-value="
|
||||
work.workPermitIssuDate
|
||||
? readonly || work.statusSave
|
||||
? dateFormat(work.workPermitIssuDate)
|
||||
: dateFormat(work.workPermitIssuDate, false, false, true)
|
||||
: undefined
|
||||
"
|
||||
@update:model-value="
|
||||
(v) => {
|
||||
if (v && v.toString().length === 10) {
|
||||
work.workPermitIssuDate = parseAndFormatDate(v, locale);
|
||||
}
|
||||
}
|
||||
"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon
|
||||
size="xs"
|
||||
name="mdi-calendar-blank-outline"
|
||||
class="cursor-pointer"
|
||||
color="primary"
|
||||
/>
|
||||
</template>
|
||||
<template v-slot:append>
|
||||
<q-icon
|
||||
v-if="work.workPermitIssuDate && !readonly"
|
||||
name="mdi-close-circle"
|
||||
class="cursor-pointer app-text-muted"
|
||||
size="sm"
|
||||
@click.stop="work.workPermitIssuDate = undefined"
|
||||
/>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</VueDatePicker>
|
||||
<VueDatePicker
|
||||
:id="`${prefixId}-date-picker-work-permit-expire-date`"
|
||||
utc
|
||||
autoApply
|
||||
:id="`${prefixId}-date-picker-work-permit-issue-date`"
|
||||
:readonly="readonly || work.statusSave"
|
||||
clearable
|
||||
/>
|
||||
<DatePicker
|
||||
:label="$t('formDialogInputWorkPermitExpireDate')"
|
||||
v-model="work.workPermitExpireDate"
|
||||
:teleport="true"
|
||||
:dark="$q.dark.isActive"
|
||||
:locale="$i18n.locale === 'th-th' ? 'th' : 'en'"
|
||||
:enableTimePicker="false"
|
||||
:disabled="readonly || work.statusSave"
|
||||
class="col-3"
|
||||
>
|
||||
<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`"
|
||||
:label="$t('formDialogInputWorkPermitExpireDate')"
|
||||
:dense="dense"
|
||||
outlined
|
||||
:readonly="readonly || work.statusSave"
|
||||
placeholder="DD/MM/YYYY"
|
||||
:mask="readonly || work.statusSave ? '' : '##/##/####'"
|
||||
:model-value="
|
||||
work.workPermitExpireDate
|
||||
? readonly || work.statusSave
|
||||
? dateFormat(work.workPermitExpireDate)
|
||||
: dateFormat(work.workPermitExpireDate, false, false, true)
|
||||
: undefined
|
||||
"
|
||||
@update:model-value="
|
||||
(v) => {
|
||||
if (v && v.toString().length === 10) {
|
||||
work.workPermitExpireDate = parseAndFormatDate(v, locale);
|
||||
}
|
||||
}
|
||||
"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon
|
||||
size="xs"
|
||||
name="mdi-calendar-blank-outline"
|
||||
class="cursor-pointer"
|
||||
color="primary"
|
||||
/>
|
||||
</template>
|
||||
<template v-slot:append>
|
||||
<q-icon
|
||||
v-if="work.workPermitExpireDate && !readonly"
|
||||
name="mdi-close-circle"
|
||||
class="cursor-pointer app-text-muted"
|
||||
size="sm"
|
||||
@click.stop="work.workPermitExpireDate = undefined"
|
||||
/>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</VueDatePicker>
|
||||
:id="`${prefixId}-date-picker-work-permit-expire-date`"
|
||||
:readonly="readonly || work.statusSave"
|
||||
clearable
|
||||
/>
|
||||
|
||||
<q-input
|
||||
lazy-rules="ondemand"
|
||||
:for="`${prefixId}-input-owner-name`"
|
||||
|
|
|
|||
|
|
@ -4,6 +4,8 @@ import { dateFormat, parseAndFormatDate } from 'src/utils/datetime';
|
|||
import { onMounted, watch } from 'vue';
|
||||
import { ref } from 'vue';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import DatePicker from 'src/components/shared/DatePicker.vue';
|
||||
|
||||
const { locale } = useI18n({ useScope: 'global' });
|
||||
|
||||
const employmentOffice = defineModel<string>('employmentOffice');
|
||||
|
|
@ -192,70 +194,13 @@ let jobPositionFilter = selectFilterOptionRefMod(
|
|||
v-model="jobDescription"
|
||||
/>
|
||||
|
||||
<VueDatePicker
|
||||
:id="`${prefixId}-date-picker-start-date`"
|
||||
:teleport="true"
|
||||
utc
|
||||
autoApply
|
||||
<DatePicker
|
||||
:id="`${prefixId}-date-picker-pay-date`"
|
||||
v-model="payDate"
|
||||
:dark="$q.dark.isActive"
|
||||
:locale="$i18n.locale === 'th-th' ? 'th' : 'en'"
|
||||
:enableTimePicker="false"
|
||||
:disabled="readonly"
|
||||
class="col-md-3 col-12"
|
||||
>
|
||||
<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"
|
||||
:for="`${prefixId}-input-start-date`"
|
||||
:id="`${prefixId}-input-start-date`"
|
||||
:label="$t('payDay')"
|
||||
:dense="dense"
|
||||
outlined
|
||||
:readonly="readonly"
|
||||
placeholder="DD/MM/YYYY"
|
||||
:mask="readonly ? '' : '##/##/####'"
|
||||
:model-value="
|
||||
payDate
|
||||
? readonly
|
||||
? dateFormat(payDate)
|
||||
: dateFormat(payDate, false, false, true)
|
||||
: undefined
|
||||
"
|
||||
@update:model-value="
|
||||
(v) => {
|
||||
if (v && v.toString().length === 10) {
|
||||
payDate = parseAndFormatDate(v, locale);
|
||||
}
|
||||
}
|
||||
"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon
|
||||
size="xs"
|
||||
name="mdi-calendar-blank-outline"
|
||||
class="cursor-pointer"
|
||||
color="primary"
|
||||
/>
|
||||
</template>
|
||||
<template v-slot:append>
|
||||
<q-icon
|
||||
v-if="payDate && !readonly"
|
||||
name="mdi-close-circle"
|
||||
class="cursor-pointer app-text-muted"
|
||||
size="sm"
|
||||
@click="payDate = undefined"
|
||||
/>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</VueDatePicker>
|
||||
:label="$t('payDay')"
|
||||
:readonly="readonly"
|
||||
clearable
|
||||
/>
|
||||
|
||||
<q-input
|
||||
lazy-rules="ondemand"
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue