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

feat: form ocr (#56)

Browse source 
* 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 2024-11-11 09:39:43 +07:00 • committed by GitHub
parent 5888f3a9dd
commit ce3d809bd9
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
9 changed files with 1664 additions and 336 deletions
Download patch file Download diff file Expand all files Collapse all files

92
public/option/option.json
View file

@ -1,5 +1,51 @@
{ {
"eng": { "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": [ "bankBook": [
{ {
"label": "Bangkok Bank", "label": "Bangkok Bank",
@ -1001,6 +1047,52 @@
}, },
"tha": { "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": [ "bankBook": [
{ {
"label": "ธนาคารกรุงเทพ", "label": "ธนาคารกรุงเทพ",

902
src/components/03_customer-management/FormEmployeePassport.vue
View file

@ -1,12 +1,12 @@
<script setup lang="ts"> <script setup lang="ts">
import { ref, watch, onMounted } from 'vue';
import { QSelect } from 'quasar'; 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 { useI18n } from 'vue-i18n';
import { selectFilterOptionRefMod } from 'stores/utils';
import { calculateAge, disabledAfterToday } from 'src/utils/datetime';
import useOptionStore from 'stores/options'; import useOptionStore from 'stores/options';
import { watch } from 'vue';
import { onMounted } from 'vue';
import DatePicker from '../shared/DatePicker.vue'; import DatePicker from '../shared/DatePicker.vue';
const optionStore = useOptionStore(); const optionStore = useOptionStore();
@ -32,6 +32,29 @@ const previousPassportReference = defineModel<string>(
'previousPassportReference', '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<{ const props = defineProps<{
title?: string; title?: string;
dense?: boolean; dense?: boolean;
@ -64,6 +87,12 @@ let prefixNameFilter: (
update: (callbackFn: () => void, afterFn?: (ref: QSelect) => void) => void, update: (callbackFn: () => void, afterFn?: (ref: QSelect) => void) => void,
) => void; ) => void;
const workerStatusOptions = ref<Record<string, unknown>[]>([]);
let workerStatusFilter: (
value: string,
update: (callbackFn: () => void, afterFn?: (ref: QSelect) => void) => void,
) => void;
function matPreFixName() { function matPreFixName() {
if (!gender.value) return; if (!gender.value) return;
@ -93,6 +122,24 @@ onMounted(() => {
prefixNameOptions, prefixNameOptions,
'label', '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(); matPreFixName();
@ -118,6 +165,24 @@ watch(
passportIssuingCountryOptions, passportIssuingCountryOptions,
'label', '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> </script>
<template> <template>
<div class="row col-12"> <template v-if="!!ocr">
<div <div class="row col-12">
v-if="!ocr && !hideTitle" <div v-if="!hideTitle" class="col-12 q-pb-sm text-weight-bold text-body1">
class="col-12 q-pb-sm text-weight-bold text-body1" <q-icon
> flat
<q-icon size="xs"
flat class="q-pa-sm rounded q-mr-xs"
size="xs" color="info"
class="q-pa-sm rounded q-mr-xs" name="mdi-passport"
color="info" style="background-color: var(--surface-3)"
name="mdi-passport" />
style="background-color: var(--surface-3)" {{ title }}
/>
{{ 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" />
</div> </div>
<div> <div class="row q-col-gutter-sm">
<slot name="button"></slot> <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>
</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 <div
v-if="!ocr" class="col-12 row justify-between items-center q-pb-sm text-weight-bold"
class="col row justify-center q-col-gutter-sml"
style="max-height: 50%"
> >
<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 <q-avatar
style="border: 1px dashed; border-color: black"
square square
size="100px" size="100px"
font-size="50px" font-size="50px"
@ -184,76 +483,53 @@ watch(
icon="mdi-image-outline" icon="mdi-image-outline"
/> />
</div> </div>
</div> <div class="row q-col-gutter-sm col-10">
<div <q-select
class="row q-col-gutter-sm" outlined
:class="{ 'col-10': !ocr, 'col-12': ocr }" clearable
> use-input
<q-select fill-input
outlined emit-value
clearable map-options
use-input hide-selected
fill-input hide-bottom-space
emit-value input-debounce="0"
map-options option-value="value"
hide-selected option-label="label"
hide-bottom-space class="col-6"
input-debounce="0" :dense="dense"
option-value="value" :readonly="readonly"
option-label="label" :options="workerStatusOptions"
v-model="passportType" :hide-dropdown-icon="readonly"
:class="{ 'col-12': ocr, 'col-md-3': !ocr }" :for="`${prefixId}-select-visa-type`"
:dense="dense" :label="$t('customerEmployee.form.workerType')"
:readonly="readonly" @filter="workerStatusFilter"
:hide-dropdown-icon="readonly" :model-value="readonly ? workerStatus || '-' : workerStatus"
:options="passportTypeOptions" @update:model-value="
:for="`${prefixId}-select-passport-type`" (v) => (typeof v === 'string' ? (workerStatus = v) : '')
:label="$t('customerEmployee.form.passportType')" "
:rules="[ @clear="workerStatus = ''"
(val) => >
(val && val.length > 0) || <template v-slot:no-option>
$t('form.error.selectField', { <q-item>
field: $t('customerEmployee.form.passportType'), <q-item-section class="text-grey">
}), {{ $t('general.noData') }}
]" </q-item-section>
@filter="passportTypeFilter" </q-item>
> </template>
<template v-slot:no-option> </q-select>
<q-item>
<q-item-section class="text-grey">
{{ $t('general.noData') }}
</q-item-section>
</q-item>
</template>
</q-select>
<q-input <q-input
:for="`${prefixId}-input-passport-no`" :for="`${prefixId}-input-previous-passport-Number`"
:dense="dense" :dense="dense"
outlined outlined
:readonly="readonly" :readonly="readonly"
hide-bottom-space hide-bottom-space
:class="{ 'col-12': ocr, 'col-6': !ocr, 'col-md-3': !ocr }" class="col-6"
:label="$t('customerEmployee.form.passportNo')" :label="$t('customerEmployee.form.previousPassportNumber')"
v-model="passportNumber" v-model="previousPassportNo"
: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 <q-select
outlined outlined
use-input use-input
@ -266,7 +542,7 @@ watch(
option-label="label" option-label="label"
option-value="value" option-value="value"
hide-dropdown-icon hide-dropdown-icon
:class="{ 'col-2': ocr, 'col-1': !ocr }" class="col-2"
:dense="dense" :dense="dense"
:readonly="readonly" :readonly="readonly"
:options="prefixNameOptions" :options="prefixNameOptions"
@ -295,8 +571,25 @@ watch(
:readonly="readonly" :readonly="readonly"
hide-bottom-space hide-bottom-space
class="col" class="col"
:label="$t('personnel.form.firstName')" :label="$t('form.firstName')"
v-model="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 <q-input
@ -306,111 +599,308 @@ watch(
:readonly="readonly" :readonly="readonly"
hide-bottom-space hide-bottom-space
class="col" class="col"
:label="$t('personnel.form.lastName')" :label="$t('form.lastName')"
v-model="lastName" :model-value="readonly ? lastName || '-' : lastName"
@update:model-value="
(v) => (typeof v === 'string' ? (lastName = v) : '')
"
/> />
</template>
<q-input <q-input
:for="`${prefixId}-input-passport-ref`" :for="`${prefixId}-input-full-name`"
:dense="dense" :dense="dense"
outlined outlined
:readonly="readonly" :readonly="readonly"
hide-bottom-space hide-bottom-space
:class="{ 'col-12': ocr, 'col-6': !ocr }" class="col-12"
:label="$t('customerEmployee.form.passportRef')" :disable="!readonly"
:model-value=" :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 readonly
? previousPassportReference || '-' :label="$t('personnel.age')"
: previousPassportReference class="col-2"
" :model-value="
@update:model-value=" birthDate?.toString() === 'Invalid Date' ||
(v) => birthDate?.toString() === undefined
typeof v === 'string' ? (previousPassportReference = v) : '' ? ''
" : calculateAge(birthDate)
/> "
<q-input />
:for="`${prefixId}-input-passport-place`"
:dense="dense" <q-select
outlined outlined
:readonly="readonly" clearable
hide-bottom-space use-input
:class="{ 'col-12': ocr, 'col-6': !ocr, 'col-md-3': !ocr }" fill-input
:label="$t('customerEmployee.form.passportPlace')" emit-value
v-model="passportIssuingPlace" map-options
:rules="[ hide-selected
(val) => (val && val.length > 0) || $t('form.error.required'), hide-bottom-space
]" input-debounce="0"
/> option-value="value"
<q-select option-label="label"
outlined class="col"
clearable :dense="dense"
use-input :readonly="readonly"
fill-input :options="nationalityOptions"
emit-value :hide-dropdown-icon="readonly"
map-options :for="`${prefixId}-select-visa-type`"
hide-selected :label="$t('general.nationality')"
hide-bottom-space @filter="nationalityFilter"
input-debounce="0" :model-value="readonly ? nationality || '-' : nationality"
option-value="value" @update:model-value="
option-label="label" (v) => (typeof v === 'string' ? (nationality = v) : '')
:class="{ 'col-12': ocr, 'col-6': !ocr, 'col-md-3': !ocr }" "
v-model="passportIssuingCountry" @clear="nationality = ''"
:dense="dense" >
:readonly="readonly" <template v-slot:no-option>
:hide-dropdown-icon="readonly" <q-item>
:options="passportIssuingCountryOptions" <q-item-section class="text-grey">
:for="`${prefixId}-select-passport-country`" {{ $t('general.noData') }}
:label="$t('customerEmployee.form.passportIssuer')" </q-item-section>
:rules="[ </q-item>
(val) => </template>
(val && val.length > 0) || </q-select>
$t('form.error.selectField', {
field: $t('customerEmployee.form.passportIssuer'), <q-input
}), :for="`${prefixId}-input-place-of-birth`"
]" :dense="dense"
@filter="passportIssuingCountryFilter" outlined
> :readonly="readonly"
<template v-slot:no-option> hide-bottom-space
<q-item> class="col-4"
<q-item-section class="text-grey"> :label="$t('customerEmployee.form.placeOfBirth')"
{{ $t('general.noData') }} v-model="placeOfBirth"
</q-item-section> />
</q-item>
</template> <q-select
</q-select> outlined
<DatePicker clearable
:id="`${prefixId}-date-picker-passport-issueance`" use-input
:label="$t('customerEmployee.form.passportIssueDate')" fill-input
v-model="passportIssueDate" emit-value
class="col-6" map-options
:class="{ 'col-md-3': !ocr }" hide-selected
:readonly="readonly" hide-bottom-space
:rules="[ input-debounce="0"
(val) => option-value="value"
(val && val.length > 0) || option-label="label"
$t('form.error.selectField', { class="col-4"
field: $t('customerEmployee.form.passportIssueDate'), :dense="dense"
}), :readonly="readonly"
]" :options="nationalityOptions"
/> :hide-dropdown-icon="readonly"
<DatePicker :for="`${prefixId}-select-visa-type`"
:id="`${prefixId}-date-picker-passport-expire`" :label="$t('customerEmployee.form.countryOfbirth')"
:label="$t('customerEmployee.form.passportExpireDate')" @filter="nationalityFilter"
v-model="passportExpiryDate" :model-value="readonly ? countryOfBirth || '-' : countryOfBirth"
class="col-6" @update:model-value="
:class="{ 'col-md-3': !ocr }" (v) => (typeof v === 'string' ? (countryOfBirth = v) : '')
:readonly="readonly" "
:rules="[ @clear="countryOfBirth = ''"
(val) => >
(val && val.length > 0) || <template v-slot:no-option>
$t('form.error.selectField', { <q-item>
field: $t('customerEmployee.form.passportExpireDate'), <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> </div>
</div> </template>
</template> </template>
<style scoped></style> <style scoped></style>

568
src/components/03_customer-management/FormEmployeeVisa.vue
View file

@ -32,9 +32,17 @@ const visaIssuingPlace = defineModel<string>('visaIssuingPlace');
const visaStayUntilDate = defineModel<Date | null | string>( const visaStayUntilDate = defineModel<Date | null | string>(
'visaStayUntilDate', 'visaStayUntilDate',
); );
const entryCount = defineModel<number>('entryCount');
const issueCountry = defineModel<string>('issueCountry');
const tm6Number = defineModel<string>('tm6Number'); const tm6Number = defineModel<string>('tm6Number');
const entryDate = defineModel<Date | null | string>('entryDate'); 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<{ defineProps<{
title?: string; title?: string;
dense?: boolean; dense?: boolean;
@ -47,6 +55,14 @@ defineProps<{
ocr?: boolean; 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() { async function fetchProvince() {
const result = await addressStore.fetchProvince(); const result = await addressStore.fetchProvince();
@ -63,12 +79,24 @@ let visaTypeFilter: (
update: (callbackFn: () => void, afterFn?: (ref: QSelect) => void) => void, update: (callbackFn: () => void, afterFn?: (ref: QSelect) => void) => void,
) => void; ) => void;
const workerTypeOptions = ref<Record<string, unknown>[]>([]);
let workerTypeFilter: (
value: string,
update: (callbackFn: () => void, afterFn?: (ref: QSelect) => void) => void,
) => void;
onMounted(() => { onMounted(() => {
visaTypeFilter = selectFilterOptionRefMod( visaTypeFilter = selectFilterOptionRefMod(
ref(optionStore.globalOption?.nationality), ref(optionStore.globalOption?.nationality),
visaTypeOptions, visaTypeOptions,
'label', 'label',
); );
workerTypeFilter = selectFilterOptionRefMod(
ref(optionStore.globalOption?.workerType),
workerTypeOptions,
'label',
);
}); });
watch( watch(
@ -79,150 +107,442 @@ watch(
visaTypeOptions, visaTypeOptions,
'label', 'label',
); );
workerTypeFilter = selectFilterOptionRefMod(
ref(optionStore.globalOption?.workerType),
workerTypeOptions,
'label',
);
}, },
); );
</script> </script>
<template> <template>
<div class="row"> <template v-if="!!ocr">
<div v-if="!ocr" class="col-12 q-pb-sm text-weight-bold text-body1"> <div class="row">
<q-icon <div class="col-12 row q-col-gutter-sm">
flat <q-select
size="xs" outlined
class="q-pa-sm rounded q-mr-xs" clearable
color="info" use-input
name="mdi-notebook-outline" fill-input
style="background-color: var(--surface-3)" emit-value
/> map-options
{{ $t(`${title}`) }} hide-selected
</div> hide-bottom-space
<div class="col-12 row q-col-gutter-sm"> input-debounce="0"
<q-select option-value="value"
outlined option-label="label"
clearable class="col-6"
use-input :dense="dense"
fill-input :readonly="readonly"
emit-value :options="visaTypeOptions"
map-options :hide-dropdown-icon="readonly"
hide-selected :for="`${prefixId}-select-visa-type`"
hide-bottom-space :label="$t('customerEmployee.form.visaType')"
input-debounce="0" @filter="visaTypeFilter"
option-value="value" :model-value="readonly ? visaType || '-' : visaType"
option-label="label" @update:model-value="
:class="{ 'col-4': !ocr, 'col-6': ocr }" (v) => (typeof v === 'string' ? (visaType = v) : '')
:dense="dense" "
:readonly="readonly" @clear="visaType = ''"
:options="visaTypeOptions" >
:hide-dropdown-icon="readonly" <template v-slot:no-option>
:for="`${prefixId}-select-visa-type`" <q-item>
:label="$t('customerEmployee.form.visaType')" <q-item-section class="text-grey">
@filter="visaTypeFilter" {{ $t('general.noData') }}
:model-value="readonly ? visaType || '-' : visaType" </q-item-section>
@update:model-value=" </q-item>
(v) => (typeof v === 'string' ? (visaType = v) : '') </template>
" </q-select>
@clear="visaType = ''" <!-- :rules="[
>
<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: string) =>
!!val || $t('selectValidate') + $t('formDialogInputVisaType'), !!val || $t('selectValidate') + $t('formDialogInputVisaType'),
]" --> ]" -->
<q-input <q-input
:for="`${prefixId}-input-visa-no`" :for="`${prefixId}-input-visa-no`"
:dense="dense" :dense="dense"
outlined outlined
:readonly="readonly" :readonly="readonly"
hide-bottom-space hide-bottom-space
:class="{ 'col-4': !ocr, 'col-6': ocr }" class="col-6"
:label="$t('customerEmployee.form.visaNo')" :label="$t('customerEmployee.form.visaNo')"
:model-value="readonly ? visaNumber || '-' : visaNumber" :model-value="readonly ? visaNumber || '-' : visaNumber"
@update:model-value=" @update:model-value="
(v) => (typeof v === 'string' ? (visaNumber = v) : '') (v) => (typeof v === 'string' ? (visaNumber = v) : '')
" "
/> />
<!-- :rules="[ <!-- :rules="[
(val: string) => (val: string) =>
!!val || $t('inputValidate') + $t('formDialogInputVisaNo'), !!val || $t('inputValidate') + $t('formDialogInputVisaNo'),
]" --> ]" -->
<DatePicker <DatePicker
:class="{ 'col-2': !ocr, 'col-6': ocr }" class="col-6"
:id="`${prefixId}-date-picker-visa-issuance`" :id="`${prefixId}-date-picker-visa-issuance`"
:readonly="readonly" :readonly="readonly"
:label="$t('customerEmployee.form.visaIssuance')" :label="$t('customerEmployee.form.visaIssuance')"
v-model="visaIssueDate" v-model="visaIssueDate"
clearable clearable
/> />
<DatePicker <DatePicker
:class="{ 'col-2': !ocr, 'col-6': ocr }" class="col-6"
:id="`${prefixId}-date-picker-visa-expire`" :id="`${prefixId}-date-picker-visa-expire`"
:readonly="readonly" :readonly="readonly"
:label="$t('customerEmployee.form.visaExpire')" :label="$t('customerEmployee.form.visaExpire')"
v-model="visaExpiryDate" v-model="visaExpiryDate"
clearable clearable
/> />
<q-input <q-input
:for="`${prefixId}-input-visa-place`" :for="`${prefixId}-input-visa-place`"
:dense="dense" :dense="dense"
outlined outlined
:readonly="readonly" :readonly="readonly"
hide-bottom-space hide-bottom-space
:class="{ 'col-5': !ocr, 'col-6': ocr }" class="col-6"
:label="$t('customerEmployee.form.visaPlace')" :label="$t('customerEmployee.form.visaPlace')"
:model-value="readonly ? visaIssuingPlace || '-' : visaIssuingPlace" :model-value="readonly ? visaIssuingPlace || '-' : visaIssuingPlace"
@update:model-value=" @update:model-value="
(v) => (typeof v === 'string' ? (visaIssuingPlace = v) : '') (v) => (typeof v === 'string' ? (visaIssuingPlace = v) : '')
" "
/> />
<!-- :rules="[ <!-- :rules="[
(val: string) => (val: string) =>
!!val || $t('selectValidate') + $t('formDialogInputVisaPlace'), !!val || $t('selectValidate') + $t('formDialogInputVisaPlace'),
]" --> ]" -->
<DatePicker <DatePicker
:class="{ 'col-4': !ocr, 'col-6': ocr }" class="col-6"
:id="`${prefixId}-date-picker-visa-until`" :id="`${prefixId}-date-picker-visa-until`"
:readonly="readonly" :readonly="readonly"
:label="$t('customerEmployee.form.visaStayUntil')" :label="$t('customerEmployee.form.visaStayUntil')"
v-model="visaStayUntilDate" v-model="visaStayUntilDate"
clearable clearable
/> />
<q-input <q-input
:for="`${prefixId}-input-tm6`" :for="`${prefixId}-input-tm6`"
:dense="dense" :dense="dense"
outlined outlined
:readonly="readonly" :readonly="readonly"
hide-bottom-space hide-bottom-space
:class="{ 'col-5': !ocr, 'col-6': ocr }" class="col-6"
:label="$t('customerEmployee.form.visaTM6')" :label="$t('customerEmployee.form.visaTM6')"
:model-value="readonly ? tm6Number || '-' : tm6Number" :model-value="readonly ? tm6Number || '-' : tm6Number"
@update:model-value=" @update:model-value="
(v) => (typeof v === 'string' ? (tm6Number = v) : '') (v) => (typeof v === 'string' ? (tm6Number = v) : '')
" "
@clear="tm6Number = ''" @clear="tm6Number = ''"
/> />
<!-- :rules="[ <!-- :rules="[
(val: string) => (val: string) =>
!!val || $t('inputValidate') + $t('formDialogInputVisaTM6'), !!val || $t('inputValidate') + $t('formDialogInputVisaTM6'),
]" --> ]" -->
<DatePicker <DatePicker
:class="{ 'col-4': !ocr, 'col-6': ocr }" class="col-6"
:id="`${prefixId}-date-picker-visa-enter`" :id="`${prefixId}-date-picker-visa-enter`"
:readonly="readonly" :readonly="readonly"
:label="$t('customerEmployee.form.visaEnter')" :label="$t('customerEmployee.form.visaEnter')"
v-model="entryDate" v-model="entryDate"
clearable 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>
</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> </template>
<style scoped></style> <style scoped></style>

12
src/i18n/eng.ts
View file

@ -491,6 +491,7 @@ export default {
table: { table: {
orderNumber: 'No.', orderNumber: 'No.',
fullname: 'Full Name', fullname: 'Full Name',
fullnameEN: 'Full Name',
titleName: 'Name', titleName: 'Name',
businessTypePure: 'Business Type', businessTypePure: 'Business Type',
jobPosition: 'Job Position', jobPosition: 'Job Position',
@ -516,6 +517,8 @@ export default {
other: 'Other', other: 'Other',
family: 'Family', family: 'Family',
}, },
workerStatus: 'Worker Status',
previousPassportNumber: 'Previous Passport Number',
employerBranch: 'Employer Branch', employerBranch: 'Employer Branch',
employeeCode: 'Employee Code', employeeCode: 'Employee Code',
nrcNo: 'Non-Thai Identification Number (N.R.C No.)', nrcNo: 'Non-Thai Identification Number (N.R.C No.)',
@ -541,7 +544,14 @@ export default {
visaTM6: 'TM.6 Number (Arrival)', visaTM6: 'TM.6 Number (Arrival)',
visaEnter: 'Date of Entry into the Country', visaEnter: 'Date of Entry into the Country',
visaExpireDate: 'Visa Expiry Date', 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: { employerSelect: {
branchName: 'Branch Name', branchName: 'Branch Name',
customerName: 'Employer Name', customerName: 'Employer Name',

12
src/i18n/tha.ts
View file

@ -487,6 +487,7 @@ export default {
table: { table: {
orderNumber: 'ลําดับ', orderNumber: 'ลําดับ',
fullname: 'ชื่อ-นามสกุล', fullname: 'ชื่อ-นามสกุล',
fullnameEN: 'ชื่อ-นามสกุล ภาษาอังกฤษ',
titleName: 'ชื่อ บริษัท/นิติบุคคล', titleName: 'ชื่อ บริษัท/นิติบุคคล',
businessTypePure: 'ประเภทกิจการ', businessTypePure: 'ประเภทกิจการ',
jobPosition: 'ตำแหน่งงาน', jobPosition: 'ตำแหน่งงาน',
@ -512,6 +513,8 @@ export default {
other: 'ข้อมูลอื่นๆ', other: 'ข้อมูลอื่นๆ',
family: 'ข้อมูลครอบครัว', family: 'ข้อมูลครอบครัว',
}, },
workerStatus: 'สถานะคนงาน',
previousPassportNumber: 'หมายเลขอันเก่าหนังสือเดินทาง',
employerBranch: 'สาขานายจ้าง', employerBranch: 'สาขานายจ้าง',
employeeCode: 'รหัสลูกจ้าง', employeeCode: 'รหัสลูกจ้าง',
nrcNo: 'เลขบัตรประจำตัวคนซึ่งไม่มีสัญชาติไทย (N.R.C No.)', nrcNo: 'เลขบัตรประจำตัวคนซึ่งไม่มีสัญชาติไทย (N.R.C No.)',
@ -537,7 +540,14 @@ export default {
visaTM6: 'เลขที่ใบ ตม.6 (ใบขาเข้า)', visaTM6: 'เลขที่ใบ ตม.6 (ใบขาเข้า)',
visaEnter: 'วันที่เดินทางเข้ามาในประเทศ', visaEnter: 'วันที่เดินทางเข้ามาในประเทศ',
visaExpireDate: 'วันหมดอายุ visa', visaExpireDate: 'วันหมดอายุ visa',
visa90Day: 'รายงานตัว 90 วัน ครั้งต่อไป',
arrivalCardNo: 'บัตรขาเข้า หมายเลข TM',
visaCheckpoint: 'เดินทางเข้ามาทางด่าน',
workerType: 'ประเภทคนงาน',
placeOfBirth: 'สถานที่เกิด',
countryOfbirth: 'ประเทศที่เกิด',
issueCountry: 'ประเทศที่ออก',
entryCount: 'จำนวนที่เข้าประเทศ',
employerSelect: { employerSelect: {
branchName: 'ชื่อสาขา', branchName: 'ชื่อสาขา',
customerName: 'ชื่อนายจ้าง', customerName: 'ชื่อนายจ้าง',

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

@ -46,7 +46,6 @@ import FormPerson from 'components/02_personnel-management/FormPerson.vue';
import { EmployerFormBasicInfo, EmployerFormBranch } from './components'; import { EmployerFormBasicInfo, EmployerFormBranch } from './components';
import BranchPage from './BranchPage.vue'; import BranchPage from './BranchPage.vue';
import FormEmployeePassport from 'components/03_customer-management/FormEmployeePassport.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 DialogForm from 'components/DialogForm.vue';
import SideMenu from 'components/SideMenu.vue'; import SideMenu from 'components/SideMenu.vue';
import TableEmpoloyee from 'src/components/03_customer-management/TableEmpoloyee.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 { DialogContainer, DialogHeader } from 'components/dialog';
import KebabAction from 'src/components/shared/KebabAction.vue'; import KebabAction from 'src/components/shared/KebabAction.vue';
import { nextTick } from 'vue'; import { nextTick } from 'vue';
import FormEmployeeVisa from 'components/03_customer-management/FormEmployeeVisa.vue';
const { t, locale } = useI18n(); const { t, locale } = useI18n();
const $q = useQuasar(); const $q = useQuasar();
@ -464,7 +464,7 @@ async function toggleStatusCustomer(id: string, status: boolean) {
async function deleteEmployeeById(opts: { async function deleteEmployeeById(opts: {
id?: string; id?: string;
type?: 'passport' | 'healthCheck' | 'work'; type?: 'passport' | 'visa' | 'healthCheck' | 'work';
}) { }) {
dialog({ dialog({
color: 'negative', color: 'negative',
@ -478,6 +478,10 @@ async function deleteEmployeeById(opts: {
await employeeFormStore.deletePassport(); await employeeFormStore.deletePassport();
} }
if (opts.type === 'visa') {
await employeeFormStore.deleteVisa();
}
if (opts.type === 'healthCheck') { if (opts.type === 'healthCheck') {
await employeeFormStore.deleteHealthCheck(); await employeeFormStore.deleteHealthCheck();
} }
@ -2300,6 +2304,10 @@ const emptyCreateDialog = ref(false);
await employeeFormStore.submitPassport(); await employeeFormStore.submitPassport();
} }
if (employeeFormState.currentTab === 'visa') {
await employeeFormStore.submitVisa();
}
if (employeeFormState.currentTab === 'healthCheck') { if (employeeFormState.currentTab === 'healthCheck') {
await employeeFormStore.submitHealthCheck(); await employeeFormStore.submitHealthCheck();
} }
@ -2370,6 +2378,11 @@ const emptyCreateDialog = ref(false);
name: 'passport', name: 'passport',
label: 'customerEmployee.fileType.passport', label: 'customerEmployee.fileType.passport',
}, },
{
name: 'visa',
label: 'customerEmployee.form.group.visa',
},
{ {
name: 'healthCheck', name: 'healthCheck',
label: 'customerEmployee.form.group.healthCheck', label: 'customerEmployee.form.group.healthCheck',
@ -2479,6 +2492,20 @@ const emptyCreateDialog = ref(false);
sub: true, 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) => ({ ...(currentFromDataEmployee.employeeCheckup?.map((v, i) => ({
name: $t('general.times', { number: i + 1 }), name: $t('general.times', { number: i + 1 }),
anchor: `form-employee-checkup-${i}`, anchor: `form-employee-checkup-${i}`,
@ -2953,6 +2980,8 @@ const emptyCreateDialog = ref(false);
v-model:visa-issue-date="meta.issueDate" v-model:visa-issue-date="meta.issueDate"
v-model:visa-expiry-date="meta.expireDate" v-model:visa-expiry-date="meta.expireDate"
v-model:visa-issuing-place="meta.issuePlace" v-model:visa-issuing-place="meta.issuePlace"
v-model:entry-count="meta.entryCount"
v-model:issue-country="meta.issueCountry"
/> />
<NoticeJobEmployment v-if="mode === 'noticeJobEmployment'" /> <NoticeJobEmployment v-if="mode === 'noticeJobEmployment'" />
@ -3091,6 +3120,114 @@ const emptyCreateDialog = ref(false);
</div> </div>
</template> </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'"> <template v-if="employeeFormState.currentTab === 'healthCheck'">
<FormEmployeeHealthCheck <FormEmployeeHealthCheck
v-if="employeeFormState.currentTab === 'healthCheck'" v-if="employeeFormState.currentTab === 'healthCheck'"
@ -3848,6 +3985,10 @@ const emptyCreateDialog = ref(false);
await employeeFormStore.submitPassport(); await employeeFormStore.submitPassport();
} }
if (employeeFormState.currentTab === 'visa') {
await employeeFormStore.submitVisa();
}
if (employeeFormState.currentTab === 'healthCheck') { if (employeeFormState.currentTab === 'healthCheck') {
await employeeFormStore.submitHealthCheck(); await employeeFormStore.submitHealthCheck();
} }
@ -3934,6 +4075,10 @@ const emptyCreateDialog = ref(false);
name: 'passport', name: 'passport',
label: 'customerEmployee.fileType.passport', label: 'customerEmployee.fileType.passport',
}, },
{
name: 'visa',
label: 'customerEmployee.form.group.visa',
},
{ {
name: 'healthCheck', name: 'healthCheck',
label: 'customerEmployee.form.group.healthCheck', label: 'customerEmployee.form.group.healthCheck',
@ -3983,6 +4128,7 @@ const emptyCreateDialog = ref(false);
anchor: 'drawer-upload-file', anchor: 'drawer-upload-file',
tab: 'personalInfo', tab: 'personalInfo',
}, },
{ {
name: $t('customerEmployee.form.group.passport'), name: $t('customerEmployee.form.group.passport'),
anchor: 'drawer-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( ...(currentFromDataEmployee.employeeCheckup?.map(
(v, i) => ({ (_v, i) => ({
name: $t('general.times', { number: i + 1 }), name: $t('general.times', { number: i + 1 }),
anchor: `drawer-employee-checkup-${i}`, anchor: `drawer-employee-checkup-${i}`,
tab: 'healthCheck', tab: 'healthCheck',
}), }),
) || []), ) || []),
...(currentFromDataEmployee.employeeWork?.map((v, i) => ({ ...(currentFromDataEmployee.employeeWork?.map((_v, i) => ({
name: $t('general.times', { number: i + 1 }), name: $t('general.times', { number: i + 1 }),
anchor: `drawer-employee-work-history-${i}`, anchor: `drawer-employee-work-history-${i}`,
tab: 'workHistory', tab: 'workHistory',
@ -4047,6 +4207,18 @@ const emptyCreateDialog = ref(false);
@click.stop="employeeFormStore.addPassport()" @click.stop="employeeFormStore.addPassport()"
/> />
</template> </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> </SideMenu>
</div> </div>
</div> </div>
@ -4483,6 +4655,8 @@ const emptyCreateDialog = ref(false);
v-model:visa-issue-date="meta.issueDate" v-model:visa-issue-date="meta.issueDate"
v-model:visa-expiry-date="meta.expireDate" v-model:visa-expiry-date="meta.expireDate"
v-model:visa-issuing-place="meta.issuePlace" v-model:visa-issuing-place="meta.issuePlace"
v-model:entry-count="meta.entryCount"
v-model:issue-country="meta.issueCountry"
/> />
<NoticeJobEmployment v-if="mode === 'noticeJobEmployment'" /> <NoticeJobEmployment v-if="mode === 'noticeJobEmployment'" />
@ -4619,6 +4793,115 @@ const emptyCreateDialog = ref(false);
</FormEmployeePassport> </FormEmployeePassport>
</div> </div>
</template> </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'"> <template v-if="employeeFormState.currentTab === 'healthCheck'">
<FormEmployeeHealthCheck <FormEmployeeHealthCheck
v-if="employeeFormState.currentTab === 'healthCheck'" v-if="employeeFormState.currentTab === 'healthCheck'"

120
src/pages/03_customer-management/form.ts
View file

@ -589,6 +589,7 @@ export const useEmployeeForm = defineStore('form-employee', () => {
currentEmployee: Employee | null; currentEmployee: Employee | null;
currentIndex: number; currentIndex: number;
currentIndexPassport: number; currentIndexPassport: number;
currentIndexVisa: number;
profileUrl: string; profileUrl: string;
isEmployeeEdit: boolean; isEmployeeEdit: boolean;
profileSubmit: boolean; profileSubmit: boolean;
@ -619,6 +620,7 @@ export const useEmployeeForm = defineStore('form-employee', () => {
isImageEdit: false, isImageEdit: false,
currentIndexPassport: -1, currentIndexPassport: -1,
currentIndex: -1, currentIndex: -1,
currentIndexVisa: -1,
statusSavePersonal: false, statusSavePersonal: false,
drawerModal: false, drawerModal: false,
imageDialog: false, imageDialog: false,
@ -771,6 +773,7 @@ export const useEmployeeForm = defineStore('form-employee', () => {
function resetFormDataEmployee(clean = false) { function resetFormDataEmployee(clean = false) {
state.value.currentIndexPassport = -1; state.value.currentIndexPassport = -1;
state.value.currentIndexVisa = -1;
if (clean) { if (clean) {
state.value.currentTab = 'personalInfo'; state.value.currentTab = 'personalInfo';
state.value.formDataEmployeeOwner = undefined; state.value.formDataEmployeeOwner = undefined;
@ -836,6 +839,56 @@ export const useEmployeeForm = defineStore('form-employee', () => {
state.value.currentIndexPassport = -1; 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() { async function submitOther() {
if (!currentFromDataEmployee.value.employeeOtherInfo) return; 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() { async function deleteWorkHistory() {
if (!currentFromDataEmployee.value.employeeWork) return; 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( employeeCheckup: structuredClone(
payload.employeeCheckup?.length === 0 payload.employeeCheckup?.length === 0
? defaultFormData.employeeCheckup ? defaultFormData.employeeCheckup
@ -1128,6 +1216,9 @@ export const useEmployeeForm = defineStore('form-employee', () => {
state.value.currentIndexPassport = state.value.currentIndexPassport =
(currentFromDataEmployee.value.employeePassport?.length || 0) - 1; (currentFromDataEmployee.value.employeePassport?.length || 0) - 1;
state.value.currentIndexVisa =
(currentFromDataEmployee.value.employeeVisa?.length || 0) - 1;
if ( if (
currentFromDataEmployee.value.employeePassport?.[ currentFromDataEmployee.value.employeePassport?.[
state.value.currentIndexPassport state.value.currentIndexPassport
@ -1135,6 +1226,15 @@ export const useEmployeeForm = defineStore('form-employee', () => {
) { ) {
state.value.currentIndexPassport = -1; state.value.currentIndexPassport = -1;
} }
if (
currentFromDataEmployee.value.employeeVisa?.[
state.value.currentIndexVisa
].id !== undefined
) {
state.value.currentIndexVisa = -1;
}
const foundBranch = await customerStore.fetchListCustomerBranchById( const foundBranch = await customerStore.fetchListCustomerBranchById(
payload.customerBranchId, payload.customerBranchId,
); );
@ -1197,20 +1297,40 @@ export const useEmployeeForm = defineStore('form-employee', () => {
(currentFromDataEmployee.value.employeePassport?.length || 0) - 1; (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 { return {
state, state,
currentFromDataEmployee, currentFromDataEmployee,
resetEmployeeData, resetEmployeeData,
addPassport, addPassport,
addVisa,
submitPassport, submitPassport,
submitVisa,
submitOther, submitOther,
submitWorkHistory, submitWorkHistory,
submitPersonal, submitPersonal,
submitHealthCheck, submitHealthCheck,
deletePassport, deletePassport,
deleteVisa,
deleteWorkHistory, deleteWorkHistory,
deleteHealthCheck, deleteHealthCheck,

2
src/pages/05_quotation/QuotationForm.vue
View file

@ -2325,6 +2325,8 @@ async function getInvoiceCodeFullPay() {
v-model:visa-issue-date="meta.issueDate" v-model:visa-issue-date="meta.issueDate"
v-model:visa-expiry-date="meta.expireDate" v-model:visa-expiry-date="meta.expireDate"
v-model:visa-issuing-place="meta.issuePlace" v-model:visa-issuing-place="meta.issuePlace"
v-model:entry-count="meta.entryCount"
v-model:issue-country="meta.issueCountry"
/> />
<NoticeJobEmployment v-if="mode === 'noticeJobEmployment'" /> <NoticeJobEmployment v-if="mode === 'noticeJobEmployment'" />

1
src/stores/employee/types.ts
View file

@ -284,6 +284,7 @@ export type NewEmployeeHistory = {
}; };
export type EmployeeVisaPayload = { export type EmployeeVisaPayload = {
id?: string;
number: string; number: string;
type: string; type: string;
entryCount: number; entryCount: number;