feat: can + employee checkup and work history (include i18n)
This commit is contained in:
puriphatt
parent
7bbdc810a8
commit
16fcec3a54
6 changed files with 689 additions and 478 deletions
|
|
@ -1,11 +1,12 @@
|
|||
<script setup lang="ts">
|
||||
import { onMounted, reactive } from 'vue';
|
||||
import { onMounted, reactive, ref } from 'vue';
|
||||
import { dateFormat } from 'src/utils/datetime';
|
||||
import useAddressStore, {
|
||||
District,
|
||||
Province,
|
||||
SubDistrict,
|
||||
} from 'src/stores/address';
|
||||
import { EmployeeCheckupCreate } from 'src/stores/employee/types';
|
||||
|
||||
const adrressStore = useAddressStore();
|
||||
|
||||
|
|
@ -19,15 +20,9 @@ const addrOptions = reactive<{
|
|||
subDistrictOps: [],
|
||||
});
|
||||
|
||||
const checkupResult = defineModel<string>('checkupResult');
|
||||
const checkupType = defineModel<string>('checkupType');
|
||||
const provinceId = defineModel<string>('provinceId');
|
||||
const hospitalName = defineModel<string>('hospitalName');
|
||||
const remark = defineModel<string>('remark');
|
||||
const medicalBenefitScheme = defineModel<string>('medicalBenefitScheme');
|
||||
const insuranceCompany = defineModel<string>('insuranceCompany');
|
||||
const coverageStartDate = defineModel<Date | null>('coverageStartDate');
|
||||
const coverageExpireDate = defineModel<Date | null>('coverageExpireDate');
|
||||
const employeeCheckup = defineModel<EmployeeCheckupCreate[]>('employeeCheckup');
|
||||
|
||||
const tab = ref();
|
||||
|
||||
defineProps<{
|
||||
title?: string;
|
||||
|
|
@ -44,214 +39,313 @@ async function fetchProvince() {
|
|||
if (result) addrOptions.provinceOps = result;
|
||||
}
|
||||
|
||||
function addData() {
|
||||
employeeCheckup.value?.push({
|
||||
coverageExpireDate: null,
|
||||
coverageStartDate: null,
|
||||
insuranceCompany: '',
|
||||
medicalBenefitScheme: '',
|
||||
remark: '',
|
||||
hospitalName: '',
|
||||
provinceId: '',
|
||||
checkupResult: '',
|
||||
checkupType: '',
|
||||
});
|
||||
if (employeeCheckup.value)
|
||||
tab.value = `tab${employeeCheckup.value.length - 1}`;
|
||||
}
|
||||
|
||||
function removeData(index: number) {
|
||||
if (!employeeCheckup.value) return;
|
||||
if (employeeCheckup.value.length === 1) return;
|
||||
|
||||
employeeCheckup.value.splice(index, 1);
|
||||
|
||||
if (index) if (tab.value === `tab${index}`) tab.value = `tab${index - 1}`;
|
||||
if (tab.value === `tab${employeeCheckup.value.length}`)
|
||||
tab.value = `tab${employeeCheckup.value.length - 1}`;
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
await fetchProvince();
|
||||
tab.value = 'tab0';
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="col-3 app-text-muted">
|
||||
• {{ $t(`formDialogTitleHealthCheck`) }}
|
||||
</div>
|
||||
<div class="col-9 row q-col-gutter-md">
|
||||
<q-input
|
||||
:dense="dense"
|
||||
:outlined="!readonly"
|
||||
:readonly="readonly"
|
||||
:borderless="readonly"
|
||||
hide-bottom-space
|
||||
class="col-6"
|
||||
:label="$t('formDialogInputCheckupRes')"
|
||||
v-model="checkupResult"
|
||||
/>
|
||||
<q-select
|
||||
id="select-province"
|
||||
:dense="dense"
|
||||
:readonly="readonly"
|
||||
:outlined="readonly ? false : outlined"
|
||||
:hide-dropdown-icon="readonly"
|
||||
:borderless="readonly"
|
||||
hide-bottom-space
|
||||
emit-value
|
||||
map-options
|
||||
v-model="checkupType"
|
||||
option-value="id"
|
||||
option-label="name"
|
||||
:label="$t('formDialogInputCheckupType')"
|
||||
class="col-6"
|
||||
:options="addrOptions.provinceOps"
|
||||
lazy-rules
|
||||
/>
|
||||
<q-select
|
||||
id="select-province"
|
||||
:dense="dense"
|
||||
:readonly="readonly"
|
||||
:outlined="readonly ? false : outlined"
|
||||
:hide-dropdown-icon="readonly"
|
||||
:borderless="readonly"
|
||||
hide-bottom-space
|
||||
emit-value
|
||||
map-options
|
||||
v-model="provinceId"
|
||||
option-value="id"
|
||||
option-label="nameEN"
|
||||
:label="$t('province')"
|
||||
class="col-3"
|
||||
:options="addrOptions.provinceOps"
|
||||
lazy-rules
|
||||
/>
|
||||
<q-input
|
||||
:dense="dense"
|
||||
:outlined="!readonly"
|
||||
:readonly="readonly"
|
||||
:borderless="readonly"
|
||||
hide-bottom-space
|
||||
class="col-9"
|
||||
:label="$t('formDialogInputHospital')"
|
||||
v-model="hospitalName"
|
||||
/>
|
||||
<q-input
|
||||
:label="$t('formDialogInputRemark')"
|
||||
:dense="dense"
|
||||
:outlined="!readonly"
|
||||
:readonly="readonly"
|
||||
:borderless="readonly"
|
||||
hide-bottom-space
|
||||
class="col-12"
|
||||
v-model="remark"
|
||||
type="textarea"
|
||||
/>
|
||||
<q-select
|
||||
id="select-province"
|
||||
:dense="dense"
|
||||
:readonly="readonly"
|
||||
:outlined="readonly ? false : outlined"
|
||||
:hide-dropdown-icon="readonly"
|
||||
:borderless="readonly"
|
||||
hide-bottom-space
|
||||
emit-value
|
||||
map-options
|
||||
v-model="medicalBenefitScheme"
|
||||
option-value="id"
|
||||
option-label="name"
|
||||
:label="$t('formDialogInputMedicalBenefit')"
|
||||
class="col-6"
|
||||
:options="addrOptions.provinceOps"
|
||||
lazy-rules
|
||||
/>
|
||||
<q-select
|
||||
id="select-province"
|
||||
:dense="dense"
|
||||
:readonly="readonly"
|
||||
:outlined="readonly ? false : outlined"
|
||||
:hide-dropdown-icon="readonly"
|
||||
:borderless="readonly"
|
||||
hide-bottom-space
|
||||
emit-value
|
||||
map-options
|
||||
v-model="insuranceCompany"
|
||||
option-value="id"
|
||||
option-label="name"
|
||||
:label="$t('formDialogInputInsuranceCompany')"
|
||||
class="col-6"
|
||||
:options="addrOptions.provinceOps"
|
||||
lazy-rules
|
||||
/>
|
||||
<VueDatePicker
|
||||
utc
|
||||
autoApply
|
||||
:teleport="true"
|
||||
v-model="coverageStartDate"
|
||||
:locale="'th'"
|
||||
:enableTimePicker="false"
|
||||
:disabled="readonly"
|
||||
class="col-3"
|
||||
<div class="bordered-b full-width">
|
||||
<q-tabs
|
||||
v-model="tab"
|
||||
dense
|
||||
class="text-grey"
|
||||
active-class="active-tab"
|
||||
indicator-color="transparent"
|
||||
align="left"
|
||||
:breakpoint="0"
|
||||
>
|
||||
<template #year="{ value }">
|
||||
{{ value + 543 }}
|
||||
</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
id="input-birth-date"
|
||||
:label="$t('formDialogInputCoverageStartDate')"
|
||||
:dense="dense"
|
||||
:outlined="readonly ? false : outlined"
|
||||
:readonly="readonly"
|
||||
:borderless="readonly"
|
||||
:model-value="coverageStartDate ? dateFormat(coverageStartDate) : ''"
|
||||
>
|
||||
<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="coverageStartDate && !readonly"
|
||||
name="mdi-close"
|
||||
class="cursor-pointer"
|
||||
size="xs"
|
||||
@click="coverageStartDate = undefined"
|
||||
/>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</VueDatePicker>
|
||||
<VueDatePicker
|
||||
utc
|
||||
autoApply
|
||||
:teleport="true"
|
||||
v-model="coverageExpireDate"
|
||||
:locale="'th'"
|
||||
:enableTimePicker="false"
|
||||
:disabled="readonly"
|
||||
class="col-3"
|
||||
>
|
||||
<template #year="{ value }">
|
||||
{{ value + 543 }}
|
||||
</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
id="input-birth-date"
|
||||
:label="$t('formDialogInputCoverageExpiretDate')"
|
||||
:dense="dense"
|
||||
:outlined="readonly ? false : outlined"
|
||||
:readonly="readonly"
|
||||
:borderless="readonly"
|
||||
:model-value="
|
||||
coverageExpireDate ? dateFormat(coverageExpireDate) : ''
|
||||
"
|
||||
>
|
||||
<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="coverageExpireDate && !readonly"
|
||||
name="mdi-close"
|
||||
class="cursor-pointer"
|
||||
size="xs"
|
||||
@click="coverageExpireDate = undefined"
|
||||
/>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</VueDatePicker>
|
||||
<q-btn
|
||||
@click="addData"
|
||||
flat
|
||||
class="app-text-muted"
|
||||
style="background-color: var(--_body-bg)"
|
||||
icon="mdi-plus"
|
||||
padding="8px 8px"
|
||||
:disable="readonly"
|
||||
:color="$q.dark.isActive ? 'primary' : ''"
|
||||
:class="tab !== 'tab0' ? 'bordered-r' : ''"
|
||||
/>
|
||||
<q-tab
|
||||
v-for="(tab, index) in employeeCheckup"
|
||||
v-bind:key="index"
|
||||
:name="`tab${index}`"
|
||||
class="content-tab text-capitalize"
|
||||
style="z-index: 999"
|
||||
>
|
||||
<div class="text-weight-medium row items-center">
|
||||
{{ $t('formDialogTabCheckup') + (index + 1) }}
|
||||
<q-btn
|
||||
v-if="!readonly && employeeCheckup?.length !== 1"
|
||||
round
|
||||
flat
|
||||
id="closeDialog"
|
||||
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-separator
|
||||
v-if="separator"
|
||||
class="col-12 q-mt-xl q-mb-md"
|
||||
style="padding-block: 0.5px"
|
||||
/>
|
||||
<q-tab-panels v-model="tab" style="padding-top: 0px">
|
||||
<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; height: 50vh"
|
||||
>
|
||||
<div class="col-3 app-text-muted">
|
||||
• {{ $t(`formDialogTitleHealthCheck`) }}
|
||||
</div>
|
||||
<div class="col-9 row q-col-gutter-md">
|
||||
<q-input
|
||||
:dense="dense"
|
||||
:outlined="!readonly"
|
||||
:readonly="readonly"
|
||||
:borderless="readonly"
|
||||
hide-bottom-space
|
||||
class="col-6"
|
||||
:label="$t('formDialogInputCheckupRes')"
|
||||
v-model="checkup.checkupResult"
|
||||
/>
|
||||
<q-select
|
||||
id="select-province"
|
||||
:dense="dense"
|
||||
:readonly="readonly"
|
||||
:outlined="readonly ? false : outlined"
|
||||
:hide-dropdown-icon="readonly"
|
||||
:borderless="readonly"
|
||||
hide-bottom-space
|
||||
emit-value
|
||||
map-options
|
||||
v-model="checkup.checkupType"
|
||||
option-value="id"
|
||||
option-label="name"
|
||||
:label="$t('formDialogInputCheckupType')"
|
||||
class="col-6"
|
||||
:options="addrOptions.provinceOps"
|
||||
lazy-rules
|
||||
/>
|
||||
<q-select
|
||||
id="select-province"
|
||||
:dense="dense"
|
||||
:readonly="readonly"
|
||||
:outlined="readonly ? false : outlined"
|
||||
:hide-dropdown-icon="readonly"
|
||||
:borderless="readonly"
|
||||
hide-bottom-space
|
||||
emit-value
|
||||
map-options
|
||||
v-model="checkup.provinceId"
|
||||
option-value="id"
|
||||
option-label="nameEN"
|
||||
:label="$t('province')"
|
||||
class="col-3"
|
||||
:options="addrOptions.provinceOps"
|
||||
lazy-rules
|
||||
/>
|
||||
<q-input
|
||||
:dense="dense"
|
||||
:outlined="!readonly"
|
||||
:readonly="readonly"
|
||||
:borderless="readonly"
|
||||
hide-bottom-space
|
||||
class="col-9"
|
||||
:label="$t('formDialogInputHospital')"
|
||||
v-model="checkup.hospitalName"
|
||||
/>
|
||||
<q-input
|
||||
:label="$t('formDialogInputRemark')"
|
||||
:dense="dense"
|
||||
:outlined="!readonly"
|
||||
:readonly="readonly"
|
||||
:borderless="readonly"
|
||||
hide-bottom-space
|
||||
class="col-12"
|
||||
v-model="checkup.remark"
|
||||
type="textarea"
|
||||
/>
|
||||
<q-select
|
||||
id="select-province"
|
||||
:dense="dense"
|
||||
:readonly="readonly"
|
||||
:outlined="readonly ? false : outlined"
|
||||
:hide-dropdown-icon="readonly"
|
||||
:borderless="readonly"
|
||||
hide-bottom-space
|
||||
emit-value
|
||||
map-options
|
||||
v-model="checkup.medicalBenefitScheme"
|
||||
option-value="id"
|
||||
option-label="name"
|
||||
:label="$t('formDialogInputMedicalBenefit')"
|
||||
class="col-6"
|
||||
:options="addrOptions.provinceOps"
|
||||
lazy-rules
|
||||
/>
|
||||
<q-select
|
||||
id="select-province"
|
||||
:dense="dense"
|
||||
:readonly="readonly"
|
||||
:outlined="readonly ? false : outlined"
|
||||
:hide-dropdown-icon="readonly"
|
||||
:borderless="readonly"
|
||||
hide-bottom-space
|
||||
emit-value
|
||||
map-options
|
||||
v-model="checkup.insuranceCompany"
|
||||
option-value="id"
|
||||
option-label="name"
|
||||
:label="$t('formDialogInputInsuranceCompany')"
|
||||
class="col-6"
|
||||
:options="addrOptions.provinceOps"
|
||||
lazy-rules
|
||||
/>
|
||||
<VueDatePicker
|
||||
utc
|
||||
autoApply
|
||||
:teleport="true"
|
||||
v-model="checkup.coverageStartDate"
|
||||
:locale="'th'"
|
||||
:enableTimePicker="false"
|
||||
:disabled="readonly"
|
||||
class="col-3"
|
||||
>
|
||||
<template #year="{ value }">
|
||||
{{ value + 543 }}
|
||||
</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
id="input-birth-date"
|
||||
:label="$t('formDialogInputCoverageStartDate')"
|
||||
:dense="dense"
|
||||
:outlined="readonly ? false : outlined"
|
||||
:readonly="readonly"
|
||||
:borderless="readonly"
|
||||
:model-value="
|
||||
checkup.coverageStartDate
|
||||
? dateFormat(checkup.coverageStartDate)
|
||||
: ''
|
||||
"
|
||||
>
|
||||
<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"
|
||||
class="cursor-pointer"
|
||||
size="xs"
|
||||
@click="checkup.coverageStartDate = undefined"
|
||||
/>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</VueDatePicker>
|
||||
<VueDatePicker
|
||||
utc
|
||||
autoApply
|
||||
:teleport="true"
|
||||
v-model="checkup.coverageExpireDate"
|
||||
:locale="'th'"
|
||||
:enableTimePicker="false"
|
||||
:disabled="readonly"
|
||||
class="col-3"
|
||||
>
|
||||
<template #year="{ value }">
|
||||
{{ value + 543 }}
|
||||
</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
id="input-birth-date"
|
||||
:label="$t('formDialogInputCoverageExpiretDate')"
|
||||
:dense="dense"
|
||||
:outlined="readonly ? false : outlined"
|
||||
:readonly="readonly"
|
||||
:borderless="readonly"
|
||||
:model-value="
|
||||
checkup.coverageExpireDate
|
||||
? dateFormat(checkup.coverageExpireDate)
|
||||
: ''
|
||||
"
|
||||
>
|
||||
<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"
|
||||
class="cursor-pointer"
|
||||
size="xs"
|
||||
@click="checkup.coverageExpireDate = 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>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
<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>
|
||||
|
|
|
|||
|
|
@ -1,11 +1,12 @@
|
|||
<script setup lang="ts">
|
||||
import { onMounted, reactive } from 'vue';
|
||||
import { onMounted, reactive, ref } from 'vue';
|
||||
import { dateFormat } from 'src/utils/datetime';
|
||||
import useAddressStore, {
|
||||
District,
|
||||
Province,
|
||||
SubDistrict,
|
||||
} from 'src/stores/address';
|
||||
import { EmployeeWorkCreate } from 'src/stores/employee/types';
|
||||
|
||||
const adrressStore = useAddressStore();
|
||||
|
||||
|
|
@ -19,15 +20,9 @@ const addrOptions = reactive<{
|
|||
subDistrictOps: [],
|
||||
});
|
||||
|
||||
const ownerName = defineModel<string>('ownerName');
|
||||
const positionName = defineModel<string>('positionName');
|
||||
const jobType = defineModel<string>('jobType');
|
||||
const workPlace = defineModel<string>('workPlace');
|
||||
const remark = defineModel<string>('remark');
|
||||
const workEndDate = defineModel<Date | null>('workEndDate');
|
||||
const workPermitNo = defineModel<string>('workPermitNo');
|
||||
const workPermitIssuDate = defineModel<Date | null>('workPermitIssuDate');
|
||||
const workPermitExpireDate = defineModel<Date | null>('workPermitExpireDate');
|
||||
const employeeWork = defineModel<EmployeeWorkCreate[]>('employeeWork');
|
||||
|
||||
const tab = ref();
|
||||
|
||||
defineProps<{
|
||||
title?: string;
|
||||
|
|
@ -44,245 +39,343 @@ async function fetchProvince() {
|
|||
if (result) addrOptions.provinceOps = result;
|
||||
}
|
||||
|
||||
function addData() {
|
||||
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 () => {
|
||||
await fetchProvince();
|
||||
tab.value = 'tab0';
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="col-3 app-text-muted">• {{ $t(`workHistory`) }}</div>
|
||||
<div class="col-9 row q-col-gutter-md">
|
||||
<q-input
|
||||
for="input-ownerName"
|
||||
:dense="dense"
|
||||
:outlined="!readonly"
|
||||
:readonly="readonly"
|
||||
:borderless="readonly"
|
||||
hide-bottom-space
|
||||
class="col-6"
|
||||
:label="$t('formDialogInputOwnerName')"
|
||||
v-model="ownerName"
|
||||
/>
|
||||
<q-select
|
||||
id="select-positionName"
|
||||
:dense="dense"
|
||||
:readonly="readonly"
|
||||
:outlined="readonly ? false : outlined"
|
||||
:hide-dropdown-icon="readonly"
|
||||
:borderless="readonly"
|
||||
hide-bottom-space
|
||||
emit-value
|
||||
map-options
|
||||
v-model="positionName"
|
||||
option-value="id"
|
||||
option-label="name"
|
||||
:label="$t('formDialogInputJobPosition')"
|
||||
class="col-6"
|
||||
:options="addrOptions.provinceOps"
|
||||
lazy-rules
|
||||
/>
|
||||
<q-select
|
||||
id="select-jobType"
|
||||
:dense="dense"
|
||||
:readonly="readonly"
|
||||
:outlined="readonly ? false : outlined"
|
||||
:hide-dropdown-icon="readonly"
|
||||
:borderless="readonly"
|
||||
hide-bottom-space
|
||||
emit-value
|
||||
map-options
|
||||
v-model="jobType"
|
||||
option-value="id"
|
||||
option-label="nameEN"
|
||||
:label="$t('formDialogInputJobType')"
|
||||
class="col-6"
|
||||
:options="addrOptions.provinceOps"
|
||||
lazy-rules
|
||||
/>
|
||||
<q-select
|
||||
id="select-province"
|
||||
:dense="dense"
|
||||
:readonly="readonly"
|
||||
:outlined="readonly ? false : outlined"
|
||||
:hide-dropdown-icon="readonly"
|
||||
:borderless="readonly"
|
||||
hide-bottom-space
|
||||
emit-value
|
||||
map-options
|
||||
v-model="workPlace"
|
||||
option-value="id"
|
||||
option-label="nameEN"
|
||||
:label="$t('formDialogInputWorkPlace')"
|
||||
class="col-6"
|
||||
:options="addrOptions.provinceOps"
|
||||
lazy-rules
|
||||
/>
|
||||
<q-input
|
||||
for="input-workEndDate"
|
||||
:label="$t('formDialogInputRemark')"
|
||||
:dense="dense"
|
||||
:outlined="!readonly"
|
||||
:readonly="readonly"
|
||||
:borderless="readonly"
|
||||
hide-bottom-space
|
||||
class="col-12"
|
||||
v-model="remark"
|
||||
type="textarea"
|
||||
/>
|
||||
<VueDatePicker
|
||||
id="date-picker-workEndDate"
|
||||
utc
|
||||
autoApply
|
||||
:teleport="true"
|
||||
v-model="workEndDate"
|
||||
:locale="'th'"
|
||||
:enableTimePicker="false"
|
||||
:disabled="readonly"
|
||||
class="col-6"
|
||||
<div class="bordered-b full-width">
|
||||
<q-tabs
|
||||
v-model="tab"
|
||||
dense
|
||||
class="text-grey"
|
||||
active-class="active-tab"
|
||||
indicator-color="transparent"
|
||||
align="left"
|
||||
:breakpoint="0"
|
||||
>
|
||||
<template #year="{ value }">
|
||||
{{ value + 543 }}
|
||||
</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
id="input-birth-date"
|
||||
:label="$t('formDialogInputWorkUntil')"
|
||||
:dense="dense"
|
||||
:outlined="readonly ? false : outlined"
|
||||
:readonly="readonly"
|
||||
:borderless="readonly"
|
||||
:model-value="workEndDate ? dateFormat(workEndDate) : ''"
|
||||
>
|
||||
<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="workEndDate && !readonly"
|
||||
name="mdi-close"
|
||||
class="cursor-pointer"
|
||||
size="xs"
|
||||
@click="workEndDate = undefined"
|
||||
/>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</VueDatePicker>
|
||||
<q-input
|
||||
for="input-workPermitNo"
|
||||
:dense="dense"
|
||||
:outlined="!readonly"
|
||||
:readonly="readonly"
|
||||
:borderless="readonly"
|
||||
hide-bottom-space
|
||||
class="col-6"
|
||||
:label="$t('formDialogInputWorkPermitNo')"
|
||||
v-model="workPermitNo"
|
||||
/>
|
||||
<VueDatePicker
|
||||
id="date-picker-workPermitIssuDate"
|
||||
utc
|
||||
autoApply
|
||||
:teleport="true"
|
||||
v-model="workPermitIssuDate"
|
||||
:locale="'th'"
|
||||
:enableTimePicker="false"
|
||||
:disabled="readonly"
|
||||
class="col-6"
|
||||
>
|
||||
<template #year="{ value }">
|
||||
{{ value + 543 }}
|
||||
</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
id="input-birth-date"
|
||||
:label="$t('formDialogInputWorkPermitIssueDate')"
|
||||
:dense="dense"
|
||||
:outlined="readonly ? false : outlined"
|
||||
:readonly="readonly"
|
||||
:borderless="readonly"
|
||||
:model-value="
|
||||
workPermitIssuDate ? dateFormat(workPermitIssuDate) : ''
|
||||
"
|
||||
>
|
||||
<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="workPermitIssuDate && !readonly"
|
||||
name="mdi-close"
|
||||
class="cursor-pointer"
|
||||
size="xs"
|
||||
@click="workPermitIssuDate = undefined"
|
||||
/>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</VueDatePicker>
|
||||
<VueDatePicker
|
||||
id="date-picker-workPermitExpireDate"
|
||||
utc
|
||||
autoApply
|
||||
:teleport="true"
|
||||
v-model="workPermitExpireDate"
|
||||
:locale="'th'"
|
||||
:enableTimePicker="false"
|
||||
:disabled="readonly"
|
||||
class="col-6"
|
||||
>
|
||||
<template #year="{ value }">
|
||||
{{ value + 543 }}
|
||||
</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
id="input-birth-date"
|
||||
:label="$t('formDialogInputWorkPermitExpireDate')"
|
||||
:dense="dense"
|
||||
:outlined="readonly ? false : outlined"
|
||||
:readonly="readonly"
|
||||
:borderless="readonly"
|
||||
:model-value="
|
||||
workPermitExpireDate ? dateFormat(workPermitExpireDate) : ''
|
||||
"
|
||||
>
|
||||
<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="workPermitExpireDate && !readonly"
|
||||
name="mdi-close"
|
||||
class="cursor-pointer"
|
||||
size="xs"
|
||||
@click="workPermitExpireDate = undefined"
|
||||
/>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</VueDatePicker>
|
||||
<q-btn
|
||||
@click="addData"
|
||||
flat
|
||||
class="app-text-muted"
|
||||
style="background-color: var(--_body-bg)"
|
||||
icon="mdi-plus"
|
||||
padding="8px 8px"
|
||||
:disable="readonly"
|
||||
:color="$q.dark.isActive ? 'primary' : ''"
|
||||
:class="tab !== 'tab0' ? 'bordered-r' : ''"
|
||||
/>
|
||||
<q-tab
|
||||
v-for="(tab, index) in employeeWork"
|
||||
v-bind:key="index"
|
||||
:name="`tab${index}`"
|
||||
class="content-tab text-capitalize"
|
||||
style="z-index: 999"
|
||||
>
|
||||
<div class="text-weight-medium row items-center">
|
||||
{{ $t('formDialogTabWork') + (index + 1) }}
|
||||
<q-btn
|
||||
v-if="!readonly && employeeWork?.length !== 1"
|
||||
round
|
||||
flat
|
||||
id="closeDialog"
|
||||
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-separator
|
||||
v-if="separator"
|
||||
class="col-12 q-mt-xl q-mb-md"
|
||||
style="padding-block: 0.5px"
|
||||
/>
|
||||
<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; height: 50vh"
|
||||
>
|
||||
<div class="col-3 app-text-muted">• {{ $t(`workHistory`) }}</div>
|
||||
<div class="col-9 row q-col-gutter-md">
|
||||
<q-input
|
||||
for="input-ownerName"
|
||||
:dense="dense"
|
||||
:outlined="!readonly"
|
||||
:readonly="readonly"
|
||||
:borderless="readonly"
|
||||
hide-bottom-space
|
||||
class="col-6"
|
||||
:label="$t('formDialogInputOwnerName')"
|
||||
v-model="work.ownerName"
|
||||
/>
|
||||
<q-select
|
||||
id="select-positionName"
|
||||
:dense="dense"
|
||||
:readonly="readonly"
|
||||
:outlined="readonly ? false : outlined"
|
||||
:hide-dropdown-icon="readonly"
|
||||
:borderless="readonly"
|
||||
hide-bottom-space
|
||||
emit-value
|
||||
map-options
|
||||
v-model="work.positionName"
|
||||
option-value="id"
|
||||
option-label="name"
|
||||
:label="$t('formDialogInputJobPosition')"
|
||||
class="col-6"
|
||||
:options="addrOptions.provinceOps"
|
||||
lazy-rules
|
||||
/>
|
||||
<q-select
|
||||
id="select-jobType"
|
||||
:dense="dense"
|
||||
:readonly="readonly"
|
||||
:outlined="readonly ? false : outlined"
|
||||
:hide-dropdown-icon="readonly"
|
||||
:borderless="readonly"
|
||||
hide-bottom-space
|
||||
emit-value
|
||||
map-options
|
||||
v-model="work.jobType"
|
||||
option-value="id"
|
||||
option-label="nameEN"
|
||||
:label="$t('formDialogInputJobType')"
|
||||
class="col-6"
|
||||
:options="addrOptions.provinceOps"
|
||||
lazy-rules
|
||||
/>
|
||||
<q-select
|
||||
id="select-province"
|
||||
:dense="dense"
|
||||
:readonly="readonly"
|
||||
:outlined="readonly ? false : outlined"
|
||||
:hide-dropdown-icon="readonly"
|
||||
:borderless="readonly"
|
||||
hide-bottom-space
|
||||
emit-value
|
||||
map-options
|
||||
v-model="work.workplace"
|
||||
option-value="id"
|
||||
option-label="nameEN"
|
||||
:label="$t('formDialogInputWorkPlace')"
|
||||
class="col-6"
|
||||
:options="addrOptions.provinceOps"
|
||||
lazy-rules
|
||||
/>
|
||||
<q-input
|
||||
for="input-workEndDate"
|
||||
:label="$t('formDialogInputRemark')"
|
||||
:dense="dense"
|
||||
:outlined="!readonly"
|
||||
:readonly="readonly"
|
||||
:borderless="readonly"
|
||||
hide-bottom-space
|
||||
class="col-12"
|
||||
v-model="work.remark"
|
||||
type="textarea"
|
||||
/>
|
||||
<VueDatePicker
|
||||
id="date-picker-workEndDate"
|
||||
utc
|
||||
autoApply
|
||||
:teleport="true"
|
||||
v-model="work.workEndDate"
|
||||
:locale="'th'"
|
||||
:enableTimePicker="false"
|
||||
:disabled="readonly"
|
||||
class="col-6"
|
||||
>
|
||||
<template #year="{ value }">
|
||||
{{ value + 543 }}
|
||||
</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
id="input-birth-date"
|
||||
:label="$t('formDialogInputWorkUntil')"
|
||||
:dense="dense"
|
||||
:outlined="readonly ? false : outlined"
|
||||
:readonly="readonly"
|
||||
:borderless="readonly"
|
||||
:model-value="
|
||||
work.workEndDate ? dateFormat(work.workEndDate) : ''
|
||||
"
|
||||
>
|
||||
<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"
|
||||
class="cursor-pointer"
|
||||
size="xs"
|
||||
@click="work.workEndDate = undefined"
|
||||
/>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</VueDatePicker>
|
||||
<q-input
|
||||
for="input-workPermitNo"
|
||||
:dense="dense"
|
||||
:outlined="!readonly"
|
||||
:readonly="readonly"
|
||||
:borderless="readonly"
|
||||
hide-bottom-space
|
||||
class="col-6"
|
||||
:label="$t('formDialogInputWorkPermitNo')"
|
||||
v-model="work.workPermitNo"
|
||||
/>
|
||||
<VueDatePicker
|
||||
id="date-picker-workPermitIssuDate"
|
||||
utc
|
||||
autoApply
|
||||
:teleport="true"
|
||||
v-model="work.workPermitIssuDate"
|
||||
:locale="'th'"
|
||||
:enableTimePicker="false"
|
||||
:disabled="readonly"
|
||||
class="col-6"
|
||||
>
|
||||
<template #year="{ value }">
|
||||
{{ value + 543 }}
|
||||
</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
id="input-birth-date"
|
||||
:label="$t('formDialogInputWorkPermitIssueDate')"
|
||||
:dense="dense"
|
||||
:outlined="readonly ? false : outlined"
|
||||
:readonly="readonly"
|
||||
:borderless="readonly"
|
||||
:model-value="
|
||||
work.workPermitIssuDate
|
||||
? dateFormat(work.workPermitIssuDate)
|
||||
: ''
|
||||
"
|
||||
>
|
||||
<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"
|
||||
class="cursor-pointer"
|
||||
size="xs"
|
||||
@click="work.workPermitIssuDate = undefined"
|
||||
/>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</VueDatePicker>
|
||||
<VueDatePicker
|
||||
id="date-picker-workPermitExpireDate"
|
||||
utc
|
||||
autoApply
|
||||
:teleport="true"
|
||||
v-model="work.workPermitExpireDate"
|
||||
:locale="'th'"
|
||||
:enableTimePicker="false"
|
||||
:disabled="readonly"
|
||||
class="col-6"
|
||||
>
|
||||
<template #year="{ value }">
|
||||
{{ value + 543 }}
|
||||
</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
id="input-birth-date"
|
||||
:label="$t('formDialogInputWorkPermitExpireDate')"
|
||||
:dense="dense"
|
||||
:outlined="readonly ? false : outlined"
|
||||
:readonly="readonly"
|
||||
:borderless="readonly"
|
||||
:model-value="
|
||||
work.workPermitExpireDate
|
||||
? dateFormat(work.workPermitExpireDate)
|
||||
: ''
|
||||
"
|
||||
>
|
||||
<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"
|
||||
class="cursor-pointer"
|
||||
size="xs"
|
||||
@click="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>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
<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>
|
||||
|
|
|
|||
|
|
@ -14,6 +14,7 @@ defineProps<{
|
|||
badgeClass?: string;
|
||||
noFooter?: boolean;
|
||||
noAppBox?: boolean;
|
||||
noPaddingTab?: boolean;
|
||||
maxWidth?: number;
|
||||
employee?: boolean;
|
||||
noAddress?: boolean;
|
||||
|
|
@ -92,7 +93,6 @@ const tabsList = defineModel<{ name: string; label: string }[]>('tabsList');
|
|||
dense
|
||||
class="app-text-muted cancel-overflow"
|
||||
v-model="employeeTab"
|
||||
content-class="content-tab"
|
||||
active-class="active-tab"
|
||||
indicator-color="transparent"
|
||||
>
|
||||
|
|
@ -134,13 +134,21 @@ const tabsList = defineModel<{ name: string; label: string }[]>('tabsList');
|
|||
<AppBox
|
||||
v-if="!noAppBox"
|
||||
bordered
|
||||
:noPadding="noPaddingTab"
|
||||
class="column full-height"
|
||||
:class="`${$slots.prepend ? ($q.screen.gt.sm ? 'col-10' : 'col-12') : $slots.append ? 'col-6' : 'col-12'}`"
|
||||
style="padding-right: 0; padding-bottom: 0"
|
||||
>
|
||||
<div
|
||||
class="row col-12 q-col-gutter-y-md q-pr-md q-mb-md items-start"
|
||||
:style="$q.screen.gt.sm ? 'overflow-y: auto; height: 60vh' : ''"
|
||||
class="row col-12 q-col-gutter-y-md q-mb-md items-start"
|
||||
:class="noPaddingTab ? '' : 'q-pr-md'"
|
||||
:style="
|
||||
$q.screen.gt.sm
|
||||
? noPaddingTab
|
||||
? 'height: 60vh'
|
||||
: 'overflow-y: auto; height: 60vh'
|
||||
: ''
|
||||
"
|
||||
>
|
||||
<slot name="information"></slot>
|
||||
<slot name="person"></slot>
|
||||
|
|
|
|||
|
|
@ -167,4 +167,7 @@ export default {
|
|||
formDialogInputVisaStayUntil: 'Permitted to Stay Until',
|
||||
formDialogInputVisaTM6: 'TM.6 Number (Arrival)',
|
||||
formDialogInputVisaEnter: 'Date of Entry into the Country',
|
||||
|
||||
formDialogTabCheckup: 'Checkup ',
|
||||
formDialogTabWork: 'Work ',
|
||||
};
|
||||
|
|
|
|||
|
|
@ -166,4 +166,7 @@ export default {
|
|||
formDialogInputVisaStayUntil: 'ให้อยู่ในราชอาณาจักรถึงวันที่',
|
||||
formDialogInputVisaTM6: 'เลขที่ใบ ตม.6 (ใบขาเข้า)',
|
||||
formDialogInputVisaEnter: 'วันที่เดินทางเข้ามาในประเทศ',
|
||||
|
||||
formDialogTabCheckup: 'ครั้งที่ ',
|
||||
formDialogTabWork: 'ครั้งที่ ',
|
||||
};
|
||||
|
|
|
|||
|
|
@ -147,30 +147,30 @@ const formDataEmployee = ref<EmployeeCreate>({
|
|||
provinceId: '',
|
||||
|
||||
employeeWork: [
|
||||
// {
|
||||
// workEndDate: undefined,
|
||||
// workPermitExpireDate: undefined,
|
||||
// workPermitIssuDate: undefined,
|
||||
// workPermitNo: '',
|
||||
// workplace: '',
|
||||
// jobType: '',
|
||||
// positionName: '',
|
||||
// ownerName: '',
|
||||
// remark: '',
|
||||
// },
|
||||
{
|
||||
workEndDate: null,
|
||||
workPermitExpireDate: null,
|
||||
workPermitIssuDate: null,
|
||||
workPermitNo: '',
|
||||
workplace: '',
|
||||
jobType: '',
|
||||
positionName: '',
|
||||
ownerName: '',
|
||||
remark: '',
|
||||
},
|
||||
],
|
||||
employeeCheckup: [
|
||||
// {
|
||||
// coverageExpireDate: undefined,
|
||||
// coverageStartDate: undefined,
|
||||
// insuranceCompany: '',
|
||||
// medicalBenefitScheme: '',
|
||||
// remark: '',
|
||||
// hospitalName: '',
|
||||
// provinceId: '',
|
||||
// checkupResult: '',
|
||||
// checkupType: '',
|
||||
// },
|
||||
{
|
||||
coverageExpireDate: null,
|
||||
coverageStartDate: null,
|
||||
insuranceCompany: '',
|
||||
medicalBenefitScheme: '',
|
||||
remark: '',
|
||||
hospitalName: '',
|
||||
provinceId: '',
|
||||
checkupResult: '',
|
||||
checkupType: '',
|
||||
},
|
||||
],
|
||||
employeeOtherInfo: {
|
||||
birthPlace: '',
|
||||
|
|
@ -1170,10 +1170,14 @@ watch(fieldSelectedCustomer, async () => {
|
|||
</FormDialog>
|
||||
|
||||
<FormDialog
|
||||
v-model:modal="dialogEmployee"
|
||||
employee
|
||||
addressSeparator
|
||||
:noAddress="formDataEmployeeTab !== 'personalInfo'"
|
||||
v-model:modal="dialogEmployee"
|
||||
:noPaddingTab="
|
||||
formDataEmployeeTab === 'healthCheck' ||
|
||||
formDataEmployeeTab === 'workHistory'
|
||||
"
|
||||
v-model:tabs-list="employeeTab"
|
||||
v-model:employee-tab="formDataEmployeeTab"
|
||||
v-model:same-with-employer="formDataEmployeeSameAddr"
|
||||
|
|
@ -1227,15 +1231,21 @@ watch(fieldSelectedCustomer, async () => {
|
|||
v-model:birthDate="formDataEmployee.dateOfBirth"
|
||||
v-model:nationality="formDataEmployee.nationality"
|
||||
/>
|
||||
|
||||
<FormEmployeeHealthCheck
|
||||
v-if="formDataEmployeeTab === 'healthCheck'"
|
||||
v-if="
|
||||
formDataEmployeeTab === 'healthCheck' &&
|
||||
formDataEmployee.employeeCheckup
|
||||
"
|
||||
dense
|
||||
outlined
|
||||
v-model:employee-checkup="formDataEmployee.employeeCheckup"
|
||||
/>
|
||||
<FormEmployeeWorkHistory
|
||||
v-if="formDataEmployeeTab === 'workHistory'"
|
||||
dense
|
||||
outlined
|
||||
v-model:employee-work="formDataEmployee.employeeWork"
|
||||
/>
|
||||
<FormEmployeeOther
|
||||
v-if="
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue