Merge branches 'develop' and 'develop' of github.com:Frappet/bma-ehr-frontend into develop
This commit is contained in:
commit
24a69ba9d3
27 changed files with 1828 additions and 282 deletions
|
|
@ -169,7 +169,7 @@ const isLoad = ref<boolean>(false);
|
|||
|
||||
/** ดึงข้อมูล active */
|
||||
async function getTreeData() {
|
||||
nodes.value = await fetchStructureTree(route.meta.Key as string);
|
||||
nodes.value = await fetchStructureTree(route.meta.Key as string,true);
|
||||
isLoad.value = true;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -59,18 +59,9 @@ function onClose() {
|
|||
<q-card-section>
|
||||
<q-card flat bordered>
|
||||
<q-card-section>
|
||||
<div
|
||||
class="row"
|
||||
style="
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-end;
|
||||
"
|
||||
>
|
||||
<div class="row">
|
||||
<div class="text-red">
|
||||
*ต้องใช้บน Windows และต้องติดตั้ง Agent
|
||||
</div>
|
||||
<div>
|
||||
<a
|
||||
href="https://linkagemgmt.bora.dopa.go.th/app/LinkageManagement-v1.11.0.zip"
|
||||
>ลิงก์ดาวน์โหลด Agent</a
|
||||
|
|
@ -82,6 +73,7 @@ function onClose() {
|
|||
<!-- เสียบบัตรประชาชนเข้ากับเครื่องอ่าน -->
|
||||
<q-timeline-entry
|
||||
title="เสียบบัตรประชาชนเข้ากับเครื่องอ่าน"
|
||||
style="font-size: 12px"
|
||||
:icon="
|
||||
step === 1
|
||||
? 'mdi-pencil'
|
||||
|
|
@ -187,4 +179,9 @@ function onClose() {
|
|||
</q-dialog>
|
||||
</template>
|
||||
|
||||
<style lang="sass" scoped></style>
|
||||
<style scoped>
|
||||
:deep(.q-timeline__title) {
|
||||
font-size: 15px; /* ปรับขนาดฟอนต์ตามที่ต้องการ */
|
||||
font-weight: normal; /* หรือปรับน้ำหนักฟอนต์ */
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -239,227 +239,235 @@ watch(modal, (val) => {
|
|||
|
||||
<template>
|
||||
<q-dialog v-model="modal" persistent>
|
||||
<q-card style="min-width: 90%">
|
||||
<q-card style="min-width: 65%">
|
||||
<q-form greedy @submit.prevent @validation-success="onSubmit">
|
||||
<DialogHeader tittle="ข้อมูลการพัฒนารายบุคคล" :close="closeDialog" />
|
||||
<q-separator />
|
||||
|
||||
<q-card-section style="max-height: 84vh" class="scroll">
|
||||
<div class="row q-col-gutter-sm">
|
||||
<div class="col-md-3 col-xs-12">
|
||||
<div class="row q-col-gutter-sm">
|
||||
<!-- สถานะ -->
|
||||
<div class="col-12">
|
||||
<q-select
|
||||
:class="classInput(isReadOnly)"
|
||||
v-model="formData.status"
|
||||
label="สถานะ"
|
||||
dense
|
||||
outlined
|
||||
emit-value
|
||||
map-options
|
||||
:options="statusOption"
|
||||
:rules="[(val:string) => !!val || `${'กรุณาเลือกสถานะ'}`]"
|
||||
lazy-rules
|
||||
hide-bottom-space
|
||||
use-input
|
||||
option-label="name"
|
||||
option-value="id"
|
||||
@filter="(inputValue:string,
|
||||
<!-- สถานะคำร้อง -->
|
||||
<q-card-section>
|
||||
<q-card bordered class="col-12">
|
||||
<div class="col-12 text-weight-medium bg-grey-1 q-py-xs q-px-md">
|
||||
สถานะคำร้อง
|
||||
</div>
|
||||
<q-separator />
|
||||
<div class="row q-pa-md q-col-gutter-sm">
|
||||
<!-- สถานะ -->
|
||||
<div class="col-4">
|
||||
<q-select
|
||||
:class="classInput(isReadOnly)"
|
||||
v-model="formData.status"
|
||||
label="สถานะ"
|
||||
dense
|
||||
outlined
|
||||
emit-value
|
||||
map-options
|
||||
:options="statusOption"
|
||||
:rules="[(val:string) => !!val || `${'กรุณาเลือกสถานะ'}`]"
|
||||
lazy-rules
|
||||
hide-bottom-space
|
||||
use-input
|
||||
option-label="name"
|
||||
option-value="id"
|
||||
@filter="(inputValue:string,
|
||||
doneFn:Function) => filterOption(inputValue, doneFn
|
||||
) "
|
||||
>
|
||||
<template v-slot:no-option>
|
||||
<q-item>
|
||||
<q-item-section class="text-grey">
|
||||
ไม่มีข้อมูล
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</template>
|
||||
</q-select>
|
||||
</div>
|
||||
>
|
||||
<template v-slot:no-option>
|
||||
<q-item>
|
||||
<q-item-section class="text-grey">
|
||||
ไม่มีข้อมูล
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</template>
|
||||
</q-select>
|
||||
</div>
|
||||
|
||||
<!-- หมายเหตุ -->
|
||||
<div class="col-12">
|
||||
<q-input
|
||||
:class="classInput(isReadOnly)"
|
||||
v-model="formData.reason"
|
||||
label="หมายเหตุ"
|
||||
dense
|
||||
outlined
|
||||
type="textarea"
|
||||
hide-bottom-space
|
||||
/>
|
||||
</div>
|
||||
<!-- หมายเหตุ -->
|
||||
<div class="col-8">
|
||||
<q-input
|
||||
:class="classInput(isReadOnly)"
|
||||
v-model="formData.reason"
|
||||
label="หมายเหตุ"
|
||||
dense
|
||||
outlined
|
||||
type="textarea"
|
||||
hide-bottom-space
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-9 col-xs-12">
|
||||
<div class="row q-col-gutter-sm">
|
||||
<div class="col-12">
|
||||
<q-input
|
||||
readonly
|
||||
outlined
|
||||
v-model="formData.topic"
|
||||
label="ชื่อเรื่อง/เนื้อเรื่อง/หัวข้อการพัฒนา"
|
||||
dense
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<div class="q-mb-sm text-weight-medium text-body2">
|
||||
วิธีการพัฒนา
|
||||
</div>
|
||||
<div class="row col-12 q-ml-md q-col-gutter-sm">
|
||||
<!-- 70 การลงมือปฏิบัติ (โดยผู้บังคับบัญชามอบหมาย) -->
|
||||
<div class="col-4">
|
||||
<div class="q-mb-sm text-weight-medium text-body2">
|
||||
70 การลงมือปฏิบัติ (โดยผู้บังคับบัญชามอบหมาย)
|
||||
</div>
|
||||
<q-option-group
|
||||
disable
|
||||
class="check_box q-mt-sm"
|
||||
keep-color
|
||||
color="primary"
|
||||
dense
|
||||
v-model="formData.developmentProjects"
|
||||
:options="itemsDevelopment70"
|
||||
type="checkbox"
|
||||
/>
|
||||
|
||||
<div
|
||||
class="row"
|
||||
v-if="formData.developmentProjects.includes('other1')"
|
||||
>
|
||||
<div class="col-8 q-mt-sm relative-position">
|
||||
<div class="other_custom_input">
|
||||
<q-input
|
||||
readonly
|
||||
v-model="formData.reasonDevelopment70"
|
||||
dense
|
||||
outlined
|
||||
label="กรุณาระบุ"
|
||||
></q-input>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 20 การเรียนรู้จากผู้อื่น (Coach/Mentor/Consulting) -->
|
||||
<div class="col-4">
|
||||
<div class="q-mb-sm text-weight-medium text-body2">
|
||||
20 การเรียนรู้จากผู้อื่น (Coach/Mentor/Consulting)
|
||||
</div>
|
||||
<q-option-group
|
||||
disable
|
||||
class="check_box q-mt-sm"
|
||||
keep-color
|
||||
color="primary"
|
||||
dense
|
||||
v-model="formData.developmentProjects"
|
||||
:options="itemsDevelopment20"
|
||||
type="checkbox"
|
||||
/>
|
||||
<div
|
||||
class="row"
|
||||
v-if="formData.developmentProjects.includes('other2')"
|
||||
>
|
||||
<div class="col-8 q-mt-sm relative-position">
|
||||
<div class="other_custom_input">
|
||||
<q-input
|
||||
readonly
|
||||
v-model="formData.reasonDevelopment20"
|
||||
dense
|
||||
outlined
|
||||
label="กรุณาระบุ"
|
||||
></q-input>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 10 การฝึกอบรมอื่นๆ -->
|
||||
<div class="col-4">
|
||||
<div class="q-mb-sm text-weight-medium text-body2">
|
||||
10 การฝึกอบรมอื่นๆ
|
||||
</div>
|
||||
<q-option-group
|
||||
disable
|
||||
class="check_box q-mt-sm"
|
||||
keep-color
|
||||
color="primary"
|
||||
dense
|
||||
v-model="formData.developmentProjects"
|
||||
:options="itemsDevelopment10"
|
||||
type="checkbox"
|
||||
/>
|
||||
<div
|
||||
class="row"
|
||||
v-if="formData.developmentProjects.includes('other3')"
|
||||
>
|
||||
<div class="offset-4 col-8 q-mt-sm relative-position">
|
||||
<div class="other_custom_input">
|
||||
<q-input
|
||||
readonly
|
||||
v-model="formData.reasonDevelopment10"
|
||||
dense
|
||||
outlined
|
||||
label="กรุณาระบุ"
|
||||
></q-input>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- เป้าหมายการนำไปพัฒนางาน -->
|
||||
<div class="col-12">
|
||||
<q-input
|
||||
readonly
|
||||
outlined
|
||||
v-model="formData.developmentTarget"
|
||||
label="เป้าหมายการนำไปพัฒนางาน"
|
||||
dense
|
||||
type="textarea"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- วิธีการวัดผลการพัฒนา -->
|
||||
<div class="col-12">
|
||||
<q-input
|
||||
readonly
|
||||
outlined
|
||||
v-model="formData.developmentResults"
|
||||
label="วิธีการวัดผลการพัฒนา"
|
||||
dense
|
||||
type="textarea"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- รายงานผลการพัฒนา -->
|
||||
<div class="col-12">
|
||||
<q-input
|
||||
readonly
|
||||
outlined
|
||||
v-model="formData.developmentReport"
|
||||
label="รายงานผลการพัฒนา"
|
||||
dense
|
||||
type="textarea"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<q-card-actions align="right">
|
||||
<q-btn label="บันทึก" color="secondary" type="submit"
|
||||
><q-tooltip>บันทึก</q-tooltip></q-btn
|
||||
>
|
||||
</q-card-actions>
|
||||
</q-card>
|
||||
</q-card-section>
|
||||
|
||||
<q-separator />
|
||||
<!-- รายละเอียด -->
|
||||
<q-card-section class="q-pt-none">
|
||||
<q-card bordered class="col-12">
|
||||
<div class="col-12 text-weight-medium bg-grey-1 q-py-xs q-px-md">
|
||||
รายละเอียด
|
||||
</div>
|
||||
<q-separator />
|
||||
<div class="row q-col-gutter-sm q-pa-md">
|
||||
<div class="col-12">
|
||||
<q-input
|
||||
readonly
|
||||
outlined
|
||||
v-model="formData.topic"
|
||||
label="ชื่อเรื่อง/เนื้อเรื่อง/หัวข้อการพัฒนา"
|
||||
dense
|
||||
/>
|
||||
</div>
|
||||
|
||||
<q-card-actions align="right">
|
||||
<q-btn label="บันทึก" color="secondary" type="submit"
|
||||
><q-tooltip>บันทึก</q-tooltip></q-btn
|
||||
>
|
||||
</q-card-actions>
|
||||
<div class="col-12">
|
||||
<div class="q-mb-sm text-weight-medium text-body2">
|
||||
วิธีการพัฒนา
|
||||
</div>
|
||||
<div class="row col-12 q-ml-md q-col-gutter-sm">
|
||||
<!-- 70 การลงมือปฏิบัติ (โดยผู้บังคับบัญชามอบหมาย) -->
|
||||
<div class="col-4">
|
||||
<div class="q-mb-sm text-weight-medium text-body2">
|
||||
70 การลงมือปฏิบัติ (โดยผู้บังคับบัญชามอบหมาย)
|
||||
</div>
|
||||
<q-option-group
|
||||
disable
|
||||
class="check_box q-mt-sm"
|
||||
keep-color
|
||||
color="primary"
|
||||
dense
|
||||
v-model="formData.developmentProjects"
|
||||
:options="itemsDevelopment70"
|
||||
type="checkbox"
|
||||
/>
|
||||
|
||||
<div
|
||||
class="row"
|
||||
v-if="formData.developmentProjects.includes('other1')"
|
||||
>
|
||||
<div class="col-8 q-mt-sm relative-position">
|
||||
<div class="other_custom_input">
|
||||
<q-input
|
||||
readonly
|
||||
v-model="formData.reasonDevelopment70"
|
||||
dense
|
||||
outlined
|
||||
label="กรุณาระบุ"
|
||||
></q-input>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 20 การเรียนรู้จากผู้อื่น (Coach/Mentor/Consulting) -->
|
||||
<div class="col-4">
|
||||
<div class="q-mb-sm text-weight-medium text-body2">
|
||||
20 การเรียนรู้จากผู้อื่น (Coach/Mentor/Consulting)
|
||||
</div>
|
||||
<q-option-group
|
||||
disable
|
||||
class="check_box q-mt-sm"
|
||||
keep-color
|
||||
color="primary"
|
||||
dense
|
||||
v-model="formData.developmentProjects"
|
||||
:options="itemsDevelopment20"
|
||||
type="checkbox"
|
||||
/>
|
||||
<div
|
||||
class="row"
|
||||
v-if="formData.developmentProjects.includes('other2')"
|
||||
>
|
||||
<div class="col-8 q-mt-sm relative-position">
|
||||
<div class="other_custom_input">
|
||||
<q-input
|
||||
readonly
|
||||
v-model="formData.reasonDevelopment20"
|
||||
dense
|
||||
outlined
|
||||
label="กรุณาระบุ"
|
||||
></q-input>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 10 การฝึกอบรมอื่นๆ -->
|
||||
<div class="col-4">
|
||||
<div class="q-mb-sm text-weight-medium text-body2">
|
||||
10 การฝึกอบรมอื่นๆ
|
||||
</div>
|
||||
<q-option-group
|
||||
disable
|
||||
class="check_box q-mt-sm"
|
||||
keep-color
|
||||
color="primary"
|
||||
dense
|
||||
v-model="formData.developmentProjects"
|
||||
:options="itemsDevelopment10"
|
||||
type="checkbox"
|
||||
/>
|
||||
<div
|
||||
class="row"
|
||||
v-if="formData.developmentProjects.includes('other3')"
|
||||
>
|
||||
<div class="offset-4 col-8 q-mt-sm relative-position">
|
||||
<div class="other_custom_input">
|
||||
<q-input
|
||||
readonly
|
||||
v-model="formData.reasonDevelopment10"
|
||||
dense
|
||||
outlined
|
||||
label="กรุณาระบุ"
|
||||
></q-input>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- เป้าหมายการนำไปพัฒนางาน -->
|
||||
<div class="col-12">
|
||||
<q-input
|
||||
readonly
|
||||
outlined
|
||||
v-model="formData.developmentTarget"
|
||||
label="เป้าหมายการนำไปพัฒนางาน"
|
||||
dense
|
||||
type="textarea"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- วิธีการวัดผลการพัฒนา -->
|
||||
<div class="col-12">
|
||||
<q-input
|
||||
readonly
|
||||
outlined
|
||||
v-model="formData.developmentResults"
|
||||
label="วิธีการวัดผลการพัฒนา"
|
||||
dense
|
||||
type="textarea"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- รายงานผลการพัฒนา -->
|
||||
<div class="col-12">
|
||||
<q-input
|
||||
readonly
|
||||
outlined
|
||||
v-model="formData.developmentReport"
|
||||
label="รายงานผลการพัฒนา"
|
||||
dense
|
||||
type="textarea"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</q-card>
|
||||
</q-card-section>
|
||||
</q-form>
|
||||
</q-card>
|
||||
</q-dialog>
|
||||
|
|
|
|||
|
|
@ -377,6 +377,6 @@ watch(
|
|||
<DialogCreateCommand
|
||||
v-model:modal="modalCommand"
|
||||
:command-type-code="commandType"
|
||||
:persons-id="selected.map((r) => r.id)"
|
||||
:persons="selected"
|
||||
/>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -406,6 +406,6 @@ watch(
|
|||
<DialogCreateCommand
|
||||
v-model:modal="modalCommand"
|
||||
:command-type-code="commandType"
|
||||
:persons-id="selected.map((r) => r.id)"
|
||||
:persons="selected"
|
||||
/>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -333,6 +333,6 @@ watch(
|
|||
<DialogCreateCommand
|
||||
v-model:modal="modalCommand"
|
||||
:command-type-code="'C-PM-15'"
|
||||
:persons-id="selected.map((r) => r.id)"
|
||||
:persons="selected"
|
||||
/>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -325,6 +325,6 @@ watch(
|
|||
<DialogCreateCommand
|
||||
v-model:modal="modalCommand"
|
||||
:command-type-code="commandType"
|
||||
:persons-id="selected.map((r) => r.id)"
|
||||
:persons="selected"
|
||||
/>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -211,6 +211,8 @@ watch(
|
|||
if (modal.value === true) {
|
||||
rows.value = props.rows ? props.rows : [];
|
||||
selected.value = [];
|
||||
commandType.value = "";
|
||||
filter.value = "";
|
||||
const status = DataStore.DataMainOrig.find((x: any) => x.id == examId);
|
||||
if (status?.examTypeName !== "") {
|
||||
const data = await storeCommand.getCommandTypes();
|
||||
|
|
@ -464,6 +466,6 @@ watch(
|
|||
<DialogCreateCommand
|
||||
v-model:modal="modalCommand"
|
||||
:command-type-code="commandType"
|
||||
:persons-id="selected.map((r) => r.id)"
|
||||
:persons="selected"
|
||||
/>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -351,7 +351,6 @@ async function getTable() {
|
|||
posmasterId: data.posmasterId,
|
||||
statusNameCheck: convertContainStatus(data.statusId),
|
||||
deferment: data.isRelief,
|
||||
|
||||
statusName:
|
||||
data.isRelief === true &&
|
||||
data.statusId == "PREPARE-CONTAIN" &&
|
||||
|
|
@ -373,6 +372,11 @@ async function getTable() {
|
|||
data.nodeShortName +
|
||||
"" +
|
||||
data.posMasterNo,
|
||||
prefix: data.prefix,
|
||||
firstName: data.firstname,
|
||||
lastName: data.lastname,
|
||||
citizenId: data.citizenId,
|
||||
id: data.id,
|
||||
};
|
||||
rowsAll.value.push(rowData);
|
||||
});
|
||||
|
|
|
|||
|
|
@ -310,6 +310,6 @@ watchEffect(() => {
|
|||
<DialogCreateCommand
|
||||
v-model:modal="modalCommand"
|
||||
:command-type-code="'C-PM-14'"
|
||||
:persons-id="selected.map((r) => r.id)"
|
||||
:persons="selected"
|
||||
/>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -292,6 +292,6 @@ watch(
|
|||
<DialogCreateCommand
|
||||
v-model:modal="modalCommand"
|
||||
:command-type-code="'C-PM-16'"
|
||||
:persons-id="selected.map((r) => r.id)"
|
||||
:persons="selected"
|
||||
/>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -255,6 +255,6 @@ watch(
|
|||
<DialogCreateCommand
|
||||
v-model:modal="modalCommand"
|
||||
command-type-code="C-PM-13"
|
||||
:persons-id="selected.map((r) => r.id)"
|
||||
:persons="selected"
|
||||
/>
|
||||
</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 {
|
||||
|
|
|
|||
|
|
@ -263,6 +263,6 @@ watchEffect(() => {
|
|||
<DialogCreateCommand
|
||||
v-model:modal="modalCommand"
|
||||
:command-type-code="'C-PM-18'"
|
||||
:persons-id="selected.map((r) => r.id)"
|
||||
:persons="selected"
|
||||
/>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -288,6 +288,6 @@ watchEffect(() => {
|
|||
<DialogCreateCommand
|
||||
v-model:modal="modalCommand"
|
||||
:command-type-code="'C-PM-17'"
|
||||
:persons-id="selected.map((r) => r.id)"
|
||||
:persons="selected"
|
||||
/>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -305,6 +305,6 @@ watch(
|
|||
<DialogCreateCommand
|
||||
v-model:modal="modalCommand"
|
||||
:command-type-code="commandType"
|
||||
:persons-id="selected.map((r:any) => r.id)"
|
||||
:persons="selected"
|
||||
/>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -283,6 +283,6 @@ watch(
|
|||
<DialogCreateCommand
|
||||
v-model:modal="modalCommand"
|
||||
:command-type-code="commandType"
|
||||
:persons-id="selected.map((r:dataType) => r.id)"
|
||||
:persons="selected"
|
||||
/>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -208,7 +208,7 @@ watch(
|
|||
<DialogCreateCommand
|
||||
v-model:modal="modalCommand"
|
||||
:command-type-code="'C-PM-32'"
|
||||
:persons-id="selected.map((r:any) => r.id)"
|
||||
:persons="selected"
|
||||
/>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<script setup lang="ts">
|
||||
import { ref, onMounted } from "vue";
|
||||
import { ref, onMounted, computed } from "vue";
|
||||
import { useRoute } from "vue-router";
|
||||
import { useQuasar } from "quasar";
|
||||
|
||||
|
|
@ -18,7 +18,8 @@ const listPerson = defineModel<ResRecord[]>("listPerson", { required: true });
|
|||
//ข้อมุล Table
|
||||
const keyword = ref<string>("");
|
||||
const rows = ref<ResRecord[]>([]);
|
||||
const columns = ref<QTableProps["columns"]>([
|
||||
// baseColumns
|
||||
const baseColumns = ref<QTableProps["columns"]>([
|
||||
{
|
||||
name: "isDone",
|
||||
align: "left",
|
||||
|
|
@ -185,6 +186,17 @@ const columns = ref<QTableProps["columns"]>([
|
|||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
]);
|
||||
const columns = computed(() => {
|
||||
if (!isProfile.value) {
|
||||
if (baseColumns.value) {
|
||||
return baseColumns.value.filter(
|
||||
(column) => column.name !== "isDone" && column.name !== "isDoneIDP"
|
||||
);
|
||||
}
|
||||
}
|
||||
return baseColumns.value;
|
||||
});
|
||||
|
||||
const visibleColumns = ref<string[]>([
|
||||
"isDone",
|
||||
"isDoneIDP",
|
||||
|
|
@ -195,8 +207,8 @@ const visibleColumns = ref<string[]>([
|
|||
"posTypeName",
|
||||
"posLevelName",
|
||||
"posExecutive",
|
||||
"startDate",
|
||||
"endDate",
|
||||
"dateStart",
|
||||
"dateEnd",
|
||||
"trainingDays",
|
||||
"org",
|
||||
"commandNumber",
|
||||
|
|
|
|||
|
|
@ -31,7 +31,7 @@ const modal = defineModel<boolean>("modal", { required: true });
|
|||
|
||||
const props = defineProps({
|
||||
commandTypeCode: String, // ไอดีประเภทคำสั่ง
|
||||
personsId: Array, // ไอดีคนที่เลือกออกคำสั่งส่งมาเป็น array
|
||||
persons: Array, // ไอดีคนที่เลือกออกคำสั่งส่งมาเป็น array
|
||||
});
|
||||
|
||||
const commandOp = ref<ListCommand[]>([]); // ประเภทคำสั่ง
|
||||
|
|
@ -131,16 +131,22 @@ const columns = ref<QTableProps["columns"]>([
|
|||
*/
|
||||
function createCommand(isRedirect: boolean) {
|
||||
dialogConfirm($q, async () => {
|
||||
const data = props.personsId;
|
||||
const data = props?.persons?.map((e: any) => ({
|
||||
refId: e.id,
|
||||
prefix: e.prefix,
|
||||
firstName: e.firstName,
|
||||
lastName: e.lastName,
|
||||
citizenId: e.citizenId,
|
||||
}));
|
||||
const body = {
|
||||
commandYear: commandYear.value,
|
||||
commandNo: commandNo.value,
|
||||
commandTypeId: commandType.value,
|
||||
// persons: data,
|
||||
persons: data,
|
||||
};
|
||||
showLoader();
|
||||
await http
|
||||
.post(config.API.command, body)
|
||||
.post(config.API.command + `/person`, body)
|
||||
.then(async (res) => {
|
||||
const id = await res.data.result;
|
||||
if (isRedirect) {
|
||||
|
|
@ -164,32 +170,36 @@ function createCommand(isRedirect: boolean) {
|
|||
*/
|
||||
function addPersonalToCommand(isRedirect: boolean) {
|
||||
dialogConfirm($q, async () => {
|
||||
const data = props.personsId;
|
||||
const data = props?.persons?.map((e: any) => ({
|
||||
refId: e.id,
|
||||
prefix: e.prefix,
|
||||
firstName: e.firstName,
|
||||
lastName: e.lastName,
|
||||
citizenId: e.citizenId,
|
||||
}));
|
||||
const body = {
|
||||
commandId: selected.value[0].id,
|
||||
persons: data,
|
||||
};
|
||||
console.log("🚀 ~ dialogConfirm ~ body:", body);
|
||||
// showLoader();
|
||||
// await http
|
||||
// .post(config.API.transferReport, body)
|
||||
// .then((res) => {
|
||||
// const id = res.data.result
|
||||
modal.value = false;
|
||||
if (isRedirect) {
|
||||
router.push("/command/edit/18477dcd-2f14-4e49-8fca-a446164e8b59");
|
||||
} else {
|
||||
modal.value = false;
|
||||
clearValue();
|
||||
}
|
||||
// router.push("/command/edit/" + id);
|
||||
// })
|
||||
// .catch((e) => {
|
||||
// messageError($q, e);
|
||||
// })
|
||||
// .finally(() => {
|
||||
// hideLoader();
|
||||
// });
|
||||
showLoader();
|
||||
await http
|
||||
.post(config.API.command + `/person`, body)
|
||||
.then(async (res) => {
|
||||
const id = await res.data.result;
|
||||
modal.value = false;
|
||||
if (isRedirect) {
|
||||
router.push(`/command/edit/${id}`);
|
||||
} else {
|
||||
modal.value = false;
|
||||
clearValue();
|
||||
}
|
||||
})
|
||||
.catch((e) => {
|
||||
messageError($q, e);
|
||||
})
|
||||
.finally(() => {
|
||||
hideLoader();
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
|
|
@ -201,18 +211,6 @@ function onSubmit(isRedirect: boolean) {
|
|||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* เปลี่ยน tab เเละ clear ค่า tab ก่อนหน้า
|
||||
* @param type แยกประเภท
|
||||
*/
|
||||
function changeTab(type: string) {
|
||||
clearValue();
|
||||
selectCreate.value = type;
|
||||
if (type == "DRAF") {
|
||||
getListCommandDraf();
|
||||
}
|
||||
}
|
||||
|
||||
/** ปิด popup */
|
||||
function closeModal() {
|
||||
modal.value = false;
|
||||
|
|
@ -276,7 +274,7 @@ watch(
|
|||
);
|
||||
|
||||
watch(modal, () => {
|
||||
if (modal.value && props.personsId?.length !== 0) {
|
||||
if (modal.value && props.persons?.length !== 0) {
|
||||
fetchCommandType();
|
||||
}
|
||||
});
|
||||
|
|
|
|||
|
|
@ -74,6 +74,7 @@ export const useStructureTree = defineStore("structureTree", () => {
|
|||
messageError($q, err);
|
||||
} finally {
|
||||
isLoad && hideLoader();
|
||||
console.log(123)
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -703,7 +703,28 @@ async function fetchPermissionsSys() {
|
|||
<div class="text-subtitle2 q-mt-md q-mb-xs text-center">
|
||||
{{ fullname }}
|
||||
</div>
|
||||
<div id="#logout">
|
||||
<div class="row q-col-gutter-sm q-pa-sm">
|
||||
<div class="col-6">
|
||||
<q-btn
|
||||
color="blue"
|
||||
label="เข้าสู่ระบบ Linkage Center"
|
||||
size="sm"
|
||||
v-close-popup
|
||||
@click="modalLoginLinkage = true"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<q-btn
|
||||
color="primary"
|
||||
label="ออกจากระบบ"
|
||||
v-close-popup
|
||||
@click="doLogout"
|
||||
class="full-width full-height"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- <div id="#logout">
|
||||
<q-btn
|
||||
color="blue"
|
||||
label="เข้าสู่ระบบ Linkage Center"
|
||||
|
|
@ -722,7 +743,7 @@ async function fetchPermissionsSys() {
|
|||
v-close-popup
|
||||
@click="doLogout"
|
||||
/>
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
|
||||
<!-- <div class="column col-12">
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue