refactor: edit layout form in ocr
This commit is contained in:
Thanaphon Frappet
parent
5237d2cd5b
commit
bb4164779e
1 changed files with 425 additions and 658 deletions
|
|
@ -193,242 +193,6 @@ watch(
|
|||
</script>
|
||||
|
||||
<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 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="type"
|
||||
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 ? namePrefix || '-' : namePrefix"
|
||||
@update:model-value="
|
||||
(v) => (typeof v === 'string' ? (namePrefix = v) : '')
|
||||
"
|
||||
@clear="namePrefix = ''"
|
||||
>
|
||||
<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 ? previousPassportRef || '-' : previousPassportRef
|
||||
"
|
||||
@update:model-value="
|
||||
(v) => (typeof v === 'string' ? (previousPassportRef = 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="issuePlace"
|
||||
: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="issueCountry"
|
||||
: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="issueDate"
|
||||
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="expireDate"
|
||||
class="col-6"
|
||||
:readonly="readonly"
|
||||
:rules="[
|
||||
(val) =>
|
||||
(val && val.length > 0) ||
|
||||
$t('form.error.selectField', {
|
||||
field: $t('customerEmployee.form.passportExpireDate'),
|
||||
}),
|
||||
]"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template v-if="!ocr">
|
||||
<div class="row col-12">
|
||||
<div v-if="!hideTitle" class="col-12 q-pb-sm text-weight-bold text-body1">
|
||||
<q-icon
|
||||
|
|
@ -458,6 +222,7 @@ watch(
|
|||
<div
|
||||
class="col row justify-center q-col-gutter-sml"
|
||||
style="max-height: 50%"
|
||||
v-if="!ocr"
|
||||
>
|
||||
<q-avatar
|
||||
style="border: 1px dashed; border-color: black"
|
||||
|
|
@ -469,7 +234,10 @@ watch(
|
|||
icon="mdi-image-outline"
|
||||
/>
|
||||
</div>
|
||||
<div class="row q-col-gutter-sm col-10">
|
||||
<div
|
||||
class="row q-col-gutter-sm"
|
||||
:class="{ 'col-10': !ocr, 'col-12': ocr }"
|
||||
>
|
||||
<q-select
|
||||
outlined
|
||||
clearable
|
||||
|
|
@ -601,7 +369,7 @@ watch(
|
|||
class="col-12"
|
||||
:disable="!readonly"
|
||||
:label="$t('customer.table.fullname')"
|
||||
:model-value="`${(prefixNameOptions.find((v) => v.value === prefixName) || {}).label || ''} ${firstName || ''} ${lastName || ''}`"
|
||||
:model-value="`${(prefixNameOptions.find((v) => v.value === namePrefix) || {}).label || ''} ${firstName || ''} ${lastName || ''}`"
|
||||
/>
|
||||
|
||||
<q-input
|
||||
|
|
@ -655,7 +423,7 @@ watch(
|
|||
class="col-12"
|
||||
:label="$t('customer.table.fullnameEN')"
|
||||
:disable="!readonly"
|
||||
:model-value="`${(prefixNameOptions.find((v) => v.value === prefixName) || {}).value || ''} ${firstName || ''} ${lastName || ''}`"
|
||||
:model-value="`${(prefixNameOptions.find((v) => v.value === namePrefix) || {}).value || ''} ${firstName || ''} ${lastName || ''}`"
|
||||
/>
|
||||
|
||||
<q-select
|
||||
|
|
@ -877,7 +645,6 @@ watch(
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue