From fc86ff1e222d0dfd7c11c36a48a9ce69ad7e6b9b Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Thu, 14 Sep 2023 14:33:48 +0700
Subject: [PATCH] =?UTF-8?q?history=20=E0=B8=82=E0=B9=89=E0=B8=AD=E0=B8=A1?=
 =?UTF-8?q?=E0=B8=B9=E0=B8=A5=E0=B8=84=E0=B8=A3=E0=B8=AD=E0=B8=9A=E0=B8=84?=
 =?UTF-8?q?=E0=B8=A3=E0=B8=B1=E0=B8=A7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/Information/Family.vue         | 369 +++++++++-
 .../components/ListRetirement/AddList.vue     |   7 +-
 .../views/Information/Family.vue              | 696 +++++++++---------
 3 files changed, 706 insertions(+), 366 deletions(-)

diff --git a/src/modules/04_registry/components/Information/Family.vue b/src/modules/04_registry/components/Information/Family.vue
index 4a222994a..0eb990250 100644
--- a/src/modules/04_registry/components/Information/Family.vue
+++ b/src/modules/04_registry/components/Information/Family.vue
@@ -13,7 +13,7 @@
       :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="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">
@@ -548,6 +548,7 @@
       </div>
     </q-form>
   </q-card>
+
   <DialogHistory
     v-model:modal="modal"
     v-model:fix="fix"
@@ -586,7 +587,90 @@
             :disable="true"
           />
         </div>
-        <div class="col-xs-6 col-sm-2 col-md-2">
+        <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
@@ -626,7 +710,6 @@
                       ) "
           />
         </div>
-
         <div class="col-xs-6 col-sm-3 col-md-3">
           <q-input
             :class="getClass(false)"
@@ -667,7 +750,7 @@
             v-model="familyDataHistory[indexRow].fatherCareer"
             :label="`${'อาชีพ'}`"
           />
-        </div>
+        </div> -->
 
         <div class="col-12 q-pt-md q-pb-sm"><q-separator /></div>
         <div class="col-xs-12 text-weight-bold">
@@ -691,7 +774,89 @@
             :disable="true"
           />
         </div>
-        <div class="col-xs-6 col-sm-2 col-md-2">
+        <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
@@ -772,7 +937,7 @@
             v-model="familyDataHistory[indexRow].motherCareer"
             :label="`${'อาชีพ'}`"
           />
-        </div>
+        </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>
@@ -827,7 +992,107 @@
             />
           </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'"
         >
@@ -876,7 +1141,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
@@ -893,7 +1158,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
@@ -941,7 +1206,7 @@
             v-model="familyDataHistory[indexRow].coupleCareer"
             :label="`${'อาชีพ'}`"
           />
-        </div>
+        </div> -->
 
         <div class="col-12 q-pt-md q-pb-sm"><q-separator /></div>
       </div>
@@ -977,7 +1242,89 @@
               :disable="true"
             />
           </div>
-          <div class="col-xs-6 col-sm-2 col-md-2">
+          <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
@@ -1057,7 +1404,7 @@
               v-model="items.childrenCareer"
               :label="`${'อาชีพ'}`"
             />
-          </div>
+          </div> -->
         </div>
       </div>
     </template>
diff --git a/src/modules/06_retirement/components/ListRetirement/AddList.vue b/src/modules/06_retirement/components/ListRetirement/AddList.vue
index 4d4b205b7..6a08a6169 100644
--- a/src/modules/06_retirement/components/ListRetirement/AddList.vue
+++ b/src/modules/06_retirement/components/ListRetirement/AddList.vue
@@ -193,7 +193,7 @@ const clickAdd = (props: any) => {
       // console.log("เพิ่มข้อมูล");
       await http
         .put(config.API.profileRetire(retireld.value), { profileId: data })
-        .then((res) => {
+        .then(() => {
           success($q, "เพิ่มข้อมูลสำเร็จ");
           updateListData(retireld.value, data);
         })
@@ -239,10 +239,9 @@ const paginationLabel = (start: number, end: number, total: number) => {
   >
 
   <q-dialog v-model="modal">
-    <q-card style="width: 850px; max-width: 80vw" class="q-pb-md">
+    <q-card style="width: 900px; max-width: 80vw" class="q-pb-md">
       <q-toolbar class="q-py-md">
-        <q-toolbar-title class="text-h6">เพิ่มรายชื่อ
-        </q-toolbar-title>
+        <q-toolbar-title class="text-h6">เพิ่มรายชื่อ </q-toolbar-title>
         <q-btn
           icon="close"
           unelevated
diff --git a/src/modules/08_registryEmployee/views/Information/Family.vue b/src/modules/08_registryEmployee/views/Information/Family.vue
index 56f90b37a..e7f7151c6 100644
--- a/src/modules/08_registryEmployee/views/Information/Family.vue
+++ b/src/modules/08_registryEmployee/views/Information/Family.vue
@@ -13,7 +13,7 @@
       :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="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">
@@ -409,7 +409,7 @@
         </div>
 
         <div
-          class="row col-12  q-col-gutter-xs"
+          class="row col-12 q-col-gutter-xs"
           v-for="(items, index) in familyData.childrens"
           :key="index"
         >
@@ -586,90 +586,90 @@
             :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 || `${'กรุณาเลือก คำนำหน้าชื่อ'}`]"
-            :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,
+        <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-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
@@ -691,89 +691,90 @@
             :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 || `${'กรุณาเลือก คำนำหน้าชื่อ'}`]"
-            :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,
+        <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-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">
+            <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-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
@@ -827,120 +828,105 @@
             />
           </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"
+          class="row col-12"
           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,
+          <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-xs-6 col-sm-3 col-md-3"
-          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-3 col-md-3"
-          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">
+            <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-12 q-pt-md q-pb-sm"><q-separator /></div>
@@ -977,86 +963,87 @@
               :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 || `${'กรุณาเลือก คำนำหน้าชื่อ'}`]"
-              :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,
+          <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-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 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>
       </div>
@@ -1126,7 +1113,14 @@ const route = useRoute();
 const $q = useQuasar();
 
 const mixin = useCounterMixin();
-const { date2Thai, success, messageError, showLoader, hideLoader ,dialogConfirm} = mixin;
+const {
+  date2Thai,
+  success,
+  messageError,
+  showLoader,
+  hideLoader,
+  dialogConfirm,
+} = mixin;
 const edit = ref<boolean>(false);
 const fix = ref<boolean>(true);
 const myform = ref<QForm | null>(null);
@@ -1456,9 +1450,9 @@ const addData = async () => {
   //       await changeBirth(informaData.value.birthDate ?? new Date());
   //     });
 };
-const saveData = () =>{
-  dialogConfirm($q,() => Datasave())
-}
+const saveData = () => {
+  dialogConfirm($q, () => Datasave());
+};
 const Datasave = async () => {
   await myform.value?.validate().then(async (success: boolean) => {
     if (success) {