1873 lines
60 KiB
Vue
1873 lines
60 KiB
Vue
<template>
|
|
<q-card flat bordered class="col-12 q-px-lg q-py-md q-mt-md text-dark">
|
|
<HeaderTop
|
|
v-model:edit="edit"
|
|
header="ข้อมูลครอบครัว"
|
|
icon="mdi-account-group"
|
|
:save="saveData"
|
|
:history="!statusAdd()"
|
|
:changeBtn="changeBtn"
|
|
:disable="statusEdit"
|
|
:cancel="refreshData"
|
|
:historyClick="historyData"
|
|
:addEmployee="statusAdd()"
|
|
/>
|
|
<q-form ref="myform" class="col-12">
|
|
<div class="row col-12 q-col-gutter-x-xs q-col-gutter-y-xs">
|
|
<div class="col-12 row q-pb-sm q-pt-md">
|
|
<div class="col-xs-2 col-sm-1 text-weight-bold">• บิดา</div>
|
|
<div class="q-gutter-sm">
|
|
<q-radio
|
|
v-model="familyData.liveM"
|
|
checked-icon="task_alt"
|
|
unchecked-icon="panorama_fish_eye"
|
|
val="1"
|
|
label="มีชีวิต"
|
|
dense
|
|
color="blue"
|
|
:disable="!edit"
|
|
/>
|
|
<q-radio
|
|
v-model="familyData.liveM"
|
|
checked-icon="task_alt"
|
|
unchecked-icon="panorama_fish_eye"
|
|
val="0"
|
|
color="red"
|
|
label="เสียชีวิต"
|
|
dense
|
|
:disable="!edit"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div class="col-xs-6 col-sm-2 col-md-2">
|
|
<q-input
|
|
:class="getClass(edit)"
|
|
hide-bottom-space
|
|
:outlined="edit"
|
|
dense
|
|
lazy-rules
|
|
:readonly="!edit"
|
|
:borderless="!edit"
|
|
v-model="familyData.citizenIdM"
|
|
:label="`${'เลขที่บัตรประชาชน'}`"
|
|
maxlength="13"
|
|
mask="#############"
|
|
/>
|
|
</div>
|
|
<div class="col-xs-12 col-sm-2 col-md-2">
|
|
<selector
|
|
:hide-dropdown-icon="!edit"
|
|
hide-bottom-space
|
|
:class="getClass(edit)"
|
|
:readonly="!edit"
|
|
:borderless="!edit"
|
|
:rules="[(val:string) => !!val || `${'กรุณาเลือก คำนำหน้าชื่อ'}`]"
|
|
:outlined="edit"
|
|
dense
|
|
lazy-rules
|
|
v-model="familyData.prefixIdM"
|
|
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="getClass(edit)"
|
|
hide-bottom-space
|
|
:outlined="edit"
|
|
dense
|
|
lazy-rules
|
|
:readonly="!edit"
|
|
:borderless="!edit"
|
|
v-model="familyData.firstnameM"
|
|
:rules="[(val:string) => !!val || `${'กรุณากรอก ชื่อ'}`]"
|
|
:label="`${'ชื่อ'}`"
|
|
/>
|
|
</div>
|
|
<div class="col-xs-6 col-sm-3 col-md-3">
|
|
<q-input
|
|
:class="getClass(edit)"
|
|
hide-bottom-space
|
|
:outlined="edit"
|
|
dense
|
|
lazy-rules
|
|
:readonly="!edit"
|
|
:borderless="!edit"
|
|
v-model="familyData.lastnameM"
|
|
:rules="[(val:string) => !!val || `${'กรุณากรอก นามสกุล'}`]"
|
|
:label="`${'นามสกุล'}`"
|
|
/>
|
|
</div>
|
|
<div class="col-xs-12 col-sm-2 col-md-2">
|
|
<q-input
|
|
:class="getClass(edit)"
|
|
hide-bottom-space
|
|
:outlined="edit"
|
|
dense
|
|
lazy-rules
|
|
:readonly="!edit"
|
|
:borderless="!edit"
|
|
v-model="familyData.occupationM"
|
|
:label="`${'อาชีพ'}`"
|
|
/>
|
|
</div>
|
|
|
|
<div class="col-12 q-pt-md q-pb-sm"><q-separator /></div>
|
|
<div class="row col-12 q-py-sm">
|
|
<div class="col-xs-2 col-sm-1 text-weight-bold">• มารดา</div>
|
|
<div class="q-gutter-sm">
|
|
<q-radio
|
|
v-model="familyData.liveF"
|
|
checked-icon="task_alt"
|
|
unchecked-icon="panorama_fish_eye"
|
|
val="1"
|
|
label="มีชีวิต"
|
|
color="blue"
|
|
dense
|
|
:disable="!edit"
|
|
/>
|
|
<q-radio
|
|
v-model="familyData.liveF"
|
|
checked-icon="task_alt"
|
|
unchecked-icon="panorama_fish_eye"
|
|
val="0"
|
|
label="เสียชีวิต"
|
|
color="red"
|
|
dense
|
|
:disable="!edit"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div class="col-xs-6 col-sm-2 col-md-2">
|
|
<q-input
|
|
:class="getClass(edit)"
|
|
hide-bottom-space
|
|
:outlined="edit"
|
|
dense
|
|
lazy-rules
|
|
:readonly="!edit"
|
|
:borderless="!edit"
|
|
v-model="familyData.citizenIdF"
|
|
:label="`${'เลขที่บัตรประชาชน'}`"
|
|
maxlength="13"
|
|
mask="#############"
|
|
/>
|
|
</div>
|
|
<div class="col-xs-12 col-sm-2 col-md-2">
|
|
<selector
|
|
:hide-dropdown-icon="!edit"
|
|
hide-bottom-space
|
|
:class="getClass(edit)"
|
|
:readonly="!edit"
|
|
:borderless="!edit"
|
|
:rules="[(val:string) => !!val || `${'กรุณาเลือก คำนำหน้าชื่อ'}`]"
|
|
:outlined="edit"
|
|
dense
|
|
lazy-rules
|
|
v-model="familyData.prefixIdF"
|
|
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="getClass(edit)"
|
|
hide-bottom-space
|
|
:outlined="edit"
|
|
dense
|
|
lazy-rules
|
|
:readonly="!edit"
|
|
:borderless="!edit"
|
|
v-model="familyData.firstnameF"
|
|
:rules="[(val:string) => !!val || `${'กรุณากรอก ชื่อ'}`]"
|
|
:label="`${'ชื่อ'}`"
|
|
/>
|
|
</div>
|
|
<div class="col-xs-6 col-sm-3 col-md-3">
|
|
<q-input
|
|
:class="getClass(edit)"
|
|
hide-bottom-space
|
|
:outlined="edit"
|
|
dense
|
|
lazy-rules
|
|
:readonly="!edit"
|
|
:borderless="!edit"
|
|
v-model="familyData.lastnameF"
|
|
:rules="[(val:string) => !!val || `${'กรุณากรอก นามสกุล'}`]"
|
|
:label="`${'นามสกุล'}`"
|
|
/>
|
|
</div>
|
|
<div class="col-xs-12 col-sm-2 col-md-2">
|
|
<q-input
|
|
:class="getClass(edit)"
|
|
hide-bottom-space
|
|
:outlined="edit"
|
|
dense
|
|
lazy-rules
|
|
:readonly="!edit"
|
|
:borderless="!edit"
|
|
v-model="familyData.occupationF"
|
|
:label="`${'อาชีพ'}`"
|
|
/>
|
|
</div>
|
|
<div class="col-12 q-pt-md q-pb-sm"><q-separator /></div>
|
|
|
|
<div class="row col-12 q-py-sm">
|
|
<div class="col-xs-2 col-sm-1 text-weight-bold">• คู่สมรส</div>
|
|
<div class="q-gutter-sm">
|
|
<q-radio
|
|
v-model="familyData.same"
|
|
checked-icon="task_alt"
|
|
unchecked-icon="panorama_fish_eye"
|
|
val="1"
|
|
label="มี"
|
|
dense
|
|
:disable="!edit"
|
|
@update:model-value="selectRadio"
|
|
/>
|
|
<q-radio
|
|
v-model="familyData.same"
|
|
checked-icon="task_alt"
|
|
unchecked-icon="panorama_fish_eye"
|
|
val="0"
|
|
label="ไม่มี"
|
|
color="grey-9"
|
|
dense
|
|
:disable="!edit"
|
|
@update:model-value="selectRadio"
|
|
/>
|
|
</div>
|
|
<q-separator
|
|
vertical
|
|
color="grey-4"
|
|
size="2px"
|
|
class="q-mx-md"
|
|
v-if="familyData.same == '1'"
|
|
/>
|
|
<div class="q-gutter-sm" v-if="familyData.same == '1'">
|
|
<q-radio
|
|
v-model="familyData.liveC"
|
|
checked-icon="task_alt"
|
|
unchecked-icon="panorama_fish_eye"
|
|
val="1"
|
|
label="มีชีวิต"
|
|
color="blue"
|
|
dense
|
|
:disable="!edit"
|
|
/>
|
|
<q-radio
|
|
v-model="familyData.liveC"
|
|
checked-icon="task_alt"
|
|
unchecked-icon="panorama_fish_eye"
|
|
val="0"
|
|
label="เสียชีวิต"
|
|
color="red"
|
|
dense
|
|
:disable="!edit"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div class="col-xs-6 col-sm-2 col-md-2" v-if="familyData.same == '1'">
|
|
<q-input
|
|
:class="getClass(edit)"
|
|
hide-bottom-space
|
|
:outlined="edit"
|
|
dense
|
|
lazy-rules
|
|
:readonly="!edit"
|
|
:borderless="!edit"
|
|
v-model="familyData.citizenIdC"
|
|
:label="`${'เลขที่บัตรประชาชน'}`"
|
|
maxlength="13"
|
|
mask="#############"
|
|
/>
|
|
</div>
|
|
|
|
<div class="col-xs-12 col-sm-2 col-md-2" v-if="familyData.same == '1'">
|
|
<selector
|
|
:hide-dropdown-icon="!edit"
|
|
hide-bottom-space
|
|
:class="getClass(edit)"
|
|
:readonly="!edit"
|
|
:borderless="!edit"
|
|
:rules="[(val:string) => !!val || `${'กรุณาเลือก คำนำหน้าชื่อ'}`]"
|
|
:outlined="edit"
|
|
dense
|
|
lazy-rules
|
|
v-model="familyData.prefixIdC"
|
|
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-2 col-md-2" v-if="familyData.same == '1'">
|
|
<q-input
|
|
:class="getClass(edit)"
|
|
hide-bottom-space
|
|
:outlined="edit"
|
|
dense
|
|
lazy-rules
|
|
:readonly="!edit"
|
|
:borderless="!edit"
|
|
v-model="familyData.firstnameC"
|
|
:rules="[(val:string) => !!val || `${'กรุณากรอก ชื่อ'}`]"
|
|
:label="`${'ชื่อ'}`"
|
|
/>
|
|
</div>
|
|
<div class="col-xs-6 col-sm-2 col-md-2" v-if="familyData.same == '1'">
|
|
<q-input
|
|
:class="getClass(edit)"
|
|
hide-bottom-space
|
|
:outlined="edit"
|
|
dense
|
|
lazy-rules
|
|
:readonly="!edit"
|
|
:borderless="!edit"
|
|
v-model="familyData.lastnameC"
|
|
:rules="[(val:string) => !!val || `${'กรุณากรอก นามสกุล'}`]"
|
|
:label="`${'นามสกุล'}`"
|
|
/>
|
|
</div>
|
|
<div class="col-xs-6 col-sm-2 col-md-2" v-if="familyData.same == '1'">
|
|
<q-input
|
|
:class="getClass(edit)"
|
|
hide-bottom-space
|
|
:outlined="edit"
|
|
dense
|
|
lazy-rules
|
|
:readonly="!edit"
|
|
:borderless="!edit"
|
|
v-model="familyData.lastnameCOld"
|
|
:rules="[(val:string) => !!val || `${'กรุณากรอก นามสกุล(เดิม)'}`]"
|
|
:label="`${'นามสกุล(เดิม)'}`"
|
|
/>
|
|
</div>
|
|
<div class="col-xs-12 col-sm-2 col-md-2" v-if="familyData.same == '1'">
|
|
<q-input
|
|
:class="getClass(edit)"
|
|
hide-bottom-space
|
|
:outlined="edit"
|
|
dense
|
|
lazy-rules
|
|
:readonly="!edit"
|
|
:borderless="!edit"
|
|
v-model="familyData.occupationC"
|
|
:label="`${'อาชีพ'}`"
|
|
/>
|
|
</div>
|
|
|
|
<div class="col-12 q-pt-md q-pb-sm"><q-separator /></div>
|
|
</div>
|
|
<div
|
|
class="row col-12 items-center q-col-gutter-x-xs q-col-gutter-y-xs q-mb-sm"
|
|
>
|
|
<div class="col-xs-12 q-col-gutter-x-sm items-center flex">
|
|
<label class="text-weight-bold">• บุตร</label>
|
|
<div>
|
|
<q-btn
|
|
v-if="edit"
|
|
size="12px"
|
|
flat
|
|
round
|
|
:disable="!edit"
|
|
:color="!edit ? 'grey-7' : 'primary'"
|
|
@click="addChildren"
|
|
icon="mdi-plus"
|
|
>
|
|
<q-tooltip>เพิ่มข้อมูล</q-tooltip>
|
|
</q-btn>
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
class="row col-12 q-col-gutter-xs"
|
|
v-for="(items, index) in familyData.childrens"
|
|
:key="index"
|
|
>
|
|
<div class="col-12 row q-gutter-sm q-pb-xs">
|
|
<q-avatar class="bg-grey-2" size="28px">{{ index + 1 }}</q-avatar>
|
|
<q-radio
|
|
v-model="items.childrenLive"
|
|
checked-icon="task_alt"
|
|
unchecked-icon="panorama_fish_eye"
|
|
val="1"
|
|
label="มีชีวิต"
|
|
color="blue"
|
|
dense
|
|
:disable="!edit"
|
|
/>
|
|
<q-radio
|
|
v-model="items.childrenLive"
|
|
checked-icon="task_alt"
|
|
unchecked-icon="panorama_fish_eye"
|
|
val="0"
|
|
label="เสียชีวิต"
|
|
color="red"
|
|
dense
|
|
:disable="!edit"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<q-btn
|
|
v-if="edit"
|
|
flat
|
|
dense
|
|
size="12px"
|
|
round
|
|
:disable="!edit"
|
|
:color="!edit ? 'grey-7' : 'red'"
|
|
@click="deleteChildren(items)"
|
|
icon="mdi-delete-outline"
|
|
>
|
|
<q-tooltip>ลบข้อมูล {{ index + 1 }}</q-tooltip>
|
|
</q-btn>
|
|
</div>
|
|
<div class="col-xs-6 col-sm-2 col-md-2">
|
|
<q-input
|
|
:class="getClass(edit)"
|
|
hide-bottom-space
|
|
:outlined="edit"
|
|
dense
|
|
lazy-rules
|
|
:readonly="!edit"
|
|
:borderless="!edit"
|
|
v-model="items.childrenCitizenId"
|
|
:label="`${'เลขที่บัตรประชาชน'}`"
|
|
maxlength="13"
|
|
mask="#############"
|
|
/>
|
|
</div>
|
|
<div class="col-xs-12 col-sm-2 col-md-2">
|
|
<selector
|
|
:hide-dropdown-icon="!edit"
|
|
hide-bottom-space
|
|
:class="getClass(edit)"
|
|
:readonly="!edit"
|
|
:borderless="!edit"
|
|
:rules="[(val:string) => !!val || `${'กรุณาเลือก คำนำหน้าชื่อ'}`]"
|
|
:outlined="edit"
|
|
dense
|
|
lazy-rules
|
|
v-model="items.childrenPrefixId"
|
|
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="getClass(edit)"
|
|
hide-bottom-space
|
|
:outlined="edit"
|
|
dense
|
|
lazy-rules
|
|
:readonly="!edit"
|
|
:borderless="!edit"
|
|
v-model="items.childrenFirstName"
|
|
:rules="[(val:string) => !!val || `${'กรุณากรอก ชื่อ'}`]"
|
|
:label="`${'ชื่อ'}`"
|
|
/>
|
|
</div>
|
|
<div class="col-xs-6 col-sm-3 col-md-3">
|
|
<q-input
|
|
:class="getClass(edit)"
|
|
hide-bottom-space
|
|
:outlined="edit"
|
|
dense
|
|
lazy-rules
|
|
:readonly="!edit"
|
|
:borderless="!edit"
|
|
v-model="items.childrenLastName"
|
|
:rules="[(val:string) => !!val || `${'กรุณากรอก นามสกุล'}`]"
|
|
:label="`${'นามสกุล'}`"
|
|
/>
|
|
</div>
|
|
<div
|
|
:class="
|
|
edit
|
|
? 'col-xs-10 col-sm-1 col-md-1'
|
|
: 'col-xs-12 col-sm-2 col-md-2'
|
|
"
|
|
>
|
|
<q-input
|
|
:class="getClass(edit)"
|
|
hide-bottom-space
|
|
:outlined="edit"
|
|
dense
|
|
lazy-rules
|
|
:readonly="!edit"
|
|
:borderless="!edit"
|
|
v-model="items.childrenCareer"
|
|
:label="`${'อาชีพ'}`"
|
|
/>
|
|
</div>
|
|
<div
|
|
class="col-12 q-my-sm"
|
|
v-if="index + 1 < familyData.childrens.length"
|
|
>
|
|
<q-separator v-if="edit" inset />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</q-form>
|
|
</q-card>
|
|
|
|
<DialogHistory
|
|
v-model:modal="modal"
|
|
v-model:fix="fix"
|
|
title="ประวัติแก้ไขข้อมูลครอบครัว"
|
|
>
|
|
<template v-slot:body>
|
|
<div class="row col-12 items-center q-col-gutter-x-xs q-col-gutter-y-xs">
|
|
<div class="col-xs-12 text-weight-bold">
|
|
{{
|
|
`${
|
|
familyDataHistory.length > 0 &&
|
|
familyDataHistory[indexRow].createdAt != null
|
|
? date2Thai(familyDataHistory[indexRow].createdAt, false, true)
|
|
: ""
|
|
}`
|
|
}}
|
|
</div>
|
|
<div class="col-xs-12 text-weight-bold">
|
|
• บิดา
|
|
<q-radio
|
|
v-model="familyDataHistory[indexRow].fatherLive"
|
|
checked-icon="task_alt"
|
|
unchecked-icon="panorama_fish_eye"
|
|
val="1"
|
|
label="มีชีวิต"
|
|
dense
|
|
:disable="true"
|
|
/>
|
|
<q-radio
|
|
v-model="familyDataHistory[indexRow].fatherLive"
|
|
checked-icon="task_alt"
|
|
unchecked-icon="panorama_fish_eye"
|
|
val="0"
|
|
label="เสียชีวิต"
|
|
dense
|
|
:disable="true"
|
|
/>
|
|
</div>
|
|
<div class="row col-12">
|
|
<div class="col-3">
|
|
<q-input
|
|
:class="getClass(false)"
|
|
hide-bottom-space
|
|
:outlined="false"
|
|
dense
|
|
lazy-rules
|
|
:readonly="true"
|
|
:borderless="true"
|
|
v-model="familyDataHistory[indexRow].fatherCitizenId"
|
|
:label="`${'เลขที่บัตรประชาชน'}`"
|
|
maxlength="13"
|
|
mask="#############"
|
|
/>
|
|
</div>
|
|
<div class="col-2">
|
|
<selector
|
|
:hide-dropdown-icon="true"
|
|
hide-bottom-space
|
|
:class="getClass(false)"
|
|
:readonly="true"
|
|
:borderless="true"
|
|
:rules="[(val:string) => !!val || `${'กรุณาเลือก คำนำหน้าชื่อ'}`]"
|
|
:outlined="false"
|
|
dense
|
|
lazy-rules
|
|
v-model="familyDataHistory[indexRow].fatherPrefixId"
|
|
emit-value
|
|
map-options
|
|
option-label="name"
|
|
:options="Ops.prefixOps"
|
|
option-value="id"
|
|
:label="`${'คำนำหน้าชื่อ'}`"
|
|
input-debounce="0"
|
|
@filter="(inputValue:any,
|
|
doneFn:Function) => filterSelector(inputValue, doneFn,'prefixOps'
|
|
) "
|
|
/>
|
|
</div>
|
|
<div class="col">
|
|
<q-input
|
|
:class="getClass(false)"
|
|
hide-bottom-space
|
|
:outlined="false"
|
|
dense
|
|
lazy-rules
|
|
:readonly="true"
|
|
:borderless="true"
|
|
v-model="familyDataHistory[indexRow].fatherFirstName"
|
|
:rules="[(val:string) => !!val || `${'กรุณากรอก ชื่อ'}`]"
|
|
:label="`${'ชื่อ'}`"
|
|
/>
|
|
</div>
|
|
<div class="col">
|
|
<q-input
|
|
:class="getClass(false)"
|
|
hide-bottom-space
|
|
:outlined="false"
|
|
dense
|
|
lazy-rules
|
|
:readonly="true"
|
|
:borderless="true"
|
|
v-model="familyDataHistory[indexRow].fatherLastName"
|
|
:rules="[(val:string) => !!val || `${'กรุณากรอก นามสกุล'}`]"
|
|
:label="`${'นามสกุล'}`"
|
|
/>
|
|
</div>
|
|
<div class="col">
|
|
<q-input
|
|
:class="getClass(false)"
|
|
hide-bottom-space
|
|
:outlined="false"
|
|
dense
|
|
lazy-rules
|
|
:readonly="true"
|
|
:borderless="true"
|
|
v-model="familyDataHistory[indexRow].fatherCareer"
|
|
:label="`${'อาชีพ'}`"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- <div class="col-xs-6 col-sm-2 col-md-2">
|
|
<q-input
|
|
:class="getClass(false)"
|
|
hide-bottom-space
|
|
:outlined="false"
|
|
dense
|
|
lazy-rules
|
|
:readonly="true"
|
|
:borderless="true"
|
|
v-model="familyDataHistory[indexRow].fatherCitizenId"
|
|
:label="`${'เลขที่บัตรประชาชน'}`"
|
|
maxlength="13"
|
|
mask="#############"
|
|
/>
|
|
</div>
|
|
<div class="col-xs-12 col-sm-2 col-md-2">
|
|
<selector
|
|
:hide-dropdown-icon="true"
|
|
hide-bottom-space
|
|
:class="getClass(false)"
|
|
:readonly="true"
|
|
:borderless="true"
|
|
:rules="[(val:string) => !!val || `${'กรุณาเลือก คำนำหน้าชื่อ'}`]"
|
|
:outlined="false"
|
|
dense
|
|
lazy-rules
|
|
v-model="familyDataHistory[indexRow].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="getClass(false)"
|
|
hide-bottom-space
|
|
:outlined="false"
|
|
dense
|
|
lazy-rules
|
|
:readonly="true"
|
|
:borderless="true"
|
|
v-model="familyDataHistory[indexRow].fatherFirstName"
|
|
:rules="[(val:string) => !!val || `${'กรุณากรอก ชื่อ'}`]"
|
|
:label="`${'ชื่อ'}`"
|
|
/>
|
|
</div>
|
|
<div class="col-xs-6 col-sm-3 col-md-3">
|
|
<q-input
|
|
:class="getClass(false)"
|
|
hide-bottom-space
|
|
:outlined="false"
|
|
dense
|
|
lazy-rules
|
|
:readonly="true"
|
|
:borderless="true"
|
|
v-model="familyDataHistory[indexRow].fatherLastName"
|
|
:rules="[(val:string) => !!val || `${'กรุณากรอก นามสกุล'}`]"
|
|
:label="`${'นามสกุล'}`"
|
|
/>
|
|
</div>
|
|
<div class="col-xs-12 col-sm-2 col-md-2">
|
|
<q-input
|
|
:class="getClass(false)"
|
|
hide-bottom-space
|
|
:outlined="false"
|
|
dense
|
|
lazy-rules
|
|
:readonly="true"
|
|
:borderless="true"
|
|
v-model="familyDataHistory[indexRow].fatherCareer"
|
|
:label="`${'อาชีพ'}`"
|
|
/>
|
|
</div> -->
|
|
|
|
<div class="col-12 q-pt-md q-pb-sm"><q-separator /></div>
|
|
<div class="col-xs-12 text-weight-bold">
|
|
• มารดา
|
|
<q-radio
|
|
v-model="familyDataHistory[indexRow].motherLive"
|
|
checked-icon="task_alt"
|
|
unchecked-icon="panorama_fish_eye"
|
|
val="1"
|
|
label="มีชีวิต"
|
|
dense
|
|
:disable="true"
|
|
/>
|
|
<q-radio
|
|
v-model="familyDataHistory[indexRow].motherLive"
|
|
checked-icon="task_alt"
|
|
unchecked-icon="panorama_fish_eye"
|
|
val="0"
|
|
label="เสียชีวิต"
|
|
dense
|
|
:disable="true"
|
|
/>
|
|
</div>
|
|
<div class="row col-12">
|
|
<div class="col-3">
|
|
<q-input
|
|
:class="getClass(false)"
|
|
hide-bottom-space
|
|
:outlined="false"
|
|
dense
|
|
lazy-rules
|
|
:readonly="true"
|
|
:borderless="true"
|
|
v-model="familyDataHistory[indexRow].motherCitizenId"
|
|
:label="`${'เลขที่บัตรประชาชน'}`"
|
|
maxlength="13"
|
|
mask="#############"
|
|
/>
|
|
</div>
|
|
<div class="col-2">
|
|
<selector
|
|
:hide-dropdown-icon="true"
|
|
hide-bottom-space
|
|
:class="getClass(false)"
|
|
:readonly="true"
|
|
:borderless="true"
|
|
:rules="[(val:string) => !!val || `${'กรุณาเลือก คำนำหน้าชื่อ'}`]"
|
|
:outlined="false"
|
|
dense
|
|
lazy-rules
|
|
v-model="familyDataHistory[indexRow].motherPrefixId"
|
|
emit-value
|
|
map-options
|
|
option-label="name"
|
|
:options="Ops.prefixOps"
|
|
option-value="id"
|
|
:label="`${'คำนำหน้าชื่อ'}`"
|
|
input-debounce="0"
|
|
@filter="(inputValue:any,
|
|
doneFn:Function) => filterSelector(inputValue, doneFn,'prefixOps'
|
|
) "
|
|
/>
|
|
</div>
|
|
<div class="col">
|
|
<q-input
|
|
:class="getClass(false)"
|
|
hide-bottom-space
|
|
:outlined="false"
|
|
dense
|
|
lazy-rules
|
|
:readonly="true"
|
|
:borderless="true"
|
|
v-model="familyDataHistory[indexRow].motherFirstName"
|
|
:rules="[(val:string) => !!val || `${'กรุณากรอก ชื่อ'}`]"
|
|
:label="`${'ชื่อ'}`"
|
|
/>
|
|
</div>
|
|
<div class="col">
|
|
<q-input
|
|
:class="getClass(false)"
|
|
hide-bottom-space
|
|
:outlined="false"
|
|
dense
|
|
lazy-rules
|
|
:readonly="true"
|
|
:borderless="true"
|
|
v-model="familyDataHistory[indexRow].motherLastName"
|
|
:rules="[(val:string) => !!val || `${'กรุณากรอก นามสกุล'}`]"
|
|
:label="`${'นามสกุล'}`"
|
|
/>
|
|
</div>
|
|
<div class="col">
|
|
<q-input
|
|
:class="getClass(false)"
|
|
hide-bottom-space
|
|
:outlined="false"
|
|
dense
|
|
lazy-rules
|
|
:readonly="true"
|
|
:borderless="true"
|
|
v-model="familyDataHistory[indexRow].motherCareer"
|
|
:label="`${'อาชีพ'}`"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<!-- <div class="col-xs-6 col-sm-2 col-md-2">
|
|
<q-input
|
|
:class="getClass(false)"
|
|
hide-bottom-space
|
|
:outlined="false"
|
|
dense
|
|
lazy-rules
|
|
:readonly="true"
|
|
:borderless="true"
|
|
v-model="familyDataHistory[indexRow].motherCitizenId"
|
|
:label="`${'เลขที่บัตรประชาชน'}`"
|
|
maxlength="13"
|
|
mask="#############"
|
|
/>
|
|
</div>
|
|
<div class="col-xs-12 col-sm-2 col-md-2">
|
|
<selector
|
|
:hide-dropdown-icon="true"
|
|
hide-bottom-space
|
|
:class="getClass(false)"
|
|
:readonly="true"
|
|
:borderless="true"
|
|
:rules="[(val:string) => !!val || `${'กรุณาเลือก คำนำหน้าชื่อ'}`]"
|
|
:outlined="false"
|
|
dense
|
|
lazy-rules
|
|
v-model="familyDataHistory[indexRow].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="getClass(false)"
|
|
hide-bottom-space
|
|
:outlined="false"
|
|
dense
|
|
lazy-rules
|
|
:readonly="true"
|
|
:borderless="true"
|
|
v-model="familyDataHistory[indexRow].motherFirstName"
|
|
:rules="[(val:string) => !!val || `${'กรุณากรอก ชื่อ'}`]"
|
|
:label="`${'ชื่อ'}`"
|
|
/>
|
|
</div>
|
|
<div class="col-xs-6 col-sm-3 col-md-3">
|
|
<q-input
|
|
:class="getClass(false)"
|
|
hide-bottom-space
|
|
:outlined="false"
|
|
dense
|
|
lazy-rules
|
|
:readonly="true"
|
|
:borderless="true"
|
|
v-model="familyDataHistory[indexRow].motherLastName"
|
|
:rules="[(val:string) => !!val || `${'กรุณากรอก นามสกุล'}`]"
|
|
:label="`${'นามสกุล'}`"
|
|
/>
|
|
</div>
|
|
<div class="col-xs-12 col-sm-2 col-md-2">
|
|
<q-input
|
|
:class="getClass(false)"
|
|
hide-bottom-space
|
|
:outlined="false"
|
|
dense
|
|
lazy-rules
|
|
:readonly="true"
|
|
:borderless="true"
|
|
v-model="familyDataHistory[indexRow].motherCareer"
|
|
:label="`${'อาชีพ'}`"
|
|
/>
|
|
</div> -->
|
|
<div class="col-12 q-pt-md q-pb-sm"><q-separator /></div>
|
|
<div class="col-xs-12 q-gutter-sm items-center flex q-my-sm">
|
|
<label class="text-weight-bold">• คู่สมรส</label>
|
|
<q-radio
|
|
v-model="familyDataHistory[indexRow].couple"
|
|
checked-icon="task_alt"
|
|
unchecked-icon="panorama_fish_eye"
|
|
val="1"
|
|
label="มี"
|
|
dense
|
|
:disable="true"
|
|
@update:model-value="selectRadio"
|
|
/>
|
|
<q-radio
|
|
v-model="familyDataHistory[indexRow].couple"
|
|
checked-icon="task_alt"
|
|
unchecked-icon="panorama_fish_eye"
|
|
val="0"
|
|
label="ไม่มี"
|
|
color="grey-9"
|
|
dense
|
|
:disable="true"
|
|
@update:model-value="selectRadio"
|
|
/>
|
|
<q-separator
|
|
vertical
|
|
color="grey-4"
|
|
size="2px"
|
|
class="q-mx-md"
|
|
v-if="familyData.same == '1'"
|
|
/>
|
|
<div class="q-gutter-sm" v-if="familyData.same == '1'">
|
|
<q-radio
|
|
v-model="familyDataHistory[indexRow].coupleLive"
|
|
checked-icon="task_alt"
|
|
unchecked-icon="panorama_fish_eye"
|
|
val="1"
|
|
label="มีชีวิต"
|
|
color="blue"
|
|
dense
|
|
:disable="true"
|
|
/>
|
|
<q-radio
|
|
v-model="familyDataHistory[indexRow].coupleLive"
|
|
checked-icon="task_alt"
|
|
unchecked-icon="panorama_fish_eye"
|
|
val="0"
|
|
label="เสียชีวิต"
|
|
color="red"
|
|
dense
|
|
:disable="true"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
class="row col-12"
|
|
v-if="familyDataHistory[indexRow].couple == '1'"
|
|
>
|
|
<div class="col-3">
|
|
<q-input
|
|
:class="getClass(false)"
|
|
hide-bottom-space
|
|
:outlined="false"
|
|
dense
|
|
lazy-rules
|
|
:readonly="true"
|
|
:borderless="true"
|
|
v-model="familyDataHistory[indexRow].coupleCitizenId"
|
|
:label="`${'เลขที่บัตรประชาชน'}`"
|
|
maxlength="13"
|
|
mask="#############"
|
|
/>
|
|
</div>
|
|
<div class="col-2">
|
|
<selector
|
|
:hide-dropdown-icon="true"
|
|
hide-bottom-space
|
|
:class="getClass(false)"
|
|
:readonly="true"
|
|
:borderless="true"
|
|
:rules="[(val:string) => !!val || `${'กรุณาเลือก คำนำหน้าชื่อ'}`]"
|
|
:outlined="false"
|
|
dense
|
|
lazy-rules
|
|
v-model="familyDataHistory[indexRow].couplePrefixId"
|
|
emit-value
|
|
map-options
|
|
option-label="name"
|
|
:options="Ops.prefixOps"
|
|
option-value="id"
|
|
:label="`${'คำนำหน้าชื่อ'}`"
|
|
input-debounce="0"
|
|
@filter="(inputValue:any,
|
|
doneFn:Function) => filterSelector(inputValue, doneFn,'prefixOps'
|
|
) "
|
|
/>
|
|
</div>
|
|
<div class="col">
|
|
<q-input
|
|
:class="getClass(false)"
|
|
hide-bottom-space
|
|
:outlined="false"
|
|
dense
|
|
lazy-rules
|
|
:readonly="true"
|
|
:borderless="true"
|
|
v-model="familyDataHistory[indexRow].coupleFirstName"
|
|
:rules="[(val:string) => !!val || `${'กรุณากรอก ชื่อ'}`]"
|
|
:label="`${'ชื่อ'}`"
|
|
/>
|
|
</div>
|
|
<div class="col">
|
|
<q-input
|
|
:class="getClass(false)"
|
|
hide-bottom-space
|
|
:outlined="false"
|
|
dense
|
|
lazy-rules
|
|
:readonly="true"
|
|
:borderless="true"
|
|
v-model="familyDataHistory[indexRow].coupleLastName"
|
|
:rules="[(val:string) => !!val || `${'กรุณากรอก นามสกุล'}`]"
|
|
:label="`${'นามสกุล'}`"
|
|
/>
|
|
</div>
|
|
<div class="col">
|
|
<q-input
|
|
:class="getClass(false)"
|
|
hide-bottom-space
|
|
:outlined="false"
|
|
dense
|
|
lazy-rules
|
|
:readonly="true"
|
|
:borderless="true"
|
|
v-model="familyDataHistory[indexRow].coupleLastNameOld"
|
|
:rules="[(val:string) => !!val || `${'กรุณากรอก นามสกุล(เดิม)'}`]"
|
|
:label="`${'นามสกุล(เดิม)'}`"
|
|
/>
|
|
</div>
|
|
<div class="col">
|
|
<q-input
|
|
:class="getClass(false)"
|
|
hide-bottom-space
|
|
:outlined="false"
|
|
dense
|
|
lazy-rules
|
|
:readonly="true"
|
|
:borderless="true"
|
|
v-model="familyDataHistory[indexRow].coupleCareer"
|
|
:label="`${'อาชีพ'}`"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<!-- <div
|
|
class="col-xs-6 col-sm-2 col-md-2"
|
|
v-if="familyDataHistory[indexRow].couple == '1'"
|
|
>
|
|
<q-input
|
|
:class="getClass(false)"
|
|
hide-bottom-space
|
|
:outlined="false"
|
|
dense
|
|
lazy-rules
|
|
:readonly="true"
|
|
:borderless="true"
|
|
v-model="familyDataHistory[indexRow].coupleCitizenId"
|
|
:label="`${'เลขที่บัตรประชาชน'}`"
|
|
maxlength="13"
|
|
mask="#############"
|
|
/>
|
|
</div>
|
|
|
|
<div
|
|
class="col-xs-12 col-sm-2 col-md-2"
|
|
v-if="familyDataHistory[indexRow].couple == '1'"
|
|
>
|
|
<selector
|
|
:hide-dropdown-icon="true"
|
|
hide-bottom-space
|
|
:class="getClass(false)"
|
|
:readonly="true"
|
|
:borderless="true"
|
|
:rules="[(val:string) => !!val || `${'กรุณาเลือก คำนำหน้าชื่อ'}`]"
|
|
:outlined="false"
|
|
dense
|
|
lazy-rules
|
|
v-model="familyDataHistory[indexRow].couplePrefixId"
|
|
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-2 col-md-2"
|
|
v-if="familyDataHistory[indexRow].couple == '1'"
|
|
>
|
|
<q-input
|
|
:class="getClass(false)"
|
|
hide-bottom-space
|
|
:outlined="false"
|
|
dense
|
|
lazy-rules
|
|
:readonly="true"
|
|
:borderless="true"
|
|
v-model="familyDataHistory[indexRow].coupleFirstName"
|
|
:rules="[(val:string) => !!val || `${'กรุณากรอก ชื่อ'}`]"
|
|
:label="`${'ชื่อ'}`"
|
|
/>
|
|
</div>
|
|
<div
|
|
class="col-xs-6 col-sm-2 col-md-2"
|
|
v-if="familyDataHistory[indexRow].couple == '1'"
|
|
>
|
|
<q-input
|
|
:class="getClass(false)"
|
|
hide-bottom-space
|
|
:outlined="false"
|
|
dense
|
|
lazy-rules
|
|
:readonly="true"
|
|
:borderless="true"
|
|
v-model="familyDataHistory[indexRow].coupleLastName"
|
|
:rules="[(val:string) => !!val || `${'กรุณากรอก นามสกุล'}`]"
|
|
:label="`${'นามสกุล'}`"
|
|
/>
|
|
</div>
|
|
<div
|
|
class="col-xs-6 col-sm-2 col-md-2"
|
|
v-if="familyDataHistory[indexRow].couple == '1'"
|
|
>
|
|
<q-input
|
|
:class="getClass(false)"
|
|
hide-bottom-space
|
|
:outlined="false"
|
|
dense
|
|
lazy-rules
|
|
:readonly="true"
|
|
:borderless="true"
|
|
v-model="familyDataHistory[indexRow].coupleLastNameOld"
|
|
:rules="[(val:string) => !!val || `${'กรุณากรอก นามสกุล(เดิม)'}`]"
|
|
:label="`${'นามสกุล(เดิม)'}`"
|
|
/>
|
|
</div>
|
|
<div
|
|
class="col-xs-12 col-sm-2 col-md-2"
|
|
v-if="familyDataHistory[indexRow].couple == '1'"
|
|
>
|
|
<q-input
|
|
:class="getClass(false)"
|
|
hide-bottom-space
|
|
:outlined="false"
|
|
dense
|
|
lazy-rules
|
|
:readonly="true"
|
|
:borderless="true"
|
|
v-model="familyDataHistory[indexRow].coupleCareer"
|
|
:label="`${'อาชีพ'}`"
|
|
/>
|
|
</div> -->
|
|
|
|
<div class="col-12 q-pt-md q-pb-sm"><q-separator /></div>
|
|
</div>
|
|
<div class="row col-12 items-center q-col-gutter-x-xs q-col-gutter-y-xs">
|
|
<div class="col-xs-12 q-gutter-sm items-center flex q-my-sm">
|
|
<label class="text-weight-bold">• บุตร</label>
|
|
</div>
|
|
|
|
<div
|
|
class="row col-12 items-center q-col-gutter-x-xs q-col-gutter-y-xs"
|
|
v-for="items in familyDataHistory[indexRow].childrens"
|
|
:key="items.id"
|
|
>
|
|
<div class="col-12 row q-gutter-sm q-pb-xs">
|
|
<q-radio
|
|
v-model="items.childrenLive"
|
|
checked-icon="task_alt"
|
|
unchecked-icon="panorama_fish_eye"
|
|
val="1"
|
|
label="มีชีวิต"
|
|
color="blue"
|
|
dense
|
|
:disable="true"
|
|
/>
|
|
<q-radio
|
|
v-model="items.childrenLive"
|
|
checked-icon="task_alt"
|
|
unchecked-icon="panorama_fish_eye"
|
|
val="0"
|
|
label="เสียชีวิต"
|
|
color="red"
|
|
dense
|
|
:disable="true"
|
|
/>
|
|
</div>
|
|
<div class="row col-12">
|
|
<div class="col-3">
|
|
<q-input
|
|
:class="getClass(false)"
|
|
hide-bottom-space
|
|
:outlined="false"
|
|
dense
|
|
lazy-rules
|
|
:readonly="true"
|
|
:borderless="true"
|
|
v-model="items.childrenCitizenId"
|
|
:label="`${'เลขที่บัตรประชาชน'}`"
|
|
maxlength="13"
|
|
mask="#############"
|
|
/>
|
|
</div>
|
|
<div class="col-2">
|
|
<selector
|
|
:hide-dropdown-icon="true"
|
|
hide-bottom-space
|
|
:class="getClass(false)"
|
|
:readonly="true"
|
|
:borderless="true"
|
|
:rules="[(val:string) => !!val || `${'กรุณาเลือก คำนำหน้าชื่อ'}`]"
|
|
:outlined="false"
|
|
dense
|
|
lazy-rules
|
|
v-model="items.childrenPrefixId"
|
|
emit-value
|
|
map-options
|
|
option-label="name"
|
|
:options="Ops.prefixOps"
|
|
option-value="id"
|
|
:label="`${'คำนำหน้าชื่อ'}`"
|
|
input-debounce="0"
|
|
@filter="(inputValue:any,
|
|
doneFn:Function) => filterSelector(inputValue, doneFn,'prefixOps'
|
|
) "
|
|
/>
|
|
</div>
|
|
<div class="col">
|
|
<q-input
|
|
:class="getClass(false)"
|
|
hide-bottom-space
|
|
:outlined="false"
|
|
dense
|
|
lazy-rules
|
|
:readonly="true"
|
|
:borderless="true"
|
|
v-model="items.childrenFirstName"
|
|
:rules="[(val:string) => !!val || `${'กรุณากรอก ชื่อ'}`]"
|
|
:label="`${'ชื่อ'}`"
|
|
/>
|
|
</div>
|
|
<div class="col">
|
|
<q-input
|
|
:class="getClass(false)"
|
|
hide-bottom-space
|
|
:outlined="false"
|
|
dense
|
|
lazy-rules
|
|
:readonly="true"
|
|
:borderless="true"
|
|
v-model="items.childrenLastName"
|
|
:rules="[(val:string) => !!val || `${'กรุณากรอก นามสกุล'}`]"
|
|
:label="`${'นามสกุล'}`"
|
|
/>
|
|
</div>
|
|
<div class="col">
|
|
<q-input
|
|
:class="getClass(false)"
|
|
hide-bottom-space
|
|
:outlined="false"
|
|
dense
|
|
lazy-rules
|
|
:readonly="true"
|
|
:borderless="true"
|
|
v-model="items.childrenCareer"
|
|
:label="`${'อาชีพ'}`"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<!-- <div class="col-xs-6 col-sm-2 col-md-2">
|
|
<q-input
|
|
:class="getClass(false)"
|
|
hide-bottom-space
|
|
:outlined="false"
|
|
dense
|
|
lazy-rules
|
|
:readonly="true"
|
|
:borderless="true"
|
|
v-model="items.childrenCitizenId"
|
|
:label="`${'เลขที่บัตรประชาชน'}`"
|
|
maxlength="13"
|
|
mask="#############"
|
|
/>
|
|
</div>
|
|
<div class="col-xs-6 col-sm-2 col-md-2">
|
|
<selector
|
|
:hide-dropdown-icon="true"
|
|
hide-bottom-space
|
|
:class="getClass(false)"
|
|
:readonly="true"
|
|
:borderless="true"
|
|
:rules="[(val:string) => !!val || `${'กรุณาเลือก คำนำหน้าชื่อ'}`]"
|
|
:outlined="false"
|
|
dense
|
|
lazy-rules
|
|
v-model="items.childrenPrefixId"
|
|
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="getClass(false)"
|
|
hide-bottom-space
|
|
:outlined="false"
|
|
dense
|
|
lazy-rules
|
|
:readonly="true"
|
|
:borderless="true"
|
|
v-model="items.childrenFirstName"
|
|
:rules="[(val:string) => !!val || `${'กรุณากรอก ชื่อ'}`]"
|
|
:label="`${'ชื่อ'}`"
|
|
/>
|
|
</div>
|
|
<div class="col-xs-6 col-sm-3 col-md-3">
|
|
<q-input
|
|
:class="getClass(false)"
|
|
hide-bottom-space
|
|
:outlined="false"
|
|
dense
|
|
lazy-rules
|
|
:readonly="true"
|
|
:borderless="true"
|
|
v-model="items.childrenLastName"
|
|
:rules="[(val:string) => !!val || `${'กรุณากรอก นามสกุล'}`]"
|
|
:label="`${'นามสกุล'}`"
|
|
/>
|
|
</div>
|
|
<div class="col-xs-12 col-sm-2 col-md-2">
|
|
<q-input
|
|
:class="getClass(false)"
|
|
hide-bottom-space
|
|
:outlined="false"
|
|
dense
|
|
lazy-rules
|
|
:readonly="true"
|
|
:borderless="true"
|
|
v-model="items.childrenCareer"
|
|
:label="`${'อาชีพ'}`"
|
|
/>
|
|
</div> -->
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<template v-slot:footer>
|
|
<q-btn
|
|
flat
|
|
round
|
|
icon="mdi-menu-left"
|
|
@click="clickPreviousNext('next')"
|
|
:disable="previous == false"
|
|
:color="!previous ? 'grey-7' : 'public'"
|
|
/>
|
|
<q-btn
|
|
flat
|
|
round
|
|
icon="mdi-menu-right"
|
|
@click="clickPreviousNext('previous')"
|
|
:disable="next == false"
|
|
:color="!next ? 'grey-7' : 'public'"
|
|
/>
|
|
<q-space />
|
|
<div class="text-black text-subtitle2 text-bold">
|
|
{{ indexRow + 1 }}/{{ familyDataHistory.length }}
|
|
</div>
|
|
</template>
|
|
</DialogHistory>
|
|
</template>
|
|
<script setup lang="ts">
|
|
import { ref, onMounted } from "vue";
|
|
import type { QForm } from "quasar";
|
|
import { useCounterMixin } from "@/stores/mixin";
|
|
import { useProfileDataStore } from "@/modules/04_registry/store";
|
|
|
|
import { useQuasar } from "quasar";
|
|
import type {
|
|
Family,
|
|
DataOption,
|
|
} from "@/modules/04_registry/components/profileType";
|
|
import HeaderTop from "@/modules/04_registry/components/Information/top.vue";
|
|
import DialogHistory from "@/modules/04_registry/components/DialogHistory.vue";
|
|
import type {
|
|
ResponseObject,
|
|
childrenFamily,
|
|
ResponseHistory,
|
|
} from "@/modules/04_registry/interface/response/Family";
|
|
import http from "@/plugins/http";
|
|
import config from "@/app.config";
|
|
import { useRoute } from "vue-router";
|
|
|
|
const profileStore = useProfileDataStore();
|
|
|
|
const props = defineProps({
|
|
statusEdit: {
|
|
type: Boolean,
|
|
required: true,
|
|
},
|
|
notiNoEdit: {
|
|
type: Function,
|
|
default: () => console.log("not function"),
|
|
},
|
|
statusAdd: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
});
|
|
const emit = defineEmits(["update:statusEdit"]);
|
|
|
|
const route = useRoute();
|
|
const $q = useQuasar();
|
|
|
|
const mixin = useCounterMixin();
|
|
const { date2Thai, success, messageError, showLoader, hideLoader } = mixin;
|
|
const edit = ref<boolean>(false);
|
|
const fix = ref<boolean>(true);
|
|
const myform = ref<QForm | null>(null);
|
|
const modal = ref<boolean>(false);
|
|
const indexRow = ref<number>(0);
|
|
const previous = ref<boolean>(false);
|
|
const next = ref<boolean>(false);
|
|
//C Couple
|
|
//M Male
|
|
//F Female
|
|
const familyData = ref<Family>({
|
|
prefixC: null,
|
|
prefixIdC: null,
|
|
firstnameC: null,
|
|
lastnameC: null,
|
|
lastnameCOld: null,
|
|
occupationC: null,
|
|
liveC: null,
|
|
citizenIdC: null,
|
|
prefixM: null,
|
|
prefixIdM: null,
|
|
firstnameM: null,
|
|
lastnameM: null,
|
|
occupationM: null,
|
|
liveM: null,
|
|
citizenIdM: null,
|
|
prefixF: null,
|
|
prefixIdF: null,
|
|
firstnameF: null,
|
|
lastnameF: null,
|
|
occupationF: null,
|
|
liveF: null,
|
|
citizenIdF: null,
|
|
same: "0",
|
|
childrens: [],
|
|
});
|
|
const familyDataHistory = ref<ResponseHistory[]>([]);
|
|
const Ops = ref<any>({
|
|
prefixOps: [],
|
|
});
|
|
const OpsFilter = ref<any>({
|
|
prefixOps: [],
|
|
});
|
|
|
|
onMounted(async () => {
|
|
await fetchPrefix();
|
|
await fetchData();
|
|
emit("update:statusEdit", false);
|
|
defaultAdd();
|
|
});
|
|
|
|
const statusAdd = () => props.statusAdd;
|
|
|
|
const defaultAdd = () => {
|
|
if (props.statusAdd) {
|
|
edit.value = props.statusAdd;
|
|
familyData.value = {
|
|
prefixC: null,
|
|
prefixIdC: null,
|
|
firstnameC: null,
|
|
lastnameC: null,
|
|
lastnameCOld: null,
|
|
occupationC: null,
|
|
citizenIdC: null,
|
|
liveC: null,
|
|
prefixM: null,
|
|
prefixIdM: null,
|
|
firstnameM: null,
|
|
lastnameM: null,
|
|
occupationM: null,
|
|
citizenIdM: null,
|
|
liveM: null,
|
|
prefixF: null,
|
|
prefixIdF: null,
|
|
firstnameF: null,
|
|
lastnameF: null,
|
|
occupationF: null,
|
|
citizenIdF: null,
|
|
liveF: null,
|
|
same: "0",
|
|
childrens: [],
|
|
};
|
|
}
|
|
};
|
|
|
|
const historyData = async () => {
|
|
await fetchHistory();
|
|
};
|
|
|
|
const filterSelector = (val: any, update: Function, refData: string) => {
|
|
update(() => {
|
|
Ops.value[`${refData}`] = OpsFilter.value[`${refData}`].filter(
|
|
(v: DataOption) => v.name.indexOf(val) > -1
|
|
);
|
|
});
|
|
};
|
|
|
|
const refreshData = async () => {
|
|
if (myform.value != null) {
|
|
myform.value.reset();
|
|
}
|
|
await fetchData();
|
|
};
|
|
|
|
const fetchPrefix = async () => {
|
|
showLoader();
|
|
await http
|
|
.get(config.API.prefix)
|
|
.then((res) => {
|
|
const data = res.data.result;
|
|
let option: DataOption[] = [];
|
|
data.map((r: any) => {
|
|
option.push({ id: r.id.toString(), name: r.name.toString() });
|
|
});
|
|
Ops.value.prefixOps = option;
|
|
OpsFilter.value.prefixOps = option;
|
|
})
|
|
.catch((e) => {
|
|
messageError($q, e);
|
|
})
|
|
.finally(() => {
|
|
// hideLoader();
|
|
profileStore.isLoad++;
|
|
});
|
|
};
|
|
|
|
const addChildren = async () => {
|
|
familyData.value.childrens.push({
|
|
id: `${familyData.value.childrens.length + 1}`,
|
|
childrenPrefixId: "",
|
|
childrenFirstName: "",
|
|
childrenLastName: "",
|
|
childrenCareer: "",
|
|
childrenLive: "1",
|
|
childrenCitizenId: "",
|
|
});
|
|
|
|
familyData.value.childrens.sort(
|
|
(a: childrenFamily, b: childrenFamily) => Number(b.id) - Number(a.id)
|
|
);
|
|
};
|
|
|
|
const deleteChildren = (items: childrenFamily) => {
|
|
const index = familyData.value.childrens.findIndex(
|
|
(r: childrenFamily) => r.id == items.id
|
|
);
|
|
|
|
familyData.value.childrens.splice(index, 1);
|
|
};
|
|
|
|
const fetchHistory = async () => {
|
|
familyDataHistory.value = [];
|
|
showLoader();
|
|
await http
|
|
.get(config.API.profileFamiHisId(route.params.id.toString()))
|
|
.then((res) => {
|
|
const data: ResponseObject[] = res.data.result;
|
|
data.map((row: ResponseObject) => {
|
|
const arrayData: ResponseHistory = {
|
|
couple: row.couple ? "1" : "0",
|
|
couplePrefixId: row.couplePrefixId,
|
|
coupleFirstName: row.coupleFirstName,
|
|
coupleLastName: row.coupleLastName,
|
|
coupleLastNameOld: row.coupleLastNameOld,
|
|
coupleCareer: row.coupleCareer,
|
|
coupleLive: row.coupleLive ? "1" : "0",
|
|
coupleCitizenId: row.coupleCitizenId,
|
|
fatherPrefixId: row.fatherPrefixId,
|
|
fatherFirstName: row.fatherFirstName,
|
|
fatherLastName: row.fatherLastName,
|
|
fatherCareer: row.fatherCareer,
|
|
fatherLive: row.fatherLive ? "1" : "0",
|
|
fatherCitizenId: row.fatherCitizenId,
|
|
motherPrefixId: row.motherPrefixId,
|
|
motherFirstName: row.motherFirstName,
|
|
motherLastName: row.motherLastName,
|
|
motherCareer: row.motherCareer,
|
|
motherLive: row.motherLive ? "1" : "0",
|
|
motherCitizenId: row.motherCitizenId,
|
|
childrens: row.childrens,
|
|
createdFullName: row.createdFullName,
|
|
createdAt: new Date(row.createdAt),
|
|
};
|
|
familyDataHistory.value.push(arrayData);
|
|
});
|
|
})
|
|
.catch((e) => {
|
|
messageError($q, e);
|
|
})
|
|
.finally(async () => {
|
|
hideLoader();
|
|
if (familyDataHistory.value.length == 0) {
|
|
// modalError(
|
|
// $q,
|
|
// "ประวัติแก้ไขข้อมูลครอบครัว",
|
|
// "ไม่มีข้อมูลประวัติแก้ไขข้อมูลครอบครัว"
|
|
// );
|
|
} else {
|
|
modal.value = true;
|
|
indexRow.value = 0;
|
|
if (familyDataHistory.value.length > 1) {
|
|
next.value = true;
|
|
previous.value = false;
|
|
} else {
|
|
next.value = false;
|
|
previous.value = false;
|
|
}
|
|
}
|
|
});
|
|
};
|
|
|
|
const fetchData = async () => {
|
|
if (route.params.id) {
|
|
showLoader();
|
|
await http
|
|
.get(config.API.profileFamiId(route.params.id.toString()))
|
|
.then((res) => {
|
|
const data: ResponseObject = res.data.result;
|
|
familyData.value.prefixC = "";
|
|
familyData.value.prefixIdC =
|
|
data.couplePrefixId !== "00000000-0000-0000-0000-000000000000"
|
|
? data.couplePrefixId
|
|
: "";
|
|
familyData.value.firstnameC = data.coupleFirstName;
|
|
familyData.value.lastnameC = data.coupleLastName;
|
|
familyData.value.lastnameCOld = data.coupleLastNameOld;
|
|
familyData.value.occupationC = data.coupleCareer;
|
|
familyData.value.liveC = data.coupleLive ? "1" : "0";
|
|
familyData.value.citizenIdC = data.coupleCitizenId;
|
|
|
|
familyData.value.prefixM = "";
|
|
familyData.value.prefixIdM = data.fatherPrefixId;
|
|
familyData.value.firstnameM = data.fatherFirstName;
|
|
familyData.value.lastnameM = data.fatherLastName;
|
|
familyData.value.occupationM = data.fatherCareer;
|
|
familyData.value.liveM = data.fatherLive ? "1" : "0";
|
|
familyData.value.citizenIdM =
|
|
data.fatherCitizenId !== "00000000-0000-0000-0000-000000000000"
|
|
? data.fatherCitizenId
|
|
: "";
|
|
familyData.value.prefixF = "";
|
|
familyData.value.prefixIdF =
|
|
data.motherPrefixId !== "00000000-0000-0000-0000-000000000000"
|
|
? data.motherPrefixId
|
|
: "";
|
|
familyData.value.firstnameF = data.motherFirstName;
|
|
familyData.value.lastnameF = data.motherLastName;
|
|
familyData.value.occupationF = data.motherCareer;
|
|
familyData.value.liveF = data.motherLive ? "1" : "0";
|
|
familyData.value.citizenIdF = data.motherCitizenId;
|
|
familyData.value.same = data.couple ? "1" : "0";
|
|
|
|
if (data.childrens.length > 0) {
|
|
let dataChild: childrenFamily[] = [];
|
|
data.childrens.map((row: childrenFamily, index: number) => {
|
|
dataChild.push({
|
|
id: `${index + 1}`,
|
|
childrenPrefixId: row.childrenPrefixId,
|
|
childrenFirstName: row.childrenFirstName,
|
|
childrenLastName: row.childrenLastName,
|
|
childrenCareer: row.childrenCareer,
|
|
childrenLive: row.childrenLive,
|
|
childrenCitizenId: row.childrenCitizenId,
|
|
});
|
|
});
|
|
familyData.value.childrens = dataChild;
|
|
} else {
|
|
familyData.value.childrens = [];
|
|
}
|
|
})
|
|
.catch((e) => {
|
|
messageError($q, e);
|
|
})
|
|
.finally(async () => {
|
|
// hideLoader();
|
|
profileStore.isLoad++
|
|
});
|
|
}
|
|
};
|
|
|
|
const editData = async () => {
|
|
showLoader();
|
|
const body: ResponseObject = {
|
|
couple: familyData.value.same == "1",
|
|
couplePrefixId: familyData.value.prefixIdC,
|
|
coupleFirstName: familyData.value.firstnameC,
|
|
coupleLastName: familyData.value.lastnameC,
|
|
coupleLastNameOld: familyData.value.lastnameCOld,
|
|
coupleCareer: familyData.value.occupationC,
|
|
coupleLive: familyData.value.liveC == "1",
|
|
coupleCitizenId: familyData.value.citizenIdC,
|
|
fatherPrefixId: familyData.value.prefixIdM,
|
|
fatherFirstName: familyData.value.firstnameM,
|
|
fatherLastName: familyData.value.lastnameM,
|
|
fatherCareer: familyData.value.occupationM,
|
|
fatherLive: familyData.value.liveM == "1",
|
|
fatherCitizenId: familyData.value.citizenIdM,
|
|
motherPrefixId: familyData.value.prefixIdF,
|
|
motherFirstName: familyData.value.firstnameF,
|
|
motherLastName: familyData.value.lastnameF,
|
|
motherCareer: familyData.value.occupationF,
|
|
motherLive: familyData.value.liveF == "1",
|
|
motherCitizenId: familyData.value.citizenIdF,
|
|
childrens: familyData.value.childrens,
|
|
createdFullName: "-",
|
|
createdAt: new Date(),
|
|
};
|
|
await http
|
|
.put(config.API.profileFamiId(route.params.id.toString()), body)
|
|
.then((res) => {
|
|
success($q, "บันทึกข้อมูลสำเร็จ");
|
|
})
|
|
.catch((e) => {
|
|
messageError($q, e);
|
|
})
|
|
.finally(async () => {
|
|
edit.value = false;
|
|
emit("update:statusEdit", false);
|
|
await fetchData();
|
|
});
|
|
};
|
|
|
|
const addData = async () => {
|
|
// showLoader();
|
|
// await http
|
|
// .put(config.API.profileInforId(route.params.id.toString()), body)
|
|
// .then((res) => {
|
|
// success($q, "บันทึกข้อมูลสำเร็จ");
|
|
// })
|
|
// .catch((e) => {
|
|
// messageError($q, e);
|
|
// })
|
|
// .finally(async () => {
|
|
// edit.value = false;
|
|
// emit("update:statusEdit", false);
|
|
// await fetchData();
|
|
// await changeBirth(informaData.value.birthDate ?? new Date());
|
|
// });
|
|
};
|
|
|
|
const saveData = async () => {
|
|
await myform.value?.validate().then(async (success: boolean) => {
|
|
if (success) {
|
|
if (props.statusAdd) {
|
|
await addData();
|
|
} else {
|
|
await editData();
|
|
}
|
|
} else {
|
|
}
|
|
});
|
|
};
|
|
|
|
const clickPreviousNext = (page: string) => {
|
|
const index: number =
|
|
page == "next" ? indexRow.value - 1 : indexRow.value + 1;
|
|
let length: number = familyDataHistory.value.length;
|
|
previous.value = index == 0 ? false : true;
|
|
next.value = index == length - 1 ? false : true;
|
|
indexRow.value = index;
|
|
};
|
|
|
|
const selectRadio = (e: boolean, i: any) => {
|
|
if (e) {
|
|
familyData.value.prefixIdC = "";
|
|
familyData.value.firstnameC = "";
|
|
familyData.value.lastnameC = "";
|
|
familyData.value.lastnameCOld = "";
|
|
familyData.value.occupationC = "";
|
|
familyData.value.liveC = "";
|
|
familyData.value.citizenIdC = "";
|
|
}
|
|
};
|
|
|
|
const changeBtn = async () => {
|
|
if (edit.value == true) {
|
|
if (props.statusEdit === true) {
|
|
edit.value = false;
|
|
props.notiNoEdit();
|
|
} else {
|
|
emit("update:statusEdit", true);
|
|
}
|
|
} else {
|
|
emit("update:statusEdit", false);
|
|
}
|
|
};
|
|
|
|
const getClass = (val: boolean) => {
|
|
return {
|
|
"full-width inputgreen cursor-pointer": val,
|
|
"full-width cursor-pointer": !val,
|
|
};
|
|
};
|
|
</script>
|