feat: form ocr (#56)
* refactor: add i18n * refactor: add id in type employee visa * refactor: edit layout ui visa * refactor: add menu visa * refactor: add type visa * refactor: by value visa * refactor: add workerType in option * refactor: add index visa * feat: submit add delete and assign value * feat: use submitVisa * fix: col not working * refactor: handle mrz and remark can is null * refactor: add i18n * refactor: add option workerStatus * refactor: edit layout input * refactor: menu set sub true * refactor: add visa at dialog add * refactor: handle index visa * refactor: add i18n * refactor: add input entryCount and issueCountry * refactor: add input entryCout and issueCountry
This commit is contained in:
Net
GitHub
parent
5888f3a9dd
commit
ce3d809bd9
9 changed files with 1664 additions and 336 deletions
|
|
@ -1,5 +1,51 @@
|
|||
{
|
||||
"eng": {
|
||||
"workerStatus": [
|
||||
{
|
||||
"label": "Normal",
|
||||
"value": "normal"
|
||||
},
|
||||
{
|
||||
"label": "Service Canceled",
|
||||
"value": "canceled"
|
||||
},
|
||||
{
|
||||
"label": "Resigned",
|
||||
"value": "resigned"
|
||||
},
|
||||
{
|
||||
"label": "Absconded",
|
||||
"value": "absconded"
|
||||
},
|
||||
{
|
||||
"label": "Deceased",
|
||||
"value": "deceased"
|
||||
},
|
||||
{
|
||||
"label": "Repatriated to Home Country",
|
||||
"value": "repatriated"
|
||||
},
|
||||
{
|
||||
"label": "Did Not Enter Thailand",
|
||||
"value": "not_entered"
|
||||
}
|
||||
],
|
||||
|
||||
"workerType": [
|
||||
{
|
||||
"label": "Bangkok Bank",
|
||||
"value": "mou"
|
||||
},
|
||||
{
|
||||
"label": "Nationality Verification Group",
|
||||
"value": "ืืnvg"
|
||||
},
|
||||
{
|
||||
"label": "Border Pass Group",
|
||||
"value": "bp"
|
||||
}
|
||||
],
|
||||
|
||||
"bankBook": [
|
||||
{
|
||||
"label": "Bangkok Bank",
|
||||
|
|
@ -1001,6 +1047,52 @@
|
|||
},
|
||||
|
||||
"tha": {
|
||||
"workerStatus": [
|
||||
{
|
||||
"label": "ปกติ",
|
||||
"value": "normal"
|
||||
},
|
||||
{
|
||||
"label": "ยกเลิกบริการ",
|
||||
"value": "canceled"
|
||||
},
|
||||
{
|
||||
"label": "ลาออก",
|
||||
"value": "resigned"
|
||||
},
|
||||
{
|
||||
"label": "หลบหนี",
|
||||
"value": "absconded"
|
||||
},
|
||||
{
|
||||
"label": "เสียชีวิต",
|
||||
"value": "deceased"
|
||||
},
|
||||
{
|
||||
"label": "ส่งกลับประเทศต้นทาง",
|
||||
"value": "repatriated"
|
||||
},
|
||||
{
|
||||
"label": "ไม่ได้เดินทางเข้าประเทศไทย",
|
||||
"value": "not_entered"
|
||||
}
|
||||
],
|
||||
|
||||
"workerType": [
|
||||
{
|
||||
"label": "กลุ่ม MOU",
|
||||
"value": "mou"
|
||||
},
|
||||
{
|
||||
"label": "กลุ่ม พิสูจน์สัญชาติ",
|
||||
"value": "ืืnvg"
|
||||
},
|
||||
{
|
||||
"label": "กลุ่ม Border pass ",
|
||||
"value": "bp"
|
||||
}
|
||||
],
|
||||
|
||||
"bankBook": [
|
||||
{
|
||||
"label": "ธนาคารกรุงเทพ",
|
||||
|
|
|
|||
|
|
@ -1,12 +1,12 @@
|
|||
<script setup lang="ts">
|
||||
import { ref, watch, onMounted } from 'vue';
|
||||
import { QSelect } from 'quasar';
|
||||
import { selectFilterOptionRefMod } from 'stores/utils';
|
||||
import { dateFormat, parseAndFormatDate } from 'src/utils/datetime';
|
||||
import { ref } from 'vue';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
|
||||
import { selectFilterOptionRefMod } from 'stores/utils';
|
||||
import { calculateAge, disabledAfterToday } from 'src/utils/datetime';
|
||||
import useOptionStore from 'stores/options';
|
||||
import { watch } from 'vue';
|
||||
import { onMounted } from 'vue';
|
||||
|
||||
import DatePicker from '../shared/DatePicker.vue';
|
||||
|
||||
const optionStore = useOptionStore();
|
||||
|
|
@ -32,6 +32,29 @@ const previousPassportReference = defineModel<string>(
|
|||
'previousPassportReference',
|
||||
);
|
||||
|
||||
const workerStatus = defineModel<string>('workerStatus');
|
||||
const previousPassportNo = defineModel<string>('previousPassportNo');
|
||||
const birthDate = defineModel<Date>('birthDate');
|
||||
const nationality = defineModel<string>('nationality');
|
||||
const placeOfBirth = defineModel<string>('placeOfBirth');
|
||||
const countryOfBirth = defineModel<string>('countryOfBirth');
|
||||
const firstNameEN = defineModel<string>('firstNameEn');
|
||||
const middleNameEN = defineModel<string>('middleNameEn');
|
||||
const lastNameEN = defineModel<string>('lastNameEn');
|
||||
const middleName = defineModel<string>('middleName');
|
||||
|
||||
const genderOptions = ref<Record<string, unknown>[]>([]);
|
||||
let genderFilter: (
|
||||
value: string,
|
||||
update: (callbackFn: () => void, afterFn?: (ref: QSelect) => void) => void,
|
||||
) => void;
|
||||
|
||||
const nationalityOptions = ref<Record<string, unknown>[]>([]);
|
||||
let nationalityFilter: (
|
||||
value: string,
|
||||
update: (callbackFn: () => void, afterFn?: (ref: QSelect) => void) => void,
|
||||
) => void;
|
||||
|
||||
const props = defineProps<{
|
||||
title?: string;
|
||||
dense?: boolean;
|
||||
|
|
@ -64,6 +87,12 @@ let prefixNameFilter: (
|
|||
update: (callbackFn: () => void, afterFn?: (ref: QSelect) => void) => void,
|
||||
) => void;
|
||||
|
||||
const workerStatusOptions = ref<Record<string, unknown>[]>([]);
|
||||
let workerStatusFilter: (
|
||||
value: string,
|
||||
update: (callbackFn: () => void, afterFn?: (ref: QSelect) => void) => void,
|
||||
) => void;
|
||||
|
||||
function matPreFixName() {
|
||||
if (!gender.value) return;
|
||||
|
||||
|
|
@ -93,6 +122,24 @@ onMounted(() => {
|
|||
prefixNameOptions,
|
||||
'label',
|
||||
);
|
||||
|
||||
workerStatusFilter = selectFilterOptionRefMod(
|
||||
ref(optionStore.globalOption?.workerStatus),
|
||||
workerStatusOptions,
|
||||
'label',
|
||||
);
|
||||
|
||||
genderFilter = selectFilterOptionRefMod(
|
||||
ref(optionStore.globalOption?.gender),
|
||||
genderOptions,
|
||||
'label',
|
||||
);
|
||||
|
||||
nationalityFilter = selectFilterOptionRefMod(
|
||||
ref(optionStore.globalOption?.nationality),
|
||||
nationalityOptions,
|
||||
'label',
|
||||
);
|
||||
}
|
||||
|
||||
matPreFixName();
|
||||
|
|
@ -118,6 +165,24 @@ watch(
|
|||
passportIssuingCountryOptions,
|
||||
'label',
|
||||
);
|
||||
|
||||
workerStatusFilter = selectFilterOptionRefMod(
|
||||
ref(optionStore.globalOption?.workerStatus),
|
||||
workerStatusOptions,
|
||||
'label',
|
||||
);
|
||||
|
||||
genderFilter = selectFilterOptionRefMod(
|
||||
ref(optionStore.globalOption?.gender),
|
||||
genderOptions,
|
||||
'label',
|
||||
);
|
||||
|
||||
nationalityFilter = selectFilterOptionRefMod(
|
||||
ref(optionStore.globalOption?.nationality),
|
||||
nationalityOptions,
|
||||
'label',
|
||||
);
|
||||
},
|
||||
);
|
||||
|
||||
|
|
@ -139,43 +204,277 @@ watch(
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<div class="row col-12">
|
||||
<div
|
||||
v-if="!ocr && !hideTitle"
|
||||
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-passport"
|
||||
style="background-color: var(--surface-3)"
|
||||
/>
|
||||
{{ title }}
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-if="!ocr"
|
||||
class="col-12 row justify-between items-center q-pb-sm text-weight-bold"
|
||||
>
|
||||
<div class="app-text-muted">
|
||||
<slot name="expiryDate" />
|
||||
<template v-if="!!ocr">
|
||||
<div class="row col-12">
|
||||
<div v-if="!hideTitle" 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-passport"
|
||||
style="background-color: var(--surface-3)"
|
||||
/>
|
||||
{{ title }}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<slot name="button"></slot>
|
||||
<div class="row q-col-gutter-sm">
|
||||
<div class="row q-col-gutter-sm col-12">
|
||||
<q-select
|
||||
outlined
|
||||
clearable
|
||||
use-input
|
||||
fill-input
|
||||
emit-value
|
||||
map-options
|
||||
hide-selected
|
||||
hide-bottom-space
|
||||
input-debounce="0"
|
||||
option-value="value"
|
||||
option-label="label"
|
||||
v-model="passportType"
|
||||
class="col-12"
|
||||
:dense="dense"
|
||||
:readonly="readonly"
|
||||
:hide-dropdown-icon="readonly"
|
||||
:options="passportTypeOptions"
|
||||
:for="`${prefixId}-select-passport-type`"
|
||||
:label="$t('customerEmployee.form.passportType')"
|
||||
:rules="[
|
||||
(val) =>
|
||||
(val && val.length > 0) ||
|
||||
$t('form.error.selectField', {
|
||||
field: $t('customerEmployee.form.passportType'),
|
||||
}),
|
||||
]"
|
||||
@filter="passportTypeFilter"
|
||||
>
|
||||
<template v-slot:no-option>
|
||||
<q-item>
|
||||
<q-item-section class="text-grey">
|
||||
{{ $t('general.noData') }}
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</template>
|
||||
</q-select>
|
||||
|
||||
<q-input
|
||||
:for="`${prefixId}-input-passport-no`"
|
||||
:dense="dense"
|
||||
outlined
|
||||
:readonly="readonly"
|
||||
hide-bottom-space
|
||||
class="col-12"
|
||||
:label="$t('customerEmployee.form.passportNo')"
|
||||
v-model="passportNumber"
|
||||
:rules="[
|
||||
(val) => (val && val.length > 0) || $t('form.error.required'),
|
||||
]"
|
||||
/>
|
||||
|
||||
<q-input
|
||||
v-if="fullName && prefixNameOptions.length !== 0"
|
||||
:for="`${prefixId}-input-last-name`"
|
||||
:dense="dense"
|
||||
outlined
|
||||
:readonly="readonly"
|
||||
hide-bottom-space
|
||||
class="col"
|
||||
:label="`${$t('personnel.form.firstName')}- ${$t('personnel.form.lastName')}`"
|
||||
:model-value="`${prefixNameOptions.filter((v) => v.value === prefixName)[0].label || ''} ${firstName || ''} ${lastName || ''}`"
|
||||
/>
|
||||
|
||||
<template v-if="!fullName">
|
||||
<q-select
|
||||
outlined
|
||||
use-input
|
||||
fill-input
|
||||
emit-value
|
||||
map-options
|
||||
hide-selected
|
||||
hide-bottom-space
|
||||
input-debounce="0"
|
||||
option-label="label"
|
||||
option-value="value"
|
||||
hide-dropdown-icon
|
||||
class="col-2"
|
||||
:dense="dense"
|
||||
:readonly="readonly"
|
||||
:options="prefixNameOptions"
|
||||
:for="`${prefixId}-select-prefix-name`"
|
||||
:label="$t('personnel.form.prefixName')"
|
||||
@filter="prefixNameFilter"
|
||||
:model-value="readonly ? prefixName || '-' : prefixName"
|
||||
@update:model-value="
|
||||
(v) => (typeof v === 'string' ? (prefixName = v) : '')
|
||||
"
|
||||
@clear="prefixName = ''"
|
||||
>
|
||||
<template v-slot:no-option>
|
||||
<q-item>
|
||||
<q-item-section class="text-grey">
|
||||
{{ $t('general.noData') }}
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</template>
|
||||
</q-select>
|
||||
|
||||
<q-input
|
||||
:for="`${prefixId}-input-first-name`"
|
||||
:dense="dense"
|
||||
outlined
|
||||
:readonly="readonly"
|
||||
hide-bottom-space
|
||||
class="col"
|
||||
:label="$t('personnel.form.firstName')"
|
||||
v-model="firstName"
|
||||
/>
|
||||
|
||||
<q-input
|
||||
:for="`${prefixId}-input-last-name`"
|
||||
:dense="dense"
|
||||
outlined
|
||||
:readonly="readonly"
|
||||
hide-bottom-space
|
||||
class="col"
|
||||
:label="$t('personnel.form.lastName')"
|
||||
v-model="lastName"
|
||||
/>
|
||||
</template>
|
||||
<q-input
|
||||
:for="`${prefixId}-input-passport-ref`"
|
||||
:dense="dense"
|
||||
outlined
|
||||
:readonly="readonly"
|
||||
hide-bottom-space
|
||||
class="col-2"
|
||||
:label="$t('customerEmployee.form.passportRef')"
|
||||
:model-value="
|
||||
readonly
|
||||
? previousPassportReference || '-'
|
||||
: previousPassportReference
|
||||
"
|
||||
@update:model-value="
|
||||
(v) =>
|
||||
typeof v === 'string' ? (previousPassportReference = v) : ''
|
||||
"
|
||||
/>
|
||||
<q-input
|
||||
:for="`${prefixId}-input-passport-place`"
|
||||
:dense="dense"
|
||||
outlined
|
||||
:readonly="readonly"
|
||||
hide-bottom-space
|
||||
class="col-12"
|
||||
:label="$t('customerEmployee.form.passportPlace')"
|
||||
v-model="passportIssuingPlace"
|
||||
:rules="[
|
||||
(val) => (val && val.length > 0) || $t('form.error.required'),
|
||||
]"
|
||||
/>
|
||||
<q-select
|
||||
outlined
|
||||
clearable
|
||||
use-input
|
||||
fill-input
|
||||
emit-value
|
||||
map-options
|
||||
hide-selected
|
||||
hide-bottom-space
|
||||
input-debounce="0"
|
||||
option-value="value"
|
||||
option-label="label"
|
||||
class="col-12"
|
||||
v-model="passportIssuingCountry"
|
||||
:dense="dense"
|
||||
:readonly="readonly"
|
||||
:hide-dropdown-icon="readonly"
|
||||
:options="passportIssuingCountryOptions"
|
||||
:for="`${prefixId}-select-passport-country`"
|
||||
:label="$t('customerEmployee.form.passportIssuer')"
|
||||
:rules="[
|
||||
(val) =>
|
||||
(val && val.length > 0) ||
|
||||
$t('form.error.selectField', {
|
||||
field: $t('customerEmployee.form.passportIssuer'),
|
||||
}),
|
||||
]"
|
||||
@filter="passportIssuingCountryFilter"
|
||||
>
|
||||
<template v-slot:no-option>
|
||||
<q-item>
|
||||
<q-item-section class="text-grey">
|
||||
{{ $t('general.noData') }}
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</template>
|
||||
</q-select>
|
||||
<DatePicker
|
||||
:id="`${prefixId}-date-picker-passport-issueance`"
|
||||
:label="$t('customerEmployee.form.passportIssueDate')"
|
||||
v-model="passportIssueDate"
|
||||
class="col-6"
|
||||
:readonly="readonly"
|
||||
:rules="[
|
||||
(val) =>
|
||||
(val && val.length > 0) ||
|
||||
$t('form.error.selectField', {
|
||||
field: $t('customerEmployee.form.passportIssueDate'),
|
||||
}),
|
||||
]"
|
||||
/>
|
||||
<DatePicker
|
||||
:id="`${prefixId}-date-picker-passport-expire`"
|
||||
:label="$t('customerEmployee.form.passportExpireDate')"
|
||||
v-model="passportExpiryDate"
|
||||
class="col-6"
|
||||
:readonly="readonly"
|
||||
:rules="[
|
||||
(val) =>
|
||||
(val && val.length > 0) ||
|
||||
$t('form.error.selectField', {
|
||||
field: $t('customerEmployee.form.passportExpireDate'),
|
||||
}),
|
||||
]"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template v-if="!ocr">
|
||||
<div class="row col-12">
|
||||
<div v-if="!hideTitle" 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-passport"
|
||||
style="background-color: var(--surface-3)"
|
||||
/>
|
||||
{{ title }}
|
||||
</div>
|
||||
|
||||
<div class="row q-col-gutter-sm">
|
||||
<div
|
||||
v-if="!ocr"
|
||||
class="col row justify-center q-col-gutter-sml"
|
||||
style="max-height: 50%"
|
||||
class="col-12 row justify-between items-center q-pb-sm text-weight-bold"
|
||||
>
|
||||
<div style="border: 1px dashed">
|
||||
<div class="app-text-muted">
|
||||
<slot name="expiryDate" />
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<slot name="button"></slot>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row q-col-gutter-sm">
|
||||
<div
|
||||
class="col row justify-center q-col-gutter-sml"
|
||||
style="max-height: 50%"
|
||||
>
|
||||
<q-avatar
|
||||
style="border: 1px dashed; border-color: black"
|
||||
square
|
||||
size="100px"
|
||||
font-size="50px"
|
||||
|
|
@ -184,76 +483,53 @@ watch(
|
|||
icon="mdi-image-outline"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="row q-col-gutter-sm"
|
||||
:class="{ 'col-10': !ocr, 'col-12': ocr }"
|
||||
>
|
||||
<q-select
|
||||
outlined
|
||||
clearable
|
||||
use-input
|
||||
fill-input
|
||||
emit-value
|
||||
map-options
|
||||
hide-selected
|
||||
hide-bottom-space
|
||||
input-debounce="0"
|
||||
option-value="value"
|
||||
option-label="label"
|
||||
v-model="passportType"
|
||||
:class="{ 'col-12': ocr, 'col-md-3': !ocr }"
|
||||
:dense="dense"
|
||||
:readonly="readonly"
|
||||
:hide-dropdown-icon="readonly"
|
||||
:options="passportTypeOptions"
|
||||
:for="`${prefixId}-select-passport-type`"
|
||||
:label="$t('customerEmployee.form.passportType')"
|
||||
:rules="[
|
||||
(val) =>
|
||||
(val && val.length > 0) ||
|
||||
$t('form.error.selectField', {
|
||||
field: $t('customerEmployee.form.passportType'),
|
||||
}),
|
||||
]"
|
||||
@filter="passportTypeFilter"
|
||||
>
|
||||
<template v-slot:no-option>
|
||||
<q-item>
|
||||
<q-item-section class="text-grey">
|
||||
{{ $t('general.noData') }}
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</template>
|
||||
</q-select>
|
||||
<div class="row q-col-gutter-sm col-10">
|
||||
<q-select
|
||||
outlined
|
||||
clearable
|
||||
use-input
|
||||
fill-input
|
||||
emit-value
|
||||
map-options
|
||||
hide-selected
|
||||
hide-bottom-space
|
||||
input-debounce="0"
|
||||
option-value="value"
|
||||
option-label="label"
|
||||
class="col-6"
|
||||
:dense="dense"
|
||||
:readonly="readonly"
|
||||
:options="workerStatusOptions"
|
||||
:hide-dropdown-icon="readonly"
|
||||
:for="`${prefixId}-select-visa-type`"
|
||||
:label="$t('customerEmployee.form.workerType')"
|
||||
@filter="workerStatusFilter"
|
||||
:model-value="readonly ? workerStatus || '-' : workerStatus"
|
||||
@update:model-value="
|
||||
(v) => (typeof v === 'string' ? (workerStatus = v) : '')
|
||||
"
|
||||
@clear="workerStatus = ''"
|
||||
>
|
||||
<template v-slot:no-option>
|
||||
<q-item>
|
||||
<q-item-section class="text-grey">
|
||||
{{ $t('general.noData') }}
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</template>
|
||||
</q-select>
|
||||
|
||||
<q-input
|
||||
:for="`${prefixId}-input-passport-no`"
|
||||
:dense="dense"
|
||||
outlined
|
||||
:readonly="readonly"
|
||||
hide-bottom-space
|
||||
:class="{ 'col-12': ocr, 'col-6': !ocr, 'col-md-3': !ocr }"
|
||||
:label="$t('customerEmployee.form.passportNo')"
|
||||
v-model="passportNumber"
|
||||
:rules="[
|
||||
(val) => (val && val.length > 0) || $t('form.error.required'),
|
||||
]"
|
||||
/>
|
||||
<q-input
|
||||
:for="`${prefixId}-input-previous-passport-Number`"
|
||||
:dense="dense"
|
||||
outlined
|
||||
:readonly="readonly"
|
||||
hide-bottom-space
|
||||
class="col-6"
|
||||
:label="$t('customerEmployee.form.previousPassportNumber')"
|
||||
v-model="previousPassportNo"
|
||||
/>
|
||||
|
||||
<q-input
|
||||
v-if="fullName && prefixNameOptions.length !== 0"
|
||||
:for="`${prefixId}-input-last-name`"
|
||||
:dense="dense"
|
||||
outlined
|
||||
:readonly="readonly"
|
||||
hide-bottom-space
|
||||
class="col"
|
||||
:label="`${$t('personnel.form.firstName')}- ${$t('personnel.form.lastName')}`"
|
||||
:model-value="`${prefixNameOptions.filter((v) => v.value === prefixName)[0].label || ''} ${firstName || ''} ${lastName || ''}`"
|
||||
/>
|
||||
|
||||
<template v-if="!fullName">
|
||||
<q-select
|
||||
outlined
|
||||
use-input
|
||||
|
|
@ -266,7 +542,7 @@ watch(
|
|||
option-label="label"
|
||||
option-value="value"
|
||||
hide-dropdown-icon
|
||||
:class="{ 'col-2': ocr, 'col-1': !ocr }"
|
||||
class="col-2"
|
||||
:dense="dense"
|
||||
:readonly="readonly"
|
||||
:options="prefixNameOptions"
|
||||
|
|
@ -295,8 +571,25 @@ watch(
|
|||
:readonly="readonly"
|
||||
hide-bottom-space
|
||||
class="col"
|
||||
:label="$t('personnel.form.firstName')"
|
||||
v-model="firstName"
|
||||
:label="$t('form.firstName')"
|
||||
:model-value="readonly ? firstName || '-' : firstName"
|
||||
@update:model-value="
|
||||
(v) => (typeof v === 'string' ? (firstName = v) : '')
|
||||
"
|
||||
/>
|
||||
|
||||
<q-input
|
||||
:for="`${prefixId}-input-middle-name`"
|
||||
:dense="dense"
|
||||
outlined
|
||||
:readonly="readonly"
|
||||
hide-bottom-space
|
||||
class="col"
|
||||
:label="$t('form.middleName')"
|
||||
:model-value="readonly ? middleName || '-' : middleName"
|
||||
@update:model-value="
|
||||
(v) => (typeof v === 'string' ? (middleName = v) : '')
|
||||
"
|
||||
/>
|
||||
|
||||
<q-input
|
||||
|
|
@ -306,111 +599,308 @@ watch(
|
|||
:readonly="readonly"
|
||||
hide-bottom-space
|
||||
class="col"
|
||||
:label="$t('personnel.form.lastName')"
|
||||
v-model="lastName"
|
||||
:label="$t('form.lastName')"
|
||||
:model-value="readonly ? lastName || '-' : lastName"
|
||||
@update:model-value="
|
||||
(v) => (typeof v === 'string' ? (lastName = v) : '')
|
||||
"
|
||||
/>
|
||||
</template>
|
||||
<q-input
|
||||
:for="`${prefixId}-input-passport-ref`"
|
||||
:dense="dense"
|
||||
outlined
|
||||
:readonly="readonly"
|
||||
hide-bottom-space
|
||||
:class="{ 'col-12': ocr, 'col-6': !ocr }"
|
||||
:label="$t('customerEmployee.form.passportRef')"
|
||||
:model-value="
|
||||
|
||||
<q-input
|
||||
:for="`${prefixId}-input-full-name`"
|
||||
:dense="dense"
|
||||
outlined
|
||||
:readonly="readonly"
|
||||
hide-bottom-space
|
||||
class="col-12"
|
||||
:disable="!readonly"
|
||||
:label="$t('customer.table.fullname')"
|
||||
:model-value="`${(prefixNameOptions.find((v) => v.value === prefixName) || {}).label || ''} ${firstName || ''} ${lastName || ''}`"
|
||||
/>
|
||||
|
||||
<q-input
|
||||
:for="`${prefixId}-input-first-name-en`"
|
||||
:dense="dense"
|
||||
outlined
|
||||
:readonly="readonly"
|
||||
hide-bottom-space
|
||||
class="col-4"
|
||||
:label="$t('form.firstNameEN')"
|
||||
:model-value="readonly ? firstNameEN || '-' : firstNameEN"
|
||||
@update:model-value="
|
||||
(v) => (typeof v === 'string' ? (firstNameEN = v) : '')
|
||||
"
|
||||
/>
|
||||
|
||||
<q-input
|
||||
:for="`${prefixId}-input-middle-name-en`"
|
||||
:dense="dense"
|
||||
outlined
|
||||
:readonly="readonly"
|
||||
hide-bottom-space
|
||||
class="col-4"
|
||||
:label="$t('form.middleNameEN')"
|
||||
:model-value="readonly ? middleNameEN || '-' : middleNameEN"
|
||||
@update:model-value="
|
||||
(v) => (typeof v === 'string' ? (middleNameEN = v) : '')
|
||||
"
|
||||
/>
|
||||
|
||||
<q-input
|
||||
:for="`${prefixId}-input-last-name-en`"
|
||||
:dense="dense"
|
||||
outlined
|
||||
:readonly="readonly"
|
||||
hide-bottom-space
|
||||
class="col-4"
|
||||
:label="$t('form.lastNameEN')"
|
||||
:model-value="readonly ? lastNameEN || '-' : lastNameEN"
|
||||
@update:model-value="
|
||||
(v) => (typeof v === 'string' ? (lastNameEN = v) : '')
|
||||
"
|
||||
/>
|
||||
|
||||
<q-input
|
||||
:for="`${prefixId}-input-full-name-en`"
|
||||
:dense="dense"
|
||||
outlined
|
||||
:readonly="readonly"
|
||||
hide-bottom-space
|
||||
class="col-12"
|
||||
:label="$t('customer.table.fullnameEN')"
|
||||
:disable="!readonly"
|
||||
:model-value="`${(prefixNameOptions.find((v) => v.value === prefixName) || {}).value || ''} ${firstName || ''} ${lastName || ''}`"
|
||||
/>
|
||||
|
||||
<q-select
|
||||
outlined
|
||||
use-input
|
||||
fill-input
|
||||
emit-value
|
||||
map-options
|
||||
hide-selected
|
||||
hide-bottom-space
|
||||
input-debounce="0"
|
||||
option-label="label"
|
||||
option-value="value"
|
||||
class="col-2"
|
||||
dense
|
||||
:readonly="readonly"
|
||||
:options="genderOptions"
|
||||
:hide-dropdown-icon="readonly"
|
||||
:for="`${prefixId}-select-gender`"
|
||||
:label="$t('form.gender')"
|
||||
@filter="genderFilter"
|
||||
:model-value="readonly ? gender || '-' : gender"
|
||||
@update:model-value="
|
||||
(v) => (typeof v === 'string' ? (gender = v) : '')
|
||||
"
|
||||
@clear="gender = ''"
|
||||
>
|
||||
<template v-slot:no-option>
|
||||
<q-item>
|
||||
<q-item-section class="text-grey">
|
||||
{{ $t('general.noData') }}
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</template>
|
||||
</q-select>
|
||||
|
||||
<q-input
|
||||
:for="`${prefixId}-input-passport-no`"
|
||||
:dense="dense"
|
||||
outlined
|
||||
:readonly="readonly"
|
||||
hide-bottom-space
|
||||
class="col-6 col-md-3"
|
||||
:label="$t('customerEmployee.form.passportNo')"
|
||||
v-model="passportNumber"
|
||||
:rules="[
|
||||
(val) => (val && val.length > 0) || $t('form.error.required'),
|
||||
]"
|
||||
/>
|
||||
|
||||
<DatePicker
|
||||
v-model="birthDate"
|
||||
class="col-2"
|
||||
:id="`${prefixId}-input-birth-date`"
|
||||
:readonly="readonly"
|
||||
:label="$t('form.birthDate')"
|
||||
:disabled-dates="disabledAfterToday"
|
||||
:rules="[
|
||||
(val: string) =>
|
||||
!!val ||
|
||||
$t('form.error.selectField', { field: $t('form.birthDate') }),
|
||||
]"
|
||||
/>
|
||||
|
||||
<q-input
|
||||
:for="`${prefixId}-input-age`"
|
||||
:id="`${prefixId}-input-age`"
|
||||
dense
|
||||
outlined
|
||||
readonly
|
||||
? previousPassportReference || '-'
|
||||
: previousPassportReference
|
||||
"
|
||||
@update:model-value="
|
||||
(v) =>
|
||||
typeof v === 'string' ? (previousPassportReference = v) : ''
|
||||
"
|
||||
/>
|
||||
<q-input
|
||||
:for="`${prefixId}-input-passport-place`"
|
||||
:dense="dense"
|
||||
outlined
|
||||
:readonly="readonly"
|
||||
hide-bottom-space
|
||||
:class="{ 'col-12': ocr, 'col-6': !ocr, 'col-md-3': !ocr }"
|
||||
:label="$t('customerEmployee.form.passportPlace')"
|
||||
v-model="passportIssuingPlace"
|
||||
:rules="[
|
||||
(val) => (val && val.length > 0) || $t('form.error.required'),
|
||||
]"
|
||||
/>
|
||||
<q-select
|
||||
outlined
|
||||
clearable
|
||||
use-input
|
||||
fill-input
|
||||
emit-value
|
||||
map-options
|
||||
hide-selected
|
||||
hide-bottom-space
|
||||
input-debounce="0"
|
||||
option-value="value"
|
||||
option-label="label"
|
||||
:class="{ 'col-12': ocr, 'col-6': !ocr, 'col-md-3': !ocr }"
|
||||
v-model="passportIssuingCountry"
|
||||
:dense="dense"
|
||||
:readonly="readonly"
|
||||
:hide-dropdown-icon="readonly"
|
||||
:options="passportIssuingCountryOptions"
|
||||
:for="`${prefixId}-select-passport-country`"
|
||||
:label="$t('customerEmployee.form.passportIssuer')"
|
||||
:rules="[
|
||||
(val) =>
|
||||
(val && val.length > 0) ||
|
||||
$t('form.error.selectField', {
|
||||
field: $t('customerEmployee.form.passportIssuer'),
|
||||
}),
|
||||
]"
|
||||
@filter="passportIssuingCountryFilter"
|
||||
>
|
||||
<template v-slot:no-option>
|
||||
<q-item>
|
||||
<q-item-section class="text-grey">
|
||||
{{ $t('general.noData') }}
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</template>
|
||||
</q-select>
|
||||
<DatePicker
|
||||
:id="`${prefixId}-date-picker-passport-issueance`"
|
||||
:label="$t('customerEmployee.form.passportIssueDate')"
|
||||
v-model="passportIssueDate"
|
||||
class="col-6"
|
||||
:class="{ 'col-md-3': !ocr }"
|
||||
:readonly="readonly"
|
||||
:rules="[
|
||||
(val) =>
|
||||
(val && val.length > 0) ||
|
||||
$t('form.error.selectField', {
|
||||
field: $t('customerEmployee.form.passportIssueDate'),
|
||||
}),
|
||||
]"
|
||||
/>
|
||||
<DatePicker
|
||||
:id="`${prefixId}-date-picker-passport-expire`"
|
||||
:label="$t('customerEmployee.form.passportExpireDate')"
|
||||
v-model="passportExpiryDate"
|
||||
class="col-6"
|
||||
:class="{ 'col-md-3': !ocr }"
|
||||
:readonly="readonly"
|
||||
:rules="[
|
||||
(val) =>
|
||||
(val && val.length > 0) ||
|
||||
$t('form.error.selectField', {
|
||||
field: $t('customerEmployee.form.passportExpireDate'),
|
||||
}),
|
||||
]"
|
||||
/>
|
||||
:label="$t('personnel.age')"
|
||||
class="col-2"
|
||||
:model-value="
|
||||
birthDate?.toString() === 'Invalid Date' ||
|
||||
birthDate?.toString() === undefined
|
||||
? ''
|
||||
: calculateAge(birthDate)
|
||||
"
|
||||
/>
|
||||
|
||||
<q-select
|
||||
outlined
|
||||
clearable
|
||||
use-input
|
||||
fill-input
|
||||
emit-value
|
||||
map-options
|
||||
hide-selected
|
||||
hide-bottom-space
|
||||
input-debounce="0"
|
||||
option-value="value"
|
||||
option-label="label"
|
||||
class="col"
|
||||
:dense="dense"
|
||||
:readonly="readonly"
|
||||
:options="nationalityOptions"
|
||||
:hide-dropdown-icon="readonly"
|
||||
:for="`${prefixId}-select-visa-type`"
|
||||
:label="$t('general.nationality')"
|
||||
@filter="nationalityFilter"
|
||||
:model-value="readonly ? nationality || '-' : nationality"
|
||||
@update:model-value="
|
||||
(v) => (typeof v === 'string' ? (nationality = v) : '')
|
||||
"
|
||||
@clear="nationality = ''"
|
||||
>
|
||||
<template v-slot:no-option>
|
||||
<q-item>
|
||||
<q-item-section class="text-grey">
|
||||
{{ $t('general.noData') }}
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</template>
|
||||
</q-select>
|
||||
|
||||
<q-input
|
||||
:for="`${prefixId}-input-place-of-birth`"
|
||||
:dense="dense"
|
||||
outlined
|
||||
:readonly="readonly"
|
||||
hide-bottom-space
|
||||
class="col-4"
|
||||
:label="$t('customerEmployee.form.placeOfBirth')"
|
||||
v-model="placeOfBirth"
|
||||
/>
|
||||
|
||||
<q-select
|
||||
outlined
|
||||
clearable
|
||||
use-input
|
||||
fill-input
|
||||
emit-value
|
||||
map-options
|
||||
hide-selected
|
||||
hide-bottom-space
|
||||
input-debounce="0"
|
||||
option-value="value"
|
||||
option-label="label"
|
||||
class="col-4"
|
||||
:dense="dense"
|
||||
:readonly="readonly"
|
||||
:options="nationalityOptions"
|
||||
:hide-dropdown-icon="readonly"
|
||||
:for="`${prefixId}-select-visa-type`"
|
||||
:label="$t('customerEmployee.form.countryOfbirth')"
|
||||
@filter="nationalityFilter"
|
||||
:model-value="readonly ? countryOfBirth || '-' : countryOfBirth"
|
||||
@update:model-value="
|
||||
(v) => (typeof v === 'string' ? (countryOfBirth = v) : '')
|
||||
"
|
||||
@clear="countryOfBirth = ''"
|
||||
>
|
||||
<template v-slot:no-option>
|
||||
<q-item>
|
||||
<q-item-section class="text-grey">
|
||||
{{ $t('general.noData') }}
|
||||
</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
|
||||
input-debounce="0"
|
||||
option-value="value"
|
||||
option-label="label"
|
||||
class="col-6 col-md-4"
|
||||
v-model="passportIssuingCountry"
|
||||
:dense="dense"
|
||||
:readonly="readonly"
|
||||
:hide-dropdown-icon="readonly"
|
||||
:options="passportIssuingCountryOptions"
|
||||
:for="`${prefixId}-select-passport-country`"
|
||||
:label="$t('customerEmployee.form.passportIssuer')"
|
||||
:rules="[
|
||||
(val) =>
|
||||
(val && val.length > 0) ||
|
||||
$t('form.error.selectField', {
|
||||
field: $t('customerEmployee.form.passportIssuer'),
|
||||
}),
|
||||
]"
|
||||
@filter="passportIssuingCountryFilter"
|
||||
>
|
||||
<template v-slot:no-option>
|
||||
<q-item>
|
||||
<q-item-section class="text-grey">
|
||||
{{ $t('general.noData') }}
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</template>
|
||||
</q-select>
|
||||
|
||||
<DatePicker
|
||||
:id="`${prefixId}-date-picker-passport-issueance`"
|
||||
:label="$t('customerEmployee.form.passportIssueDate')"
|
||||
v-model="passportIssueDate"
|
||||
class="col-6 col-md-3"
|
||||
:readonly="readonly"
|
||||
:rules="[
|
||||
(val) =>
|
||||
(val && val.length > 0) ||
|
||||
$t('form.error.selectField', {
|
||||
field: $t('customerEmployee.form.passportIssueDate'),
|
||||
}),
|
||||
]"
|
||||
/>
|
||||
<DatePicker
|
||||
:id="`${prefixId}-date-picker-passport-expire`"
|
||||
:label="$t('customerEmployee.form.passportExpireDate')"
|
||||
v-model="passportExpiryDate"
|
||||
class="col-6 col-md-3"
|
||||
:readonly="readonly"
|
||||
:rules="[
|
||||
(val) =>
|
||||
(val && val.length > 0) ||
|
||||
$t('form.error.selectField', {
|
||||
field: $t('customerEmployee.form.passportExpireDate'),
|
||||
}),
|
||||
]"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
|
|
|
|||
|
|
@ -32,9 +32,17 @@ const visaIssuingPlace = defineModel<string>('visaIssuingPlace');
|
|||
const visaStayUntilDate = defineModel<Date | null | string>(
|
||||
'visaStayUntilDate',
|
||||
);
|
||||
const entryCount = defineModel<number>('entryCount');
|
||||
const issueCountry = defineModel<string>('issueCountry');
|
||||
|
||||
const tm6Number = defineModel<string>('tm6Number');
|
||||
const entryDate = defineModel<Date | null | string>('entryDate');
|
||||
|
||||
const workerType = defineModel<string>('workerType');
|
||||
const dayNext = defineModel<Date>('dayNext');
|
||||
const tmNo = defineModel<string>('tmNo');
|
||||
const enteredCheckpoint = defineModel<string>('enteredCheckpoint');
|
||||
|
||||
defineProps<{
|
||||
title?: string;
|
||||
dense?: boolean;
|
||||
|
|
@ -47,6 +55,14 @@ defineProps<{
|
|||
ocr?: boolean;
|
||||
}>();
|
||||
|
||||
async function calculate90DayNext(currentDate: Date) {
|
||||
const futureDate = new Date(currentDate);
|
||||
|
||||
// Add 90 days to the current date
|
||||
futureDate.setDate(currentDate.getDate() + 90);
|
||||
|
||||
return futureDate;
|
||||
}
|
||||
async function fetchProvince() {
|
||||
const result = await addressStore.fetchProvince();
|
||||
|
||||
|
|
@ -63,12 +79,24 @@ let visaTypeFilter: (
|
|||
update: (callbackFn: () => void, afterFn?: (ref: QSelect) => void) => void,
|
||||
) => void;
|
||||
|
||||
const workerTypeOptions = ref<Record<string, unknown>[]>([]);
|
||||
let workerTypeFilter: (
|
||||
value: string,
|
||||
update: (callbackFn: () => void, afterFn?: (ref: QSelect) => void) => void,
|
||||
) => void;
|
||||
|
||||
onMounted(() => {
|
||||
visaTypeFilter = selectFilterOptionRefMod(
|
||||
ref(optionStore.globalOption?.nationality),
|
||||
visaTypeOptions,
|
||||
'label',
|
||||
);
|
||||
|
||||
workerTypeFilter = selectFilterOptionRefMod(
|
||||
ref(optionStore.globalOption?.workerType),
|
||||
workerTypeOptions,
|
||||
'label',
|
||||
);
|
||||
});
|
||||
|
||||
watch(
|
||||
|
|
@ -79,150 +107,442 @@ watch(
|
|||
visaTypeOptions,
|
||||
'label',
|
||||
);
|
||||
|
||||
workerTypeFilter = selectFilterOptionRefMod(
|
||||
ref(optionStore.globalOption?.workerType),
|
||||
workerTypeOptions,
|
||||
'label',
|
||||
);
|
||||
},
|
||||
);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="row">
|
||||
<div v-if="!ocr" 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-notebook-outline"
|
||||
style="background-color: var(--surface-3)"
|
||||
/>
|
||||
{{ $t(`${title}`) }}
|
||||
</div>
|
||||
<div class="col-12 row q-col-gutter-sm">
|
||||
<q-select
|
||||
outlined
|
||||
clearable
|
||||
use-input
|
||||
fill-input
|
||||
emit-value
|
||||
map-options
|
||||
hide-selected
|
||||
hide-bottom-space
|
||||
input-debounce="0"
|
||||
option-value="value"
|
||||
option-label="label"
|
||||
:class="{ 'col-4': !ocr, 'col-6': ocr }"
|
||||
:dense="dense"
|
||||
:readonly="readonly"
|
||||
:options="visaTypeOptions"
|
||||
:hide-dropdown-icon="readonly"
|
||||
:for="`${prefixId}-select-visa-type`"
|
||||
:label="$t('customerEmployee.form.visaType')"
|
||||
@filter="visaTypeFilter"
|
||||
:model-value="readonly ? visaType || '-' : visaType"
|
||||
@update:model-value="
|
||||
(v) => (typeof v === 'string' ? (visaType = v) : '')
|
||||
"
|
||||
@clear="visaType = ''"
|
||||
>
|
||||
<template v-slot:no-option>
|
||||
<q-item>
|
||||
<q-item-section class="text-grey">
|
||||
{{ $t('general.noData') }}
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</template>
|
||||
</q-select>
|
||||
<!-- :rules="[
|
||||
<template v-if="!!ocr">
|
||||
<div class="row">
|
||||
<div class="col-12 row q-col-gutter-sm">
|
||||
<q-select
|
||||
outlined
|
||||
clearable
|
||||
use-input
|
||||
fill-input
|
||||
emit-value
|
||||
map-options
|
||||
hide-selected
|
||||
hide-bottom-space
|
||||
input-debounce="0"
|
||||
option-value="value"
|
||||
option-label="label"
|
||||
class="col-6"
|
||||
:dense="dense"
|
||||
:readonly="readonly"
|
||||
:options="visaTypeOptions"
|
||||
:hide-dropdown-icon="readonly"
|
||||
:for="`${prefixId}-select-visa-type`"
|
||||
:label="$t('customerEmployee.form.visaType')"
|
||||
@filter="visaTypeFilter"
|
||||
:model-value="readonly ? visaType || '-' : visaType"
|
||||
@update:model-value="
|
||||
(v) => (typeof v === 'string' ? (visaType = v) : '')
|
||||
"
|
||||
@clear="visaType = ''"
|
||||
>
|
||||
<template v-slot:no-option>
|
||||
<q-item>
|
||||
<q-item-section class="text-grey">
|
||||
{{ $t('general.noData') }}
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</template>
|
||||
</q-select>
|
||||
<!-- :rules="[
|
||||
(val: string) =>
|
||||
!!val || $t('selectValidate') + $t('formDialogInputVisaType'),
|
||||
]" -->
|
||||
<q-input
|
||||
:for="`${prefixId}-input-visa-no`"
|
||||
:dense="dense"
|
||||
outlined
|
||||
:readonly="readonly"
|
||||
hide-bottom-space
|
||||
:class="{ 'col-4': !ocr, 'col-6': ocr }"
|
||||
:label="$t('customerEmployee.form.visaNo')"
|
||||
:model-value="readonly ? visaNumber || '-' : visaNumber"
|
||||
@update:model-value="
|
||||
(v) => (typeof v === 'string' ? (visaNumber = v) : '')
|
||||
"
|
||||
/>
|
||||
<!-- :rules="[
|
||||
<q-input
|
||||
:for="`${prefixId}-input-visa-no`"
|
||||
:dense="dense"
|
||||
outlined
|
||||
:readonly="readonly"
|
||||
hide-bottom-space
|
||||
class="col-6"
|
||||
:label="$t('customerEmployee.form.visaNo')"
|
||||
:model-value="readonly ? visaNumber || '-' : visaNumber"
|
||||
@update:model-value="
|
||||
(v) => (typeof v === 'string' ? (visaNumber = v) : '')
|
||||
"
|
||||
/>
|
||||
<!-- :rules="[
|
||||
(val: string) =>
|
||||
!!val || $t('inputValidate') + $t('formDialogInputVisaNo'),
|
||||
]" -->
|
||||
<DatePicker
|
||||
:class="{ 'col-2': !ocr, 'col-6': ocr }"
|
||||
:id="`${prefixId}-date-picker-visa-issuance`"
|
||||
:readonly="readonly"
|
||||
:label="$t('customerEmployee.form.visaIssuance')"
|
||||
v-model="visaIssueDate"
|
||||
clearable
|
||||
/>
|
||||
<DatePicker
|
||||
:class="{ 'col-2': !ocr, 'col-6': ocr }"
|
||||
:id="`${prefixId}-date-picker-visa-expire`"
|
||||
:readonly="readonly"
|
||||
:label="$t('customerEmployee.form.visaExpire')"
|
||||
v-model="visaExpiryDate"
|
||||
clearable
|
||||
/>
|
||||
<DatePicker
|
||||
class="col-6"
|
||||
:id="`${prefixId}-date-picker-visa-issuance`"
|
||||
:readonly="readonly"
|
||||
:label="$t('customerEmployee.form.visaIssuance')"
|
||||
v-model="visaIssueDate"
|
||||
clearable
|
||||
/>
|
||||
<DatePicker
|
||||
class="col-6"
|
||||
:id="`${prefixId}-date-picker-visa-expire`"
|
||||
:readonly="readonly"
|
||||
:label="$t('customerEmployee.form.visaExpire')"
|
||||
v-model="visaExpiryDate"
|
||||
clearable
|
||||
/>
|
||||
|
||||
<q-input
|
||||
:for="`${prefixId}-input-visa-place`"
|
||||
:dense="dense"
|
||||
outlined
|
||||
:readonly="readonly"
|
||||
hide-bottom-space
|
||||
:class="{ 'col-5': !ocr, 'col-6': ocr }"
|
||||
:label="$t('customerEmployee.form.visaPlace')"
|
||||
:model-value="readonly ? visaIssuingPlace || '-' : visaIssuingPlace"
|
||||
@update:model-value="
|
||||
(v) => (typeof v === 'string' ? (visaIssuingPlace = v) : '')
|
||||
"
|
||||
/>
|
||||
<!-- :rules="[
|
||||
<q-input
|
||||
:for="`${prefixId}-input-visa-place`"
|
||||
:dense="dense"
|
||||
outlined
|
||||
:readonly="readonly"
|
||||
hide-bottom-space
|
||||
class="col-6"
|
||||
:label="$t('customerEmployee.form.visaPlace')"
|
||||
:model-value="readonly ? visaIssuingPlace || '-' : visaIssuingPlace"
|
||||
@update:model-value="
|
||||
(v) => (typeof v === 'string' ? (visaIssuingPlace = v) : '')
|
||||
"
|
||||
/>
|
||||
<!-- :rules="[
|
||||
(val: string) =>
|
||||
!!val || $t('selectValidate') + $t('formDialogInputVisaPlace'),
|
||||
]" -->
|
||||
<DatePicker
|
||||
:class="{ 'col-4': !ocr, 'col-6': ocr }"
|
||||
:id="`${prefixId}-date-picker-visa-until`"
|
||||
:readonly="readonly"
|
||||
:label="$t('customerEmployee.form.visaStayUntil')"
|
||||
v-model="visaStayUntilDate"
|
||||
clearable
|
||||
/>
|
||||
<DatePicker
|
||||
class="col-6"
|
||||
:id="`${prefixId}-date-picker-visa-until`"
|
||||
:readonly="readonly"
|
||||
:label="$t('customerEmployee.form.visaStayUntil')"
|
||||
v-model="visaStayUntilDate"
|
||||
clearable
|
||||
/>
|
||||
|
||||
<q-input
|
||||
:for="`${prefixId}-input-tm6`"
|
||||
:dense="dense"
|
||||
outlined
|
||||
:readonly="readonly"
|
||||
hide-bottom-space
|
||||
:class="{ 'col-5': !ocr, 'col-6': ocr }"
|
||||
:label="$t('customerEmployee.form.visaTM6')"
|
||||
:model-value="readonly ? tm6Number || '-' : tm6Number"
|
||||
@update:model-value="
|
||||
(v) => (typeof v === 'string' ? (tm6Number = v) : '')
|
||||
"
|
||||
@clear="tm6Number = ''"
|
||||
/>
|
||||
<!-- :rules="[
|
||||
<q-input
|
||||
:for="`${prefixId}-input-tm6`"
|
||||
:dense="dense"
|
||||
outlined
|
||||
:readonly="readonly"
|
||||
hide-bottom-space
|
||||
class="col-6"
|
||||
:label="$t('customerEmployee.form.visaTM6')"
|
||||
:model-value="readonly ? tm6Number || '-' : tm6Number"
|
||||
@update:model-value="
|
||||
(v) => (typeof v === 'string' ? (tm6Number = v) : '')
|
||||
"
|
||||
@clear="tm6Number = ''"
|
||||
/>
|
||||
<!-- :rules="[
|
||||
(val: string) =>
|
||||
!!val || $t('inputValidate') + $t('formDialogInputVisaTM6'),
|
||||
]" -->
|
||||
<DatePicker
|
||||
:class="{ 'col-4': !ocr, 'col-6': ocr }"
|
||||
:id="`${prefixId}-date-picker-visa-enter`"
|
||||
:readonly="readonly"
|
||||
:label="$t('customerEmployee.form.visaEnter')"
|
||||
v-model="entryDate"
|
||||
clearable
|
||||
/>
|
||||
<DatePicker
|
||||
class="col-6"
|
||||
:id="`${prefixId}-date-picker-visa-enter`"
|
||||
:readonly="readonly"
|
||||
:label="$t('customerEmployee.form.visaEnter')"
|
||||
v-model="entryDate"
|
||||
clearable
|
||||
/>
|
||||
|
||||
<q-select
|
||||
outlined
|
||||
clearable
|
||||
use-input
|
||||
fill-input
|
||||
emit-value
|
||||
map-options
|
||||
hide-selected
|
||||
hide-bottom-space
|
||||
input-debounce="0"
|
||||
option-value="value"
|
||||
option-label="label"
|
||||
class="col-6"
|
||||
:dense="dense"
|
||||
:readonly="readonly"
|
||||
:options="visaTypeOptions"
|
||||
:hide-dropdown-icon="readonly"
|
||||
:for="`${prefixId}-select-issue-country`"
|
||||
:label="$t('customerEmployee.form.issueCountry')"
|
||||
@filter="visaTypeFilter"
|
||||
:model-value="readonly ? issueCountry || '-' : issueCountry"
|
||||
@update:model-value="
|
||||
(v) => (typeof v === 'string' ? (issueCountry = v) : '')
|
||||
"
|
||||
@clear="visaType = ''"
|
||||
>
|
||||
<template v-slot:no-option>
|
||||
<q-item>
|
||||
<q-item-section class="text-grey">
|
||||
{{ $t('general.noData') }}
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</template>
|
||||
</q-select>
|
||||
|
||||
<q-input
|
||||
style="height: 60px"
|
||||
:for="`${prefixId}-input-entry-count`"
|
||||
:dense="dense"
|
||||
outlined
|
||||
:readonly="readonly"
|
||||
hide-bottom-space
|
||||
class="col-6"
|
||||
:label="$t('customerEmployee.form.entryCount')"
|
||||
v-model="entryCount"
|
||||
type="number"
|
||||
min="0"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template v-if="!ocr">
|
||||
<div class="column full-width" style="height: 150px; margin-bottom: 80px">
|
||||
<div
|
||||
class="col-3 row item-center justify-between text-weight-bold app-text-muted"
|
||||
>
|
||||
<div>
|
||||
<slot name="expiryDate" />
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<slot name="button"></slot>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col row">
|
||||
<div class="col row justify-center" style="max-height: 50%">
|
||||
<div style="border: 1px dashed">
|
||||
<q-avatar
|
||||
square
|
||||
size="100px"
|
||||
font-size="50px"
|
||||
color="grey-4"
|
||||
text-color="grey"
|
||||
icon="mdi-image-outline"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-10 row q-col-gutter-sm">
|
||||
<q-select
|
||||
outlined
|
||||
clearable
|
||||
use-input
|
||||
fill-input
|
||||
emit-value
|
||||
map-options
|
||||
hide-selected
|
||||
hide-bottom-space
|
||||
input-debounce="0"
|
||||
option-value="value"
|
||||
option-label="label"
|
||||
class="col-4"
|
||||
:dense="dense"
|
||||
:readonly="readonly"
|
||||
:options="workerTypeOptions"
|
||||
:hide-dropdown-icon="readonly"
|
||||
:for="`${prefixId}-select-visa-type`"
|
||||
:label="$t('customerEmployee.form.workerType')"
|
||||
@filter="workerTypeFilter"
|
||||
:model-value="readonly ? workerType || '-' : workerType"
|
||||
@update:model-value="
|
||||
(v) => (typeof v === 'string' ? (workerType = v) : '')
|
||||
"
|
||||
@clear="workerType = ''"
|
||||
>
|
||||
<template v-slot:no-option>
|
||||
<q-item>
|
||||
<q-item-section class="text-grey">
|
||||
{{ $t('general.noData') }}
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</template>
|
||||
</q-select>
|
||||
|
||||
<q-input
|
||||
:for="`${prefixId}-input-visa-no`"
|
||||
:dense="dense"
|
||||
outlined
|
||||
:readonly="readonly"
|
||||
hide-bottom-space
|
||||
class="col-4"
|
||||
:label="$t('customerEmployee.form.visaNo')"
|
||||
:model-value="readonly ? visaNumber || '-' : visaNumber"
|
||||
@update:model-value="
|
||||
(v) => (typeof v === 'string' ? (visaNumber = v) : '')
|
||||
"
|
||||
/>
|
||||
|
||||
<q-input
|
||||
:for="`${prefixId}-input-visa-place`"
|
||||
:dense="dense"
|
||||
outlined
|
||||
:readonly="readonly"
|
||||
hide-bottom-space
|
||||
class="col-4"
|
||||
:label="$t('customerEmployee.form.visaPlace')"
|
||||
:model-value="readonly ? visaIssuingPlace || '-' : visaIssuingPlace"
|
||||
@update:model-value="
|
||||
(v) => (typeof v === 'string' ? (visaIssuingPlace = v) : '')
|
||||
"
|
||||
/>
|
||||
|
||||
<div class="row q-col-gutter-sm">
|
||||
<q-select
|
||||
outlined
|
||||
clearable
|
||||
use-input
|
||||
fill-input
|
||||
emit-value
|
||||
map-options
|
||||
hide-selected
|
||||
hide-bottom-space
|
||||
input-debounce="0"
|
||||
option-value="value"
|
||||
option-label="label"
|
||||
class="col-4"
|
||||
:dense="dense"
|
||||
:readonly="readonly"
|
||||
:options="visaTypeOptions"
|
||||
:hide-dropdown-icon="readonly"
|
||||
:for="`${prefixId}-select-visa-type`"
|
||||
:label="$t('customerEmployee.form.visaType')"
|
||||
@filter="visaTypeFilter"
|
||||
:model-value="readonly ? visaType || '-' : visaType"
|
||||
@update:model-value="
|
||||
(v) => (typeof v === 'string' ? (visaType = v) : '')
|
||||
"
|
||||
@clear="visaType = ''"
|
||||
>
|
||||
<template v-slot:no-option>
|
||||
<q-item>
|
||||
<q-item-section class="text-grey">
|
||||
{{ $t('general.noData') }}
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</template>
|
||||
</q-select>
|
||||
|
||||
<div class="col">
|
||||
<DatePicker
|
||||
:id="`${prefixId}-date-picker-visa-issuance`"
|
||||
:readonly="readonly"
|
||||
:label="$t('customerEmployee.form.visaIssuance')"
|
||||
v-model="visaIssueDate"
|
||||
clearable
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="col">
|
||||
<DatePicker
|
||||
:id="`${prefixId}-date-picker-visa-expire`"
|
||||
:readonly="readonly"
|
||||
:label="$t('customerEmployee.form.visaExpire')"
|
||||
v-model="visaExpiryDate"
|
||||
clearable
|
||||
/>
|
||||
</div>
|
||||
<DatePicker
|
||||
class="col-3"
|
||||
:id="`${prefixId}-date-picker-visa-issuance`"
|
||||
:readonly="readonly"
|
||||
:label="$t('customerEmployee.form.visa90Day')"
|
||||
v-model="dayNext"
|
||||
clearable
|
||||
/>
|
||||
</div>
|
||||
|
||||
<q-input
|
||||
:for="`${prefixId}-input-visa-no`"
|
||||
:dense="dense"
|
||||
outlined
|
||||
:readonly="readonly"
|
||||
hide-bottom-space
|
||||
class="col-4"
|
||||
:label="$t('customerEmployee.form.arrivalCardNo')"
|
||||
:model-value="readonly ? tmNo || '-' : tmNo"
|
||||
@update:model-value="
|
||||
(v) => (typeof v === 'string' ? (tmNo = v) : '')
|
||||
"
|
||||
/>
|
||||
|
||||
<DatePicker
|
||||
class="col-4"
|
||||
:id="`${prefixId}-date-picker-visa-enter`"
|
||||
:readonly="readonly"
|
||||
:label="$t('customerEmployee.form.visaEnter')"
|
||||
v-model="entryDate"
|
||||
clearable
|
||||
/>
|
||||
|
||||
<q-input
|
||||
:for="`${prefixId}-input-visa-no`"
|
||||
:dense="dense"
|
||||
outlined
|
||||
:readonly="readonly"
|
||||
hide-bottom-space
|
||||
class="col-4"
|
||||
:label="$t('customerEmployee.form.visaCheckpoint')"
|
||||
:model-value="
|
||||
readonly ? enteredCheckpoint || '-' : enteredCheckpoint
|
||||
"
|
||||
@update:model-value="
|
||||
(v) => (typeof v === 'string' ? (enteredCheckpoint = v) : '')
|
||||
"
|
||||
/>
|
||||
|
||||
<q-select
|
||||
outlined
|
||||
clearable
|
||||
use-input
|
||||
fill-input
|
||||
emit-value
|
||||
map-options
|
||||
hide-selected
|
||||
hide-bottom-space
|
||||
input-debounce="0"
|
||||
option-value="value"
|
||||
option-label="label"
|
||||
class="col-4"
|
||||
:dense="dense"
|
||||
:readonly="readonly"
|
||||
:options="visaTypeOptions"
|
||||
:hide-dropdown-icon="readonly"
|
||||
:for="`${prefixId}-select-issue-country`"
|
||||
:label="$t('customerEmployee.form.issueCountry')"
|
||||
@filter="visaTypeFilter"
|
||||
:model-value="readonly ? issueCountry || '-' : issueCountry"
|
||||
@update:model-value="
|
||||
(v) => (typeof v === 'string' ? (issueCountry = v) : '')
|
||||
"
|
||||
@clear="visaType = ''"
|
||||
>
|
||||
<template v-slot:no-option>
|
||||
<q-item>
|
||||
<q-item-section class="text-grey">
|
||||
{{ $t('general.noData') }}
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</template>
|
||||
</q-select>
|
||||
|
||||
<q-input
|
||||
:for="`${prefixId}-input-entry-count`"
|
||||
:dense="dense"
|
||||
outlined
|
||||
:readonly="readonly"
|
||||
hide-bottom-space
|
||||
class="col-4"
|
||||
:label="$t('customerEmployee.form.entryCount')"
|
||||
v-model="entryCount"
|
||||
type="number"
|
||||
min="0"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
|
|
|
|||
|
|
@ -491,6 +491,7 @@ export default {
|
|||
table: {
|
||||
orderNumber: 'No.',
|
||||
fullname: 'Full Name',
|
||||
fullnameEN: 'Full Name',
|
||||
titleName: 'Name',
|
||||
businessTypePure: 'Business Type',
|
||||
jobPosition: 'Job Position',
|
||||
|
|
@ -516,6 +517,8 @@ export default {
|
|||
other: 'Other',
|
||||
family: 'Family',
|
||||
},
|
||||
workerStatus: 'Worker Status',
|
||||
previousPassportNumber: 'Previous Passport Number',
|
||||
employerBranch: 'Employer Branch',
|
||||
employeeCode: 'Employee Code',
|
||||
nrcNo: 'Non-Thai Identification Number (N.R.C No.)',
|
||||
|
|
@ -541,7 +544,14 @@ export default {
|
|||
visaTM6: 'TM.6 Number (Arrival)',
|
||||
visaEnter: 'Date of Entry into the Country',
|
||||
visaExpireDate: 'Visa Expiry Date',
|
||||
|
||||
visa90Day: '90-day report next time',
|
||||
arrivalCardNo: 'Arrival Card, Number TM',
|
||||
visaCheckpoint: 'Entered through the checkpoint',
|
||||
workerType: 'Type of worker',
|
||||
placeOfBirth: 'Place of Birth',
|
||||
countryOfbirth: 'Country of Birth',
|
||||
issueCountry: 'Issue Country',
|
||||
entryCount: 'Entry Count',
|
||||
employerSelect: {
|
||||
branchName: 'Branch Name',
|
||||
customerName: 'Employer Name',
|
||||
|
|
|
|||
|
|
@ -487,6 +487,7 @@ export default {
|
|||
table: {
|
||||
orderNumber: 'ลําดับ',
|
||||
fullname: 'ชื่อ-นามสกุล',
|
||||
fullnameEN: 'ชื่อ-นามสกุล ภาษาอังกฤษ',
|
||||
titleName: 'ชื่อ บริษัท/นิติบุคคล',
|
||||
businessTypePure: 'ประเภทกิจการ',
|
||||
jobPosition: 'ตำแหน่งงาน',
|
||||
|
|
@ -512,6 +513,8 @@ export default {
|
|||
other: 'ข้อมูลอื่นๆ',
|
||||
family: 'ข้อมูลครอบครัว',
|
||||
},
|
||||
workerStatus: 'สถานะคนงาน',
|
||||
previousPassportNumber: 'หมายเลขอันเก่าหนังสือเดินทาง',
|
||||
employerBranch: 'สาขานายจ้าง',
|
||||
employeeCode: 'รหัสลูกจ้าง',
|
||||
nrcNo: 'เลขบัตรประจำตัวคนซึ่งไม่มีสัญชาติไทย (N.R.C No.)',
|
||||
|
|
@ -537,7 +540,14 @@ export default {
|
|||
visaTM6: 'เลขที่ใบ ตม.6 (ใบขาเข้า)',
|
||||
visaEnter: 'วันที่เดินทางเข้ามาในประเทศ',
|
||||
visaExpireDate: 'วันหมดอายุ visa',
|
||||
|
||||
visa90Day: 'รายงานตัว 90 วัน ครั้งต่อไป',
|
||||
arrivalCardNo: 'บัตรขาเข้า หมายเลข TM',
|
||||
visaCheckpoint: 'เดินทางเข้ามาทางด่าน',
|
||||
workerType: 'ประเภทคนงาน',
|
||||
placeOfBirth: 'สถานที่เกิด',
|
||||
countryOfbirth: 'ประเทศที่เกิด',
|
||||
issueCountry: 'ประเทศที่ออก',
|
||||
entryCount: 'จำนวนที่เข้าประเทศ',
|
||||
employerSelect: {
|
||||
branchName: 'ชื่อสาขา',
|
||||
customerName: 'ชื่อนายจ้าง',
|
||||
|
|
|
|||
|
|
@ -46,7 +46,6 @@ import FormPerson from 'components/02_personnel-management/FormPerson.vue';
|
|||
import { EmployerFormBasicInfo, EmployerFormBranch } from './components';
|
||||
import BranchPage from './BranchPage.vue';
|
||||
import FormEmployeePassport from 'components/03_customer-management/FormEmployeePassport.vue';
|
||||
import FormEmployeeVisa from 'components/03_customer-management/FormEmployeeVisa.vue';
|
||||
import DialogForm from 'components/DialogForm.vue';
|
||||
import SideMenu from 'components/SideMenu.vue';
|
||||
import TableEmpoloyee from 'src/components/03_customer-management/TableEmpoloyee.vue';
|
||||
|
|
@ -77,6 +76,7 @@ import useOptionStore from 'stores/options';
|
|||
import { DialogContainer, DialogHeader } from 'components/dialog';
|
||||
import KebabAction from 'src/components/shared/KebabAction.vue';
|
||||
import { nextTick } from 'vue';
|
||||
import FormEmployeeVisa from 'components/03_customer-management/FormEmployeeVisa.vue';
|
||||
|
||||
const { t, locale } = useI18n();
|
||||
const $q = useQuasar();
|
||||
|
|
@ -464,7 +464,7 @@ async function toggleStatusCustomer(id: string, status: boolean) {
|
|||
|
||||
async function deleteEmployeeById(opts: {
|
||||
id?: string;
|
||||
type?: 'passport' | 'healthCheck' | 'work';
|
||||
type?: 'passport' | 'visa' | 'healthCheck' | 'work';
|
||||
}) {
|
||||
dialog({
|
||||
color: 'negative',
|
||||
|
|
@ -478,6 +478,10 @@ async function deleteEmployeeById(opts: {
|
|||
await employeeFormStore.deletePassport();
|
||||
}
|
||||
|
||||
if (opts.type === 'visa') {
|
||||
await employeeFormStore.deleteVisa();
|
||||
}
|
||||
|
||||
if (opts.type === 'healthCheck') {
|
||||
await employeeFormStore.deleteHealthCheck();
|
||||
}
|
||||
|
|
@ -2300,6 +2304,10 @@ const emptyCreateDialog = ref(false);
|
|||
await employeeFormStore.submitPassport();
|
||||
}
|
||||
|
||||
if (employeeFormState.currentTab === 'visa') {
|
||||
await employeeFormStore.submitVisa();
|
||||
}
|
||||
|
||||
if (employeeFormState.currentTab === 'healthCheck') {
|
||||
await employeeFormStore.submitHealthCheck();
|
||||
}
|
||||
|
|
@ -2370,6 +2378,11 @@ const emptyCreateDialog = ref(false);
|
|||
name: 'passport',
|
||||
label: 'customerEmployee.fileType.passport',
|
||||
},
|
||||
{
|
||||
name: 'visa',
|
||||
label: 'customerEmployee.form.group.visa',
|
||||
},
|
||||
|
||||
{
|
||||
name: 'healthCheck',
|
||||
label: 'customerEmployee.form.group.healthCheck',
|
||||
|
|
@ -2479,6 +2492,20 @@ const emptyCreateDialog = ref(false);
|
|||
sub: true,
|
||||
})) || []),
|
||||
|
||||
{
|
||||
name: $t('customerEmployee.form.group.visa'),
|
||||
anchor: 'drawer-visa',
|
||||
tab: 'visa',
|
||||
useBtn: true,
|
||||
},
|
||||
|
||||
...(currentFromDataEmployee.employeeVisa?.map((v, i) => ({
|
||||
name: dateFormat(v.expireDate),
|
||||
anchor: `drawer-employee-visa-${i}`,
|
||||
tab: 'visa',
|
||||
sub: true,
|
||||
})) || []),
|
||||
|
||||
...(currentFromDataEmployee.employeeCheckup?.map((v, i) => ({
|
||||
name: $t('general.times', { number: i + 1 }),
|
||||
anchor: `form-employee-checkup-${i}`,
|
||||
|
|
@ -2953,6 +2980,8 @@ const emptyCreateDialog = ref(false);
|
|||
v-model:visa-issue-date="meta.issueDate"
|
||||
v-model:visa-expiry-date="meta.expireDate"
|
||||
v-model:visa-issuing-place="meta.issuePlace"
|
||||
v-model:entry-count="meta.entryCount"
|
||||
v-model:issue-country="meta.issueCountry"
|
||||
/>
|
||||
|
||||
<NoticeJobEmployment v-if="mode === 'noticeJobEmployment'" />
|
||||
|
|
@ -3091,6 +3120,114 @@ const emptyCreateDialog = ref(false);
|
|||
</div>
|
||||
</template>
|
||||
|
||||
<template v-if="employeeFormState.currentTab === 'visa'">
|
||||
<FormEmployeeVisa
|
||||
v-for="(value, index) in currentFromDataEmployee.employeeVisa"
|
||||
prefix-id="drawer-info-employee"
|
||||
id="form-visa"
|
||||
dense
|
||||
outlined
|
||||
title="customerEmployee.form.group.visa"
|
||||
:readonly="employeeFormState.currentIndexVisa !== index"
|
||||
v-model:visa-type="value.type"
|
||||
v-model:visa-number="value.number"
|
||||
v-model:visa-issue-date="value.issueDate"
|
||||
v-model:visa-expiry-date="value.expireDate"
|
||||
v-model:visa-issuing-place="value.issuePlace"
|
||||
v-model:entry-count="value.entryCount"
|
||||
v-model:issue-country="value.issueCountry"
|
||||
>
|
||||
<template v-slot:expiryDate>
|
||||
{{ $t('general.expirationDate') }} :
|
||||
{{ dateFormat(value.expireDate) }}
|
||||
<ExpirationDate
|
||||
v-if="value.id !== undefined"
|
||||
:expiration-date="value.expireDate"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<template v-slot:button>
|
||||
<div class="surface-1 row rounded" style="min-height: 35px">
|
||||
<UndoButton
|
||||
v-if="
|
||||
employeeFormState.isEmployeeEdit &&
|
||||
!(employeeFormState.currentIndexVisa === -1) &&
|
||||
employeeFormState.currentIndexVisa === index
|
||||
"
|
||||
id="btn-info-basic-undo"
|
||||
icon-only
|
||||
@click="
|
||||
() => {
|
||||
employeeFormStore.resetFormDataEmployee();
|
||||
employeeFormState.isEmployeeEdit = false;
|
||||
employeeFormState.dialogType = 'info';
|
||||
employeeFormState.currentIndexVisa = -1;
|
||||
}
|
||||
"
|
||||
type="button"
|
||||
/>
|
||||
<SaveButton
|
||||
v-if="
|
||||
(employeeFormState.isEmployeeEdit ||
|
||||
value.id === undefined) &&
|
||||
!(employeeFormState.currentIndexVisa === -1) &&
|
||||
employeeFormState.currentIndexVisa === index
|
||||
"
|
||||
id="btn-info-basic-save"
|
||||
icon-only
|
||||
@click="
|
||||
() => {
|
||||
employeeFormState.currentIndexVisa = index;
|
||||
}
|
||||
"
|
||||
type="submit"
|
||||
/>
|
||||
|
||||
<EditButton
|
||||
v-if="
|
||||
employeeFormState.currentIndexVisa === -1 ||
|
||||
(!employeeFormState.isEmployeeEdit &&
|
||||
value.id !== undefined &&
|
||||
employeeFormState.currentIndexVisa === index)
|
||||
"
|
||||
id="btn-info-basic-edit"
|
||||
icon-only
|
||||
@click="
|
||||
() => {
|
||||
employeeFormState.currentIndexVisa = index;
|
||||
employeeFormState.isEmployeeEdit = true;
|
||||
employeeFormState.dialogType = 'edit';
|
||||
}
|
||||
"
|
||||
type="button"
|
||||
/>
|
||||
<DeleteButton
|
||||
v-if="
|
||||
employeeFormState.currentIndexVisa === -1 ||
|
||||
(!employeeFormState.isEmployeeEdit &&
|
||||
value.id !== undefined &&
|
||||
!(employeeFormState.currentIndexVisa === -1) &&
|
||||
employeeFormState.currentIndexVisa === index)
|
||||
"
|
||||
id="btn-info-basic-delete"
|
||||
icon-only
|
||||
@click.stop="
|
||||
() => {
|
||||
employeeFormState.currentIndexVisa = index;
|
||||
deleteEmployeeById({ type: 'visa' });
|
||||
}
|
||||
"
|
||||
type="button"
|
||||
:disabled="
|
||||
!(employeeFormState.currentIndex === -1) &&
|
||||
!(employeeFormState.currentIndex === index)
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
</FormEmployeeVisa>
|
||||
</template>
|
||||
|
||||
<template v-if="employeeFormState.currentTab === 'healthCheck'">
|
||||
<FormEmployeeHealthCheck
|
||||
v-if="employeeFormState.currentTab === 'healthCheck'"
|
||||
|
|
@ -3848,6 +3985,10 @@ const emptyCreateDialog = ref(false);
|
|||
await employeeFormStore.submitPassport();
|
||||
}
|
||||
|
||||
if (employeeFormState.currentTab === 'visa') {
|
||||
await employeeFormStore.submitVisa();
|
||||
}
|
||||
|
||||
if (employeeFormState.currentTab === 'healthCheck') {
|
||||
await employeeFormStore.submitHealthCheck();
|
||||
}
|
||||
|
|
@ -3934,6 +4075,10 @@ const emptyCreateDialog = ref(false);
|
|||
name: 'passport',
|
||||
label: 'customerEmployee.fileType.passport',
|
||||
},
|
||||
{
|
||||
name: 'visa',
|
||||
label: 'customerEmployee.form.group.visa',
|
||||
},
|
||||
{
|
||||
name: 'healthCheck',
|
||||
label: 'customerEmployee.form.group.healthCheck',
|
||||
|
|
@ -3983,6 +4128,7 @@ const emptyCreateDialog = ref(false);
|
|||
anchor: 'drawer-upload-file',
|
||||
tab: 'personalInfo',
|
||||
},
|
||||
|
||||
{
|
||||
name: $t('customerEmployee.form.group.passport'),
|
||||
anchor: 'drawer-passport',
|
||||
|
|
@ -4009,14 +4155,28 @@ const emptyCreateDialog = ref(false);
|
|||
}),
|
||||
) || []),
|
||||
|
||||
{
|
||||
name: $t('customerEmployee.form.group.visa'),
|
||||
anchor: 'drawer-visa',
|
||||
tab: 'visa',
|
||||
useBtn: true,
|
||||
},
|
||||
|
||||
...(currentFromDataEmployee.employeeVisa?.map((v, i) => ({
|
||||
name: dateFormat(v.expireDate),
|
||||
anchor: `drawer-employee-visa-${i}`,
|
||||
tab: 'visa',
|
||||
sub: true,
|
||||
})) || []),
|
||||
|
||||
...(currentFromDataEmployee.employeeCheckup?.map(
|
||||
(v, i) => ({
|
||||
(_v, i) => ({
|
||||
name: $t('general.times', { number: i + 1 }),
|
||||
anchor: `drawer-employee-checkup-${i}`,
|
||||
tab: 'healthCheck',
|
||||
}),
|
||||
) || []),
|
||||
...(currentFromDataEmployee.employeeWork?.map((v, i) => ({
|
||||
...(currentFromDataEmployee.employeeWork?.map((_v, i) => ({
|
||||
name: $t('general.times', { number: i + 1 }),
|
||||
anchor: `drawer-employee-work-history-${i}`,
|
||||
tab: 'workHistory',
|
||||
|
|
@ -4047,6 +4207,18 @@ const emptyCreateDialog = ref(false);
|
|||
@click.stop="employeeFormStore.addPassport()"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<template v-slot:btn-drawer-visa>
|
||||
<q-btn
|
||||
dense
|
||||
flat
|
||||
icon="mdi-plus"
|
||||
size="sm"
|
||||
rounded
|
||||
style="color: var(--stone-9)"
|
||||
@click.stop="employeeFormStore.addVisa()"
|
||||
/>
|
||||
</template>
|
||||
</SideMenu>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -4483,6 +4655,8 @@ const emptyCreateDialog = ref(false);
|
|||
v-model:visa-issue-date="meta.issueDate"
|
||||
v-model:visa-expiry-date="meta.expireDate"
|
||||
v-model:visa-issuing-place="meta.issuePlace"
|
||||
v-model:entry-count="meta.entryCount"
|
||||
v-model:issue-country="meta.issueCountry"
|
||||
/>
|
||||
|
||||
<NoticeJobEmployment v-if="mode === 'noticeJobEmployment'" />
|
||||
|
|
@ -4619,6 +4793,115 @@ const emptyCreateDialog = ref(false);
|
|||
</FormEmployeePassport>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template v-if="employeeFormState.currentTab === 'visa'">
|
||||
<FormEmployeeVisa
|
||||
v-for="(value, index) in currentFromDataEmployee.employeeVisa"
|
||||
prefix-id="drawer-info-employee"
|
||||
id="form-visa"
|
||||
dense
|
||||
outlined
|
||||
title="customerEmployee.form.group.visa"
|
||||
:readonly="employeeFormState.currentIndexVisa !== index"
|
||||
v-model:visa-type="value.type"
|
||||
v-model:visa-number="value.number"
|
||||
v-model:visa-issue-date="value.issueDate"
|
||||
v-model:visa-expiry-date="value.expireDate"
|
||||
v-model:visa-issuing-place="value.issuePlace"
|
||||
v-model:entry-count="value.entryCount"
|
||||
v-model:issue-country="value.issueCountry"
|
||||
>
|
||||
<template v-slot:expiryDate>
|
||||
{{ $t('general.expirationDate') }} :
|
||||
{{ dateFormat(value.expireDate) }}
|
||||
<ExpirationDate
|
||||
v-if="value.id !== undefined"
|
||||
:expiration-date="value.expireDate"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<template v-slot:button>
|
||||
<div class="surface-1 row rounded" style="min-height: 35px">
|
||||
<UndoButton
|
||||
v-if="
|
||||
employeeFormState.isEmployeeEdit &&
|
||||
!(employeeFormState.currentIndexVisa === -1) &&
|
||||
employeeFormState.currentIndexVisa === index
|
||||
"
|
||||
id="btn-info-basic-undo"
|
||||
icon-only
|
||||
@click="
|
||||
() => {
|
||||
employeeFormStore.resetFormDataEmployee();
|
||||
employeeFormState.isEmployeeEdit = false;
|
||||
employeeFormState.dialogType = 'info';
|
||||
employeeFormState.currentIndexVisa = -1;
|
||||
}
|
||||
"
|
||||
type="button"
|
||||
/>
|
||||
<SaveButton
|
||||
v-if="
|
||||
(employeeFormState.isEmployeeEdit ||
|
||||
value.id === undefined) &&
|
||||
!(employeeFormState.currentIndexVisa === -1) &&
|
||||
employeeFormState.currentIndexVisa === index
|
||||
"
|
||||
id="btn-info-basic-save"
|
||||
icon-only
|
||||
@click="
|
||||
() => {
|
||||
employeeFormState.currentIndexVisa = index;
|
||||
}
|
||||
"
|
||||
type="submit"
|
||||
/>
|
||||
|
||||
<EditButton
|
||||
v-if="
|
||||
employeeFormState.currentIndexVisa === -1 ||
|
||||
(!employeeFormState.isEmployeeEdit &&
|
||||
value.id !== undefined &&
|
||||
employeeFormState.currentIndexVisa === index)
|
||||
"
|
||||
id="btn-info-basic-edit"
|
||||
icon-only
|
||||
@click="
|
||||
() => {
|
||||
employeeFormState.currentIndexVisa = index;
|
||||
employeeFormState.isEmployeeEdit = true;
|
||||
employeeFormState.dialogType = 'edit';
|
||||
}
|
||||
"
|
||||
type="button"
|
||||
/>
|
||||
<DeleteButton
|
||||
v-if="
|
||||
employeeFormState.currentIndexVisa === -1 ||
|
||||
(!employeeFormState.isEmployeeEdit &&
|
||||
value.id !== undefined &&
|
||||
!(employeeFormState.currentIndexVisa === -1) &&
|
||||
employeeFormState.currentIndexVisa === index)
|
||||
"
|
||||
id="btn-info-basic-delete"
|
||||
icon-only
|
||||
@click.stop="
|
||||
() => {
|
||||
employeeFormState.currentIndexVisa = index;
|
||||
deleteEmployeeById({ type: 'visa' });
|
||||
}
|
||||
"
|
||||
type="button"
|
||||
:disabled="
|
||||
!(employeeFormState.currentIndex === -1) &&
|
||||
!(employeeFormState.currentIndex === index)
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
</FormEmployeeVisa>
|
||||
</template>
|
||||
|
||||
<template v-if="employeeFormState.currentTab === 'healthCheck'">
|
||||
<FormEmployeeHealthCheck
|
||||
v-if="employeeFormState.currentTab === 'healthCheck'"
|
||||
|
|
|
|||
|
|
@ -589,6 +589,7 @@ export const useEmployeeForm = defineStore('form-employee', () => {
|
|||
currentEmployee: Employee | null;
|
||||
currentIndex: number;
|
||||
currentIndexPassport: number;
|
||||
currentIndexVisa: number;
|
||||
profileUrl: string;
|
||||
isEmployeeEdit: boolean;
|
||||
profileSubmit: boolean;
|
||||
|
|
@ -619,6 +620,7 @@ export const useEmployeeForm = defineStore('form-employee', () => {
|
|||
isImageEdit: false,
|
||||
currentIndexPassport: -1,
|
||||
currentIndex: -1,
|
||||
currentIndexVisa: -1,
|
||||
statusSavePersonal: false,
|
||||
drawerModal: false,
|
||||
imageDialog: false,
|
||||
|
|
@ -771,6 +773,7 @@ export const useEmployeeForm = defineStore('form-employee', () => {
|
|||
|
||||
function resetFormDataEmployee(clean = false) {
|
||||
state.value.currentIndexPassport = -1;
|
||||
state.value.currentIndexVisa = -1;
|
||||
if (clean) {
|
||||
state.value.currentTab = 'personalInfo';
|
||||
state.value.formDataEmployeeOwner = undefined;
|
||||
|
|
@ -836,6 +839,56 @@ export const useEmployeeForm = defineStore('form-employee', () => {
|
|||
state.value.currentIndexPassport = -1;
|
||||
}
|
||||
|
||||
async function submitVisa() {
|
||||
if (
|
||||
currentFromDataEmployee.value.employeeVisa?.[
|
||||
state.value.currentIndexVisa
|
||||
] === undefined
|
||||
)
|
||||
return;
|
||||
|
||||
if (
|
||||
currentFromDataEmployee.value.employeeVisa?.[state.value.currentIndexVisa]
|
||||
.id === undefined
|
||||
) {
|
||||
const res = await employeeStore.postMeta({
|
||||
parentId: currentFromDataEmployee.value.id || '',
|
||||
group: 'visa',
|
||||
meta: currentFromDataEmployee.value.employeeVisa?.[
|
||||
state.value.currentIndexVisa
|
||||
],
|
||||
});
|
||||
|
||||
if (res) {
|
||||
currentFromDataEmployee.value.employeeVisa[
|
||||
state.value.currentIndexVisa
|
||||
].id = res.id;
|
||||
}
|
||||
}
|
||||
if (
|
||||
currentFromDataEmployee.value.employeeVisa?.[state.value.currentIndexVisa]
|
||||
.id !== undefined
|
||||
) {
|
||||
const { id, ...payload } =
|
||||
currentFromDataEmployee.value.employeeVisa?.[
|
||||
state.value.currentIndexVisa
|
||||
];
|
||||
|
||||
await employeeStore.putMeta({
|
||||
parentId: currentFromDataEmployee.value.id || '',
|
||||
group: 'visa',
|
||||
metaId:
|
||||
currentFromDataEmployee.value.employeeVisa?.[
|
||||
state.value.currentIndexVisa
|
||||
].id || '',
|
||||
meta: payload,
|
||||
});
|
||||
}
|
||||
|
||||
await assignFormDataEmployee(currentFromDataEmployee.value.id);
|
||||
state.value.currentIndexPassport = -1;
|
||||
}
|
||||
|
||||
async function submitOther() {
|
||||
if (!currentFromDataEmployee.value.employeeOtherInfo) return;
|
||||
|
||||
|
|
@ -881,6 +934,25 @@ export const useEmployeeForm = defineStore('form-employee', () => {
|
|||
}
|
||||
}
|
||||
|
||||
async function deleteVisa() {
|
||||
const res = await employeeStore.delMeta({
|
||||
parentId: currentFromDataEmployee.value.id || '',
|
||||
group: 'visa',
|
||||
metaId:
|
||||
currentFromDataEmployee.value.employeeVisa?.[
|
||||
state.value.currentIndexVisa
|
||||
].id || '',
|
||||
});
|
||||
|
||||
if (res) {
|
||||
currentFromDataEmployee.value.employeeVisa?.splice(
|
||||
state.value.currentIndexVisa,
|
||||
1,
|
||||
);
|
||||
await assignFormDataEmployee(currentFromDataEmployee.value.id);
|
||||
}
|
||||
}
|
||||
|
||||
async function deleteWorkHistory() {
|
||||
if (!currentFromDataEmployee.value.employeeWork) return;
|
||||
|
||||
|
|
@ -1085,6 +1157,22 @@ export const useEmployeeForm = defineStore('form-employee', () => {
|
|||
})),
|
||||
),
|
||||
|
||||
employeeVisa: structuredClone(
|
||||
payload.employeeVisa?.length === 0
|
||||
? defaultFormData.employeeVisa
|
||||
: payload.employeeVisa?.map((item) => ({
|
||||
id: item.id,
|
||||
number: item.number,
|
||||
type: item.type,
|
||||
entryCount: item.entryCount,
|
||||
issueCountry: item.issueCountry,
|
||||
issuePlace: item.issuePlace,
|
||||
issueDate: item.issueDate,
|
||||
expireDate: item.expireDate,
|
||||
mrz: item.mrz || undefined,
|
||||
remark: item.remark || undefined,
|
||||
})),
|
||||
),
|
||||
employeeCheckup: structuredClone(
|
||||
payload.employeeCheckup?.length === 0
|
||||
? defaultFormData.employeeCheckup
|
||||
|
|
@ -1128,6 +1216,9 @@ export const useEmployeeForm = defineStore('form-employee', () => {
|
|||
state.value.currentIndexPassport =
|
||||
(currentFromDataEmployee.value.employeePassport?.length || 0) - 1;
|
||||
|
||||
state.value.currentIndexVisa =
|
||||
(currentFromDataEmployee.value.employeeVisa?.length || 0) - 1;
|
||||
|
||||
if (
|
||||
currentFromDataEmployee.value.employeePassport?.[
|
||||
state.value.currentIndexPassport
|
||||
|
|
@ -1135,6 +1226,15 @@ export const useEmployeeForm = defineStore('form-employee', () => {
|
|||
) {
|
||||
state.value.currentIndexPassport = -1;
|
||||
}
|
||||
|
||||
if (
|
||||
currentFromDataEmployee.value.employeeVisa?.[
|
||||
state.value.currentIndexVisa
|
||||
].id !== undefined
|
||||
) {
|
||||
state.value.currentIndexVisa = -1;
|
||||
}
|
||||
|
||||
const foundBranch = await customerStore.fetchListCustomerBranchById(
|
||||
payload.customerBranchId,
|
||||
);
|
||||
|
|
@ -1197,20 +1297,40 @@ export const useEmployeeForm = defineStore('form-employee', () => {
|
|||
(currentFromDataEmployee.value.employeePassport?.length || 0) - 1;
|
||||
}
|
||||
|
||||
function addVisa() {
|
||||
currentFromDataEmployee.value.employeeVisa?.push({
|
||||
number: '',
|
||||
type: '',
|
||||
entryCount: 0,
|
||||
issueCountry: '',
|
||||
issuePlace: '',
|
||||
issueDate: new Date(),
|
||||
expireDate: new Date(),
|
||||
mrz: undefined,
|
||||
remark: undefined,
|
||||
});
|
||||
|
||||
state.value.currentIndexVisa =
|
||||
(currentFromDataEmployee.value.employeeVisa?.length || 0) - 1;
|
||||
}
|
||||
|
||||
return {
|
||||
state,
|
||||
currentFromDataEmployee,
|
||||
resetEmployeeData,
|
||||
|
||||
addPassport,
|
||||
addVisa,
|
||||
|
||||
submitPassport,
|
||||
submitVisa,
|
||||
submitOther,
|
||||
submitWorkHistory,
|
||||
submitPersonal,
|
||||
submitHealthCheck,
|
||||
|
||||
deletePassport,
|
||||
deleteVisa,
|
||||
deleteWorkHistory,
|
||||
deleteHealthCheck,
|
||||
|
||||
|
|
|
|||
|
|
@ -2325,6 +2325,8 @@ async function getInvoiceCodeFullPay() {
|
|||
v-model:visa-issue-date="meta.issueDate"
|
||||
v-model:visa-expiry-date="meta.expireDate"
|
||||
v-model:visa-issuing-place="meta.issuePlace"
|
||||
v-model:entry-count="meta.entryCount"
|
||||
v-model:issue-country="meta.issueCountry"
|
||||
/>
|
||||
|
||||
<NoticeJobEmployment v-if="mode === 'noticeJobEmployment'" />
|
||||
|
|
|
|||
|
|
@ -284,6 +284,7 @@ export type NewEmployeeHistory = {
|
|||
};
|
||||
|
||||
export type EmployeeVisaPayload = {
|
||||
id?: string;
|
||||
number: string;
|
||||
type: string;
|
||||
entryCount: number;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue