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 */
|
/** ดึงข้อมูล active */
|
||||||
async function getTreeData() {
|
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;
|
isLoad.value = true;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -59,18 +59,9 @@ function onClose() {
|
||||||
<q-card-section>
|
<q-card-section>
|
||||||
<q-card flat bordered>
|
<q-card flat bordered>
|
||||||
<q-card-section>
|
<q-card-section>
|
||||||
<div
|
<div class="row">
|
||||||
class="row"
|
|
||||||
style="
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: flex-end;
|
|
||||||
"
|
|
||||||
>
|
|
||||||
<div class="text-red">
|
<div class="text-red">
|
||||||
*ต้องใช้บน Windows และต้องติดตั้ง Agent
|
*ต้องใช้บน Windows และต้องติดตั้ง Agent
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<a
|
<a
|
||||||
href="https://linkagemgmt.bora.dopa.go.th/app/LinkageManagement-v1.11.0.zip"
|
href="https://linkagemgmt.bora.dopa.go.th/app/LinkageManagement-v1.11.0.zip"
|
||||||
>ลิงก์ดาวน์โหลด Agent</a
|
>ลิงก์ดาวน์โหลด Agent</a
|
||||||
|
|
@ -82,6 +73,7 @@ function onClose() {
|
||||||
<!-- เสียบบัตรประชาชนเข้ากับเครื่องอ่าน -->
|
<!-- เสียบบัตรประชาชนเข้ากับเครื่องอ่าน -->
|
||||||
<q-timeline-entry
|
<q-timeline-entry
|
||||||
title="เสียบบัตรประชาชนเข้ากับเครื่องอ่าน"
|
title="เสียบบัตรประชาชนเข้ากับเครื่องอ่าน"
|
||||||
|
style="font-size: 12px"
|
||||||
:icon="
|
:icon="
|
||||||
step === 1
|
step === 1
|
||||||
? 'mdi-pencil'
|
? 'mdi-pencil'
|
||||||
|
|
@ -187,4 +179,9 @@ function onClose() {
|
||||||
</q-dialog>
|
</q-dialog>
|
||||||
</template>
|
</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>
|
<template>
|
||||||
<q-dialog v-model="modal" persistent>
|
<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">
|
<q-form greedy @submit.prevent @validation-success="onSubmit">
|
||||||
<DialogHeader tittle="ข้อมูลการพัฒนารายบุคคล" :close="closeDialog" />
|
<DialogHeader tittle="ข้อมูลการพัฒนารายบุคคล" :close="closeDialog" />
|
||||||
<q-separator />
|
<q-separator />
|
||||||
|
|
||||||
<q-card-section style="max-height: 84vh" class="scroll">
|
<!-- สถานะคำร้อง -->
|
||||||
<div class="row q-col-gutter-sm">
|
<q-card-section>
|
||||||
<div class="col-md-3 col-xs-12">
|
<q-card bordered class="col-12">
|
||||||
<div class="row q-col-gutter-sm">
|
<div class="col-12 text-weight-medium bg-grey-1 q-py-xs q-px-md">
|
||||||
<!-- สถานะ -->
|
สถานะคำร้อง
|
||||||
<div class="col-12">
|
</div>
|
||||||
<q-select
|
<q-separator />
|
||||||
:class="classInput(isReadOnly)"
|
<div class="row q-pa-md q-col-gutter-sm">
|
||||||
v-model="formData.status"
|
<!-- สถานะ -->
|
||||||
label="สถานะ"
|
<div class="col-4">
|
||||||
dense
|
<q-select
|
||||||
outlined
|
:class="classInput(isReadOnly)"
|
||||||
emit-value
|
v-model="formData.status"
|
||||||
map-options
|
label="สถานะ"
|
||||||
:options="statusOption"
|
dense
|
||||||
:rules="[(val:string) => !!val || `${'กรุณาเลือกสถานะ'}`]"
|
outlined
|
||||||
lazy-rules
|
emit-value
|
||||||
hide-bottom-space
|
map-options
|
||||||
use-input
|
:options="statusOption"
|
||||||
option-label="name"
|
:rules="[(val:string) => !!val || `${'กรุณาเลือกสถานะ'}`]"
|
||||||
option-value="id"
|
lazy-rules
|
||||||
@filter="(inputValue:string,
|
hide-bottom-space
|
||||||
|
use-input
|
||||||
|
option-label="name"
|
||||||
|
option-value="id"
|
||||||
|
@filter="(inputValue:string,
|
||||||
doneFn:Function) => filterOption(inputValue, doneFn
|
doneFn:Function) => filterOption(inputValue, doneFn
|
||||||
) "
|
) "
|
||||||
>
|
>
|
||||||
<template v-slot:no-option>
|
<template v-slot:no-option>
|
||||||
<q-item>
|
<q-item>
|
||||||
<q-item-section class="text-grey">
|
<q-item-section class="text-grey">
|
||||||
ไม่มีข้อมูล
|
ไม่มีข้อมูล
|
||||||
</q-item-section>
|
</q-item-section>
|
||||||
</q-item>
|
</q-item>
|
||||||
</template>
|
</template>
|
||||||
</q-select>
|
</q-select>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- หมายเหตุ -->
|
<!-- หมายเหตุ -->
|
||||||
<div class="col-12">
|
<div class="col-8">
|
||||||
<q-input
|
<q-input
|
||||||
:class="classInput(isReadOnly)"
|
:class="classInput(isReadOnly)"
|
||||||
v-model="formData.reason"
|
v-model="formData.reason"
|
||||||
label="หมายเหตุ"
|
label="หมายเหตุ"
|
||||||
dense
|
dense
|
||||||
outlined
|
outlined
|
||||||
type="textarea"
|
type="textarea"
|
||||||
hide-bottom-space
|
hide-bottom-space
|
||||||
/>
|
/>
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="col-md-9 col-xs-12">
|
<q-card-actions align="right">
|
||||||
<div class="row q-col-gutter-sm">
|
<q-btn label="บันทึก" color="secondary" type="submit"
|
||||||
<div class="col-12">
|
><q-tooltip>บันทึก</q-tooltip></q-btn
|
||||||
<q-input
|
>
|
||||||
readonly
|
</q-card-actions>
|
||||||
outlined
|
</q-card>
|
||||||
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-section>
|
</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">
|
<div class="col-12">
|
||||||
<q-btn label="บันทึก" color="secondary" type="submit"
|
<div class="q-mb-sm text-weight-medium text-body2">
|
||||||
><q-tooltip>บันทึก</q-tooltip></q-btn
|
วิธีการพัฒนา
|
||||||
>
|
</div>
|
||||||
</q-card-actions>
|
<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-form>
|
||||||
</q-card>
|
</q-card>
|
||||||
</q-dialog>
|
</q-dialog>
|
||||||
|
|
|
||||||
|
|
@ -377,6 +377,6 @@ watch(
|
||||||
<DialogCreateCommand
|
<DialogCreateCommand
|
||||||
v-model:modal="modalCommand"
|
v-model:modal="modalCommand"
|
||||||
:command-type-code="commandType"
|
:command-type-code="commandType"
|
||||||
:persons-id="selected.map((r) => r.id)"
|
:persons="selected"
|
||||||
/>
|
/>
|
||||||
</template>
|
</template>
|
||||||
|
|
|
||||||
|
|
@ -406,6 +406,6 @@ watch(
|
||||||
<DialogCreateCommand
|
<DialogCreateCommand
|
||||||
v-model:modal="modalCommand"
|
v-model:modal="modalCommand"
|
||||||
:command-type-code="commandType"
|
:command-type-code="commandType"
|
||||||
:persons-id="selected.map((r) => r.id)"
|
:persons="selected"
|
||||||
/>
|
/>
|
||||||
</template>
|
</template>
|
||||||
|
|
|
||||||
|
|
@ -333,6 +333,6 @@ watch(
|
||||||
<DialogCreateCommand
|
<DialogCreateCommand
|
||||||
v-model:modal="modalCommand"
|
v-model:modal="modalCommand"
|
||||||
:command-type-code="'C-PM-15'"
|
:command-type-code="'C-PM-15'"
|
||||||
:persons-id="selected.map((r) => r.id)"
|
:persons="selected"
|
||||||
/>
|
/>
|
||||||
</template>
|
</template>
|
||||||
|
|
|
||||||
|
|
@ -325,6 +325,6 @@ watch(
|
||||||
<DialogCreateCommand
|
<DialogCreateCommand
|
||||||
v-model:modal="modalCommand"
|
v-model:modal="modalCommand"
|
||||||
:command-type-code="commandType"
|
:command-type-code="commandType"
|
||||||
:persons-id="selected.map((r) => r.id)"
|
:persons="selected"
|
||||||
/>
|
/>
|
||||||
</template>
|
</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 ExamResult from "@/modules/05_placement/components/PersonalDetail/Information/ExamResult.vue";
|
||||||
import Qualification from "@/modules/05_placement/components/PersonalDetail/Information/Qualification.vue";
|
import Qualification from "@/modules/05_placement/components/PersonalDetail/Information/Qualification.vue";
|
||||||
import Document from "@/modules/05_placement/components/PersonalDetail/Information/Document.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 $q = useQuasar();
|
||||||
const route = useRoute();
|
const route = useRoute();
|
||||||
|
|
@ -45,6 +46,7 @@ const storePersonal = usePersonalDataStore();
|
||||||
const { showLoader, hideLoader, messageError } = mixin;
|
const { showLoader, hideLoader, messageError } = mixin;
|
||||||
const { changeTab } = store;
|
const { changeTab } = store;
|
||||||
|
|
||||||
|
const modalCheck = ref<boolean>(false);
|
||||||
const examId = ref<string>(
|
const examId = ref<string>(
|
||||||
route.params.personalId ? route.params.personalId.toString() : ""
|
route.params.personalId ? route.params.personalId.toString() : ""
|
||||||
);
|
);
|
||||||
|
|
@ -485,6 +487,11 @@ function guidCheck(id: string) {
|
||||||
return id;
|
return id;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/** เปืด popup ตรวจสอบข้อมูลกับกรมการปกครอง */
|
||||||
|
function checkInformation() {
|
||||||
|
modalCheck.value = true;
|
||||||
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* ทำงานเมื่อมีการเรียกใช้ Components
|
* ทำงานเมื่อมีการเรียกใช้ Components
|
||||||
*/
|
*/
|
||||||
|
|
@ -510,6 +517,14 @@ onMounted(async () => {
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="q-pb-lg">
|
<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">
|
<q-card class="row q-pb-lg" v-if="storePersonal.loading">
|
||||||
<div id="information" name="1" class="col-12 q-pa-sm">
|
<div id="information" name="1" class="col-12 q-pa-sm">
|
||||||
<Informationvue
|
<Informationvue
|
||||||
|
|
@ -585,6 +600,14 @@ onMounted(async () => {
|
||||||
</div>
|
</div>
|
||||||
</q-card>
|
</q-card>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<DialogCheckInformation
|
||||||
|
v-model:modal="modalCheck"
|
||||||
|
:address-data="AddressData"
|
||||||
|
:family-data="FamilyData"
|
||||||
|
:Ops="Ops"
|
||||||
|
:Ops-filter="OpsFilter"
|
||||||
|
/>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<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) {
|
if (modal.value === true) {
|
||||||
rows.value = props.rows ? props.rows : [];
|
rows.value = props.rows ? props.rows : [];
|
||||||
selected.value = [];
|
selected.value = [];
|
||||||
|
commandType.value = "";
|
||||||
|
filter.value = "";
|
||||||
const status = DataStore.DataMainOrig.find((x: any) => x.id == examId);
|
const status = DataStore.DataMainOrig.find((x: any) => x.id == examId);
|
||||||
if (status?.examTypeName !== "") {
|
if (status?.examTypeName !== "") {
|
||||||
const data = await storeCommand.getCommandTypes();
|
const data = await storeCommand.getCommandTypes();
|
||||||
|
|
@ -464,6 +466,6 @@ watch(
|
||||||
<DialogCreateCommand
|
<DialogCreateCommand
|
||||||
v-model:modal="modalCommand"
|
v-model:modal="modalCommand"
|
||||||
:command-type-code="commandType"
|
:command-type-code="commandType"
|
||||||
:persons-id="selected.map((r) => r.id)"
|
:persons="selected"
|
||||||
/>
|
/>
|
||||||
</template>
|
</template>
|
||||||
|
|
|
||||||
|
|
@ -351,7 +351,6 @@ async function getTable() {
|
||||||
posmasterId: data.posmasterId,
|
posmasterId: data.posmasterId,
|
||||||
statusNameCheck: convertContainStatus(data.statusId),
|
statusNameCheck: convertContainStatus(data.statusId),
|
||||||
deferment: data.isRelief,
|
deferment: data.isRelief,
|
||||||
|
|
||||||
statusName:
|
statusName:
|
||||||
data.isRelief === true &&
|
data.isRelief === true &&
|
||||||
data.statusId == "PREPARE-CONTAIN" &&
|
data.statusId == "PREPARE-CONTAIN" &&
|
||||||
|
|
@ -373,6 +372,11 @@ async function getTable() {
|
||||||
data.nodeShortName +
|
data.nodeShortName +
|
||||||
"" +
|
"" +
|
||||||
data.posMasterNo,
|
data.posMasterNo,
|
||||||
|
prefix: data.prefix,
|
||||||
|
firstName: data.firstname,
|
||||||
|
lastName: data.lastname,
|
||||||
|
citizenId: data.citizenId,
|
||||||
|
id: data.id,
|
||||||
};
|
};
|
||||||
rowsAll.value.push(rowData);
|
rowsAll.value.push(rowData);
|
||||||
});
|
});
|
||||||
|
|
|
||||||
|
|
@ -310,6 +310,6 @@ watchEffect(() => {
|
||||||
<DialogCreateCommand
|
<DialogCreateCommand
|
||||||
v-model:modal="modalCommand"
|
v-model:modal="modalCommand"
|
||||||
:command-type-code="'C-PM-14'"
|
:command-type-code="'C-PM-14'"
|
||||||
:persons-id="selected.map((r) => r.id)"
|
:persons="selected"
|
||||||
/>
|
/>
|
||||||
</template>
|
</template>
|
||||||
|
|
|
||||||
|
|
@ -292,6 +292,6 @@ watch(
|
||||||
<DialogCreateCommand
|
<DialogCreateCommand
|
||||||
v-model:modal="modalCommand"
|
v-model:modal="modalCommand"
|
||||||
:command-type-code="'C-PM-16'"
|
:command-type-code="'C-PM-16'"
|
||||||
:persons-id="selected.map((r) => r.id)"
|
:persons="selected"
|
||||||
/>
|
/>
|
||||||
</template>
|
</template>
|
||||||
|
|
|
||||||
|
|
@ -255,6 +255,6 @@ watch(
|
||||||
<DialogCreateCommand
|
<DialogCreateCommand
|
||||||
v-model:modal="modalCommand"
|
v-model:modal="modalCommand"
|
||||||
command-type-code="C-PM-13"
|
command-type-code="C-PM-13"
|
||||||
:persons-id="selected.map((r) => r.id)"
|
:persons="selected"
|
||||||
/>
|
/>
|
||||||
</template>
|
</template>
|
||||||
|
|
|
||||||
|
|
@ -147,10 +147,10 @@ interface Address {
|
||||||
}
|
}
|
||||||
|
|
||||||
interface AddressData {
|
interface AddressData {
|
||||||
subDistrictId: any;
|
subDistrictId: string;
|
||||||
zipCode: string;
|
zipCode: string;
|
||||||
districtId: any;
|
districtId: string;
|
||||||
provinceId: any;
|
provinceId: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
interface Certificate {
|
interface Certificate {
|
||||||
|
|
|
||||||
|
|
@ -263,6 +263,6 @@ watchEffect(() => {
|
||||||
<DialogCreateCommand
|
<DialogCreateCommand
|
||||||
v-model:modal="modalCommand"
|
v-model:modal="modalCommand"
|
||||||
:command-type-code="'C-PM-18'"
|
:command-type-code="'C-PM-18'"
|
||||||
:persons-id="selected.map((r) => r.id)"
|
:persons="selected"
|
||||||
/>
|
/>
|
||||||
</template>
|
</template>
|
||||||
|
|
|
||||||
|
|
@ -288,6 +288,6 @@ watchEffect(() => {
|
||||||
<DialogCreateCommand
|
<DialogCreateCommand
|
||||||
v-model:modal="modalCommand"
|
v-model:modal="modalCommand"
|
||||||
:command-type-code="'C-PM-17'"
|
:command-type-code="'C-PM-17'"
|
||||||
:persons-id="selected.map((r) => r.id)"
|
:persons="selected"
|
||||||
/>
|
/>
|
||||||
</template>
|
</template>
|
||||||
|
|
|
||||||
|
|
@ -305,6 +305,6 @@ watch(
|
||||||
<DialogCreateCommand
|
<DialogCreateCommand
|
||||||
v-model:modal="modalCommand"
|
v-model:modal="modalCommand"
|
||||||
:command-type-code="commandType"
|
:command-type-code="commandType"
|
||||||
:persons-id="selected.map((r:any) => r.id)"
|
:persons="selected"
|
||||||
/>
|
/>
|
||||||
</template>
|
</template>
|
||||||
|
|
|
||||||
|
|
@ -283,6 +283,6 @@ watch(
|
||||||
<DialogCreateCommand
|
<DialogCreateCommand
|
||||||
v-model:modal="modalCommand"
|
v-model:modal="modalCommand"
|
||||||
:command-type-code="commandType"
|
:command-type-code="commandType"
|
||||||
:persons-id="selected.map((r:dataType) => r.id)"
|
:persons="selected"
|
||||||
/>
|
/>
|
||||||
</template>
|
</template>
|
||||||
|
|
|
||||||
|
|
@ -208,7 +208,7 @@ watch(
|
||||||
<DialogCreateCommand
|
<DialogCreateCommand
|
||||||
v-model:modal="modalCommand"
|
v-model:modal="modalCommand"
|
||||||
:command-type-code="'C-PM-32'"
|
:command-type-code="'C-PM-32'"
|
||||||
:persons-id="selected.map((r:any) => r.id)"
|
:persons="selected"
|
||||||
/>
|
/>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { ref, onMounted } from "vue";
|
import { ref, onMounted, computed } from "vue";
|
||||||
import { useRoute } from "vue-router";
|
import { useRoute } from "vue-router";
|
||||||
import { useQuasar } from "quasar";
|
import { useQuasar } from "quasar";
|
||||||
|
|
||||||
|
|
@ -18,7 +18,8 @@ const listPerson = defineModel<ResRecord[]>("listPerson", { required: true });
|
||||||
//ข้อมุล Table
|
//ข้อมุล Table
|
||||||
const keyword = ref<string>("");
|
const keyword = ref<string>("");
|
||||||
const rows = ref<ResRecord[]>([]);
|
const rows = ref<ResRecord[]>([]);
|
||||||
const columns = ref<QTableProps["columns"]>([
|
// baseColumns
|
||||||
|
const baseColumns = ref<QTableProps["columns"]>([
|
||||||
{
|
{
|
||||||
name: "isDone",
|
name: "isDone",
|
||||||
align: "left",
|
align: "left",
|
||||||
|
|
@ -185,6 +186,17 @@ const columns = ref<QTableProps["columns"]>([
|
||||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
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[]>([
|
const visibleColumns = ref<string[]>([
|
||||||
"isDone",
|
"isDone",
|
||||||
"isDoneIDP",
|
"isDoneIDP",
|
||||||
|
|
@ -195,8 +207,8 @@ const visibleColumns = ref<string[]>([
|
||||||
"posTypeName",
|
"posTypeName",
|
||||||
"posLevelName",
|
"posLevelName",
|
||||||
"posExecutive",
|
"posExecutive",
|
||||||
"startDate",
|
"dateStart",
|
||||||
"endDate",
|
"dateEnd",
|
||||||
"trainingDays",
|
"trainingDays",
|
||||||
"org",
|
"org",
|
||||||
"commandNumber",
|
"commandNumber",
|
||||||
|
|
|
||||||
|
|
@ -31,7 +31,7 @@ const modal = defineModel<boolean>("modal", { required: true });
|
||||||
|
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
commandTypeCode: String, // ไอดีประเภทคำสั่ง
|
commandTypeCode: String, // ไอดีประเภทคำสั่ง
|
||||||
personsId: Array, // ไอดีคนที่เลือกออกคำสั่งส่งมาเป็น array
|
persons: Array, // ไอดีคนที่เลือกออกคำสั่งส่งมาเป็น array
|
||||||
});
|
});
|
||||||
|
|
||||||
const commandOp = ref<ListCommand[]>([]); // ประเภทคำสั่ง
|
const commandOp = ref<ListCommand[]>([]); // ประเภทคำสั่ง
|
||||||
|
|
@ -131,16 +131,22 @@ const columns = ref<QTableProps["columns"]>([
|
||||||
*/
|
*/
|
||||||
function createCommand(isRedirect: boolean) {
|
function createCommand(isRedirect: boolean) {
|
||||||
dialogConfirm($q, async () => {
|
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 = {
|
const body = {
|
||||||
commandYear: commandYear.value,
|
commandYear: commandYear.value,
|
||||||
commandNo: commandNo.value,
|
commandNo: commandNo.value,
|
||||||
commandTypeId: commandType.value,
|
commandTypeId: commandType.value,
|
||||||
// persons: data,
|
persons: data,
|
||||||
};
|
};
|
||||||
showLoader();
|
showLoader();
|
||||||
await http
|
await http
|
||||||
.post(config.API.command, body)
|
.post(config.API.command + `/person`, body)
|
||||||
.then(async (res) => {
|
.then(async (res) => {
|
||||||
const id = await res.data.result;
|
const id = await res.data.result;
|
||||||
if (isRedirect) {
|
if (isRedirect) {
|
||||||
|
|
@ -164,32 +170,36 @@ function createCommand(isRedirect: boolean) {
|
||||||
*/
|
*/
|
||||||
function addPersonalToCommand(isRedirect: boolean) {
|
function addPersonalToCommand(isRedirect: boolean) {
|
||||||
dialogConfirm($q, async () => {
|
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 = {
|
const body = {
|
||||||
commandId: selected.value[0].id,
|
commandId: selected.value[0].id,
|
||||||
persons: data,
|
persons: data,
|
||||||
};
|
};
|
||||||
console.log("🚀 ~ dialogConfirm ~ body:", body);
|
showLoader();
|
||||||
// showLoader();
|
await http
|
||||||
// await http
|
.post(config.API.command + `/person`, body)
|
||||||
// .post(config.API.transferReport, body)
|
.then(async (res) => {
|
||||||
// .then((res) => {
|
const id = await res.data.result;
|
||||||
// const id = res.data.result
|
modal.value = false;
|
||||||
modal.value = false;
|
if (isRedirect) {
|
||||||
if (isRedirect) {
|
router.push(`/command/edit/${id}`);
|
||||||
router.push("/command/edit/18477dcd-2f14-4e49-8fca-a446164e8b59");
|
} else {
|
||||||
} else {
|
modal.value = false;
|
||||||
modal.value = false;
|
clearValue();
|
||||||
clearValue();
|
}
|
||||||
}
|
})
|
||||||
// router.push("/command/edit/" + id);
|
.catch((e) => {
|
||||||
// })
|
messageError($q, e);
|
||||||
// .catch((e) => {
|
})
|
||||||
// messageError($q, e);
|
.finally(() => {
|
||||||
// })
|
hideLoader();
|
||||||
// .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 */
|
/** ปิด popup */
|
||||||
function closeModal() {
|
function closeModal() {
|
||||||
modal.value = false;
|
modal.value = false;
|
||||||
|
|
@ -276,7 +274,7 @@ watch(
|
||||||
);
|
);
|
||||||
|
|
||||||
watch(modal, () => {
|
watch(modal, () => {
|
||||||
if (modal.value && props.personsId?.length !== 0) {
|
if (modal.value && props.persons?.length !== 0) {
|
||||||
fetchCommandType();
|
fetchCommandType();
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
|
||||||
|
|
@ -74,6 +74,7 @@ export const useStructureTree = defineStore("structureTree", () => {
|
||||||
messageError($q, err);
|
messageError($q, err);
|
||||||
} finally {
|
} finally {
|
||||||
isLoad && hideLoader();
|
isLoad && hideLoader();
|
||||||
|
console.log(123)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -703,7 +703,28 @@ async function fetchPermissionsSys() {
|
||||||
<div class="text-subtitle2 q-mt-md q-mb-xs text-center">
|
<div class="text-subtitle2 q-mt-md q-mb-xs text-center">
|
||||||
{{ fullname }}
|
{{ fullname }}
|
||||||
</div>
|
</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
|
<q-btn
|
||||||
color="blue"
|
color="blue"
|
||||||
label="เข้าสู่ระบบ Linkage Center"
|
label="เข้าสู่ระบบ Linkage Center"
|
||||||
|
|
@ -722,7 +743,7 @@ async function fetchPermissionsSys() {
|
||||||
v-close-popup
|
v-close-popup
|
||||||
@click="doLogout"
|
@click="doLogout"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div> -->
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- <div class="column col-12">
|
<!-- <div class="column col-12">
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue