ui เพิ่มการตรวจสอบข้อมูลกับกรมการปกครอง ในหน้ารายละเอียดผู้สอบบรรจุ
This commit is contained in:
STW_TTTY\stwtt
parent
56ebe0c1ee
commit
282815cf33
8 changed files with 1508 additions and 4 deletions
|
|
@ -0,0 +1,291 @@
|
|||
<script setup lang="ts">
|
||||
import { watch, reactive, type PropType, ref } from "vue";
|
||||
import { useQuasar } from "quasar";
|
||||
import { useRoute, useRouter } from "vue-router";
|
||||
|
||||
import http from "@/plugins/http";
|
||||
import config from "@/app.config";
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
import {
|
||||
AddressDataDefualt,
|
||||
FamilyDataDefualt,
|
||||
} from "@/modules/05_placement/interface/index/Main";
|
||||
|
||||
import type { Information } from "@/modules/05_placement/components/PersonalDetail/profileType";
|
||||
import type {
|
||||
Address as AddressType,
|
||||
Family,
|
||||
AddressData,
|
||||
AddressOps,
|
||||
Address,
|
||||
optionData,
|
||||
} from "@/modules/05_placement/interface/index/Main";
|
||||
|
||||
import Header from "@/components/DialogHeader.vue";
|
||||
import FormInformationsPage from "@/modules/05_placement/components/PersonalDetail/CheckInformation/01_FormInformations.vue";
|
||||
import FormAddressPage from "@/modules/05_placement/components/PersonalDetail/CheckInformation/02_FormAddress.vue";
|
||||
import FormFamilyPage from "@/modules/05_placement/components/PersonalDetail/CheckInformation/03_FormFamily.vue";
|
||||
|
||||
const modal = defineModel<boolean>("modal", { required: true });
|
||||
|
||||
const $q = useQuasar();
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
const mixin = useCounterMixin();
|
||||
const { showLoader, hideLoader, messageError } = mixin;
|
||||
|
||||
const props = defineProps({
|
||||
Ops: {
|
||||
type: Object as PropType<any>,
|
||||
},
|
||||
OpsFilter: {
|
||||
type: Object as PropType<any>,
|
||||
},
|
||||
AddressData: {
|
||||
type: Object as PropType<AddressType>,
|
||||
default: AddressDataDefualt,
|
||||
},
|
||||
familyData: {
|
||||
type: Object as PropType<Family>,
|
||||
default: FamilyDataDefualt,
|
||||
},
|
||||
});
|
||||
|
||||
const addressData = ref<AddressType>(props.AddressData);
|
||||
const familyData = ref<Family>(props.familyData); //ข้อมูลครอบครัว
|
||||
/** ตัวแปร ข้อมูลส่วนตัว */
|
||||
const formInformations = reactive<Information>({
|
||||
idCard: "", // เลข ปชช.
|
||||
prefix: "", // คำนำหน้า
|
||||
prefixId: "", // id คำนำหน้า
|
||||
fullName: "", // ชื่อเต็ม
|
||||
firstname: "", //ชื่อ
|
||||
lastname: "", //นามสกุล
|
||||
nationality: "", //สัญชาติ
|
||||
race: "", //เชื้อชาติ
|
||||
dateOfBirth: null, //วันเกิด
|
||||
age: "", //อายุ
|
||||
telephone: "", //เบอร์มือถือ
|
||||
gender: "", //เพศ
|
||||
genderId: "", //id เพศ
|
||||
relationship: "", //สถานภาพ
|
||||
relationshipId: "", //id สถานภาพ
|
||||
bloodGroup: "", //กร๊ปเลือด
|
||||
bloodGroupId: "", //id กรุ๊ปเลือด
|
||||
religion: "", //ศาสนา
|
||||
religionId: "", //id ศาสนา
|
||||
});
|
||||
|
||||
//ที่อยู่ปัจบัน
|
||||
const currentAddress = reactive<AddressData>({
|
||||
subDistrictId: "",
|
||||
zipCode: "",
|
||||
districtId: "",
|
||||
provinceId: "",
|
||||
});
|
||||
|
||||
const registAddress = reactive<AddressData>({
|
||||
subDistrictId: "",
|
||||
zipCode: "",
|
||||
districtId: "",
|
||||
provinceId: "",
|
||||
});
|
||||
|
||||
/** ตัวแปร ข้อมูลครอบครัว */
|
||||
const formFamily = reactive<Family>({
|
||||
couple: "",
|
||||
marryPrefix: "",
|
||||
marryPrefixId: "",
|
||||
marryFirstName: "",
|
||||
marryLastName: "",
|
||||
marryOccupation: "",
|
||||
fatherPrefix: "",
|
||||
fatherPrefixId: "",
|
||||
fatherFirstName: "",
|
||||
fatherLastName: "",
|
||||
fatherOccupation: "",
|
||||
motherPrefix: "",
|
||||
motherPrefixId: "",
|
||||
motherFirstName: "",
|
||||
motherLastName: "",
|
||||
motherOccupation: "",
|
||||
});
|
||||
|
||||
//ตัวเลือกข้อมูลที่อยู่
|
||||
const OpsAddress = ref<AddressOps>({
|
||||
provinceOps: [],
|
||||
districtOps: [],
|
||||
districtCOps: [],
|
||||
subdistrictOps: [],
|
||||
subdistrictCOps: [],
|
||||
});
|
||||
//ข้อมูลที่อยู่
|
||||
const OpsFilterAddress = ref<AddressOps>({
|
||||
provinceOps: [],
|
||||
districtOps: [],
|
||||
districtCOps: [],
|
||||
subdistrictOps: [],
|
||||
subdistrictCOps: [],
|
||||
});
|
||||
|
||||
function closeDialog() {
|
||||
modal.value = false;
|
||||
|
||||
formInformations.idCard = "";
|
||||
formInformations.prefix = "";
|
||||
formInformations.prefixId = "";
|
||||
formInformations.fullName = "";
|
||||
formInformations.firstname = "";
|
||||
formInformations.lastname = "";
|
||||
formInformations.nationality = "";
|
||||
formInformations.race = "";
|
||||
formInformations.dateOfBirth = null;
|
||||
formInformations.age = "";
|
||||
formInformations.telephone = "";
|
||||
formInformations.gender = "";
|
||||
formInformations.genderId = "";
|
||||
formInformations.relationship = "";
|
||||
formInformations.relationshipId = "";
|
||||
formInformations.bloodGroup = "";
|
||||
formInformations.bloodGroupId = "";
|
||||
formInformations.religion = "";
|
||||
formInformations.religionId = "";
|
||||
}
|
||||
|
||||
function onSubmit() {
|
||||
const body = {
|
||||
citizenId: formInformations.idCard,
|
||||
prefix: formInformations.prefixId,
|
||||
firstName: formInformations.firstname,
|
||||
lastName: formInformations.lastname,
|
||||
gender: formInformations.genderId,
|
||||
nationality: formInformations.nationality,
|
||||
race: formInformations.race,
|
||||
religion: formInformations.religionId,
|
||||
birthDate: formInformations.dateOfBirth,
|
||||
bloodGroup: formInformations.bloodGroupId,
|
||||
relationship: formInformations.relationshipId,
|
||||
telephoneNumber: formInformations.telephone,
|
||||
|
||||
registrationSame: addressData.value.registSame == "1",
|
||||
registrationAddress: addressData.value.registAddress,
|
||||
registrationSubDistrictId: registAddress.subDistrictId,
|
||||
registrationDistrictId: registAddress.districtId,
|
||||
registrationProvinceId: registAddress.provinceId,
|
||||
registrationZipCode: registAddress.zipCode,
|
||||
currentAddress:
|
||||
addressData.value.registSame == "1"
|
||||
? addressData.value.registAddress
|
||||
: addressData.value.currentAddress,
|
||||
currentSubDistrictId:
|
||||
addressData.value.registSame == "1"
|
||||
? registAddress.subDistrictId
|
||||
: currentAddress.subDistrictId,
|
||||
currentDistrictId:
|
||||
addressData.value.registSame == "1"
|
||||
? registAddress.districtId
|
||||
: currentAddress.districtId,
|
||||
currentProvinceId:
|
||||
addressData.value.registSame == "1"
|
||||
? registAddress.provinceId
|
||||
: currentAddress.provinceId,
|
||||
currentZipCode:
|
||||
addressData.value.registSame == "1"
|
||||
? registAddress.zipCode
|
||||
: currentAddress.zipCode,
|
||||
|
||||
couple: familyData.value.couple == "1",
|
||||
couplePrefix: familyData.value.marryPrefixId,
|
||||
coupleFirstName: familyData.value.marryFirstName,
|
||||
coupleLastName: familyData.value.marryLastName,
|
||||
coupleLastNameOld: "",
|
||||
coupleCareer: familyData.value.marryOccupation,
|
||||
fatherPrefix: familyData.value.fatherPrefixId,
|
||||
fatherFirstName: familyData.value.fatherFirstName,
|
||||
fatherLastName: familyData.value.fatherLastName,
|
||||
fatherCareer: familyData.value.fatherOccupation,
|
||||
motherPrefix: familyData.value.motherPrefixId,
|
||||
motherFirstName: familyData.value.motherFirstName,
|
||||
motherLastName: familyData.value.motherLastName,
|
||||
motherCareer: familyData.value.motherOccupation,
|
||||
};
|
||||
|
||||
console.log(body);
|
||||
}
|
||||
|
||||
/** ดึงข้อมูลรายละเอียด */
|
||||
async function amiRequest() {
|
||||
// await http
|
||||
// .get(config.API.path)
|
||||
// .then(async(res) => {
|
||||
// const data = await res.data.result;
|
||||
// })
|
||||
// .catch((e) => {
|
||||
// messageError($q, e);
|
||||
// })
|
||||
// .finally(() => {});
|
||||
}
|
||||
|
||||
/** เช็คค่า modal เมื่อเป็น true ใช้งาน ฟังชั่น */
|
||||
watch(
|
||||
() => modal.value,
|
||||
async () => {
|
||||
await amiRequest();
|
||||
}
|
||||
);
|
||||
</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>
|
||||
<div class="row q-col-gutter-sm">
|
||||
<div class="col-12">
|
||||
<FormInformationsPage
|
||||
v-model:form-informations="formInformations"
|
||||
:Ops="props.Ops"
|
||||
:OpsFilter="props.OpsFilter"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<q-separator />
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<FormAddressPage
|
||||
v-model:regist-address="registAddress"
|
||||
v-model:ops-address="OpsAddress"
|
||||
v-model:ops-filter-address="OpsFilterAddress"
|
||||
v-model:current-address="currentAddress"
|
||||
v-model:address-data="addressData"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<q-separator />
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<FormFamilyPage
|
||||
:Ops="props.Ops"
|
||||
:Ops-filter="props.OpsFilter"
|
||||
v-model:family-data="familyData"
|
||||
/>
|
||||
</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>
|
||||
Loading…
Add table
Add a link
Reference in a new issue