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

ขออัปเดตข้อมูลจากกรมการปกครอง

Browse source
This commit is contained in:
setthawutttty 2024-10-11 15:42:38 +07:00
parent 189347832c
commit c49d222a3f
10 changed files with 2155 additions and 14 deletions
Download patch file Download diff file Expand all files Collapse all files

364
src/modules/04_registryPerson/components/Dialog/01_Information.vue Normal file
View file

@ -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
View 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
View 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
View 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>

44
src/modules/04_registryPerson/components/requestEdit/01_TabInformation.vue
View file

@ -17,12 +17,15 @@ import type { DateRequest } from "@/modules/04_registryPerson/interface/response
/** importComponents*/
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 store = useRequestEditStore();
const { showLoader, hideLoader, messageError, date2Thai } = useCounterMixin();
//Table
const idCard = ref<string>("");
const profileId = ref<string>("");
const rows = ref<DateRequest[]>([]); //รายการข้อมูลคำร้องขอแก้ไขทะเบียนประวัติ
const page = ref<number>(1); //หน้า
const pageSize = ref<number>(10); //จำนวนต่อหน้า
@ -113,6 +116,7 @@ const status = ref<string>("PENDING"); //ค้นหาตามสถานะ
const keyword = ref<string>(""); //คำค้นหา
const statusOption = ref<DataOption[]>(store.optionStatus); //รายการสถานะ
const modalStatus = ref<boolean>(false); //แก้ไขสถานะคำร้อง
const modalUpdate = ref<boolean>(false); //อัปเดตข้อมูลจากกรมการปกครอง
const requestId = ref<string>(""); //id รายการแก้ไข
/** function fetch รายการคำร้องขอแก้ไขทะเบียนประวัติ*/
@ -172,9 +176,15 @@ function filterOption(val: string, update: Function) {
* funciton แก่ไขคำร้อง
* @param id รายการคำร้อง
*/
function onclickEdit(id: string) {
modalStatus.value = true;
requestId.value = id;
function onclickEdit(data: any) {
requestId.value = data.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-td auto-width>
<q-btn
:icon="props.row.topic == 'ขออัปเดตข้อมูลจากกรมการปกครอง' ? 'mdi-sync-circle':'edit'"
:icon="
props.row.topic == 'ขออัปเดตข้อมูลจากกรมการปกครอง'
? 'mdi-sync-circle'
: 'edit'
"
round
dense
flat
:color="props.row.topic == 'ขออัปเดตข้อมูลจากกรมการปกครอง' ? 'info':'edit'"
@click.pervent="onclickEdit(props.row.id)"
:color="
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-td>
<q-td v-for="col in props.cols" :key="col.name" :props="props">
@ -388,6 +410,14 @@ onMounted(() => {
:fetch-data="fetchListRequset"
: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>
<style scoped></style>

15
src/modules/04_registryPerson/interface/request/Address.ts
View file

@ -11,4 +11,17 @@ interface RequestObject {
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};

2
src/modules/04_registryPerson/interface/response/Main.ts
View file

@ -37,6 +37,8 @@ interface DateRequest {
remark: string;
status: string;
topic: string;
profileId?: string;
idcard?: string;
}
interface DataProfile {

352
src/modules/04_registryPerson/stores/LinkCenter.ts Normal file
View 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,
};
});

5
src/modules/05_placement/components/PersonalDetail/DialogCheckInformation.vue
View file

@ -205,7 +205,7 @@ async function amiRequest() {
formInformations.prefixId = data.value.titleName;
formInformations.fullName = data.value.fullnameAndRank;
formInformations.firstname = data.value.firstName;
formInformations.lastname = data.value.lastname;
formInformations.lastname = data.value.lastName;
formInformations.nationality = data.value.nationalityDesc;
formInformations.race = props.InformationData.race;
formInformations.dateOfBirth = data.value.dateOfBirth;
@ -296,7 +296,7 @@ async function upDateInfomation() {
}
/**
* ฟังก์ชันบันทึกการแก้ไข
* อัพเดตข้อมูลที่อยู่
*/
async function upDateAddress() {
const body = {
@ -340,6 +340,7 @@ async function upDateAddress() {
.finally(() => {});
}
/** อัพเดตข้อมูลครอบครัว */
async function upDateFamily() {
const body = {
couple: familyData.value.couple == "1",

9
src/stores/linkage.ts
View file

@ -2,7 +2,7 @@ import { ref } from "vue";
import { defineStore } from "pinia";
import { useCounterMixin } from "./mixin";
const { messageError, success } = useCounterMixin();
const { messageError, success,hideLoader } = useCounterMixin();
export const useLinkageStore = defineStore("linkageData", () => {
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}`;
}
fetch(`${apiURL.value}/ami/request`, {
await fetch(`${apiURL.value}/ami/request`, {
method: "POST",
headers: { "Content-type": "application/json; charset=UTF-8" },
body: JSON.stringify({
message: message,
}),
})
.then((response) => {
.then(async (response) => {
if (response.ok) {
return response.json();
}
throw new Error("Something went wrong");
})
.then(async (data) => {
const convertData = await bin2String(data);
const convertData = bin2String(await data);
let removeText = await convertData.substr(9); // ตัด CODEREQ[4] + Status[5]
if (code === 9080) {
@ -277,6 +277,7 @@ export const useLinkageStore = defineStore("linkageData", () => {
})
.catch(async (error) => {
messageError(q, error);
hideLoader()
});
}