hrms-bangkok/hrms-mgt
7
0
Fork 0
Code Issues Pull requests Projects Releases Packages 1 Wiki Activity Actions

ทะเบียนประวัติ: ข้อมูลที่อยู่

Browse source
This commit is contained in:
puriphatt 2024-03-27 18:32:03 +07:00
parent 4c3d5c8fb8
commit ba9fea5515
5 changed files with 510 additions and 519 deletions
Download patch file Download diff file Expand all files Collapse all files

7
src/api/registry/api.registry.ts
View file

@ -22,6 +22,13 @@ export default {
profileNewProfileHisById: (dataId: string) =>
`${registryNew}history/${dataId}`,
// ข้อมูลที่อยู่
profileNewAddressByProfileId: (profileId: string) =>
`${registryNew}address/${profileId}`,
profileNewAddressById: (dataId: string) => `${registryNew}address/${dataId}`,
profileNewAddressHisById: (dataId: string) =>
`${registryNew}address/history/${dataId}`,
// บันทึกวันที่ไม่ได้รับเงินเดือนฯ
profileNewNoPaid: `${registryNew}nopaid`,
profileNewNoPaidByProfileId: (profileId: string) =>

721
src/modules/04_registryNew/components/detail/PersonalInformation/03_Address.vue
View file

@ -1,5 +1,5 @@
<script setup lang="ts">
import { onMounted, ref } from "vue";
import { onMounted, ref, reactive, watch } from "vue";
import { useRoute } from "vue-router";
import { useQuasar } from "quasar";
import type { QTableProps } from "quasar";
@ -9,45 +9,54 @@ import config from "@/app.config";
import DialogHeader from "@/components/DialogHeader.vue";
import HistoryTable from "@/components/TableHistory.vue";
import { useCounterMixin } from "@/stores/mixin";
import type {
DataOption,
AddressOps,
zipCodeOption,
Address,
} from "@/modules/04_registryNew/interface/index/Main";
import { defaultAddress } from "@/modules/04_registryNew/interface/index/Main";
import { useAddressDataStore } from "@/modules/04_registryNew/stores/Address";
import type { ResponseObject } from "@/modules/04_registryNew/interface/response/Address";
import type { RequestItemsHistoryObject } from "@/modules/04_registryNew/interface/request/Address";
import type { RequestObject } from "@/modules/04_registryNew/interface/request/Address";
const $q = useQuasar();
const store = useAddressDataStore();
const mixin = useCounterMixin();
const route = useRoute();
const { date2Thai, success, messageError, showLoader, hideLoader } = mixin;
const {
fetchProvince,
fetchDistrict,
fetchSubDistrict,
findData,
filterSelector,
} = store;
const {
date2Thai,
success,
messageError,
showLoader,
hideLoader,
dialogConfirm,
} = mixin;
const profileId = ref<string>(
route.params.id ? route.params.id.toString() : ""
);
const statusAdd = ref(false);
const isLoad = ref<number>(0);
const modal = ref<boolean>(false);
const myForm = ref<any>();
const rowsHistory = ref<RequestItemsHistoryObject[]>([]);
const modalHistory = ref<boolean>(false);
const rowsHistory = ref<ResponseObject[]>([]);
const tittleHistory = ref<string>("ประวัติแก้ไขข้อมูลที่อยู่"); //
const filterHistory = ref<string>("");
const modalHistory = ref<boolean>(false);
const addressData = ref<Address>(defaultAddress);
// mock data
const resultData = ref({
registrationAddress: "123123488",
registrationProvinceId: "24b22b3c-67aa-4631-bf7c-69ec6b735767",
registrationDistrictId: "ce9a2984-938f-454c-a758-26dcf8176afe",
registrationSubDistrictId: "97dba284-7cdc-45c6-863c-9590810fe8e2",
registrationZipCode: "50100",
const id = ref<string>("");
const sameAddress = ref<string>("0");
const addressData = reactive<ResponseObject>(store.defaultAddress);
const formData = reactive<RequestObject>(store.defaultAddressForm);
currentAddress: "66664444",
currentProvinceId: "24b22b3c-67aa-4631-bf7c-69ec6b735767",
currentDistrictId: "ce9a2984-938f-454c-a758-26dcf8176afe",
currentSubDistrictId: "97dba284-7cdc-45c6-863c-9590810fe8e2",
currentZipCode: "50100",
registrationSame: "0",
const adsName = reactive({
regisP: "",
regisD: "",
regisSD: "",
currentP: "",
currentD: "",
currentSD: "",
});
const dataLabel = {
@ -228,135 +237,21 @@ const columnsHistory = ref<QTableProps["columns"]>([
},
]);
const Ops = ref<AddressOps>({
provinceOps: [],
districtOps: [],
districtCOps: [],
subdistrictOps: [],
subdistrictCOps: [],
});
const OpsFilter = ref<AddressOps>({
provinceOps: [],
districtOps: [],
districtCOps: [],
subdistrictOps: [],
subdistrictCOps: [],
});
function defaultAdd() {
if (statusAdd) {
addressData.value = {
address: null,
provinceId: null,
districtId: null,
subdistrictId: null,
addressC: null,
provinceIdC: null,
districtIdC: null,
subdistrictIdC: null,
codep: null,
codec: null,
same: "0",
};
}
}
async function fetchData() {
// mock data
addressData.value.address = resultData.value.registrationAddress;
addressData.value.provinceId = resultData.value.registrationProvinceId;
addressData.value.districtId = resultData.value.registrationDistrictId;
addressData.value.subdistrictId = resultData.value.registrationSubDistrictId;
addressData.value.codep = resultData.value.registrationZipCode;
addressData.value.same = resultData.value.registrationSame;
addressData.value.addressC = resultData.value.currentAddress;
addressData.value.provinceIdC = resultData.value.currentProvinceId;
addressData.value.districtIdC = resultData.value.currentDistrictId;
addressData.value.subdistrictIdC = resultData.value.currentSubDistrictId;
addressData.value.codec = resultData.value.currentZipCode;
// if (route.params.id) {
// // showLoader();
// await http
// .get(config.API.profileAdrsId(route.params.id.toString()))
// .then((res) => {
// const data: ResponseObject = res.data.result;
// addressData.value.address = data.registrationAddress;
// addressData.value.addressC = data.currentAddress;
// addressData.value.districtId =
// data.registrationDistrictId !== "00000000-0000-0000-0000-000000000000"
// ? data.registrationDistrictId
// : "";
// addressData.value.districtIdC =
// data.currentDistrictId !== "00000000-0000-0000-0000-000000000000"
// ? data.currentDistrictId
// : "";
// addressData.value.provinceId =
// data.registrationProvinceId !== "00000000-0000-0000-0000-000000000000"
// ? data.registrationProvinceId
// : "";
// addressData.value.provinceIdC =
// data.currentProvinceId !== "00000000-0000-0000-0000-000000000000"
// ? data.currentProvinceId
// : "";
// addressData.value.subdistrictId =
// data.registrationSubDistrictId !==
// "00000000-0000-0000-0000-000000000000"
// ? data.registrationSubDistrictId
// : "";
// addressData.value.subdistrictIdC =
// data.currentSubDistrictId !== "00000000-0000-0000-0000-000000000000"
// ? data.currentSubDistrictId
// : "";
// addressData.value.same = data.registrationSame ? "1" : "0";
// addressData.value.codec = data.currentZipCode;
// addressData.value.codep = data.registrationZipCode;
// })
// .catch((e) => {
// messageError($q, e);
// })
// .finally(() => {
// // hideLoader();
// isLoad.value++;
// });
// }
}
async function fetchProvince() {
async function getData() {
showLoader();
await http
.get(config.API.province)
.then(async (res) => {
const data = res.data.result;
let option: DataOption[] = [];
data.map((r: any) => {
option.push({ id: r.id.toString(), name: r.name.toString() });
});
Ops.value.provinceOps = option;
OpsFilter.value.provinceOps = option;
.get(config.API.profileNewAddressByProfileId(profileId.value))
.then((res) => {
Object.assign(addressData, res.data.result);
const checkRegistProvinceId = await option.find(
(e: any) => e.id === addressData.value.provinceId
);
if (checkRegistProvinceId) {
addressData.value = addressData.value;
} else {
addressData.value.provinceId = "";
addressData.value.districtId = "";
addressData.value.subdistrictId = "";
addressData.value.codep = "";
}
const checkCurrentProvinceId = await option.find(
(e: any) => e.id === addressData.value.provinceIdC
);
if (checkCurrentProvinceId) {
addressData.value = addressData.value;
} else {
addressData.value.provinceIdC = "";
addressData.value.districtIdC = "";
addressData.value.subdistrictIdC = "";
addressData.value.codec = "";
if (addressData) {
id.value = addressData.id;
if (
addressData.currentAddress === addressData.registrationAddress &&
addressData.currentZipCode === addressData.registrationZipCode
) {
sameAddress.value = "1";
}
}
})
.catch((e) => {
@ -364,132 +259,89 @@ async function fetchProvince() {
})
.finally(() => {
hideLoader();
isLoad.value++;
});
}
async function fetchDistrict(id: string | null, position: string) {
if (id != null && id != "") {
showLoader();
await http
.get(config.API.listDistrict(id))
.then(async (res) => {
const data = res.data.result;
let option: DataOption[] = [];
data.map((r: any) => {
option.push({ id: r.id.toString(), name: r.name.toString() });
});
if (position == "1") {
Ops.value.districtOps = option;
OpsFilter.value.districtOps = option;
const checkRegistDistrictId = await option.find(
(e: any) => e.id === addressData.value.districtId
);
if (checkRegistDistrictId) {
addressData.value.districtId = addressData.value.districtId;
addressData.value.subdistrictId = addressData.value.subdistrictId;
addressData.value.codep = addressData.value.codep;
} else {
addressData.value.districtId = "";
addressData.value.subdistrictId = "";
addressData.value.codep = "";
}
} else {
Ops.value.districtCOps = option;
OpsFilter.value.districtCOps = option;
const checkCurrentDistrictIdC = await option.find(
(e: any) => e.id === addressData.value.districtIdC
);
if (checkCurrentDistrictIdC) {
addressData.value.districtIdC = addressData.value.districtIdC;
addressData.value.subdistrictIdC = addressData.value.subdistrictIdC;
addressData.value.codec = addressData.value.codec;
} else {
addressData.value.districtIdC = "";
addressData.value.subdistrictIdC = "";
addressData.value.codec = "";
}
}
})
.catch((e) => {
messageError($q, e);
})
.finally(() => {
hideLoader();
isLoad.value++;
});
} else isLoad.value++;
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 fetchSubDistrict(id: string | null, position: string) {
if (id != null && id != "") {
showLoader();
await http
.get(config.API.listSubDistrict(id))
.then(async (res) => {
const data = res.data.result;
let option: zipCodeOption[] = [];
data.map((r: any) => {
option.push({
id: r.id.toString(),
name: r.name.toString(),
zipCode: r.zipCode.toString(),
});
});
if (position == "1") {
Ops.value.subdistrictOps = option;
OpsFilter.value.subdistrictOps = option;
async function getDistrict(id: string | null, position: string) {
if (!id) return;
await fetchDistrict(id, position);
const checkRegistSubdistrictId = await option.find(
(e: any) => e.id === addressData.value.subdistrictId
);
if (checkRegistSubdistrictId) {
addressData.value.subdistrictId = addressData.value.subdistrictId;
addressData.value.codep = addressData.value.codep;
} else {
addressData.value.subdistrictId = "";
addressData.value.codep = "";
}
} else {
Ops.value.subdistrictCOps = option;
OpsFilter.value.subdistrictCOps = option;
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 = "";
}
}
}
const checkCurrentSubdistrictIdC = await option.find(
(e: any) => e.id === addressData.value.subdistrictIdC
);
if (checkCurrentSubdistrictIdC) {
addressData.value.subdistrictIdC = addressData.value.subdistrictIdC;
addressData.value.codec = addressData.value.codec;
} else {
addressData.value.subdistrictIdC = "";
addressData.value.codec = "";
}
}
})
.catch((e) => {
messageError($q, e);
})
.finally(() => {
hideLoader();
isLoad.value++;
});
} else isLoad.value++;
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") {
addressData.value.districtId = "";
addressData.value.subdistrictId = "";
addressData.value.codep = "";
formData.registrationDistrictId = "";
formData.registrationSubDistrictId = "";
formData.registrationZipCode = "";
} else {
addressData.value.districtIdC = "";
addressData.value.subdistrictIdC = "";
addressData.value.codec = "";
formData.currentDistrictId = "";
formData.currentSubDistrictId = "";
formData.currentZipCode = "";
}
myForm.value.resetValidation();
await fetchDistrict(e, name);
}
}
@ -497,13 +349,12 @@ async function selectProvince(e: string | null, name: string) {
async function selectDistrict(e: string | null, name: string) {
if (e != null) {
if (name == "1") {
addressData.value.subdistrictId = "";
addressData.value.codep = "";
formData.registrationSubDistrictId = "";
formData.registrationZipCode = "";
} else {
addressData.value.subdistrictIdC = "";
addressData.value.codec = "";
formData.currentSubDistrictId = "";
formData.currentZipCode = "";
}
myForm.value.resetValidation();
await fetchSubDistrict(e, name);
}
}
@ -511,115 +362,131 @@ async function selectDistrict(e: string | null, name: string) {
function selectSubDistrict(e: string | null, name: string) {
if (e != null) {
if (name == "1") {
const findcode = Ops.value.subdistrictOps.filter((r) => r.id == e);
const findcode = store.Ops.subdistrictOps.filter((r) => r.id == e);
const namecode = findcode.length > 0 ? findcode[0].zipCode : "";
addressData.value.codep = namecode;
formData.registrationZipCode = namecode;
} else {
const findcode = Ops.value.subdistrictCOps.filter((r) => r.id == e);
const findcode = store.Ops.subdistrictCOps.filter((r) => r.id == e);
const namecode = findcode.length > 0 ? findcode[0].zipCode : "";
addressData.value.codec = namecode;
formData.currentZipCode = namecode;
}
}
}
async function getNewData() {
await fetchData();
await fetchProvince();
await fetchDistrict(addressData.value.provinceId, "1");
await fetchDistrict(addressData.value.provinceIdC, "2");
await fetchSubDistrict(addressData.value.districtId, "1");
await fetchSubDistrict(addressData.value.districtIdC, "2");
async function fetchAll() {
await getData();
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
) {
await getProvince();
await getDistrict(addressData.registrationProvinceId, "1");
await getDistrict(addressData.currentProvinceId, "2");
await getSubDistrict(addressData.registrationDistrictId, "1");
await getSubDistrict(addressData.currentDistrictId, "2");
}
adsName.regisP = findData(
store.Ops.provinceOps,
addressData.registrationProvinceId
).name;
adsName.regisD = findData(
store.Ops.districtOps,
addressData.registrationDistrictId
).name;
adsName.regisSD = findData(
store.Ops.subdistrictOps,
addressData.registrationSubDistrictId
).name;
adsName.currentP = findData(
store.Ops.provinceOps,
addressData.currentProvinceId
).name;
adsName.currentD = findData(
store.Ops.districtCOps,
addressData.currentDistrictId
).name;
adsName.currentSD = findData(
store.Ops.subdistrictCOps,
addressData.currentSubDistrictId
).name;
}
function filterSelector(val: any, update: Function, refData: string) {
switch (refData) {
case "provinceOps":
update(() => {
Ops.value.provinceOps = OpsFilter.value.provinceOps.filter(
(v: DataOption) => v.name.indexOf(val) > -1
);
});
break;
case "districtOps":
update(() => {
Ops.value.districtOps = OpsFilter.value.districtOps.filter(
(v: DataOption) => v.name.indexOf(val) > -1
);
});
break;
case "districtCOps":
update(() => {
Ops.value.districtCOps = OpsFilter.value.districtCOps.filter(
(v: DataOption) => v.name.indexOf(val) > -1
);
});
break;
case "subdistrictOps":
update(() => {
Ops.value.subdistrictOps = OpsFilter.value.subdistrictOps.filter(
(v: DataOption) => v.name.indexOf(val) > -1
);
});
break;
case "subdistrictCOps":
update(() => {
Ops.value.subdistrictCOps = OpsFilter.value.subdistrictCOps.filter(
(v: DataOption) => v.name.indexOf(val) > -1
);
});
break;
async function editData() {
showLoader();
await http
.patch(config.API.profileNewAddressById(id.value), {
...formData,
id: undefined,
})
.then((res) => {
success($q, "บันทึกข้อมูลสำเร็จ");
fetchAll();
modal.value = false;
})
.catch((e) => {
messageError($q, e);
})
.finally(() => {
hideLoader();
});
}
default:
break;
}
function onClickOpenDialog() {
if (!addressData) return;
modal.value = true;
Object.assign(formData, addressData);
}
async function clickHistory() {
modalHistory.value = true;
// showLoader();
// await http
// .get(config.API.profileAdrsHisId(route.params.id.toString()))
// .then((res) => {
// let data = res.data.result;
// rowsHistory.value = [];
// data.map((e: RequestItemsHistoryObject) => {
// rowsHistory.value.push({
// currentAddress: e.currentAddress ?? "-",
// currentDistrict: e.currentDistrict ?? "-",
// currentProvince: e.currentProvince ?? "-",
// currentSubDistrict: e.currentSubDistrict ?? "-",
// currentZipCode: e.currentZipCode ?? "-",
// registrationSame: e.registrationSame,
// registrationAddress: e.registrationAddress ?? "-",
// registrationDistrict: e.registrationDistrict ?? "-",
// registrationProvince: e.registrationProvince ?? "-",
// registrationSubDistrict: e.registrationSubDistrict ?? "-",
// registrationZipCode: e.registrationZipCode ?? "-",
// createdFullName: e.createdFullName ?? "-",
// createdAt: new Date(e.createdAt) ?? "-",
// });
// });
// })
// .catch((e) => {
// messageError($q, e);
// })
// .finally(() => {
// hideLoader();
// });
await http
.get(config.API.profileNewAddressHisById(id.value))
.then((res) => {
rowsHistory.value = res.data.result;
console.log(rowsHistory.value);
})
.catch((e) => {
messageError($q, e);
})
.finally(() => {
hideLoader();
});
}
function onSubmit() {
myForm.value.validate().then(async (result: boolean) => {
if (result) {
// await saveData();
dialogConfirm(
$q,
async () => {
editData();
modal.value = false;
}
});
},
"ยืนยันการบันทึกข้อมูล",
"ต้องการยืนยันการบันทึกข้อมูลนี้หรือไม่ ?"
);
}
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
}
}
);
onMounted(async () => {
defaultAdd();
await getNewData();
await fetchAll();
});
</script>
<template>
@ -630,7 +497,7 @@ onMounted(async () => {
round
icon="mdi-pencil-outline"
color="primary"
@click="modal = true"
@click="onClickOpenDialog"
>
<q-tooltip>แก้ไขข้อมูล</q-tooltip>
</q-btn>
@ -644,7 +511,7 @@ onMounted(async () => {
<div :class="$q.screen.gt.xs ? 'row' : 'column'">
<!-- column 1 -->
<div class="col-md-6 col-12 row">
<div class="col-5 text-grey-6 text-weight-medium">
<div class="col-6 text-grey-6 text-weight-medium">
<div
v-for="label in Object.keys(dataLabel).slice(0, 5)"
class="q-py-xs"
@ -653,58 +520,34 @@ onMounted(async () => {
</div>
</div>
<!-- data -->
<div class="col-7">
<div class="col-6">
<div class="q-py-xs">
{{ addressData.address }}
{{ addressData.registrationAddress || "-" }}
</div>
<div class="q-py-xs">
{{
addressData.provinceId
? (
Ops.provinceOps.find(
(r) => r.id === addressData.provinceId
) || {}
).name
: "-"
}}
{{ adsName.regisP || "-" }}
</div>
<div class="q-py-xs">
{{
addressData.districtId
? (
Ops.districtOps.find(
(r) => r.id === addressData.districtId
) || {}
).name
: "-"
}}
{{ adsName.regisD || "-" }}
</div>
<div class="q-py-xs">
{{
addressData.subdistrictId
? (
Ops.subdistrictOps.find(
(r) => r.id === addressData.subdistrictId
) || {}
).name
: "-"
}}
{{ adsName.regisSD || "-" }}
</div>
<div class="q-py-xs">
{{ addressData.codep }}
{{ addressData.registrationZipCode || "-" }}
</div>
</div>
</div>
<!-- column 2 -->
<div
<!-- <div
class="text-grey-6 text-weight-medium"
v-if="addressData.same === '1'"
>
ที่อยู่ปัจจุบันตรงกับที่อยู่ตามทะเบียนบ้าน
</div>
<div class="col-md-6 col-12 row" v-else>
<div class="col-5 text-grey-6 text-weight-medium">
</div> -->
<div class="col-md-6 col-12 row">
<div class="col-6 text-grey-6 text-weight-medium">
<div
v-for="label in Object.keys(dataLabel).slice(5, 10)"
class="q-py-xs"
@ -713,45 +556,21 @@ onMounted(async () => {
</div>
</div>
<!-- data -->
<div class="col-7">
<div class="col-6">
<div class="q-py-xs">
{{ addressData.addressC }}
{{ addressData.currentAddress || "-" }}
</div>
<div class="q-py-xs">
{{
addressData.provinceIdC
? (
Ops.provinceOps.find(
(r) => r.id === addressData.provinceIdC
) || {}
).name
: "-"
}}
{{ adsName.currentP || "-" }}
</div>
<div class="q-py-xs">
{{
addressData.districtIdC
? (
Ops.districtCOps.find(
(r) => r.id === addressData.districtIdC
) || {}
).name
: "-"
}}
{{ adsName.currentD || "-" }}
</div>
<div class="q-py-xs">
{{
addressData.subdistrictIdC
? (
Ops.subdistrictCOps.find(
(r) => r.id === addressData.subdistrictIdC
) || {}
).name
: "-"
}}
{{ adsName.currentSD || "-" }}
</div>
<div class="q-py-xs">
{{ addressData.codec }}
{{ addressData.currentZipCode || "-" }}
</div>
</div>
</div>
@ -761,7 +580,7 @@ onMounted(async () => {
<!-- Edit Dialog -->
<q-dialog v-model="modal" persistent>
<q-card style="width: 600px">
<q-form ref="myForm" @submit="onSubmit">
<q-form greedy @submit.prevent @validation-success="onSubmit">
<DialogHeader
tittle="แก้ไขข้อมูลที่อยู่"
:close="() => (modal = false)"
@ -776,7 +595,8 @@ onMounted(async () => {
lazy-rules
hide-bottom-space
type="textarea"
v-model="addressData.address"
class="inputgreen"
v-model="formData.registrationAddress"
:label="dataLabel.registrationAddress"
:rules="[(val:string) => !!val || `${'กรุณากรอก ที่อยู่ตามทะเบียนบ้าน'}`]"
/>
@ -794,8 +614,9 @@ onMounted(async () => {
option-value="id"
option-label="name"
input-debounce="0"
v-model="addressData.provinceId"
:options="Ops.provinceOps"
class="inputgreen"
v-model="formData.registrationProvinceId"
:options="store.Ops.provinceOps"
:label="dataLabel.registrationProvince"
:rules="[(val:string) => !!val || `${'กรุณาเลือก จังหวัด'}`]"
@update:model-value="(value:string) => selectProvince(value, '1')"
@ -816,8 +637,9 @@ onMounted(async () => {
option-value="id"
option-label="name"
input-debounce="0"
v-model="addressData.districtId"
:options="Ops.districtOps"
class="inputgreen"
v-model="formData.registrationDistrictId"
:options="store.Ops.districtOps"
:label="dataLabel.registrationDistrict"
:rules="[(val:string) => !!val || `${'กรุณาเลือก เขต / อำเภอ'}`]"
@update:model-value="(value:string) => selectDistrict(value, '1')"
@ -838,8 +660,9 @@ onMounted(async () => {
option-value="id"
option-label="name"
input-debounce="0"
v-model="addressData.subdistrictId"
:options="Ops.subdistrictOps"
class="inputgreen"
v-model="formData.registrationSubDistrictId"
:options="store.Ops.subdistrictOps"
:label="dataLabel.registrationSubDistrict"
:rules="[(val:string) => !!val || `${'กรุณาเลือก แขวง / ตำบล'}`]"
@update:model-value="(value:string) => selectSubDistrict(value, '1')"
@ -855,7 +678,8 @@ onMounted(async () => {
outlined
lazy-rules
hide-bottom-space
v-model="addressData.codep"
class="inputgreen"
v-model="formData.registrationZipCode"
:label="dataLabel.registrationZipCode"
/>
</div>
@ -870,7 +694,8 @@ onMounted(async () => {
val="1"
label="ใช่"
checked-icon="task_alt"
v-model="addressData.same"
class="inputgreen"
v-model="sameAddress"
unchecked-icon="panorama_fish_eye"
/>
<q-radio
@ -878,12 +703,13 @@ onMounted(async () => {
val="0"
label="ไม่"
checked-icon="task_alt"
v-model="addressData.same"
class="inputgreen"
v-model="sameAddress"
unchecked-icon="panorama_fish_eye"
/>
</div>
<!-- current address -->
<div v-if="addressData.same === '0'">
<div v-if="sameAddress === '0'">
<div class="col-12 q-pb-xs">
<q-input
dense
@ -891,7 +717,8 @@ onMounted(async () => {
lazy-rules
hide-bottom-space
type="textarea"
v-model="addressData.addressC"
class="inputgreen"
v-model="formData.currentAddress"
:label="dataLabel.currentAddress"
:rules="[(val:string) => !!val || `${'กรุณากรอก ที่อยู่ปัจจุบัน'}`]"
/>
@ -909,8 +736,9 @@ onMounted(async () => {
option-value="id"
option-label="name"
input-debounce="0"
v-model="addressData.provinceIdC"
:options="Ops.provinceOps"
class="inputgreen"
v-model="formData.currentProvinceId"
:options="store.Ops.provinceOps"
:label="dataLabel.currentProvince"
:rules="[(val:string) => !!val || `${'กรุณาเลือก จังหวัด'}`]"
@update:model-value="(value:string) => selectProvince(value, '2')"
@ -931,8 +759,9 @@ onMounted(async () => {
option-value="id"
option-label="name"
input-debounce="0"
v-model="addressData.districtIdC"
:options="Ops.districtCOps"
class="inputgreen"
v-model="formData.currentDistrictId"
:options="store.Ops.districtCOps"
:label="dataLabel.currentDistrict"
:rules="[(val:string) => !!val || `${'กรุณาเลือก เขต / อำเภอ'}`]"
@update:model-value="(value:string) => selectDistrict(value, '2')"
@ -953,8 +782,9 @@ onMounted(async () => {
option-value="id"
option-label="name"
input-debounce="0"
v-model="addressData.subdistrictIdC"
:options="Ops.subdistrictCOps"
class="inputgreen"
v-model="formData.currentSubDistrictId"
:options="store.Ops.subdistrictCOps"
:label="dataLabel.currentSubDistrict"
:rules="[(val:string) => !!val || `${'กรุณาเลือก แขวง / ตำบล'}`]"
@update:model-value="(value:string) => selectSubDistrict(value, '2')"
@ -970,7 +800,8 @@ onMounted(async () => {
outlined
lazy-rules
hide-bottom-space
v-model="addressData.codec"
class="inputgreen"
v-model="formData.currentZipCode"
:label="dataLabel.registrationZipCode"
/>
</div>

63
src/modules/04_registryNew/interface/request/Address.ts
View file

@ -1,55 +1,16 @@
interface DataProps {
row: RequestItemsObject;
rowIndex: number;
}
//ข้อมูล
interface RequestItemsObject {
currentAddress: String | null;
currentDistrictId: String | null;
currentProvinceId: String | null;
currentSubDistrictId: String | null;
currentZipCode: String | null;
registrationAddress: String | null;
registrationDistrictId: String | null;
registrationProvinceId: String | null;
registrationSame: Boolean | null;
registrationSubDistrictId: String | null;
registrationZipCode: String | null;
}
interface RequestItemsHistoryObject {
currentAddress: String | null;
currentDistrict: String | null;
currentProvince: String | null;
currentSubDistrict: String | null;
currentZipCode: String | null;
registrationAddress: String | null;
registrationDistrict: String | null;
registrationProvince: String | null;
registrationSame: Boolean | null;
registrationSubDistrict: String | null;
registrationZipCode: String | null;
createdFullName: String | null;
createdAt: Date;
}
//columns
interface Columns {
[index: number]: {
name: String;
align: String;
label: String;
sortable: Boolean;
field: String;
headerStyle: String;
style: String;
};
interface RequestObject {
currentZipCode: string | null;
currentSubDistrictId: string | null;
currentDistrictId: string | null;
currentProvinceId: string | null;
currentAddress: string | null;
registrationZipCode: string | null;
registrationSubDistrictId: string | null;
registrationDistrictId: string | null;
registrationProvinceId: string | null;
registrationAddress: string | null;
}
export type {
RequestItemsObject,
Columns,
DataProps,
RequestItemsHistoryObject,
RequestObject,
};

27
src/modules/04_registryNew/interface/response/Address.ts
View file

@ -1,34 +1,15 @@
//ข้อมูล
interface ResponseObject {
currentAddress: string | null;
currentDistrictId: string | null;
currentProvinceId: string | null;
currentSubDistrictId: string | null;
currentZipCode: string | null;
id: string;
registrationAddress: string | null;
registrationDistrictId: string | null;
registrationProvinceId: string | null;
registrationSame: Boolean | null;
registrationDistrictId: string | null;
registrationSubDistrictId: string | null;
registrationZipCode: string | null;
createdFullName: string | null;
createdAt: Date;
}
interface ResponseHistory {
currentAddress: string | null;
currentDistrictId: string | null;
currentProvinceId: string | null;
currentDistrictId: string | null;
currentSubDistrictId: string | null;
currentZipCode: string | null;
registrationAddress: string | null;
registrationDistrictId: string | null;
registrationProvinceId: string | null;
registrationSame: string | null;
registrationSubDistrictId: string | null;
registrationZipCode: string | null;
createdFullName: string | null;
createdAt: Date;
}
export type { ResponseObject, ResponseHistory };
export type { ResponseObject };

211
src/modules/04_registryNew/stores/Address.ts Normal file
View file

@ -0,0 +1,211 @@
import { ref } from "vue";
import { defineStore } from "pinia";
import { useCounterMixin } from "@/stores/mixin";
import { useQuasar } from "quasar";
import http from "@/plugins/http";
import config from "@/app.config";
import type { RequestObject } from "@/modules/04_registryNew/interface/request/Address";
import type { ResponseObject } from "@/modules/04_registryNew/interface/response/Address";
import type {
DataOption,
AddressOps,
zipCodeOption,
Address,
} from "@/modules/04_registryNew/interface/index/Main";
export const useAddressDataStore = defineStore("addess", () => {
const $q = useQuasar();
const mixin = useCounterMixin();
const {
showLoader,
hideLoader,
date2Thai,
messageError,
convertDate,
dateToISO,
} = mixin;
const Ops = ref<AddressOps>({
provinceOps: [],
districtOps: [],
districtCOps: [],
subdistrictOps: [],
subdistrictCOps: [],
});
const OpsFilter = ref<AddressOps>({
provinceOps: [],
districtOps: [],
districtCOps: [],
subdistrictOps: [],
subdistrictCOps: [],
});
const defaultAddress: ResponseObject = {
id: "",
currentZipCode: "",
currentSubDistrictId: "",
currentDistrictId: "",
currentProvinceId: "",
currentAddress: "",
registrationZipCode: "",
registrationSubDistrictId: "",
registrationDistrictId: "",
registrationProvinceId: "",
registrationAddress: "",
};
const defaultAddressForm: RequestObject = {
currentZipCode: "",
currentSubDistrictId: "",
currentDistrictId: "",
currentProvinceId: "",
currentAddress: "",
registrationZipCode: "",
registrationSubDistrictId: "",
registrationDistrictId: "",
registrationProvinceId: "",
registrationAddress: "",
};
function findData(ops: any, id: string | null) {
if(id === null) return "";
return ops.find((r: { id: string }) => r.id === id) || {};
}
async function fetchProvince() {
showLoader();
await http
.get(config.API.province)
.then(async (res) => {
const data = res.data.result;
let option: DataOption[] = [];
data.map((r: any) => {
option.push({ id: r.id.toString(), name: r.name.toString() });
});
Ops.value.provinceOps = option;
OpsFilter.value.provinceOps = option;
})
.catch((e) => {
messageError($q, e);
})
.finally(() => {
hideLoader();
});
}
async function fetchDistrict(id: string, position: string) {
if (!id) return;
showLoader();
await http
.get(config.API.listDistrict(id))
.then(async (res) => {
const data = res.data.result;
let option: DataOption[] = [];
data.map((r: any) => {
option.push({ id: r.id.toString(), name: r.name.toString() });
});
if (position == "1") {
Ops.value.districtOps = option;
OpsFilter.value.districtOps = option;
} else {
Ops.value.districtCOps = option;
OpsFilter.value.districtCOps = option;
}
return option;
})
.catch((e) => {
messageError($q, e);
})
.finally(() => {
hideLoader();
});
}
async function fetchSubDistrict(id: string | null, position: string) {
if (!id) return;
showLoader();
await http
.get(config.API.listSubDistrict(id))
.then(async (res) => {
const data = res.data.result;
let option: zipCodeOption[] = [];
data.map((r: any) => {
option.push({
id: r.id.toString(),
name: r.name.toString(),
zipCode: r.zipCode.toString(),
});
});
if (position == "1") {
Ops.value.subdistrictOps = option;
OpsFilter.value.subdistrictOps = option;
} else {
Ops.value.subdistrictCOps = option;
OpsFilter.value.subdistrictCOps = option;
}
})
.catch((e) => {
messageError($q, e);
})
.finally(() => {
hideLoader();
});
}
function filterSelector(val: any, update: Function, refData: string) {
switch (refData) {
case "provinceOps":
update(() => {
Ops.value.provinceOps = OpsFilter.value.provinceOps.filter(
(v: DataOption) => v.name.indexOf(val) > -1
);
});
break;
case "districtOps":
update(() => {
Ops.value.districtOps = OpsFilter.value.districtOps.filter(
(v: DataOption) => v.name.indexOf(val) > -1
);
});
break;
case "districtCOps":
update(() => {
Ops.value.districtCOps = OpsFilter.value.districtCOps.filter(
(v: DataOption) => v.name.indexOf(val) > -1
);
});
break;
case "subdistrictOps":
update(() => {
Ops.value.subdistrictOps = OpsFilter.value.subdistrictOps.filter(
(v: DataOption) => v.name.indexOf(val) > -1
);
});
break;
case "subdistrictCOps":
update(() => {
Ops.value.subdistrictCOps = OpsFilter.value.subdistrictCOps.filter(
(v: DataOption) => v.name.indexOf(val) > -1
);
});
break;
default:
break;
}
}
return {
defaultAddress,
defaultAddressForm,
Ops,
OpsFilter,
findData,
fetchProvince,
fetchDistrict,
fetchSubDistrict,
filterSelector,
};
});