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

refactor(03): employee visa passport

Browse source
This commit is contained in:
puriphatt 2024-08-29 11:39:09 +07:00
parent 9f47a709c0
commit 0471cf56ae
4 changed files with 148 additions and 51 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -85,36 +85,8 @@ watch(
</script> </script>
<template> <template>
<div class="row col-12" v-if="ocr"> <div class="row col-12">
<div class="col-12 row"> <div v-if="!ocr" class="col-12 q-pb-sm text-weight-bold text-body1">
<div class="col-6 flex flex-center">
<q-img
src="/images/customer-CORP-avartar.png "
style="height: 100px; max-width: 50%"
/>
</div>
<div class="col-6 column">
<q-input
lazy-rules="ondemand"
:for="`${prefixId}-input-passport-no`"
:dense="dense"
outlined
:readonly="readonly"
hide-bottom-space
class="col-md-3 col-6"
:label="$t('customerEmployee.form.passportNo')"
v-model="passportNumber"
:rules="[
(val: string) =>
!!val || $t('inputValidate') + $t('formDialogInputPassportNo'),
]"
/>
</div>
</div>
</div>
<div class="row col-12" v-else>
<div class="col-12 q-pb-sm text-weight-bold text-body1">
<q-icon <q-icon
flat flat
size="xs" size="xs"
@ -141,7 +113,8 @@ watch(
option-label="label" option-label="label"
lazy-rules="ondemand" lazy-rules="ondemand"
v-model="passportType" v-model="passportType"
class="col-md-3 col-12" class="col-12"
:class="{ 'col-md-3': !ocr }"
:dense="dense" :dense="dense"
:readonly="readonly" :readonly="readonly"
:hide-dropdown-icon="readonly" :hide-dropdown-icon="readonly"
@ -169,7 +142,7 @@ watch(
outlined outlined
:readonly="readonly" :readonly="readonly"
hide-bottom-space hide-bottom-space
class="col-md-3 col-6" :class="{ 'col-12': ocr, 'col-6': !ocr, 'col-md-3': !ocr }"
:label="$t('customerEmployee.form.passportNo')" :label="$t('customerEmployee.form.passportNo')"
v-model="passportNumber" v-model="passportNumber"
:rules="[ :rules="[
@ -184,7 +157,7 @@ watch(
outlined outlined
:readonly="readonly" :readonly="readonly"
hide-bottom-space hide-bottom-space
class="col-6" :class="{ 'col-12': ocr, 'col-6': !ocr }"
:label="$t('customerEmployee.form.passportRef')" :label="$t('customerEmployee.form.passportRef')"
:model-value=" :model-value="
readonly readonly
@ -202,7 +175,7 @@ watch(
outlined outlined
:readonly="readonly" :readonly="readonly"
hide-bottom-space hide-bottom-space
class="col-md-3 col-6" :class="{ 'col-12': ocr, 'col-6': !ocr, 'col-md-3': !ocr }"
:label="$t('customerEmployee.form.passportPlace')" :label="$t('customerEmployee.form.passportPlace')"
v-model="passportIssuingPlace" v-model="passportIssuingPlace"
:rules="[ :rules="[
@ -223,7 +196,7 @@ watch(
option-value="value" option-value="value"
option-label="label" option-label="label"
lazy-rules="ondemand" lazy-rules="ondemand"
class="col-md-3 col-6" :class="{ 'col-12': ocr, 'col-6': !ocr, 'col-md-3': !ocr }"
v-model="passportIssuingCountry" v-model="passportIssuingCountry"
:dense="dense" :dense="dense"
:readonly="readonly" :readonly="readonly"
@ -250,7 +223,8 @@ watch(
:id="`${prefixId}-date-picker-passport-issueance`" :id="`${prefixId}-date-picker-passport-issueance`"
:label="$t('customerEmployee.form.passportIssueDate')" :label="$t('customerEmployee.form.passportIssueDate')"
v-model="passportIssueDate" v-model="passportIssueDate"
class="col-md-3 col-6" class="col-6"
:class="{ 'col-md-3': !ocr }"
:readonly="readonly" :readonly="readonly"
:rules="[ :rules="[
(val: string) => (val: string) =>
@ -262,7 +236,8 @@ watch(
:id="`${prefixId}-date-picker-passport-expire`" :id="`${prefixId}-date-picker-passport-expire`"
:label="$t('customerEmployee.form.passportExpireDate')" :label="$t('customerEmployee.form.passportExpireDate')"
v-model="passportExpiryDate" v-model="passportExpiryDate"
class="col-md-3 col-6" class="col-6"
:class="{ 'col-md-3': !ocr }"
:readonly="readonly" :readonly="readonly"
:rules="[ :rules="[
(val: string) => (val: string) =>

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

@ -46,6 +46,8 @@ defineProps<{
separator?: boolean; separator?: boolean;
typeCustomer?: string; typeCustomer?: string;
prefixId: string; prefixId: string;
ocr?: boolean;
}>(); }>();
async function fetchProvince() { async function fetchProvince() {
@ -86,7 +88,7 @@ watch(
<template> <template>
<div class="row"> <div class="row">
<div class="col-12 q-pb-sm text-weight-bold text-body1"> <div v-if="!ocr" class="col-12 q-pb-sm text-weight-bold text-body1">
<q-icon <q-icon
flat flat
size="xs" size="xs"
@ -111,7 +113,7 @@ watch(
option-value="value" option-value="value"
option-label="label" option-label="label"
lazy-rules="ondemand" lazy-rules="ondemand"
class="col-4" :class="{ 'col-4': !ocr, 'col-6': ocr }"
:dense="dense" :dense="dense"
:readonly="readonly" :readonly="readonly"
:options="visaTypeOptions" :options="visaTypeOptions"
@ -144,7 +146,7 @@ watch(
outlined outlined
:readonly="readonly" :readonly="readonly"
hide-bottom-space hide-bottom-space
class="col-4" :class="{ 'col-4': !ocr, 'col-6': ocr }"
: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="
@ -156,7 +158,7 @@ watch(
!!val || $t('inputValidate') + $t('formDialogInputVisaNo'), !!val || $t('inputValidate') + $t('formDialogInputVisaNo'),
]" --> ]" -->
<DatePicker <DatePicker
class="col-2" :class="{ 'col-2': !ocr, 'col-6': ocr }"
: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')"
@ -164,7 +166,7 @@ watch(
clearable clearable
/> />
<DatePicker <DatePicker
class="col-2" :class="{ 'col-2': !ocr, 'col-6': ocr }"
: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')"
@ -179,7 +181,7 @@ watch(
outlined outlined
:readonly="readonly" :readonly="readonly"
hide-bottom-space hide-bottom-space
class="col-5" :class="{ 'col-5': !ocr, 'col-6': ocr }"
: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="
@ -191,7 +193,7 @@ watch(
!!val || $t('selectValidate') + $t('formDialogInputVisaPlace'), !!val || $t('selectValidate') + $t('formDialogInputVisaPlace'),
]" --> ]" -->
<DatePicker <DatePicker
class="col-4" :class="{ 'col-4': !ocr, 'col-6': ocr }"
: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')"
@ -206,7 +208,7 @@ watch(
outlined outlined
:readonly="readonly" :readonly="readonly"
hide-bottom-space hide-bottom-space
class="col-5" :class="{ 'col-5': !ocr, 'col-6': ocr }"
: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="
@ -219,7 +221,7 @@ watch(
!!val || $t('inputValidate') + $t('formDialogInputVisaTM6'), !!val || $t('inputValidate') + $t('formDialogInputVisaTM6'),
]" --> ]" -->
<DatePicker <DatePicker
class="col-4" :class="{ 'col-4': !ocr, 'col-6': ocr }"
: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')"

6
src/components/upload-file/UploadFile.vue
View file

@ -110,7 +110,7 @@ const { pdf, pages } = usePDF(computed(() => currentFile.value?.url));
<template> <template>
<div class="full-width row no-wrap wrapper"> <div class="full-width row no-wrap wrapper">
<div class="col column no-wrap"> <div class="col full-height column no-wrap">
<div class="q-pa-sm text-center bordered" style="height: 50px"> <div class="q-pa-sm text-center bordered" style="height: 50px">
<q-btn-dropdown <q-btn-dropdown
:disable="readonly" :disable="readonly"
@ -168,7 +168,7 @@ const { pdf, pages } = usePDF(computed(() => currentFile.value?.url));
</div> </div>
</div> </div>
<div class="col column no-wrap"> <div class="col full-height column no-wrap">
<div <div
class="bordered row items-center justify-evenly q-pa-sm no-wrap" class="bordered row items-center justify-evenly q-pa-sm no-wrap"
style="height: 50px" style="height: 50px"
@ -243,7 +243,7 @@ const { pdf, pages } = usePDF(computed(() => currentFile.value?.url));
</div> </div>
</div> </div>
<div class="col-5 column no-wrap"> <div class="col-5 full-height column no-wrap">
<div <div
class="bordered row items-center justify-between q-pa-sm" class="bordered row items-center justify-between q-pa-sm"
style="height: 50px" style="height: 50px"

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

@ -2324,7 +2324,66 @@ const emptyCreateDialog = ref(false);
employeeFormState.ocr = false; employeeFormState.ocr = false;
} }
" "
/> >
<template #form="{ mode }">
<FormEmployeePassport
v-if="mode === 'passport'"
prefix-id="drawer-info-employee"
id="form-passport"
dense
outlined
separator
ocr
:title="$t('customerEmployee.form.group.passport')"
:readonly="!employeeFormState.isEmployeeEdit"
v-model:passport-type="currentFromDataEmployee.passportType"
v-model:passport-number="
currentFromDataEmployee.passportNumber
"
v-model:passport-issue-date="
currentFromDataEmployee.passportIssueDate
"
v-model:passport-expiry-date="
currentFromDataEmployee.passportExpiryDate
"
v-model:passport-issuing-place="
currentFromDataEmployee.passportIssuingPlace
"
v-model:passport-issuing-country="
currentFromDataEmployee.passportIssuingCountry
"
v-model:previous-passport-reference="
currentFromDataEmployee.previousPassportReference
"
/>
<FormEmployeeVisa
v-if="mode === 'visa'"
prefix-id="drawer-info-employee"
id="form-visa"
ocr
dense
outlined
title="customerEmployee.form.group.visa"
:readonly="!employeeFormState.isEmployeeEdit"
v-model:visa-type="currentFromDataEmployee.visaType"
v-model:visa-number="currentFromDataEmployee.visaNumber"
v-model:visa-issue-date="
currentFromDataEmployee.visaIssueDate
"
v-model:visa-expiry-date="
currentFromDataEmployee.visaExpiryDate
"
v-model:visa-issuing-place="
currentFromDataEmployee.visaIssuingPlace
"
v-model:visa-stay-until-date="
currentFromDataEmployee.visaStayUntilDate
"
v-model:tm6-number="currentFromDataEmployee.tm6Number"
v-model:entry-date="currentFromDataEmployee.entryDate"
/>
</template>
</UploadFile>
</div> </div>
</template> </template>
@ -3271,7 +3330,68 @@ const emptyCreateDialog = ref(false);
employeeFormState.ocr = false; employeeFormState.ocr = false;
} }
" "
/> >
<template #form="{ mode }">
<FormEmployeePassport
v-if="mode === 'passport'"
prefix-id="drawer-info-employee"
id="drawer-form-passport"
dense
outlined
separator
ocr
:title="'customerEmployee.form.group.passport'"
:readonly="!employeeFormState.isEmployeeEdit"
v-model:passport-type="
currentFromDataEmployee.passportType
"
v-model:passport-number="
currentFromDataEmployee.passportNumber
"
v-model:passport-issue-date="
currentFromDataEmployee.passportIssueDate
"
v-model:passport-expiry-date="
currentFromDataEmployee.passportExpiryDate
"
v-model:passport-issuing-place="
currentFromDataEmployee.passportIssuingPlace
"
v-model:passport-issuing-country="
currentFromDataEmployee.passportIssuingCountry
"
v-model:previous-passport-reference="
currentFromDataEmployee.previousPassportReference
"
/>
<FormEmployeeVisa
v-if="mode === 'visa'"
prefix-id="drawer-info-employee"
id="drawer-form-visa"
dense
outlined
ocr
title="customerEmployee.form.group.visa"
:readonly="!employeeFormState.isEmployeeEdit"
v-model:visa-type="currentFromDataEmployee.visaType"
v-model:visa-number="currentFromDataEmployee.visaNumber"
v-model:visa-issue-date="
currentFromDataEmployee.visaIssueDate
"
v-model:visa-expiry-date="
currentFromDataEmployee.visaExpiryDate
"
v-model:visa-issuing-place="
currentFromDataEmployee.visaIssuingPlace
"
v-model:visa-stay-until-date="
currentFromDataEmployee.visaStayUntilDate
"
v-model:tm6-number="currentFromDataEmployee.tm6Number"
v-model:entry-date="currentFromDataEmployee.entryDate"
/>
</template>
</UploadFile>
</div> </div>
</template> </template>
<template v-if="employeeFormState.currentTab === 'healthCheck'"> <template v-if="employeeFormState.currentTab === 'healthCheck'">