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,381 @@
|
|||
<script setup lang="ts">
|
||||
import { ref, watch, reactive, type PropType } from "vue";
|
||||
import { useQuasar } from "quasar";
|
||||
|
||||
import http from "@/plugins/http";
|
||||
import config from "@/app.config";
|
||||
import { useProfileDataStore } from "@/modules/05_placement/store";
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
|
||||
import type {
|
||||
DataOption,
|
||||
Information,
|
||||
} from "@/modules/05_placement/components/PersonalDetail/profileType";
|
||||
|
||||
const $q = useQuasar();
|
||||
const mixin = useCounterMixin();
|
||||
const profileStore = useProfileDataStore();
|
||||
const { changeRetireText, changeBirth } = profileStore;
|
||||
const { showLoader, hideLoader, messageError, dateToISO, date2Thai } = mixin;
|
||||
|
||||
const informaData = defineModel<Information>("formInformations", {
|
||||
required: true,
|
||||
});
|
||||
const props = defineProps({
|
||||
Ops: {
|
||||
type: Object as PropType<any>,
|
||||
},
|
||||
OpsFilter: {
|
||||
type: Object as PropType<any>,
|
||||
},
|
||||
});
|
||||
|
||||
const age = ref<boolean>(true); //อายุ
|
||||
|
||||
/**
|
||||
* ฟังก์เลือกวันเดือนปีเกิด
|
||||
* @param modelData วันเดือนปีเกิด
|
||||
*/
|
||||
async function handleDate(modelData: Date) {
|
||||
informaData.value.dateOfBirth = modelData;
|
||||
await calRetire(modelData);
|
||||
}
|
||||
|
||||
/**
|
||||
* ฟังก์ชันคำนวนวันเกษียณอายุราชการ
|
||||
* @param birth วันเดือนปีเกิด
|
||||
*/
|
||||
async function calRetire(birth: Date) {
|
||||
const body = {
|
||||
birthDate: dateToISO(birth),
|
||||
};
|
||||
showLoader();
|
||||
await http
|
||||
.post(config.API.profileCalRetire, body)
|
||||
.then((res: any) => {
|
||||
const data = res.data.result;
|
||||
informaData.value.age = data.age;
|
||||
changeRetireText(data.retireDate);
|
||||
age.value = true;
|
||||
})
|
||||
.catch((e: any) => {
|
||||
age.value = false;
|
||||
messageError($q, e);
|
||||
const retire = new Date(`${birth.getFullYear() + 60}-09-30`);
|
||||
changeRetireText(date2Thai(retire));
|
||||
})
|
||||
.finally(() => {
|
||||
hideLoader();
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* ฟังก์ชันค้นหาข้อมูลในรายการตัวเลือก
|
||||
* @param val คำค้นหา
|
||||
* @param update ฟังก์ชัน
|
||||
* @param refData ประเภทของตัวเลือก
|
||||
*/
|
||||
function filterSelector(val: string, update: Function, refData: string) {
|
||||
switch (refData) {
|
||||
case "prefixOps":
|
||||
update(() => {
|
||||
props.Ops.prefixOps = props.OpsFilter.prefixOps.filter(
|
||||
(v: DataOption) => v.name.indexOf(val) > -1
|
||||
);
|
||||
});
|
||||
break;
|
||||
case "genderOps":
|
||||
update(() => {
|
||||
props.Ops.genderOps = props.OpsFilter.genderOps.filter(
|
||||
(v: DataOption) => v.name.indexOf(val) > -1
|
||||
);
|
||||
});
|
||||
break;
|
||||
case "bloodOps":
|
||||
update(() => {
|
||||
props.Ops.bloodOps = props.OpsFilter.bloodOps.filter(
|
||||
(v: DataOption) => v.name.indexOf(val) > -1
|
||||
);
|
||||
});
|
||||
break;
|
||||
case "statusOps":
|
||||
update(() => {
|
||||
props.Ops.statusOps = props.OpsFilter.statusOps.filter(
|
||||
(v: DataOption) => v.name.indexOf(val) > -1
|
||||
);
|
||||
});
|
||||
break;
|
||||
case "religionOps":
|
||||
update(() => {
|
||||
props.Ops.religionOps = props.OpsFilter.religionOps.filter(
|
||||
(v: DataOption) => v.name.indexOf(val) > -1
|
||||
);
|
||||
});
|
||||
break;
|
||||
case "employeeClassOps":
|
||||
update(() => {
|
||||
props.Ops.employeeClassOps = props.OpsFilter.employeeClassOps.filter(
|
||||
(v: DataOption) => v.name.indexOf(val) > -1
|
||||
);
|
||||
});
|
||||
break;
|
||||
case "employeeTypeOps":
|
||||
update(() => {
|
||||
props.Ops.employeeTypeOps = props.OpsFilter.employeeTypeOps.filter(
|
||||
(v: DataOption) => v.name.indexOf(val) > -1
|
||||
);
|
||||
});
|
||||
break;
|
||||
|
||||
default:
|
||||
break;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<template>
|
||||
<div class="row q-col-gutter-sm">
|
||||
<div class="col-12 text-tooltip text-weight-medium">ข้อมูลส่วนตัว</div>
|
||||
<div class="col-xs-6 col-sm-3 col-md-3">
|
||||
<q-input
|
||||
class="inputgreen"
|
||||
hide-bottom-space
|
||||
dense
|
||||
lazy-rules
|
||||
outlined
|
||||
v-model="informaData.idCard"
|
||||
maxlength="13"
|
||||
:rules="[
|
||||
(val:string) => !!val || `${'กรุณากรอก เลขประจำตัวประชาชน'}`,
|
||||
(val:string) =>
|
||||
val.length >= 13 ||
|
||||
`${'กรุณากรอกเลขประจำตัวประชาชนให้ครบ'}`,
|
||||
]"
|
||||
label="เลขประจำตัวประชาชน"
|
||||
mask="#############"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-xs-6 col-sm-3 col-md-3">
|
||||
<q-select
|
||||
hide-bottom-space
|
||||
class="inputgreen"
|
||||
:rules="[(val:string) => !!val || `${'กรุณาเลือก คำนำหน้า'}`]"
|
||||
outlined
|
||||
dense
|
||||
lazy-rules
|
||||
v-model="informaData.prefixId"
|
||||
emit-value
|
||||
map-options
|
||||
option-label="name"
|
||||
:options="Ops.prefixOps"
|
||||
option-value="id"
|
||||
:label="`${'คำนำหน้า'}`"
|
||||
use-input
|
||||
input-debounce="0"
|
||||
@filter="(inputValue:string,
|
||||
doneFn:Function) => filterSelector(inputValue, doneFn,'prefixOps'
|
||||
) "
|
||||
/>
|
||||
</div>
|
||||
<div class="col-xs-6 col-sm-3 col-md-3">
|
||||
<q-input
|
||||
class="inputgreen"
|
||||
hide-bottom-space
|
||||
outlined
|
||||
dense
|
||||
lazy-rules
|
||||
v-model="informaData.firstname"
|
||||
:rules="[(val:string) => !!val || `${'กรุณากรอก ชื่อ'}`]"
|
||||
:label="`${'ชื่อ'}`"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-xs-6 col-sm-3 col-md-3">
|
||||
<q-input
|
||||
class="inputgreen"
|
||||
hide-bottom-space
|
||||
outlined
|
||||
dense
|
||||
lazy-rules
|
||||
v-model="informaData.lastname"
|
||||
:rules="[(val:string) => !!val || `${'กรุณากรอก นามสกุล'}`]"
|
||||
:label="`${'นามสกุล'}`"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-xs-6 col-sm-3 col-md-3">
|
||||
<datepicker
|
||||
v-model="informaData.dateOfBirth"
|
||||
:locale="'th'"
|
||||
autoApply
|
||||
:enableTimePicker="false"
|
||||
week-start="0"
|
||||
:max-date="new Date()"
|
||||
@update:model-value="handleDate"
|
||||
>
|
||||
<template #year="{ year }">
|
||||
{{ year + 543 }}
|
||||
</template>
|
||||
<template #year-overlay-value="{ value }">
|
||||
{{ parseInt(value + 543) }}
|
||||
</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
class="inputgreen"
|
||||
hide-bottom-space
|
||||
outlined
|
||||
dense
|
||||
:model-value="
|
||||
informaData.dateOfBirth ? date2Thai(informaData.dateOfBirth) : ''
|
||||
"
|
||||
:rules="[(val:string) => !!val || `${'กรุณาเลือก วัน/เดือน/ปี เกิด'}`]"
|
||||
:label="`${'วัน/เดือน/ปี เกิด'}`"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon
|
||||
name="event"
|
||||
class="cursor-pointer"
|
||||
style="color: var(--q-primary)"
|
||||
>
|
||||
</q-icon>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
</div>
|
||||
<div class="col-xs-6 col-sm-3 col-md-3">
|
||||
<q-input
|
||||
class="inputgreen"
|
||||
hide-bottom-space
|
||||
dense
|
||||
lazy-rules
|
||||
readonly
|
||||
borderless
|
||||
style="padding: 0 12px"
|
||||
:model-value="informaData.age"
|
||||
:label="`${'อายุ'}`"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-xs-6 col-sm-3 col-md-3">
|
||||
<q-select
|
||||
hide-bottom-space
|
||||
class="inputgreen"
|
||||
:rules="[(val:string) => !!val || `${'กรุณาเลือก เพศ'}`]"
|
||||
outlined
|
||||
dense
|
||||
lazy-rules
|
||||
v-model="informaData.genderId"
|
||||
emit-value
|
||||
map-options
|
||||
option-label="name"
|
||||
:options="Ops.genderOps"
|
||||
option-value="id"
|
||||
:label="`${'เพศ'}`"
|
||||
use-input
|
||||
input-debounce="0"
|
||||
@filter="(inputValue:string,
|
||||
doneFn:Function) => filterSelector(inputValue, doneFn,'genderOps'
|
||||
) "
|
||||
/>
|
||||
</div>
|
||||
<div class="col-xs-6 col-sm-3 col-md-3">
|
||||
<q-select
|
||||
hide-bottom-space
|
||||
class="inputgreen"
|
||||
:rules="[(val:string) => !!val || `${'กรุณาเลือก สถานภาพ'}`]"
|
||||
outlined
|
||||
dense
|
||||
lazy-rules
|
||||
v-model="informaData.relationshipId"
|
||||
emit-value
|
||||
map-options
|
||||
option-label="name"
|
||||
:options="Ops.statusOps"
|
||||
option-value="id"
|
||||
:label="`${'สถานภาพ'}`"
|
||||
use-input
|
||||
input-debounce="0"
|
||||
@filter="(inputValue:string,
|
||||
doneFn:Function) => filterSelector(inputValue, doneFn,'statusOps'
|
||||
) "
|
||||
/>
|
||||
</div>
|
||||
<div class="col-xs-6 col-sm-3 col-md-3">
|
||||
<q-select
|
||||
hide-bottom-space
|
||||
class="inputgreen"
|
||||
outlined
|
||||
dense
|
||||
lazy-rules
|
||||
v-model="informaData.bloodGroupId"
|
||||
emit-value
|
||||
map-options
|
||||
option-label="name"
|
||||
:options="Ops.bloodOps"
|
||||
option-value="id"
|
||||
:label="`${'หมู่เลือด'}`"
|
||||
use-input
|
||||
input-debounce="0"
|
||||
@filter="(inputValue:string,
|
||||
doneFn:Function) => filterSelector(inputValue, doneFn,'bloodOps'
|
||||
) "
|
||||
/>
|
||||
</div>
|
||||
<div class="col-xs-6 col-sm-3 col-md-3">
|
||||
<q-input
|
||||
class="inputgreen"
|
||||
hide-bottom-space
|
||||
outlined
|
||||
dense
|
||||
lazy-rules
|
||||
v-model="informaData.nationality"
|
||||
:rules="[(val:string) => !!val || `${'กรุณากรอก สัญชาติ'}`]"
|
||||
:label="`${'สัญชาติ'}`"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-xs-6 col-sm-3 col-md-3">
|
||||
<q-input
|
||||
class="inputgreen"
|
||||
hide-bottom-space
|
||||
outlined
|
||||
dense
|
||||
lazy-rules
|
||||
v-model="informaData.race"
|
||||
:rules="[(val:string) => !!val || `${'กรุณากรอก เชื้อชาติ'}`]"
|
||||
:label="`${'เชื้อชาติ'}`"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-xs-6 col-sm-3 col-md-3">
|
||||
<q-select
|
||||
hide-bottom-space
|
||||
class="inputgreen"
|
||||
:rules="[(val:string) => !!val || `${'กรุณาเลือก ศาสนา'}`]"
|
||||
outlined
|
||||
dense
|
||||
lazy-rules
|
||||
v-model="informaData.religionId"
|
||||
emit-value
|
||||
map-options
|
||||
option-label="name"
|
||||
:options="Ops.religionOps"
|
||||
option-value="id"
|
||||
:label="`${'ศาสนา'}`"
|
||||
use-input
|
||||
input-debounce="0"
|
||||
@filter="(inputValue:string,
|
||||
doneFn:Function) => filterSelector(inputValue, doneFn,'religionOps'
|
||||
) "
|
||||
/>
|
||||
</div>
|
||||
<div class="col-xs-6 col-sm-3 col-md-3">
|
||||
<q-input
|
||||
hide-bottom-space
|
||||
outlined
|
||||
dense
|
||||
lazy-rules
|
||||
type="tel"
|
||||
class="inputgreen"
|
||||
v-model="informaData.telephone"
|
||||
:label="`${'เบอร์โทร'}`"
|
||||
mask="##########"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,559 @@
|
|||
<script setup lang="ts">
|
||||
import { onMounted } from "vue";
|
||||
import { useQuasar } from "quasar";
|
||||
|
||||
import http from "@/plugins/http";
|
||||
import config from "@/app.config";
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
|
||||
import type {
|
||||
Address as AddressType,
|
||||
AddressData,
|
||||
AddressOps,
|
||||
Address,
|
||||
optionData,
|
||||
} from "@/modules/05_placement/interface/index/Main";
|
||||
import type { zipCodeOption } from "@/modules/05_placement/components/PersonalDetail/profileType";
|
||||
|
||||
const $q = useQuasar();
|
||||
const mixin = useCounterMixin();
|
||||
const { showLoader, hideLoader, messageError } = mixin;
|
||||
|
||||
const props = defineProps({
|
||||
selectProvince: Function,
|
||||
});
|
||||
const registAddress = defineModel<AddressData>("registAddress", {
|
||||
required: true,
|
||||
});
|
||||
const Ops = defineModel<AddressOps>("opsAddress", { required: true });
|
||||
const OpsFilter = defineModel<AddressOps>("opsFilterAddress", {
|
||||
required: true,
|
||||
});
|
||||
const addressData = defineModel<Address>("addressData", { required: true });
|
||||
const currentAddress = defineModel<AddressData>("currentAddress", {
|
||||
required: true,
|
||||
});
|
||||
|
||||
/**
|
||||
* ฟังก์ชันดึงข้อมูลอำเภอ
|
||||
* @param id จังหวัด
|
||||
* @param position ที่อยู่ตามทะเบียนบ้าน , ที่อยู่ปัจจุบัน
|
||||
*/
|
||||
async function fetchDistrict(id: string | null, position: string) {
|
||||
if (id != null && id != "") {
|
||||
await http
|
||||
.get(config.API.orgProvince + `/${id}`)
|
||||
.then(async (res) => {
|
||||
const data = res.data.result.districts;
|
||||
let option: optionData[] = [];
|
||||
data.map((r: any) => {
|
||||
option.push({ id: r.id, name: r.name });
|
||||
});
|
||||
if (position == "1") {
|
||||
Ops.value.districtOps = option;
|
||||
OpsFilter.value.districtOps = option;
|
||||
|
||||
// ที่อยู่ เช็คอำเภอว่ามี id ใน array ไหม ถ้ามีค่อยกำหนดค่าไปในตัวแปรใหม่เพิ่มแสดงผล
|
||||
const checkRegistDistrictId = option.find(
|
||||
(e: any) => e.id === addressData.value.registDistrictId
|
||||
);
|
||||
|
||||
if (checkRegistDistrictId) {
|
||||
registAddress.value.districtId = addressData.value.registDistrictId;
|
||||
}
|
||||
} else {
|
||||
Ops.value.districtCOps = option;
|
||||
OpsFilter.value.districtCOps = option;
|
||||
|
||||
// ที่อยู่ปัจจุบัน เช็คอำเภอว่ามี id ใน array ไหม ถ้ามีค่อยกำหนดค่าไปในตัวแปรใหม่เพิ่มแสดงผล
|
||||
const checkCurrentDistrictId = await option.find(
|
||||
(e: any) => e.id === addressData.value.currentDistrictId
|
||||
);
|
||||
if (checkCurrentDistrictId) {
|
||||
currentAddress.value.districtId =
|
||||
addressData.value.currentDistrictId;
|
||||
}
|
||||
}
|
||||
})
|
||||
.catch((e) => {
|
||||
messageError($q, e);
|
||||
})
|
||||
.finally(() => {});
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* ฟังก์ชันค้นหาข้อมูลในรายการตัวเลือก
|
||||
* @param val คำค้นหา
|
||||
* @param update ฟังก์ชัน
|
||||
* @param refData ประเภทของตัวเลือก
|
||||
*/
|
||||
function filterSelector(val: string, update: Function, refData: string) {
|
||||
switch (refData) {
|
||||
case "provinceOps":
|
||||
update(() => {
|
||||
Ops.value.provinceOps = OpsFilter.value.provinceOps.filter(
|
||||
(v: optionData) => v.name.indexOf(val) > -1
|
||||
);
|
||||
});
|
||||
break;
|
||||
case "districtOps":
|
||||
update(() => {
|
||||
Ops.value.districtOps = OpsFilter.value.districtOps.filter(
|
||||
(v: optionData) => v.name.indexOf(val) > -1
|
||||
);
|
||||
});
|
||||
break;
|
||||
case "districtCOps":
|
||||
update(() => {
|
||||
Ops.value.districtCOps = OpsFilter.value.districtCOps.filter(
|
||||
(v: optionData) => v.name.indexOf(val) > -1
|
||||
);
|
||||
});
|
||||
break;
|
||||
case "subdistrictOps":
|
||||
update(() => {
|
||||
Ops.value.subdistrictOps = OpsFilter.value.subdistrictOps.filter(
|
||||
(v: optionData) => v.name.indexOf(val) > -1
|
||||
);
|
||||
});
|
||||
break;
|
||||
case "subdistrictCOps":
|
||||
update(() => {
|
||||
Ops.value.subdistrictCOps = OpsFilter.value.subdistrictCOps.filter(
|
||||
(v: optionData) => v.name.indexOf(val) > -1
|
||||
);
|
||||
});
|
||||
break;
|
||||
|
||||
default:
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* ฟังก์ชันดึงข้อมูลจังหวัด
|
||||
*/
|
||||
async function fetchProvince() {
|
||||
showLoader();
|
||||
await http
|
||||
.get(config.API.orgProvince)
|
||||
.then(async (res) => {
|
||||
const data = res.data.result;
|
||||
let option: optionData[] = [];
|
||||
data.map((r: any) => {
|
||||
option.push({ id: r.id, name: r.name });
|
||||
});
|
||||
Ops.value.provinceOps = option;
|
||||
OpsFilter.value.provinceOps = option;
|
||||
|
||||
const checkRegistProvinceId = await option.find(
|
||||
(e: any) => e.id === addressData.value.registProvinceId
|
||||
);
|
||||
|
||||
// ที่อยู่ถ้า id จังหวัดว่างไม่ดึงค่าอำเภอ ตำบล และรหัสไปรษณีย์
|
||||
if (
|
||||
addressData.value.registProvinceId == "" ||
|
||||
addressData.value.registProvinceId ==
|
||||
"00000000-0000-0000-0000-000000000000" ||
|
||||
!checkRegistProvinceId
|
||||
) {
|
||||
registAddress.value.subDistrictId = "";
|
||||
registAddress.value.zipCode = "";
|
||||
registAddress.value.districtId = "";
|
||||
} else {
|
||||
registAddress.value.provinceId = await addressData.value
|
||||
.registProvinceId;
|
||||
registAddress.value.zipCode = await addressData.value.registZipCode;
|
||||
|
||||
await fetchDistrict(addressData.value.registProvinceId, "1");
|
||||
if (
|
||||
addressData.value.registDistrictId != null &&
|
||||
addressData.value.registDistrictId !=
|
||||
"00000000-0000-0000-0000-000000000000"
|
||||
) {
|
||||
await fetchSubDistrict(addressData.value.registDistrictId, "1");
|
||||
}
|
||||
}
|
||||
|
||||
const checkCurrentProvinceId = await option.find(
|
||||
(e: any) => e.id === addressData.value.currentProvinceId
|
||||
);
|
||||
|
||||
// ที่อยู่ปัจจุบันถ้า id จังหวัดว่างไม่ดึงค่าอำเภอ ตำบล และรหัสไปรษณีย์
|
||||
if (
|
||||
addressData.value.currentProvinceId == "" ||
|
||||
addressData.value.currentProvinceId ==
|
||||
"00000000-0000-0000-0000-000000000000" ||
|
||||
!checkCurrentProvinceId
|
||||
) {
|
||||
currentAddress.value.subDistrictId = "";
|
||||
currentAddress.value.zipCode = "";
|
||||
currentAddress.value.districtId = "";
|
||||
} else {
|
||||
currentAddress.value.provinceId = addressData.value.currentProvinceId;
|
||||
currentAddress.value.zipCode = addressData.value.currentZipCode;
|
||||
|
||||
await fetchDistrict(addressData.value.currentProvinceId, "2");
|
||||
if (
|
||||
addressData.value.currentDistrictId != null &&
|
||||
addressData.value.currentDistrictId !=
|
||||
"00000000-0000-0000-0000-000000000000"
|
||||
) {
|
||||
await fetchSubDistrict(addressData.value.currentDistrictId, "2");
|
||||
}
|
||||
}
|
||||
})
|
||||
.catch((e) => {
|
||||
messageError($q, e);
|
||||
})
|
||||
.finally(() => {});
|
||||
}
|
||||
|
||||
/**
|
||||
* ฟังก์ชันดึงข้อมูลตำบล
|
||||
* @param id อำเภอ
|
||||
* @param position ที่อยู่ตามทะเบียนบ้าน , ที่อยู่ปัจจุบัน
|
||||
*/
|
||||
async function fetchSubDistrict(id: string | null, position: string) {
|
||||
if (id != null && id != "") {
|
||||
await http
|
||||
.get(config.API.orgDistrict + `/${id}`)
|
||||
.then(async (res) => {
|
||||
const data = res.data.result.subDistricts;
|
||||
let option: zipCodeOption[] = [];
|
||||
data.map((r: any) => {
|
||||
option.push({
|
||||
id: r.id,
|
||||
name: r.name,
|
||||
zipCode: r.zipCode,
|
||||
});
|
||||
});
|
||||
if (position == "1") {
|
||||
Ops.value.subdistrictOps = option;
|
||||
OpsFilter.value.subdistrictOps = option;
|
||||
|
||||
// ที่อยู่ เช็คตำบลว่ามี id ใน array ไหม ถ้ามีค่อยกำหนดค่าไปในตัวแปรใหม่เพิ่มแสดงผล
|
||||
const checkRegistSubDistrictId = await option.find(
|
||||
(e: any) => e.id === addressData.value.registSubDistrictId
|
||||
);
|
||||
if (checkRegistSubDistrictId) {
|
||||
registAddress.value.subDistrictId =
|
||||
addressData.value.registSubDistrictId;
|
||||
}
|
||||
} else {
|
||||
Ops.value.subdistrictCOps = option;
|
||||
OpsFilter.value.subdistrictCOps = option;
|
||||
|
||||
// ที่อยู่ปัจจุบัน เช็คตำบลว่ามี id ใน array ไหม ถ้ามีค่อยกำหนดค่าไปในตัวแปรใหม่เพิ่มแสดงผล
|
||||
const checkCurrentSubDistrictId = await option.find(
|
||||
(e: any) => e.id === addressData.value.currentSubDistrictId
|
||||
);
|
||||
if (checkCurrentSubDistrictId) {
|
||||
currentAddress.value.subDistrictId =
|
||||
addressData.value.currentSubDistrictId;
|
||||
}
|
||||
}
|
||||
})
|
||||
.catch((e) => {
|
||||
messageError($q, e);
|
||||
})
|
||||
.finally(() => {
|
||||
hideLoader();
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* ฟังก์ชันเลือกข้อมูลจังหวัด
|
||||
* @param e id จังหวัด
|
||||
* @param name ที่อยู่ตามทะเบียนบ้าน , ที่อยู่ปัจจุบัน
|
||||
*/
|
||||
async function selectProvince(e: string | null, name: string) {
|
||||
if (e != null) {
|
||||
if (name == "1") {
|
||||
registAddress.value.subDistrictId = "";
|
||||
registAddress.value.zipCode = "";
|
||||
registAddress.value.districtId = "";
|
||||
} else {
|
||||
currentAddress.value.subDistrictId = "";
|
||||
currentAddress.value.zipCode = "";
|
||||
currentAddress.value.districtId = "";
|
||||
}
|
||||
await fetchDistrict(e, name);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* ฟังก์ชันเลือกข้อมูลตำบล
|
||||
* @param e id ตำบล
|
||||
* @param name ที่อยู่ตามทะเบียนบ้าน , ที่อยู่ปัจจุบัน
|
||||
*/
|
||||
async function selectSubDistrict(e: string | null, name: string) {
|
||||
if (e != null) {
|
||||
if (name == "1") {
|
||||
const findcode = Ops.value.subdistrictOps.filter((r) => r.id == e);
|
||||
const namecode = findcode.length > 0 ? findcode[0].zipCode : "";
|
||||
registAddress.value.zipCode = namecode;
|
||||
} else {
|
||||
const findcode = Ops.value.subdistrictCOps.filter((r) => r.id == e);
|
||||
const namecode = findcode.length > 0 ? findcode[0].zipCode : "";
|
||||
currentAddress.value.zipCode = namecode;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* ฟังก์ชันลือกข้อมูลอำเภอ
|
||||
* @param e id อำเภอ
|
||||
* @param name ที่อยู่ตามทะเบียนบ้าน , ที่อยู่ปัจจุบัน
|
||||
*/
|
||||
async function selectDistrict(e: string | null, name: string) {
|
||||
if (e != null) {
|
||||
if (name == "1") {
|
||||
registAddress.value.subDistrictId = "";
|
||||
registAddress.value.zipCode = "";
|
||||
} else {
|
||||
currentAddress.value.subDistrictId = "";
|
||||
currentAddress.value.zipCode = "";
|
||||
}
|
||||
await fetchSubDistrict(e, name);
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
fetchProvince();
|
||||
});
|
||||
</script>
|
||||
<template>
|
||||
<div class="row q-col-gutter-sm">
|
||||
<div class="col-12 text-tooltip text-weight-medium">ข้อมูลที่อยู่</div>
|
||||
<div class="col-xs-12">
|
||||
<q-input
|
||||
class="inputgreen"
|
||||
hide-bottom-space
|
||||
outlined
|
||||
dense
|
||||
lazy-rules
|
||||
type="textarea"
|
||||
autogrow
|
||||
v-model="addressData.registAddress"
|
||||
:rules="[(val: string) => !!val || `${'กรุณากรอก ที่อยู่ตามทะเบียนบ้าน'}`]"
|
||||
:label="`${'ที่อยู่ตามทะเบียนบ้าน'}`"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-xs-6 col-sm-3 col-md-3">
|
||||
<q-select
|
||||
hide-bottom-space
|
||||
class="inputgreen"
|
||||
:rules="[(val: string) => !!val || `${'กรุณาเลือก จังหวัด'}`]"
|
||||
outlined
|
||||
dense
|
||||
lazy-rules
|
||||
v-model="registAddress.provinceId"
|
||||
emit-value
|
||||
map-options
|
||||
option-label="name"
|
||||
:options="Ops.provinceOps"
|
||||
option-value="id"
|
||||
:label="`${'จังหวัด'}`"
|
||||
@update:model-value="(value: string) => selectProvince(value, '1')"
|
||||
use-input
|
||||
input-debounce="0"
|
||||
@filter="(inputValue: string,
|
||||
doneFn: Function) => filterSelector(inputValue, doneFn, 'provinceOps'
|
||||
)"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-xs-6 col-sm-3 col-md-3">
|
||||
<q-select
|
||||
hide-bottom-space
|
||||
class="inputgreen"
|
||||
:rules="[(val: string) => !!val || `${'กรุณาเลือก เขต / อำเภอ'}`]"
|
||||
outlined
|
||||
dense
|
||||
lazy-rules
|
||||
v-model="registAddress.districtId"
|
||||
emit-value
|
||||
map-options
|
||||
option-label="name"
|
||||
:options="Ops.districtOps"
|
||||
option-value="id"
|
||||
:label="`${'เขต / อำเภอ'}`"
|
||||
@update:model-value="(value: string) => selectDistrict(value, '1')"
|
||||
use-input
|
||||
input-debounce="0"
|
||||
@filter="(inputValue: string,
|
||||
doneFn: Function) => filterSelector(inputValue, doneFn, 'districtOps'
|
||||
)"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-xs-6 col-sm-3 col-md-3">
|
||||
<q-select
|
||||
hide-bottom-space
|
||||
class="inputgreen"
|
||||
:rules="[(val: string) => !!val || `${'กรุณาเลือก แขวง / ตำบล '}`]"
|
||||
outlined
|
||||
dense
|
||||
lazy-rules
|
||||
v-model="registAddress.subDistrictId"
|
||||
emit-value
|
||||
map-options
|
||||
option-label="name"
|
||||
:options="Ops.subdistrictOps"
|
||||
option-value="id"
|
||||
:label="`${'แขวง / ตำบล '}`"
|
||||
@update:model-value="(value: string) => selectSubDistrict(value, '1')"
|
||||
use-input
|
||||
input-debounce="0"
|
||||
@filter="(inputValue: string,
|
||||
doneFn: Function) => filterSelector(inputValue, doneFn, 'subdistrictOps'
|
||||
)"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-xs-6 col-sm-3 col-md-3">
|
||||
<q-input
|
||||
class="inputgreen"
|
||||
hide-bottom-space
|
||||
dense
|
||||
lazy-rules
|
||||
readonly
|
||||
borderless
|
||||
v-model="registAddress.zipCode"
|
||||
style="padding: 0 12px"
|
||||
:label="`${'รหัสไปรษณีย์'}`"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-12 q-pt-lg"><q-separator /></div>
|
||||
<div class="col-xs-12 q-gutter-sm items-center flex q-my-sm">
|
||||
<label class="text-bold"
|
||||
>ที่อยู่ปัจจุบันตรงกับที่อยู่ตามทะเบียนบ้าน</label
|
||||
>
|
||||
<q-radio
|
||||
v-model="addressData.registSame"
|
||||
checked-icon="task_alt"
|
||||
unchecked-icon="panorama_fish_eye"
|
||||
val="1"
|
||||
label="ใช่"
|
||||
dense
|
||||
/>
|
||||
<q-radio
|
||||
v-model="addressData.registSame"
|
||||
checked-icon="task_alt"
|
||||
unchecked-icon="panorama_fish_eye"
|
||||
val="0"
|
||||
label="ไม่"
|
||||
dense
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="col-xs-12" v-if="addressData.registSame == '0'">
|
||||
<q-input
|
||||
class="inputgreen"
|
||||
hide-bottom-space
|
||||
outlined
|
||||
dense
|
||||
lazy-rules
|
||||
type="textarea"
|
||||
autogrow
|
||||
v-model="addressData.currentAddress"
|
||||
:rules="[(val: string) => !!val || `${'กรุณากรอก ที่อยู่ปัจจุบัน'}`]"
|
||||
:label="`${'ที่อยู่ปัจจุบัน'}`"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="col-xs-6 col-sm-3 col-md-3"
|
||||
v-if="addressData.registSame == '0'"
|
||||
>
|
||||
<q-select
|
||||
hide-bottom-space
|
||||
class="inputgreen"
|
||||
:rules="[(val: string) => !!val || `${'กรุณาเลือก จังหวัด'}`]"
|
||||
outlined
|
||||
dense
|
||||
lazy-rules
|
||||
v-model="currentAddress.provinceId"
|
||||
emit-value
|
||||
map-options
|
||||
option-label="name"
|
||||
:options="Ops.provinceOps"
|
||||
option-value="id"
|
||||
:label="`${'จังหวัด'}`"
|
||||
@update:model-value="(value: string) => selectProvince(value, '2')"
|
||||
use-input
|
||||
input-debounce="0"
|
||||
@filter="(inputValue: string,
|
||||
doneFn: Function) => filterSelector(inputValue, doneFn, 'provinceOps'
|
||||
)"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="col-xs-6 col-sm-3 col-md-3"
|
||||
v-if="addressData.registSame == '0'"
|
||||
>
|
||||
<q-select
|
||||
hide-bottom-space
|
||||
class="inputgreen"
|
||||
:rules="[(val: string) => !!val || `${'กรุณาเลือก เขต / อำเภอ'}`]"
|
||||
outlined
|
||||
dense
|
||||
lazy-rules
|
||||
v-model="currentAddress.districtId"
|
||||
emit-value
|
||||
map-options
|
||||
option-label="name"
|
||||
:options="Ops.districtCOps"
|
||||
option-value="id"
|
||||
:label="`${'เขต / อำเภอ'}`"
|
||||
@update:model-value="(value: string) => selectDistrict(value, '2')"
|
||||
use-input
|
||||
input-debounce="0"
|
||||
@filter="(inputValue: string,
|
||||
doneFn: Function) => filterSelector(inputValue, doneFn, 'districtCOps'
|
||||
)"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="col-xs-6 col-sm-3 col-md-3"
|
||||
v-if="addressData.registSame == '0'"
|
||||
>
|
||||
<q-select
|
||||
hide-bottom-space
|
||||
class="inputgreen"
|
||||
:rules="[(val: string) => !!val || `${'กรุณาเลือก แขวง / ตำบล '}`]"
|
||||
outlined
|
||||
dense
|
||||
lazy-rules
|
||||
v-model="currentAddress.subDistrictId"
|
||||
emit-value
|
||||
map-options
|
||||
option-label="name"
|
||||
:options="Ops.subdistrictCOps"
|
||||
option-value="id"
|
||||
:label="`${'แขวง / ตำบล '}`"
|
||||
@update:model-value="(value: string) => selectSubDistrict(value, '2')"
|
||||
use-input
|
||||
input-debounce="0"
|
||||
@filter="(inputValue: string,
|
||||
doneFn: Function) => filterSelector(inputValue, doneFn, 'subdistrictCOps'
|
||||
)"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="col-xs-6 col-sm-3 col-md-3"
|
||||
v-if="addressData.registSame == '0'"
|
||||
>
|
||||
<q-input
|
||||
class="inputgreen"
|
||||
hide-bottom-space
|
||||
dense
|
||||
lazy-rules
|
||||
readonly
|
||||
borderless
|
||||
v-model="currentAddress.zipCode"
|
||||
style="padding: 0 12px"
|
||||
:label="`${'รหัสไปรษณีย์'}`"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,249 @@
|
|||
<script setup lang="ts">
|
||||
import { watch, reactive, type PropType, ref } from "vue";
|
||||
|
||||
import type { DataOption } from "@/modules/05_placement/components/PersonalDetail/profileType";
|
||||
import type { Family } from "@/modules/05_placement/interface/index/Main";
|
||||
|
||||
const familyData = defineModel<Family>("familyData", { required: true });
|
||||
const props = defineProps({
|
||||
Ops: {
|
||||
type: Object as PropType<any>,
|
||||
},
|
||||
OpsFilter: {
|
||||
type: Object as PropType<any>,
|
||||
},
|
||||
});
|
||||
|
||||
/**
|
||||
* ฟังก์ชันค้นหาข้อมูลในรายการตัวเลือก
|
||||
* @param val คำค้นหา
|
||||
* @param update ฟังก์ชัน
|
||||
* @param refData ประเภทของตัวเลือก
|
||||
*/
|
||||
function filterSelector(val: string, update: Function, refData: string) {
|
||||
update(() => {
|
||||
props.Ops[`${refData}`] = props.OpsFilter[`${refData}`].filter(
|
||||
(v: DataOption) => v.name.indexOf(val) > -1
|
||||
);
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* ฟังก์ชันเลือกคู่สมรส
|
||||
* @param e มี, ไม่มีคู่สมรส
|
||||
*/
|
||||
function selectRadio(e: boolean) {
|
||||
if (e) {
|
||||
familyData.value.marryPrefixId = "";
|
||||
familyData.value.marryFirstName = "";
|
||||
familyData.value.marryLastName = "";
|
||||
familyData.value.marryOccupation = "";
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<template>
|
||||
<div class="row q-col-gutter-sm">
|
||||
<div class="col-12 text-tooltip text-weight-medium">ข้อมูลครอบครัว</div>
|
||||
<div class="col-xs-12 text-weight-bold">• บิดา</div>
|
||||
<div class="col-xs-12 col-sm-3 col-md-3">
|
||||
<selector
|
||||
hide-bottom-space
|
||||
class="inputgreen"
|
||||
:rules="[(val:string) => !!val || `${'กรุณาเลือก คำนำหน้า'}`]"
|
||||
outlined
|
||||
dense
|
||||
lazy-rules
|
||||
v-model="familyData.fatherPrefixId"
|
||||
emit-value
|
||||
map-options
|
||||
option-label="name"
|
||||
:options="Ops.prefixOps"
|
||||
option-value="id"
|
||||
:label="`${'คำนำหน้า'}`"
|
||||
use-input
|
||||
input-debounce="0"
|
||||
@filter="(inputValue:any,
|
||||
doneFn:Function) => filterSelector(inputValue, doneFn,'prefixOps'
|
||||
) "
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="col-xs-6 col-sm-3 col-md-3">
|
||||
<q-input
|
||||
class="inputgreen"
|
||||
hide-bottom-space
|
||||
outlined
|
||||
dense
|
||||
lazy-rules
|
||||
v-model="familyData.fatherFirstName"
|
||||
:rules="[(val:string) => !!val || `${'กรุณากรอก ชื่อ'}`]"
|
||||
:label="`${'ชื่อ'}`"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-xs-6 col-sm-3 col-md-3">
|
||||
<q-input
|
||||
class="inputgreen"
|
||||
hide-bottom-space
|
||||
outlined
|
||||
dense
|
||||
lazy-rules
|
||||
v-model="familyData.fatherLastName"
|
||||
:rules="[(val:string) => !!val || `${'กรุณากรอก นามสกุล'}`]"
|
||||
:label="`${'นามสกุล'}`"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-xs-12 col-sm-3 col-md-3">
|
||||
<q-input
|
||||
class="inputgreen"
|
||||
hide-bottom-space
|
||||
outlined
|
||||
dense
|
||||
lazy-rules
|
||||
v-model="familyData.fatherOccupation"
|
||||
:label="`${'อาชีพ'}`"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="col-12 q-pt-md q-pb-sm"><q-separator /></div>
|
||||
<div class="col-xs-12 text-weight-bold">• มารดา</div>
|
||||
<div class="col-xs-12 col-sm-3 col-md-3">
|
||||
<selector
|
||||
hide-bottom-space
|
||||
class="inputgreen"
|
||||
:rules="[(val:string) => !!val || `${'กรุณาเลือก คำนำหน้า'}`]"
|
||||
outlined
|
||||
dense
|
||||
lazy-rules
|
||||
v-model="familyData.motherPrefixId"
|
||||
emit-value
|
||||
map-options
|
||||
option-label="name"
|
||||
:options="Ops.prefixOps"
|
||||
option-value="id"
|
||||
:label="`${'คำนำหน้า'}`"
|
||||
use-input
|
||||
input-debounce="0"
|
||||
@filter="(inputValue:any,
|
||||
doneFn:Function) => filterSelector(inputValue, doneFn,'prefixOps'
|
||||
) "
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="col-xs-6 col-sm-3 col-md-3">
|
||||
<q-input
|
||||
class="inputgreen"
|
||||
hide-bottom-space
|
||||
outlined
|
||||
dense
|
||||
lazy-rules
|
||||
v-model="familyData.motherFirstName"
|
||||
:rules="[(val:string) => !!val || `${'กรุณากรอก ชื่อ'}`]"
|
||||
:label="`${'ชื่อ'}`"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-xs-6 col-sm-3 col-md-3">
|
||||
<q-input
|
||||
class="inputgreen"
|
||||
hide-bottom-space
|
||||
outlined
|
||||
dense
|
||||
lazy-rules
|
||||
v-model="familyData.motherLastName"
|
||||
:rules="[(val:string) => !!val || `${'กรุณากรอก นามสกุล'}`]"
|
||||
:label="`${'นามสกุล'}`"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-xs-12 col-sm-3 col-md-3">
|
||||
<q-input
|
||||
class="inputgreen"
|
||||
hide-bottom-space
|
||||
outlined
|
||||
dense
|
||||
lazy-rules
|
||||
v-model="familyData.motherOccupation"
|
||||
:label="`${'อาชีพ'}`"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-12 q-pt-md q-pb-sm"><q-separator /></div>
|
||||
<div class="col-xs-12 q-col-gutter-x-sm items-center flex q-my-sm">
|
||||
<label class="text-weight-bold">• คู่สมรส</label>
|
||||
<q-radio
|
||||
v-model="familyData.couple"
|
||||
checked-icon="task_alt"
|
||||
unchecked-icon="panorama_fish_eye"
|
||||
val="1"
|
||||
label="มี"
|
||||
dense
|
||||
@update:model-value="selectRadio"
|
||||
/>
|
||||
<q-radio
|
||||
v-model="familyData.couple"
|
||||
checked-icon="task_alt"
|
||||
unchecked-icon="panorama_fish_eye"
|
||||
val="0"
|
||||
label="ไม่มี"
|
||||
dense
|
||||
@update:model-value="selectRadio"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="col-xs-12 col-sm-2 col-md-2" v-if="familyData.couple == '1'">
|
||||
<selector
|
||||
hide-bottom-space
|
||||
class="inputgreen"
|
||||
:rules="[(val:string) => !!val || `${'กรุณาเลือก คำนำหน้า'}`]"
|
||||
outlined
|
||||
dense
|
||||
lazy-rules
|
||||
v-model="familyData.marryPrefixId"
|
||||
emit-value
|
||||
map-options
|
||||
option-label="name"
|
||||
:options="Ops.prefixOps"
|
||||
option-value="id"
|
||||
:label="`${'คำนำหน้า'}`"
|
||||
use-input
|
||||
input-debounce="0"
|
||||
@filter="(inputValue:any,
|
||||
doneFn:Function) => filterSelector(inputValue, doneFn,'prefixOps'
|
||||
) "
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="col-xs-6 col-sm-3 col-md-3" v-if="familyData.couple == '1'">
|
||||
<q-input
|
||||
class="inputgreen"
|
||||
hide-bottom-space
|
||||
outlined
|
||||
dense
|
||||
lazy-rules
|
||||
v-model="familyData.marryFirstName"
|
||||
:rules="[(val:string) => !!val || `${'กรุณากรอก ชื่อ'}`]"
|
||||
:label="`${'ชื่อ'}`"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-xs-6 col-sm-2 col-md-2" v-if="familyData.couple == '1'">
|
||||
<q-input
|
||||
class="inputgreen"
|
||||
hide-bottom-space
|
||||
outlined
|
||||
dense
|
||||
lazy-rules
|
||||
v-model="familyData.marryLastName"
|
||||
:rules="[(val:string) => !!val || `${'กรุณากรอก นามสกุล'}`]"
|
||||
:label="`${'นามสกุล'}`"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-xs-12 col-sm-3 col-md-3" v-if="familyData.couple == '1'">
|
||||
<q-input
|
||||
class="inputgreen"
|
||||
hide-bottom-space
|
||||
outlined
|
||||
dense
|
||||
lazy-rules
|
||||
v-model="familyData.marryOccupation"
|
||||
:label="`${'อาชีพ'}`"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -35,6 +35,7 @@ import EducationVue from "@/modules/05_placement/components/PersonalDetail/Infor
|
|||
import ExamResult from "@/modules/05_placement/components/PersonalDetail/Information/ExamResult.vue";
|
||||
import Qualification from "@/modules/05_placement/components/PersonalDetail/Information/Qualification.vue";
|
||||
import Document from "@/modules/05_placement/components/PersonalDetail/Information/Document.vue";
|
||||
import DialogCheckInformation from "@/modules/05_placement/components/PersonalDetail/DialogCheckInformation.vue";
|
||||
|
||||
const $q = useQuasar();
|
||||
const route = useRoute();
|
||||
|
|
@ -45,6 +46,7 @@ const storePersonal = usePersonalDataStore();
|
|||
const { showLoader, hideLoader, messageError } = mixin;
|
||||
const { changeTab } = store;
|
||||
|
||||
const modalCheck = ref<boolean>(false);
|
||||
const examId = ref<string>(
|
||||
route.params.personalId ? route.params.personalId.toString() : ""
|
||||
);
|
||||
|
|
@ -485,6 +487,11 @@ function guidCheck(id: string) {
|
|||
return id;
|
||||
}
|
||||
|
||||
/** เปืด popup ตรวจสอบข้อมูลกับกรมการปกครอง */
|
||||
function checkInformation() {
|
||||
modalCheck.value = true;
|
||||
}
|
||||
|
||||
/**
|
||||
* ทำงานเมื่อมีการเรียกใช้ Components
|
||||
*/
|
||||
|
|
@ -510,6 +517,14 @@ onMounted(async () => {
|
|||
</div>
|
||||
</div>
|
||||
<div class="q-pb-lg">
|
||||
<div class="row q-mb-sm justify-end">
|
||||
<q-btn
|
||||
color="public"
|
||||
label="ตรวจสอบข้อมูลกับกรมการปกครอง"
|
||||
@click="checkInformation"
|
||||
>
|
||||
</q-btn>
|
||||
</div>
|
||||
<q-card class="row q-pb-lg" v-if="storePersonal.loading">
|
||||
<div id="information" name="1" class="col-12 q-pa-sm">
|
||||
<Informationvue
|
||||
|
|
@ -585,6 +600,14 @@ onMounted(async () => {
|
|||
</div>
|
||||
</q-card>
|
||||
</div>
|
||||
|
||||
<DialogCheckInformation
|
||||
v-model:modal="modalCheck"
|
||||
:address-data="AddressData"
|
||||
:family-data="FamilyData"
|
||||
:Ops="Ops"
|
||||
:Ops-filter="OpsFilter"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -147,10 +147,10 @@ interface Address {
|
|||
}
|
||||
|
||||
interface AddressData {
|
||||
subDistrictId: any;
|
||||
subDistrictId: string;
|
||||
zipCode: string;
|
||||
districtId: any;
|
||||
provinceId: any;
|
||||
districtId: string;
|
||||
provinceId: string;
|
||||
}
|
||||
|
||||
interface Certificate {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue