feat: agency personnel foreign address
Some checks failed
Spell Check / Spell Check with Typos (push) Failing after 5s
Some checks failed
Spell Check / Spell Check with Typos (push) Failing after 5s
This commit is contained in:
puriphatt
parent
7f56a6219a
commit
cdb38e301e
6 changed files with 323 additions and 36 deletions
|
|
@ -12,7 +12,7 @@ import { formatAddress } from 'src/utils/address';
|
|||
import useOptionStore from 'stores/options';
|
||||
|
||||
const optionStore = useOptionStore();
|
||||
defineProps<{
|
||||
const props = defineProps<{
|
||||
title?: string;
|
||||
addressTitle?: string;
|
||||
addressTitleEN?: string;
|
||||
|
|
@ -30,6 +30,7 @@ defineProps<{
|
|||
|
||||
useEmployment?: boolean;
|
||||
useWorkPlace?: boolean;
|
||||
useForeignAddress?: boolean;
|
||||
}>();
|
||||
|
||||
const addressStore = useAddressStore();
|
||||
|
|
@ -57,6 +58,25 @@ const subDistrictId = defineModel<string | null | undefined>('subDistrictId');
|
|||
const zipCode = defineModel<string | null | undefined>('zipCode');
|
||||
const sameWithEmployer = defineModel<boolean>('sameWithEmployer');
|
||||
|
||||
const provinceTextEN = defineModel<string | null | undefined>(
|
||||
'provinceTextEn',
|
||||
{
|
||||
default: '',
|
||||
},
|
||||
);
|
||||
const districtTextEN = defineModel<string | null | undefined>(
|
||||
'districtTextEn',
|
||||
{
|
||||
default: '',
|
||||
},
|
||||
);
|
||||
const subDistrictTextEN = defineModel<string | null | undefined>(
|
||||
'subDistrictTextEn',
|
||||
{
|
||||
default: '',
|
||||
},
|
||||
);
|
||||
|
||||
const homeCode = defineModel<string | null | undefined>('homeCode');
|
||||
const employmentOffice = defineModel<string | null | undefined>(
|
||||
'employmentOffice',
|
||||
|
|
@ -64,6 +84,7 @@ const employmentOffice = defineModel<string | null | undefined>(
|
|||
const employmentOfficeEN = defineModel<string | null | undefined>(
|
||||
'employmentOfficeEn',
|
||||
);
|
||||
const addressForeign = defineModel<boolean>('addressForeign');
|
||||
|
||||
const addrOptions = reactive<{
|
||||
provinceOps: Province[];
|
||||
|
|
@ -78,14 +99,18 @@ const addrOptions = reactive<{
|
|||
const area = ref<Office[]>([]);
|
||||
|
||||
const fullAddress = computed(() => {
|
||||
const province = provinceOptions.value.find((v) => v.id === provinceId.value);
|
||||
const district = districtOptions.value.find((v) => v.id === districtId.value);
|
||||
const sDistrict = subDistrictOptions.value.find(
|
||||
(v) => v.id === subDistrictId.value,
|
||||
);
|
||||
const province = addressForeign.value
|
||||
? { id: '1', name: provinceId.value }
|
||||
: provinceOptions.value.find((v) => v.id === provinceId.value);
|
||||
const district = addressForeign.value
|
||||
? { id: '1', name: districtId.value }
|
||||
: districtOptions.value.find((v) => v.id === districtId.value);
|
||||
const sDistrict = addressForeign.value
|
||||
? { id: '1', name: subDistrictId.value }
|
||||
: subDistrictOptions.value.find((v) => v.id === subDistrictId.value);
|
||||
|
||||
if (province && district && sDistrict) {
|
||||
const fullAddress = formatAddress({
|
||||
if (province?.name && district?.name && sDistrict?.name) {
|
||||
const fullAddressText = formatAddress({
|
||||
address: address.value,
|
||||
addressEN: addressEN.value,
|
||||
moo: moo.value ? moo.value : '',
|
||||
|
|
@ -97,21 +122,26 @@ const fullAddress = computed(() => {
|
|||
province: province as unknown as Province,
|
||||
district: district as unknown as District,
|
||||
subDistrict: sDistrict as unknown as SubDistrict,
|
||||
zipCode: addressForeign.value ? zipCode.value || ' ' : undefined,
|
||||
});
|
||||
return fullAddress;
|
||||
return fullAddressText;
|
||||
}
|
||||
return '-';
|
||||
});
|
||||
|
||||
const fullAddressEN = computed(() => {
|
||||
const province = provinceOptions.value.find((v) => v.id === provinceId.value);
|
||||
const district = districtOptions.value.find((v) => v.id === districtId.value);
|
||||
const sDistrict = subDistrictOptions.value.find(
|
||||
(v) => v.id === subDistrictId.value,
|
||||
);
|
||||
const province = addressForeign.value
|
||||
? { nameEN: provinceTextEN.value }
|
||||
: provinceOptions.value.find((v) => v.id === provinceId.value);
|
||||
const district = addressForeign.value
|
||||
? { nameEN: districtTextEN.value }
|
||||
: districtOptions.value.find((v) => v.id === districtId.value);
|
||||
const sDistrict = addressForeign.value
|
||||
? { nameEN: subDistrictTextEN.value }
|
||||
: subDistrictOptions.value.find((v) => v.id === subDistrictId.value);
|
||||
|
||||
if (province && district && sDistrict) {
|
||||
const fullAddress = formatAddress({
|
||||
if (province?.nameEN && district?.nameEN && sDistrict?.nameEN) {
|
||||
const fullAddressText = formatAddress({
|
||||
address: address.value,
|
||||
addressEN: addressEN.value,
|
||||
moo: moo.value ? moo.value : '',
|
||||
|
|
@ -124,8 +154,9 @@ const fullAddressEN = computed(() => {
|
|||
district: district as unknown as District,
|
||||
subDistrict: sDistrict as unknown as SubDistrict,
|
||||
en: true,
|
||||
zipCode: addressForeign.value ? zipCode.value || ' ' : undefined,
|
||||
});
|
||||
return fullAddress;
|
||||
return fullAddressText;
|
||||
}
|
||||
return '-';
|
||||
});
|
||||
|
|
@ -149,7 +180,7 @@ async function fetchProvince() {
|
|||
}
|
||||
|
||||
async function fetchDistrict() {
|
||||
if (!provinceId.value) return;
|
||||
if (!provinceId.value || addressForeign.value) return;
|
||||
|
||||
const result = await addressStore.fetchDistrictByProvinceId(provinceId.value);
|
||||
if (result) addrOptions.districtOps = result;
|
||||
|
|
@ -168,7 +199,7 @@ async function fetchDistrict() {
|
|||
}
|
||||
|
||||
async function fetchSubDistrict() {
|
||||
if (!districtId.value) return;
|
||||
if (!districtId.value || addressForeign.value) return;
|
||||
const result = await addressStore.fetchSubDistrictByProvinceId(
|
||||
districtId.value,
|
||||
);
|
||||
|
|
@ -255,6 +286,16 @@ onMounted(async () => {
|
|||
await fetchSubDistrict();
|
||||
});
|
||||
|
||||
function clearAddress() {
|
||||
provinceId.value = null;
|
||||
districtId.value = null;
|
||||
subDistrictId.value = null;
|
||||
provinceTextEN.value = null;
|
||||
districtTextEN.value = null;
|
||||
subDistrictTextEN.value = null;
|
||||
zipCode.value = null;
|
||||
}
|
||||
|
||||
watch(provinceId, fetchDistrict);
|
||||
watch(districtId, fetchSubDistrict);
|
||||
|
||||
|
|
@ -313,6 +354,15 @@ watchEffect(async () => {
|
|||
{{ $t('customerEmployee.form.addressCustom') }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div v-if="useForeignAddress" class="text-caption q-ml-md app-text-muted">
|
||||
<q-checkbox
|
||||
size="xs"
|
||||
v-model="addressForeign"
|
||||
@update:model-value="clearAddress"
|
||||
/>
|
||||
{{ $t('personnel.form.addressForeign') }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 row q-col-gutter-y-md">
|
||||
|
|
@ -449,7 +499,24 @@ watchEffect(async () => {
|
|||
(v) => (typeof v === 'string' ? (street = v) : '')
|
||||
"
|
||||
/>
|
||||
<q-input
|
||||
v-if="addressForeign"
|
||||
outlined
|
||||
hide-bottom-space
|
||||
class="col-md-3 col-6"
|
||||
v-model="provinceId"
|
||||
:dense="dense"
|
||||
:label="$t('form.province')"
|
||||
:readonly="readonly || sameWithEmployer"
|
||||
:for="`${prefixId}-${indexId !== undefined ? `input-province-${indexId}` : 'input-province'}`"
|
||||
:rules="
|
||||
disabledRule
|
||||
? []
|
||||
: [(val) => (val && val.length > 0) || $t('form.error.required')]
|
||||
"
|
||||
/>
|
||||
<q-select
|
||||
v-else
|
||||
autocomplete="off"
|
||||
outlined
|
||||
clearable
|
||||
|
|
@ -493,7 +560,24 @@ watchEffect(async () => {
|
|||
</template>
|
||||
</q-select>
|
||||
|
||||
<q-input
|
||||
v-if="addressForeign"
|
||||
outlined
|
||||
hide-bottom-space
|
||||
class="col-md-3 col-6"
|
||||
v-model="districtId"
|
||||
:dense="dense"
|
||||
:label="$t('form.district')"
|
||||
:readonly="readonly || sameWithEmployer"
|
||||
:for="`${prefixId}-${indexId !== undefined ? `input-district-${indexId}` : 'input-district'}`"
|
||||
:rules="
|
||||
disabledRule
|
||||
? []
|
||||
: [(val) => (val && val.length > 0) || $t('form.error.required')]
|
||||
"
|
||||
/>
|
||||
<q-select
|
||||
v-else
|
||||
autocomplete="off"
|
||||
outlined
|
||||
clearable
|
||||
|
|
@ -536,7 +620,25 @@ watchEffect(async () => {
|
|||
</q-item>
|
||||
</template>
|
||||
</q-select>
|
||||
|
||||
<q-input
|
||||
v-if="addressForeign"
|
||||
outlined
|
||||
hide-bottom-space
|
||||
class="col-md-3 col-6"
|
||||
v-model="subDistrictId"
|
||||
:dense="dense"
|
||||
:label="$t('form.district')"
|
||||
:readonly="readonly || sameWithEmployer"
|
||||
:for="`${prefixId}-${indexId !== undefined ? `input-sub-district-${indexId}` : 'input-sub-district'}`"
|
||||
:rules="
|
||||
disabledRule
|
||||
? []
|
||||
: [(val) => (val && val.length > 0) || $t('form.error.required')]
|
||||
"
|
||||
/>
|
||||
<q-select
|
||||
v-else
|
||||
autocomplete="off"
|
||||
outlined
|
||||
clearable
|
||||
|
|
@ -580,17 +682,26 @@ watchEffect(async () => {
|
|||
</template>
|
||||
</q-select>
|
||||
<q-input
|
||||
hide-bottom-space
|
||||
:for="`${prefixId}-${indexId !== undefined ? `input-zip-code-${indexId}` : 'input-zip-code'}`"
|
||||
:dense="dense"
|
||||
outlined
|
||||
:disable="!readonly && !sameWithEmployer"
|
||||
readonly
|
||||
:disable="!addressForeign && !readonly && !sameWithEmployer"
|
||||
:readonly="!addressForeign || readonly"
|
||||
:label="$t('form.zipCode')"
|
||||
class="col-md-3 col-6"
|
||||
:model-value="
|
||||
addrOptions.subDistrictOps
|
||||
?.filter((x) => x.id === subDistrictId)
|
||||
.map((x) => x.zipCode)[0] ?? ''
|
||||
!addressForeign
|
||||
? (addrOptions.subDistrictOps
|
||||
?.filter((x) => x.id === subDistrictId)
|
||||
.map((x) => x.zipCode)[0] ?? '')
|
||||
: zipCode
|
||||
"
|
||||
@update:model-value="(v) => (zipCode = v.toString())"
|
||||
:rules="
|
||||
!addressForeign
|
||||
? []
|
||||
: [(val) => (val && val.length > 0) || $t('form.error.required')]
|
||||
"
|
||||
/>
|
||||
<q-input
|
||||
|
|
@ -689,7 +800,24 @@ watchEffect(async () => {
|
|||
(v) => (typeof v === 'string' ? (streetEN = v) : '')
|
||||
"
|
||||
/>
|
||||
<q-input
|
||||
v-if="addressForeign"
|
||||
outlined
|
||||
hide-bottom-space
|
||||
class="col-md-3 col-6"
|
||||
v-model="provinceTextEN"
|
||||
:dense="dense"
|
||||
label="Province"
|
||||
:readonly="readonly || sameWithEmployer"
|
||||
:for="`${prefixId}-${indexId !== undefined ? `input-province-en-${indexId}` : 'input-province-en'}`"
|
||||
:rules="
|
||||
disabledRule
|
||||
? []
|
||||
: [(val) => (val && val.length > 0) || $t('form.error.required')]
|
||||
"
|
||||
/>
|
||||
<q-select
|
||||
v-else
|
||||
autocomplete="off"
|
||||
outlined
|
||||
clearable
|
||||
|
|
@ -732,7 +860,25 @@ watchEffect(async () => {
|
|||
</q-item>
|
||||
</template>
|
||||
</q-select>
|
||||
|
||||
<q-input
|
||||
v-if="addressForeign"
|
||||
outlined
|
||||
hide-bottom-space
|
||||
class="col-md-3 col-6"
|
||||
v-model="districtTextEN"
|
||||
:dense="dense"
|
||||
label="District"
|
||||
:readonly="readonly || sameWithEmployer"
|
||||
:for="`${prefixId}-${indexId !== undefined ? `input-district-en-${indexId}` : 'input-district-en'}`"
|
||||
:rules="
|
||||
disabledRule
|
||||
? []
|
||||
: [(val) => (val && val.length > 0) || $t('form.error.required')]
|
||||
"
|
||||
/>
|
||||
<q-select
|
||||
v-else
|
||||
autocomplete="off"
|
||||
outlined
|
||||
clearable
|
||||
|
|
@ -775,7 +921,25 @@ watchEffect(async () => {
|
|||
</q-item>
|
||||
</template>
|
||||
</q-select>
|
||||
|
||||
<q-input
|
||||
v-if="addressForeign"
|
||||
outlined
|
||||
hide-bottom-space
|
||||
class="col-md-3 col-6"
|
||||
v-model="subDistrictTextEN"
|
||||
:dense="dense"
|
||||
label="Sub-District"
|
||||
:readonly="readonly || sameWithEmployer"
|
||||
:for="`${prefixId}-${indexId !== undefined ? `input-sub-district-en-${indexId}` : 'input-sub-district-en'}`"
|
||||
:rules="
|
||||
disabledRule
|
||||
? []
|
||||
: [(val) => (val && val.length > 0) || $t('form.error.required')]
|
||||
"
|
||||
/>
|
||||
<q-select
|
||||
v-else
|
||||
autocomplete="off"
|
||||
outlined
|
||||
clearable
|
||||
|
|
@ -823,15 +987,23 @@ watchEffect(async () => {
|
|||
:for="`${prefixId}-${indexId !== undefined ? `input-zip-code-${indexId}` : 'input-zip-code'}`"
|
||||
:dense="dense"
|
||||
outlined
|
||||
readonly
|
||||
:disable="!readonly && !sameWithEmployer"
|
||||
:readonly="!addressForeign || readonly"
|
||||
:disable="!addressForeign && !readonly && !sameWithEmployer"
|
||||
zip="zip-en"
|
||||
label="Zip Code"
|
||||
class="col-md-3 col-6"
|
||||
:model-value="
|
||||
addrOptions.subDistrictOps
|
||||
?.filter((x) => x.id === subDistrictId)
|
||||
.map((x) => x.zipCode)[0] ?? ''
|
||||
!addressForeign
|
||||
? (addrOptions.subDistrictOps
|
||||
?.filter((x) => x.id === subDistrictId)
|
||||
.map((x) => x.zipCode)[0] ?? '')
|
||||
: zipCode
|
||||
"
|
||||
@update:model-value="(v) => (zipCode = v.toString())"
|
||||
:rules="
|
||||
!addressForeign
|
||||
? []
|
||||
: [(val) => (val && val.length > 0) || $t('form.error.required')]
|
||||
"
|
||||
/>
|
||||
<q-input
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue