493 lines
16 KiB
Vue
493 lines
16 KiB
Vue
<script setup lang="ts">
|
|
import { onMounted, ref } from 'vue';
|
|
import { dateFormat, parseAndFormatDate } from 'src/utils/datetime';
|
|
import { EmployeeWorkCreate } from 'src/stores/employee/types';
|
|
import { useI18n } from 'vue-i18n';
|
|
import { checkTabBeforeAdd, selectFilterOptionRefMod } from 'src/stores/utils';
|
|
|
|
const { locale } = useI18n();
|
|
|
|
const employeeWork = defineModel<EmployeeWorkCreate[]>('employeeWork');
|
|
const positionNameOption = defineModel<{ label: string; value: string }[]>(
|
|
'positionNameOption',
|
|
{ required: true },
|
|
);
|
|
const jobTypeOption = defineModel<{ label: string; value: string }[]>(
|
|
'jobTypeOption',
|
|
{ required: true },
|
|
);
|
|
const workplaceOption = defineModel<{ label: string; value: string }[]>(
|
|
'workplaceOption',
|
|
{ required: true },
|
|
);
|
|
|
|
const tab = ref();
|
|
|
|
defineProps<{
|
|
title?: string;
|
|
dense?: boolean;
|
|
outlined?: boolean;
|
|
readonly?: boolean;
|
|
separator?: boolean;
|
|
prefixId: string;
|
|
}>();
|
|
|
|
function addData() {
|
|
const canAdd = checkTabBeforeAdd(employeeWork.value || []);
|
|
if (canAdd) {
|
|
employeeWork.value?.push({
|
|
workEndDate: null,
|
|
workPermitExpireDate: null,
|
|
workPermitIssuDate: null,
|
|
workPermitNo: '',
|
|
workplace: '',
|
|
jobType: '',
|
|
positionName: '',
|
|
ownerName: '',
|
|
remark: '',
|
|
});
|
|
if (employeeWork.value) tab.value = `tab${employeeWork.value.length - 1}`;
|
|
}
|
|
}
|
|
|
|
function removeData(index: number) {
|
|
if (!employeeWork.value) return;
|
|
if (employeeWork.value.length === 1) return;
|
|
|
|
employeeWork.value.splice(index, 1);
|
|
|
|
if (index) if (tab.value === `tab${index}`) tab.value = `tab${index - 1}`;
|
|
if (tab.value === `tab${employeeWork.value.length}`)
|
|
tab.value = `tab${employeeWork.value.length - 1}`;
|
|
}
|
|
|
|
onMounted(async () => {
|
|
tab.value = 'tab0';
|
|
});
|
|
|
|
const positionNameOptions = ref<Record<string, unknown>[]>([]);
|
|
const positionNameFilter = selectFilterOptionRefMod(
|
|
positionNameOption,
|
|
positionNameOptions,
|
|
'label',
|
|
);
|
|
|
|
const jobTypeOptions = ref<Record<string, unknown>[]>([]);
|
|
const jobTypeFilter = selectFilterOptionRefMod(
|
|
jobTypeOption,
|
|
jobTypeOptions,
|
|
'label',
|
|
);
|
|
|
|
const workplaceOptions = ref<Record<string, unknown>[]>([]);
|
|
const workplaceFilter = selectFilterOptionRefMod(
|
|
workplaceOption,
|
|
workplaceOptions,
|
|
'label',
|
|
);
|
|
</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(employeeWork || [])"
|
|
: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 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="removeData(index)"
|
|
/>
|
|
</div>
|
|
</q-tab>
|
|
</q-tabs>
|
|
</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>
|
|
|
|
<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>
|