ทะเบียนประวัติ: ข้อมูที่อยู่
This commit is contained in:
puriphatt
parent
03439d7114
commit
7251cdc021
1 changed files with 962 additions and 2 deletions
|
|
@ -1,6 +1,966 @@
|
||||||
<script setup lang="ts"></script>
|
<script setup lang="ts">
|
||||||
|
import { onMounted, ref } from "vue";
|
||||||
|
import { useRoute } from "vue-router";
|
||||||
|
import { useQuasar } from "quasar";
|
||||||
|
import type { QTableProps } from "quasar";
|
||||||
|
import http from "@/plugins/http";
|
||||||
|
import config from "@/app.config";
|
||||||
|
|
||||||
|
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 DialogHeader from "@/modules/04_registryNew/components/DialogHeader.vue";
|
||||||
|
import type { ResponseObject } from "@/modules/04_registryNew/interface/response/Address";
|
||||||
|
import type { RequestItemsHistoryObject } from "@/modules/04_registryNew/interface/request/Address";
|
||||||
|
import HistoryTable from "@/components/TableHistory.vue";
|
||||||
|
|
||||||
|
const $q = useQuasar();
|
||||||
|
const mixin = useCounterMixin();
|
||||||
|
const route = useRoute();
|
||||||
|
const { date2Thai, success, messageError, showLoader, hideLoader } = mixin;
|
||||||
|
|
||||||
|
const statusAdd = ref(false);
|
||||||
|
const isLoad = ref<number>(0);
|
||||||
|
const modal = ref<boolean>(false);
|
||||||
|
const myForm = ref<any>();
|
||||||
|
const rowsHistory = ref<RequestItemsHistoryObject[]>([]);
|
||||||
|
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",
|
||||||
|
|
||||||
|
currentAddress: "66664444",
|
||||||
|
currentProvinceId: "24b22b3c-67aa-4631-bf7c-69ec6b735767",
|
||||||
|
currentDistrictId: "ce9a2984-938f-454c-a758-26dcf8176afe",
|
||||||
|
currentSubDistrictId: "97dba284-7cdc-45c6-863c-9590810fe8e2",
|
||||||
|
currentZipCode: "50100",
|
||||||
|
registrationSame: "1",
|
||||||
|
});
|
||||||
|
|
||||||
|
const dataLabel = {
|
||||||
|
registrationAddress: "ที่อยู่ตามทะเบียนบ้าน",
|
||||||
|
registrationProvince: "จังหวัด",
|
||||||
|
registrationDistrict: "เขต / อำเภอ",
|
||||||
|
registrationSubDistrict: "แขวง / ตำบล",
|
||||||
|
registrationZipCode: "รหัสไปรษณีย์",
|
||||||
|
|
||||||
|
currentAddress: "ที่อยู่ปัจจุบัน",
|
||||||
|
currentProvince: "จังหวัด",
|
||||||
|
currentDistrict: "เขต / อำเภอ",
|
||||||
|
currentSubDistrict: "แขวง / ตำบล",
|
||||||
|
currentZipCode: "รหัสไปรษณีย์",
|
||||||
|
|
||||||
|
registrationSame: "ที่อยู่ปัจจุบันตรงกับที่อยู่ตามทะเบียนบ้าน",
|
||||||
|
};
|
||||||
|
|
||||||
|
const visibleColumnsHistory = ref<String[]>([
|
||||||
|
"currentAddress",
|
||||||
|
"currentDistrict",
|
||||||
|
"currentProvince",
|
||||||
|
"currentSubDistrict",
|
||||||
|
"currentZipCode",
|
||||||
|
"registrationAddress",
|
||||||
|
"registrationDistrict",
|
||||||
|
"registrationProvince",
|
||||||
|
"registrationSame",
|
||||||
|
"registrationSubDistrict",
|
||||||
|
"registrationZipCode",
|
||||||
|
"createdFullName",
|
||||||
|
"createdAt",
|
||||||
|
]);
|
||||||
|
|
||||||
|
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: "registrationSame",
|
||||||
|
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: "createdFullName",
|
||||||
|
align: "left",
|
||||||
|
label: "ผู้ดำเนินการ",
|
||||||
|
sortable: true,
|
||||||
|
field: "createdFullName",
|
||||||
|
headerStyle: "font-size: 14px",
|
||||||
|
style: "font-size: 14px",
|
||||||
|
sort: (a: string, b: string) =>
|
||||||
|
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "createdAt",
|
||||||
|
align: "left",
|
||||||
|
label: "วันที่แก้ไข",
|
||||||
|
sortable: true,
|
||||||
|
field: "createdAt",
|
||||||
|
headerStyle: "font-size: 14px",
|
||||||
|
style: "font-size: 14px",
|
||||||
|
sort: (a: string, b: string) =>
|
||||||
|
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||||
|
},
|
||||||
|
]);
|
||||||
|
|
||||||
|
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() {
|
||||||
|
// 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() {
|
||||||
|
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;
|
||||||
|
|
||||||
|
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 = "";
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.catch((e) => {
|
||||||
|
messageError($q, e);
|
||||||
|
})
|
||||||
|
.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 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;
|
||||||
|
|
||||||
|
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;
|
||||||
|
|
||||||
|
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 getNewData() {
|
||||||
|
await fetchData();
|
||||||
|
await fetchProvince();
|
||||||
|
await fetchDistrict(resultData.value.registrationProvinceId, "1");
|
||||||
|
await fetchDistrict(resultData.value.currentProvinceId, "2");
|
||||||
|
await fetchSubDistrict(resultData.value.registrationDistrictId, "1");
|
||||||
|
await fetchSubDistrict(resultData.value.currentDistrictId, "2");
|
||||||
|
}
|
||||||
|
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
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();
|
||||||
|
// });
|
||||||
|
}
|
||||||
|
|
||||||
|
function onSubmit() {
|
||||||
|
myForm.value.validate().then(async (result: boolean) => {
|
||||||
|
if (result) {
|
||||||
|
// await saveData();
|
||||||
|
console.log("Hello");
|
||||||
|
modal.value = false;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
onMounted(async () => {
|
||||||
|
await getNewData();
|
||||||
|
defaultAdd();
|
||||||
|
});
|
||||||
|
</script>
|
||||||
<template>
|
<template>
|
||||||
<div>3</div>
|
<div class="row q-gutter-sm items-center">
|
||||||
|
<div class="toptitle col text-right">
|
||||||
|
<q-btn
|
||||||
|
flat
|
||||||
|
round
|
||||||
|
icon="mdi-pencil-outline"
|
||||||
|
color="primary"
|
||||||
|
@click="modal = true"
|
||||||
|
>
|
||||||
|
<q-tooltip>แก้ไขข้อมูล</q-tooltip>
|
||||||
|
</q-btn>
|
||||||
|
<q-btn flat round icon="mdi-history" color="info" @click="clickHistory">
|
||||||
|
<q-tooltip>ประวัติข้อมูลที่อยู่</q-tooltip>
|
||||||
|
</q-btn>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<q-card bordered class="my-card bg-grey-1 q-pa-md">
|
||||||
|
<div :class="$q.screen.gt.xs ? 'row' : 'column'">
|
||||||
|
<!-- column 1 -->
|
||||||
|
<div class="col-md-6 col-12 row">
|
||||||
|
<div class="col-4 text-grey-6 text-weight-medium">
|
||||||
|
<div
|
||||||
|
v-for="label in Object.keys(dataLabel).slice(0, 5)"
|
||||||
|
class="q-py-xs"
|
||||||
|
>
|
||||||
|
{{ dataLabel[label as keyof typeof dataLabel] }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- data -->
|
||||||
|
<div class="col-8">
|
||||||
|
<div class="q-py-xs">
|
||||||
|
{{ resultData.registrationAddress }}
|
||||||
|
</div>
|
||||||
|
<div class="q-py-xs">
|
||||||
|
{{
|
||||||
|
resultData.registrationProvinceId
|
||||||
|
? (
|
||||||
|
Ops.provinceOps.find(
|
||||||
|
(r) => r.id === resultData.registrationProvinceId
|
||||||
|
) || {}
|
||||||
|
).name
|
||||||
|
: "-"
|
||||||
|
}}
|
||||||
|
</div>
|
||||||
|
<div class="q-py-xs">
|
||||||
|
{{
|
||||||
|
resultData.registrationDistrictId
|
||||||
|
? (
|
||||||
|
Ops.districtOps.find(
|
||||||
|
(r) => r.id === resultData.registrationDistrictId
|
||||||
|
) || {}
|
||||||
|
).name
|
||||||
|
: "-"
|
||||||
|
}}
|
||||||
|
</div>
|
||||||
|
<div class="q-py-xs">
|
||||||
|
{{
|
||||||
|
resultData.registrationSubDistrictId
|
||||||
|
? (
|
||||||
|
Ops.subdistrictOps.find(
|
||||||
|
(r) => r.id === resultData.registrationSubDistrictId
|
||||||
|
) || {}
|
||||||
|
).name
|
||||||
|
: "-"
|
||||||
|
}}
|
||||||
|
</div>
|
||||||
|
<div class="q-py-xs">
|
||||||
|
{{ resultData.registrationZipCode }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- column 2 -->
|
||||||
|
<div
|
||||||
|
class="text-grey-6 text-weight-medium"
|
||||||
|
v-if="resultData.registrationSame === '1'"
|
||||||
|
>
|
||||||
|
ที่อยู่ปัจจุบันตรงกับที่อยู่ตามทะเบียนบ้าน
|
||||||
|
</div>
|
||||||
|
<div class="col-md-6 col-12 row" v-else>
|
||||||
|
<div class="col-4 text-grey-6 text-weight-medium">
|
||||||
|
<div
|
||||||
|
v-for="label in Object.keys(dataLabel).slice(5, 10)"
|
||||||
|
class="q-py-xs"
|
||||||
|
>
|
||||||
|
{{ dataLabel[label as keyof typeof dataLabel] }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- data -->
|
||||||
|
<div class="col-8">
|
||||||
|
<div class="q-py-xs">
|
||||||
|
{{ resultData.currentAddress }}
|
||||||
|
</div>
|
||||||
|
<div class="q-py-xs">
|
||||||
|
{{
|
||||||
|
resultData.currentProvinceId
|
||||||
|
? (
|
||||||
|
Ops.provinceOps.find(
|
||||||
|
(r) => r.id === resultData.currentProvinceId
|
||||||
|
) || {}
|
||||||
|
).name
|
||||||
|
: "-"
|
||||||
|
}}
|
||||||
|
</div>
|
||||||
|
<div class="q-py-xs">
|
||||||
|
{{
|
||||||
|
resultData.currentDistrictId
|
||||||
|
? (
|
||||||
|
Ops.districtOps.find(
|
||||||
|
(r) => r.id === resultData.currentDistrictId
|
||||||
|
) || {}
|
||||||
|
).name
|
||||||
|
: "-"
|
||||||
|
}}
|
||||||
|
</div>
|
||||||
|
<div class="q-py-xs">
|
||||||
|
{{
|
||||||
|
resultData.currentSubDistrictId
|
||||||
|
? (
|
||||||
|
Ops.subdistrictOps.find(
|
||||||
|
(r) => r.id === resultData.currentSubDistrictId
|
||||||
|
) || {}
|
||||||
|
).name
|
||||||
|
: "-"
|
||||||
|
}}
|
||||||
|
</div>
|
||||||
|
<div class="q-py-xs">
|
||||||
|
{{ resultData.registrationZipCode }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</q-card>
|
||||||
|
|
||||||
|
<!-- Edit Dialog -->
|
||||||
|
<q-dialog v-model="modal" persistent>
|
||||||
|
<q-card style="width: 600px">
|
||||||
|
<q-form ref="myForm" @submit="onSubmit">
|
||||||
|
<DialogHeader
|
||||||
|
tittle="แก้ไขข้อมูลที่อยู่"
|
||||||
|
:close="() => (modal = false)"
|
||||||
|
/>
|
||||||
|
<q-separator />
|
||||||
|
<!-- regis address -->
|
||||||
|
<q-card-section class="q-p-sm">
|
||||||
|
<div class="col-12 q-pb-xs">
|
||||||
|
<q-input
|
||||||
|
dense
|
||||||
|
outlined
|
||||||
|
lazy-rules
|
||||||
|
hide-bottom-space
|
||||||
|
type="textarea"
|
||||||
|
v-model="resultData.registrationAddress"
|
||||||
|
:label="dataLabel.registrationAddress"
|
||||||
|
:rules="[(val:string) => !!val || `${'กรุณากรอก ที่อยู่ตามทะเบียนบ้าน'}`]"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="row col-12 q-col-gutter-x-xs q-col-gutter-y-xs">
|
||||||
|
<div class="col-xs-6 col-sm-6 col-md-6">
|
||||||
|
<selector
|
||||||
|
dense
|
||||||
|
outlined
|
||||||
|
use-input
|
||||||
|
lazy-rules
|
||||||
|
emit-value
|
||||||
|
map-options
|
||||||
|
hide-bottom-space
|
||||||
|
option-value="id"
|
||||||
|
option-label="name"
|
||||||
|
input-debounce="0"
|
||||||
|
v-model="resultData.registrationProvinceId"
|
||||||
|
:options="Ops.provinceOps"
|
||||||
|
:label="dataLabel.registrationProvince"
|
||||||
|
:rules="[(val:string) => !!val || `${'กรุณาเลือก จังหวัด'}`]"
|
||||||
|
@filter="(inputValue:string,
|
||||||
|
doneFn:Function) => filterSelector(inputValue, doneFn,'provinceOps'
|
||||||
|
) "
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="col-xs-6 col-sm-6 col-md-6">
|
||||||
|
<selector
|
||||||
|
dense
|
||||||
|
outlined
|
||||||
|
use-input
|
||||||
|
lazy-rules
|
||||||
|
emit-value
|
||||||
|
map-options
|
||||||
|
hide-bottom-space
|
||||||
|
option-value="id"
|
||||||
|
option-label="name"
|
||||||
|
input-debounce="0"
|
||||||
|
v-model="resultData.registrationDistrictId"
|
||||||
|
:options="Ops.districtOps"
|
||||||
|
:label="dataLabel.registrationDistrict"
|
||||||
|
:rules="[(val:string) => !!val || `${'กรุณาเลือก เขต / อำเภอ'}`]"
|
||||||
|
@filter="(inputValue:string,
|
||||||
|
doneFn:Function) => filterSelector(inputValue, doneFn,'districtOps'
|
||||||
|
) "
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="col-xs-6 col-sm-6 col-md-6">
|
||||||
|
<selector
|
||||||
|
dense
|
||||||
|
outlined
|
||||||
|
use-input
|
||||||
|
lazy-rules
|
||||||
|
emit-value
|
||||||
|
map-options
|
||||||
|
hide-bottom-space
|
||||||
|
option-value="id"
|
||||||
|
option-label="name"
|
||||||
|
input-debounce="0"
|
||||||
|
v-model="resultData.registrationSubDistrictId"
|
||||||
|
:options="Ops.subdistrictOps"
|
||||||
|
:label="dataLabel.registrationSubDistrict"
|
||||||
|
:rules="[(val:string) => !!val || `${'กรุณาเลือก เขต / อำเภอ'}`]"
|
||||||
|
@filter="(inputValue:string,
|
||||||
|
doneFn:Function) => filterSelector(inputValue, doneFn,'subdistrictOps'
|
||||||
|
) "
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="col-xs-6 col-sm-6 col-md-6">
|
||||||
|
<q-input
|
||||||
|
dense
|
||||||
|
readonly
|
||||||
|
outlined
|
||||||
|
lazy-rules
|
||||||
|
hide-bottom-space
|
||||||
|
v-model="resultData.registrationZipCode"
|
||||||
|
:label="dataLabel.registrationZipCode"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- same address ? -->
|
||||||
|
<div class="col-xs-12 q-gutter-sm items-center flex q-my-sm">
|
||||||
|
<label class="text-medium"
|
||||||
|
>ที่อยู่ปัจจุบันตรงกับที่อยู่ตามทะเบียนบ้าน</label
|
||||||
|
>
|
||||||
|
<q-radio
|
||||||
|
v-model="resultData.registrationSame"
|
||||||
|
checked-icon="task_alt"
|
||||||
|
unchecked-icon="panorama_fish_eye"
|
||||||
|
val="1"
|
||||||
|
label="ใช่"
|
||||||
|
dense
|
||||||
|
/>
|
||||||
|
<q-radio
|
||||||
|
v-model="resultData.registrationSame"
|
||||||
|
checked-icon="task_alt"
|
||||||
|
unchecked-icon="panorama_fish_eye"
|
||||||
|
val="0"
|
||||||
|
label="ไม่"
|
||||||
|
dense
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<!-- current address -->
|
||||||
|
<div v-if="resultData.registrationSame === '0'">
|
||||||
|
<div class="col-12 q-pb-xs">
|
||||||
|
<q-input
|
||||||
|
dense
|
||||||
|
outlined
|
||||||
|
lazy-rules
|
||||||
|
hide-bottom-space
|
||||||
|
type="textarea"
|
||||||
|
v-model="resultData.currentAddress"
|
||||||
|
:label="dataLabel.currentAddress"
|
||||||
|
:rules="[(val:string) => !!val || `${'กรุณากรอก ที่อยู่ปัจจุบัน'}`]"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="row col-12 q-col-gutter-x-xs q-col-gutter-y-xs">
|
||||||
|
<div class="col-xs-6 col-sm-6 col-md-6">
|
||||||
|
<selector
|
||||||
|
dense
|
||||||
|
outlined
|
||||||
|
use-input
|
||||||
|
lazy-rules
|
||||||
|
emit-value
|
||||||
|
map-options
|
||||||
|
hide-bottom-space
|
||||||
|
option-value="id"
|
||||||
|
option-label="name"
|
||||||
|
input-debounce="0"
|
||||||
|
v-model="resultData.currentProvinceId"
|
||||||
|
:options="Ops.provinceOps"
|
||||||
|
:label="dataLabel.currentProvince"
|
||||||
|
:rules="[(val:string) => !!val || `${'กรุณาเลือก จังหวัด'}`]"
|
||||||
|
@filter="(inputValue:string,
|
||||||
|
doneFn:Function) => filterSelector(inputValue, doneFn,'provinceOps'
|
||||||
|
) "
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="col-xs-6 col-sm-6 col-md-6">
|
||||||
|
<selector
|
||||||
|
dense
|
||||||
|
outlined
|
||||||
|
use-input
|
||||||
|
lazy-rules
|
||||||
|
emit-value
|
||||||
|
map-options
|
||||||
|
hide-bottom-space
|
||||||
|
option-value="id"
|
||||||
|
option-label="name"
|
||||||
|
input-debounce="0"
|
||||||
|
v-model="resultData.currentDistrictId"
|
||||||
|
:options="Ops.districtOps"
|
||||||
|
:label="dataLabel.currentDistrict"
|
||||||
|
:rules="[(val:string) => !!val || `${'กรุณาเลือก เขต / อำเภอ'}`]"
|
||||||
|
@filter="(inputValue:string,
|
||||||
|
doneFn:Function) => filterSelector(inputValue, doneFn,'districtOps'
|
||||||
|
) "
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="col-xs-6 col-sm-6 col-md-6">
|
||||||
|
<selector
|
||||||
|
dense
|
||||||
|
outlined
|
||||||
|
use-input
|
||||||
|
lazy-rules
|
||||||
|
emit-value
|
||||||
|
map-options
|
||||||
|
hide-bottom-space
|
||||||
|
option-value="id"
|
||||||
|
option-label="name"
|
||||||
|
input-debounce="0"
|
||||||
|
v-model="resultData.currentSubDistrictId"
|
||||||
|
:options="Ops.subdistrictOps"
|
||||||
|
:label="dataLabel.currentSubDistrict"
|
||||||
|
:rules="[(val:string) => !!val || `${'กรุณาเลือก เขต / อำเภอ'}`]"
|
||||||
|
@filter="(inputValue:string,
|
||||||
|
doneFn:Function) => filterSelector(inputValue, doneFn,'subdistrictOps'
|
||||||
|
) "
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="col-xs-6 col-sm-6 col-md-6">
|
||||||
|
<q-input
|
||||||
|
dense
|
||||||
|
readonly
|
||||||
|
outlined
|
||||||
|
lazy-rules
|
||||||
|
hide-bottom-space
|
||||||
|
v-model="resultData.registrationZipCode"
|
||||||
|
:label="dataLabel.registrationZipCode"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</q-card-section>
|
||||||
|
<q-separator />
|
||||||
|
<div class="text-right q-pa-sm">
|
||||||
|
<q-btn
|
||||||
|
id="onSubmit"
|
||||||
|
type="submit"
|
||||||
|
dense
|
||||||
|
unelevated
|
||||||
|
label="บันทึก"
|
||||||
|
color="public"
|
||||||
|
class="q-px-md"
|
||||||
|
>
|
||||||
|
<q-tooltip>บันทึก</q-tooltip>
|
||||||
|
</q-btn>
|
||||||
|
</div>
|
||||||
|
</q-form>
|
||||||
|
</q-card>
|
||||||
|
</q-dialog>
|
||||||
|
|
||||||
|
<HistoryTable
|
||||||
|
:rows="rowsHistory"
|
||||||
|
:columns="columnsHistory"
|
||||||
|
:filter="filterHistory"
|
||||||
|
:visible-columns="visibleColumnsHistory"
|
||||||
|
v-model:modal="modalHistory"
|
||||||
|
v-model:inputfilter="filterHistory"
|
||||||
|
v-model:inputvisible="visibleColumnsHistory"
|
||||||
|
v-model:tittle="tittleHistory"
|
||||||
|
>
|
||||||
|
<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">
|
||||||
|
{{ col.value }}
|
||||||
|
</div>
|
||||||
|
</q-td>
|
||||||
|
</q-tr>
|
||||||
|
</template>
|
||||||
|
</HistoryTable>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style scoped></style>
|
<style scoped></style>
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue