ขออัปเดตข้อมูลจากกรมการปกครอง
This commit is contained in:
setthawutttty
parent
189347832c
commit
c49d222a3f
10 changed files with 2155 additions and 14 deletions
|
|
@ -0,0 +1,364 @@
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { type PropType, watch } from "vue";
|
||||||
|
import { useQuasar } from "quasar";
|
||||||
|
|
||||||
|
import http from "@/plugins/http";
|
||||||
|
import config from "@/app.config";
|
||||||
|
import { useCounterMixin } from "@/stores/mixin";
|
||||||
|
import { useProfileDataStore } from "@/modules/04_registryPerson/stores/profile";
|
||||||
|
|
||||||
|
import type { RequestObject } from "@/modules/04_registryPerson/interface/request/Profile";
|
||||||
|
|
||||||
|
const formInformations = defineModel<RequestObject>("formInformations", {
|
||||||
|
required: true,
|
||||||
|
});
|
||||||
|
const age = defineModel<string | null>("age", {
|
||||||
|
required: true,
|
||||||
|
});
|
||||||
|
|
||||||
|
const $q = useQuasar();
|
||||||
|
const storeProfile = useProfileDataStore();
|
||||||
|
const { filterSelector, calculateAge } = storeProfile;
|
||||||
|
const { date2Thai, messageError, dialogMessageNotify } = useCounterMixin();
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
Ops: {
|
||||||
|
type: Object as PropType<any>,
|
||||||
|
},
|
||||||
|
OpsFilter: {
|
||||||
|
type: Object as PropType<any>,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const dataLabel = {
|
||||||
|
citizenId: "เลขประจำตัวประชาชน",
|
||||||
|
name: "ชื่อ - สกุล",
|
||||||
|
birthDate: "วัน/เดือน/ปีเกิด",
|
||||||
|
age: "อายุ",
|
||||||
|
gender: "เพศ",
|
||||||
|
relationship: "สถานภาพ",
|
||||||
|
nationality: "สัญชาติ",
|
||||||
|
ethnicity: "เชื้อชาติ",
|
||||||
|
religion: "ศาสนา",
|
||||||
|
bloodGroup: "หมู่เลือด",
|
||||||
|
phone: "เบอร์โทร",
|
||||||
|
prefix: "คำนำหน้าชื่อ",
|
||||||
|
rank: "ยศ",
|
||||||
|
firstName: "ชื่อ",
|
||||||
|
lastName: "นามสกุล",
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* function เช็คเลขประจำตัวประชาชนช้ำ
|
||||||
|
* @param citizenId เลขประจำตัวประชาชน
|
||||||
|
*/
|
||||||
|
function changeCardID(citizenId: string | number | null) {
|
||||||
|
if (citizenId != null && typeof citizenId == "string") {
|
||||||
|
if (citizenId.length == 13 && citizenId) {
|
||||||
|
http
|
||||||
|
.put(config.API.profileNewCitizenId(citizenId), {
|
||||||
|
citizenId: citizenId,
|
||||||
|
})
|
||||||
|
.then(() => {})
|
||||||
|
.catch((err) => {
|
||||||
|
if (err.response.data.status === 500) {
|
||||||
|
dialogMessageNotify($q, err.response.data.message);
|
||||||
|
} else {
|
||||||
|
messageError($q, err);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* function เช็คอายุไม่เกิน 18 ปี
|
||||||
|
*/
|
||||||
|
function calculateMaxDate() {
|
||||||
|
const today = new Date();
|
||||||
|
today.setFullYear(today.getFullYear() - 18);
|
||||||
|
return today;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* ดูการเปลี่ยนแปลงของวันเกิดเมื่อมีการเปลี่ยนแปลงจะคำนวนอายูใหม่
|
||||||
|
*/
|
||||||
|
watch(
|
||||||
|
() => formInformations.value.birthDate,
|
||||||
|
(v) => {
|
||||||
|
if (v) {
|
||||||
|
age.value = calculateAge(v);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
);
|
||||||
|
</script>
|
||||||
|
<template>
|
||||||
|
<div class="row col-12 q-col-gutter-x-xs q-col-gutter-y-xs">
|
||||||
|
<div class="col-12 text-tooltip text-weight-medium">ข้อมูลส่วนตัว</div>
|
||||||
|
<div class="col-xs-6 col-sm-6 col-md-3">
|
||||||
|
<q-input
|
||||||
|
dense
|
||||||
|
outlined
|
||||||
|
readonly
|
||||||
|
lazy-rules
|
||||||
|
hide-bottom-space
|
||||||
|
maxlength="13"
|
||||||
|
mask="#############"
|
||||||
|
v-model="formInformations.citizenId"
|
||||||
|
class="inputgreen"
|
||||||
|
:label="dataLabel.citizenId"
|
||||||
|
:rules="[
|
||||||
|
(val: string) => !!val || `${'กรุณากรอก เลขประจำตัวประชาชน'}`,
|
||||||
|
(val: string) =>
|
||||||
|
val.length >= 13 ||
|
||||||
|
`${'กรุณากรอกเลขประจำตัวประชาชนให้ครบ'}`,
|
||||||
|
]"
|
||||||
|
@update:model-value="changeCardID"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="col-xs-6 col-sm-6 col-md-3">
|
||||||
|
<q-select
|
||||||
|
dense
|
||||||
|
outlined
|
||||||
|
use-input
|
||||||
|
lazy-rules
|
||||||
|
emit-value
|
||||||
|
map-options
|
||||||
|
hide-bottom-space
|
||||||
|
input-debounce="0"
|
||||||
|
option-label="name"
|
||||||
|
option-value="name"
|
||||||
|
v-model="formInformations.prefix"
|
||||||
|
class="inputgreen"
|
||||||
|
:options="props.Ops.prefixOps"
|
||||||
|
:label="dataLabel.prefix"
|
||||||
|
:rules="[(val: string) => !!val || `${'กรุณาเลือก คำนำหน้าชื่อ'}`]"
|
||||||
|
@filter="(inputValue: string,
|
||||||
|
doneFn: Function) => filterSelector(inputValue, doneFn, 'prefixOps'
|
||||||
|
)"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="col-xs-6 col-sm-6 col-md-3">
|
||||||
|
<q-select
|
||||||
|
dense
|
||||||
|
outlined
|
||||||
|
clearable
|
||||||
|
use-input
|
||||||
|
lazy-rules
|
||||||
|
emit-value
|
||||||
|
map-options
|
||||||
|
hide-bottom-space
|
||||||
|
input-debounce="0"
|
||||||
|
option-label="name"
|
||||||
|
option-value="name"
|
||||||
|
v-model="formInformations.rank"
|
||||||
|
class="inputgreen"
|
||||||
|
:options="props.Ops.rankOps"
|
||||||
|
:label="dataLabel.rank"
|
||||||
|
@filter="(inputValue: string,
|
||||||
|
doneFn: Function) => filterSelector(inputValue, doneFn, 'rankOps'
|
||||||
|
)"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="col-xs-6 col-sm-6 col-md-3">
|
||||||
|
<q-input
|
||||||
|
dense
|
||||||
|
outlined
|
||||||
|
lazy-rules
|
||||||
|
hide-bottom-space
|
||||||
|
v-model="formInformations.firstName"
|
||||||
|
class="inputgreen"
|
||||||
|
:label="dataLabel.firstName"
|
||||||
|
:rules="[(val: string) => !!val || `${'กรุณากรอก ชื่อ'}`]"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="col-xs-6 col-sm-6 col-md-3">
|
||||||
|
<q-input
|
||||||
|
dense
|
||||||
|
outlined
|
||||||
|
lazy-rules
|
||||||
|
hide-bottom-space
|
||||||
|
v-model="formInformations.lastName"
|
||||||
|
class="inputgreen"
|
||||||
|
:label="dataLabel.lastName"
|
||||||
|
:rules="[(val: string) => !!val || `${'กรุณากรอก นามสกุล'}`]"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="col-xs-6 col-sm-6 col-md-3">
|
||||||
|
<datepicker
|
||||||
|
autoApply
|
||||||
|
:max-date="calculateMaxDate()"
|
||||||
|
borderless
|
||||||
|
:enableTimePicker="false"
|
||||||
|
week-start="0"
|
||||||
|
menu-class-name="modalfix"
|
||||||
|
v-model="formInformations.birthDate"
|
||||||
|
:locale="'th'"
|
||||||
|
>
|
||||||
|
<template #year="{ year }">
|
||||||
|
{{ year + 543 }}
|
||||||
|
</template>
|
||||||
|
<template #year-overlay-value="{ value }">
|
||||||
|
{{ parseInt(value + 543) }}
|
||||||
|
</template>
|
||||||
|
<template #trigger>
|
||||||
|
<q-input
|
||||||
|
for="inputDatereceive"
|
||||||
|
ref="dateReceivedRef"
|
||||||
|
outlined
|
||||||
|
dense
|
||||||
|
hide-bottom-space
|
||||||
|
class="inputgreen"
|
||||||
|
:model-value="
|
||||||
|
formInformations.birthDate
|
||||||
|
? date2Thai(formInformations.birthDate)
|
||||||
|
: null
|
||||||
|
"
|
||||||
|
:label="dataLabel.birthDate"
|
||||||
|
:rules="[
|
||||||
|
(val:string) => !!val || `${'กรุณาเลือก วัน/เดือน/ปี เกิด'}`,
|
||||||
|
]"
|
||||||
|
>
|
||||||
|
<template v-slot:prepend>
|
||||||
|
<q-icon name="event" class="cursor-pointer" color="primary">
|
||||||
|
</q-icon>
|
||||||
|
</template>
|
||||||
|
</q-input>
|
||||||
|
</template>
|
||||||
|
</datepicker>
|
||||||
|
</div>
|
||||||
|
<div class="col-xs-6 col-sm-6 col-md-3">
|
||||||
|
<q-input
|
||||||
|
dense
|
||||||
|
outlined
|
||||||
|
lazy-rules
|
||||||
|
hide-bottom-space
|
||||||
|
readonly
|
||||||
|
v-model="age"
|
||||||
|
:label="dataLabel.age"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="col-xs-6 col-sm-6 col-md-3">
|
||||||
|
<q-select
|
||||||
|
dense
|
||||||
|
outlined
|
||||||
|
use-input
|
||||||
|
clearable
|
||||||
|
lazy-rules
|
||||||
|
emit-value
|
||||||
|
map-options
|
||||||
|
hide-bottom-space
|
||||||
|
input-debounce="0"
|
||||||
|
option-label="name"
|
||||||
|
option-value="name"
|
||||||
|
v-model="formInformations.gender"
|
||||||
|
class="inputgreen"
|
||||||
|
:options="props.Ops.genderOps"
|
||||||
|
:label="dataLabel.gender"
|
||||||
|
@filter="(inputValue: string,
|
||||||
|
doneFn: Function) => filterSelector(inputValue, doneFn, 'genderOps'
|
||||||
|
)"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="col-xs-6 col-sm-6 col-md-3">
|
||||||
|
<q-select
|
||||||
|
dense
|
||||||
|
outlined
|
||||||
|
use-input
|
||||||
|
clearable
|
||||||
|
lazy-rules
|
||||||
|
emit-value
|
||||||
|
map-options
|
||||||
|
hide-bottom-space
|
||||||
|
option-value="name"
|
||||||
|
option-label="name"
|
||||||
|
input-debounce="0"
|
||||||
|
class="inputgreen"
|
||||||
|
v-model="formInformations.relationship"
|
||||||
|
:options="props.Ops.statusOps"
|
||||||
|
:label="dataLabel.relationship"
|
||||||
|
@filter="(inputValue: string,
|
||||||
|
doneFn: Function) => filterSelector(inputValue, doneFn, 'statusOps'
|
||||||
|
)"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="col-xs-6 col-sm-6 col-md-3">
|
||||||
|
<q-input
|
||||||
|
dense
|
||||||
|
outlined
|
||||||
|
lazy-rules
|
||||||
|
hide-bottom-space
|
||||||
|
class="inputgreen"
|
||||||
|
v-model="formInformations.nationality"
|
||||||
|
:label="dataLabel.nationality"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="col-xs-6 col-sm-6 col-md-3">
|
||||||
|
<q-input
|
||||||
|
dense
|
||||||
|
outlined
|
||||||
|
lazy-rules
|
||||||
|
hide-bottom-space
|
||||||
|
class="inputgreen"
|
||||||
|
v-model="formInformations.ethnicity"
|
||||||
|
:label="dataLabel.ethnicity"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="col-xs-6 col-sm-6 col-md-3">
|
||||||
|
<q-select
|
||||||
|
dense
|
||||||
|
outlined
|
||||||
|
use-input
|
||||||
|
clearable
|
||||||
|
lazy-rules
|
||||||
|
emit-value
|
||||||
|
map-options
|
||||||
|
hide-bottom-space
|
||||||
|
option-value="name"
|
||||||
|
option-label="name"
|
||||||
|
input-debounce="0"
|
||||||
|
v-model="formInformations.religion"
|
||||||
|
class="inputgreen"
|
||||||
|
:options="props.Ops.religionOps"
|
||||||
|
:label="dataLabel.religion"
|
||||||
|
@filter="(inputValue: string,
|
||||||
|
doneFn: Function) => filterSelector(inputValue, doneFn, 'religionOps'
|
||||||
|
)"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="col-xs-6 col-sm-6 col-md-3">
|
||||||
|
<q-select
|
||||||
|
dense
|
||||||
|
outlined
|
||||||
|
use-input
|
||||||
|
clearable
|
||||||
|
lazy-rules
|
||||||
|
emit-value
|
||||||
|
map-options
|
||||||
|
hide-bottom-space
|
||||||
|
option-value="name"
|
||||||
|
option-label="name"
|
||||||
|
input-debounce="0"
|
||||||
|
v-model="formInformations.bloodGroup"
|
||||||
|
class="inputgreen"
|
||||||
|
:options="props.Ops.bloodOps"
|
||||||
|
:label="dataLabel.bloodGroup"
|
||||||
|
@filter="(inputValue: string,
|
||||||
|
doneFn: Function) => filterSelector(inputValue, doneFn, 'bloodOps'
|
||||||
|
)"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="col-xs-6 col-sm-6 col-md-3">
|
||||||
|
<q-input
|
||||||
|
dense
|
||||||
|
outlined
|
||||||
|
lazy-rules
|
||||||
|
hide-bottom-space
|
||||||
|
mask="##########"
|
||||||
|
class="inputgreen"
|
||||||
|
v-model="formInformations.phone"
|
||||||
|
:label="dataLabel.phone"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
325
src/modules/04_registryPerson/components/Dialog/02_Address.vue
Normal file
325
src/modules/04_registryPerson/components/Dialog/02_Address.vue
Normal file
|
|
@ -0,0 +1,325 @@
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref, onMounted, watch } from "vue";
|
||||||
|
|
||||||
|
import { useDataLinkCenter } from "@/modules/04_registryPerson/stores/LinkCenter";
|
||||||
|
import type { RequestAddressObject } from "@/modules/04_registryPerson/interface/request/Address";
|
||||||
|
|
||||||
|
const storeLinkCenter = useDataLinkCenter();
|
||||||
|
const formDataAddress = defineModel<RequestAddressObject>("formDataAddress", {
|
||||||
|
required: true,
|
||||||
|
});
|
||||||
|
const presentAddress = defineModel<string>("presentAddress", {
|
||||||
|
required: true,
|
||||||
|
});
|
||||||
|
|
||||||
|
const dataLabel = {
|
||||||
|
registrationAddress: "ที่อยู่ตามทะเบียนบ้าน",
|
||||||
|
registrationProvince: "จังหวัด",
|
||||||
|
registrationDistrict: "เขต/อำเภอ",
|
||||||
|
registrationSubDistrict: "แขวง / ตำบล",
|
||||||
|
registrationZipCode: "รหัสไปรษณีย์",
|
||||||
|
currentAddress: "ที่อยู่ปัจจุบัน",
|
||||||
|
currentProvince: "จังหวัด",
|
||||||
|
currentDistrict: "เขต/อำเภอ",
|
||||||
|
currentSubDistrict: "แขวง / ตำบล",
|
||||||
|
currentZipCode: "รหัสไปรษณีย์",
|
||||||
|
registrationSame: "ที่อยู่ปัจจุบันตรงกับที่อยู่ตามทะเบียนบ้าน",
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* ฟังก์ชันเลือกข้อมูลจังหวัด
|
||||||
|
* @param e id จังหวัด
|
||||||
|
* @param name ที่อยู่ตามทะเบียนบ้าน , ที่อยู่ปัจจุบัน
|
||||||
|
*/
|
||||||
|
async function selectProvince(e: string | null, name: string) {
|
||||||
|
if (e != null) {
|
||||||
|
if (name == "1") {
|
||||||
|
formDataAddress.value.registrationSubDistrictId = "";
|
||||||
|
formDataAddress.value.registrationZipCode = "";
|
||||||
|
formDataAddress.value.registrationDistrictId = "";
|
||||||
|
} else {
|
||||||
|
formDataAddress.value.currentSubDistrictId = "";
|
||||||
|
formDataAddress.value.currentZipCode = "";
|
||||||
|
formDataAddress.value.currentDistrictId = "";
|
||||||
|
}
|
||||||
|
await storeLinkCenter.fetchDistrict(e, name, true);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* ฟังก์ชันเลือก เขต / อำเภอ
|
||||||
|
* @param e แขวง/ตำบลที่เลือก
|
||||||
|
* @param name 1 คือ ที่อยู่ตามทะเบียนบ้าน 2 คือ ที่อยู่ปัจจุบัน
|
||||||
|
*/
|
||||||
|
async function selectDistrict(e: string | null, name: string) {
|
||||||
|
if (!e) return;
|
||||||
|
if (name == "1") {
|
||||||
|
formDataAddress.value.registrationSubDistrictId = "";
|
||||||
|
formDataAddress.value.registrationZipCode = "";
|
||||||
|
} else {
|
||||||
|
formDataAddress.value.currentSubDistrictId = "";
|
||||||
|
formDataAddress.value.currentZipCode = "";
|
||||||
|
}
|
||||||
|
await storeLinkCenter.fetchSubDistrict(e, name, true);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* ฟังก์ชันเลือก แขวง / ตำบล
|
||||||
|
* @param e แขวง / ตำบล ที่เลือก
|
||||||
|
* @param name 1 คือ ที่อยู่ตามทะเบียนบ้าน 2 คือ ที่อยู่ปัจจุบัน
|
||||||
|
*/
|
||||||
|
function selectSubDistrict(e: string | null, name: string) {
|
||||||
|
if (!e) return;
|
||||||
|
if (name == "1") {
|
||||||
|
const findcode = storeLinkCenter.OpsAddress.subdistrictOps.filter(
|
||||||
|
(r) => r.id == e
|
||||||
|
);
|
||||||
|
const namecode = findcode.length > 0 ? findcode[0].zipCode : "";
|
||||||
|
formDataAddress.value.registrationZipCode = namecode;
|
||||||
|
} else {
|
||||||
|
const findcode = storeLinkCenter.OpsAddress.subdistrictCOps.filter(
|
||||||
|
(r) => r.id == e
|
||||||
|
);
|
||||||
|
const namecode = findcode.length > 0 ? findcode[0].zipCode : "";
|
||||||
|
formDataAddress.value.currentZipCode = namecode;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* ดูการเปลี่ยนแปลงที่อยู่ปัจจุบันตรงกับที่อยู่ตามทะเบียนบ้าน
|
||||||
|
*/
|
||||||
|
watch(
|
||||||
|
() => presentAddress.value,
|
||||||
|
(v) => {
|
||||||
|
if (v === "0") {
|
||||||
|
formDataAddress.value.currentAddress = "";
|
||||||
|
formDataAddress.value.currentProvinceId = "";
|
||||||
|
formDataAddress.value.currentDistrictId = "";
|
||||||
|
formDataAddress.value.currentSubDistrictId = "";
|
||||||
|
formDataAddress.value.currentZipCode = "";
|
||||||
|
storeLinkCenter.OpsAddress.districtCOps = [];
|
||||||
|
storeLinkCenter.OpsAddress.subdistrictCOps = [];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
);
|
||||||
|
</script>
|
||||||
|
<template>
|
||||||
|
<div class="row col-12 q-col-gutter-x-xs q-col-gutter-y-xs">
|
||||||
|
<div class="col-12 text-tooltip text-weight-medium">ข้อมูลที่อยู่</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-12">
|
||||||
|
<q-input
|
||||||
|
dense
|
||||||
|
outlined
|
||||||
|
lazy-rules
|
||||||
|
hide-bottom-space
|
||||||
|
class="inputgreen"
|
||||||
|
v-model="formDataAddress.registrationAddress"
|
||||||
|
:label="dataLabel.registrationAddress"
|
||||||
|
:rules="[(val:string) => !!val || `${'กรุณากรอก ที่อยู่ตามทะเบียนบ้าน'}`]"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="col-xs-6 col-sm-6 col-md-3">
|
||||||
|
<q-select
|
||||||
|
dense
|
||||||
|
outlined
|
||||||
|
use-input
|
||||||
|
lazy-rules
|
||||||
|
emit-value
|
||||||
|
map-options
|
||||||
|
hide-bottom-space
|
||||||
|
option-value="id"
|
||||||
|
option-label="name"
|
||||||
|
input-debounce="0"
|
||||||
|
class="inputgreen"
|
||||||
|
v-model="formDataAddress.registrationProvinceId"
|
||||||
|
:options="storeLinkCenter.OpsAddress.provinceOps"
|
||||||
|
:label="dataLabel.registrationProvince"
|
||||||
|
:rules="[(val:string) => !!val || `${'กรุณาเลือก จังหวัด'}`]"
|
||||||
|
@update:model-value="(value:string) => selectProvince(value, '1')"
|
||||||
|
@filter="(inputValue:string,
|
||||||
|
doneFn:Function) => storeLinkCenter.filterSelector(inputValue, doneFn,'provinceOps'
|
||||||
|
) "
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="col-xs-6 col-sm-6 col-md-3">
|
||||||
|
<q-select
|
||||||
|
dense
|
||||||
|
outlined
|
||||||
|
use-input
|
||||||
|
lazy-rules
|
||||||
|
emit-value
|
||||||
|
map-options
|
||||||
|
hide-bottom-space
|
||||||
|
option-value="id"
|
||||||
|
option-label="name"
|
||||||
|
input-debounce="0"
|
||||||
|
class="inputgreen"
|
||||||
|
v-model="formDataAddress.registrationDistrictId"
|
||||||
|
:options="storeLinkCenter.OpsAddress.districtOps"
|
||||||
|
:label="dataLabel.registrationDistrict"
|
||||||
|
:rules="[(val:string) => !!val || `${'กรุณาเลือก เขต / อำเภอ'}`]"
|
||||||
|
@update:model-value="(value:string) => selectDistrict(value, '1')"
|
||||||
|
@filter="(inputValue:string,
|
||||||
|
doneFn:Function) => storeLinkCenter.filterSelector(inputValue, doneFn,'districtOps'
|
||||||
|
) "
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="col-xs-6 col-sm-6 col-md-3">
|
||||||
|
<q-select
|
||||||
|
dense
|
||||||
|
outlined
|
||||||
|
use-input
|
||||||
|
lazy-rules
|
||||||
|
emit-value
|
||||||
|
map-options
|
||||||
|
hide-bottom-space
|
||||||
|
option-value="id"
|
||||||
|
option-label="name"
|
||||||
|
input-debounce="0"
|
||||||
|
class="inputgreen"
|
||||||
|
v-model="formDataAddress.registrationSubDistrictId"
|
||||||
|
:options="storeLinkCenter.OpsAddress.subdistrictOps"
|
||||||
|
:label="dataLabel.registrationSubDistrict"
|
||||||
|
:rules="[(val:string) => !!val || `${'กรุณาเลือก แขวง / ตำบล'}`]"
|
||||||
|
@update:model-value="(value:string) => selectSubDistrict(value, '1')"
|
||||||
|
@filter="(inputValue:string,
|
||||||
|
doneFn:Function) => storeLinkCenter.filterSelector(inputValue, doneFn,'subdistrictOps'
|
||||||
|
) "
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="col-xs-6 col-sm-6 col-md-3">
|
||||||
|
<q-input
|
||||||
|
dense
|
||||||
|
readonly
|
||||||
|
outlined
|
||||||
|
lazy-rules
|
||||||
|
hide-bottom-space
|
||||||
|
v-model="formDataAddress.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
|
||||||
|
dense
|
||||||
|
val="1"
|
||||||
|
label="ใช่"
|
||||||
|
checked-icon="task_alt"
|
||||||
|
class="inputgreen"
|
||||||
|
v-model="presentAddress"
|
||||||
|
unchecked-icon="panorama_fish_eye"
|
||||||
|
/>
|
||||||
|
<q-radio
|
||||||
|
dense
|
||||||
|
val="0"
|
||||||
|
label="ไม่"
|
||||||
|
checked-icon="task_alt"
|
||||||
|
class="inputgreen"
|
||||||
|
v-model="presentAddress"
|
||||||
|
unchecked-icon="panorama_fish_eye"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<!-- current address -->
|
||||||
|
<div v-if="presentAddress === '0'">
|
||||||
|
<div class="col-12 q-pb-xs">
|
||||||
|
<q-input
|
||||||
|
dense
|
||||||
|
outlined
|
||||||
|
lazy-rules
|
||||||
|
hide-bottom-space
|
||||||
|
class="inputgreen"
|
||||||
|
v-model="formDataAddress.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-3">
|
||||||
|
<q-select
|
||||||
|
dense
|
||||||
|
outlined
|
||||||
|
use-input
|
||||||
|
lazy-rules
|
||||||
|
emit-value
|
||||||
|
map-options
|
||||||
|
hide-bottom-space
|
||||||
|
option-value="id"
|
||||||
|
option-label="name"
|
||||||
|
input-debounce="0"
|
||||||
|
class="inputgreen"
|
||||||
|
v-model="formDataAddress.currentProvinceId"
|
||||||
|
:options="storeLinkCenter.OpsAddress.provinceOps"
|
||||||
|
:label="dataLabel.currentProvince"
|
||||||
|
:rules="[(val:string) => !!val || `${'กรุณาเลือก จังหวัด'}`]"
|
||||||
|
@update:model-value="(value:string) => selectProvince(value, '2')"
|
||||||
|
@filter="(inputValue:string,
|
||||||
|
doneFn:Function) => storeLinkCenter.filterSelector(inputValue, doneFn,'provinceOps'
|
||||||
|
) "
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="col-xs-6 col-sm-6 col-md-3">
|
||||||
|
<q-select
|
||||||
|
dense
|
||||||
|
outlined
|
||||||
|
use-input
|
||||||
|
lazy-rules
|
||||||
|
emit-value
|
||||||
|
map-options
|
||||||
|
hide-bottom-space
|
||||||
|
option-value="id"
|
||||||
|
option-label="name"
|
||||||
|
input-debounce="0"
|
||||||
|
class="inputgreen"
|
||||||
|
v-model="formDataAddress.currentDistrictId"
|
||||||
|
:options="storeLinkCenter.OpsAddress.districtCOps"
|
||||||
|
:label="dataLabel.currentDistrict"
|
||||||
|
:rules="[(val:string) => !!val || `${'กรุณาเลือก เขต / อำเภอ'}`]"
|
||||||
|
@update:model-value="(value:string) => selectDistrict(value, '2')"
|
||||||
|
@filter="(inputValue:string,
|
||||||
|
doneFn:Function) => storeLinkCenter.filterSelector(inputValue, doneFn,'districtCOps'
|
||||||
|
) "
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="col-xs-6 col-sm-6 col-md-3">
|
||||||
|
<q-select
|
||||||
|
dense
|
||||||
|
outlined
|
||||||
|
use-input
|
||||||
|
lazy-rules
|
||||||
|
emit-value
|
||||||
|
map-options
|
||||||
|
hide-bottom-space
|
||||||
|
option-value="id"
|
||||||
|
option-label="name"
|
||||||
|
input-debounce="0"
|
||||||
|
class="inputgreen"
|
||||||
|
v-model="formDataAddress.currentSubDistrictId"
|
||||||
|
:options="storeLinkCenter.OpsAddress.subdistrictCOps"
|
||||||
|
:label="dataLabel.currentSubDistrict"
|
||||||
|
:rules="[(val:string) => !!val || `${'กรุณาเลือก แขวง / ตำบล'}`]"
|
||||||
|
@update:model-value="(value:string) => selectSubDistrict(value, '2')"
|
||||||
|
@filter="(inputValue:string,
|
||||||
|
doneFn:Function) => storeLinkCenter.filterSelector(inputValue, doneFn,'subdistrictCOps'
|
||||||
|
) "
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="col-xs-6 col-sm-6 col-md-3">
|
||||||
|
<q-input
|
||||||
|
dense
|
||||||
|
readonly
|
||||||
|
outlined
|
||||||
|
lazy-rules
|
||||||
|
hide-bottom-space
|
||||||
|
v-model="formDataAddress.currentZipCode"
|
||||||
|
:label="dataLabel.registrationZipCode"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
571
src/modules/04_registryPerson/components/Dialog/03_Family.vue
Normal file
571
src/modules/04_registryPerson/components/Dialog/03_Family.vue
Normal file
|
|
@ -0,0 +1,571 @@
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { useDataLinkCenter } from "@/modules/04_registryPerson/stores/LinkCenter";
|
||||||
|
import { useProfileDataStore } from "@/modules/04_registryPerson/stores/profile";
|
||||||
|
|
||||||
|
import type {
|
||||||
|
FormPerson,
|
||||||
|
FormChildren,
|
||||||
|
} from "@/modules/04_registryPerson/interface/index/family";
|
||||||
|
|
||||||
|
const fatherData = defineModel<FormPerson>("fatherData", { required: true });
|
||||||
|
const motherData = defineModel<FormPerson>("motherData", { required: true });
|
||||||
|
const coupleData = defineModel<FormPerson>("coupleData", { required: true });
|
||||||
|
const childData = defineModel<FormChildren[]>("childData", { required: true });
|
||||||
|
|
||||||
|
const storeProfile = useProfileDataStore();
|
||||||
|
const storeLinkCenter = useDataLinkCenter();
|
||||||
|
|
||||||
|
/**
|
||||||
|
* function ค้นหาข้อมูลใน select
|
||||||
|
* @param val คำค้นหา
|
||||||
|
* @param update function
|
||||||
|
*/
|
||||||
|
function filterSelectorRelation(val: any, update: Function) {
|
||||||
|
update(() => {
|
||||||
|
storeLinkCenter.optionRelationship =
|
||||||
|
storeLinkCenter.optionRelationshipMain.filter(
|
||||||
|
(v: any) => v.name.indexOf(val) > -1
|
||||||
|
);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* เพิ่มลบ row
|
||||||
|
* @param type 1 = เพิ่ม / 0 = ลบ
|
||||||
|
* @param index ระบุว่าเป็น object ตัวไหน
|
||||||
|
*/
|
||||||
|
function onChild(type: number, index?: number) {
|
||||||
|
if (type === 1) {
|
||||||
|
childData.value.push({
|
||||||
|
id: "",
|
||||||
|
createdAt: "",
|
||||||
|
createdUserId: "",
|
||||||
|
createdFullName: "",
|
||||||
|
lastUpdatedAt: "",
|
||||||
|
lastUpdateUserId: "",
|
||||||
|
lastUpdateFullName: "",
|
||||||
|
profileId: "",
|
||||||
|
profileEmployeeId: "",
|
||||||
|
childrenCitizenId: "",
|
||||||
|
childrenPrefix: "",
|
||||||
|
childrenFirstName: "",
|
||||||
|
childrenLastName: "",
|
||||||
|
childrenCareer: "",
|
||||||
|
childrenLive: 1,
|
||||||
|
} as FormChildren);
|
||||||
|
} else if (type === 0 && index !== undefined) {
|
||||||
|
childData.value.splice(index, 1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<template>
|
||||||
|
<div class="row col-12 q-col-gutter-x-xs q-col-gutter-y-xs">
|
||||||
|
<div class="col-12 text-tooltip text-weight-medium">ข้อมูลครอบครัว</div>
|
||||||
|
<div class="col-xs-12 text-weight-bold">• บิดา</div>
|
||||||
|
<div class="col-xs-6 col-sm-6 col-md-3">
|
||||||
|
<q-input
|
||||||
|
outlined
|
||||||
|
hide-bottom-space
|
||||||
|
bg-color="white"
|
||||||
|
dense
|
||||||
|
v-model="fatherData.citizenId"
|
||||||
|
:label="`${'เลขประจำตัวประชาชน'}`"
|
||||||
|
maxlength="13"
|
||||||
|
:rules="[
|
||||||
|
(val:string) => !!val || 'กรุณากรอกเลขบัตรประชาชน',
|
||||||
|
(val:string) =>
|
||||||
|
val.length === 13 ||
|
||||||
|
'กรุณากรอกเลขบัตรประชาชนให้ครบ 13 หลัก',
|
||||||
|
]
|
||||||
|
"
|
||||||
|
class="inputgreen"
|
||||||
|
mask="#############"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="col-xs-6 col-sm-6 col-md-2">
|
||||||
|
<q-select
|
||||||
|
outlined
|
||||||
|
bg-color="white"
|
||||||
|
lazy-rules
|
||||||
|
hidden-space
|
||||||
|
hide-bottom-space
|
||||||
|
dense
|
||||||
|
class="inputgreen"
|
||||||
|
:rules="
|
||||||
|
[(val:string) => !!val || 'กรุณาเลือกคำนำหน้าชื่อ']
|
||||||
|
|
||||||
|
"
|
||||||
|
label="คำนำหน้าชื่อ"
|
||||||
|
v-model="fatherData.prefix"
|
||||||
|
use-input
|
||||||
|
input-debounce="0"
|
||||||
|
emit-value
|
||||||
|
map-options
|
||||||
|
:options="storeLinkCenter.OpsPerson.prefixOps"
|
||||||
|
option-label="name"
|
||||||
|
option-value="name"
|
||||||
|
@filter="(inputValue:string,
|
||||||
|
doneFn:Function) => storeProfile.filterSelector(inputValue, doneFn,'prefixOps'
|
||||||
|
) "
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="col-xs-6 col-sm-6 col-md-2">
|
||||||
|
<q-input
|
||||||
|
outlined
|
||||||
|
dense
|
||||||
|
hide-bottom-space
|
||||||
|
bg-color="white"
|
||||||
|
class="inputgreen"
|
||||||
|
lazy-rules
|
||||||
|
v-model="fatherData.firstName"
|
||||||
|
:rules="
|
||||||
|
[(val:string) => !!val || 'กรุณากรอกชื่อ']
|
||||||
|
|
||||||
|
"
|
||||||
|
label="ชื่อ"
|
||||||
|
hidden-space
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="col-xs-6 col-sm-6 col-md-2">
|
||||||
|
<q-input
|
||||||
|
outlined
|
||||||
|
dense
|
||||||
|
class="inputgreen"
|
||||||
|
bg-color="white"
|
||||||
|
hide-bottom-space
|
||||||
|
lazy-rules
|
||||||
|
v-model="fatherData.lastName"
|
||||||
|
:rules="
|
||||||
|
[(val:string) => !!val || 'กรุณากรอกนามสกุล']
|
||||||
|
|
||||||
|
"
|
||||||
|
label="นามสกุล"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="col-xs-6 col-sm-6 col-md-3">
|
||||||
|
<q-input
|
||||||
|
outlined
|
||||||
|
dense
|
||||||
|
class="inputgreen"
|
||||||
|
bg-color="white"
|
||||||
|
v-model="fatherData.job"
|
||||||
|
label="อาชีพ"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="col-12">
|
||||||
|
<div class="row q-my-xs">
|
||||||
|
<div class="q-mr-sm">สถานภาพการมีชีวิต</div>
|
||||||
|
<div>
|
||||||
|
<q-radio
|
||||||
|
class="q-mr-sm"
|
||||||
|
v-model="fatherData.isLive"
|
||||||
|
checked-icon="task_alt"
|
||||||
|
unchecked-icon="panorama_fish_eye"
|
||||||
|
:val="1"
|
||||||
|
label="ยังมีชีวิตอยู่"
|
||||||
|
dense
|
||||||
|
:color="!fatherData.isLive ? 'grey' : 'primary'"
|
||||||
|
/>
|
||||||
|
<q-radio
|
||||||
|
v-model="fatherData.isLive"
|
||||||
|
checked-icon="task_alt"
|
||||||
|
unchecked-icon="panorama_fish_eye"
|
||||||
|
:val="0"
|
||||||
|
:color="!fatherData.isLive ? 'grey' : 'red'"
|
||||||
|
label="ถึงแก่กรรม"
|
||||||
|
dense
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-xs-12 text-weight-bold">• มารดา</div>
|
||||||
|
<div class="col-xs-6 col-sm-6 col-md-3">
|
||||||
|
<q-input
|
||||||
|
outlined
|
||||||
|
hide-bottom-space
|
||||||
|
bg-color="white"
|
||||||
|
dense
|
||||||
|
v-model="motherData.citizenId"
|
||||||
|
:label="`${'เลขประจำตัวประชาชน'}`"
|
||||||
|
maxlength="13"
|
||||||
|
:rules="[
|
||||||
|
(val:string) => !!val || 'กรุณากรอกเลขบัตรประชาชน',
|
||||||
|
(val:string) =>
|
||||||
|
val.length === 13 ||
|
||||||
|
'กรุณากรอกเลขบัตรประชาชนให้ครบ 13 หลัก',
|
||||||
|
]
|
||||||
|
"
|
||||||
|
class="inputgreen"
|
||||||
|
mask="#############"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="col-xs-6 col-sm-6 col-md-2">
|
||||||
|
<q-select
|
||||||
|
outlined
|
||||||
|
bg-color="white"
|
||||||
|
lazy-rules
|
||||||
|
hidden-space
|
||||||
|
hide-bottom-space
|
||||||
|
dense
|
||||||
|
class="inputgreen"
|
||||||
|
:rules="
|
||||||
|
[(val:string) => !!val || 'กรุณาเลือกคำนำหน้าชื่อ']
|
||||||
|
|
||||||
|
"
|
||||||
|
label="คำนำหน้าชื่อ"
|
||||||
|
v-model="motherData.prefix"
|
||||||
|
use-input
|
||||||
|
input-debounce="0"
|
||||||
|
emit-value
|
||||||
|
map-options
|
||||||
|
:options="storeLinkCenter.OpsPerson.prefixOps"
|
||||||
|
option-label="name"
|
||||||
|
option-value="name"
|
||||||
|
@filter="(inputValue:string,
|
||||||
|
doneFn:Function) => storeProfile.filterSelector(inputValue, doneFn,'prefixOps'
|
||||||
|
) "
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="col-xs-6 col-sm-6 col-md-2">
|
||||||
|
<q-input
|
||||||
|
outlined
|
||||||
|
dense
|
||||||
|
hide-bottom-space
|
||||||
|
bg-color="white"
|
||||||
|
class="inputgreen"
|
||||||
|
lazy-rules
|
||||||
|
v-model="motherData.firstName"
|
||||||
|
:rules="
|
||||||
|
[(val:string) => !!val || 'กรุณากรอกชื่อ']
|
||||||
|
|
||||||
|
"
|
||||||
|
label="ชื่อ"
|
||||||
|
hidden-space
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="col-xs-6 col-sm-6 col-md-2">
|
||||||
|
<q-input
|
||||||
|
outlined
|
||||||
|
dense
|
||||||
|
class="inputgreen"
|
||||||
|
bg-color="white"
|
||||||
|
hide-bottom-space
|
||||||
|
lazy-rules
|
||||||
|
v-model="motherData.lastName"
|
||||||
|
:rules="
|
||||||
|
[(val:string) => !!val || 'กรุณากรอกนามสกุล']
|
||||||
|
|
||||||
|
"
|
||||||
|
label="นามสกุล"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="col-xs-6 col-sm-6 col-md-3">
|
||||||
|
<q-input
|
||||||
|
outlined
|
||||||
|
dense
|
||||||
|
class="inputgreen"
|
||||||
|
bg-color="white"
|
||||||
|
v-model="motherData.job"
|
||||||
|
label="อาชีพ"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="col-12">
|
||||||
|
<div class="row q-my-xs">
|
||||||
|
<div class="q-mr-sm">สถานภาพการมีชีวิต</div>
|
||||||
|
<div>
|
||||||
|
<q-radio
|
||||||
|
class="q-mr-sm"
|
||||||
|
v-model="motherData.isLive"
|
||||||
|
checked-icon="task_alt"
|
||||||
|
unchecked-icon="panorama_fish_eye"
|
||||||
|
:val="1"
|
||||||
|
label="ยังมีชีวิตอยู่"
|
||||||
|
dense
|
||||||
|
:color="!motherData.isLive ? 'grey' : 'primary'"
|
||||||
|
/>
|
||||||
|
<q-radio
|
||||||
|
v-model="motherData.isLive"
|
||||||
|
checked-icon="task_alt"
|
||||||
|
unchecked-icon="panorama_fish_eye"
|
||||||
|
:val="0"
|
||||||
|
:color="!motherData.isLive ? 'grey' : 'red'"
|
||||||
|
label="ถึงแก่กรรม"
|
||||||
|
dense
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-xs-12 text-weight-bold">• คู่สมรส</div>
|
||||||
|
<div class="col-12">
|
||||||
|
<div class="row q-col-gutter-x-xs">
|
||||||
|
<div class="col-xs-6 col-sm-6 col-md-2">
|
||||||
|
<q-select
|
||||||
|
outlined
|
||||||
|
bg-color="white"
|
||||||
|
lazy-rules
|
||||||
|
hidden-space
|
||||||
|
dense
|
||||||
|
class="inputgreen"
|
||||||
|
label="สถานภาพการสมรส"
|
||||||
|
v-model="coupleData.statusMarital"
|
||||||
|
use-input
|
||||||
|
input-debounce="0"
|
||||||
|
emit-value
|
||||||
|
map-options
|
||||||
|
:options="storeLinkCenter.optionRelationship"
|
||||||
|
option-label="name"
|
||||||
|
option-value="name"
|
||||||
|
@filter="(inputValue:string,
|
||||||
|
doneFn:Function) => filterSelectorRelation(inputValue, doneFn) "
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-xs-6 col-sm-6 col-md-2">
|
||||||
|
<q-input
|
||||||
|
outlined
|
||||||
|
bg-color="white"
|
||||||
|
dense
|
||||||
|
v-model="coupleData.citizenId"
|
||||||
|
:label="`${'เลขประจำตัวประชาชน'}`"
|
||||||
|
maxlength="13"
|
||||||
|
class="inputgreen"
|
||||||
|
mask="#############"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="col-xs-6 col-sm-6 col-md-2">
|
||||||
|
<q-select
|
||||||
|
outlined
|
||||||
|
bg-color="white"
|
||||||
|
lazy-rules
|
||||||
|
hidden-space
|
||||||
|
dense
|
||||||
|
class="inputgreen"
|
||||||
|
label="คำนำหน้าชื่อ"
|
||||||
|
v-model="coupleData.prefix"
|
||||||
|
use-input
|
||||||
|
input-debounce="0"
|
||||||
|
emit-value
|
||||||
|
map-options
|
||||||
|
:options="storeLinkCenter.OpsPerson.prefixOps"
|
||||||
|
option-label="name"
|
||||||
|
option-value="name"
|
||||||
|
@filter="(inputValue:string,
|
||||||
|
doneFn:Function) => storeProfile.filterSelector(inputValue, doneFn,'prefixOps'
|
||||||
|
) "
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="col-xs-6 col-sm-6 col-md-2">
|
||||||
|
<q-input
|
||||||
|
outlined
|
||||||
|
dense
|
||||||
|
bg-color="white"
|
||||||
|
class="inputgreen"
|
||||||
|
lazy-rules
|
||||||
|
v-model="coupleData.firstName"
|
||||||
|
label="ชื่อ"
|
||||||
|
hidden-space
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="col-xs-6 col-sm-6 col-md-2">
|
||||||
|
<q-input
|
||||||
|
outlined
|
||||||
|
dense
|
||||||
|
class="inputgreen"
|
||||||
|
bg-color="white"
|
||||||
|
hide-bottom-space
|
||||||
|
lazy-rules
|
||||||
|
v-model="coupleData.lastName"
|
||||||
|
label="นามสกุล"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="col-xs-6 col-sm-6 col-md-2">
|
||||||
|
<q-input
|
||||||
|
outlined
|
||||||
|
dense
|
||||||
|
class="inputgreen"
|
||||||
|
bg-color="white"
|
||||||
|
lazy-rules
|
||||||
|
v-model="coupleData.lastNameOld"
|
||||||
|
label="นามสกุลเดิม"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="col-xs-6 col-sm-6 col-md-2">
|
||||||
|
<q-input
|
||||||
|
outlined
|
||||||
|
dense
|
||||||
|
class="inputgreen"
|
||||||
|
bg-color="white"
|
||||||
|
v-model="coupleData.job"
|
||||||
|
label="อาชีพ"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="col-12">
|
||||||
|
<div class="row q-my-xs">
|
||||||
|
<div class="q-mr-sm">สถานภาพการมีชีวิต</div>
|
||||||
|
<div>
|
||||||
|
<q-radio
|
||||||
|
class="q-mr-sm"
|
||||||
|
v-model="coupleData.isLive"
|
||||||
|
checked-icon="task_alt"
|
||||||
|
unchecked-icon="panorama_fish_eye"
|
||||||
|
:val="1"
|
||||||
|
label="ยังมีชีวิตอยู่"
|
||||||
|
dense
|
||||||
|
:color="!coupleData.isLive ? 'grey' : 'primary'"
|
||||||
|
/>
|
||||||
|
<q-radio
|
||||||
|
v-model="coupleData.isLive"
|
||||||
|
checked-icon="task_alt"
|
||||||
|
unchecked-icon="panorama_fish_eye"
|
||||||
|
:val="0"
|
||||||
|
:color="!coupleData.isLive ? 'grey' : 'red'"
|
||||||
|
label="ถึงแก่กรรม"
|
||||||
|
dense
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-xs-12 text-weight-bold">
|
||||||
|
• บุตร
|
||||||
|
<q-btn dense round flat icon="add" color="primary" @click="onChild(1)"
|
||||||
|
><q-tooltip>เพิ่ม</q-tooltip></q-btn
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="row col-12 q-col-gutter-x-xs"
|
||||||
|
v-for="(item, index) in childData"
|
||||||
|
:key="index"
|
||||||
|
>
|
||||||
|
<div class="col-12 q-mb-xs">บุตรคนที่:{{ index + 1 }}</div>
|
||||||
|
<div class="col-xs-6 col-sm-6 col-md-3">
|
||||||
|
<q-input
|
||||||
|
outlined
|
||||||
|
hide-bottom-space
|
||||||
|
bg-color="white"
|
||||||
|
dense
|
||||||
|
v-model="item.childrenCitizenId"
|
||||||
|
:label="`${'เลขประจำตัวประชาชน'}`"
|
||||||
|
maxlength="13"
|
||||||
|
:rules="[
|
||||||
|
(val:string) => !!val || 'กรุณากรอกเลขบัตรประชาชน',
|
||||||
|
(val:string) =>
|
||||||
|
val.length === 13 ||
|
||||||
|
'กรุณากรอกเลขบัตรประชาชนให้ครบ 13 หลัก',
|
||||||
|
]
|
||||||
|
"
|
||||||
|
class="inputgreen"
|
||||||
|
mask="#############"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="col-xs-6 col-sm-6 col-md-2">
|
||||||
|
<q-select
|
||||||
|
outlined
|
||||||
|
bg-color="white"
|
||||||
|
lazy-rules
|
||||||
|
hidden-space
|
||||||
|
hide-bottom-space
|
||||||
|
dense
|
||||||
|
class="inputgreen"
|
||||||
|
:rules="
|
||||||
|
[(val:string) => !!val || 'กรุณาเลือกคำนำหน้าชื่อ']
|
||||||
|
|
||||||
|
"
|
||||||
|
label="คำนำหน้าชื่อ"
|
||||||
|
v-model="item.childrenPrefix"
|
||||||
|
use-input
|
||||||
|
input-debounce="0"
|
||||||
|
emit-value
|
||||||
|
map-options
|
||||||
|
:options="storeLinkCenter.OpsPerson.prefixOps"
|
||||||
|
option-label="name"
|
||||||
|
option-value="name"
|
||||||
|
@filter="(inputValue:string,
|
||||||
|
doneFn:Function) => storeProfile.filterSelector(inputValue, doneFn,'prefixOps'
|
||||||
|
) "
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="col-xs-6 col-sm-6 col-md-2">
|
||||||
|
<q-input
|
||||||
|
outlined
|
||||||
|
dense
|
||||||
|
hide-bottom-space
|
||||||
|
bg-color="white"
|
||||||
|
class="inputgreen"
|
||||||
|
lazy-rules
|
||||||
|
v-model="item.childrenFirstName"
|
||||||
|
:rules="
|
||||||
|
[(val:string) => !!val || 'กรุณากรอกชื่อ']
|
||||||
|
|
||||||
|
"
|
||||||
|
label="ชื่อ"
|
||||||
|
hidden-space
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="col-xs-6 col-sm-6 col-md-2">
|
||||||
|
<q-input
|
||||||
|
outlined
|
||||||
|
dense
|
||||||
|
class="inputgreen"
|
||||||
|
bg-color="white"
|
||||||
|
hide-bottom-space
|
||||||
|
lazy-rules
|
||||||
|
v-model="item.childrenLastName"
|
||||||
|
:rules="
|
||||||
|
[(val:string) => !!val || 'กรุณากรอกนามสกุล']
|
||||||
|
|
||||||
|
"
|
||||||
|
label="นามสกุล"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="col-xs-6 col-sm-6 col-md-2">
|
||||||
|
<q-input
|
||||||
|
outlined
|
||||||
|
dense
|
||||||
|
class="inputgreen"
|
||||||
|
bg-color="white"
|
||||||
|
v-model="item.childrenCareer"
|
||||||
|
label="อาชีพ"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="self-center">
|
||||||
|
<q-btn
|
||||||
|
dense
|
||||||
|
flat
|
||||||
|
round
|
||||||
|
icon="mdi-trash-can"
|
||||||
|
color="red"
|
||||||
|
@click="onChild(0, index)"
|
||||||
|
>
|
||||||
|
<q-tooltip>ลบ</q-tooltip>
|
||||||
|
</q-btn>
|
||||||
|
</div>
|
||||||
|
<div class="col-12">
|
||||||
|
<div class="row q-my-xs">
|
||||||
|
<div class="q-mr-sm">สถานภาพการมีชีวิต</div>
|
||||||
|
<div>
|
||||||
|
<q-radio
|
||||||
|
class="q-mr-sm"
|
||||||
|
v-model="item.childrenLive"
|
||||||
|
checked-icon="task_alt"
|
||||||
|
unchecked-icon="panorama_fish_eye"
|
||||||
|
:val="1"
|
||||||
|
label="ยังมีชีวิตอยู่"
|
||||||
|
dense
|
||||||
|
:color="!item.childrenLive ? 'grey' : 'primary'"
|
||||||
|
/>
|
||||||
|
<q-radio
|
||||||
|
v-model="item.childrenLive"
|
||||||
|
checked-icon="task_alt"
|
||||||
|
unchecked-icon="panorama_fish_eye"
|
||||||
|
:val="0"
|
||||||
|
:color="!item.childrenLive ? 'grey' : 'red'"
|
||||||
|
label="ถึงแก่กรรม"
|
||||||
|
dense
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
482
src/modules/04_registryPerson/components/Dialog/DialogUpdate.vue
Normal file
482
src/modules/04_registryPerson/components/Dialog/DialogUpdate.vue
Normal file
|
|
@ -0,0 +1,482 @@
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref, watch, reactive } from "vue";
|
||||||
|
import { useQuasar } from "quasar";
|
||||||
|
|
||||||
|
import http from "@/plugins/http";
|
||||||
|
import config from "@/app.config";
|
||||||
|
|
||||||
|
import { useCounterMixin } from "@/stores/mixin";
|
||||||
|
import { useLinkageStore } from "@/stores/linkage";
|
||||||
|
import { useDataLinkCenter } from "@/modules/04_registryPerson/stores/LinkCenter";
|
||||||
|
|
||||||
|
import type { RequestAddressObject } from "@/modules/04_registryPerson/interface/request/Address";
|
||||||
|
import type { RequestObject } from "@/modules/04_registryPerson/interface/request/Profile";
|
||||||
|
import type {
|
||||||
|
FormPerson,
|
||||||
|
FormChildren,
|
||||||
|
} from "@/modules/04_registryPerson/interface/index/family";
|
||||||
|
|
||||||
|
import Header from "@/components/DialogHeader.vue"; //ส่วนหัว popup
|
||||||
|
import InformationPage from "@/modules/04_registryPerson/components/Dialog/01_Information.vue"; //form ข้อมูลส่วนตัว
|
||||||
|
import AddressPage from "@/modules/04_registryPerson/components/Dialog/02_Address.vue"; //form ข้อมูลที่อยู่
|
||||||
|
import FamilyPage from "@/modules/04_registryPerson/components/Dialog/03_Family.vue"; //form ข้อมูลครอบครัว
|
||||||
|
|
||||||
|
const modal = defineModel<boolean>("modal", { required: true }); // ตัวแปร popup
|
||||||
|
const idCard = defineModel<string>("idCard", { required: true }); //เลขบัตร ปชช
|
||||||
|
const profileId = defineModel<string>("profileId", { required: true }); //id บุคคล
|
||||||
|
|
||||||
|
const $q = useQuasar();
|
||||||
|
const mixin = useCounterMixin();
|
||||||
|
const storeLinkage = useLinkageStore();
|
||||||
|
const storeLinkCenter = useDataLinkCenter();
|
||||||
|
const {
|
||||||
|
showLoader,
|
||||||
|
hideLoader,
|
||||||
|
messageError,
|
||||||
|
dialogConfirm,
|
||||||
|
modalError,
|
||||||
|
success,
|
||||||
|
} = mixin;
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
fetchData: Function,
|
||||||
|
requestId: String,
|
||||||
|
});
|
||||||
|
|
||||||
|
const data = ref<any>(null);
|
||||||
|
const presentAddress = ref<string>("0"); // ตัวแปรเก็บที่ อยู่ปัจจุบัน ใช่/ไม่
|
||||||
|
const count = ref<number>(0); // ตัวแปร นับ count
|
||||||
|
const age = ref<string | null>(""); //อายุ
|
||||||
|
const fullName = ref<string | null>(""); //ชื่อเต็ม
|
||||||
|
const formInformations = reactive<RequestObject>({
|
||||||
|
bloodGroup: null,
|
||||||
|
relationship: null,
|
||||||
|
gender: null,
|
||||||
|
religion: null,
|
||||||
|
citizenId: "",
|
||||||
|
nationality: null,
|
||||||
|
ethnicity: null,
|
||||||
|
birthDate: null,
|
||||||
|
phone: null,
|
||||||
|
lastName: "",
|
||||||
|
firstName: "",
|
||||||
|
prefix: "",
|
||||||
|
rank: null,
|
||||||
|
});
|
||||||
|
|
||||||
|
const formDataAddress = reactive<RequestAddressObject>({
|
||||||
|
currentZipCode: "",
|
||||||
|
currentSubDistrictId: "",
|
||||||
|
currentDistrictId: "",
|
||||||
|
currentProvinceId: "",
|
||||||
|
currentAddress: "",
|
||||||
|
|
||||||
|
registrationZipCode: "",
|
||||||
|
registrationSubDistrictId: "",
|
||||||
|
registrationDistrictId: "",
|
||||||
|
registrationProvinceId: "",
|
||||||
|
registrationAddress: "",
|
||||||
|
});
|
||||||
|
|
||||||
|
const fatherData = reactive<FormPerson>({
|
||||||
|
isLive: 1,
|
||||||
|
citizenId: "",
|
||||||
|
prefix: "",
|
||||||
|
firstName: "",
|
||||||
|
lastName: "",
|
||||||
|
job: "",
|
||||||
|
});
|
||||||
|
const motherData = reactive<FormPerson>({
|
||||||
|
isLive: 1,
|
||||||
|
citizenId: "",
|
||||||
|
prefix: "",
|
||||||
|
firstName: "",
|
||||||
|
lastName: "",
|
||||||
|
job: "",
|
||||||
|
});
|
||||||
|
const coupleData = reactive<FormPerson>({
|
||||||
|
isLive: 1,
|
||||||
|
citizenId: "",
|
||||||
|
prefix: "",
|
||||||
|
firstName: "",
|
||||||
|
lastName: "",
|
||||||
|
job: "",
|
||||||
|
lastNameOld: "",
|
||||||
|
statusMarital: "",
|
||||||
|
});
|
||||||
|
const childData = ref<FormChildren[]>([]);
|
||||||
|
|
||||||
|
/** ปิด popup */
|
||||||
|
async function closeDialog() {
|
||||||
|
modal.value = false;
|
||||||
|
count.value = 0;
|
||||||
|
childData.value = [];
|
||||||
|
}
|
||||||
|
|
||||||
|
/** อัพเดตข้อมูลส่วนตัว */
|
||||||
|
async function upDateInfomation() {
|
||||||
|
await http
|
||||||
|
.put(config.API.profileNewProfileById(profileId.value, ""), {
|
||||||
|
...formInformations,
|
||||||
|
undefined,
|
||||||
|
})
|
||||||
|
.then(async () => {
|
||||||
|
count.value + 1;
|
||||||
|
})
|
||||||
|
.catch((e) => {
|
||||||
|
messageError($q, e);
|
||||||
|
hideLoader();
|
||||||
|
})
|
||||||
|
.finally(() => {});
|
||||||
|
}
|
||||||
|
|
||||||
|
/** อัพเดตข้อมูลที่อยู่ */
|
||||||
|
async function upDateAddress() {
|
||||||
|
if (presentAddress.value === "1") {
|
||||||
|
formDataAddress.currentAddress = formDataAddress.registrationAddress;
|
||||||
|
formDataAddress.currentProvinceId = formDataAddress.registrationProvinceId;
|
||||||
|
formDataAddress.currentDistrictId = formDataAddress.registrationDistrictId;
|
||||||
|
formDataAddress.currentSubDistrictId =
|
||||||
|
formDataAddress.registrationSubDistrictId;
|
||||||
|
formDataAddress.currentZipCode = formDataAddress.registrationZipCode;
|
||||||
|
storeLinkCenter.OpsAddress.districtCOps =
|
||||||
|
storeLinkCenter.OpsAddress.districtOps;
|
||||||
|
storeLinkCenter.OpsAddress.subdistrictCOps =
|
||||||
|
storeLinkCenter.OpsAddress.subdistrictOps;
|
||||||
|
}
|
||||||
|
await http
|
||||||
|
.patch(config.API.profileNewAddressById(profileId.value, ""), {
|
||||||
|
...formDataAddress,
|
||||||
|
id: undefined,
|
||||||
|
})
|
||||||
|
.then(async () => {})
|
||||||
|
.catch((e) => {
|
||||||
|
messageError($q, e);
|
||||||
|
hideLoader();
|
||||||
|
})
|
||||||
|
.finally(() => {});
|
||||||
|
}
|
||||||
|
|
||||||
|
/** อัพเดตข้อมูลครอบครัว */
|
||||||
|
async function upDateFamily() {
|
||||||
|
await saveFather();
|
||||||
|
await saveMother();
|
||||||
|
await saveCouple();
|
||||||
|
for (const child of childData.value) {
|
||||||
|
await saveChildren(child);
|
||||||
|
}
|
||||||
|
count.value + 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
async function saveFather() {
|
||||||
|
const body = {
|
||||||
|
profileId: profileId.value,
|
||||||
|
fatherCitizenId: fatherData.citizenId,
|
||||||
|
fatherPrefix: fatherData.prefix,
|
||||||
|
fatherFirstName: fatherData.firstName,
|
||||||
|
fatherLastName: fatherData.lastName,
|
||||||
|
fatherCareer: fatherData.job,
|
||||||
|
fatherLive: fatherData.isLive === 1 ? true : false,
|
||||||
|
};
|
||||||
|
http
|
||||||
|
.post(config.API.profileFamily("", "father"), body)
|
||||||
|
.then((res) => {})
|
||||||
|
.catch((e) => {
|
||||||
|
messageError($q, e);
|
||||||
|
hideLoader();
|
||||||
|
})
|
||||||
|
.finally(() => {});
|
||||||
|
}
|
||||||
|
|
||||||
|
async function saveMother() {
|
||||||
|
const body = {
|
||||||
|
profileId: profileId.value,
|
||||||
|
motherCitizenId: motherData.citizenId,
|
||||||
|
motherPrefix: motherData.prefix,
|
||||||
|
motherFirstName: motherData.firstName,
|
||||||
|
motherLastName: motherData.lastName,
|
||||||
|
motherCareer: motherData.job,
|
||||||
|
motherLive: motherData.isLive === 1 ? true : false,
|
||||||
|
};
|
||||||
|
http
|
||||||
|
.post(config.API.profileFamily("", "mother"), body)
|
||||||
|
.then((res) => {})
|
||||||
|
.catch((e) => {
|
||||||
|
messageError($q, e);
|
||||||
|
hideLoader();
|
||||||
|
})
|
||||||
|
.finally(() => {});
|
||||||
|
}
|
||||||
|
|
||||||
|
async function saveCouple() {
|
||||||
|
const body = {
|
||||||
|
profileId: profileId.value,
|
||||||
|
coupleCitizenId: coupleData.citizenId,
|
||||||
|
couplePrefix: coupleData.prefix,
|
||||||
|
coupleFirstName: coupleData.firstName,
|
||||||
|
coupleLastName: coupleData.lastName,
|
||||||
|
coupleCareer: coupleData.job,
|
||||||
|
coupleLive: coupleData.isLive === 1 ? true : false,
|
||||||
|
relationship: coupleData.statusMarital,
|
||||||
|
coupleLastNameOld: coupleData.lastNameOld,
|
||||||
|
};
|
||||||
|
http
|
||||||
|
.post(config.API.profileFamily("", "couple"), body)
|
||||||
|
.then((res) => {})
|
||||||
|
.catch((e) => {
|
||||||
|
messageError($q, e);
|
||||||
|
hideLoader();
|
||||||
|
})
|
||||||
|
.finally(() => {});
|
||||||
|
}
|
||||||
|
|
||||||
|
async function saveChildren(child: FormChildren) {
|
||||||
|
const body = {
|
||||||
|
profileId: profileId.value,
|
||||||
|
childrenCitizenId: child.childrenCitizenId,
|
||||||
|
childrenPrefix: child.childrenPrefix,
|
||||||
|
childrenFirstName: child.childrenFirstName,
|
||||||
|
childrenLastName: child.childrenLastName,
|
||||||
|
childrenCareer: child.childrenCareer,
|
||||||
|
childrenLive: child.childrenLive === 1 ? true : false,
|
||||||
|
};
|
||||||
|
|
||||||
|
return http
|
||||||
|
.post(config.API.profileFamily("", "children"), body)
|
||||||
|
.then((res) => {})
|
||||||
|
.catch((e) => {
|
||||||
|
messageError($q, e);
|
||||||
|
hideLoader();
|
||||||
|
})
|
||||||
|
.finally(() => {});
|
||||||
|
}
|
||||||
|
|
||||||
|
/** ส่ง สถานะ ดำเนินการเเล้ว */
|
||||||
|
async function upDateStatus() {
|
||||||
|
await http
|
||||||
|
.patch(config.API.requestEdit + `${props.requestId}`, {
|
||||||
|
status: "COMPLETE",
|
||||||
|
remark: "",
|
||||||
|
})
|
||||||
|
.then(async () => {
|
||||||
|
await props.fetchData?.();
|
||||||
|
await success($q, "บันทึกข้อมูลสำเร็จ");
|
||||||
|
closeDialog();
|
||||||
|
})
|
||||||
|
.catch((err) => {
|
||||||
|
messageError($q, err);
|
||||||
|
})
|
||||||
|
.finally(() => {
|
||||||
|
hideLoader();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
/** อัพเดตข้อมูล */
|
||||||
|
function onSubmit() {
|
||||||
|
dialogConfirm($q, async () => {
|
||||||
|
showLoader();
|
||||||
|
await upDateInfomation();
|
||||||
|
await upDateAddress();
|
||||||
|
await upDateFamily();
|
||||||
|
if (count.value == 3) {
|
||||||
|
await upDateStatus();
|
||||||
|
success($q, "บันทึกข้อมูลสำเร็จ");
|
||||||
|
closeDialog();
|
||||||
|
await props.fetchData?.();
|
||||||
|
}
|
||||||
|
hideLoader();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
async function amiRequest() {
|
||||||
|
const profile = await storeLinkage.amiRequest($q, 5000, idCard.value, "001");
|
||||||
|
data.value = profile;
|
||||||
|
|
||||||
|
data.value = profile;
|
||||||
|
data.value = {
|
||||||
|
titleCode: 3,
|
||||||
|
titleDesc: "นาย",
|
||||||
|
titleName: "นาย",
|
||||||
|
titleSex: 1,
|
||||||
|
firstName: "ชัยชนะ",
|
||||||
|
middleName: "",
|
||||||
|
lastName: "เรืองโรจน์",
|
||||||
|
genderCode: 1,
|
||||||
|
genderDesc: "ชาย",
|
||||||
|
dateOfBirth: 25211228,
|
||||||
|
nationalityCode: 99,
|
||||||
|
nationalityDesc: "ไทย",
|
||||||
|
ownerStatusDesc: "เจ้าบ้าน",
|
||||||
|
statusOfPersonCode: 0,
|
||||||
|
statusOfPersonDesc: "บุคคลนี้มีภูมิลำเนาอยู่ในบ้านนี้",
|
||||||
|
dateOfMoveIn: 25580728,
|
||||||
|
age: 45,
|
||||||
|
|
||||||
|
fatherPersonalID: 3102100621479,
|
||||||
|
fatherName: "บุญเชิด",
|
||||||
|
fatherNationalityCode: 99,
|
||||||
|
fatherNationalityDesc: "ไทย",
|
||||||
|
|
||||||
|
motherPersonalID: 3102100621487,
|
||||||
|
motherName: "พยอม",
|
||||||
|
motherNationalityCode: 99,
|
||||||
|
motherNationalityDesc: "ไทย",
|
||||||
|
|
||||||
|
fullnameAndRank: "นายสุพลชัย พูลสวัสดิ์",
|
||||||
|
englishTitleDesc: "MR.",
|
||||||
|
englishFirstName: "SUPHONCHAI",
|
||||||
|
englishMiddleName: "",
|
||||||
|
englishLastName: "PHOONSAWAT",
|
||||||
|
|
||||||
|
registrationAddress: "1220-1222 ถนนเพชรบุรี",
|
||||||
|
registrationProvinceId: "24bf701c-33d6-436e-ad49-6f82bb3ae017",
|
||||||
|
registrationDistrictId: "34bf701c-33d6-436e-ad49-6f82bb3b0586",
|
||||||
|
registrationSubDistrictId: "44bf701c-33d6-436e-ad49-6f82bb3b5649",
|
||||||
|
registrationZipCode: "10400",
|
||||||
|
currentAddress: "1220-1222 ถนนเพชรบุรี",
|
||||||
|
currentProvinceId: "24bf701c-33d6-436e-ad49-6f82bb3ae017",
|
||||||
|
currentDistrictId: "34bf701c-33d6-436e-ad49-6f82bb3b0586",
|
||||||
|
currentSubDistrictId: "44bf701c-33d6-436e-ad49-6f82bb3b5649",
|
||||||
|
currentZipCode: "10400",
|
||||||
|
};
|
||||||
|
|
||||||
|
formInformations.citizenId = idCard.value;
|
||||||
|
formInformations.prefix = data.value.titleName;
|
||||||
|
fullName.value = data.value.fullnameAndRank;
|
||||||
|
formInformations.firstName = data.value.firstName;
|
||||||
|
formInformations.lastName = data.value.lastName;
|
||||||
|
formInformations.nationality = data.value.nationalityDesc;
|
||||||
|
formInformations.birthDate = data.value.dateOfBirth;
|
||||||
|
age.value = storeLinkCenter.calculateAge(data.value.age);
|
||||||
|
formInformations.gender = data.value.genderDesc;
|
||||||
|
|
||||||
|
formDataAddress.registrationAddress = data.value.registrationAddress;
|
||||||
|
formDataAddress.registrationProvinceId = data.value.registrationProvinceId;
|
||||||
|
formDataAddress.registrationDistrictId = data.value.registrationDistrictId;
|
||||||
|
formDataAddress.registrationSubDistrictId =
|
||||||
|
data.value.registrationSubDistrictId;
|
||||||
|
formDataAddress.registrationZipCode = data.value.registrationZipCode;
|
||||||
|
formDataAddress.currentAddress = data.value.currentAddress;
|
||||||
|
formDataAddress.currentProvinceId = data.value.currentProvinceId;
|
||||||
|
formDataAddress.currentDistrictId = data.value.currentDistrictId;
|
||||||
|
formDataAddress.currentSubDistrictId = data.value.currentSubDistrictId;
|
||||||
|
formDataAddress.currentZipCode = data.value.currentZipCode;
|
||||||
|
|
||||||
|
// formFamily.fatherFirstName = data.value.fatherName;
|
||||||
|
// formFamily.motherFirstName = data.value.motherName;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* function fetch ข้อมูลความสัมพันธ์
|
||||||
|
*/
|
||||||
|
async function fetchDataRelationship() {
|
||||||
|
await http
|
||||||
|
.get(config.API.orgRelationship)
|
||||||
|
.then(async (res) => {
|
||||||
|
const list = await res.data.result.map((e: any) => ({
|
||||||
|
id: e.id,
|
||||||
|
name: e.name,
|
||||||
|
}));
|
||||||
|
storeLinkCenter.optionRelationshipMain = list;
|
||||||
|
})
|
||||||
|
.catch((err) => {
|
||||||
|
messageError($q, err);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
watch(
|
||||||
|
() => modal.value,
|
||||||
|
async () => {
|
||||||
|
if (modal.value) {
|
||||||
|
showLoader();
|
||||||
|
await fetchDataRelationship();
|
||||||
|
await storeLinkCenter.fetchPerson();
|
||||||
|
await amiRequest();
|
||||||
|
presentAddress.value = formDataAddress.registrationZipCode ? "0" : "1";
|
||||||
|
if (
|
||||||
|
storeLinkCenter.OpsAddress.provinceOps.length === 0 ||
|
||||||
|
storeLinkCenter.OpsAddress.districtOps.length === 0 ||
|
||||||
|
storeLinkCenter.OpsAddress.districtCOps.length === 0 ||
|
||||||
|
storeLinkCenter.OpsAddress.subdistrictOps.length === 0 ||
|
||||||
|
storeLinkCenter.OpsAddress.subdistrictCOps.length === 0
|
||||||
|
) {
|
||||||
|
await storeLinkCenter.fetchProvince(false);
|
||||||
|
storeLinkCenter.fetchDistrict(
|
||||||
|
formDataAddress.registrationProvinceId,
|
||||||
|
"1",
|
||||||
|
false
|
||||||
|
);
|
||||||
|
storeLinkCenter.fetchDistrict(
|
||||||
|
formDataAddress.currentProvinceId,
|
||||||
|
"2",
|
||||||
|
false
|
||||||
|
);
|
||||||
|
storeLinkCenter.fetchSubDistrict(
|
||||||
|
formDataAddress.registrationDistrictId,
|
||||||
|
"1",
|
||||||
|
false
|
||||||
|
);
|
||||||
|
storeLinkCenter.fetchSubDistrict(
|
||||||
|
formDataAddress.currentDistrictId,
|
||||||
|
"2",
|
||||||
|
false
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
hideLoader();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
);
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<q-dialog v-model="modal" persistent>
|
||||||
|
<q-card class="col-12" style="width: 80vw">
|
||||||
|
<q-form greedy @submit.prevent @validation-success="onSubmit">
|
||||||
|
<Header tittle="ขออัปเดตข้อมูลจากกรมการปกครอง" :close="closeDialog" />
|
||||||
|
<q-separator />
|
||||||
|
|
||||||
|
<q-card-section class="scroll" style="max-height: 80vh">
|
||||||
|
<div class="row q-col-gutter-sm">
|
||||||
|
<div class="col-12">
|
||||||
|
<InformationPage
|
||||||
|
v-model:form-informations="formInformations"
|
||||||
|
v-model:age="age"
|
||||||
|
:Ops="storeLinkCenter.OpsPerson"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="col-12">
|
||||||
|
<q-separator />
|
||||||
|
</div>
|
||||||
|
<div class="col-12">
|
||||||
|
<AddressPage
|
||||||
|
v-model:form-data-address="formDataAddress"
|
||||||
|
v-model:present-address="presentAddress"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="col-12">
|
||||||
|
<q-separator />
|
||||||
|
</div>
|
||||||
|
<div class="col-12">
|
||||||
|
<FamilyPage
|
||||||
|
v-model:father-data="fatherData"
|
||||||
|
v-model:mother-data="motherData"
|
||||||
|
v-model:couple-data="coupleData"
|
||||||
|
v-model:child-data="childData"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</q-card-section>
|
||||||
|
<q-separator />
|
||||||
|
|
||||||
|
<q-card-actions align="right">
|
||||||
|
<q-btn label="อัพเดต" color="secondary" type="submit"
|
||||||
|
><q-tooltip>อัพเดต</q-tooltip></q-btn
|
||||||
|
>
|
||||||
|
<q-btn label="ยกเลิก" color="orange" @click="modal = false"
|
||||||
|
><q-tooltip>ยกเลิก</q-tooltip></q-btn
|
||||||
|
>
|
||||||
|
</q-card-actions>
|
||||||
|
</q-form>
|
||||||
|
</q-card>
|
||||||
|
</q-dialog>
|
||||||
|
</template>
|
||||||
|
|
@ -17,12 +17,15 @@ import type { DateRequest } from "@/modules/04_registryPerson/interface/response
|
||||||
|
|
||||||
/** importComponents*/
|
/** importComponents*/
|
||||||
import DialogStatus from "@/modules/04_registryPerson/components/requestEdit/Dialog01_EditStatus.vue";
|
import DialogStatus from "@/modules/04_registryPerson/components/requestEdit/Dialog01_EditStatus.vue";
|
||||||
|
import DialogUpdate from "@/modules/04_registryPerson/components/Dialog/DialogUpdate.vue";
|
||||||
|
|
||||||
const $q = useQuasar();
|
const $q = useQuasar();
|
||||||
const store = useRequestEditStore();
|
const store = useRequestEditStore();
|
||||||
const { showLoader, hideLoader, messageError, date2Thai } = useCounterMixin();
|
const { showLoader, hideLoader, messageError, date2Thai } = useCounterMixin();
|
||||||
|
|
||||||
//Table
|
//Table
|
||||||
|
const idCard = ref<string>("");
|
||||||
|
const profileId = ref<string>("");
|
||||||
const rows = ref<DateRequest[]>([]); //รายการข้อมูลคำร้องขอแก้ไขทะเบียนประวัติ
|
const rows = ref<DateRequest[]>([]); //รายการข้อมูลคำร้องขอแก้ไขทะเบียนประวัติ
|
||||||
const page = ref<number>(1); //หน้า
|
const page = ref<number>(1); //หน้า
|
||||||
const pageSize = ref<number>(10); //จำนวนต่อหน้า
|
const pageSize = ref<number>(10); //จำนวนต่อหน้า
|
||||||
|
|
@ -113,6 +116,7 @@ const status = ref<string>("PENDING"); //ค้นหาตามสถานะ
|
||||||
const keyword = ref<string>(""); //คำค้นหา
|
const keyword = ref<string>(""); //คำค้นหา
|
||||||
const statusOption = ref<DataOption[]>(store.optionStatus); //รายการสถานะ
|
const statusOption = ref<DataOption[]>(store.optionStatus); //รายการสถานะ
|
||||||
const modalStatus = ref<boolean>(false); //แก้ไขสถานะคำร้อง
|
const modalStatus = ref<boolean>(false); //แก้ไขสถานะคำร้อง
|
||||||
|
const modalUpdate = ref<boolean>(false); //อัปเดตข้อมูลจากกรมการปกครอง
|
||||||
const requestId = ref<string>(""); //id รายการแก้ไข
|
const requestId = ref<string>(""); //id รายการแก้ไข
|
||||||
|
|
||||||
/** function fetch รายการคำร้องขอแก้ไขทะเบียนประวัติ*/
|
/** function fetch รายการคำร้องขอแก้ไขทะเบียนประวัติ*/
|
||||||
|
|
@ -172,9 +176,15 @@ function filterOption(val: string, update: Function) {
|
||||||
* funciton แก่ไขคำร้อง
|
* funciton แก่ไขคำร้อง
|
||||||
* @param id รายการคำร้อง
|
* @param id รายการคำร้อง
|
||||||
*/
|
*/
|
||||||
function onclickEdit(id: string) {
|
function onclickEdit(data: any) {
|
||||||
modalStatus.value = true;
|
requestId.value = data.id;
|
||||||
requestId.value = id;
|
if (data.topic == "ขออัปเดตข้อมูลจากกรมการปกครอง") {
|
||||||
|
modalUpdate.value = true;
|
||||||
|
idCard.value = data.idcard as string;
|
||||||
|
profileId.value = data.profileId;
|
||||||
|
} else {
|
||||||
|
modalStatus.value = true;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|
@ -336,14 +346,26 @@ onMounted(() => {
|
||||||
<q-tr :props="props">
|
<q-tr :props="props">
|
||||||
<q-td auto-width>
|
<q-td auto-width>
|
||||||
<q-btn
|
<q-btn
|
||||||
:icon="props.row.topic == 'ขออัปเดตข้อมูลจากกรมการปกครอง' ? 'mdi-sync-circle':'edit'"
|
:icon="
|
||||||
|
props.row.topic == 'ขออัปเดตข้อมูลจากกรมการปกครอง'
|
||||||
|
? 'mdi-sync-circle'
|
||||||
|
: 'edit'
|
||||||
|
"
|
||||||
round
|
round
|
||||||
dense
|
dense
|
||||||
flat
|
flat
|
||||||
:color="props.row.topic == 'ขออัปเดตข้อมูลจากกรมการปกครอง' ? 'info':'edit'"
|
:color="
|
||||||
@click.pervent="onclickEdit(props.row.id)"
|
props.row.topic == 'ขออัปเดตข้อมูลจากกรมการปกครอง'
|
||||||
|
? 'info'
|
||||||
|
: 'edit'
|
||||||
|
"
|
||||||
|
@click.pervent="onclickEdit(props.row)"
|
||||||
>
|
>
|
||||||
<q-tooltip>{{props.row.topic == 'ขออัปเดตข้อมูลจากกรมการปกครอง' ? 'ขออัปเดตข้อมูลจากกรมการปกครอง':'แก้ไขสถานะคำร้อง'}}</q-tooltip>
|
<q-tooltip>{{
|
||||||
|
props.row.topic == "ขออัปเดตข้อมูลจากกรมการปกครอง"
|
||||||
|
? "ขออัปเดตข้อมูลจากกรมการปกครอง"
|
||||||
|
: "แก้ไขสถานะคำร้อง"
|
||||||
|
}}</q-tooltip>
|
||||||
</q-btn>
|
</q-btn>
|
||||||
</q-td>
|
</q-td>
|
||||||
<q-td v-for="col in props.cols" :key="col.name" :props="props">
|
<q-td v-for="col in props.cols" :key="col.name" :props="props">
|
||||||
|
|
@ -388,6 +410,14 @@ onMounted(() => {
|
||||||
:fetch-data="fetchListRequset"
|
:fetch-data="fetchListRequset"
|
||||||
:request-id="requestId"
|
:request-id="requestId"
|
||||||
/>
|
/>
|
||||||
|
|
||||||
|
<DialogUpdate
|
||||||
|
v-model:modal="modalUpdate"
|
||||||
|
v-model:id-card="idCard"
|
||||||
|
v-model:profile-id="profileId"
|
||||||
|
:fetch-data="fetchListRequset"
|
||||||
|
:request-id=requestId
|
||||||
|
/>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style scoped></style>
|
<style scoped></style>
|
||||||
|
|
|
||||||
|
|
@ -11,4 +11,17 @@ interface RequestObject {
|
||||||
registrationAddress: string | null;
|
registrationAddress: string | null;
|
||||||
}
|
}
|
||||||
|
|
||||||
export type { RequestObject };
|
interface RequestAddressObject {
|
||||||
|
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 { RequestObject ,RequestAddressObject};
|
||||||
|
|
|
||||||
|
|
@ -37,6 +37,8 @@ interface DateRequest {
|
||||||
remark: string;
|
remark: string;
|
||||||
status: string;
|
status: string;
|
||||||
topic: string;
|
topic: string;
|
||||||
|
profileId?: string;
|
||||||
|
idcard?: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
interface DataProfile {
|
interface DataProfile {
|
||||||
|
|
|
||||||
352
src/modules/04_registryPerson/stores/LinkCenter.ts
Normal file
352
src/modules/04_registryPerson/stores/LinkCenter.ts
Normal file
|
|
@ -0,0 +1,352 @@
|
||||||
|
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_registryPerson/interface/request/Address";
|
||||||
|
import type { ResponseObject } from "@/modules/04_registryPerson/interface/response/Address";
|
||||||
|
|
||||||
|
import type {
|
||||||
|
DataOption,
|
||||||
|
AddressOps,
|
||||||
|
InformationOps,
|
||||||
|
zipCodeOption,
|
||||||
|
} from "@/modules/04_registryPerson/interface/index/Main";
|
||||||
|
|
||||||
|
const $q = useQuasar();
|
||||||
|
const mixin = useCounterMixin();
|
||||||
|
const {
|
||||||
|
showLoader,
|
||||||
|
hideLoader,
|
||||||
|
|
||||||
|
messageError,
|
||||||
|
} = mixin;
|
||||||
|
|
||||||
|
export const useDataLinkCenter = defineStore("DataLinkCenter", () => {
|
||||||
|
const retireDate = ref<Date>();
|
||||||
|
const optionRelationshipMain = ref<DataOption[]>([]);
|
||||||
|
const optionRelationship = ref<DataOption[]>([]);
|
||||||
|
//รายการตัวเลือก
|
||||||
|
const OpsPerson = ref<InformationOps>({
|
||||||
|
prefixOps: [],
|
||||||
|
rankOps: [],
|
||||||
|
genderOps: [],
|
||||||
|
bloodOps: [],
|
||||||
|
statusOps: [],
|
||||||
|
religionOps: [],
|
||||||
|
employeeClassOps: [
|
||||||
|
{ id: "perm", name: "ลูกจ้างประจำ" },
|
||||||
|
{ id: "temp", name: "ลูกจ้างชั่วคราว" },
|
||||||
|
],
|
||||||
|
employeeTypeOps: [
|
||||||
|
{ id: "gov", name: "งบประมาณเงินอุดหนุนรัฐบาล" },
|
||||||
|
{ id: "bkk", name: "งบประมาณกรุงเทพมหานคร" },
|
||||||
|
],
|
||||||
|
});
|
||||||
|
|
||||||
|
//ข้อมูลตัวเลือก
|
||||||
|
const OpsPersonFilter = ref<InformationOps>({
|
||||||
|
prefixOps: [],
|
||||||
|
rankOps: [],
|
||||||
|
genderOps: [],
|
||||||
|
bloodOps: [],
|
||||||
|
statusOps: [],
|
||||||
|
religionOps: [],
|
||||||
|
employeeClassOps: [
|
||||||
|
{ id: "perm", name: "ลูกจ้างประจำ" },
|
||||||
|
{ id: "temp", name: "ลูกจ้างชั่วคราว" },
|
||||||
|
],
|
||||||
|
employeeTypeOps: [
|
||||||
|
{ id: "gov", name: "งบประมาณเงินอุดหนุนรัฐบาล" },
|
||||||
|
{ id: "bkk", name: "งบประมาณกรุงเทพมหานคร" },
|
||||||
|
],
|
||||||
|
});
|
||||||
|
|
||||||
|
const OpsAddress = ref<AddressOps>({
|
||||||
|
provinceOps: [],
|
||||||
|
districtOps: [],
|
||||||
|
districtCOps: [],
|
||||||
|
subdistrictOps: [],
|
||||||
|
subdistrictCOps: [],
|
||||||
|
});
|
||||||
|
const OpsAddressFilter = ref<AddressOps>({
|
||||||
|
provinceOps: [],
|
||||||
|
districtOps: [],
|
||||||
|
districtCOps: [],
|
||||||
|
subdistrictOps: [],
|
||||||
|
subdistrictCOps: [],
|
||||||
|
});
|
||||||
|
|
||||||
|
/**
|
||||||
|
* ฟังก์ชันคำนวนอายุด้วยวันเดิอนปีเกิด
|
||||||
|
* @param birthDate วันเกิด
|
||||||
|
* @returns อายุ
|
||||||
|
*/
|
||||||
|
function calculateAge(birthDate: Date | null) {
|
||||||
|
if (!birthDate) return null;
|
||||||
|
const birthDateTimeStamp = new Date(birthDate).getTime();
|
||||||
|
const now = new Date();
|
||||||
|
const diff = now.getTime() - birthDateTimeStamp;
|
||||||
|
|
||||||
|
const ageDate = new Date(diff);
|
||||||
|
const years = ageDate.getUTCFullYear() - 1970;
|
||||||
|
const months = ageDate.getUTCMonth();
|
||||||
|
const days = ageDate.getUTCDate() - 1;
|
||||||
|
const retire = new Date(birthDate);
|
||||||
|
retire.setFullYear(retire.getFullYear() + 60);
|
||||||
|
retireDate.value = retire;
|
||||||
|
|
||||||
|
if (years > 60) {
|
||||||
|
return "อายุเกิน 60 ปี";
|
||||||
|
}
|
||||||
|
|
||||||
|
return `${years} ปี ${months} เดือน ${days} วัน`;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* ฟังก์ชันดึงข้อมูลตัวเลือกข้อมูลหลัก
|
||||||
|
*/
|
||||||
|
async function fetchPerson() {
|
||||||
|
await http
|
||||||
|
.get(config.API.profileNewMetaMain)
|
||||||
|
.then((res) => {
|
||||||
|
const data = res.data.result;
|
||||||
|
let optionbloodGroups: DataOption[] = [];
|
||||||
|
data.bloodGroups.map((r: any) => {
|
||||||
|
optionbloodGroups.push({
|
||||||
|
id: r.id.toString(),
|
||||||
|
name: r.name.toString(),
|
||||||
|
});
|
||||||
|
});
|
||||||
|
OpsPerson.value.bloodOps = optionbloodGroups;
|
||||||
|
OpsPersonFilter.value.bloodOps = optionbloodGroups;
|
||||||
|
|
||||||
|
let optiongenders: DataOption[] = [];
|
||||||
|
data.genders.map((r: any) => {
|
||||||
|
optiongenders.push({
|
||||||
|
id: r.id.toString(),
|
||||||
|
name: r.name.toString(),
|
||||||
|
});
|
||||||
|
});
|
||||||
|
OpsPerson.value.genderOps = optiongenders;
|
||||||
|
OpsPersonFilter.value.genderOps = optiongenders;
|
||||||
|
|
||||||
|
let optionprefixs: DataOption[] = [];
|
||||||
|
data.prefixs.map((r: any) => {
|
||||||
|
optionprefixs.push({
|
||||||
|
id: r.id.toString(),
|
||||||
|
name: r.name.toString(),
|
||||||
|
});
|
||||||
|
});
|
||||||
|
OpsPerson.value.prefixOps = optionprefixs;
|
||||||
|
OpsPersonFilter.value.prefixOps = optionprefixs;
|
||||||
|
|
||||||
|
let optionrank: DataOption[] = [];
|
||||||
|
data.rank.map((r: any) => {
|
||||||
|
optionrank.push({
|
||||||
|
id: r.id.toString(),
|
||||||
|
name: r.name.toString(),
|
||||||
|
});
|
||||||
|
});
|
||||||
|
OpsPerson.value.rankOps = optionrank;
|
||||||
|
OpsPersonFilter.value.rankOps = optionrank;
|
||||||
|
|
||||||
|
let optionrelationships: DataOption[] = [];
|
||||||
|
data.relationships.map((r: any) => {
|
||||||
|
optionrelationships.push({
|
||||||
|
id: r.id.toString(),
|
||||||
|
name: r.name.toString(),
|
||||||
|
});
|
||||||
|
});
|
||||||
|
OpsPerson.value.statusOps = optionrelationships;
|
||||||
|
OpsPersonFilter.value.statusOps = optionrelationships;
|
||||||
|
|
||||||
|
let optionreligions: DataOption[] = [];
|
||||||
|
data.religions.map((r: any) => {
|
||||||
|
optionreligions.push({
|
||||||
|
id: r.id.toString(),
|
||||||
|
name: r.name.toString(),
|
||||||
|
});
|
||||||
|
});
|
||||||
|
OpsPerson.value.religionOps = optionreligions;
|
||||||
|
OpsPersonFilter.value.religionOps = optionreligions;
|
||||||
|
})
|
||||||
|
.catch((e) => {
|
||||||
|
messageError($q, e);
|
||||||
|
hideLoader();
|
||||||
|
})
|
||||||
|
.finally(() => {});
|
||||||
|
}
|
||||||
|
|
||||||
|
/** -----(จังหวัด-อำเภอ-ตำบล)----- */
|
||||||
|
/**
|
||||||
|
* ฟังก์ชันดึงข้อมูลจังหวัด
|
||||||
|
*/
|
||||||
|
async function fetchProvince(isLoad?: boolean) {
|
||||||
|
isLoad && showLoader();
|
||||||
|
await http
|
||||||
|
.get(config.API.profileNewProvince)
|
||||||
|
.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() });
|
||||||
|
});
|
||||||
|
OpsAddress.value.provinceOps = option;
|
||||||
|
OpsAddressFilter.value.provinceOps = option;
|
||||||
|
})
|
||||||
|
.catch((e) => {
|
||||||
|
messageError($q, e);
|
||||||
|
})
|
||||||
|
.finally(() => {
|
||||||
|
isLoad && hideLoader();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* ฟังก์ชันดึงข้อมูล เขต / อำเภอ
|
||||||
|
* @param id จังหวัด
|
||||||
|
* @param position ที่อยู่ตามทะเบียนบ้าน, ที่อยู่ปัจจุบัน
|
||||||
|
*/
|
||||||
|
async function fetchDistrict(
|
||||||
|
id: string | null,
|
||||||
|
position: string,
|
||||||
|
isLoad?: boolean
|
||||||
|
) {
|
||||||
|
if (!id) return;
|
||||||
|
isLoad && showLoader();
|
||||||
|
await http
|
||||||
|
.get(config.API.profileNewDistrictByPId(id))
|
||||||
|
.then(async (res) => {
|
||||||
|
const data = res.data.result;
|
||||||
|
let option: DataOption[] = [];
|
||||||
|
data.districts.map((r: any) => {
|
||||||
|
option.push({ id: r.id, name: r.name });
|
||||||
|
});
|
||||||
|
if (position == "1") {
|
||||||
|
OpsAddress.value.districtOps = option;
|
||||||
|
OpsAddressFilter.value.districtOps = option;
|
||||||
|
} else {
|
||||||
|
OpsAddress.value.districtCOps = option;
|
||||||
|
OpsAddressFilter.value.districtCOps = option;
|
||||||
|
}
|
||||||
|
return option;
|
||||||
|
})
|
||||||
|
.catch((e) => {
|
||||||
|
messageError($q, e);
|
||||||
|
})
|
||||||
|
.finally(() => {
|
||||||
|
isLoad && hideLoader();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* ฟังก์ชันดึงข้อมูล แขวง / ตำบล
|
||||||
|
* @param id เขต / อำเภอ
|
||||||
|
* @param position ที่อยู่ตามทะเบียนบ้าน, ที่อยู่ปัจจุบัน
|
||||||
|
*/
|
||||||
|
async function fetchSubDistrict(
|
||||||
|
id: string | null,
|
||||||
|
position: string,
|
||||||
|
isLoad: boolean
|
||||||
|
) {
|
||||||
|
if (!id) return;
|
||||||
|
isLoad && showLoader();
|
||||||
|
await http
|
||||||
|
.get(config.API.profileNewSubDistrictByDId(id))
|
||||||
|
.then(async (res) => {
|
||||||
|
const data = res.data.result;
|
||||||
|
let option: zipCodeOption[] = [];
|
||||||
|
data.subDistricts.map((r: any) => {
|
||||||
|
option.push({
|
||||||
|
id: r.id,
|
||||||
|
name: r.name,
|
||||||
|
zipCode: r.zipCode,
|
||||||
|
});
|
||||||
|
});
|
||||||
|
if (position == "1") {
|
||||||
|
OpsAddressFilter.value.subdistrictOps = option;
|
||||||
|
OpsAddress.value.subdistrictOps = option;
|
||||||
|
} else {
|
||||||
|
OpsAddressFilter.value.subdistrictCOps = option;
|
||||||
|
OpsAddress.value.subdistrictCOps = option;
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.catch((e) => {
|
||||||
|
messageError($q, e);
|
||||||
|
})
|
||||||
|
.finally(() => {
|
||||||
|
isLoad && hideLoader();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* ฟังกชันค้นหาข้อมูลใน select
|
||||||
|
* @param val คำที่ต้องการค้นหา
|
||||||
|
* @param update function
|
||||||
|
* @param refData ประเภทตัวเลือก
|
||||||
|
*/
|
||||||
|
function filterSelector(val: any, update: Function, refData: string) {
|
||||||
|
switch (refData) {
|
||||||
|
case "provinceOps":
|
||||||
|
update(() => {
|
||||||
|
OpsAddress.value.provinceOps =
|
||||||
|
OpsAddressFilter.value.provinceOps.filter(
|
||||||
|
(v: DataOption) => v.name.indexOf(val) > -1
|
||||||
|
);
|
||||||
|
});
|
||||||
|
break;
|
||||||
|
case "districtOps":
|
||||||
|
update(() => {
|
||||||
|
OpsAddress.value.districtOps =
|
||||||
|
OpsAddressFilter.value.districtOps.filter(
|
||||||
|
(v: DataOption) => v.name.indexOf(val) > -1
|
||||||
|
);
|
||||||
|
});
|
||||||
|
break;
|
||||||
|
case "districtCOps":
|
||||||
|
update(() => {
|
||||||
|
OpsAddress.value.districtCOps =
|
||||||
|
OpsAddressFilter.value.districtCOps.filter(
|
||||||
|
(v: DataOption) => v.name.indexOf(val) > -1
|
||||||
|
);
|
||||||
|
});
|
||||||
|
break;
|
||||||
|
case "subdistrictOps":
|
||||||
|
update(() => {
|
||||||
|
OpsAddress.value.subdistrictOps =
|
||||||
|
OpsAddressFilter.value.subdistrictOps.filter(
|
||||||
|
(v: DataOption) => v.name.indexOf(val) > -1
|
||||||
|
);
|
||||||
|
});
|
||||||
|
break;
|
||||||
|
case "subdistrictCOps":
|
||||||
|
update(() => {
|
||||||
|
OpsAddress.value.subdistrictCOps =
|
||||||
|
OpsAddressFilter.value.subdistrictCOps.filter(
|
||||||
|
(v: DataOption) => v.name.indexOf(val) > -1
|
||||||
|
);
|
||||||
|
});
|
||||||
|
break;
|
||||||
|
|
||||||
|
default:
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return {
|
||||||
|
fetchPerson,
|
||||||
|
OpsPersonFilter,
|
||||||
|
OpsPerson,
|
||||||
|
OpsAddress,
|
||||||
|
OpsAddressFilter,
|
||||||
|
calculateAge,
|
||||||
|
fetchProvince,
|
||||||
|
filterSelector,
|
||||||
|
fetchDistrict,
|
||||||
|
fetchSubDistrict,
|
||||||
|
optionRelationshipMain,
|
||||||
|
optionRelationship,
|
||||||
|
};
|
||||||
|
});
|
||||||
|
|
@ -205,7 +205,7 @@ async function amiRequest() {
|
||||||
formInformations.prefixId = data.value.titleName;
|
formInformations.prefixId = data.value.titleName;
|
||||||
formInformations.fullName = data.value.fullnameAndRank;
|
formInformations.fullName = data.value.fullnameAndRank;
|
||||||
formInformations.firstname = data.value.firstName;
|
formInformations.firstname = data.value.firstName;
|
||||||
formInformations.lastname = data.value.lastname;
|
formInformations.lastname = data.value.lastName;
|
||||||
formInformations.nationality = data.value.nationalityDesc;
|
formInformations.nationality = data.value.nationalityDesc;
|
||||||
formInformations.race = props.InformationData.race;
|
formInformations.race = props.InformationData.race;
|
||||||
formInformations.dateOfBirth = data.value.dateOfBirth;
|
formInformations.dateOfBirth = data.value.dateOfBirth;
|
||||||
|
|
@ -296,7 +296,7 @@ async function upDateInfomation() {
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* ฟังก์ชันบันทึกการแก้ไข
|
* อัพเดตข้อมูลที่อยู่
|
||||||
*/
|
*/
|
||||||
async function upDateAddress() {
|
async function upDateAddress() {
|
||||||
const body = {
|
const body = {
|
||||||
|
|
@ -340,6 +340,7 @@ async function upDateAddress() {
|
||||||
.finally(() => {});
|
.finally(() => {});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/** อัพเดตข้อมูลครอบครัว */
|
||||||
async function upDateFamily() {
|
async function upDateFamily() {
|
||||||
const body = {
|
const body = {
|
||||||
couple: familyData.value.couple == "1",
|
couple: familyData.value.couple == "1",
|
||||||
|
|
|
||||||
|
|
@ -2,7 +2,7 @@ import { ref } from "vue";
|
||||||
import { defineStore } from "pinia";
|
import { defineStore } from "pinia";
|
||||||
import { useCounterMixin } from "./mixin";
|
import { useCounterMixin } from "./mixin";
|
||||||
|
|
||||||
const { messageError, success } = useCounterMixin();
|
const { messageError, success,hideLoader } = useCounterMixin();
|
||||||
|
|
||||||
export const useLinkageStore = defineStore("linkageData", () => {
|
export const useLinkageStore = defineStore("linkageData", () => {
|
||||||
const apiURL = ref<string>("http://127.0.0.1:51548"); // API URL From Agent
|
const apiURL = ref<string>("http://127.0.0.1:51548"); // API URL From Agent
|
||||||
|
|
@ -248,21 +248,21 @@ export const useLinkageStore = defineStore("linkageData", () => {
|
||||||
message = `${code}${T}${officeCode.value}${versionCode.value}${serviceCode}${idcard}`;
|
message = `${code}${T}${officeCode.value}${versionCode.value}${serviceCode}${idcard}`;
|
||||||
}
|
}
|
||||||
|
|
||||||
fetch(`${apiURL.value}/ami/request`, {
|
await fetch(`${apiURL.value}/ami/request`, {
|
||||||
method: "POST",
|
method: "POST",
|
||||||
headers: { "Content-type": "application/json; charset=UTF-8" },
|
headers: { "Content-type": "application/json; charset=UTF-8" },
|
||||||
body: JSON.stringify({
|
body: JSON.stringify({
|
||||||
message: message,
|
message: message,
|
||||||
}),
|
}),
|
||||||
})
|
})
|
||||||
.then((response) => {
|
.then(async (response) => {
|
||||||
if (response.ok) {
|
if (response.ok) {
|
||||||
return response.json();
|
return response.json();
|
||||||
}
|
}
|
||||||
throw new Error("Something went wrong");
|
throw new Error("Something went wrong");
|
||||||
})
|
})
|
||||||
.then(async (data) => {
|
.then(async (data) => {
|
||||||
const convertData = await bin2String(data);
|
const convertData = bin2String(await data);
|
||||||
let removeText = await convertData.substr(9); // ตัด CODEREQ[4] + Status[5]
|
let removeText = await convertData.substr(9); // ตัด CODEREQ[4] + Status[5]
|
||||||
|
|
||||||
if (code === 9080) {
|
if (code === 9080) {
|
||||||
|
|
@ -277,6 +277,7 @@ export const useLinkageStore = defineStore("linkageData", () => {
|
||||||
})
|
})
|
||||||
.catch(async (error) => {
|
.catch(async (error) => {
|
||||||
messageError(q, error);
|
messageError(q, error);
|
||||||
|
hideLoader()
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue