551 lines
17 KiB
Vue
551 lines
17 KiB
Vue
<script setup lang="ts">
|
|
import { useQuasar, type QTableProps } from "quasar";
|
|
import { ref, reactive, onMounted } from "vue";
|
|
|
|
import http from "@/plugins/http";
|
|
import config from "@/app.config";
|
|
import { useCounterMixin } from "@/stores/mixin";
|
|
import { useDataStore } from "@/stores/data";
|
|
import { useRegistryInFormationStore } from "@/modules/10_registry/store/registry";
|
|
|
|
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";
|
|
|
|
const link = ref<string>("");
|
|
const store = useRegistryInFormationStore();
|
|
const dataStore = useDataStore();
|
|
const rowsHistory = ref<any[]>([]);
|
|
const rowsHistoryData = ref<any[]>([]);
|
|
const $q = useQuasar();
|
|
const mixin = useCounterMixin();
|
|
const { showLoader, hideLoader, messageError, date2Thai } = mixin;
|
|
|
|
const modalHistory = ref<boolean>(false);
|
|
/** ตัวแปรข้อมูล */
|
|
|
|
const formData = reactive({
|
|
registrationAddress: "", //ที่อยู่ตามทะเบียนบ้าน
|
|
registrationProvince: "", //จังหวัด
|
|
registrationDistrict: "", //เขต / อำเภอ
|
|
registrationSubDistrict: "", //แขวง / ตำบล
|
|
registrationZipCode: "", //รหัสไปรษณีย์
|
|
|
|
currentAddress: "", //ที่อยู่ปัจจุบัน
|
|
currentProvince: "", //จังหวัด
|
|
currentDistrict: "", //เขต / อำเภอ
|
|
currentSubDistrict: "", //แขวง / ตำบล
|
|
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",
|
|
"currentProvince",
|
|
"currentSubDistrict",
|
|
"currentZipCode",
|
|
"registrationAddress",
|
|
"registrationDistrict",
|
|
"registrationProvince",
|
|
"registrationSame",
|
|
"registrationSubDistrict",
|
|
"registrationZipCode",
|
|
"lastUpdateFullName",
|
|
"lastUpdatedAt",
|
|
]);
|
|
|
|
const columnsHistory = ref<QTableProps["columns"]>([
|
|
{
|
|
name: "registrationAddress",
|
|
align: "left",
|
|
label: "ที่อยู่ตามทะเบียนบ้าน",
|
|
sortable: true,
|
|
field: "registrationAddress",
|
|
headerStyle: "font-size: 14px",
|
|
style: "font-size: 14px",
|
|
sort: (a: string, b: string) =>
|
|
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
|
},
|
|
{
|
|
name: "registrationProvince",
|
|
align: "left",
|
|
label: "จังหวัดตามทะเบียนบ้าน",
|
|
sortable: true,
|
|
field: "registrationProvince",
|
|
headerStyle: "font-size: 14px",
|
|
style: "font-size: 14px",
|
|
sort: (a: string, b: string) =>
|
|
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
|
},
|
|
{
|
|
name: "registrationDistrict",
|
|
align: "left",
|
|
label: "เขต/อำเภอตามทะเบียนบ้าน",
|
|
sortable: true,
|
|
field: "registrationDistrict",
|
|
headerStyle: "font-size: 14px",
|
|
style: "font-size: 14px",
|
|
sort: (a: string, b: string) =>
|
|
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
|
},
|
|
{
|
|
name: "registrationSubDistrict",
|
|
align: "left",
|
|
label: "แขวง/ตำบลตามทะเบียนบ้าน",
|
|
sortable: true,
|
|
field: "registrationSubDistrict",
|
|
headerStyle: "font-size: 14px",
|
|
style: "font-size: 14px",
|
|
sort: (a: string, b: string) =>
|
|
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
|
},
|
|
{
|
|
name: "registrationZipCode",
|
|
align: "left",
|
|
label: "รหัสไปรษณีย์ตามทะเบียนบ้าน",
|
|
sortable: true,
|
|
field: "registrationZipCode",
|
|
headerStyle: "font-size: 14px",
|
|
style: "font-size: 14px",
|
|
sort: (a: string, b: string) =>
|
|
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
|
},
|
|
{
|
|
name: "registrationSame",
|
|
align: "left",
|
|
label: "ที่อยู่ปัจจุบันตรงกับที่อยู่ตามทะเบียนบ้าน",
|
|
sortable: true,
|
|
field: (v) =>
|
|
v.registrationAddress === v.currentAddress &&
|
|
v.registrationZipCode === v.currentZipCode
|
|
? "ใช่"
|
|
: "ไม่",
|
|
headerStyle: "font-size: 14px",
|
|
style: "font-size: 14px",
|
|
sort: (a: string, b: string) =>
|
|
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
|
},
|
|
{
|
|
name: "currentAddress",
|
|
align: "left",
|
|
label: "ที่อยู่ปัจจุบัน",
|
|
sortable: true,
|
|
field: "currentAddress",
|
|
headerStyle: "font-size: 14px",
|
|
style: "font-size: 14px",
|
|
sort: (a: string, b: string) =>
|
|
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
|
},
|
|
{
|
|
name: "currentProvince",
|
|
align: "left",
|
|
label: "จังหวัดปัจจุบัน",
|
|
sortable: true,
|
|
field: "currentProvince",
|
|
headerStyle: "font-size: 14px",
|
|
style: "font-size: 14px",
|
|
sort: (a: string, b: string) =>
|
|
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
|
},
|
|
{
|
|
name: "currentDistrict",
|
|
align: "left",
|
|
label: "เขต/อำเภอปัจจุบัน",
|
|
sortable: true,
|
|
field: "currentDistrict",
|
|
headerStyle: "font-size: 14px",
|
|
style: "font-size: 14px",
|
|
sort: (a: string, b: string) =>
|
|
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
|
},
|
|
{
|
|
name: "currentSubDistrict",
|
|
align: "left",
|
|
label: "แขวง/ตำบลปัจจุบัน",
|
|
sortable: true,
|
|
field: "currentSubDistrict",
|
|
headerStyle: "font-size: 14px",
|
|
style: "font-size: 14px",
|
|
sort: (a: string, b: string) =>
|
|
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
|
},
|
|
{
|
|
name: "currentZipCode",
|
|
align: "left",
|
|
label: "รหัสไปรษณีย์ปัจจุบัน",
|
|
sortable: true,
|
|
field: "currentZipCode",
|
|
headerStyle: "font-size: 14px",
|
|
style: "font-size: 14px",
|
|
sort: (a: string, b: string) =>
|
|
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
|
},
|
|
{
|
|
name: "lastUpdateFullName",
|
|
align: "left",
|
|
label: "ผู้ดำเนินการ",
|
|
sortable: true,
|
|
field: "lastUpdateFullName",
|
|
headerStyle: "font-size: 14px",
|
|
style: "font-size: 14px",
|
|
sort: (a: string, b: string) =>
|
|
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
|
},
|
|
{
|
|
name: "lastUpdatedAt",
|
|
align: "left",
|
|
label: "วันที่แก้ไข",
|
|
sortable: true,
|
|
field: "lastUpdatedAt",
|
|
headerStyle: "font-size: 14px",
|
|
style: "font-size: 14px",
|
|
format: (v) => date2Thai(v),
|
|
sort: (a: string, b: string) =>
|
|
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
|
},
|
|
]);
|
|
|
|
function onHistory() {
|
|
modalHistory.value = true;
|
|
}
|
|
|
|
/** get data */
|
|
async function getData() {
|
|
showLoader();
|
|
http
|
|
.get(config.API.dataUserAddressByType(link.value))
|
|
.then((res) => {
|
|
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.registrationProvinceId;
|
|
formData.registrationDistrict = data.registrationDistrictId;
|
|
formData.registrationSubDistrict = data.registrationSubDistrictId;
|
|
formData.registrationZipCode = data.registrationZipCode;
|
|
|
|
formData.currentAddress = data.currentAddress;
|
|
formData.currentProvince = data.currentProvinceId;
|
|
formData.currentDistrict = data.currentDistrictId;
|
|
formData.currentSubDistrict = data.currentSubDistrictId;
|
|
formData.currentZipCode = data.currentZipCode;
|
|
})
|
|
.catch((e) => {
|
|
messageError($q, e);
|
|
})
|
|
.finally(() => {
|
|
setTimeout(() => {
|
|
hideLoader();
|
|
}, 2000);
|
|
});
|
|
}
|
|
|
|
/** get history */
|
|
function getHistory() {
|
|
const url =
|
|
dataStore.officerType == "OFFICER"
|
|
? config.API.dataUserHistory("")
|
|
: config.API.dataUserHistory("-employee");
|
|
showLoader();
|
|
http
|
|
.get(url)
|
|
.then((res) => {
|
|
const data = res.data.result;
|
|
rowsHistory.value = data;
|
|
console.log("🚀 ~ .then ~ data:", data)
|
|
rowsHistoryData.value = data;
|
|
})
|
|
.catch((e) => {
|
|
messageError($q, e);
|
|
})
|
|
.finally(() => {
|
|
hideLoader();
|
|
});
|
|
}
|
|
|
|
/**
|
|
*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 () => {
|
|
link.value = await dataStore.getProFileType();
|
|
await fetchProvince();
|
|
await getData();
|
|
});
|
|
</script>
|
|
<template>
|
|
<div class="col-12">
|
|
<q-toolbar class="q-px-none">
|
|
<span class="text-blue-6 text-weight-bold text-body1">ข้อมูลที่อยู่</span>
|
|
<q-space />
|
|
<q-btn
|
|
icon="mdi-history"
|
|
color="info"
|
|
flat
|
|
dense
|
|
round
|
|
size="14px"
|
|
@click="onHistory"
|
|
>
|
|
<q-tooltip>ประวัติข้อมูลที่อยู่</q-tooltip>
|
|
</q-btn>
|
|
</q-toolbar>
|
|
|
|
<div class="row q-col-gutter-sm">
|
|
<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 />
|
|
<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.registrationAddress
|
|
? formData.registrationAddress
|
|
: "-"
|
|
}}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-5 text-grey-6 text-weight-medium">จังหวัด</div>
|
|
<div class="col-7">
|
|
{{
|
|
formData.registrationProvince
|
|
? convertProvinceName(formData.registrationProvince)
|
|
: "-"
|
|
}}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-5 text-grey-6 text-weight-medium">
|
|
เขต / อำเภอ
|
|
</div>
|
|
<div class="col-7">
|
|
{{
|
|
formData.registrationDistrict
|
|
? convertDistrictName(formData.registrationDistrict, "1")
|
|
: "-"
|
|
}}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-5 text-grey-6 text-weight-medium">
|
|
แขวง / ตำบล
|
|
</div>
|
|
<div class="col-7">
|
|
{{
|
|
formData.registrationSubDistrict
|
|
? convertSubDistrictName(
|
|
formData.registrationSubDistrict,
|
|
"1"
|
|
)
|
|
: "-"
|
|
}}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-5 text-grey-6 text-weight-medium">
|
|
รหัสไปรษณีย์
|
|
</div>
|
|
<div class="col-7">
|
|
{{
|
|
formData.registrationZipCode
|
|
? formData.registrationZipCode
|
|
: "-"
|
|
}}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</q-card-section>
|
|
</q-card>
|
|
</div>
|
|
<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 />
|
|
<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 : "-" }}
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-5 text-grey-6 text-weight-medium">จังหวัด</div>
|
|
<div class="col-7">
|
|
{{
|
|
formData.currentProvince
|
|
? convertProvinceName(formData.currentProvince)
|
|
: "-"
|
|
}}
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-5 text-grey-6 text-weight-medium">
|
|
เขต / อำเภอ
|
|
</div>
|
|
<div class="col-7">
|
|
{{
|
|
formData.currentDistrict
|
|
? convertDistrictName(formData.currentDistrict, "2")
|
|
: "-"
|
|
}}
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-5 text-grey-6 text-weight-medium">
|
|
แขวง / ตำบล
|
|
</div>
|
|
<div class="col-7">
|
|
{{
|
|
formData.currentSubDistrict
|
|
? convertSubDistrictName(formData.currentSubDistrict, "2")
|
|
: "-"
|
|
}}
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-5 text-grey-6 text-weight-medium">
|
|
รหัสไปรษณีย์
|
|
</div>
|
|
<div class="col-7">
|
|
{{ formData.currentZipCode ? formData.currentZipCode : "-" }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</q-card-section>
|
|
</q-card>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<DialogHistory
|
|
v-model:modal="modalHistory"
|
|
:title="'ประวัติแก้ไขข้อมูลที่อยู่'"
|
|
:getData="getHistory"
|
|
:rows="rowsHistory"
|
|
:rows-data="rowsHistoryData"
|
|
:visibleColumns="visibleColumnsHistory"
|
|
:columns="columnsHistory"
|
|
/>
|
|
</template>
|