รวมไฟล์แก้งานงวด2

src/modules/04_registry/components/Information/Family.vue

@@ -5,24 +5,62 @@
       header="ข้อมูลครอบครัว"
       icon="mdi-account-group"
       :save="saveData"
-      :history="!statusAdd()"
+      :history="true"
       :changeBtn="changeBtn"
       :disable="statusEdit"
       :cancel="refreshData"
       :historyClick="historyData"
-      :addEmployee="statusAdd()"
     />
     <q-form ref="myform" class="col-12">
       <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">• บิดา</div>
-        <div class="col-xs-12 col-sm-3 col-md-3">
+        <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 || `${'กรุณาเลือก คำนำหน้า'}`]"
+            :rules="[(val:string) => !!val || `${'กรุณาเลือก คำนำหน้าชื่อ'}`]"
             :outlined="edit"
             dense
             lazy-rules
@@ -32,7 +70,7 @@
             option-label="name"
             :options="Ops.prefixOps"
             option-value="id"
-            :label="`${'คำนำหน้า'}`"
+            :label="`${'คำนำหน้าชื่อ'}`"
             use-input
             input-debounce="0"
             @filter="(inputValue:any,
@@ -69,7 +107,7 @@
             :label="`${'นามสกุล'}`"
           />
         </div>
-        <div class="col-xs-12 col-sm-3 col-md-3">
+        <div class="col-xs-12 col-sm-2 col-md-2">
           <q-input
             :class="getClass(edit)"
             hide-bottom-space
@@ -84,15 +122,54 @@
         </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">
+        <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 || `${'กรุณาเลือก คำนำหน้า'}`]"
+            :rules="[(val:string) => !!val || `${'กรุณาเลือก คำนำหน้าชื่อ'}`]"
             :outlined="edit"
             dense
             lazy-rules
@@ -102,7 +179,7 @@
             option-label="name"
             :options="Ops.prefixOps"
             option-value="id"
-            :label="`${'คำนำหน้า'}`"
+            :label="`${'คำนำหน้าชื่อ'}`"
             use-input
             input-debounce="0"
             @filter="(inputValue:any,
@@ -139,7 +216,7 @@
             :label="`${'นามสกุล'}`"
           />
         </div>
-        <div class="col-xs-12 col-sm-3 col-md-3">
+        <div class="col-xs-12 col-sm-2 col-md-2">
           <q-input
             :class="getClass(edit)"
             hide-bottom-space
@@ -153,27 +230,75 @@
           />
         </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.same"
-            checked-icon="task_alt"
-            unchecked-icon="panorama_fish_eye"
-            val="1"
-            label="มี"
-            dense
-            :disable="!edit"
-            @update:model-value="selectRadio"
+
+        <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'"
           />
-          <q-radio
-            v-model="familyData.same"
-            checked-icon="task_alt"
-            unchecked-icon="panorama_fish_eye"
-            val="0"
-            label="ไม่มี"
+          <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
-            :disable="!edit"
-            @update:model-value="selectRadio"
+            lazy-rules
+            :readonly="!edit"
+            :borderless="!edit"
+            v-model="familyData.citizenIdC"
+            :label="`${'เลขที่บัตรประชาชน'}`"
+            maxlength="13"
+            mask="#############"
           />
         </div>
 
@@ -184,7 +309,7 @@
             :class="getClass(edit)"
             :readonly="!edit"
             :borderless="!edit"
-            :rules="[(val:string) => !!val || `${'กรุณาเลือก คำนำหน้า'}`]"
+            :rules="[(val:string) => !!val || `${'กรุณาเลือก คำนำหน้าชื่อ'}`]"
             :outlined="edit"
             dense
             lazy-rules
@@ -194,7 +319,7 @@
             option-label="name"
             :options="Ops.prefixOps"
             option-value="id"
-            :label="`${'คำนำหน้า'}`"
+            :label="`${'คำนำหน้าชื่อ'}`"
             use-input
             input-debounce="0"
             @filter="(inputValue:any,
@@ -203,7 +328,7 @@
           />
         </div>
 
-        <div class="col-xs-6 col-sm-3 col-md-3" v-if="familyData.same == '1'">
+        <div class="col-xs-6 col-sm-2 col-md-2" v-if="familyData.same == '1'">
           <q-input
             :class="getClass(edit)"
             hide-bottom-space
@@ -245,7 +370,7 @@
             :label="`${'นามสกุล(เดิม)'}`"
           />
         </div>
-        <div class="col-xs-12 col-sm-3 col-md-3" v-if="familyData.same == '1'">
+        <div class="col-xs-12 col-sm-2 col-md-2" v-if="familyData.same == '1'">
           <q-input
             :class="getClass(edit)"
             hide-bottom-space
@@ -261,7 +386,9 @@
 
         <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="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>
@@ -282,35 +409,70 @@
 
         <div
           class="row col-12 items-center q-col-gutter-xs"
-          v-for="items in familyData.childrens"
-          :key="items.id"
+          v-for="(items, index) in familyData.childrens"
+          :key="index"
         >
-          <q-btn
-            v-if="edit"
-            size="12px"
-            flat
-            round
-            :disable="!edit"
-            :color="!edit ? 'grey-7' : 'red'"
-            @click="deleteChildren(items)"
-            icon="mdi-delete-outline"
-          >
-            <q-tooltip>ลบข้อมูล</q-tooltip>
-          </q-btn>
-          <div
-            :class="
-              edit
-                ? 'col-xs-10 col-sm-2 col-md-2'
-                : 'col-xs-12 col-sm-3 col-md-3'
-            "
-          >
+          <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 || `${'กรุณาเลือก คำนำหน้า'}`]"
+              :rules="[(val:string) => !!val || `${'กรุณาเลือก คำนำหน้าชื่อ'}`]"
               :outlined="edit"
               dense
               lazy-rules
@@ -320,7 +482,7 @@
               option-label="name"
               :options="Ops.prefixOps"
               option-value="id"
-              :label="`${'คำนำหน้า'}`"
+              :label="`${'คำนำหน้าชื่อ'}`"
               use-input
               input-debounce="0"
               @filter="(inputValue:any,
@@ -356,7 +518,13 @@
               :label="`${'นามสกุล'}`"
             />
           </div>
-          <div class="col-xs-12 col-sm-3 col-md-3">
+          <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
@@ -369,6 +537,12 @@
               :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>
@@ -390,15 +564,50 @@
             }`
           }}
         </div>
-        <div class="col-xs-12 text-weight-bold">• บิดา</div>
-        <div class="col-xs-12 col-sm-3 col-md-3">
+        <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="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 || `${'กรุณาเลือก คำนำหน้า'}`]"
+            :rules="[(val:string) => !!val || `${'กรุณาเลือก คำนำหน้าชื่อ'}`]"
             :outlined="false"
             dense
             lazy-rules
@@ -408,7 +617,7 @@
             option-label="name"
             :options="Ops.prefixOps"
             option-value="id"
-            :label="`${'คำนำหน้า'}`"
+            :label="`${'คำนำหน้าชื่อ'}`"
             use-input
             input-debounce="0"
             @filter="(inputValue:any,
@@ -445,7 +654,7 @@
             :label="`${'นามสกุล'}`"
           />
         </div>
-        <div class="col-xs-12 col-sm-3 col-md-3">
+        <div class="col-xs-12 col-sm-2 col-md-2">
           <q-input
             :class="getClass(false)"
             hide-bottom-space
@@ -460,15 +669,50 @@
         </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">
+        <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="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 || `${'กรุณาเลือก คำนำหน้า'}`]"
+            :rules="[(val:string) => !!val || `${'กรุณาเลือก คำนำหน้าชื่อ'}`]"
             :outlined="false"
             dense
             lazy-rules
@@ -478,7 +722,7 @@
             option-label="name"
             :options="Ops.prefixOps"
             option-value="id"
-            :label="`${'คำนำหน้า'}`"
+            :label="`${'คำนำหน้าชื่อ'}`"
             use-input
             input-debounce="0"
             @filter="(inputValue:any,
@@ -515,7 +759,7 @@
             :label="`${'นามสกุล'}`"
           />
         </div>
-        <div class="col-xs-12 col-sm-3 col-md-3">
+        <div class="col-xs-12 col-sm-2 col-md-2">
           <q-input
             :class="getClass(false)"
             hide-bottom-space
@@ -547,14 +791,62 @@
             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="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-3 col-md-3"
+          class="col-xs-12 col-sm-2 col-md-2"
           v-if="familyDataHistory[indexRow].couple == '1'"
         >
           <selector
@@ -563,7 +855,7 @@
             :class="getClass(false)"
             :readonly="true"
             :borderless="true"
-            :rules="[(val:string) => !!val || `${'กรุณาเลือก คำนำหน้า'}`]"
+            :rules="[(val:string) => !!val || `${'กรุณาเลือก คำนำหน้าชื่อ'}`]"
             :outlined="false"
             dense
             lazy-rules
@@ -573,7 +865,7 @@
             option-label="name"
             :options="Ops.prefixOps"
             option-value="id"
-            :label="`${'คำนำหน้า'}`"
+            :label="`${'คำนำหน้าชื่อ'}`"
             use-input
             input-debounce="0"
             @filter="(inputValue:any,
@@ -617,7 +909,7 @@
           />
         </div>
         <div
-          class="col-xs-6 col-sm-3 col-md-3"
+          class="col-xs-6 col-sm-2 col-md-2"
           v-if="familyDataHistory[indexRow].couple == '1'"
         >
           <q-input
@@ -634,7 +926,7 @@
           />
         </div>
         <div
-          class="col-xs-12 col-sm-3 col-md-3"
+          class="col-xs-12 col-sm-2 col-md-2"
           v-if="familyDataHistory[indexRow].couple == '1'"
         >
           <q-input
@@ -662,14 +954,51 @@
           v-for="items in familyDataHistory[indexRow].childrens"
           :key="items.id"
         >
-          <div class="col-xs-12 col-sm-3 col-md-3">
+          <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="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 || `${'กรุณาเลือก คำนำหน้า'}`]"
+              :rules="[(val:string) => !!val || `${'กรุณาเลือก คำนำหน้าชื่อ'}`]"
               :outlined="false"
               dense
               lazy-rules
@@ -679,7 +1008,7 @@
               option-label="name"
               :options="Ops.prefixOps"
               option-value="id"
-              :label="`${'คำนำหน้า'}`"
+              :label="`${'คำนำหน้าชื่อ'}`"
               use-input
               input-debounce="0"
               @filter="(inputValue:any,
@@ -715,7 +1044,7 @@
               :label="`${'นามสกุล'}`"
             />
           </div>
-          <div class="col-xs-12 col-sm-3 col-md-3">
+          <div class="col-xs-12 col-sm-2 col-md-2">
             <q-input
               :class="getClass(false)"
               hide-bottom-space
@@ -785,10 +1114,6 @@ const props = defineProps({
     type: Function,
     default: () => console.log("not function"),
   },
-  statusAdd: {
-    type: Boolean,
-    default: false,
-  },
 });
 const emit = defineEmits(["update:statusEdit"]);
 
@@ -815,16 +1140,22 @@ const familyData = ref<Family>({
   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: [],
 });
@@ -840,37 +1171,8 @@ 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,
-      prefixM: null,
-      prefixIdM: null,
-      firstnameM: null,
-      lastnameM: null,
-      occupationM: null,
-      prefixF: null,
-      prefixIdF: null,
-      firstnameF: null,
-      lastnameF: null,
-      occupationF: null,
-      same: "0",
-      childrens: [],
-    };
-  }
-};
-
 const historyData = async () => {
   await fetchHistory();
 };
@@ -918,6 +1220,8 @@ const addChildren = async () => {
     childrenFirstName: "",
     childrenLastName: "",
     childrenCareer: "",
+    childrenLive: "1",
+    childrenCitizenId: "",
   });
 
   familyData.value.childrens.sort(
@@ -948,14 +1252,20 @@ const fetchHistory = async () => {
           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),
@@ -989,55 +1299,61 @@ const fetchHistory = async () => {
 };
 
 const fetchData = async () => {
-  if (route.params.id) {
-    loaderPage(true);
-    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;
-        familyData.value.firstnameC = data.coupleFirstName;
-        familyData.value.lastnameC = data.coupleLastName;
-        familyData.value.lastnameCOld = data.coupleLastNameOld;
-        familyData.value.occupationC = data.coupleCareer;
-        familyData.value.prefixM = "";
-        familyData.value.prefixIdM = data.fatherPrefixId;
+  loaderPage(true);
+  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;
+      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.firstnameM = data.fatherFirstName;
-        familyData.value.lastnameM = data.fatherLastName;
-        familyData.value.occupationM = data.fatherCareer;
-        familyData.value.prefixF = "";
-        familyData.value.prefixIdF = data.motherPrefixId;
+      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;
 
-        familyData.value.firstnameF = data.motherFirstName;
-        familyData.value.lastnameF = data.motherLastName;
-        familyData.value.occupationF = data.motherCareer;
-        familyData.value.same = data.couple ? "1" : "0";
+      familyData.value.prefixF = "";
+      familyData.value.prefixIdF = 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,
-            });
+      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 () => {
-        loaderPage(false);
-      });
-  }
+        });
+        familyData.value.childrens = dataChild;
+      } else {
+        familyData.value.childrens = [];
+      }
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      loaderPage(false);
+    });
 };
 
 const editData = async () => {
@@ -1049,14 +1365,20 @@ const editData = async () => {
     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(),
@@ -1076,32 +1398,10 @@ const editData = async () => {
     });
 };
 
-const addData = async () => {
-  //     loaderPage(true);
-  //   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();
-      }
+      await editData();
     } else {
     }
   });
@@ -1123,6 +1423,8 @@ const selectRadio = (e: boolean, i: any) => {
     familyData.value.lastnameC = "";
     familyData.value.lastnameCOld = "";
     familyData.value.occupationC = "";
+    familyData.value.liveC = "";
+    familyData.value.citizenIdC = "";
   }
 };