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