ทะเบียนประวัติ: ข้อมูลที่อยู่ (history, การ fetch ข้อมูล)
This commit is contained in:
puriphatt
parent
569ab2931a
commit
cc90c26942
5 changed files with 129 additions and 229 deletions
|
|
@ -37,14 +37,14 @@ const profileId = ref<string>(
|
|||
route.params.id ? route.params.id.toString() : ""
|
||||
);
|
||||
|
||||
const statusAdd = ref(false);
|
||||
const modal = ref<boolean>(false);
|
||||
const modalHistory = ref<boolean>(false);
|
||||
const rowsHistory = ref<ResponseObject[]>([]);
|
||||
const tittleHistory = ref<string>("ประวัติแก้ไขข้อมูลที่อยู่"); //
|
||||
const tittleHistory = ref<string>("ประวัติแก้ไขข้อมูลที่อยู่");
|
||||
const filterHistory = ref<string>("");
|
||||
|
||||
const id = ref<string>("");
|
||||
const rawSameAddress = ref<string>("0");
|
||||
const sameAddress = ref<string>("0");
|
||||
const addressData = reactive<ResponseObject>(store.defaultAddress);
|
||||
const formData = reactive<RequestObject>(store.defaultAddressForm);
|
||||
|
|
@ -111,6 +111,7 @@ const columnsHistory = ref<QTableProps["columns"]>([
|
|||
field: "registrationProvince",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
format: (v) => (v ? v.name : "-"),
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
|
|
@ -122,6 +123,7 @@ const columnsHistory = ref<QTableProps["columns"]>([
|
|||
field: "registrationDistrict",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
format: (v) => (v ? v.name : "-"),
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
|
|
@ -133,6 +135,7 @@ const columnsHistory = ref<QTableProps["columns"]>([
|
|||
field: "registrationSubDistrict",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
format: (v) => (v ? v.name : "-"),
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
|
|
@ -152,7 +155,11 @@ const columnsHistory = ref<QTableProps["columns"]>([
|
|||
align: "left",
|
||||
label: "ที่อยู่ปัจจุบันตรงกับที่อยู่ตามทะเบียนบ้าน",
|
||||
sortable: true,
|
||||
field: "registrationSame",
|
||||
field: (v) =>
|
||||
v.registrationAddress === v.currentAddress &&
|
||||
v.registrationZipCode === v.currentZipCode
|
||||
? "ใช่"
|
||||
: "ไม่",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
sort: (a: string, b: string) =>
|
||||
|
|
@ -177,6 +184,7 @@ const columnsHistory = ref<QTableProps["columns"]>([
|
|||
field: "currentProvince",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
format: (v) => (v ? v.name : "-"),
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
|
|
@ -188,6 +196,7 @@ const columnsHistory = ref<QTableProps["columns"]>([
|
|||
field: "currentDistrict",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
format: (v) => (v ? v.name : "-"),
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
|
|
@ -199,6 +208,7 @@ const columnsHistory = ref<QTableProps["columns"]>([
|
|||
field: "currentSubDistrict",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
format: (v) => (v ? v.name : "-"),
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
|
|
@ -232,6 +242,7 @@ const columnsHistory = ref<QTableProps["columns"]>([
|
|||
field: "createdAt",
|
||||
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" }),
|
||||
},
|
||||
|
|
@ -246,13 +257,16 @@ async function getData() {
|
|||
|
||||
if (addressData) {
|
||||
id.value = addressData.id;
|
||||
if (
|
||||
addressData.currentAddress === addressData.registrationAddress &&
|
||||
addressData.currentZipCode === addressData.registrationZipCode
|
||||
) {
|
||||
sameAddress.value = "1";
|
||||
}
|
||||
addressData.currentAddress === addressData.registrationAddress &&
|
||||
addressData.currentZipCode === addressData.registrationZipCode &&
|
||||
addressData.currentAddress &&
|
||||
addressData.registrationAddress &&
|
||||
addressData.currentZipCode &&
|
||||
addressData.registrationZipCode
|
||||
? (rawSameAddress.value = "1")
|
||||
: (rawSameAddress.value = "0");
|
||||
}
|
||||
sameAddress.value = rawSameAddress.value;
|
||||
})
|
||||
.catch((e) => {
|
||||
messageError($q, e);
|
||||
|
|
@ -262,131 +276,64 @@ async function getData() {
|
|||
});
|
||||
}
|
||||
|
||||
async function getProvince() {
|
||||
await fetchProvince();
|
||||
const checkRegistProvinceId = await store.Ops.provinceOps.find(
|
||||
(e: any) => e.id === addressData.registrationProvinceId
|
||||
);
|
||||
if (!checkRegistProvinceId) {
|
||||
addressData.registrationProvinceId = "";
|
||||
addressData.registrationDistrictId = "";
|
||||
addressData.registrationSubDistrictId = "";
|
||||
addressData.registrationZipCode = "";
|
||||
}
|
||||
const checkCurrentProvinceId = await store.Ops.provinceOps.find(
|
||||
(e: any) => e.id === addressData.currentProvinceId
|
||||
);
|
||||
if (!checkCurrentProvinceId) {
|
||||
addressData.currentProvinceId = "";
|
||||
addressData.currentDistrictId = "";
|
||||
addressData.currentSubDistrictId = "";
|
||||
addressData.currentZipCode = "";
|
||||
}
|
||||
}
|
||||
|
||||
async function getDistrict(id: string | null, position: string) {
|
||||
if (!id) return;
|
||||
await fetchDistrict(id, position);
|
||||
|
||||
if (position == "1") {
|
||||
const checkRegistDistrictId = await store.Ops.districtOps.find(
|
||||
(e: any) => e.id === addressData.registrationDistrictId
|
||||
);
|
||||
if (!checkRegistDistrictId) {
|
||||
addressData.registrationDistrictId = "";
|
||||
addressData.registrationSubDistrictId = "";
|
||||
addressData.registrationZipCode = "";
|
||||
}
|
||||
} else {
|
||||
const checkCurrentDistrictIdC = await store.Ops.districtCOps.find(
|
||||
(e: any) => e.id === addressData.currentDistrictId
|
||||
);
|
||||
if (!checkCurrentDistrictIdC) {
|
||||
addressData.currentDistrictId = "";
|
||||
addressData.currentSubDistrictId = "";
|
||||
addressData.currentZipCode = "";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
async function getSubDistrict(id: string | null, position: string) {
|
||||
if (!id) return;
|
||||
await fetchSubDistrict(id, position);
|
||||
if (position == "1") {
|
||||
const checkRegistSubdistrictId = await store.Ops.subdistrictOps.find(
|
||||
(e: any) => e.id === addressData.registrationSubDistrictId
|
||||
);
|
||||
if (!checkRegistSubdistrictId) {
|
||||
addressData.registrationSubDistrictId = "";
|
||||
addressData.registrationZipCode = "";
|
||||
}
|
||||
} else {
|
||||
const checkCurrentSubdistrictIdC = await store.Ops.subdistrictCOps.find(
|
||||
(e: any) => e.id === addressData.currentSubDistrictId
|
||||
);
|
||||
if (!checkCurrentSubdistrictIdC) {
|
||||
addressData.currentSubDistrictId = "";
|
||||
addressData.currentZipCode = "";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
async function selectProvince(e: string | null, name: string) {
|
||||
if (e != null) {
|
||||
if (name == "1") {
|
||||
formData.registrationDistrictId = "";
|
||||
formData.registrationSubDistrictId = "";
|
||||
formData.registrationZipCode = "";
|
||||
} else {
|
||||
formData.currentDistrictId = "";
|
||||
formData.currentSubDistrictId = "";
|
||||
formData.currentZipCode = "";
|
||||
}
|
||||
await fetchDistrict(e, name);
|
||||
if (!e) return;
|
||||
if (name == "1") {
|
||||
formData.registrationDistrictId = "";
|
||||
formData.registrationSubDistrictId = "";
|
||||
formData.registrationZipCode = "";
|
||||
} else {
|
||||
formData.currentDistrictId = "";
|
||||
formData.currentSubDistrictId = "";
|
||||
formData.currentZipCode = "";
|
||||
}
|
||||
await fetchDistrict(e, name);
|
||||
}
|
||||
|
||||
async function selectDistrict(e: string | null, name: string) {
|
||||
if (e != null) {
|
||||
if (name == "1") {
|
||||
formData.registrationSubDistrictId = "";
|
||||
formData.registrationZipCode = "";
|
||||
} else {
|
||||
formData.currentSubDistrictId = "";
|
||||
formData.currentZipCode = "";
|
||||
}
|
||||
await fetchSubDistrict(e, name);
|
||||
if (!e) return;
|
||||
if (name == "1") {
|
||||
formData.registrationSubDistrictId = "";
|
||||
formData.registrationZipCode = "";
|
||||
} else {
|
||||
formData.currentSubDistrictId = "";
|
||||
formData.currentZipCode = "";
|
||||
}
|
||||
await fetchSubDistrict(e, name);
|
||||
}
|
||||
|
||||
function selectSubDistrict(e: string | null, name: string) {
|
||||
if (e != null) {
|
||||
if (name == "1") {
|
||||
const findcode = store.Ops.subdistrictOps.filter((r) => r.id == e);
|
||||
const namecode = findcode.length > 0 ? findcode[0].zipCode : "";
|
||||
formData.registrationZipCode = namecode;
|
||||
} else {
|
||||
const findcode = store.Ops.subdistrictCOps.filter((r) => r.id == e);
|
||||
const namecode = findcode.length > 0 ? findcode[0].zipCode : "";
|
||||
formData.currentZipCode = namecode;
|
||||
}
|
||||
if (!e) return;
|
||||
if (name == "1") {
|
||||
const findcode = store.Ops.subdistrictOps.filter((r) => r.id == e);
|
||||
const namecode = findcode.length > 0 ? findcode[0].zipCode : "";
|
||||
formData.registrationZipCode = namecode;
|
||||
} else {
|
||||
const findcode = store.Ops.subdistrictCOps.filter((r) => r.id == e);
|
||||
const namecode = findcode.length > 0 ? findcode[0].zipCode : "";
|
||||
formData.currentZipCode = namecode;
|
||||
}
|
||||
}
|
||||
|
||||
async function fetchAll() {
|
||||
await getData();
|
||||
if (!store.profileIdBefore) {
|
||||
store.profileIdBefore = profileId.value;
|
||||
}
|
||||
if (
|
||||
store.Ops.provinceOps.length === 0 ||
|
||||
store.Ops.districtOps.length === 0 ||
|
||||
store.Ops.districtCOps.length === 0 ||
|
||||
store.Ops.subdistrictOps.length === 0 ||
|
||||
store.Ops.subdistrictCOps.length === 0
|
||||
store.Ops.subdistrictCOps.length === 0 ||
|
||||
store.profileIdBefore !== profileId.value
|
||||
) {
|
||||
await getProvince();
|
||||
await getDistrict(addressData.registrationProvinceId, "1");
|
||||
await getDistrict(addressData.currentProvinceId, "2");
|
||||
await getSubDistrict(addressData.registrationDistrictId, "1");
|
||||
await getSubDistrict(addressData.currentDistrictId, "2");
|
||||
await fetchProvince();
|
||||
await fetchDistrict(addressData.registrationProvinceId, "1");
|
||||
await fetchDistrict(addressData.currentProvinceId, "2");
|
||||
await fetchSubDistrict(addressData.registrationDistrictId, "1");
|
||||
await fetchSubDistrict(addressData.currentDistrictId, "2");
|
||||
store.profileIdBefore = profileId.value;
|
||||
}
|
||||
|
||||
adsName.regisP = findData(
|
||||
|
|
@ -436,10 +383,38 @@ async function editData() {
|
|||
});
|
||||
}
|
||||
|
||||
function onClickOpenDialog() {
|
||||
function clickClose() {
|
||||
Object.assign(formData, store.defaultAddressForm);
|
||||
modal.value = false;
|
||||
}
|
||||
|
||||
async function onClickOpenDialog() {
|
||||
if (!addressData) return;
|
||||
await Object.assign(formData, addressData);
|
||||
const checkDistrict = await store.Ops.districtOps.some(
|
||||
(e: any) => e.id === addressData.registrationDistrictId
|
||||
);
|
||||
const checkSubDistrict = await store.Ops.subdistrictOps.some(
|
||||
(e: any) => e.id === addressData.registrationSubDistrictId
|
||||
);
|
||||
const checkDistrictC = await store.Ops.districtCOps.some(
|
||||
(e: any) => e.id === addressData.currentDistrictId
|
||||
);
|
||||
const checkSubDistrictC = await store.Ops.subdistrictCOps.some(
|
||||
(e: any) => e.id === addressData.currentSubDistrictId
|
||||
);
|
||||
|
||||
modal.value = true;
|
||||
Object.assign(formData, addressData);
|
||||
sameAddress.value = rawSameAddress.value;
|
||||
|
||||
if (!checkDistrict || !checkSubDistrict) {
|
||||
await fetchDistrict(addressData.registrationProvinceId, "1");
|
||||
await fetchSubDistrict(addressData.registrationDistrictId, "1");
|
||||
}
|
||||
if (!checkDistrictC || !checkSubDistrictC) {
|
||||
await fetchDistrict(addressData.currentProvinceId, "2");
|
||||
await fetchSubDistrict(addressData.currentDistrictId, "2");
|
||||
}
|
||||
}
|
||||
|
||||
async function clickHistory() {
|
||||
|
|
@ -448,7 +423,6 @@ async function clickHistory() {
|
|||
.get(config.API.profileNewAddressHisById(id.value))
|
||||
.then((res) => {
|
||||
rowsHistory.value = res.data.result;
|
||||
console.log(rowsHistory.value);
|
||||
})
|
||||
.catch((e) => {
|
||||
messageError($q, e);
|
||||
|
|
@ -462,6 +436,15 @@ function onSubmit() {
|
|||
dialogConfirm(
|
||||
$q,
|
||||
async () => {
|
||||
if (sameAddress.value === "1") {
|
||||
formData.currentAddress = formData.registrationAddress;
|
||||
formData.currentProvinceId = formData.registrationProvinceId;
|
||||
formData.currentDistrictId = formData.registrationDistrictId;
|
||||
formData.currentSubDistrictId = formData.registrationSubDistrictId;
|
||||
formData.currentZipCode = formData.registrationZipCode;
|
||||
store.Ops.districtCOps = store.Ops.districtOps;
|
||||
store.Ops.subdistrictCOps = store.Ops.subdistrictOps;
|
||||
}
|
||||
editData();
|
||||
modal.value = false;
|
||||
},
|
||||
|
|
@ -470,18 +453,22 @@ function onSubmit() {
|
|||
);
|
||||
}
|
||||
|
||||
function sameAddressToggle(v: string) {
|
||||
if (v === "0") {
|
||||
formData.currentAddress = "";
|
||||
formData.currentProvinceId = "";
|
||||
formData.currentDistrictId = "";
|
||||
formData.currentSubDistrictId = "";
|
||||
formData.currentZipCode = "";
|
||||
store.Ops.districtCOps = [];
|
||||
store.Ops.subdistrictCOps = [];
|
||||
}
|
||||
}
|
||||
|
||||
watch(
|
||||
() => sameAddress.value,
|
||||
(v) => {
|
||||
if (v === "1") {
|
||||
formData.currentAddress = formData.registrationAddress;
|
||||
formData.currentProvinceId = formData.registrationProvinceId;
|
||||
formData.currentDistrictId = formData.registrationDistrictId;
|
||||
formData.currentSubDistrictId = formData.registrationSubDistrictId;
|
||||
formData.currentZipCode = formData.registrationZipCode;
|
||||
store.Ops.districtCOps = store.Ops.districtOps
|
||||
store.Ops.subdistrictCOps = store.Ops.subdistrictOps
|
||||
}
|
||||
sameAddressToggle(v);
|
||||
}
|
||||
);
|
||||
|
||||
|
|
@ -581,10 +568,7 @@ onMounted(async () => {
|
|||
<q-dialog v-model="modal" persistent>
|
||||
<q-card style="width: 600px">
|
||||
<q-form greedy @submit.prevent @validation-success="onSubmit">
|
||||
<DialogHeader
|
||||
tittle="แก้ไขข้อมูลที่อยู่"
|
||||
:close="() => (modal = false)"
|
||||
/>
|
||||
<DialogHeader tittle="แก้ไขข้อมูลที่อยู่" :close="clickClose" />
|
||||
<q-separator />
|
||||
<!-- regis address -->
|
||||
<q-card-section class="q-p-sm">
|
||||
|
|
@ -839,16 +823,7 @@ onMounted(async () => {
|
|||
<template #columns="props">
|
||||
<q-tr :props="props">
|
||||
<q-td v-for="col in props.cols" :key="col.name" :props="props">
|
||||
<div v-if="col.name == 'createdAt'" class="table_ellipsis">
|
||||
{{ date2Thai(col.value) }}
|
||||
</div>
|
||||
<div
|
||||
v-else-if="col.name == 'registrationSame'"
|
||||
class="table_ellipsis"
|
||||
>
|
||||
{{ col.value ? "ใช่" : "ไม่" }}
|
||||
</div>
|
||||
<div v-else class="table_ellipsis">
|
||||
<div class="table_ellipsis">
|
||||
{{ col.value }}
|
||||
</div>
|
||||
</q-td>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue