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
|
||||
|
|
|
|||
|
|
@ -6,11 +6,11 @@ const taxNo = defineModel<string | null | undefined>('taxNo');
|
|||
const employerID = defineModel<string>('employerID');
|
||||
|
||||
// employee
|
||||
const customerBranchId = defineModel<string>('customerBranchId');
|
||||
const employeeID = defineModel<string>('employeeID');
|
||||
const nrcNo = defineModel<string>('nrcNo');
|
||||
|
||||
defineProps<{
|
||||
title?: string;
|
||||
dense?: boolean;
|
||||
outlined?: boolean;
|
||||
readonly?: boolean;
|
||||
|
|
@ -79,12 +79,12 @@ defineProps<{
|
|||
hide-bottom-space
|
||||
class="col-3"
|
||||
:label="$t('formDialogEmployerID')"
|
||||
v-model="employerID"
|
||||
v-model="customerBranchId"
|
||||
/>
|
||||
<q-input
|
||||
:dense="dense"
|
||||
:outlined="!readonly"
|
||||
:readonly="readonly"
|
||||
:readonly="true"
|
||||
:borderless="readonly"
|
||||
hide-bottom-space
|
||||
class="col-3"
|
||||
|
|
|
|||
163
src/components/03_customer-management/FormEmployeeOther.vue
Normal file
163
src/components/03_customer-management/FormEmployeeOther.vue
Normal file
|
|
@ -0,0 +1,163 @@
|
|||
<script setup lang="ts">
|
||||
import { EmployeeOtherCreate } from 'stores/employee/types';
|
||||
|
||||
defineProps<{
|
||||
dense?: boolean;
|
||||
outlined?: boolean;
|
||||
readonly?: boolean;
|
||||
separator?: boolean;
|
||||
employee?: boolean;
|
||||
}>();
|
||||
const employeeOther = defineModel<EmployeeOtherCreate>('employeeOther');
|
||||
</script>
|
||||
<template>
|
||||
<div class="col-12" v-if="employeeOther">
|
||||
<div class="col-12 app-text-muted row items-center q-mb-md">
|
||||
• {{ $t('formDialogTitleFamilyHistory') }}
|
||||
</div>
|
||||
|
||||
<div class="col-12 row q-col-gutter-y-md">
|
||||
<div class="col-3 q-pl-xl"></div>
|
||||
<div class="col-9 row q-col-gutter-md">
|
||||
<q-input
|
||||
for="input-citizenId"
|
||||
:dense="dense"
|
||||
:outlined="readonly ? false : outlined"
|
||||
:readonly="readonly"
|
||||
:borderless="readonly"
|
||||
hide-bottom-space
|
||||
:label="$t('formDialogInputCitizenId')"
|
||||
class="col"
|
||||
v-model="employeeOther.citizenId"
|
||||
lazy-rules
|
||||
/>
|
||||
</div>
|
||||
<div class="col-3 q-pl-xl app-text-muted">
|
||||
{{ $t('formDialogTitleFamilyHistoryDad') }}
|
||||
</div>
|
||||
<div class="col-9 row q-col-gutter-md">
|
||||
<q-input
|
||||
for="input-father-first-name"
|
||||
:dense="dense"
|
||||
:outlined="readonly ? false : outlined"
|
||||
:readonly="readonly"
|
||||
:borderless="readonly"
|
||||
hide-bottom-space
|
||||
class="col-3"
|
||||
:label="$t('formDialogInputFirstName')"
|
||||
v-model="employeeOther.fatherFirstName"
|
||||
/>
|
||||
<q-input
|
||||
for="input-father-last-name"
|
||||
:dense="dense"
|
||||
:outlined="readonly ? false : outlined"
|
||||
:readonly="readonly"
|
||||
:borderless="readonly"
|
||||
hide-bottom-space
|
||||
class="col-3"
|
||||
:label="$t('formDialogInputLastName')"
|
||||
v-model="employeeOther.fatherLastName"
|
||||
/>
|
||||
<q-input
|
||||
for="input-father-first-name-en"
|
||||
:dense="dense"
|
||||
:outlined="readonly ? false : outlined"
|
||||
:readonly="readonly"
|
||||
:borderless="readonly"
|
||||
hide-bottom-space
|
||||
class="col-3"
|
||||
:label="$t('formDialogInputFirstNameEN')"
|
||||
v-model="employeeOther.fatherFirstNameEN"
|
||||
/>
|
||||
<q-input
|
||||
for="input-father-last-name-en"
|
||||
:dense="dense"
|
||||
:outlined="readonly ? false : outlined"
|
||||
:readonly="readonly"
|
||||
:borderless="readonly"
|
||||
hide-bottom-space
|
||||
class="col-3"
|
||||
:label="$t('formDialogInputLastNameEN')"
|
||||
v-model="employeeOther.fatherLastNameEN"
|
||||
/>
|
||||
<q-input
|
||||
for="input-father-birthplace"
|
||||
:dense="dense"
|
||||
:outlined="readonly ? false : outlined"
|
||||
:readonly="readonly"
|
||||
:borderless="readonly"
|
||||
hide-bottom-space
|
||||
class="col-6"
|
||||
:label="$t('formDialogInputFamilyBirthPlace')"
|
||||
v-model="employeeOther.birthPlace"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-12" />
|
||||
<div class="col-3 q-pl-xl app-text-muted">
|
||||
{{ $t('formDialogTitleFamilyHistoryMom') }}
|
||||
</div>
|
||||
<div class="col-9 row q-col-gutter-md">
|
||||
<q-input
|
||||
for="input-mother-first-name"
|
||||
:dense="dense"
|
||||
:outlined="readonly ? false : outlined"
|
||||
:readonly="readonly"
|
||||
:borderless="readonly"
|
||||
hide-bottom-space
|
||||
class="col-3"
|
||||
:label="$t('formDialogInputFirstName')"
|
||||
v-model="employeeOther.motherFirstName"
|
||||
/>
|
||||
<q-input
|
||||
for="input-mother-last-name"
|
||||
:dense="dense"
|
||||
:outlined="readonly ? false : outlined"
|
||||
:readonly="readonly"
|
||||
:borderless="readonly"
|
||||
hide-bottom-space
|
||||
class="col-3"
|
||||
:label="$t('formDialogInputLastName')"
|
||||
v-model="employeeOther.motherLastName"
|
||||
/>
|
||||
<q-input
|
||||
for="input-mother-first-name-en"
|
||||
:dense="dense"
|
||||
:outlined="readonly ? false : outlined"
|
||||
:readonly="readonly"
|
||||
:borderless="readonly"
|
||||
hide-bottom-space
|
||||
class="col-3"
|
||||
:label="$t('formDialogInputFirstNameEN')"
|
||||
v-model="employeeOther.motherFirstNameEN"
|
||||
/>
|
||||
<q-input
|
||||
for="input-mother-last-name-en"
|
||||
:dense="dense"
|
||||
:outlined="readonly ? false : outlined"
|
||||
:readonly="readonly"
|
||||
:borderless="readonly"
|
||||
hide-bottom-space
|
||||
class="col-3"
|
||||
:label="$t('formDialogInputLastNameEN')"
|
||||
v-model="employeeOther.motherLastNameEN"
|
||||
/>
|
||||
<q-input
|
||||
for="input-mother-birthplace"
|
||||
:dense="dense"
|
||||
:outlined="readonly ? false : outlined"
|
||||
:readonly="readonly"
|
||||
:borderless="readonly"
|
||||
hide-bottom-space
|
||||
class="col-6"
|
||||
:label="$t('formDialogInputFamilyBirthPlace')"
|
||||
v-model="employeeOther.birthPlace"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<q-separator
|
||||
v-if="separator"
|
||||
class="col-12 q-mb-md"
|
||||
style="padding-block: 0.5px; margin-top: 32px"
|
||||
/>
|
||||
</template>
|
||||
223
src/components/03_customer-management/FormEmployeePassport.vue
Normal file
223
src/components/03_customer-management/FormEmployeePassport.vue
Normal file
|
|
@ -0,0 +1,223 @@
|
|||
<script setup lang="ts">
|
||||
import { onMounted, reactive } from 'vue';
|
||||
import { dateFormat } from 'src/utils/datetime';
|
||||
import useAddressStore, {
|
||||
District,
|
||||
Province,
|
||||
SubDistrict,
|
||||
} from 'src/stores/address';
|
||||
|
||||
const adrressStore = useAddressStore();
|
||||
|
||||
const addrOptions = reactive<{
|
||||
provinceOps: Province[];
|
||||
districtOps: District[];
|
||||
subDistrictOps: SubDistrict[];
|
||||
}>({
|
||||
provinceOps: [],
|
||||
districtOps: [],
|
||||
subDistrictOps: [],
|
||||
});
|
||||
|
||||
const passportType = defineModel<string>('passportType');
|
||||
const passportNumber = defineModel<string>('passportNumber');
|
||||
const passportIssueDate = defineModel<Date>('passportIssueDate');
|
||||
const passportExpiryDate = defineModel<Date>('passportExpiryDate');
|
||||
const passportIssuingCountry = defineModel<string>('passportIssuingCountry');
|
||||
const passportIssuingPlace = defineModel<string>('passportIssuingPlace');
|
||||
const previousPassportReference = defineModel<string>(
|
||||
'previousPassportReference',
|
||||
);
|
||||
|
||||
defineProps<{
|
||||
title?: string;
|
||||
dense?: boolean;
|
||||
outlined?: boolean;
|
||||
readonly?: boolean;
|
||||
separator?: boolean;
|
||||
typeCustomer?: string;
|
||||
}>();
|
||||
|
||||
async function fetchProvince() {
|
||||
const result = await adrressStore.fetchProvince();
|
||||
|
||||
if (result) addrOptions.provinceOps = result;
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
await fetchProvince();
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="col-3 app-text-muted">• {{ $t(`formDialogTitlePassport`) }}</div>
|
||||
<div class="col-9 row q-col-gutter-md">
|
||||
<q-select
|
||||
id="select-positionName"
|
||||
:dense="dense"
|
||||
:readonly="readonly"
|
||||
:outlined="readonly ? false : outlined"
|
||||
:hide-dropdown-icon="readonly"
|
||||
:borderless="readonly"
|
||||
hide-bottom-space
|
||||
emit-value
|
||||
map-options
|
||||
v-model="passportType"
|
||||
option-value="id"
|
||||
option-label="name"
|
||||
:label="$t('formDialogInputPassportType')"
|
||||
class="col-3"
|
||||
:options="addrOptions.provinceOps"
|
||||
lazy-rules
|
||||
/>
|
||||
<q-input
|
||||
for="input-ownerName"
|
||||
:dense="dense"
|
||||
:outlined="!readonly"
|
||||
:readonly="readonly"
|
||||
:borderless="readonly"
|
||||
hide-bottom-space
|
||||
class="col-3"
|
||||
:label="$t('formDialogInputPassportNo')"
|
||||
v-model="passportNumber"
|
||||
/>
|
||||
<q-input
|
||||
for="input-ownerName"
|
||||
:dense="dense"
|
||||
:outlined="!readonly"
|
||||
:readonly="readonly"
|
||||
:borderless="readonly"
|
||||
hide-bottom-space
|
||||
class="col-6"
|
||||
:label="$t('formDialogInputPassportRef')"
|
||||
v-model="previousPassportReference"
|
||||
/>
|
||||
<q-input
|
||||
for="input-ownerName"
|
||||
:dense="dense"
|
||||
:outlined="!readonly"
|
||||
:readonly="readonly"
|
||||
:borderless="readonly"
|
||||
hide-bottom-space
|
||||
class="col-3"
|
||||
:label="$t('formDialogInputWPasspornPlace')"
|
||||
v-model="passportIssuingPlace"
|
||||
/>
|
||||
<q-select
|
||||
id="select-jobType"
|
||||
:dense="dense"
|
||||
:readonly="readonly"
|
||||
:outlined="readonly ? false : outlined"
|
||||
:hide-dropdown-icon="readonly"
|
||||
:borderless="readonly"
|
||||
hide-bottom-space
|
||||
emit-value
|
||||
map-options
|
||||
v-model="passportIssuingCountry"
|
||||
option-value="id"
|
||||
option-label="nameEN"
|
||||
:label="$t('formDialogInputPassportCountry')"
|
||||
class="col-3"
|
||||
:options="addrOptions.provinceOps"
|
||||
lazy-rules
|
||||
/>
|
||||
<VueDatePicker
|
||||
id="date-picker-workEndDate"
|
||||
utc
|
||||
autoApply
|
||||
:teleport="true"
|
||||
v-model="passportIssueDate"
|
||||
:locale="'th'"
|
||||
:enableTimePicker="false"
|
||||
:disabled="readonly"
|
||||
class="col-3"
|
||||
>
|
||||
<template #year="{ value }">
|
||||
{{ value + 543 }}
|
||||
</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
id="input-birth-date"
|
||||
:label="$t('formDialogInputPassportIssuance')"
|
||||
:dense="dense"
|
||||
:outlined="readonly ? false : outlined"
|
||||
:readonly="readonly"
|
||||
:borderless="readonly"
|
||||
:model-value="passportIssueDate ? dateFormat(passportIssueDate) : ''"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon
|
||||
size="xs"
|
||||
name="mdi-calendar-blank-outline"
|
||||
class="cursor-pointer"
|
||||
color="positive"
|
||||
/>
|
||||
</template>
|
||||
<template v-slot:append>
|
||||
<q-icon
|
||||
v-if="passportIssueDate && !readonly"
|
||||
name="mdi-close"
|
||||
class="cursor-pointer"
|
||||
size="xs"
|
||||
@click="passportIssueDate = undefined"
|
||||
/>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</VueDatePicker>
|
||||
<VueDatePicker
|
||||
id="date-picker-workPermitIssuDate"
|
||||
utc
|
||||
autoApply
|
||||
:teleport="true"
|
||||
v-model="passportExpiryDate"
|
||||
:locale="'th'"
|
||||
:enableTimePicker="false"
|
||||
:disabled="readonly"
|
||||
class="col-3"
|
||||
>
|
||||
<template #year="{ value }">
|
||||
{{ value + 543 }}
|
||||
</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
id="input-birth-date"
|
||||
:label="$t('formDialogInputPassportExpire')"
|
||||
:dense="dense"
|
||||
:outlined="readonly ? false : outlined"
|
||||
:readonly="readonly"
|
||||
:borderless="readonly"
|
||||
:model-value="
|
||||
passportExpiryDate ? dateFormat(passportExpiryDate) : ''
|
||||
"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon
|
||||
size="xs"
|
||||
name="mdi-calendar-blank-outline"
|
||||
class="cursor-pointer"
|
||||
color="positive"
|
||||
/>
|
||||
</template>
|
||||
<template v-slot:append>
|
||||
<q-icon
|
||||
v-if="passportExpiryDate && !readonly"
|
||||
name="mdi-close"
|
||||
class="cursor-pointer"
|
||||
size="xs"
|
||||
@click="passportExpiryDate = undefined"
|
||||
/>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</VueDatePicker>
|
||||
</div>
|
||||
|
||||
<q-separator
|
||||
v-if="separator"
|
||||
class="col-12 q-mt-xl q-mb-md"
|
||||
style="padding-block: 0.5px"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
290
src/components/03_customer-management/FormEmployeeVisa.vue
Normal file
290
src/components/03_customer-management/FormEmployeeVisa.vue
Normal file
|
|
@ -0,0 +1,290 @@
|
|||
<script setup lang="ts">
|
||||
import { onMounted, reactive } from 'vue';
|
||||
import { dateFormat } from 'src/utils/datetime';
|
||||
import useAddressStore, {
|
||||
District,
|
||||
Province,
|
||||
SubDistrict,
|
||||
} from 'src/stores/address';
|
||||
|
||||
const adrressStore = useAddressStore();
|
||||
|
||||
const addrOptions = reactive<{
|
||||
provinceOps: Province[];
|
||||
districtOps: District[];
|
||||
subDistrictOps: SubDistrict[];
|
||||
}>({
|
||||
provinceOps: [],
|
||||
districtOps: [],
|
||||
subDistrictOps: [],
|
||||
});
|
||||
|
||||
const visaType = defineModel<string>('visaType');
|
||||
const visaNumber = defineModel<string>('visaNumber');
|
||||
const visaIssueDate = defineModel<Date>('visaIssueDate');
|
||||
const visaExpiryDate = defineModel<Date>('visaExpiryDate');
|
||||
const visaIssuingPlace = defineModel<string>('visaIssuingPlace');
|
||||
const visaStayUntilDate = defineModel<Date>('visaStayUntilDate');
|
||||
const tm6Number = defineModel<string>('tm6Number');
|
||||
const entryDate = defineModel<Date>('entryDate');
|
||||
|
||||
defineProps<{
|
||||
title?: string;
|
||||
dense?: boolean;
|
||||
outlined?: boolean;
|
||||
readonly?: boolean;
|
||||
separator?: boolean;
|
||||
typeCustomer?: string;
|
||||
}>();
|
||||
|
||||
async function fetchProvince() {
|
||||
const result = await adrressStore.fetchProvince();
|
||||
|
||||
if (result) addrOptions.provinceOps = result;
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
await fetchProvince();
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="col-3 app-text-muted">• {{ $t(`formDialogTitleVisa`) }}</div>
|
||||
<div class="col-9 row q-col-gutter-md">
|
||||
<q-select
|
||||
id="select-positionName"
|
||||
:dense="dense"
|
||||
:readonly="readonly"
|
||||
:outlined="readonly ? false : outlined"
|
||||
:hide-dropdown-icon="readonly"
|
||||
:borderless="readonly"
|
||||
hide-bottom-space
|
||||
emit-value
|
||||
map-options
|
||||
v-model="visaType"
|
||||
option-value="id"
|
||||
option-label="name"
|
||||
:label="$t('formDialogInputVisaType')"
|
||||
class="col-3"
|
||||
:options="addrOptions.provinceOps"
|
||||
lazy-rules
|
||||
/>
|
||||
<q-input
|
||||
for="input-ownerName"
|
||||
:dense="dense"
|
||||
:outlined="!readonly"
|
||||
:readonly="readonly"
|
||||
:borderless="readonly"
|
||||
hide-bottom-space
|
||||
class="col-3"
|
||||
:label="$t('formDialogInputVisaNo')"
|
||||
v-model="visaNumber"
|
||||
/>
|
||||
<VueDatePicker
|
||||
id="date-picker-workPermitIssuDate"
|
||||
utc
|
||||
autoApply
|
||||
:teleport="true"
|
||||
v-model="visaIssueDate"
|
||||
:locale="'th'"
|
||||
:enableTimePicker="false"
|
||||
:disabled="readonly"
|
||||
class="col-3"
|
||||
>
|
||||
<template #year="{ value }">
|
||||
{{ value + 543 }}
|
||||
</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
id="input-birth-date"
|
||||
:label="$t('formDialogInputVisaIssuance')"
|
||||
:dense="dense"
|
||||
:outlined="readonly ? false : outlined"
|
||||
:readonly="readonly"
|
||||
:borderless="readonly"
|
||||
:model-value="visaIssueDate ? dateFormat(visaIssueDate) : ''"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon
|
||||
size="xs"
|
||||
name="mdi-calendar-blank-outline"
|
||||
class="cursor-pointer"
|
||||
color="positive"
|
||||
/>
|
||||
</template>
|
||||
<template v-slot:append>
|
||||
<q-icon
|
||||
v-if="visaIssueDate && !readonly"
|
||||
name="mdi-close"
|
||||
class="cursor-pointer"
|
||||
size="xs"
|
||||
@click="visaIssueDate = undefined"
|
||||
/>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</VueDatePicker>
|
||||
<VueDatePicker
|
||||
id="date-picker-workPermitIssuDate"
|
||||
utc
|
||||
autoApply
|
||||
:teleport="true"
|
||||
v-model="visaExpiryDate"
|
||||
:locale="'th'"
|
||||
:enableTimePicker="false"
|
||||
:disabled="readonly"
|
||||
class="col-3"
|
||||
>
|
||||
<template #year="{ value }">
|
||||
{{ value + 543 }}
|
||||
</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
id="input-birth-date"
|
||||
:label="$t('formDialogInputVisaExpire')"
|
||||
:dense="dense"
|
||||
:outlined="readonly ? false : outlined"
|
||||
:readonly="readonly"
|
||||
:borderless="readonly"
|
||||
:model-value="visaExpiryDate ? dateFormat(visaExpiryDate) : ''"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon
|
||||
size="xs"
|
||||
name="mdi-calendar-blank-outline"
|
||||
class="cursor-pointer"
|
||||
color="positive"
|
||||
/>
|
||||
</template>
|
||||
<template v-slot:append>
|
||||
<q-icon
|
||||
v-if="visaExpiryDate && !readonly"
|
||||
name="mdi-close"
|
||||
class="cursor-pointer"
|
||||
size="xs"
|
||||
@click="visaExpiryDate = undefined"
|
||||
/>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</VueDatePicker>
|
||||
<q-input
|
||||
for="input-ownerName"
|
||||
:dense="dense"
|
||||
:outlined="!readonly"
|
||||
:readonly="readonly"
|
||||
:borderless="readonly"
|
||||
hide-bottom-space
|
||||
class="col-6"
|
||||
:label="$t('formDialogInputVisaPlace')"
|
||||
v-model="visaIssuingPlace"
|
||||
/>
|
||||
<VueDatePicker
|
||||
id="date-picker-workPermitIssuDate"
|
||||
utc
|
||||
autoApply
|
||||
:teleport="true"
|
||||
v-model="visaStayUntilDate"
|
||||
:locale="'th'"
|
||||
:enableTimePicker="false"
|
||||
:disabled="readonly"
|
||||
class="col-6"
|
||||
>
|
||||
<template #year="{ value }">
|
||||
{{ value + 543 }}
|
||||
</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
id="input-birth-date"
|
||||
:label="$t('formDialogInputVisaStayUntil')"
|
||||
:dense="dense"
|
||||
:outlined="readonly ? false : outlined"
|
||||
:readonly="readonly"
|
||||
:borderless="readonly"
|
||||
:model-value="visaStayUntilDate ? dateFormat(visaStayUntilDate) : ''"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon
|
||||
size="xs"
|
||||
name="mdi-calendar-blank-outline"
|
||||
class="cursor-pointer"
|
||||
color="positive"
|
||||
/>
|
||||
</template>
|
||||
<template v-slot:append>
|
||||
<q-icon
|
||||
v-if="visaStayUntilDate && !readonly"
|
||||
name="mdi-close"
|
||||
class="cursor-pointer"
|
||||
size="xs"
|
||||
@click="visaStayUntilDate = undefined"
|
||||
/>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</VueDatePicker>
|
||||
<q-input
|
||||
for="input-ownerName"
|
||||
:dense="dense"
|
||||
:outlined="!readonly"
|
||||
:readonly="readonly"
|
||||
:borderless="readonly"
|
||||
hide-bottom-space
|
||||
class="col-6"
|
||||
:label="$t('formDialogInputVisaTM6')"
|
||||
v-model="tm6Number"
|
||||
/>
|
||||
<VueDatePicker
|
||||
id="date-picker-workPermitIssuDate"
|
||||
utc
|
||||
autoApply
|
||||
:teleport="true"
|
||||
v-model="entryDate"
|
||||
:locale="'th'"
|
||||
:enableTimePicker="false"
|
||||
:disabled="readonly"
|
||||
class="col-6"
|
||||
>
|
||||
<template #year="{ value }">
|
||||
{{ value + 543 }}
|
||||
</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
id="input-birth-date"
|
||||
:label="$t('formDialogInputVisaEnter')"
|
||||
:dense="dense"
|
||||
:outlined="readonly ? false : outlined"
|
||||
:readonly="readonly"
|
||||
:borderless="readonly"
|
||||
:model-value="entryDate ? dateFormat(entryDate) : ''"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon
|
||||
size="xs"
|
||||
name="mdi-calendar-blank-outline"
|
||||
class="cursor-pointer"
|
||||
color="positive"
|
||||
/>
|
||||
</template>
|
||||
<template v-slot:append>
|
||||
<q-icon
|
||||
v-if="entryDate && !readonly"
|
||||
name="mdi-close"
|
||||
class="cursor-pointer"
|
||||
size="xs"
|
||||
@click="entryDate = undefined"
|
||||
/>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</VueDatePicker>
|
||||
</div>
|
||||
|
||||
<q-separator
|
||||
v-if="separator"
|
||||
class="col-12 q-mt-xl q-mb-md"
|
||||
style="padding-block: 0.5px"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
|
|
@ -0,0 +1,288 @@
|
|||
<script setup lang="ts">
|
||||
import { onMounted, reactive } from 'vue';
|
||||
import { dateFormat } from 'src/utils/datetime';
|
||||
import useAddressStore, {
|
||||
District,
|
||||
Province,
|
||||
SubDistrict,
|
||||
} from 'src/stores/address';
|
||||
|
||||
const adrressStore = useAddressStore();
|
||||
|
||||
const addrOptions = reactive<{
|
||||
provinceOps: Province[];
|
||||
districtOps: District[];
|
||||
subDistrictOps: SubDistrict[];
|
||||
}>({
|
||||
provinceOps: [],
|
||||
districtOps: [],
|
||||
subDistrictOps: [],
|
||||
});
|
||||
|
||||
const ownerName = defineModel<string>('ownerName');
|
||||
const positionName = defineModel<string>('positionName');
|
||||
const jobType = defineModel<string>('jobType');
|
||||
const workPlace = defineModel<string>('workPlace');
|
||||
const remark = defineModel<string>('remark');
|
||||
const workEndDate = defineModel<Date | null>('workEndDate');
|
||||
const workPermitNo = defineModel<string>('workPermitNo');
|
||||
const workPermitIssuDate = defineModel<Date | null>('workPermitIssuDate');
|
||||
const workPermitExpireDate = defineModel<Date | null>('workPermitExpireDate');
|
||||
|
||||
defineProps<{
|
||||
title?: string;
|
||||
dense?: boolean;
|
||||
outlined?: boolean;
|
||||
readonly?: boolean;
|
||||
separator?: boolean;
|
||||
typeCustomer?: string;
|
||||
}>();
|
||||
|
||||
async function fetchProvince() {
|
||||
const result = await adrressStore.fetchProvince();
|
||||
|
||||
if (result) addrOptions.provinceOps = result;
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
await fetchProvince();
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="col-3 app-text-muted">• {{ $t(`workHistory`) }}</div>
|
||||
<div class="col-9 row q-col-gutter-md">
|
||||
<q-input
|
||||
for="input-ownerName"
|
||||
:dense="dense"
|
||||
:outlined="!readonly"
|
||||
:readonly="readonly"
|
||||
:borderless="readonly"
|
||||
hide-bottom-space
|
||||
class="col-6"
|
||||
:label="$t('formDialogInputOwnerName')"
|
||||
v-model="ownerName"
|
||||
/>
|
||||
<q-select
|
||||
id="select-positionName"
|
||||
:dense="dense"
|
||||
:readonly="readonly"
|
||||
:outlined="readonly ? false : outlined"
|
||||
:hide-dropdown-icon="readonly"
|
||||
:borderless="readonly"
|
||||
hide-bottom-space
|
||||
emit-value
|
||||
map-options
|
||||
v-model="positionName"
|
||||
option-value="id"
|
||||
option-label="name"
|
||||
:label="$t('formDialogInputJobPosition')"
|
||||
class="col-6"
|
||||
:options="addrOptions.provinceOps"
|
||||
lazy-rules
|
||||
/>
|
||||
<q-select
|
||||
id="select-jobType"
|
||||
:dense="dense"
|
||||
:readonly="readonly"
|
||||
:outlined="readonly ? false : outlined"
|
||||
:hide-dropdown-icon="readonly"
|
||||
:borderless="readonly"
|
||||
hide-bottom-space
|
||||
emit-value
|
||||
map-options
|
||||
v-model="jobType"
|
||||
option-value="id"
|
||||
option-label="nameEN"
|
||||
:label="$t('formDialogInputJobType')"
|
||||
class="col-6"
|
||||
:options="addrOptions.provinceOps"
|
||||
lazy-rules
|
||||
/>
|
||||
<q-select
|
||||
id="select-province"
|
||||
:dense="dense"
|
||||
:readonly="readonly"
|
||||
:outlined="readonly ? false : outlined"
|
||||
:hide-dropdown-icon="readonly"
|
||||
:borderless="readonly"
|
||||
hide-bottom-space
|
||||
emit-value
|
||||
map-options
|
||||
v-model="workPlace"
|
||||
option-value="id"
|
||||
option-label="nameEN"
|
||||
:label="$t('formDialogInputWorkPlace')"
|
||||
class="col-6"
|
||||
:options="addrOptions.provinceOps"
|
||||
lazy-rules
|
||||
/>
|
||||
<q-input
|
||||
for="input-workEndDate"
|
||||
:label="$t('formDialogInputRemark')"
|
||||
:dense="dense"
|
||||
:outlined="!readonly"
|
||||
:readonly="readonly"
|
||||
:borderless="readonly"
|
||||
hide-bottom-space
|
||||
class="col-12"
|
||||
v-model="remark"
|
||||
type="textarea"
|
||||
/>
|
||||
<VueDatePicker
|
||||
id="date-picker-workEndDate"
|
||||
utc
|
||||
autoApply
|
||||
:teleport="true"
|
||||
v-model="workEndDate"
|
||||
:locale="'th'"
|
||||
:enableTimePicker="false"
|
||||
:disabled="readonly"
|
||||
class="col-6"
|
||||
>
|
||||
<template #year="{ value }">
|
||||
{{ value + 543 }}
|
||||
</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
id="input-birth-date"
|
||||
:label="$t('formDialogInputWorkUntil')"
|
||||
:dense="dense"
|
||||
:outlined="readonly ? false : outlined"
|
||||
:readonly="readonly"
|
||||
:borderless="readonly"
|
||||
:model-value="workEndDate ? dateFormat(workEndDate) : ''"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon
|
||||
size="xs"
|
||||
name="mdi-calendar-blank-outline"
|
||||
class="cursor-pointer"
|
||||
color="positive"
|
||||
/>
|
||||
</template>
|
||||
<template v-slot:append>
|
||||
<q-icon
|
||||
v-if="workEndDate && !readonly"
|
||||
name="mdi-close"
|
||||
class="cursor-pointer"
|
||||
size="xs"
|
||||
@click="workEndDate = undefined"
|
||||
/>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</VueDatePicker>
|
||||
<q-input
|
||||
for="input-workPermitNo"
|
||||
:dense="dense"
|
||||
:outlined="!readonly"
|
||||
:readonly="readonly"
|
||||
:borderless="readonly"
|
||||
hide-bottom-space
|
||||
class="col-6"
|
||||
:label="$t('formDialogInputWorkPermitNo')"
|
||||
v-model="workPermitNo"
|
||||
/>
|
||||
<VueDatePicker
|
||||
id="date-picker-workPermitIssuDate"
|
||||
utc
|
||||
autoApply
|
||||
:teleport="true"
|
||||
v-model="workPermitIssuDate"
|
||||
:locale="'th'"
|
||||
:enableTimePicker="false"
|
||||
:disabled="readonly"
|
||||
class="col-6"
|
||||
>
|
||||
<template #year="{ value }">
|
||||
{{ value + 543 }}
|
||||
</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
id="input-birth-date"
|
||||
:label="$t('formDialogInputWorkPermitIssueDate')"
|
||||
:dense="dense"
|
||||
:outlined="readonly ? false : outlined"
|
||||
:readonly="readonly"
|
||||
:borderless="readonly"
|
||||
:model-value="
|
||||
workPermitIssuDate ? dateFormat(workPermitIssuDate) : ''
|
||||
"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon
|
||||
size="xs"
|
||||
name="mdi-calendar-blank-outline"
|
||||
class="cursor-pointer"
|
||||
color="positive"
|
||||
/>
|
||||
</template>
|
||||
<template v-slot:append>
|
||||
<q-icon
|
||||
v-if="workPermitIssuDate && !readonly"
|
||||
name="mdi-close"
|
||||
class="cursor-pointer"
|
||||
size="xs"
|
||||
@click="workPermitIssuDate = undefined"
|
||||
/>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</VueDatePicker>
|
||||
<VueDatePicker
|
||||
id="date-picker-workPermitExpireDate"
|
||||
utc
|
||||
autoApply
|
||||
:teleport="true"
|
||||
v-model="workPermitExpireDate"
|
||||
:locale="'th'"
|
||||
:enableTimePicker="false"
|
||||
:disabled="readonly"
|
||||
class="col-6"
|
||||
>
|
||||
<template #year="{ value }">
|
||||
{{ value + 543 }}
|
||||
</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
id="input-birth-date"
|
||||
:label="$t('formDialogInputWorkPermitExpireDate')"
|
||||
:dense="dense"
|
||||
:outlined="readonly ? false : outlined"
|
||||
:readonly="readonly"
|
||||
:borderless="readonly"
|
||||
:model-value="
|
||||
workPermitExpireDate ? dateFormat(workPermitExpireDate) : ''
|
||||
"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon
|
||||
size="xs"
|
||||
name="mdi-calendar-blank-outline"
|
||||
class="cursor-pointer"
|
||||
color="positive"
|
||||
/>
|
||||
</template>
|
||||
<template v-slot:append>
|
||||
<q-icon
|
||||
v-if="workPermitExpireDate && !readonly"
|
||||
name="mdi-close"
|
||||
class="cursor-pointer"
|
||||
size="xs"
|
||||
@click="workPermitExpireDate = undefined"
|
||||
/>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</VueDatePicker>
|
||||
</div>
|
||||
|
||||
<q-separator
|
||||
v-if="separator"
|
||||
class="col-12 q-mt-xl q-mb-md"
|
||||
style="padding-block: 0.5px"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
Loading…
Add table
Add a link
Reference in a new issue