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

fix(03): employee form

Browse source
This commit is contained in:
puriphatt 2024-08-06 04:51:17 +00:00
parent 4ab0e6f7c3
commit 36793f4741
4 changed files with 499 additions and 612 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -46,7 +46,6 @@ withDefaults(
dense?: boolean;
outlined?: boolean;
readonly?: boolean;
separator?: boolean;
typeCustomer?: string;
prefixId: string;
showBtnSave?: boolean;
@ -57,7 +56,7 @@ withDefaults(
);
defineEmits<{
(e: 'save', id: string): void;
(e: 'save', index: number): void;
}>();
async function fetchProvince() {
@ -73,7 +72,8 @@ async function fetchProvince() {
}
function addCheckup() {
const canAdd = checkTabBeforeAdd(employeeCheckup.value || []);
// const canAdd = checkTabBeforeAdd(employeeCheckup.value || []);
const canAdd = true;
if (canAdd) {
employeeCheckup.value?.push({
coverageExpireDate: null,
@ -136,72 +136,6 @@ const insuranceCompanyFilter = selectFilterOptionRefMod(
</script>
<template>
<!-- <div class="full-height full-width column">
<div class="bordered-b full-width row no-wrap">
<q-btn
@click="addData"
flat
class="app-text-muted"
style="background-color: var(--_body-bg); min-width: 40px"
icon="mdi-plus"
padding="8px 8px"
:disable="readonly || !checkTabBeforeAdd(employeeCheckup || [])"
:color="$q.dark.isActive ? 'primary' : ''"
:class="tab !== 'tab0' ? 'bordered-r' : ''"
/>
<q-tabs
inline-label
mobile-arrows
v-model="tab"
dense
class="text-grey col"
active-class="active-tab"
indicator-color="transparent"
align="left"
:breakpoint="0"
>
<q-tab
v-for="(tab, index) in employeeCheckup"
v-bind:key="index"
:name="`tab${index}`"
class="content-tab text-capitalize"
>
<div class="text-weight-medium row items-center no-wrap">
{{ $t('formDialogTabCheckup') + (index + 1) }}
<q-btn
v-if="!readonly && employeeCheckup?.length !== 1"
round
flat
:id="`${prefixId}-closeDialog`"
size="sm"
icon="mdi-close"
padding="xs"
color="red"
:class="{ dark: $q.dark.isActive }"
@click.stop="
async () => {
if (employeeCheckup?.[index].statusSave) {
$emit('remove', index);
} else {
removeData(index);
}
}
"
/>
</div>
</q-tab>
</q-tabs>
</div> -->
<!-- <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
@ -213,24 +147,40 @@ const insuranceCompanyFilter = selectFilterOptionRefMod(
style="background-color: var(--surface-3)"
/>
{{ $t(`formDialogTitleHealthCheck`) }}
<q-btn icon="mdi-plus" flat dense @click="addCheckup" v-if="!readonly" />
<q-btn
rounded
color="primary"
class="q-ml-md"
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"
:class="{ 'q-pt-lg': index !== 0 }"
>
<span class="col-12 app-text-muted-2 flex justify-between items-center">
<q-separator
v-if="index > 0"
class="full-width"
style="padding-block: 0.1px"
spaced="lg"
/>
<span class="col-12 flex justify-between items-center">
{{ `ครั้งที่ ${index + 1}` }}
<q-btn
v-if="!readonly"
dense
unelevated
id="save-basic-info"
:label="$t('save')"
color="primary"
class="q-px-md rounded"
:label="$t('save')"
@click="$emit('save', index)"
/>
</span>
@ -519,38 +469,8 @@ const insuranceCompanyFilter = selectFilterOptionRefMod(
</q-item>
</template>
</q-select>
<!-- <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> -->
</template>
<style scoped>
.active-tab {
color: var(--brand-1);
border-left: 1px solid var(--border-color);
border-right: 1px solid var(--border-color);
margin-bottom: -1.5px;
border-bottom: 3px solid var(--surface-1);
}
</style>
<style scoped></style>

74
src/components/03_customer-management/FormEmployeeOther.vue
View file

@ -1,31 +1,33 @@
<script setup lang="ts">
import { EmployeeOtherCreate } from 'stores/employee/types';
withDefaults(
defineProps<{
dense?: boolean;
outlined?: boolean;
readonly?: boolean;
separator?: boolean;
employee?: boolean;
prefixId: string;
showBtnSave: boolean;
}>(),
{
showBtnSave: false,
},
);
defineProps<{
dense?: boolean;
outlined?: boolean;
readonly?: boolean;
separator?: boolean;
employee?: boolean;
prefixId: string;
}>();
const employeeOther = defineModel<EmployeeOtherCreate>('employeeOther');
</script>
<template>
<div class="col-12" v-if="employeeOther">
<div class="col-12 app-text-muted row items-center q-mb-md">
• {{ $t('formDialogTitleFamilyHistory') }}
<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-human-male-female-child"
style="background-color: var(--surface-3)"
/>
{{ $t('formDialogTitleFamilyHistory') }}
</div>
<div class="col-12 row q-col-gutter-y-md">
<div v-if="$q.screen.gt.sm" class="col-3 q-pl-xl"></div>
<div class="col-md-9 col-12 row q-col-gutter-md">
<div class="col-12 row q-col-gutter-md">
<q-input
lazy-rules="ondemand"
:for="`${prefixId}-input-citizen-id`"
@ -38,13 +40,11 @@ const employeeOther = defineModel<EmployeeOtherCreate>('employeeOther');
v-model="employeeOther.citizenId"
/>
</div>
<div
class="col-md-3 col-12 app-text-muted"
:class="{ 'q-pl-xl': $q.screen.gt.sm }"
>
<div class="col-12 app-text-muted-2">
<q-icon size="xs" class="q-mr-xs" name="mdi-human-male" />
{{ $t('formDialogTitleFamilyHistoryDad') }}
</div>
<div class="col-md-9 col-12 row q-col-gutter-md">
<div class="col-12 row q-col-gutter-md">
<q-input
lazy-rules="ondemand"
:for="`${prefixId}-input-father-first-name`"
@ -101,14 +101,12 @@ const employeeOther = defineModel<EmployeeOtherCreate>('employeeOther');
v-model="employeeOther.fatherBirthPlace"
/>
</div>
<div class="col-12" />
<div
class="col-md-3 col-12 app-text-muted"
:class="{ 'q-pl-xl': $q.screen.gt.sm }"
>
<div class="col-12 app-text-muted-2">
<q-icon size="xs" class="q-mr-xs" name="mdi-human-female" />
{{ $t('formDialogTitleFamilyHistoryMom') }}
</div>
<div class="col-md-9 col-12 row q-col-gutter-md">
<div class="col-12 row q-col-gutter-md">
<q-input
lazy-rules="ondemand"
:for="`${prefixId}-input-mother-first-name`"
@ -165,24 +163,6 @@ const employeeOther = defineModel<EmployeeOtherCreate>('employeeOther');
v-model="employeeOther.motherBirthPlace"
/>
</div>
<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')"
/>
</div>
</div>
</div>
<q-separator
v-if="separator"
class="col-12 q-mb-md"
style="padding-block: 0.5px; margin-top: 32px"
/>
</template>

803
src/components/03_customer-management/FormEmployeeWorkHistory.vue
View file

@ -23,23 +23,21 @@ const workplaceOption = defineModel<{ label: string; value: string }[]>(
const tab = ref();
withDefaults(
defineProps<{
title?: string;
dense?: boolean;
outlined?: boolean;
readonly?: boolean;
separator?: boolean;
prefixId: string;
showBtnSave: boolean;
}>(),
{
showBtnSave: false,
},
);
defineProps<{
title?: string;
dense?: boolean;
outlined?: boolean;
readonly?: boolean;
prefixId: string;
}>();
defineEmits<{
(e: 'save', index: number): void;
}>();
function addData() {
const canAdd = checkTabBeforeAdd(employeeWork.value || []);
// const canAdd = checkTabBeforeAdd(employeeWork.value || []);
const canAdd = true;
if (canAdd) {
employeeWork.value?.push({
workEndDate: null,
@ -94,427 +92,372 @@ const workplaceFilter = selectFilterOptionRefMod(
</script>
<template>
<div class="full-height full-width column">
<div class="bordered-b full-width row no-wrap">
<q-btn
@click="addData"
<div class="row col-12">
<div class="col-12 q-pb-sm text-weight-bold text-body1">
<q-icon
flat
class="app-text-muted"
style="background-color: var(--_body-bg); min-width: 40px"
icon="mdi-plus"
padding="8px 8px"
:disable="readonly || !checkTabBeforeAdd(employeeWork || [])"
:color="$q.dark.isActive ? 'primary' : ''"
:class="tab !== 'tab0' ? 'bordered-r' : ''"
size="xs"
class="q-pa-sm rounded q-mr-xs"
color="info"
name="mdi-briefcase"
style="background-color: var(--surface-3)"
/>
<q-tabs
inline-label
mobile-arrows
v-model="tab"
{{ $t(`workHistory`) }}
<q-btn
rounded
color="primary"
class="q-ml-md"
icon="mdi-plus"
flat
dense
class="text-grey col"
active-class="active-tab"
indicator-color="transparent"
align="left"
:breakpoint="0"
>
<q-tab
v-for="(tab, index) in employeeWork"
v-bind:key="index"
:name="`tab${index}`"
class="content-tab text-capitalize"
>
<div class="text-weight-medium row items-center no-wrap">
{{ $t('formDialogTabWork') + (index + 1) }}
<q-btn
v-if="!readonly && employeeWork?.length !== 1"
round
flat
:id="`${prefixId}-close-dialog`"
size="sm"
icon="mdi-close"
padding="xs"
color="red"
:class="{ dark: $q.dark.isActive }"
@click.stop="
() => {
if (employeeWork?.[index].statusSave) {
$emit('remove', index);
} else {
removeData(index);
}
}
"
/>
</div>
</q-tab>
</q-tabs>
@click="addData"
v-if="!readonly"
/>
</div>
<q-tab-panels v-model="tab" style="padding-top: 0px">
<q-tab-panel
v-for="(work, index) in employeeWork"
v-bind:key="index"
:name="`tab${index}`"
class="row col-12 items-start"
style="overflow: auto"
>
<div class="col-md-3 col-12 app-text-muted">
• {{ $t(`workHistory`) }}
</div>
<div class="col-md-9 col-12 row q-col-gutter-md">
<q-input
lazy-rules="ondemand"
:for="`${prefixId}-input-owner-name`"
:dense="dense"
outlined
:readonly="readonly"
hide-bottom-space
class="col-6"
:label="$t('formDialogInputOwnerName')"
v-model="work.ownerName"
/>
<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="work.positionName"
:dense="dense"
:readonly="readonly"
:options="positionNameOptions"
:hide-dropdown-icon="readonly"
:for="`${prefixId}-select-position-name`"
:label="$t('formDialogInputJobPosition')"
@filter="positionNameFilter"
>
<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
class="col-6"
input-debounce="0"
option-label="label"
option-value="value"
lazy-rules="ondemand"
v-model="work.jobType"
:dense="dense"
:readonly="readonly"
:options="jobTypeOptions"
:hide-dropdown-icon="readonly"
:for="`${prefixId}-select-job-type`"
:label="$t('formDialogInputJobType')"
@filter="jobTypeFilter"
>
<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
class="col-6"
input-debounce="0"
lazy-rules="ondemand"
option-label="label"
option-value="value"
v-model="work.workplace"
:dense="dense"
:readonly="readonly"
:options="workplaceOptions"
:hide-dropdown-icon="readonly"
:for="`${prefixId}-select-province`"
:label="$t('formDialogInputWorkPlace')"
@filter="workplaceFilter"
>
<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"
:for="`${prefixId}-input-work-end-date`"
:label="$t('formDialogInputRemark')"
:dense="dense"
outlined
:readonly="readonly"
hide-bottom-space
class="col-12"
v-model="work.remark"
type="textarea"
/>
<VueDatePicker
:id="`${prefixId}-date-picker-work-end-date`"
utc
autoApply
v-model="work.workEndDate"
:teleport="true"
:dark="$q.dark.isActive"
:locale="$i18n.locale === 'th-th' ? 'th' : 'en'"
:enableTimePicker="false"
:disabled="readonly"
class="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`"
:label="$t('formDialogInputWorkUntil')"
:dense="dense"
outlined
:readonly="readonly"
placeholder="DD/MM/YYYY"
:mask="readonly ? '' : '##/##/####'"
:model-value="
work.workEndDate
? readonly
? 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="positive"
/>
</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>
<q-input
lazy-rules="ondemand"
:for="`${prefixId}-input-work-permit-no`"
:dense="dense"
outlined
:readonly="readonly"
hide-bottom-space
class="col-6"
:label="$t('formDialogInputWorkPermitNo')"
v-model="work.workPermitNo"
/>
<VueDatePicker
:id="`${prefixId}-date-picker-work-permit-issu-date`"
utc
autoApply
v-model="work.workPermitIssuDate"
:teleport="true"
:dark="$q.dark.isActive"
:locale="$i18n.locale === 'th-th' ? 'th' : 'en'"
:enableTimePicker="false"
:disabled="readonly"
class="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`"
:label="$t('formDialogInputWorkPermitIssueDate')"
:dense="dense"
outlined
:readonly="readonly"
placeholder="DD/MM/YYYY"
:mask="readonly ? '' : '##/##/####'"
:model-value="
work.workPermitIssuDate
? readonly
? 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="positive"
/>
</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
v-model="work.workPermitExpireDate"
:teleport="true"
:dark="$q.dark.isActive"
:locale="$i18n.locale === 'th-th' ? 'th' : 'en'"
:enableTimePicker="false"
:disabled="readonly"
class="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`"
:label="$t('formDialogInputWorkPermitExpireDate')"
:dense="dense"
outlined
:readonly="readonly"
placeholder="DD/MM/YYYY"
:mask="readonly ? '' : '##/##/####'"
:model-value="
work.workPermitExpireDate
? readonly
? 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="positive"
/>
</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>
<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-separator
v-if="separator"
class="col-12 q-mt-xl q-mb-md"
style="padding-block: 0.5px"
<div
v-for="(work, index) in employeeWork"
v-bind:key="index"
class="col-12 row q-col-gutter-sm"
:class="{ 'q-pt-lg': index !== 0 }"
>
<q-separator
v-if="index > 0"
class="full-width"
style="padding-block: 0.1px"
spaced="lg"
/>
<span class="col-12 flex justify-between items-center">
{{ `ครั้งที่ ${index + 1}` }}
<q-btn
v-if="!readonly"
dense
unelevated
id="save-basic-info"
:label="$t('save')"
color="primary"
class="q-px-md rounded"
@click="$emit('save', index)"
/>
</q-tab-panel>
</q-tab-panels>
</span>
<q-select
outlined
clearable
use-input
fill-input
emit-value
map-options
hide-selected
hide-bottom-space
class="col-5"
input-debounce="0"
option-label="label"
option-value="value"
lazy-rules="ondemand"
v-model="work.jobType"
:dense="dense"
:readonly="readonly"
:options="jobTypeOptions"
:hide-dropdown-icon="readonly"
:for="`${prefixId}-select-job-type`"
:label="$t('formDialogInputJobType')"
@filter="jobTypeFilter"
>
<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
class="col-6"
input-debounce="0"
lazy-rules="ondemand"
option-label="label"
option-value="value"
v-model="work.workplace"
:dense="dense"
:readonly="readonly"
:options="workplaceOptions"
:hide-dropdown-icon="readonly"
:for="`${prefixId}-select-province`"
:label="$t('formDialogInputWorkPlace')"
@filter="workplaceFilter"
>
<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"
:for="`${prefixId}-input-work-end-date`"
:label="$t('formDialogInputRemark')"
:dense="dense"
outlined
:readonly="readonly"
hide-bottom-space
class="col-12"
v-model="work.remark"
type="textarea"
/>
<VueDatePicker
:id="`${prefixId}-date-picker-work-end-date`"
utc
autoApply
v-model="work.workEndDate"
:teleport="true"
:dark="$q.dark.isActive"
:locale="$i18n.locale === 'th-th' ? 'th' : 'en'"
:enableTimePicker="false"
:disabled="readonly"
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"
placeholder="DD/MM/YYYY"
:mask="readonly ? '' : '##/##/####'"
:model-value="
work.workEndDate
? readonly
? 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="positive"
/>
</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>
<q-input
lazy-rules="ondemand"
:for="`${prefixId}-input-work-permit-no`"
:dense="dense"
outlined
:readonly="readonly"
hide-bottom-space
class="col-6"
:label="$t('formDialogInputWorkPermitNo')"
v-model="work.workPermitNo"
/>
<VueDatePicker
:id="`${prefixId}-date-picker-work-permit-issu-date`"
utc
autoApply
v-model="work.workPermitIssuDate"
:teleport="true"
:dark="$q.dark.isActive"
:locale="$i18n.locale === 'th-th' ? 'th' : 'en'"
:enableTimePicker="false"
:disabled="readonly"
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"
placeholder="DD/MM/YYYY"
:mask="readonly ? '' : '##/##/####'"
:model-value="
work.workPermitIssuDate
? readonly
? 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="positive"
/>
</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
v-model="work.workPermitExpireDate"
:teleport="true"
:dark="$q.dark.isActive"
:locale="$i18n.locale === 'th-th' ? 'th' : 'en'"
:enableTimePicker="false"
:disabled="readonly"
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"
placeholder="DD/MM/YYYY"
:mask="readonly ? '' : '##/##/####'"
:model-value="
work.workPermitExpireDate
? readonly
? 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="positive"
/>
</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>
<q-input
lazy-rules="ondemand"
:for="`${prefixId}-input-owner-name`"
:dense="dense"
outlined
:readonly="readonly"
hide-bottom-space
class="col-4"
:label="$t('formDialogInputOwnerName')"
v-model="work.ownerName"
/>
<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="work.positionName"
:dense="dense"
:readonly="readonly"
:options="positionNameOptions"
:hide-dropdown-icon="readonly"
:for="`${prefixId}-select-position-name`"
:label="$t('formDialogInputJobPosition')"
@filter="positionNameFilter"
>
<template v-slot:no-option>
<q-item>
<q-item-section class="text-grey">
{{ $t('noResults') }}
</q-item-section>
</q-item>
</template>
</q-select>
</div>
</div>
</template>
<style scoped>
.active-tab {
color: var(--brand-1);
border-left: 1px solid var(--border-color);
border-right: 1px solid var(--border-color);
margin-bottom: -1.5px;
border-bottom: 3px solid var(--surface-1);
}
</style>
<style scoped></style>

108
src/pages/03_customer-management/MainPage.vue
View file

@ -43,6 +43,8 @@ import { storeToRefs } from 'pinia';
import ProfileBanner from 'src/components/ProfileBanner.vue';
import ImageUploadDialog from 'src/components/ImageUploadDialog.vue';
import FormEmployeeHealthCheck from 'src/components/03_customer-management/FormEmployeeHealthCheck.vue';
import FormEmployeeWorkHistory from 'src/components/03_customer-management/FormEmployeeWorkHistory.vue';
import FormEmployeeOther from 'src/components/03_customer-management/FormEmployeeOther.vue';
import useOptionStore from 'src/stores/options';
const { t, locale } = useI18n();
@ -1861,28 +1863,53 @@ function createEmployeeForm() {
<div class="col">
<div style="position: sticky; top: 0" class="q-pa-sm">
<SideMenu
:menu="[
{
name: $t('formDialogTitleInformation'),
anchor: 'form-information',
},
{
name: $t('formDialogTitlePersonal'),
anchor: 'form-personal',
},
{
name: $t('formDialogTitlePersonnelAddress'),
anchor: 'form-personal-address',
},
{
name: $t('formDialogTitlePassport'),
anchor: 'form-passport',
},
{
name: $t('formDialogTitleVisa'),
anchor: 'form-visa',
},
]"
:menu="
employeeFormState.currentTab === 'personalInfo'
? [
{
name: $t('formDialogTitleInformation'),
anchor: 'form-information',
},
{
name: $t('formDialogTitlePersonal'),
anchor: 'form-personal',
},
{
name: $t('formDialogTitlePersonnelAddress'),
anchor: 'form-personal-address',
},
{
name: $t('formDialogTitlePassport'),
anchor: 'form-passport',
},
{
name: $t('formDialogTitleVisa'),
anchor: 'form-visa',
},
]
: employeeFormState.currentTab === 'healthCheck'
? [
{
name: $t('formDialogInputCheckupRes'),
anchor: 'form-checkup',
},
]
: employeeFormState.currentTab === 'workHistory'
? [
{
name: $t('workHistory'),
anchor: 'form-workHistory',
},
]
: employeeFormState.currentTab === 'other'
? [
{
name: $t('other'),
anchor: 'form-other',
},
]
: []
"
background="transparent"
:active="{
background: 'hsla(var(--blue-6-hsl) / .2)',
@ -1899,7 +1926,7 @@ function createEmployeeForm() {
>
<BasicInformation
id="form-information"
prefix-id="drawer-info-employee"
prefix-id="form-employee"
employee
dense
outlined
@ -1914,7 +1941,7 @@ function createEmployeeForm() {
/>
<FormPerson
id="form-personal"
prefix-id="drawer-info-employee"
prefix-id="form-employee"
dense
outlined
employee
@ -1930,33 +1957,50 @@ function createEmployeeForm() {
/>
<FormAddress
id="form-personal-address"
prefix-id="form-employee"
v-model:address="currentFromDataEmployee.address"
v-model:addressEN="currentFromDataEmployee.addressEN"
v-model:provinceId="currentFromDataEmployee.provinceId"
v-model:districtId="currentFromDataEmployee.districtId"
v-model:subDistrictId="currentFromDataEmployee.subDistrictId"
v-model:zipCode="currentFromDataEmployee.zipCode"
prefix-id="drawer-info-personnel"
dense
/>
</div>
<div
v-if="employeeFormState.currentTab === 'healthCheck'"
class="col-10 q-pa-md q-gutter-y-xl"
>
<div class="col-10 q-pa-md q-gutter-y-xl" v-else>
<FormEmployeeHealthCheck
id="form-information"
prefix-id="drawer-info-employee"
v-if="employeeFormState.currentTab === 'healthCheck'"
id="form-checkup"
prefix-id="form-employee"
dense
outlined
v-model:employeeCheckup="currentFromDataEmployee.employeeCheckup"
v-model:checkupTypeOption="optionStore.globalOption.insurancePlace"
v-model:medicalBenefitOption="optionStore.globalOption.insurancePlace"
v-model:medicalBenefitOption="optionStore.globalOption.typeInsurance"
v-model:insuranceCompanyOption="
optionStore.globalOption.insurancePlace
"
/>
<FormEmployeeWorkHistory
v-if="employeeFormState.currentTab === 'workHistory'"
id="form-work-history"
prefix-id="form-employee"
dense
outlined
v-model:employee-work="currentFromDataEmployee.employeeWork"
v-model:position-name-option="optionStore.globalOption.position"
v-model:job-type-option="optionStore.globalOption.businessType"
v-model:workplace-option="optionStore.globalOption.area"
/>
<FormEmployeeOther
v-if="employeeFormState.currentTab === 'other'"
id="form-other"
prefix-id="form-employee"
dense
outlined
v-model:employee-other="currentFromDataEmployee.employeeOtherInfo"
/>
</div>
</div>
</DialogForm>