ทะเบียนประวัติ: ข้อมูที่อยู่
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>
|
||||
<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>
|
||||
|
||||
<style scoped></style>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue