chamomind/jws-frontend
chamomind/jws-frontend
7
0
Fork 0
Code Issues Projects Releases Packages 1 Wiki Activity Actions

feat: select district & sub when edit

Browse source
This commit is contained in:
puriphatt 2024-04-10 23:15:43 +07:00
parent 2e28c00551
commit f422d00d23
1 changed files with 37 additions and 27 deletions
Download patch file Download diff file Expand all files Collapse all files

64
src/components/FormDialog.vue
View file

@ -13,6 +13,11 @@ defineProps<{
close?: (...args: unknown[]) => void;
}>();
defineExpose({
fetchDistrict,
fetchSubDistrict,
});
const adrressStore = useAddressStore();
const modal = defineModel('modal', { default: false });
const address = defineModel('address', { default: '' });
@ -48,39 +53,38 @@ async function fetchSubDistrict(id: string | undefined) {
if (id) {
const result = await adrressStore.fetchSubDistrictByProvinceId(id);
if (result) {
console.log(addrOptions.value.subDistrictOps);
addrOptions.value.subDistrictOps = result;
}
}
}
onMounted(async () => {
await fetchProvince();
});
watch(provinceId, async (v) => {
await fetchDistrict(v);
});
watch(districtId, async (v) => {
async function selectProvince(id: string) {
if (!id) return;
districtId.value = undefined;
subDistrictId.value = undefined;
await fetchSubDistrict(v);
});
addrOptions.value.districtOps = [];
addrOptions.value.subDistrictOps = [];
zipCode.value = '';
await fetchDistrict(id);
}
watch(subDistrictId, async (v) => {
async function selectDistrict(id: string) {
if (!id) return;
subDistrictId.value = undefined;
zipCode.value = '';
await fetchSubDistrict(id);
}
async function selectSubDistrict(id: string) {
if (!id) return;
zipCode.value =
addrOptions.value.subDistrictOps
?.filter((x) => x.id === v)
?.filter((x) => x.id === id)
.map((x) => x.zipCode)[0] ?? '';
});
}
watch(provinceId, (v) => {
if (v) {
addrOptions.value.districtOps = [];
addrOptions.value.subDistrictOps = [];
districtId.value = undefined;
subDistrictId.value = undefined;
}
onMounted(async () => {
await fetchProvince();
});
</script>
<template>
@ -144,7 +148,7 @@ watch(provinceId, (v) => {
<q-input
dense
outlined
id="AddrL"
id="Addr"
label="ที่อยู่"
class="col-12"
v-model="address"
@ -154,45 +158,48 @@ watch(provinceId, (v) => {
outlined
emit-value
map-options
id="selectProvinceL"
id="selectProvince"
v-model="provinceId"
option-value="id"
option-label="name"
label="จังหวัด"
class="col-3"
:options="addrOptions.provinceOps"
@update:model-value="(v: string) => selectProvince(v)"
/>
<q-select
dense
outlined
emit-value
map-options
id="selectDistrictL"
id="selectDistrict"
v-model="districtId"
option-value="id"
option-label="name"
label="อำเภอ"
class="col-3"
:options="addrOptions.districtOps"
@update:model-value="(v: string) => selectDistrict(v)"
/>
<q-select
dense
outlined
emit-value
map-options
id="SelectSubDistrictEN"
id="SelectSubDistrict"
v-model="subDistrictId"
option-value="id"
option-label="name"
label="ตำบล"
class="col-3"
:options="addrOptions.subDistrictOps"
@update:model-value="(v: string) => selectSubDistrict(v)"
/>
<q-input
dense
readonly
outlined
id="zipL"
id="zip"
label="รหัสไปรษณีย์"
class="col-3"
v-model="zipCode"
@ -220,6 +227,7 @@ watch(provinceId, (v) => {
label="จังหวัด"
class="col-3"
:options="addrOptions.provinceOps"
@update:model-value="(v: string) => selectProvince(v)"
/>
<q-select
dense
@ -233,6 +241,7 @@ watch(provinceId, (v) => {
label="อำเภอ"
class="col-3"
:options="addrOptions.districtOps"
@update:model-value="(v: string) => selectDistrict(v)"
/>
<q-select
dense
@ -246,6 +255,7 @@ watch(provinceId, (v) => {
label="ตำบล"
class="col-3"
:options="addrOptions.subDistrictOps"
@update:model-value="(v: string) => selectSubDistrict(v)"
/>
<q-input
dense