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>
|
</script>
|
||||||
|
|
||||||
<template>
|
<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 class="row col-12">
|
||||||
<div v-if="!hideTitle" class="col-12 q-pb-sm text-weight-bold text-body1">
|
<div v-if="!hideTitle" class="col-12 q-pb-sm text-weight-bold text-body1">
|
||||||
<q-icon
|
<q-icon
|
||||||
|
|
@ -458,6 +222,7 @@ watch(
|
||||||
<div
|
<div
|
||||||
class="col row justify-center q-col-gutter-sml"
|
class="col row justify-center q-col-gutter-sml"
|
||||||
style="max-height: 50%"
|
style="max-height: 50%"
|
||||||
|
v-if="!ocr"
|
||||||
>
|
>
|
||||||
<q-avatar
|
<q-avatar
|
||||||
style="border: 1px dashed; border-color: black"
|
style="border: 1px dashed; border-color: black"
|
||||||
|
|
@ -469,7 +234,10 @@ watch(
|
||||||
icon="mdi-image-outline"
|
icon="mdi-image-outline"
|
||||||
/>
|
/>
|
||||||
</div>
|
</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
|
<q-select
|
||||||
outlined
|
outlined
|
||||||
clearable
|
clearable
|
||||||
|
|
@ -601,7 +369,7 @@ watch(
|
||||||
class="col-12"
|
class="col-12"
|
||||||
:disable="!readonly"
|
:disable="!readonly"
|
||||||
:label="$t('customer.table.fullname')"
|
: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
|
<q-input
|
||||||
|
|
@ -655,7 +423,7 @@ watch(
|
||||||
class="col-12"
|
class="col-12"
|
||||||
:label="$t('customer.table.fullnameEN')"
|
:label="$t('customer.table.fullnameEN')"
|
||||||
:disable="!readonly"
|
: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
|
<q-select
|
||||||
|
|
@ -878,6 +646,5 @@ watch(
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
</template>
|
|
||||||
|
|
||||||
<style scoped></style>
|
<style scoped></style>
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue