feat(personal-detail): add display section for personal info
This commit is contained in:
DESKTOP-1R2VSQH\Lenovo ThinkPad E490
parent
3f5a4783c1
commit
376fba6059
1 changed files with 272 additions and 11 deletions
|
|
@ -3,6 +3,7 @@ import { ref, watch } from "vue";
|
|||
import { useQuasar } from "quasar";
|
||||
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
import { calculateAge } from "@/utils/function";
|
||||
import http from "@/plugins/http";
|
||||
import config from "@/app.config";
|
||||
|
||||
|
|
@ -38,6 +39,20 @@ const props = defineProps({
|
|||
|
||||
const rows = ref<DataEducation[]>([]);
|
||||
const personalForm = ref<DataPerson>();
|
||||
const age = ref<string | null>(""); //อายุ
|
||||
|
||||
// ข้อมูลแปลงจาก ID เป็นชื่อ
|
||||
const currentProvinceName = ref<string>("");
|
||||
const currentDistrictName = ref<string>("");
|
||||
const currentSubDistrictName = ref<string>("");
|
||||
const registProvinceName = ref<string>("");
|
||||
const registDistrictName = ref<string>("");
|
||||
const registSubDistrictName = ref<string>("");
|
||||
|
||||
// Cache ข้อมูล
|
||||
const provincesCache = ref<any[]>([]);
|
||||
const districtsCache = ref<Map<string, any[]>>(new Map());
|
||||
const subDistrictsCache = ref<Map<string, any[]>>(new Map());
|
||||
|
||||
/**หัวตาราง */
|
||||
const columns = ref<QTableProps["columns"]>([
|
||||
|
|
@ -92,6 +107,12 @@ async function fetchData() {
|
|||
.get(config.API.getDatapersonal(props.personalId))
|
||||
.then((res) => {
|
||||
personalForm.value = res.data.result;
|
||||
if (res.data.result.dateOfBirth) {
|
||||
// กำหนดอายุ ส่งวันเกิดไปคำนวน
|
||||
age.value = calculateAge(res.data.result.dateOfBirth);
|
||||
} else {
|
||||
age.value = null;
|
||||
}
|
||||
personalForm.value?.education.map((e: Education) => {
|
||||
rows.value.push({
|
||||
university: e.institute,
|
||||
|
|
@ -107,6 +128,137 @@ async function fetchData() {
|
|||
.finally(() => {
|
||||
hideLoader();
|
||||
});
|
||||
|
||||
// แปลง ID เป็นชื่อ
|
||||
await convertAddressIds();
|
||||
}
|
||||
|
||||
/**
|
||||
* ฟังก์ชันแปลง ID เป็นชื่อจริงของที่อยู่ (แบบ optimize)
|
||||
*/
|
||||
async function convertAddressIds() {
|
||||
if (!personalForm.value) return;
|
||||
|
||||
try {
|
||||
// โหลดข้อมูลจังหวัดครั้งเดียวถ้ายังไม่มี
|
||||
await loadProvinces();
|
||||
|
||||
// แปลงข้อมูลที่อยู่ปัจจุบัน
|
||||
if (personalForm.value.currentProvinceId) {
|
||||
currentProvinceName.value = getProvinceNameFromCache(
|
||||
personalForm.value.currentProvinceId
|
||||
);
|
||||
|
||||
if (personalForm.value.currentDistrictId) {
|
||||
currentDistrictName.value = await getDistrictNameOptimized(
|
||||
personalForm.value.currentProvinceId,
|
||||
personalForm.value.currentDistrictId
|
||||
);
|
||||
|
||||
if (personalForm.value.currentSubDistrictId) {
|
||||
currentSubDistrictName.value = await getSubDistrictNameOptimized(
|
||||
personalForm.value.currentDistrictId,
|
||||
personalForm.value.currentSubDistrictId
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// แปลงข้อมูลที่อยู่ตามทะเบียน
|
||||
if (personalForm.value.registProvinceId) {
|
||||
registProvinceName.value = getProvinceNameFromCache(
|
||||
personalForm.value.registProvinceId
|
||||
);
|
||||
|
||||
if (personalForm.value.registDistrictId) {
|
||||
registDistrictName.value = await getDistrictNameOptimized(
|
||||
personalForm.value.registProvinceId,
|
||||
personalForm.value.registDistrictId
|
||||
);
|
||||
|
||||
if (personalForm.value.registSubDistrictId) {
|
||||
registSubDistrictName.value = await getSubDistrictNameOptimized(
|
||||
personalForm.value.registDistrictId,
|
||||
personalForm.value.registSubDistrictId
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Error converting address IDs:", error);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* โหลดข้อมูลจังหวัดทั้งหมด (ครั้งเดียว)
|
||||
*/
|
||||
async function loadProvinces() {
|
||||
if (provincesCache.value.length === 0) {
|
||||
try {
|
||||
const res = await http.get(config.API.province);
|
||||
provincesCache.value = res.data.result;
|
||||
} catch (error) {
|
||||
console.error("Error loading provinces:", error);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* ดึงชื่อจังหวัดจาก cache
|
||||
*/
|
||||
function getProvinceNameFromCache(provinceId: string): string {
|
||||
const province = provincesCache.value.find(
|
||||
(p: any) => p.id.toString() === provinceId
|
||||
);
|
||||
return province ? province.name : "-";
|
||||
}
|
||||
|
||||
/**
|
||||
* ดึงชื่ออำเภอแบบ optimize (เรียก API เฉพาะจังหวัดที่ต้องการ)
|
||||
*/
|
||||
async function getDistrictNameOptimized(
|
||||
provinceId: string,
|
||||
districtId: string
|
||||
): Promise<string> {
|
||||
try {
|
||||
// เช็ค cache ก่อน
|
||||
if (!districtsCache.value.has(provinceId)) {
|
||||
const res = await http.get(config.API.listDistrict(provinceId));
|
||||
districtsCache.value.set(provinceId, res.data.result.districts);
|
||||
}
|
||||
|
||||
const districts = districtsCache.value.get(provinceId) || [];
|
||||
const district = districts.find((d: any) => d.id.toString() === districtId);
|
||||
return district ? district.name : "-";
|
||||
} catch (error) {
|
||||
console.error("Error loading district:", error);
|
||||
return "-";
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* ดึงชื่อตำบลแบบ optimize (เรียก API เฉพาะอำเภอที่ต้องการ)
|
||||
*/
|
||||
async function getSubDistrictNameOptimized(
|
||||
districtId: string,
|
||||
subDistrictId: string
|
||||
): Promise<string> {
|
||||
try {
|
||||
// เช็ค cache ก่อน
|
||||
if (!subDistrictsCache.value.has(districtId)) {
|
||||
const res = await http.get(config.API.listSubDistrict(districtId));
|
||||
subDistrictsCache.value.set(districtId, res.data.result.subDistricts);
|
||||
}
|
||||
|
||||
const subDistricts = subDistrictsCache.value.get(districtId) || [];
|
||||
const subDistrict = subDistricts.find(
|
||||
(sd: any) => sd.id.toString() === subDistrictId
|
||||
);
|
||||
return subDistrict ? subDistrict.name : "-";
|
||||
} catch (error) {
|
||||
console.error("Error loading subdistrict:", error);
|
||||
return "-";
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -170,30 +322,58 @@ watch(props, () => {
|
|||
|
||||
<div class="row q-pa-xs">
|
||||
<div class="col-3 header-sub-text">
|
||||
<div class="q-pb-md">เลขประจำตัวประชาชน</div>
|
||||
<div>วัน/เดือน/ปีเกิด</div>
|
||||
<div class="q-pb-sm">เลขประจำตัวประชาชน</div>
|
||||
<div class="q-pb-sm">วัน/เดือน/ปีเกิด</div>
|
||||
<div class="q-pb-sm">อายุ</div>
|
||||
<div class="q-pb-sm">สัญชาติ</div>
|
||||
<div>หมู่เลือด</div>
|
||||
</div>
|
||||
|
||||
<div class="col-4 sub-text">
|
||||
<div class="q-pb-md">
|
||||
<div class="q-pb-sm">
|
||||
{{ personalForm?.idCard }}
|
||||
</div>
|
||||
<div>
|
||||
<div class="q-pb-sm">
|
||||
{{ date2Thai(personalForm?.dateOfBirth) }}
|
||||
</div>
|
||||
<div class="q-pb-sm">
|
||||
{{ age ? age : "-" }}
|
||||
</div>
|
||||
<div class="q-pb-sm">
|
||||
{{
|
||||
personalForm?.nationality ? personalForm.nationality : "-"
|
||||
}}
|
||||
</div>
|
||||
<div>
|
||||
{{
|
||||
personalForm?.bloodGroup ? personalForm.bloodGroup : "-"
|
||||
}}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-2 header-sub-text">
|
||||
<div class="q-pb-md">ชื่อ-นามสกุล</div>
|
||||
<div>เพศ</div>
|
||||
<div class="q-pb-sm">ชื่อ-นามสกุล</div>
|
||||
<div class="q-pb-sm">เพศ</div>
|
||||
<div class="q-pb-sm">เชื้อชาติ</div>
|
||||
<div class="q-pb-sm">ศาสนา</div>
|
||||
<div>เบอร์โทรศัพท์</div>
|
||||
</div>
|
||||
<div class="col-3 sub-text">
|
||||
<div class="q-pb-md">
|
||||
<div class="q-pb-sm">
|
||||
{{ personalForm?.fullName }}
|
||||
</div>
|
||||
<div>
|
||||
<div class="q-pb-sm">
|
||||
{{ personalForm?.gender }}
|
||||
</div>
|
||||
<div class="q-pb-sm">
|
||||
{{ personalForm?.race ? personalForm.race : "-" }}
|
||||
</div>
|
||||
<div class="q-pb-sm">
|
||||
{{ personalForm?.religion ? personalForm.religion : "-" }}
|
||||
</div>
|
||||
<div class="q-mt-sm">
|
||||
{{ personalForm?.telephone ? personalForm.telephone : "-" }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</q-card>
|
||||
|
|
@ -203,9 +383,90 @@ watch(props, () => {
|
|||
<q-card bordered class="card-panding">
|
||||
<div class="row items-center q-pa-xs header-text">ภูมิลำเนา</div>
|
||||
<div class="row q-pa-xs">
|
||||
<div class="col-3 header-sub-text">ที่อยู่</div>
|
||||
<div class="col-9 sub-text">
|
||||
{{ personalForm?.registAddress }}
|
||||
<!-- ที่อยู่ปัจจุบัน -->
|
||||
<div class="col-6">
|
||||
<div class="q-pb-sm text-weight-medium text-primary">
|
||||
ที่อยู่ปัจจุบัน
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-4 header-sub-text">
|
||||
<div class="q-pb-sm">ที่อยู่</div>
|
||||
<div class="q-pb-sm">จังหวัด</div>
|
||||
<div class="q-pb-sm">เขต/อำเภอ</div>
|
||||
<div class="q-pb-sm">แขวง/ตำบล</div>
|
||||
<div>รหัสไปรษณีย์</div>
|
||||
</div>
|
||||
<div class="col-8 sub-text">
|
||||
<div class="q-pb-sm">
|
||||
{{
|
||||
personalForm?.currentAddress
|
||||
? personalForm.currentAddress
|
||||
: "-"
|
||||
}}
|
||||
</div>
|
||||
<div class="q-pb-sm">
|
||||
{{ currentProvinceName ? currentProvinceName : "-" }}
|
||||
</div>
|
||||
<div class="q-pb-sm">
|
||||
{{ currentDistrictName ? currentDistrictName : "-" }}
|
||||
</div>
|
||||
<div class="q-pb-sm">
|
||||
{{
|
||||
currentSubDistrictName ? currentSubDistrictName : "-"
|
||||
}}
|
||||
</div>
|
||||
<div class="q-mt-sm">
|
||||
{{
|
||||
personalForm?.currentZipCode
|
||||
? personalForm.currentZipCode
|
||||
: "-"
|
||||
}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ที่อยู่ตามทะเบียนบ้าน -->
|
||||
<div class="col-6">
|
||||
<div class="q-pb-sm text-weight-medium text-primary">
|
||||
ที่อยู่ตามทะเบียนบ้าน
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-4 header-sub-text">
|
||||
<div class="q-pb-sm">ที่อยู่</div>
|
||||
<div class="q-pb-sm">จังหวัด</div>
|
||||
<div class="q-pb-sm">เขต/อำเภอ</div>
|
||||
<div class="q-pb-sm">แขวง/ตำบล</div>
|
||||
<div>รหัสไปรษณีย์</div>
|
||||
</div>
|
||||
<div class="col-8 sub-text">
|
||||
<div class="q-pb-sm">
|
||||
{{
|
||||
personalForm?.registAddress
|
||||
? personalForm.registAddress
|
||||
: "-"
|
||||
}}
|
||||
</div>
|
||||
<div class="q-pb-sm">
|
||||
{{ registProvinceName ? registProvinceName : "-" }}
|
||||
</div>
|
||||
<div class="q-pb-sm">
|
||||
{{ registDistrictName ? registDistrictName : "-" }}
|
||||
</div>
|
||||
<div class="q-pb-sm">
|
||||
{{
|
||||
registSubDistrictName ? registSubDistrictName : "-"
|
||||
}}
|
||||
</div>
|
||||
<div class="q-mt-sm">
|
||||
{{
|
||||
personalForm?.registZipCode
|
||||
? personalForm.registZipCode
|
||||
: "-"
|
||||
}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</q-card>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue