refactor: add tab passport
This commit is contained in:
Thanaphon Frappet
parent
6879d0868c
commit
e969db16e0
3 changed files with 505 additions and 147 deletions
|
|
@ -32,7 +32,9 @@ defineProps<{
|
|||
outlined?: boolean;
|
||||
readonly?: boolean;
|
||||
separator?: boolean;
|
||||
img?: string;
|
||||
ocr?: boolean;
|
||||
hideTitle?: boolean;
|
||||
|
||||
prefixId: string;
|
||||
}>();
|
||||
|
|
@ -86,7 +88,10 @@ watch(
|
|||
|
||||
<template>
|
||||
<div class="row col-12">
|
||||
<div v-if="!ocr" class="col-12 q-pb-sm text-weight-bold text-body1">
|
||||
<div
|
||||
v-if="!ocr && !hideTitle"
|
||||
class="col-12 q-pb-sm text-weight-bold text-body1"
|
||||
>
|
||||
<q-icon
|
||||
flat
|
||||
size="xs"
|
||||
|
|
@ -98,151 +103,189 @@ watch(
|
|||
{{ 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"
|
||||
v-model="passportType"
|
||||
class="col-12"
|
||||
:class="{ '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"
|
||||
<div
|
||||
v-if="!ocr"
|
||||
class="col-12 row justify-between q-pb-sm text-weight-bold"
|
||||
>
|
||||
<div class="app-text-muted">
|
||||
<slot name="expiryDate" />
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<slot name="button"></slot>
|
||||
</div>
|
||||
</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%"
|
||||
>
|
||||
<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-passport-ref`"
|
||||
:dense="dense"
|
||||
outlined
|
||||
:readonly="readonly"
|
||||
hide-bottom-space
|
||||
:class="{ 'col-12': ocr, 'col-6': !ocr }"
|
||||
: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': 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"
|
||||
<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="row q-col-gutter-sm"
|
||||
:class="{ 'col-10': !ocr, 'col-12': ocr }"
|
||||
>
|
||||
<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'),
|
||||
}),
|
||||
]"
|
||||
/>
|
||||
<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>
|
||||
<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-passport-ref`"
|
||||
:dense="dense"
|
||||
outlined
|
||||
:readonly="readonly"
|
||||
hide-bottom-space
|
||||
:class="{ 'col-12': ocr, 'col-6': !ocr }"
|
||||
: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': 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'),
|
||||
}),
|
||||
]"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue