feat: employee form (passport, visa, work, other)
This commit is contained in:
puriphatt
parent
6057ce0c0f
commit
2b56c26e1b
7 changed files with 1542 additions and 266 deletions
|
|
@ -75,228 +75,232 @@ watch(provinceId, fetchDistrict);
|
|||
watch(districtId, fetchSubDistrict);
|
||||
</script>
|
||||
<template>
|
||||
<div class="col-12 app-text-muted row items-center">
|
||||
• {{ title || $t('formDialogTitlePersonnelAddress') }}
|
||||
<div
|
||||
v-if="employee"
|
||||
class="q-ml-lg surface-3 q-px-sm q-py-xs row"
|
||||
style="border-radius: var(--radius-3)"
|
||||
>
|
||||
<span
|
||||
class="q-px-sm q-mr-lg rounded cursor-pointer"
|
||||
:class="{ dark: $q.dark.isActive, 'active-addr': sameWithEmployer }"
|
||||
@click="sameWithEmployer = true"
|
||||
<div class="col-12">
|
||||
<div class="col-12 app-text-muted row items-center q-mb-md">
|
||||
• {{ title || $t('formDialogTitlePersonnelAddress') }}
|
||||
<div
|
||||
v-if="employee"
|
||||
class="q-ml-lg surface-3 q-px-sm q-py-xs row"
|
||||
style="border-radius: var(--radius-3)"
|
||||
>
|
||||
เลือกที่อยู่ตามนายจ้าง
|
||||
</span>
|
||||
<span
|
||||
class="q-px-sm rounded cursor-pointer"
|
||||
:class="{ dark: $q.dark.isActive, 'active-addr': !sameWithEmployer }"
|
||||
@click="sameWithEmployer = false"
|
||||
>
|
||||
กำหนดเอง
|
||||
</span>
|
||||
<span
|
||||
class="q-px-sm q-mr-lg rounded cursor-pointer"
|
||||
:class="{ dark: $q.dark.isActive, 'active-addr': sameWithEmployer }"
|
||||
@click="sameWithEmployer = true"
|
||||
>
|
||||
{{ $t('formDialogToggleSameAddress') }}
|
||||
</span>
|
||||
<span
|
||||
class="q-px-sm rounded cursor-pointer"
|
||||
:class="{ dark: $q.dark.isActive, 'active-addr': !sameWithEmployer }"
|
||||
@click="sameWithEmployer = false"
|
||||
>
|
||||
{{ $t('formDialogToggleCustomAddress') }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 row q-col-gutter-y-md">
|
||||
<div class="col-3 q-pl-xl app-text-muted">
|
||||
{{ addressTitle || $t('formDialogTitleAddressPure') }}
|
||||
</div>
|
||||
<div class="col-9 row q-col-gutter-md">
|
||||
<q-input
|
||||
for="input-address"
|
||||
:dense="dense"
|
||||
:outlined="readonly ? false : outlined"
|
||||
:readonly="readonly || sameWithEmployer"
|
||||
:borderless="readonly"
|
||||
hide-bottom-space
|
||||
:label="$t('address')"
|
||||
class="col-12"
|
||||
v-model="address"
|
||||
lazy-rules
|
||||
:rules="[
|
||||
(val) =>
|
||||
(val && val.length > 0) || $t('formDialogInputAddressValidate'),
|
||||
]"
|
||||
/>
|
||||
<q-select
|
||||
id="select-province"
|
||||
:dense="dense"
|
||||
:readonly="readonly || sameWithEmployer"
|
||||
:outlined="readonly ? false : outlined"
|
||||
:hide-dropdown-icon="readonly || sameWithEmployer"
|
||||
:borderless="readonly"
|
||||
hide-bottom-space
|
||||
emit-value
|
||||
map-options
|
||||
v-model="provinceId"
|
||||
option-value="id"
|
||||
option-label="name"
|
||||
:label="$t('province')"
|
||||
class="col-3"
|
||||
:options="addrOptions.provinceOps"
|
||||
lazy-rules
|
||||
:rules="[
|
||||
(val) =>
|
||||
(val && val.length > 0) || $t('formDialogInputProvinceValidate'),
|
||||
]"
|
||||
@update:model-value="districtId = subDistrictId = zipCode = null"
|
||||
/>
|
||||
<q-select
|
||||
id="select-district"
|
||||
:dense="dense"
|
||||
:readonly="readonly || sameWithEmployer"
|
||||
:outlined="readonly ? false : outlined"
|
||||
:hide-dropdown-icon="readonly || sameWithEmployer"
|
||||
:borderless="readonly"
|
||||
hide-bottom-space
|
||||
emit-value
|
||||
map-options
|
||||
v-model="districtId"
|
||||
option-value="id"
|
||||
option-label="name"
|
||||
:label="$t('district')"
|
||||
class="col-3"
|
||||
:options="addrOptions.districtOps"
|
||||
lazy-rules
|
||||
:rules="[
|
||||
(val) =>
|
||||
(val && val.length > 0) || $t('formDialogInputDistrictValidate'),
|
||||
]"
|
||||
@update:model-value="subDistrictId = zipCode = null"
|
||||
/>
|
||||
<q-select
|
||||
id="select-sub-district"
|
||||
:dense="dense"
|
||||
:readonly="readonly || sameWithEmployer"
|
||||
:outlined="readonly ? false : outlined"
|
||||
:hide-dropdown-icon="readonly || sameWithEmployer"
|
||||
:borderless="readonly"
|
||||
hide-bottom-space
|
||||
emit-value
|
||||
map-options
|
||||
v-model="subDistrictId"
|
||||
option-value="id"
|
||||
option-label="name"
|
||||
:label="$t('subDistrict')"
|
||||
class="col-3"
|
||||
:options="addrOptions.subDistrictOps"
|
||||
lazy-rules
|
||||
:rules="[
|
||||
(val) =>
|
||||
(val && val.length > 0) || $t('formDialogInputSubDistrictValidate'),
|
||||
]"
|
||||
@update:model-value="(v: string) => selectSubDistrict(v)"
|
||||
/>
|
||||
<q-input
|
||||
for="input-zip-code"
|
||||
:dense="dense"
|
||||
:outlined="readonly ? false : outlined"
|
||||
:borderless="readonly"
|
||||
readonly
|
||||
:label="$t('zipCode')"
|
||||
class="col-3"
|
||||
v-model="zipCode"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-3 q-pl-xl app-text-muted">
|
||||
{{ addressTitleEN || $t('formDialogTitleAddressPure') }}
|
||||
</div>
|
||||
<div class="col-9 row q-col-gutter-md">
|
||||
<q-input
|
||||
for="input-address-en"
|
||||
:dense="dense"
|
||||
:readonly="readonly || sameWithEmployer"
|
||||
:outlined="readonly ? false : outlined"
|
||||
:borderless="readonly"
|
||||
hide-bottom-space
|
||||
:label="$t('address')"
|
||||
class="col-12"
|
||||
v-model="addressEN"
|
||||
lazy-rules
|
||||
:rules="[
|
||||
(val) =>
|
||||
(val && val.length > 0) || $t('formDialogInputAddressValidate'),
|
||||
]"
|
||||
/>
|
||||
<q-select
|
||||
id="select-province-en"
|
||||
:dense="dense"
|
||||
:readonly="readonly || sameWithEmployer"
|
||||
:outlined="readonly ? false : outlined"
|
||||
:borderless="readonly"
|
||||
:hide-dropdown-icon="readonly || sameWithEmployer"
|
||||
emit-value
|
||||
map-options
|
||||
v-model="provinceId"
|
||||
option-value="id"
|
||||
option-label="nameEN"
|
||||
:label="$t('province')"
|
||||
class="col-3"
|
||||
:options="addrOptions.provinceOps"
|
||||
lazy-rules
|
||||
:rules="[
|
||||
(val) =>
|
||||
(val && val.length > 0) || $t('formDialogInputProvinceValidate'),
|
||||
]"
|
||||
@update:model-value="districtId = subDistrictId = zipCode = null"
|
||||
/>
|
||||
<q-select
|
||||
id="select-district-en"
|
||||
:dense="dense"
|
||||
:readonly="readonly || sameWithEmployer"
|
||||
:outlined="readonly ? false : outlined"
|
||||
:borderless="readonly"
|
||||
:hide-dropdown-icon="readonly || sameWithEmployer"
|
||||
emit-value
|
||||
map-options
|
||||
v-model="districtId"
|
||||
option-value="id"
|
||||
option-label="nameEN"
|
||||
:label="$t('district')"
|
||||
class="col-3"
|
||||
:options="addrOptions.districtOps"
|
||||
lazy-rules
|
||||
:rules="[
|
||||
(val) =>
|
||||
(val && val.length > 0) || $t('formDialogInputDistrictValidate'),
|
||||
]"
|
||||
@update:model-value="subDistrictId = zipCode = null"
|
||||
/>
|
||||
<q-select
|
||||
id="select-sub-district-en"
|
||||
:dense="dense"
|
||||
:readonly="readonly || sameWithEmployer"
|
||||
:outlined="readonly ? false : outlined"
|
||||
:borderless="readonly"
|
||||
:hide-dropdown-icon="readonly || sameWithEmployer"
|
||||
emit-value
|
||||
map-options
|
||||
v-model="subDistrictId"
|
||||
option-value="id"
|
||||
option-label="nameEN"
|
||||
:label="$t('subDistrict')"
|
||||
class="col-3"
|
||||
:options="addrOptions.subDistrictOps"
|
||||
lazy-rules
|
||||
:rules="[
|
||||
(val) =>
|
||||
(val && val.length > 0) || $t('formDialogInputSubDistrictValidate'),
|
||||
]"
|
||||
@update:model-value="(v: string) => selectSubDistrict(v)"
|
||||
/>
|
||||
<q-input
|
||||
for="input-zip-code"
|
||||
:dense="dense"
|
||||
:outlined="readonly ? false : outlined"
|
||||
:borderless="readonly"
|
||||
readonly
|
||||
zip="zip-en"
|
||||
:label="$t('zipCode')"
|
||||
class="col-3"
|
||||
v-model="zipCode"
|
||||
/>
|
||||
<div class="col-12 row q-col-gutter-y-md">
|
||||
<div class="col-3 q-pl-xl app-text-muted">
|
||||
{{ addressTitle || $t('formDialogTitleAddressPure') }}
|
||||
</div>
|
||||
<div class="col-9 row q-col-gutter-md">
|
||||
<q-input
|
||||
for="input-address"
|
||||
:dense="dense"
|
||||
:outlined="readonly ? false : outlined"
|
||||
:readonly="readonly || sameWithEmployer"
|
||||
:borderless="readonly"
|
||||
hide-bottom-space
|
||||
:label="$t('address')"
|
||||
class="col-12"
|
||||
v-model="address"
|
||||
lazy-rules
|
||||
:rules="[
|
||||
(val) =>
|
||||
(val && val.length > 0) || $t('formDialogInputAddressValidate'),
|
||||
]"
|
||||
/>
|
||||
<q-select
|
||||
id="select-province"
|
||||
:dense="dense"
|
||||
:readonly="readonly || sameWithEmployer"
|
||||
:outlined="readonly ? false : outlined"
|
||||
:hide-dropdown-icon="readonly || sameWithEmployer"
|
||||
:borderless="readonly"
|
||||
hide-bottom-space
|
||||
emit-value
|
||||
map-options
|
||||
v-model="provinceId"
|
||||
option-value="id"
|
||||
option-label="name"
|
||||
:label="$t('province')"
|
||||
class="col-3"
|
||||
:options="addrOptions.provinceOps"
|
||||
lazy-rules
|
||||
:rules="[
|
||||
(val) =>
|
||||
(val && val.length > 0) || $t('formDialogInputProvinceValidate'),
|
||||
]"
|
||||
@update:model-value="districtId = subDistrictId = zipCode = null"
|
||||
/>
|
||||
<q-select
|
||||
id="select-district"
|
||||
:dense="dense"
|
||||
:readonly="readonly || sameWithEmployer"
|
||||
:outlined="readonly ? false : outlined"
|
||||
:hide-dropdown-icon="readonly || sameWithEmployer"
|
||||
:borderless="readonly"
|
||||
hide-bottom-space
|
||||
emit-value
|
||||
map-options
|
||||
v-model="districtId"
|
||||
option-value="id"
|
||||
option-label="name"
|
||||
:label="$t('district')"
|
||||
class="col-3"
|
||||
:options="addrOptions.districtOps"
|
||||
lazy-rules
|
||||
:rules="[
|
||||
(val) =>
|
||||
(val && val.length > 0) || $t('formDialogInputDistrictValidate'),
|
||||
]"
|
||||
@update:model-value="subDistrictId = zipCode = null"
|
||||
/>
|
||||
<q-select
|
||||
id="select-sub-district"
|
||||
:dense="dense"
|
||||
:readonly="readonly || sameWithEmployer"
|
||||
:outlined="readonly ? false : outlined"
|
||||
:hide-dropdown-icon="readonly || sameWithEmployer"
|
||||
:borderless="readonly"
|
||||
hide-bottom-space
|
||||
emit-value
|
||||
map-options
|
||||
v-model="subDistrictId"
|
||||
option-value="id"
|
||||
option-label="name"
|
||||
:label="$t('subDistrict')"
|
||||
class="col-3"
|
||||
:options="addrOptions.subDistrictOps"
|
||||
lazy-rules
|
||||
:rules="[
|
||||
(val) =>
|
||||
(val && val.length > 0) ||
|
||||
$t('formDialogInputSubDistrictValidate'),
|
||||
]"
|
||||
@update:model-value="(v: string) => selectSubDistrict(v)"
|
||||
/>
|
||||
<q-input
|
||||
for="input-zip-code"
|
||||
:dense="dense"
|
||||
:outlined="readonly ? false : outlined"
|
||||
:borderless="readonly"
|
||||
readonly
|
||||
:label="$t('zipCode')"
|
||||
class="col-3"
|
||||
v-model="zipCode"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-3 q-pl-xl app-text-muted">
|
||||
{{ addressTitleEN || $t('formDialogTitleAddressPureEN') }}
|
||||
</div>
|
||||
<div class="col-9 row q-col-gutter-md">
|
||||
<q-input
|
||||
for="input-address-en"
|
||||
:dense="dense"
|
||||
:readonly="readonly || sameWithEmployer"
|
||||
:outlined="readonly ? false : outlined"
|
||||
:borderless="readonly"
|
||||
hide-bottom-space
|
||||
:label="$t('address')"
|
||||
class="col-12"
|
||||
v-model="addressEN"
|
||||
lazy-rules
|
||||
:rules="[
|
||||
(val) =>
|
||||
(val && val.length > 0) || $t('formDialogInputAddressValidate'),
|
||||
]"
|
||||
/>
|
||||
<q-select
|
||||
id="select-province-en"
|
||||
:dense="dense"
|
||||
:readonly="readonly || sameWithEmployer"
|
||||
:outlined="readonly ? false : outlined"
|
||||
:borderless="readonly"
|
||||
:hide-dropdown-icon="readonly || sameWithEmployer"
|
||||
emit-value
|
||||
map-options
|
||||
v-model="provinceId"
|
||||
option-value="id"
|
||||
option-label="nameEN"
|
||||
:label="$t('province')"
|
||||
class="col-3"
|
||||
:options="addrOptions.provinceOps"
|
||||
lazy-rules
|
||||
:rules="[
|
||||
(val) =>
|
||||
(val && val.length > 0) || $t('formDialogInputProvinceValidate'),
|
||||
]"
|
||||
@update:model-value="districtId = subDistrictId = zipCode = null"
|
||||
/>
|
||||
<q-select
|
||||
id="select-district-en"
|
||||
:dense="dense"
|
||||
:readonly="readonly || sameWithEmployer"
|
||||
:outlined="readonly ? false : outlined"
|
||||
:borderless="readonly"
|
||||
:hide-dropdown-icon="readonly || sameWithEmployer"
|
||||
emit-value
|
||||
map-options
|
||||
v-model="districtId"
|
||||
option-value="id"
|
||||
option-label="nameEN"
|
||||
:label="$t('district')"
|
||||
class="col-3"
|
||||
:options="addrOptions.districtOps"
|
||||
lazy-rules
|
||||
:rules="[
|
||||
(val) =>
|
||||
(val && val.length > 0) || $t('formDialogInputDistrictValidate'),
|
||||
]"
|
||||
@update:model-value="subDistrictId = zipCode = null"
|
||||
/>
|
||||
<q-select
|
||||
id="select-sub-district-en"
|
||||
:dense="dense"
|
||||
:readonly="readonly || sameWithEmployer"
|
||||
:outlined="readonly ? false : outlined"
|
||||
:borderless="readonly"
|
||||
:hide-dropdown-icon="readonly || sameWithEmployer"
|
||||
emit-value
|
||||
map-options
|
||||
v-model="subDistrictId"
|
||||
option-value="id"
|
||||
option-label="nameEN"
|
||||
:label="$t('subDistrict')"
|
||||
class="col-3"
|
||||
:options="addrOptions.subDistrictOps"
|
||||
lazy-rules
|
||||
:rules="[
|
||||
(val) =>
|
||||
(val && val.length > 0) ||
|
||||
$t('formDialogInputSubDistrictValidate'),
|
||||
]"
|
||||
@update:model-value="(v: string) => selectSubDistrict(v)"
|
||||
/>
|
||||
<q-input
|
||||
for="input-zip-code"
|
||||
:dense="dense"
|
||||
:outlined="readonly ? false : outlined"
|
||||
:borderless="readonly"
|
||||
readonly
|
||||
zip="zip-en"
|
||||
:label="$t('zipCode')"
|
||||
class="col-3"
|
||||
v-model="zipCode"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<q-separator
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue