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

refactor: edit upload

Browse source
This commit is contained in:
Net 2024-09-18 10:58:08 +07:00
parent 23a92601cb
commit 5410dcecf7
2 changed files with 328 additions and 376 deletions
Download patch file Download diff file Expand all files Collapse all files

227
src/components/upload-file/UploadFileGroup.vue Normal file
View file

@ -0,0 +1,227 @@
<script setup lang="ts">
import { QTableProps } from 'quasar';
import { computed, ref, watch, toRaw } from 'vue';
import TableComponents from 'src/components/TableComponents.vue';
import ShowAttachent from 'src/components/ShowAttachent.vue';
import DialogForm from 'components/DialogForm.vue';
const obj = defineModel<
{
_meta?: Record<string, any>;
name?: string;
group?: string;
url?: string;
file?: File;
}[]
>({
default: [],
});
const dialog = ref(false);
const splitAttachment = ref(50);
const currentIndex = ref(-1);
const currentIndexDropdownList = ref(0);
const props = defineProps<{
ocr?: (group: any, file: File) => void | Promise<void>;
getFileList?: (group: any) => Promise<typeof obj.value>;
readonly?: boolean;
hideAction?: boolean;
columns: QTableProps['columns'];
menu?: { label: string; value: string; _meta?: Record<string, any> }[];
}>();
function browse() {
inputFile?.click();
}
const inputFile = (() => {
const _element = document.createElement('input');
_element.type = 'file';
_element.accept = 'image/jpeg,image/png';
_element.addEventListener('change', change);
return _element;
})();
const selectedMenu = ref<NonNullable<typeof props.menu>[number]>();
function change(e: Event) {
const _element = e.target as HTMLInputElement | null;
const _file = _element?.files?.[0];
if (_file) {
if (!obj.value[currentIndex.value] && selectedMenu.value) {
currentIndex.value = obj.value.length;
obj.value = [
...obj.value,
{
_meta: structuredClone(toRaw(selectedMenu.value)._meta || {}),
group: selectedMenu.value?.value,
file: _file,
},
];
}
const reader = new FileReader();
reader.readAsDataURL(_file);
reader.onload = () => {
if (obj.value[currentIndex.value]) {
obj.value[currentIndex.value].url = reader.result as string;
}
};
}
dialog.value = true;
}
defineEmits<{
(e: 'submit', obj: any): void;
}>();
</script>
<template>
<div class="full-width row no-wrap wrapper" style="height: 250px">
<div class="col-3 full-height column no-wrap">
<div class="q-pa-sm text-center bordered" style="height: 50px">
<q-btn-dropdown
:disable="readonly"
icon="mdi-upload"
color="info"
label="อัปโหลดเอกสาร"
>
<q-list v-for="(v, i) in menu" :key="v.value">
<q-item
clickable
v-close-popup
@click="
() => {
selectedMenu = menu?.[i];
currentIndex = obj.length;
browse();
}
"
>
<q-item-section>
<q-item-label>{{ $t(v.label) }}</q-item-label>
</q-item-section>
</q-item>
</q-list>
</q-btn-dropdown>
</div>
<div class="bordered-l bordered-b q-pa-sm col full-height scroll">
<template v-if="menu != undefined">
<q-item
clickable
v-for="v in menu"
:key="v.value"
dense
type="button"
class="no-padding items-center rounded full-width"
active-class="menu-active"
:active="selectedMenu?.value === v.value"
@click="
async () => {
selectedMenu = v;
if (getFileList) {
const res = await getFileList(
menu?.[currentIndexDropdownList].value || '',
);
console.log(res);
}
}
"
>
<span class="q-px-md ellipsis q-pa-sm" style="font-size: 16px">
{{ $t(v.label) }}
</span>
</q-item>
</template>
</div>
</div>
<div
v-if="obj"
class="bordered col surface-2 column justify-center items-center no-wrap scroll"
>
<slot name="content">
<template v-if="columns !== undefined">
<div class="full-height full-width q-pa-md">
<TableComponents
buttomDownload
:rows="
obj.map((v, index) => {
return {
branchNo: index + 1,
attachmentName: v.file?.name,
uploadDate: '',
};
})
"
:columns="columns"
></TableComponents>
</div>
</template>
</slot>
</div>
</div>
<DialogForm
style="position: absolute"
height="100vh"
weight="90%"
v-model:modal="dialog"
title="ดูตัวอย่าง"
hideCloseEvent
v-if="obj.length > 0"
:close="
() => {
obj.splice(currentIndex, 1);
dialog = false;
}
"
:submit="
() => {
dialog = false;
}
"
>
<q-splitter class="full-height" v-model="splitAttachment">
<template v-slot:before>
<div class="full-height">
<ShowAttachent
v-if="obj[currentIndex]"
:url="obj[currentIndex].url || ''"
:file="obj[currentIndex].file"
/>
</div>
</template>
<template v-slot:after>
<div class="q-pa-md">
<slot
v-if="obj[currentIndex]"
name="form"
:mode="obj[currentIndex].group"
:meta="obj[currentIndex]._meta"
/>
</div>
</template>
</q-splitter>
</DialogForm>
</template>
<style lang="scss">
.wrapper > * {
height: 300px;
}
.menu-active {
background-color: hsla(var(--info-bg) / 0.1);
color: hsl(var(--info-bg));
}
</style>

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

@ -32,7 +32,6 @@ import BranchCard from 'src/components/01_branch-management/BranchCard.vue';
import ItemCard from 'src/components/ItemCard.vue';
import DrawerInfo from 'components/DrawerInfo.vue';
import ButtonAddComponent from 'components/ButtonAddCompoent.vue';
import PersonCard from 'components/shared/PersonCard.vue';
import StatCardComponent from 'components/StatCardComponent.vue';
import TooltipComponent from 'components/TooltipComponent.vue';
import EmptyAddButton from 'components/AddButton.vue';
@ -49,15 +48,14 @@ import SideMenu from 'components/SideMenu.vue';
import { AddButton } from 'components/button';
import TableEmpoloyee from 'src/components/03_customer-management/TableEmpoloyee.vue';
import { calculateAge, toISOStringWithTimezone } from 'src/utils/datetime';
import { UploadFile } from 'components/upload-file';
import { UploadFileGroup } from 'components/upload-file';
import {
columnsCustomer,
columnsEmployee,
formMenuIconEmployee,
uploadFileListEmployee,
uploadFileListCustomer,
countryCode,
columnsAttachment,
} from './constant';
import { useCustomerForm, useEmployeeForm } from './form';
import { storeToRefs } from 'pinia';
@ -69,7 +67,11 @@ import FormEmployeeOther from 'components/03_customer-management/FormEmployeeOth
import useOptionStore from 'stores/options';
import { DialogContainer, DialogHeader } from 'components/dialog';
import KebabAction from 'src/components/shared/KebabAction.vue';
import { roundElectricalServices } from '@quasar/extras/material-icons-round';
const currentSelectedMenu = ref<{ label: string; value: string }>({
label: '',
value: '',
});
const { t, locale } = useI18n();
const $q = useQuasar();
@ -182,6 +184,8 @@ const customerTypeSelected = ref<{
});
const customerNameInfo = computed(() => {
if (customerFormData.value.customerBranch === undefined) return;
const name =
locale.value === 'eng'
? `${customerFormData.value.customerBranch[0]?.firstNameEN} ${customerFormData.value.customerBranch[0]?.lastNameEN}`
@ -192,6 +196,7 @@ const currentBtnOpen = ref<boolean[]>([]);
const employeeStats = ref(0);
const gridView = ref(false);
const splitPercent = ref(15); // Customer only
const currentPageCustomer = ref<number>(1);
const maxPageCustomer = ref<number>(1);
const currentPageEmployee = ref<number>(1);
@ -618,12 +623,6 @@ function createEmployeeForm() {
employeeFormState.value.isEmployeeEdit = true;
}
function returnCountryCode(country: string) {
const tempValue = countryCode?.find((v) => v.label.includes(country));
return tempValue?.value;
}
async function fetchImageList(
id: string,
selectedName: string,
@ -682,56 +681,6 @@ watch(
},
);
function assignOcrEmployeeData(data: {
document: string;
fields: { name: string; value: string }[];
result: string;
}) {
const map = data.fields.reduce<Record<string, string>>((a, c) => {
a[c.name] = c.value;
return a;
}, {});
const temp = data.document.split('_').at(0) || '';
if (data.document.includes('passport')) {
if (!currentFromDataEmployee.value.passportNumber)
currentFromDataEmployee.value.passportNumber = map['passport_no'] || '';
if (!currentFromDataEmployee.value.passportIssueDate)
currentFromDataEmployee.value.passportIssueDate =
new Date(map['issue_date']) || '';
if (!currentFromDataEmployee.value.passportExpiryDate)
currentFromDataEmployee.value.passportExpiryDate =
new Date(map['expire_date']) || '';
if (currentFromDataEmployee.value.passportIssuingPlace)
currentFromDataEmployee.value.passportIssuingPlace = temp;
if (currentFromDataEmployee.value.passportIssuingCountry)
currentFromDataEmployee.value.passportIssuingCountry =
returnCountryCode(temp) || '';
}
if (data.document.includes('visa')) {
if (!currentFromDataEmployee.value.visaType)
currentFromDataEmployee.value.visaType = map['visa_type'] || '';
if (!currentFromDataEmployee.value.visaIssueDate)
currentFromDataEmployee.value.visaIssueDate =
new Date(map['issue_date']) || '';
if (!currentFromDataEmployee.value.visaIssuingPlace)
currentFromDataEmployee.value.visaIssuingPlace = map['issue_place'] || '';
if (!currentFromDataEmployee.value.visaExpiryDate)
currentFromDataEmployee.value.visaExpiryDate =
new Date(map['valid_until']) || '';
if (!currentFromDataEmployee.value.visaNumber)
currentFromDataEmployee.value.visaNumber = map['visa_no'] || '';
}
}
watch(
() => employeeFormState.value.currentTab,
() => {
@ -1920,6 +1869,7 @@ const emptyCreateDialog = ref(false);
<div class="q-px-lg q-pt-lg surface-2">
<ProfileBanner
v-if="customerFormData.customerBranch !== undefined"
active
hide-fade
:fallback-cover="`/images/customer-${customerFormData.customerType}-banner-bg.jpg`"
@ -2004,7 +1954,10 @@ const emptyCreateDialog = ref(false);
style="height: 100%; max-height: 100%; overflow-y: auto"
>
<EmployerFormBasicInfo
v-if="customerFormData.customerBranch.length > 0"
v-if="
customerFormData.customerBranch !== undefined &&
customerFormData.customerBranch.length > 0
"
class="q-mb-xl"
:readonly="
(customerFormState.dialogType === 'edit' &&
@ -2524,56 +2477,6 @@ const emptyCreateDialog = ref(false);
class="q-mb-xl"
/>
<FormEmployeePassport
prefix-id="drawer-info-employee"
id="form-passport"
dense
outlined
separator
:title="$t('customerEmployee.form.group.passport')"
:readonly="!employeeFormState.isEmployeeEdit"
v-model:passport-type="currentFromDataEmployee.passportType"
v-model:passport-number="currentFromDataEmployee.passportNumber"
v-model:passport-issue-date="
currentFromDataEmployee.passportIssueDate
"
v-model:passport-expiry-date="
currentFromDataEmployee.passportExpiryDate
"
v-model:passport-issuing-place="
currentFromDataEmployee.passportIssuingPlace
"
v-model:passport-issuing-country="
currentFromDataEmployee.passportIssuingCountry
"
v-model:previous-passport-reference="
currentFromDataEmployee.previousPassportReference
"
class="q-mb-xl"
/>
<FormEmployeeVisa
prefix-id="drawer-info-employee"
id="form-visa"
dense
outlined
title="customerEmployee.form.group.visa"
:readonly="!employeeFormState.isEmployeeEdit"
v-model:visa-type="currentFromDataEmployee.visaType"
v-model:visa-number="currentFromDataEmployee.visaNumber"
v-model:visa-issue-date="currentFromDataEmployee.visaIssueDate"
v-model:visa-expiry-date="currentFromDataEmployee.visaExpiryDate"
v-model:visa-issuing-place="
currentFromDataEmployee.visaIssuingPlace
"
v-model:visa-stay-until-date="
currentFromDataEmployee.visaStayUntilDate
"
v-model:tm6-number="currentFromDataEmployee.tm6Number"
v-model:entry-date="currentFromDataEmployee.entryDate"
class="q-mb-xl"
/>
<div class="row q-mb-md" id="drawer-info-file-upload">
<div class="col-12 q-pb-sm text-weight-bold text-body1">
<q-icon
@ -2586,82 +2489,36 @@ const emptyCreateDialog = ref(false);
/>
{{ $t(`general.uploadFile`) }}
</div>
<UploadFile
:tree-file="
Object.values(
currentFromDataEmployee.file?.reduce<
Record<
string,
{ label: string; file: { label: string }[] }
>
>((a, c) => {
const _group = c.group || 'other';
if (!a[_group]) {
a[_group] = {
label: $t(
uploadFileListEmployee.find(
(v) => v.value === _group,
)?.label || _group,
),
file: [
{
label:
c.name ||
`${c.group}-${c.file?.name || Date.now()}`,
},
],
};
} else {
a[_group].file.push({
label:
c.name ||
`${c.group}-${c.file?.name || Date.now()}`,
});
}
return a;
}, {}) || {},
)
"
v-model:file="currentFromDataEmployee.file"
<UploadFileGroup
v-model="currentFromDataEmployee.file"
hide-action
v-model:status-ocr="employeeFormState.ocr"
:readonly="!employeeFormState.isEmployeeEdit"
:dropdown-list="uploadFileListEmployee"
@delete-file="
async (filename) => {
if (currentFromDataEmployee.id) {
const result = await employeeStore.deleteAttachment(
currentFromDataEmployee.id,
filename,
);
if (result) {
currentFromDataEmployee.file =
currentFromDataEmployee.file?.filter(
(v) => v.name !== filename,
);
}
}
}
"
@send-ocr="
async (group, file) => {
if (file) {
const res = await ocrStore.sendOcr({
file,
category: group,
});
employeeFormState.ocr = false;
if (res) {
assignOcrEmployeeData(res);
}
v-model:current-selected-menu="currentSelectedMenu"
:group-list="uploadFileListEmployee"
:menu="uploadFileListEmployee"
:columns="columnsAttachment"
:get-file-list="
async (group: 'passport' | 'visa') => {
if (!!currentFromDataEmployee.id) {
return [];
}
return [];
}
"
>
<template #form="{ mode }">
<template #form="{ mode, meta }">
<FormCitizen
v-if="mode === 'citizen' && meta"
orc
v-model:citizen-id="meta.citizenId"
v-model:birth-date="meta.birthDate"
v-model:first-name="meta.firstName"
v-model:first-name-en="meta.firstNameEN"
v-model:last-name="meta.lastName"
v-model:last-name-en="meta.lastNameEN"
v-model:address="meta.address"
/>
<FormEmployeePassport
v-if="mode === 'passport'"
v-if="mode === 'passport' && meta"
prefix-id="drawer-info-employee"
id="form-passport"
dense
@ -2670,28 +2527,20 @@ const emptyCreateDialog = ref(false);
ocr
:title="$t('customerEmployee.form.group.passport')"
:readonly="!employeeFormState.isEmployeeEdit"
v-model:passport-type="currentFromDataEmployee.passportType"
v-model:passport-number="
currentFromDataEmployee.passportNumber
"
v-model:passport-issue-date="
currentFromDataEmployee.passportIssueDate
"
v-model:passport-expiry-date="
currentFromDataEmployee.passportExpiryDate
"
v-model:passport-issuing-place="
currentFromDataEmployee.passportIssuingPlace
"
v-model:passport-type="meta.type"
v-model:passport-number="meta.number"
v-model:passport-issue-date="meta.passportIssueDate"
v-model:passport-expiry-date="meta.passportExpiryDate"
v-model:passport-issuing-place="meta.passportIssuingPlace"
v-model:passport-issuing-country="
currentFromDataEmployee.passportIssuingCountry
meta.passportIssuingCountry
"
v-model:previous-passport-reference="
currentFromDataEmployee.previousPassportReference
meta.previousPassportReference
"
/>
<FormEmployeeVisa
v-if="mode === 'visa'"
v-if="mode === 'visa' && meta"
prefix-id="drawer-info-employee"
id="form-visa"
ocr
@ -2699,25 +2548,14 @@ const emptyCreateDialog = ref(false);
outlined
title="customerEmployee.form.group.visa"
:readonly="!employeeFormState.isEmployeeEdit"
v-model:visa-type="currentFromDataEmployee.visaType"
v-model:visa-number="currentFromDataEmployee.visaNumber"
v-model:visa-issue-date="
currentFromDataEmployee.visaIssueDate
"
v-model:visa-expiry-date="
currentFromDataEmployee.visaExpiryDate
"
v-model:visa-issuing-place="
currentFromDataEmployee.visaIssuingPlace
"
v-model:visa-stay-until-date="
currentFromDataEmployee.visaStayUntilDate
"
v-model:tm6-number="currentFromDataEmployee.tm6Number"
v-model:entry-date="currentFromDataEmployee.entryDate"
v-model:visa-type="meta.type"
v-model:visa-number="meta.number"
v-model:visa-issue-date="meta.issueDate"
v-model:visa-expiry-date="meta.expireDate"
v-model:visa-issuing-place="meta.issuePlace"
/>
</template>
</UploadFile>
</UploadFileGroup>
</div>
</template>
@ -2872,7 +2710,7 @@ const emptyCreateDialog = ref(false);
await customerStore.addImageList(
v,
customerFormState.editCustomerId,
Date.now(),
Date.now().toString(),
);
await fetchImageList(
customerFormState.editCustomerId,
@ -2982,7 +2820,7 @@ const emptyCreateDialog = ref(false);
await employeeStore.addImageList(
v,
currentFromDataEmployee.id,
Date.now(),
Date.now().toString(),
);
await fetchImageList(
currentFromDataEmployee.id,
@ -3110,6 +2948,7 @@ const emptyCreateDialog = ref(false);
<div class="column full-height">
<div class="q-px-lg q-pt-lg surface-2">
<ProfileBanner
v-if="customerFormData.customerBranch !== undefined"
:active="customerFormData.status !== 'INACTIVE'"
hide-fade
useToggle
@ -3208,7 +3047,10 @@ const emptyCreateDialog = ref(false);
style="height: 100%; max-height: 100%; overflow-y: auto"
>
<EmployerFormBasicInfo
v-if="customerFormData.customerBranch.length > 0"
v-if="
customerFormData.customerBranch !== undefined &&
customerFormData.customerBranch.length > 0
"
:readonly="
(customerFormState.dialogType === 'edit' &&
customerFormState.readonly === true) ||
@ -3745,56 +3587,6 @@ const emptyCreateDialog = ref(false);
dense
class="q-mb-xl"
/>
<FormEmployeePassport
prefix-id="drawer-info-employee"
id="drawer-form-passport"
dense
outlined
separator
:title="$t('customerEmployee.form.group.passport')"
:readonly="!employeeFormState.isEmployeeEdit"
v-model:passport-type="currentFromDataEmployee.passportType"
v-model:passport-number="currentFromDataEmployee.passportNumber"
v-model:passport-issue-date="
currentFromDataEmployee.passportIssueDate
"
v-model:passport-expiry-date="
currentFromDataEmployee.passportExpiryDate
"
v-model:passport-issuing-place="
currentFromDataEmployee.passportIssuingPlace
"
v-model:passport-issuing-country="
currentFromDataEmployee.passportIssuingCountry
"
v-model:previous-passport-reference="
currentFromDataEmployee.previousPassportReference
"
class="q-mb-xl"
/>
<FormEmployeeVisa
prefix-id="drawer-info-employee"
id="drawer-form-visa"
dense
outlined
title="customerEmployee.form.group.visa"
:readonly="!employeeFormState.isEmployeeEdit"
v-model:visa-type="currentFromDataEmployee.visaType"
v-model:visa-number="currentFromDataEmployee.visaNumber"
v-model:visa-issue-date="currentFromDataEmployee.visaIssueDate"
v-model:visa-expiry-date="
currentFromDataEmployee.visaExpiryDate
"
v-model:visa-issuing-place="
currentFromDataEmployee.visaIssuingPlace
"
v-model:visa-stay-until-date="
currentFromDataEmployee.visaStayUntilDate
"
v-model:tm6-number="currentFromDataEmployee.tm6Number"
v-model:entry-date="currentFromDataEmployee.entryDate"
class="q-mb-xl"
/>
<div class="row" id="drawer-upload-file">
<div class="col-12 q-pb-sm text-weight-bold text-body1">
@ -3808,140 +3600,73 @@ const emptyCreateDialog = ref(false);
/>
{{ $t(`general.uploadFile`) }}
</div>
<UploadFile
:tree-file="
Object.values(
currentFromDataEmployee.file?.reduce<
Record<
string,
{ label: string; file: { label: string }[] }
>
>((a, c) => {
const _group = c.group || 'other';
if (!a[_group]) {
a[_group] = {
label: $t(
uploadFileListEmployee.find(
(v) => v.value === _group,
)?.label || _group,
),
file: [
{
label:
c.name ||
`${c.group}-${c.file?.name || Date.now()}`,
},
],
};
} else {
a[_group].file.push({
label:
c.name ||
`${c.group}-${c.file?.name || Date.now()}`,
});
}
return a;
}, {}) || {},
)
"
v-model:file="currentFromDataEmployee.file"
<UploadFileGroup
v-model="currentFromDataEmployee.file"
hide-action
v-model:status-ocr="employeeFormState.ocr"
:readonly="!employeeFormState.isEmployeeEdit"
:dropdown-list="uploadFileListEmployee"
@delete-file="
async (filename) => {
if (currentFromDataEmployee.id) {
const result = await employeeStore.deleteAttachment(
currentFromDataEmployee.id,
filename,
);
if (result) {
currentFromDataEmployee.file =
currentFromDataEmployee.file?.filter(
(v) => v.name !== filename,
);
}
}
}
"
@send-ocr="
async (group, file) => {
if (file) {
const res = await ocrStore.sendOcr({
file,
category: group,
});
employeeFormState.ocr = false;
if (res) {
assignOcrEmployeeData(res);
}
v-model:current-selected-menu="currentSelectedMenu"
:group-list="uploadFileListEmployee"
:menu="uploadFileListEmployee"
:columns="columnsAttachment"
:get-file-list="
async (group: 'passport' | 'visa') => {
if (!!currentFromDataEmployee.id) {
return [];
}
return [];
}
"
>
<template #form="{ mode }">
<template #form="{ mode, meta }">
<FormCitizen
v-if="mode === 'citizen' && meta"
orc
v-model:citizen-id="meta.citizenId"
v-model:birth-date="meta.birthDate"
v-model:first-name="meta.firstName"
v-model:first-name-en="meta.firstNameEN"
v-model:last-name="meta.lastName"
v-model:last-name-en="meta.lastNameEN"
v-model:address="meta.address"
/>
<FormEmployeePassport
v-if="mode === 'passport'"
v-if="mode === 'passport' && meta"
prefix-id="drawer-info-employee"
id="drawer-form-passport"
id="form-passport"
dense
outlined
separator
ocr
:title="$t('customerEmployee.form.group.passport')"
:readonly="!employeeFormState.isEmployeeEdit"
v-model:passport-type="
currentFromDataEmployee.passportType
"
v-model:passport-number="
currentFromDataEmployee.passportNumber
"
v-model:passport-issue-date="
currentFromDataEmployee.passportIssueDate
"
v-model:passport-expiry-date="
currentFromDataEmployee.passportExpiryDate
"
v-model:passport-issuing-place="
currentFromDataEmployee.passportIssuingPlace
"
v-model:passport-type="meta.type"
v-model:passport-number="meta.number"
v-model:passport-issue-date="meta.passportIssueDate"
v-model:passport-expiry-date="meta.passportExpiryDate"
v-model:passport-issuing-place="meta.passportIssuingPlace"
v-model:passport-issuing-country="
currentFromDataEmployee.passportIssuingCountry
meta.passportIssuingCountry
"
v-model:previous-passport-reference="
currentFromDataEmployee.previousPassportReference
meta.previousPassportReference
"
/>
<FormEmployeeVisa
v-if="mode === 'visa'"
v-if="mode === 'visa' && meta"
prefix-id="drawer-info-employee"
id="drawer-form-visa"
id="form-visa"
ocr
dense
outlined
ocr
title="customerEmployee.form.group.visa"
:readonly="!employeeFormState.isEmployeeEdit"
v-model:visa-type="currentFromDataEmployee.visaType"
v-model:visa-number="currentFromDataEmployee.visaNumber"
v-model:visa-issue-date="
currentFromDataEmployee.visaIssueDate
"
v-model:visa-expiry-date="
currentFromDataEmployee.visaExpiryDate
"
v-model:visa-issuing-place="
currentFromDataEmployee.visaIssuingPlace
"
v-model:visa-stay-until-date="
currentFromDataEmployee.visaStayUntilDate
"
v-model:tm6-number="currentFromDataEmployee.tm6Number"
v-model:entry-date="currentFromDataEmployee.entryDate"
v-model:visa-type="meta.type"
v-model:visa-number="meta.number"
v-model:visa-issue-date="meta.issueDate"
v-model:visa-expiry-date="meta.expireDate"
v-model:visa-issuing-place="meta.issuePlace"
/>
</template>
</UploadFile>
</UploadFileGroup>
</div>
</template>
<template v-if="employeeFormState.currentTab === 'healthCheck'">