Merge branch 'NiceDev' into develop
# Conflicts: # src/modules/10_registry/01_Information/03_Address.vue
This commit is contained in:
DESKTOP-1R2VSQH\Lenovo ThinkPad E490
commit
baa411524a
9 changed files with 276 additions and 65 deletions
|
|
@ -2,11 +2,19 @@
|
|||
import { useCounterMixin } from "@/stores/mixin";
|
||||
import { useQuasar, type QTableProps } from "quasar";
|
||||
import { ref, reactive, onMounted } from "vue";
|
||||
import http from "@/plugins/http";
|
||||
import config from "@/app.config";
|
||||
|
||||
import type {
|
||||
Address,
|
||||
Provinces,
|
||||
Districts,
|
||||
SubDistricts,
|
||||
} from "@/modules/10_registry/interface/response/01_Information";
|
||||
|
||||
//history dialog
|
||||
import DialogHistory from "@/modules/10_registry/Dialog/DialogHistory.vue";
|
||||
import http from "@/plugins/http";
|
||||
import config from "@/app.config";
|
||||
|
||||
import { useRegistryInFormationStore } from "@/modules/10_registry/store/registry";
|
||||
|
||||
const store = useRegistryInFormationStore();
|
||||
|
|
@ -18,7 +26,7 @@ const { showLoader, hideLoader, messageError, date2Thai } = mixin;
|
|||
const modalHistory = ref<boolean>(false);
|
||||
/** ตัวแปรข้อมูล */
|
||||
|
||||
const formData = reactive<any>({
|
||||
const formData = reactive({
|
||||
registrationAddress: "", //ที่อยู่ตามทะเบียนบ้าน
|
||||
registrationProvince: "", //จังหวัด
|
||||
registrationDistrict: "", //เขต / อำเภอ
|
||||
|
|
@ -32,6 +40,12 @@ const formData = reactive<any>({
|
|||
currentZipCode: "", //รหัสไปรษณีย์
|
||||
});
|
||||
|
||||
const provinceData = ref<Provinces[]>([]);
|
||||
const districtRegistration = ref<Districts[]>([]);
|
||||
const districtCurrent = ref<Districts[]>([]);
|
||||
const subDistrictRegistration = ref<SubDistricts[]>([]);
|
||||
const subDistrictCurrent = ref<SubDistricts[]>([]);
|
||||
|
||||
const visibleColumnsHistory = ref<string[]>([
|
||||
"currentAddress",
|
||||
"currentDistrict",
|
||||
|
|
@ -215,23 +229,31 @@ function getData() {
|
|||
http
|
||||
.get(config.API.dataUserAddress)
|
||||
.then((res) => {
|
||||
const data = res.data.result;
|
||||
const data: Address = res.data.result;
|
||||
fetchDistrict(data.registrationProvinceId, "1");
|
||||
fetchDistrict(data.currentProvinceId, "2");
|
||||
fetchSubDistrict(data.registrationDistrictId, "1");
|
||||
fetchSubDistrict(data.currentDistrictId, "2");
|
||||
|
||||
formData.registrationAddress = data.registrationAddress;
|
||||
formData.registrationProvince = data.registrationProvince;
|
||||
formData.registrationDistrict = data.registrationDistrict;
|
||||
formData.registrationSubDistrict = data.registrationSubDistrict;
|
||||
formData.registrationProvince = data.registrationProvinceId;
|
||||
formData.registrationDistrict = data.registrationDistrictId;
|
||||
formData.registrationSubDistrict = data.registrationSubDistrictId;
|
||||
formData.registrationZipCode = data.registrationZipCode;
|
||||
|
||||
formData.currentAddress = data.currentAddress;
|
||||
formData.currentProvince = data.currentProvince;
|
||||
formData.currentDistrict = data.currentDistrict;
|
||||
formData.currentSubDistrict = data.currentSubDistrict;
|
||||
formData.currentProvince = data.currentProvinceId;
|
||||
formData.currentDistrict = data.currentDistrictId;
|
||||
formData.currentSubDistrict = data.currentSubDistrictId;
|
||||
formData.currentZipCode = data.currentZipCode;
|
||||
})
|
||||
.catch((e) => {
|
||||
messageError($q, e);
|
||||
})
|
||||
.finally(() => {
|
||||
hideLoader();
|
||||
setTimeout(() => {
|
||||
hideLoader();
|
||||
}, 2000);
|
||||
});
|
||||
}
|
||||
|
||||
|
|
@ -256,8 +278,99 @@ function getHistory() {
|
|||
});
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
getData();
|
||||
/**
|
||||
*function fetch ข้อมูลจังหวัด
|
||||
*/
|
||||
function fetchProvince() {
|
||||
http
|
||||
.get(config.API.profileNewProvince)
|
||||
.then((res) => {
|
||||
const data = res.data.result;
|
||||
provinceData.value = data;
|
||||
})
|
||||
.catch((e) => {
|
||||
messageError($q, e);
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* function fetch ข้อมูลอำเภอ
|
||||
* @param id จังหวัด
|
||||
* @param position ที่อยู่ตามทะเบียนบ้าน,ที่อยู่ปัจจุบัน
|
||||
*/
|
||||
function fetchDistrict(id: string | null, position: string) {
|
||||
if (!id) return;
|
||||
http
|
||||
.get(config.API.profileNewDistrictByPId(id))
|
||||
.then((res) => {
|
||||
const data = res.data.result.districts;
|
||||
if (position === "1") {
|
||||
districtRegistration.value = data;
|
||||
} else {
|
||||
districtCurrent.value = data;
|
||||
}
|
||||
})
|
||||
.catch((e) => {
|
||||
messageError($q, e);
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* function fetch ข้อมูลอำเภ
|
||||
* @param id อำเภอ
|
||||
* @param position ที่อยู่ตามทะเบียนบ้าน,ที่อยู่ปัจจุบัน
|
||||
*/
|
||||
function fetchSubDistrict(id: string | null, position: string) {
|
||||
if (!id) return;
|
||||
http
|
||||
.get(config.API.profileNewSubDistrictByDId(id))
|
||||
.then((res) => {
|
||||
const data = res.data.result.subDistricts;
|
||||
if (position === "1") {
|
||||
subDistrictRegistration.value = data;
|
||||
} else {
|
||||
subDistrictCurrent.value = data;
|
||||
}
|
||||
})
|
||||
.catch((e) => {
|
||||
messageError($q, e);
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* function แปลงชื้่อจังหวัด
|
||||
* @param id
|
||||
*/
|
||||
function convertProvinceName(id: string) {
|
||||
const province = provinceData.value.find((e: Provinces) => e.id === id);
|
||||
return province?.name;
|
||||
}
|
||||
|
||||
/**
|
||||
* function แปลงชื้่ออำเภอ
|
||||
* @param id
|
||||
*/
|
||||
function convertDistrictName(id: string, type: string) {
|
||||
const data =
|
||||
type === "1" ? districtRegistration.value : districtCurrent.value;
|
||||
const district = data.find((e: Districts) => e.id === id);
|
||||
return district?.name;
|
||||
}
|
||||
|
||||
/**
|
||||
* function แปลงชื้่อตำบล
|
||||
* @param id
|
||||
*/
|
||||
function convertSubDistrictName(id: string, type: string) {
|
||||
const data =
|
||||
type === "1" ? subDistrictRegistration.value : subDistrictCurrent.value;
|
||||
const district = data.find((e: SubDistricts) => e.id === id);
|
||||
return district?.name;
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
await fetchProvince();
|
||||
await getData();
|
||||
});
|
||||
</script>
|
||||
<template>
|
||||
|
|
@ -279,18 +392,20 @@ onMounted(() => {
|
|||
</q-toolbar>
|
||||
|
||||
<div class="row q-col-gutter-sm">
|
||||
<div class="col-12 col-md-6">
|
||||
<q-card bordered class="bg-grey-1">
|
||||
<q-toolbar>
|
||||
<q-toolbar-title class="text-subtitle2 text-bold"
|
||||
>ที่อยู่ตามทะเบียนบ้าน</q-toolbar-title
|
||||
>
|
||||
</q-toolbar>
|
||||
<div class="col-md-6 col-sm-12 col-xs-12">
|
||||
<q-card class="bg-grey-1" bordered>
|
||||
<q-item>
|
||||
<q-item-section>
|
||||
<q-item-label>ที่อยู่ตามทะเบียนบ้าน</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
<q-separator />
|
||||
<div class="row q-pa-md">
|
||||
<div class="col-12 col-sm-12 col-md-12 q-gutter-y-sm">
|
||||
<q-card-section>
|
||||
<div class="col-12 col-sm-12 col-md-6 q-gutter-y-sm">
|
||||
<div class="row">
|
||||
<div class="col-5 text-grey-6 text-weight-medium">ที่อยู่</div>
|
||||
<div class="col-5 text-grey-6 text-weight-medium">
|
||||
ที่อยู่ตามทะเบียนบ้าน
|
||||
</div>
|
||||
<div class="col-7">
|
||||
{{
|
||||
formData.registrationAddress
|
||||
|
|
@ -305,7 +420,7 @@ onMounted(() => {
|
|||
<div class="col-7">
|
||||
{{
|
||||
formData.registrationProvince
|
||||
? formData.registrationProvince
|
||||
? convertProvinceName(formData.registrationProvince)
|
||||
: "-"
|
||||
}}
|
||||
</div>
|
||||
|
|
@ -318,7 +433,7 @@ onMounted(() => {
|
|||
<div class="col-7">
|
||||
{{
|
||||
formData.registrationDistrict
|
||||
? formData.registrationDistrict
|
||||
? convertDistrictName(formData.registrationDistrict, "1")
|
||||
: "-"
|
||||
}}
|
||||
</div>
|
||||
|
|
@ -331,7 +446,10 @@ onMounted(() => {
|
|||
<div class="col-7">
|
||||
{{
|
||||
formData.registrationSubDistrict
|
||||
? formData.registrationSubDistrict
|
||||
? convertSubDistrictName(
|
||||
formData.registrationSubDistrict,
|
||||
"1"
|
||||
)
|
||||
: "-"
|
||||
}}
|
||||
</div>
|
||||
|
|
@ -350,22 +468,22 @@ onMounted(() => {
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</q-card-section>
|
||||
</q-card>
|
||||
</div>
|
||||
<div class="col-12 col-md-6">
|
||||
<q-card bordered class="bg-grey-1">
|
||||
<q-toolbar>
|
||||
<q-toolbar-title class="text-subtitle2 text-bold"
|
||||
>ที่อยู่ปัจจุบัน</q-toolbar-title
|
||||
>
|
||||
</q-toolbar>
|
||||
<div class="col-md-6 col-sm-12 col-xs-12">
|
||||
<q-card class="bg-grey-1" bordered>
|
||||
<q-item>
|
||||
<q-item-section>
|
||||
<q-item-label>ที่อยู่ปัจจุบัน</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
<q-separator />
|
||||
<div class="row q-pa-md">
|
||||
<div class="col-12 col-sm-12 col-md-12 q-gutter-y-sm">
|
||||
<q-card-section>
|
||||
<div class="col-12 col-sm-12 col-md-6 q-gutter-y-sm">
|
||||
<div class="row">
|
||||
<div class="col-5 text-grey-6 text-weight-medium">
|
||||
ที่อยู่
|
||||
ที่อยู่ปัจจุบัน
|
||||
</div>
|
||||
<div class="col-7">
|
||||
{{ formData.currentAddress ? formData.currentAddress : "-" }}
|
||||
|
|
@ -375,7 +493,9 @@ onMounted(() => {
|
|||
<div class="col-5 text-grey-6 text-weight-medium">จังหวัด</div>
|
||||
<div class="col-7">
|
||||
{{
|
||||
formData.currentProvince ? formData.currentProvince : "-"
|
||||
formData.currentProvince
|
||||
? convertProvinceName(formData.currentProvince)
|
||||
: "-"
|
||||
}}
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -385,7 +505,9 @@ onMounted(() => {
|
|||
</div>
|
||||
<div class="col-7">
|
||||
{{
|
||||
formData.currentDistrict ? formData.currentDistrict : "-"
|
||||
formData.currentDistrict
|
||||
? convertDistrictName(formData.currentDistrict, "2")
|
||||
: "-"
|
||||
}}
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -396,7 +518,7 @@ onMounted(() => {
|
|||
<div class="col-7">
|
||||
{{
|
||||
formData.currentSubDistrict
|
||||
? formData.currentSubDistrict
|
||||
? convertSubDistrictName(formData.currentSubDistrict, "2")
|
||||
: "-"
|
||||
}}
|
||||
</div>
|
||||
|
|
@ -410,7 +532,7 @@ onMounted(() => {
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</q-card-section>
|
||||
</q-card>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue