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

feat: fetch Province , District , SubDistrict

Browse source
This commit is contained in:
Net 2024-04-10 11:33:21 +07:00
parent eb0b09cb84
commit b3a25513e3
1 changed files with 72 additions and 32 deletions
Download patch file Download diff file Expand all files Collapse all files

104
src/components/FormDialog.vue
View file

@ -1,7 +1,10 @@
<script setup lang="ts">
import { ref } from 'vue';
import { ref, onMounted, watch } from 'vue';
import AppBox from 'components/app/AppBox.vue';
import { Province, District, SubDistrict } from 'stores/address';
import useAddressStore from 'stores/address';
defineProps<{
title: string;
addressTitle: string;
@ -10,27 +13,64 @@ defineProps<{
close?: (...args: unknown[]) => void;
}>();
const adrressStore = useAddressStore();
const modal = defineModel('modal', { default: false });
const address = defineModel('address', { default: '' });
const addressEN = defineModel('addressEN', { default: '' });
const provinceId = defineModel('provinceId');
const districtId = defineModel('districtId');
const subDistrictId = defineModel('subDistrictId');
const zipCode = defineModel('zipCode', { default: '' });
const provinceId = defineModel<string>('provinceId');
const districtId = defineModel<string>('districtId');
const subDistrictId = defineModel<string>('subDistrictId');
const zipCode = defineModel<string>('zipCode', { default: '' });
const addrOptions = ref({
provinceOps: [
{ label: 'เชียงใหม่', value: '1' },
{ label: 'เชียงราย', value: '2' },
],
districtOps: [
{ label: 'อำเภอ1', value: '1' },
{ label: 'อำเภอ2', value: '2' },
],
subDistrictOps: [
{ label: 'ตำบล1', value: '1' },
{ label: 'ตำบล2', value: '2' },
],
const addrOptions = ref<{
provinceOps?: Province[];
districtOps?: District[];
subDistrictOps?: SubDistrict[];
}>({});
async function fetchProvince() {
const result = await adrressStore.fetchProvince();
if (result) {
addrOptions.value.provinceOps = result;
}
}
async function fetchDistrict(id: string | undefined) {
if (id) {
const result = await adrressStore.fetchDistrictByProvinceId(id);
if (result) {
addrOptions.value.districtOps = result;
}
}
}
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) => {
await fetchSubDistrict(v);
});
watch(subDistrictId, async (v) => {
zipCode.value =
addrOptions.value.subDistrictOps
?.filter((x) => x.id === v)
.map((x) => x.zipCode)[0] ?? '';
});
</script>
<template>
@ -106,8 +146,8 @@ const addrOptions = ref({
map-options
id="selectProvinceL"
v-model="provinceId"
option-value="value"
option-label="label"
option-value="id"
option-label="name"
label="จังหวัด"
class="col-3"
:options="addrOptions.provinceOps"
@ -119,8 +159,8 @@ const addrOptions = ref({
map-options
id="selectDistrictL"
v-model="districtId"
option-value="value"
option-label="label"
option-value="id"
option-label="name"
label="อำเภอ"
class="col-3"
:options="addrOptions.districtOps"
@ -129,11 +169,11 @@ const addrOptions = ref({
dense
outlined
emit-value
map-
id="selectSubDistrictL"
map-options
id="SelectSubDistrictEN"
v-model="subDistrictId"
option-value="value"
option-label="label"
option-value="id"
option-label="name"
label="ตำบล"
class="col-3"
:options="addrOptions.subDistrictOps"
@ -165,8 +205,8 @@ const addrOptions = ref({
map-options
id="selectProvinceEN"
v-model="provinceId"
option-value="value"
option-label="label"
option-value="id"
option-label="nameEN"
label="จังหวัด"
class="col-3"
:options="addrOptions.provinceOps"
@ -178,8 +218,8 @@ const addrOptions = ref({
map-options
id="selectDistrictEN"
v-model="districtId"
option-value="value"
option-label="label"
option-value="id"
option-label="nameEN"
label="อำเภอ"
class="col-3"
:options="addrOptions.districtOps"
@ -191,8 +231,8 @@ const addrOptions = ref({
map-options
id="SelectSubDistrictEN"
v-model="subDistrictId"
option-value="value"
option-label="label"
option-value="id"
option-label="nameEN"
label="ตำบล"
class="col-3"
:options="addrOptions.subDistrictOps"