refactor: edit type passpor
This commit is contained in:
Thanaphon Frappet
parent
6efce3c4bb
commit
82d28cc3aa
3 changed files with 124 additions and 109 deletions
|
|
@ -12,36 +12,25 @@ import DatePicker from '../shared/DatePicker.vue';
|
|||
const optionStore = useOptionStore();
|
||||
const { locale } = useI18n();
|
||||
|
||||
const firstName = defineModel<string>('firstName');
|
||||
const lastName = defineModel<string>('lastName');
|
||||
|
||||
const prefixName = defineModel<string>('prefixName');
|
||||
const gender = defineModel<string>('gender');
|
||||
|
||||
const passportType = defineModel<string>('passportType');
|
||||
const passportNumber = defineModel<string>('passportNumber');
|
||||
const passportIssueDate = defineModel<Date | null | string>(
|
||||
'passportIssueDate',
|
||||
);
|
||||
const passportExpiryDate = defineModel<Date | null | string>(
|
||||
'passportExpiryDate',
|
||||
);
|
||||
const passportIssuingCountry = defineModel<string>('passportIssuingCountry');
|
||||
const passportIssuingPlace = defineModel<string>('passportIssuingPlace');
|
||||
const previousPassportReference = defineModel<string>(
|
||||
'previousPassportReference',
|
||||
);
|
||||
|
||||
const workerStatus = defineModel<string>('workerStatus');
|
||||
const previousPassportNo = defineModel<string>('previousPassportNo');
|
||||
const birthCountry = defineModel<string>('birthCountry');
|
||||
const previousPassportRef = defineModel<string>('previousPassportRef');
|
||||
const issuePlace = defineModel<string>('issuePlace');
|
||||
const issueCountry = defineModel<string>('issueCountry');
|
||||
const issueDate = defineModel<Date | null | string>('issueDate');
|
||||
const type = defineModel<string>('type');
|
||||
const expireDate = defineModel<Date>('expireDate');
|
||||
const birthDate = defineModel<Date>('birthDate');
|
||||
const workerStatus = defineModel<string>('workerStatus');
|
||||
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 gender = defineModel<string>('gender');
|
||||
const lastNameEN = defineModel<string>('lastNameEn');
|
||||
const lastName = defineModel<string>('lastName');
|
||||
const middleNameEN = defineModel<string>('middleNameEn');
|
||||
const middleName = defineModel<string>('middleName');
|
||||
const firstNameEN = defineModel<string>('firstNameEn');
|
||||
const firstName = defineModel<string>('firstName');
|
||||
const namePrefix = defineModel<string>('namePrefix');
|
||||
const passportNumber = defineModel<string>('passportNumber');
|
||||
|
||||
const genderOptions = ref<Record<string, unknown>[]>([]);
|
||||
let genderFilter: (
|
||||
|
|
@ -96,8 +85,8 @@ let workerStatusFilter: (
|
|||
function matPreFixName() {
|
||||
if (!gender.value) return;
|
||||
|
||||
if (gender.value === 'male') prefixName.value = 'mr';
|
||||
else prefixName.value = 'mrs';
|
||||
if (gender.value === 'male') namePrefix.value = 'mr';
|
||||
else namePrefix.value = 'mrs';
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
|
|
@ -187,7 +176,7 @@ watch(
|
|||
);
|
||||
|
||||
watch(
|
||||
() => prefixName.value,
|
||||
() => namePrefix.value,
|
||||
(v) => {
|
||||
if (v === 'mr') gender.value = 'male';
|
||||
else if (v !== '') gender.value = 'female';
|
||||
|
|
@ -232,7 +221,7 @@ watch(
|
|||
input-debounce="0"
|
||||
option-value="value"
|
||||
option-label="label"
|
||||
v-model="passportType"
|
||||
v-model="type"
|
||||
class="col-12"
|
||||
:dense="dense"
|
||||
:readonly="readonly"
|
||||
|
|
@ -304,11 +293,11 @@ watch(
|
|||
:for="`${prefixId}-select-prefix-name`"
|
||||
:label="$t('personnel.form.prefixName')"
|
||||
@filter="prefixNameFilter"
|
||||
:model-value="readonly ? prefixName || '-' : prefixName"
|
||||
:model-value="readonly ? namePrefix || '-' : namePrefix"
|
||||
@update:model-value="
|
||||
(v) => (typeof v === 'string' ? (prefixName = v) : '')
|
||||
(v) => (typeof v === 'string' ? (namePrefix = v) : '')
|
||||
"
|
||||
@clear="prefixName = ''"
|
||||
@clear="namePrefix = ''"
|
||||
>
|
||||
<template v-slot:no-option>
|
||||
<q-item>
|
||||
|
|
@ -350,13 +339,10 @@ watch(
|
|||
class="col-2"
|
||||
:label="$t('customerEmployee.form.passportRef')"
|
||||
:model-value="
|
||||
readonly
|
||||
? previousPassportReference || '-'
|
||||
: previousPassportReference
|
||||
readonly ? previousPassportRef || '-' : previousPassportRef
|
||||
"
|
||||
@update:model-value="
|
||||
(v) =>
|
||||
typeof v === 'string' ? (previousPassportReference = v) : ''
|
||||
(v) => (typeof v === 'string' ? (previousPassportRef = v) : '')
|
||||
"
|
||||
/>
|
||||
<q-input
|
||||
|
|
@ -367,7 +353,7 @@ watch(
|
|||
hide-bottom-space
|
||||
class="col-12"
|
||||
:label="$t('customerEmployee.form.passportPlace')"
|
||||
v-model="passportIssuingPlace"
|
||||
v-model="issuePlace"
|
||||
:rules="[
|
||||
(val) => (val && val.length > 0) || $t('form.error.required'),
|
||||
]"
|
||||
|
|
@ -385,7 +371,7 @@ watch(
|
|||
option-value="value"
|
||||
option-label="label"
|
||||
class="col-12"
|
||||
v-model="passportIssuingCountry"
|
||||
v-model="issueCountry"
|
||||
:dense="dense"
|
||||
:readonly="readonly"
|
||||
:hide-dropdown-icon="readonly"
|
||||
|
|
@ -412,7 +398,7 @@ watch(
|
|||
<DatePicker
|
||||
:id="`${prefixId}-date-picker-passport-issueance`"
|
||||
:label="$t('customerEmployee.form.passportIssueDate')"
|
||||
v-model="passportIssueDate"
|
||||
v-model="issueDate"
|
||||
class="col-6"
|
||||
:readonly="readonly"
|
||||
:rules="[
|
||||
|
|
@ -426,7 +412,7 @@ watch(
|
|||
<DatePicker
|
||||
:id="`${prefixId}-date-picker-passport-expire`"
|
||||
:label="$t('customerEmployee.form.passportExpireDate')"
|
||||
v-model="passportExpiryDate"
|
||||
v-model="expireDate"
|
||||
class="col-6"
|
||||
:readonly="readonly"
|
||||
:rules="[
|
||||
|
|
@ -527,7 +513,7 @@ watch(
|
|||
hide-bottom-space
|
||||
class="col-6"
|
||||
:label="$t('customerEmployee.form.previousPassportNumber')"
|
||||
v-model="previousPassportNo"
|
||||
v-model="previousPassportRef"
|
||||
/>
|
||||
|
||||
<q-select
|
||||
|
|
@ -549,11 +535,11 @@ watch(
|
|||
:for="`${prefixId}-select-prefix-name`"
|
||||
:label="$t('personnel.form.prefixName')"
|
||||
@filter="prefixNameFilter"
|
||||
:model-value="readonly ? prefixName || '-' : prefixName"
|
||||
:model-value="readonly ? namePrefix || '-' : namePrefix"
|
||||
@update:model-value="
|
||||
(v) => (typeof v === 'string' ? (prefixName = v) : '')
|
||||
(v) => (typeof v === 'string' ? (namePrefix = v) : '')
|
||||
"
|
||||
@clear="prefixName = ''"
|
||||
@clear="namePrefix = ''"
|
||||
>
|
||||
<template v-slot:no-option>
|
||||
<q-item>
|
||||
|
|
@ -772,7 +758,8 @@ watch(
|
|||
@filter="nationalityFilter"
|
||||
:model-value="readonly ? nationality || '-' : nationality"
|
||||
@update:model-value="
|
||||
(v) => (typeof v === 'string' ? (nationality = v) : '')
|
||||
(v) =>
|
||||
typeof v === 'string' ? (birthCountry = nationality = v) : ''
|
||||
"
|
||||
@clear="nationality = ''"
|
||||
>
|
||||
|
|
@ -793,44 +780,12 @@ watch(
|
|||
hide-bottom-space
|
||||
class="col-4"
|
||||
:label="$t('customerEmployee.form.placeOfBirth')"
|
||||
v-model="placeOfBirth"
|
||||
:model-value="optionStore.mapOption(birthCountry || '')"
|
||||
@update:model-value="
|
||||
(v) => (typeof v === 'string' ? (birthCountry = 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="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
|
||||
|
|
@ -844,13 +799,14 @@ watch(
|
|||
option-value="value"
|
||||
option-label="label"
|
||||
class="col-6 col-md-4"
|
||||
v-model="passportIssuingCountry"
|
||||
v-model="issueCountry"
|
||||
:dense="dense"
|
||||
:readonly="readonly"
|
||||
:hide-dropdown-icon="readonly"
|
||||
:options="passportIssuingCountryOptions"
|
||||
:for="`${prefixId}-select-passport-country`"
|
||||
:label="$t('customerEmployee.form.passportIssuer')"
|
||||
@update:model-value="(v) => (issuePlace = v)"
|
||||
:rules="[
|
||||
(val) =>
|
||||
(val && val.length > 0) ||
|
||||
|
|
@ -869,10 +825,31 @@ watch(
|
|||
</template>
|
||||
</q-select>
|
||||
|
||||
<q-input
|
||||
:for="`${prefixId}-input-passport-place`"
|
||||
:dense="dense"
|
||||
outlined
|
||||
:readonly="readonly"
|
||||
hide-bottom-space
|
||||
class="col-4"
|
||||
:label="$t('customerEmployee.form.passportPlace')"
|
||||
:model-value="
|
||||
readonly
|
||||
? optionStore.mapOption(issuePlace || '') || '-'
|
||||
: optionStore.mapOption(issuePlace || '')
|
||||
"
|
||||
@update:model-value="
|
||||
(v) => (typeof v === 'string' ? (issuePlace = v) : '')
|
||||
"
|
||||
:rules="[
|
||||
(val) => (val && val.length > 0) || $t('form.error.required'),
|
||||
]"
|
||||
/>
|
||||
|
||||
<DatePicker
|
||||
:id="`${prefixId}-date-picker-passport-issueance`"
|
||||
:label="$t('customerEmployee.form.passportIssueDate')"
|
||||
v-model="passportIssueDate"
|
||||
v-model="issueDate"
|
||||
class="col-6 col-md-3"
|
||||
:readonly="readonly"
|
||||
:rules="[
|
||||
|
|
@ -886,7 +863,7 @@ watch(
|
|||
<DatePicker
|
||||
:id="`${prefixId}-date-picker-passport-expire`"
|
||||
:label="$t('customerEmployee.form.passportExpireDate')"
|
||||
v-model="passportExpiryDate"
|
||||
v-model="expireDate"
|
||||
class="col-6 col-md-3"
|
||||
:readonly="readonly"
|
||||
:rules="[
|
||||
|
|
|
|||
|
|
@ -3040,15 +3040,25 @@ const emptyCreateDialog = ref(false);
|
|||
:title="$t('customerEmployee.form.group.passport')"
|
||||
:readonly="employeeFormState.currentIndexPassport !== index"
|
||||
:full-name="employeeFormState.currentIndexPassport !== index"
|
||||
v-model:passport-type="value.type"
|
||||
v-model:birth-country="value.birthCountry"
|
||||
v-model:previous-passportRef="value.previousPassportRef"
|
||||
v-model:issue-place="value.issuePlace"
|
||||
v-model:issue-country="value.issueCountry"
|
||||
v-model:issue-date="value.issueDate"
|
||||
v-model:type="value.type"
|
||||
v-model:expire-date="value.expireDate"
|
||||
v-model:birth-date="value.birthDate"
|
||||
v-model:worker-status="value.workerStatus"
|
||||
v-model:nationality="value.nationality"
|
||||
v-model:gender="value.gender"
|
||||
v-model:last-name-en="value.lastNameEN"
|
||||
v-model:last-name="value.lastName"
|
||||
v-model:middle-name-en="value.middleNameEN"
|
||||
v-model:middle-name="value.middleName"
|
||||
v-model:first-name-en="value.firstNameEN"
|
||||
v-model:first-name="value.firstName"
|
||||
v-model:name-prefix="value.namePrefix"
|
||||
v-model:passport-number="value.number"
|
||||
v-model:prefix-name="currentFromDataEmployee.namePrefix"
|
||||
v-model:first-name="currentFromDataEmployee.firstName"
|
||||
v-model:last-name="currentFromDataEmployee.lastName"
|
||||
v-model:passport-issue-date="value.issueDate"
|
||||
v-model:passport-expiry-date="value.expireDate"
|
||||
v-model:passport-issuing-place="value.issuePlace"
|
||||
v-model:passport-issuing-country="value.issueCountry"
|
||||
>
|
||||
<template v-slot:expiryDate>
|
||||
{{ $t('general.expirationDate') }} :
|
||||
|
|
@ -4714,15 +4724,25 @@ const emptyCreateDialog = ref(false);
|
|||
:title="$t('customerEmployee.form.group.passport')"
|
||||
:readonly="employeeFormState.currentIndexPassport !== index"
|
||||
:full-name="employeeFormState.currentIndexPassport !== index"
|
||||
v-model:passport-type="value.type"
|
||||
v-model:birth-country="value.birthCountry"
|
||||
v-model:previous-passportRef="value.previousPassportRef"
|
||||
v-model:issue-place="value.issuePlace"
|
||||
v-model:issue-country="value.issueCountry"
|
||||
v-model:issue-date="value.issueDate"
|
||||
v-model:type="value.type"
|
||||
v-model:expire-date="value.expireDate"
|
||||
v-model:birth-date="value.birthDate"
|
||||
v-model:worker-status="value.workerStatus"
|
||||
v-model:nationality="value.nationality"
|
||||
v-model:gender="value.gender"
|
||||
v-model:last-name-en="value.lastNameEN"
|
||||
v-model:last-name="value.lastName"
|
||||
v-model:middle-name-en="value.middleNameEN"
|
||||
v-model:middle-name="value.middleName"
|
||||
v-model:first-name-en="value.firstNameEN"
|
||||
v-model:first-name="value.firstName"
|
||||
v-model:name-prefix="value.namePrefix"
|
||||
v-model:passport-number="value.number"
|
||||
v-model:prefix-name="currentFromDataEmployee.namePrefix"
|
||||
v-model:first-name="currentFromDataEmployee.firstName"
|
||||
v-model:last-name="currentFromDataEmployee.lastName"
|
||||
v-model:passport-issue-date="value.issueDate"
|
||||
v-model:passport-expiry-date="value.expireDate"
|
||||
v-model:passport-issuing-place="value.issuePlace"
|
||||
v-model:passport-issuing-country="value.issueCountry"
|
||||
>
|
||||
<template v-slot:expiryDate>
|
||||
{{ $t('general.expirationDate') }} :
|
||||
|
|
@ -4939,6 +4959,9 @@ const emptyCreateDialog = ref(false);
|
|||
v-model:employee-checkup="
|
||||
currentFromDataEmployee.employeeCheckup
|
||||
"
|
||||
v-model:checkup-results-option="
|
||||
optionStore.globalOption.checkupResults
|
||||
"
|
||||
v-model:checkup-type-option="
|
||||
optionStore.globalOption.insurancePlace
|
||||
"
|
||||
|
|
|
|||
|
|
@ -297,14 +297,29 @@ export type EmployeeVisaPayload = {
|
|||
};
|
||||
|
||||
export type EmployeePassportPayload = {
|
||||
id?: string;
|
||||
number: string;
|
||||
type: string;
|
||||
issueDate: Date;
|
||||
expireDate: Date;
|
||||
issueCountry: string;
|
||||
birthCountry: string;
|
||||
previousPassportRef: string;
|
||||
issuePlace: string;
|
||||
previousPassportRef?: string | null;
|
||||
issueCountry: string;
|
||||
issueDate: Date;
|
||||
type: string;
|
||||
expireDate: Date;
|
||||
birthDate: Date;
|
||||
updatedAt: Date;
|
||||
createdAt: Date;
|
||||
workerStatus: string;
|
||||
nationality: string;
|
||||
gender: string;
|
||||
lastNameEN: string;
|
||||
lastName: string;
|
||||
middleNameEN: string;
|
||||
middleName: string;
|
||||
firstNameEN: string;
|
||||
firstName: string;
|
||||
namePrefix: string;
|
||||
employeeId: string;
|
||||
number: string;
|
||||
id?: string;
|
||||
};
|
||||
|
||||
export type EmployeeInCountryNoticePayload = {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue