Merge branch 'develop' into devTee

# Conflicts:
#	src/modules/15_development/views/EmployeeHistory.vue
#	src/modules/15_development/views/History.vue

src/modules/01_metadata/components/Calendar.vue

@@ -75,7 +75,7 @@
                   :outlined="edit"
                   dense
                   label="วันที่"
-                  lazy-rules
+                  
                   :borderless="!edit"
                   :model-value="dateThaiRange(dateRange)"
                 >

src/modules/01_metadataNew/components/calendar/Calendar.vue

@@ -75,7 +75,7 @@
                   :outlined="edit"
                   dense
                   label="วันที่"
-                  lazy-rules
+                 
                   :borderless="!edit"
                   :model-value="dateThaiRange(dateRange)"
                 >

src/modules/03_recruiting/components/Career.vue

@@ -186,7 +186,6 @@
                     "
                     :outlined="status == 'checkRegister' || status == 'payment'"
                     dense
-                    lazy-rules
                     :borderless="
                       !status == 'checkRegister' || status == 'payment'
                     "
@@ -240,7 +239,6 @@
                     "
                     :outlined="status == 'checkRegister' || status == 'payment'"
                     dense
-                    lazy-rules
                     :borderless="
                       !status == 'checkRegister' || status == 'payment'
                     "

src/modules/03_recruiting/components/Education.vue

@@ -113,7 +113,6 @@
                 "
                 :outlined="status == 'checkRegister' || status == 'payment'"
                 dense
-                lazy-rules
                 :readonly="!(status == 'checkRegister' || status == 'payment')"
                 :borderless="
                   !(status == 'checkRegister' || status == 'payment')

src/modules/03_recruiting/components/Information.vue

@@ -151,7 +151,6 @@
               "
               :outlined="status == 'checkRegister' || status == 'payment'"
               dense
-              lazy-rules
               :readonly="!(status == 'checkRegister' || status == 'payment')"
               :borderless="!(status == 'checkRegister' || status == 'payment')"
               :model-value="

src/modules/03_recruiting/views/02_qualify/DisablePeriodAdd.vue

@@ -61,7 +61,7 @@
               <template #trigger>
                 <q-input
                   dense
-                  lazy-rules
+                  
                   outlined
                   :model-value="yearly + 543"
                   :rules="[(val) => !!val || `${'กรุณาเลือกปีงบประมาณ'}`]"

src/modules/03_recruiting/views/02_qualify/PeriodAdd.vue

@@ -88,7 +88,6 @@
               <template #trigger>
                 <q-input
                   dense
-                  lazy-rules
                   outlined
                   :model-value="yearly + 543"
                   :rules="[(val) => !!val || `${'กรุณาเลือกปีงบประมาณ'}`]"

src/modules/04_registry/components/Coin.vue

@@ -144,7 +144,7 @@ a
                     :class="getClass(edit)"
                     :outlined="edit"
                     dense
-                    lazy-rules
+                    
                     :borderless="!edit"
                     :model-value="issueDate + 543"
                     hide-bottom-space
@@ -186,7 +186,7 @@ a
                     :class="getClass(edit)"
                     :outlined="edit"
                     dense
-                    lazy-rules
+                    
                     :borderless="!edit"
                     :model-value="date2Thai(issueDate2)"
                     :rules="[(val) => !!val || `${'กรุณาเลือกวันที่ได้รับ'}`]"
@@ -293,7 +293,7 @@ a
                     :class="getClass(edit)"
                     :outlined="edit"
                     dense
-                    lazy-rules
+                    
                     :borderless="!edit"
                     :model-value="
                       refCommandDate == null ? null : date2Thai(refCommandDate)

src/modules/04_registry/components/DialogFormLeave.vue

@@ -130,7 +130,7 @@ watch(
                 <template #trigger>
                   <q-input
                     dense
-                    lazy-rules
+                    
                     hide-bottom-space
                     :rules="[(val:string) => !!val || `${'กรุณาเลือกปี'}`]"
                     :class="inputEdit(isReadonly)"

src/modules/04_registry/components/Discipline.vue

@@ -92,7 +92,7 @@
                     :class="getClass(edit)"
                     :outlined="edit"
                     dense
-                    lazy-rules
+                    
                     :borderless="!edit"
                     :model-value="date2Thai(date)"
                     :rules="[(val:string) => !!val || `${'กรุณาเลือก วัน/เดือน/ปี'}`]"
@@ -219,7 +219,7 @@
                     :class="getClass(edit)"
                     :outlined="edit"
                     dense
-                    lazy-rules
+                    
                     :borderless="!edit"
                     :model-value="
                       (refCommandDate && date2Thai(refCommandDate as Date)) || null

src/modules/04_registry/components/Education.vue

@@ -174,7 +174,7 @@
                             :class="getClass(edit)"
                             :outlined="edit"
                             dense
-                            lazy-rules
+                           
                             :borderless="!edit"
                             :model-value="Number(startDate) + 543"
                             :rules="[
@@ -233,7 +233,7 @@
                             :class="getClass(edit)"
                             :outlined="edit"
                             dense
-                            lazy-rules
+                            
                             :borderless="!edit"
                             :model-value="date2Thai(startDate2 as Date)"
                             :rules="[
@@ -297,7 +297,7 @@
                             :class="getClass(edit)"
                             :outlined="edit"
                             dense
-                            lazy-rules
+                         
                             :borderless="!edit"
                             :model-value="Number(endDate) + 543"
                             :rules="[
@@ -355,7 +355,7 @@
                             :class="getClass(edit)"
                             :outlined="edit"
                             dense
-                            lazy-rules
+                            
                             :borderless="!edit"
                             :model-value="date2Thai(endDate2 as Date)"
                             :rules="[
@@ -415,7 +415,7 @@
                     :class="getClass(edit)"
                     :outlined="edit"
                     dense
-                    lazy-rules
+                    
                     :borderless="!edit"
                     :model-value="finishDate ? date2Thai(finishDate as Date) : null"
                     hide-bottom-space

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

@@ -11,7 +11,9 @@
         v-model:inputvisible="visibleColumns"
         :add="clickAdd"
         :name="
-          profileType == 'employee' ? 'ใบอนุญาตของลูกจ้าง' : 'ใบอนุญาตประกอบวิชาชีพ'
+          profileType == 'employee'
+            ? 'ใบอนุญาตของลูกจ้าง'
+            : 'ใบอนุญาตประกอบวิชาชีพ'
         "
         icon="mdi-book"
         :statusEdit="statusEdit"
@@ -59,7 +61,9 @@
       <q-form ref="myForm">
         <DialogHeader
           :tittle="
-            profileType == 'employee' ? 'ใบอนุญาตของลูกจ้าง' : 'ใบอนุญาตประกอบวิชาชีพ'
+            profileType == 'employee'
+              ? 'ใบอนุญาตของลูกจ้าง'
+              : 'ใบอนุญาตประกอบวิชาชีพ'
           "
           :close="clickClose"
         />
@@ -192,7 +196,6 @@
                     :class="getClass(edit)"
                     :outlined="edit"
                     dense
-                    lazy-rules
                     :borderless="!edit"
                     :model-value="date2Thai(expireDate as Date)"
                     :label="`${'วันที่หมดอายุ'}`"
@@ -515,14 +518,14 @@ const fetchData = async () => {
             id: e.id,
             certificateNo: e.certificateNo,
             issuer: e.issuer,
-            issueDate: e.issueDate !== null ? new Date(e.issueDate):null,
-            expireDate: e.expireDate !== null ? new Date(e.expireDate):null,
+            issueDate: e.issueDate !== null ? new Date(e.issueDate) : null,
+            expireDate: e.expireDate !== null ? new Date(e.expireDate) : null,
             certificateType: e.certificateType,
             createdFullName: e.createdFullName,
             createdAt: new Date(e.createdAt),
           });
-          console.log(rows.value)
-          console.log(data)
+          console.log(rows.value);
+          console.log(data);
         });
       })
       .catch((e) => {
@@ -564,8 +567,10 @@ const getData = () => {
   issuer.value = row.issuer;
   issueDate.value = row.issueDate;
   expireDate.value = row.expireDate;
-  inputIssueDate.value = row.issueDate !== null ? convertDateDisplay(row.issueDate as Date):'';
-  inputExpireDate.value = row.expireDate !== null ? convertDateDisplay(row.expireDate as Date):'';
+  inputIssueDate.value =
+    row.issueDate !== null ? convertDateDisplay(row.issueDate as Date) : "";
+  inputExpireDate.value =
+    row.expireDate !== null ? convertDateDisplay(row.expireDate as Date) : "";
   certificateType.value = row.certificateType;
   id.value = row.id;
 };
@@ -626,8 +631,8 @@ const saveData = async () => {
       id: id.value,
       certificateNo: certificateNo.value,
       issuer: issuer.value,
-      issueDate: issueDate.value ? dateToISO(issueDate.value as Date):null,
-      expireDate: expireDate.value ? dateToISO(expireDate.value as Date):null,
+      issueDate: issueDate.value ? dateToISO(issueDate.value as Date) : null,
+      expireDate: expireDate.value ? dateToISO(expireDate.value as Date) : null,
       certificateType: certificateType.value,
     })
     .then((res) => {
@@ -652,8 +657,8 @@ const editData = async () => {
       id: id.value,
       certificateNo: certificateNo.value,
       issuer: issuer.value,
-      issueDate: issueDate.value ? dateToISO(issueDate.value as Date):null,
-      expireDate: expireDate.value ? dateToISO(expireDate.value as Date):null,
+      issueDate: issueDate.value ? dateToISO(issueDate.value as Date) : null,
+      expireDate: expireDate.value ? dateToISO(expireDate.value as Date) : null,
       certificateType: certificateType.value,
     })
     .then((res) => {
@@ -736,8 +741,14 @@ const selectData = async (props: DataProps) => {
   issuer.value = props.row.issuer;
   issueDate.value = props.row.issueDate;
   expireDate.value = props.row.expireDate;
-  inputIssueDate.value = props.row.issueDate !== null ? convertDateDisplay(props.row.issueDate as Date):'';
-  inputExpireDate.value = props.row.expireDate !== null ? convertDateDisplay(props.row.expireDate as Date):'';
+  inputIssueDate.value =
+    props.row.issueDate !== null
+      ? convertDateDisplay(props.row.issueDate as Date)
+      : "";
+  inputExpireDate.value =
+    props.row.expireDate !== null
+      ? convertDateDisplay(props.row.expireDate as Date)
+      : "";
   certificateType.value = props.row.certificateType;
   id.value = props.row.id;
   await checkRowPage();
@@ -858,8 +869,8 @@ watch(
       } else {
         inputIssueDate.value = "";
       }
-    }else if(value.length === 0){
-      issueDate.value = null
+    } else if (value.length === 0) {
+      issueDate.value = null;
     }
   }
 );
@@ -874,8 +885,8 @@ watch(
       } else {
         inputExpireDate.value = "";
       }
-    }else if(value.length === 0){
-      expireDate.value = null
+    } else if (value.length === 0) {
+      expireDate.value = null;
     }
   }
 );

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

@@ -157,7 +157,7 @@
                 hide-bottom-space
                 :outlined="edit"
                 dense
-                lazy-rules
+               
                 :readonly="!edit"
                 :borderless="!edit"
                 :model-value="
@@ -228,7 +228,7 @@
                 hide-bottom-space
                 :outlined="edit"
                 dense
-                lazy-rules
+                l
                 :readonly="!edit"
                 :borderless="!edit"
                 :model-value="

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

@@ -1187,7 +1187,7 @@ const getClass = (val: boolean) => {
 };
 
 // change date input
-const inputBirthDate = ref<string>("");
+const inputBirthDate = ref<any>("");
 const dayChecked = ref<boolean>(false);
 watch(
   () => inputBirthDate.value,

src/modules/04_registry/components/Insignia.vue

@@ -101,7 +101,7 @@
                     :class="getClass(edit)"
                     :outlined="edit"
                     dense
-                    lazy-rules
+                    
                     :borderless="!edit"
                     :model-value="year !== 0 ? (year as number) + 543:null"
                     :rules="[
@@ -160,7 +160,7 @@
                     :class="getClass(edit)"
                     :outlined="edit"
                     dense
-                    lazy-rules
+                    
                     :borderless="!edit"
                     :model-value="date2Thai(receiveDate as Date)"
                     :rules="[(val:string) => !!val || `${'กรุณากรอก วัน/เดือน/ปี ที่ได้รับ'}`]"
@@ -341,7 +341,7 @@
                     :class="getClass(edit)"
                     :outlined="edit"
                     dense
-                    lazy-rules
+                    
                     :borderless="!edit"
                     :model-value="date2Thai(dateAnnounce as Date)"
                     hide-bottom-space
@@ -426,7 +426,7 @@
                     :class="getClass(edit)"
                     :outlined="edit"
                     dense
-                    lazy-rules
+                    
                     :borderless="!edit"
                     :model-value="
                       refCommandDate == null ? null : date2Thai(refCommandDate as Date)

src/modules/04_registry/components/Leave.vue

@@ -246,7 +246,7 @@
                 <template #trigger>
                   <q-input
                     dense
-                    lazy-rules
+                    
                     hide-bottom-space
                     :rules="[(val:string) => !!val || `${'กรุณาเลือกปี'}`]"
                     :class="getClass(edit)"

src/modules/04_registry/components/Other.vue

@@ -87,7 +87,7 @@
                     :class="getClass(edit)"
                     :outlined="edit"
                     dense
-                    lazy-rules
+                    
                     :borderless="!edit"
                     :model-value="date2Thai(date)"
                     :label="`${'วันที่'}`"

src/modules/04_registry/components/Profile.vue

@@ -692,7 +692,7 @@
                   class="full-width inputgreen cursor-pointer"
                   outlined
                   dense
-                  lazy-rules
+                  
                   :model-value="date2Thai(leaveDate)"
                   :rules="[(val) => !!val || `${'กรุณาเลือกวันที่พ้นราชการ'}`]"
                   hide-bottom-space
@@ -757,7 +757,7 @@
                   class="full-width inputgreen cursor-pointer"
                   outlined
                   dense
-                  lazy-rules
+                  
                   :model-value="date2Thai(leaveDateOrder)"
                   :rules="[(val) => !!val || `${'กรุณาเลือกวันที่ออกคำสั่ง'}`]"
                   hide-bottom-space

src/modules/04_registry/components/Record.vue

@@ -98,7 +98,7 @@
                     :class="getClass(edit)"
                     :outlined="edit"
                     dense
-                    lazy-rules
+                    
                     :borderless="!edit"
                     :model-value="date2Thai(date)"
                     :rules="[(val) => !!val || `${'กรุณาเลือก วัน/เดือน/ปี'}`]"
@@ -208,7 +208,7 @@
                     :class="getClass(edit)"
                     :outlined="edit"
                     dense
-                    lazy-rules
+                    
                     :borderless="!edit"
                     :model-value="
                       refCommandDate == null ? null : date2Thai(refCommandDate as Date)

src/modules/04_registry/components/Salary.vue

@@ -150,7 +150,7 @@
                             :class="getClass(edit)"
                             :outlined="edit"
                             dense
-                            lazy-rules
+                            
                             :borderless="!edit"
                             :model-value="date2Thai(formDataSalary.date)"
                             :rules="[

src/modules/04_registry/components/SalaryEmployee.vue

@@ -142,7 +142,7 @@
                             :class="getClass(edit)"
                             :outlined="edit"
                             dense
-                            lazy-rules
+                            
                             :borderless="!edit"
                             :model-value="date2Thai(date)"
                             :rules="[

src/modules/04_registry/components/SalaryEmployeeTemp.vue

@@ -142,7 +142,7 @@
                             :class="getClass(edit)"
                             :outlined="edit"
                             dense
-                            lazy-rules
+                            
                             :borderless="!edit"
                             :model-value="date2Thai(date)"
                             :rules="[

src/modules/04_registry/components/Train.vue

@@ -168,7 +168,6 @@
                             :class="getClass(edit)"
                             :outlined="edit"
                             dense
-                            lazy-rules
                             :borderless="!edit"
                             :model-value="
                               startDate !== 0 ? Number(startDate) + 543 : null
@@ -221,7 +220,6 @@
                             :class="getClass(edit)"
                             :outlined="edit"
                             dense
-                            lazy-rules
                             :borderless="!edit"
                             :model-value="startDate2 ? date2Thai(startDate2 as Date):null"
                             :rules="[
@@ -282,7 +280,6 @@
                             :class="getClass(edit)"
                             :outlined="edit"
                             dense
-                            lazy-rules
                             :borderless="!edit"
                             :model-value="
                               endDate !== 0 ? Number(endDate) + 543 : null
@@ -340,7 +337,6 @@
                             :class="getClass(edit)"
                             :outlined="edit"
                             dense
-                            lazy-rules
                             :borderless="!edit"
                             :model-value="endDate2 ? date2Thai(endDate2 as Date):null"
                             :rules="[
@@ -402,7 +398,6 @@
                     :class="getClass(edit)"
                     :outlined="edit"
                     dense
-                    lazy-rules
                     :borderless="!edit"
                     :model-value="yearly == 0 ? null : Number(yearly + 543)"
                     :label="`${'ปีงบประมาณ'}`"
@@ -520,7 +515,6 @@
                     hide-bottom-space
                     :outlined="edit"
                     dense
-                    lazy-rules
                     :borderless="!edit"
                     :model-value="date2Thai(dateOrder as Date)"
                     :label="`${'คำสั่งลง วัน/เดือน/ปี /หนังสืออนุมัติลงวันที่'}`"
@@ -1465,8 +1459,7 @@ watch(
       } else {
         inputStartDate2.value = "";
       }
-    }
-    else if (value.length === 0) {
+    } else if (value.length === 0) {
       startDate2.value = null;
     }
   }
@@ -1481,8 +1474,7 @@ watch(
       } else {
         inputEndDate2.value = "";
       }
-    }
-    else if (value.length === 0) {
+    } else if (value.length === 0) {
       endDate2.value = null;
     }
   }
@@ -1497,8 +1489,7 @@ watch(
       } else {
         dateOrderInput.value = "";
       }
-    }
-    else if (value.length === 0) {
+    } else if (value.length === 0) {
       dateOrder.value = null;
     }
   }
@@ -1509,8 +1500,7 @@ watch(
     if (value.length === 4) {
       const dateVal = Number(value) - 543;
       startDate.value = dateVal;
-    }
-    else if (value.length === 0) {
+    } else if (value.length === 0) {
       startDate.value = 0;
     }
   }
@@ -1521,8 +1511,7 @@ watch(
     if (value.length === 4) {
       const dateVal = Number(value) - 543;
       endDate.value = dateVal;
-    }
-    else if (value.length === 0) {
+    } else if (value.length === 0) {
       endDate.value = 0;
     }
   }
@@ -1534,8 +1523,7 @@ watch(
     if (value.length === 4) {
       const dateVal = Number(value) - 543;
       yearly.value = dateVal;
-    } 
-    else if (value.length === 0) {
+    } else if (value.length === 0) {
       yearly.value = 0;
     }
   }

src/modules/04_registry/components/Work.vue

@@ -97,7 +97,6 @@
                     :class="getClass(edit)"
                     :outlined="edit"
                     dense
-                    lazy-rules
                     :borderless="!edit"
                     :model-value="date2Thai(dateStart)"
                     :rules="[(val) => !!val || `${'กรุณาเลือกวันที่เริ่มต้น'}`]"
@@ -154,7 +153,6 @@
                     :class="getClass(edit)"
                     :outlined="edit"
                     dense
-                    lazy-rules
                     :borderless="!edit"
                     :model-value="date2Thai(dateEnd)"
                     :rules="[(val) => !!val || `${'กรุณาเลือกวันที่สิ้นสุด'}`]"
@@ -264,7 +262,6 @@
                     :class="getClass(edit)"
                     :outlined="edit"
                     dense
-                    lazy-rules
                     :borderless="!edit"
                     :model-value="
                       refCommandDate == null ? null : date2Thai(refCommandDate as Date)

src/modules/04_registry/components/salaryNew/SalaryEmployee.vue

@@ -142,7 +142,7 @@
                             :class="getClass(edit)"
                             :outlined="edit"
                             dense
-                            lazy-rules
+                            
                             :borderless="!edit"
                             :model-value="date2Thai(date)"
                             :rules="[

src/modules/04_registry/components/salaryNew/SalaryEmployeeTemp.vue

@@ -142,7 +142,6 @@
                             :class="getClass(edit)"
                             :outlined="edit"
                             dense
-                            lazy-rules
                             :borderless="!edit"
                             :model-value="date2Thai(date)"
                             :rules="[
@@ -506,7 +505,7 @@
       </q-form>
     </q-card>
   </q-dialog>
-  
+
   <HistoryTable
     :rows="rowsHistory"
     :columns="columnsHistory"
@@ -1446,7 +1445,7 @@ const nodeTree = async () => {
       messageError($q, e);
     })
     .finally(() => {
-      store.isLoad++
+      store.isLoad++;
     });
 };
 
@@ -1568,7 +1567,7 @@ const fetchData = async () => {
             refCommandNo: e.refCommandNo,
             createdFullName: e.createdFullName,
             createdAt: new Date(e.createdAt),
-            salaryStatus: null
+            salaryStatus: null,
           });
         });
       })
@@ -1576,7 +1575,7 @@ const fetchData = async () => {
         messageError($q, e);
       })
       .finally(() => {
-        store.isLoad++
+        store.isLoad++;
       });
   }
 };
@@ -2067,7 +2066,7 @@ const clickHistory = async (row: RequestItemsEmployee) => {
           refCommandNo: e.refCommandNo,
           createdFullName: e.createdFullName,
           createdAt: new Date(e.createdAt),
-          salaryStatus: null
+          salaryStatus: null,
         });
       });
     })

src/modules/04_registryNew/components/TableView.vue

@@ -295,16 +295,7 @@ watch(
               <q-item>
                 <q-item-section avatar>
                   <q-avatar>
-                    <img
-                      v-if="props.row.avatar == null"
-                      src="@/assets/avatar_user.jpg"
-                      class="col-4 img-info"
-                    />
-                    <img
-                      v-else
-                      :src="props.row.avatar"
-                      class="col-4 img-info"
-                    />
+                    <img :src="props.row.avartar" class="col-4 img-info" />
                   </q-avatar>
                 </q-item-section>
                 <q-item-section>
@@ -332,8 +323,8 @@ watch(
       <div class="col-xs-12 col-sm-4 col-md-3">
         <q-card flat bordered class="">
           <q-card-section class="text-center q-pb-none">
-            <q-avatar size="80px">
-              <img src="@/assets/avatar_user.jpg" />
+            <q-avatar size="80px" class="bg-grey-2">
+              <q-img :src="props.row.avatar" />
             </q-avatar>
 
             <div class="text-weight-medium q-mt-md">

src/modules/04_registryNew/components/detail/Achievement/01_ProfessionalLicense.vue

@@ -549,136 +549,135 @@ onMounted(async () => {
         <q-separator color="grey-4" />
 
         <q-card-section style="max-height: 55vh" class="scroll">
-            <div class="row q-gutter-sm q-pb-sm">
-              <div class="col">
-                <q-input
-                  outlined
-                  v-model="profesLicenseData.certificateType"
-                  label="ชื่อใบอนุญาต"
-                  bg-color="white"
-                  dense
-                  class="inputgreen"
-                  :rules="[(val) => !!val || `${'กรุณากรอกชื่อใบอนุญาต'}`]"
-                  hide-bottom-space
-                />
-              </div>
-              <div class="col">
-                <q-input
-                  outlined
-                  v-model="profesLicenseData.issuer"
-                  label="หน่วยงานผู้ออกใบอนุญาต"
-                  bg-color="white"
-                  dense
-                  class="inputgreen"
-                  :rules="[
-                    (val) => !!val || `${'กรุณากรอกหน่วยงานผู้ออกใบอนุญาต'}`,
-                  ]"
-                  hide-bottom-space
-                />
-              </div>
+          <div class="row q-gutter-sm q-pb-sm">
+            <div class="col">
+              <q-input
+                outlined
+                v-model="profesLicenseData.certificateType"
+                label="ชื่อใบอนุญาต"
+                bg-color="white"
+                dense
+                class="inputgreen"
+                :rules="[(val) => !!val || `${'กรุณากรอกชื่อใบอนุญาต'}`]"
+                hide-bottom-space
+              />
             </div>
-            <div class="row q-gutter-sm q-pb-sm">
-              <div class="col">
-                <q-input
-                  outlined
-                  v-model="profesLicenseData.certificateNo"
-                  label="เลขที่ใบอนุญาต"
-                  bg-color="white"
-                  class="inputgreen"
-                  dense
-                  :rules="[(val) => !!val || `${'กรุณากรอกเลขที่ใบอนุญาต'}`]"
-                  hide-bottom-space
-                />
-              </div>
-              <div class="col">
-                <datepicker
-                  menu-class-name="modalfix"
-                  v-model="profesLicenseData.issueDate"
-                  :locale="'th'"
-                  autoApply
-                  class="col"
-                  :enableTimePicker="false"
-                  @update:modelValue="profesLicenseData.issueDate"
-                >
-                  <template #year="{ year }">{{ year + 543 }}</template>
-                  <template #year-overlay-value="{ value }">{{
-                    parseInt(value + 543)
-                  }}</template>
-                  <template #trigger>
-                    <q-input
-                      dense
-                      lazy-rules
-                      class="inputgreen"
-                      outlined
-                      bg-color="white"
-                      hide-bottom-space
-                      :model-value="
-                        profesLicenseData.issueDate
-                          ? date2Thai(profesLicenseData.issueDate)
-                          : ''
-                      "
-                      :rules="[
-                        (val) => !!val || `${'กรุณาเลือกวันที่ออกใบอนุญาต'}`,
-                      ]"
-                      :label="`${'วันที่ออกใบอนุญาต'}`"
-                    >
-                      <template v-slot:prepend>
-                        <q-icon
-                          name="event"
-                          class="cursor-pointer"
-                          style="color: var(--q-primary)"
-                        >
-                        </q-icon>
-                      </template>
-                    </q-input>
-                  </template>
-                </datepicker>
-              </div>
+            <div class="col">
+              <q-input
+                outlined
+                v-model="profesLicenseData.issuer"
+                label="หน่วยงานผู้ออกใบอนุญาต"
+                bg-color="white"
+                dense
+                class="inputgreen"
+                :rules="[
+                  (val) => !!val || `${'กรุณากรอกหน่วยงานผู้ออกใบอนุญาต'}`,
+                ]"
+                hide-bottom-space
+              />
             </div>
-            <div class="row q-gutter-sm q-pb-sm">
-              <div class="col">
-                <datepicker
-                  menu-class-name="modalfix"
-                  v-model="profesLicenseData.expireDate"
-                  :locale="'th'"
-                  autoApply
-                  :enableTimePicker="false"
-                  @update:modelValue="profesLicenseData.expireDate"
-                >
-                  <template #year="{ year }">{{ year + 543 }}</template>
-                  <template #year-overlay-value="{ value }">{{
-                    parseInt(value + 543)
-                  }}</template>
-                  <template #trigger>
-                    <q-input
-                      dense
-                      outlined
-                      bg-color="white"
-                      class="inputgreen"
-                      clearable
-                      @clear="() => (profesLicenseData.expireDate = null)"
-                      hide-bottom-space
-                      :model-value="
-                        profesLicenseData.expireDate
-                          ? date2Thai(profesLicenseData.expireDate)
-                          : ''
-                      "
-                      :label="`${'วันที่หมดอายุ'}`"
-                      @update:modelValue="profesLicenseData.expireDate = null"
-                    >
-                      <template v-slot:prepend>
-                        <q-icon
-                          name="event"
-                          class="cursor-pointer"
-                          style="color: var(--q-primary)"
-                        >
-                        </q-icon>
-                      </template>
-                    </q-input>
-                  </template>
-                </datepicker>
-              </div>
+          </div>
+          <div class="row q-gutter-sm q-pb-sm">
+            <div class="col">
+              <q-input
+                outlined
+                v-model="profesLicenseData.certificateNo"
+                label="เลขที่ใบอนุญาต"
+                bg-color="white"
+                class="inputgreen"
+                dense
+                :rules="[(val) => !!val || `${'กรุณากรอกเลขที่ใบอนุญาต'}`]"
+                hide-bottom-space
+              />
             </div>
+            <div class="col">
+              <datepicker
+                menu-class-name="modalfix"
+                v-model="profesLicenseData.issueDate"
+                :locale="'th'"
+                autoApply
+                class="col"
+                :enableTimePicker="false"
+                @update:modelValue="profesLicenseData.issueDate"
+              >
+                <template #year="{ year }">{{ year + 543 }}</template>
+                <template #year-overlay-value="{ value }">{{
+                  parseInt(value + 543)
+                }}</template>
+                <template #trigger>
+                  <q-input
+                    dense
+                    class="inputgreen"
+                    outlined
+                    bg-color="white"
+                    hide-bottom-space
+                    :model-value="
+                      profesLicenseData.issueDate
+                        ? date2Thai(profesLicenseData.issueDate)
+                        : ''
+                    "
+                    :rules="[
+                      (val) => !!val || `${'กรุณาเลือกวันที่ออกใบอนุญาต'}`,
+                    ]"
+                    :label="`${'วันที่ออกใบอนุญาต'}`"
+                  >
+                    <template v-slot:prepend>
+                      <q-icon
+                        name="event"
+                        class="cursor-pointer"
+                        style="color: var(--q-primary)"
+                      >
+                      </q-icon>
+                    </template>
+                  </q-input>
+                </template>
+              </datepicker>
+            </div>
+          </div>
+          <div class="row q-gutter-sm q-pb-sm">
+            <div class="col">
+              <datepicker
+                menu-class-name="modalfix"
+                v-model="profesLicenseData.expireDate"
+                :locale="'th'"
+                autoApply
+                :enableTimePicker="false"
+                @update:modelValue="profesLicenseData.expireDate"
+              >
+                <template #year="{ year }">{{ year + 543 }}</template>
+                <template #year-overlay-value="{ value }">{{
+                  parseInt(value + 543)
+                }}</template>
+                <template #trigger>
+                  <q-input
+                    dense
+                    outlined
+                    bg-color="white"
+                    class="inputgreen"
+                    clearable
+                    @clear="() => (profesLicenseData.expireDate = null)"
+                    hide-bottom-space
+                    :model-value="
+                      profesLicenseData.expireDate
+                        ? date2Thai(profesLicenseData.expireDate)
+                        : ''
+                    "
+                    :label="`${'วันที่หมดอายุ'}`"
+                    @update:modelValue="profesLicenseData.expireDate = null"
+                  >
+                    <template v-slot:prepend>
+                      <q-icon
+                        name="event"
+                        class="cursor-pointer"
+                        style="color: var(--q-primary)"
+                      >
+                      </q-icon>
+                    </template>
+                  </q-input>
+                </template>
+              </datepicker>
+            </div>
+          </div>
         </q-card-section>
         <q-separator color="grey-4" />
         <q-card-actions align="right">
@@ -708,68 +707,68 @@ onMounted(async () => {
 
       <q-card-section style="max-height: 60vh" class="scroll">
         <div class="row q-gutter-sm q-mb-sm">
-            <q-space />
-            <q-input
-              dense
-              outlined
-              bg-color="white"
-              v-model="historyKeyword"
-              label="ค้นหา"
-            >
-              <template v-slot:append>
-                <q-icon name="search" />
-              </template>
-            </q-input>
-
-            <q-select
-              v-model="historyVisibleColumns"
-              multiple
-              outlined
-              dense
-              bg-color="white"
-              options-dense
-              :display-value="$q.lang.table.columns"
-              emit-value
-              map-options
-              :options="historyColumns"
-              option-value="name"
-              options-cover
-              style="min-width: 150px"
-            />
-          </div>
-          <d-table
-            ref="table"
-            :columns="historyColumns"
-            :rows="historyRows"
-            row-key="name"
-            flat
-            :filter="historyKeyword"
-            v-model:pagination="historyPagination"
-            bordered
-            :paging="true"
+          <q-space />
+          <q-input
             dense
-            :rows-per-page-options="[20, 50, 100]"
-            class="custom-header-table"
-            :visible-columns="historyVisibleColumns"
+            outlined
+            bg-color="white"
+            v-model="historyKeyword"
+            label="ค้นหา"
           >
-            <template v-slot:header="props">
-              <q-tr :props="props">
-                <q-th v-for="col in props.cols" :key="col.name" :props="props">
-                  <span class="text-weight-medium">{{ col.label }}</span>
-                </q-th>
-                <q-th auto-width />
-              </q-tr>
+            <template v-slot:append>
+              <q-icon name="search" />
             </template>
-            <template v-slot:body="props">
-              <q-tr :props="props" class="cursor-pointer">
-                <q-td v-for="col in props.cols" :key="col.id">
-                  <div>
-                    {{ col.value ? col.value : "-" }}
-                  </div>
-                </q-td>
-              </q-tr>
-            </template>
-          </d-table>
+          </q-input>
+
+          <q-select
+            v-model="historyVisibleColumns"
+            multiple
+            outlined
+            dense
+            bg-color="white"
+            options-dense
+            :display-value="$q.lang.table.columns"
+            emit-value
+            map-options
+            :options="historyColumns"
+            option-value="name"
+            options-cover
+            style="min-width: 150px"
+          />
+        </div>
+        <d-table
+          ref="table"
+          :columns="historyColumns"
+          :rows="historyRows"
+          row-key="name"
+          flat
+          :filter="historyKeyword"
+          v-model:pagination="historyPagination"
+          bordered
+          :paging="true"
+          dense
+          :rows-per-page-options="[20, 50, 100]"
+          class="custom-header-table"
+          :visible-columns="historyVisibleColumns"
+        >
+          <template v-slot:header="props">
+            <q-tr :props="props">
+              <q-th v-for="col in props.cols" :key="col.name" :props="props">
+                <span class="text-weight-medium">{{ col.label }}</span>
+              </q-th>
+              <q-th auto-width />
+            </q-tr>
+          </template>
+          <template v-slot:body="props">
+            <q-tr :props="props" class="cursor-pointer">
+              <q-td v-for="col in props.cols" :key="col.id">
+                <div>
+                  {{ col.value ? col.value : "-" }}
+                </div>
+              </q-td>
+            </q-tr>
+          </template>
+        </d-table>
       </q-card-section>
     </q-card>
   </q-dialog>

src/modules/04_registryNew/components/detail/Achievement/02_Train.vue

@@ -728,11 +728,7 @@ onMounted(async () => {
               />
             </div>
           </div>
-          <q-card
-            flat
-            bordered
-            class="q-px-sm q-my-sm q-pb-sm borderCard"
-          >
+          <q-card flat bordered class="q-px-sm q-my-sm q-pb-sm borderCard">
             <div class="row col-12 q-gutter-md q-py-sm text-grey-7">
               <q-radio
                 v-model="isDate"
@@ -774,7 +770,6 @@ onMounted(async () => {
                   <template #trigger>
                     <q-input
                       dense
-                      lazy-rules
                       outlined
                       class="inputgreen"
                       hide-bottom-space
@@ -820,7 +815,6 @@ onMounted(async () => {
                   <template #trigger>
                     <q-input
                       dense
-                      lazy-rules
                       class="inputgreen"
                       outlined
                       hide-bottom-space
@@ -868,7 +862,6 @@ onMounted(async () => {
                     <q-input
                       outlined
                       dense
-                      lazy-rules
                       class="inputgreen"
                       :model-value="date2Thai(trainData.startDate)"
                       :rules="[
@@ -914,7 +907,6 @@ onMounted(async () => {
                     <q-input
                       outlined
                       dense
-                      lazy-rules
                       class="inputgreen"
                       :model-value="date2Thai(trainData.endDate)"
                       :rules="[
@@ -956,7 +948,6 @@ onMounted(async () => {
                 <template #trigger>
                   <q-input
                     dense
-                    lazy-rules
                     outlined
                     class="inputgreen"
                     clearable
@@ -1046,7 +1037,6 @@ onMounted(async () => {
                     outlined
                     dense
                     class="inputgreen"
-                    lazy-rules
                     clearable
                     @clear="() => (trainData.dateOrder = null)"
                     @update:modelValue="trainData.dateOrder = null"

src/modules/04_registryNew/components/detail/PersonalInformation/05_Education.vue

@@ -1003,11 +1003,7 @@ onMounted(async () => {
               />
             </div>
           </div>
-          <q-card
-            flat
-            bordered
-            class="q-px-md q-pb-md q-my-sm borderCard"
-          >
+          <q-card flat bordered class="q-px-md q-pb-md q-my-sm borderCard">
             <div class="row col-12 q-gutter-md q-py-sm text-grey-7">
               <q-radio
                 v-model="isDate"
@@ -1095,7 +1091,6 @@ onMounted(async () => {
                     <q-input
                       dense
                       class="inputgreen"
-                      lazy-rules
                       outlined
                       hide-bottom-space
                       :model-value="educationData.endYear + 543"
@@ -1142,11 +1137,9 @@ onMounted(async () => {
                       outlined
                       class="inputgreen"
                       dense
-                      lazy-rules
                       :model-value="date2Thai(educationData.startDate)"
                       :rules="[
-                        (val) =>
-                          !!val || `${'กรุณาเลือกวันที่เริ่มต้นศึกษา'}`,
+                        (val) => !!val || `${'กรุณาเลือกวันที่เริ่มต้นศึกษา'}`,
                       ]"
                       hide-bottom-space
                       :label="`${'วันที่เริ่มต้นศึกษา'}`"
@@ -1187,7 +1180,6 @@ onMounted(async () => {
                       outlined
                       dense
                       class="inputgreen"
-                      lazy-rules
                       :model-value="date2Thai(educationData.endDate)"
                       :rules="[
                         (val) => !!val || `${'กรุณาเลือกวันที่จบการศึกษา'}`,
@@ -1229,7 +1221,6 @@ onMounted(async () => {
                     bg-color="white"
                     dense
                     class="inputgreen"
-                    lazy-rules
                     :model-value="date2Thai(educationData.finishDate)"
                     :rules="[
                       (val) => !!val || `${'กรุณาเลือกวันที่สำเร็จการศึกษา'}`,
@@ -1389,19 +1380,19 @@ onMounted(async () => {
         </q-card-section>
         <q-separator />
 
-        <q-card-actions align="right">      
-            <q-btn
-              id="onSubmit"
-              type="submit"
-              dense
-              unelevated
-              label="บันทึก"
-              color="public"
-              class="q-px-md"
-            >
-              <q-tooltip>บันทึกข้อมูล</q-tooltip>
-            </q-btn>
-         </q-card-actions>
+        <q-card-actions align="right">
+          <q-btn
+            id="onSubmit"
+            type="submit"
+            dense
+            unelevated
+            label="บันทึก"
+            color="public"
+            class="q-px-md"
+          >
+            <q-tooltip>บันทึกข้อมูล</q-tooltip>
+          </q-btn>
+        </q-card-actions>
       </q-form>
     </q-card>
   </q-dialog>
@@ -1415,71 +1406,71 @@ onMounted(async () => {
       <q-separator />
 
       <q-card-section style="max-height: 50vh" class="scroll">
-          <q-toolbar style="padding: 0px" class="text-primary q-mb-sm">
-            <q-space />
-            <q-input
-              dense
-              outlined
-              bg-color="white"
-              v-model="historyKeyword"
-              label="ค้นหา"
-              class="q-mr-sm"
-            >
-              <template v-slot:append>
-                <q-icon name="search" />
-              </template>
-            </q-input>
-
-            <q-select
-              v-model="historyVisibleColumns"
-              multiple
-              outlined
-              dense
-              bg-color="white"
-              options-dense
-              :display-value="$q.lang.table.columns"
-              emit-value
-              map-options
-              :options="historyColumns"
-              option-value="name"
-              options-cover
-              style="min-width: 150px"
-            />
-          </q-toolbar>
-          <d-table
-            ref="table"
-            :columns="historyColumns"
-            :rows="historyRows"
-            row-key="name"
-            flat
-            bordered
-            :paging="true"
+        <q-toolbar style="padding: 0px" class="text-primary q-mb-sm">
+          <q-space />
+          <q-input
             dense
-            :filter="historyKeyword"
-            v-model:pagination="historyPagination"
-            :rows-per-page-options="[20, 50, 100]"
-            class="custom-header-table"
-            :visible-columns="historyVisibleColumns"
+            outlined
+            bg-color="white"
+            v-model="historyKeyword"
+            label="ค้นหา"
+            class="q-mr-sm"
           >
-            <template v-slot:header="props">
-              <q-tr :props="props">
-                <q-th v-for="col in props.cols" :key="col.name" :props="props">
-                  <span class="text-weight-medium">{{ col.label }}</span>
-                </q-th>
-                <q-th auto-width />
-              </q-tr>
+            <template v-slot:append>
+              <q-icon name="search" />
             </template>
-            <template v-slot:body="props">
-              <q-tr :props="props" class="cursor-pointer">
-                <q-td v-for="col in props.cols" :key="col.id">
-                  <div>
-                    {{ col.value === "" ? "-" : col.value }}
-                  </div>
-                </q-td>
-                <q-td auto-width> </q-td>
-              </q-tr>
-            </template>
-          </d-table>
+          </q-input>
+
+          <q-select
+            v-model="historyVisibleColumns"
+            multiple
+            outlined
+            dense
+            bg-color="white"
+            options-dense
+            :display-value="$q.lang.table.columns"
+            emit-value
+            map-options
+            :options="historyColumns"
+            option-value="name"
+            options-cover
+            style="min-width: 150px"
+          />
+        </q-toolbar>
+        <d-table
+          ref="table"
+          :columns="historyColumns"
+          :rows="historyRows"
+          row-key="name"
+          flat
+          bordered
+          :paging="true"
+          dense
+          :filter="historyKeyword"
+          v-model:pagination="historyPagination"
+          :rows-per-page-options="[20, 50, 100]"
+          class="custom-header-table"
+          :visible-columns="historyVisibleColumns"
+        >
+          <template v-slot:header="props">
+            <q-tr :props="props">
+              <q-th v-for="col in props.cols" :key="col.name" :props="props">
+                <span class="text-weight-medium">{{ col.label }}</span>
+              </q-th>
+              <q-th auto-width />
+            </q-tr>
+          </template>
+          <template v-slot:body="props">
+            <q-tr :props="props" class="cursor-pointer">
+              <q-td v-for="col in props.cols" :key="col.id">
+                <div>
+                  {{ col.value === "" ? "-" : col.value }}
+                </div>
+              </q-td>
+              <q-td auto-width> </q-td>
+            </q-tr>
+          </template>
+        </d-table>
       </q-card-section>
     </q-card>
   </q-dialog>

src/modules/04_registryNew/components/detail/TabMain.vue

@@ -43,59 +43,53 @@ const splitterModel = ref<number>(12);
 </script>
 
 <template>
-    <q-splitter 
-        v-model="splitterModel" 
-        disable
-        class="split"
-      >
-      <template v-slot:before>
-        <div class=""><!--  bg-tab-regi  -->
-          <q-tabs
-            v-model="store.tabMain" 
-            vertical 
-            
-            class="text-grey-6 text-weight-light" 
-            active-class="bg-white text-blue-8 text-weight-bold bg-blue-1"
-            ><!-- indicator-color="transparent" -->
-            <q-tab
-              class="q-py-sm"
-              v-for="(tab, index) in itemsTab"
-              :key="index"
-              :name="tab.name"
-              :icon="tab.icon"
-              :label="tab.label"
-              
-            /><!-- hover-tab  -->
-          </q-tabs>
-        </div>
-      </template>
-
-      <template v-slot:after>
-        <q-tab-panels
+  <q-splitter v-model="splitterModel" disable class="split">
+    <template v-slot:before>
+      <div class="">
+        <!--  bg-tab-regi  -->
+        <q-tabs
           v-model="store.tabMain"
-          animated
-          swipeable
           vertical
-          transition-prev="jump-up"
-          transition-next="jump-up"
-          class="q-pa-none"
-        ><!--  split -->
-          <q-tab-panel
+          class="text-grey-6 text-weight-light"
+          active-class="bg-white text-blue-8 text-weight-bold bg-blue-1"
+          ><!-- indicator-color="transparent" -->
+          <q-tab
+            class="q-py-sm"
             v-for="(tab, index) in itemsTab"
             :key="index"
             :name="tab.name"
-            class="q-pa-none"
-            
-          >
-            <PersonalInformationMain v-if="store.tabMain === '1'" />
-            <GovernmentInformationMain v-if="store.tabMain === '2'" />
-            <salaryMain v-if="store.tabMain === '3'" />
-            <AchievementMain v-if="store.tabMain === '4'" />
-            <OtherMaim v-if="store.tabMain === '5'" />
-          </q-tab-panel>
-        </q-tab-panels>
-      </template>
-    </q-splitter>
+            :icon="tab.icon"
+            :label="tab.label"
+          /><!-- hover-tab  -->
+        </q-tabs>
+      </div>
+    </template>
+
+    <template v-slot:after>
+      <q-tab-panels
+        v-model="store.tabMain"
+        animated
+        swipeable
+        vertical
+        transition-prev="jump-up"
+        transition-next="jump-up"
+        class="q-pa-none"
+        ><!--  split -->
+        <q-tab-panel
+          v-for="(tab, index) in itemsTab"
+          :key="index"
+          :name="tab.name"
+          class="q-pa-none"
+        >
+          <PersonalInformationMain v-if="store.tabMain === '1'" />
+          <GovernmentInformationMain v-if="store.tabMain === '2'" />
+          <salaryMain v-if="store.tabMain === '3'" />
+          <AchievementMain v-if="store.tabMain === '4'" />
+          <OtherMaim v-if="store.tabMain === '5'" />
+        </q-tab-panel>
+      </q-tab-panels>
+    </template>
+  </q-splitter>
 </template>
 
 <style scoped>
@@ -104,10 +98,10 @@ const splitterModel = ref<number>(12);
   color: white !important;
   opacity: 1 !important;
 }
-.bg-tab-regi{
+.bg-tab-regi {
   background-color: #273238;
-} 
-.split{
+}
+.split {
   border-radius: 10px !important;
 }
 </style>

src/modules/04_registryNew/interface/response/Main.ts

@@ -13,6 +13,7 @@ interface DataLevel {
 }
 
 interface DataPerson {
+  avatar?: string;
   citizenId: string;
   firstName: string;
   id: string;

src/modules/04_registryNew/views/detailView.vue

@@ -285,21 +285,21 @@ async function clickSaveDeceased() {
   formData.append("Reason", reasonDeath.value);
   formData.append("ProfileId", profileId.value);
 
-  dialogConfirm($q,()=>{
+  dialogConfirm($q, () => {
     showLoader();
-      http
-        .post(config.API.listDeceased(), formData)
-        .then(() => {
-          success($q, "บันทึกข้อมูลสำเร็จ");
-          router.push("/deceased");
-        })
-        .catch((e) => {
-          messageError($q, e);
-        })
-        .finally(() => {
-          hideLoader();
-        });
-  })
+    http
+      .post(config.API.listDeceased(), formData)
+      .then(() => {
+        success($q, "บันทึกข้อมูลสำเร็จ");
+        router.push("/deceased");
+      })
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(() => {
+        hideLoader();
+      });
+  });
 }
 
 onMounted(async () => {
@@ -381,11 +381,11 @@ onMounted(async () => {
     </q-btn>
   </div>
 
-  <q-card >
+  <q-card>
     <div class="column" style="height: 120px">
       <div class="col row items-center">
         <div class="row col-12">
-          <div class="col"  style="padding-left: 14%;">
+          <div class="col" style="padding-left: 14%">
             <div class="col-12 text-primary">
               <h2
                 class="title q-ma-none q-pa-none"
@@ -402,8 +402,8 @@ onMounted(async () => {
       </div>
 
       <div class="absolute-center-left q-ml-lg">
-        <q-avatar size="90px" class="bg-grey-2" >
-          <q-img :src="profilePicture"/>
+        <q-avatar size="90px" class="bg-grey-2">
+          <q-img :src="profilePicture" />
         </q-avatar>
         <q-btn
           round
@@ -418,7 +418,7 @@ onMounted(async () => {
       </div>
 
       <div class="col row items-center bg-toolbar">
-        <div class="row col-12"  style="padding-left: 14%;">
+        <div class="row col-12" style="padding-left: 14%">
           <div class="col-2">
             <div class="col-sm-3 col-md-3">
               <div class="col text-grey-6 text-caption">ตำแหน่งในสายงาน</div>
@@ -584,13 +584,13 @@ h2.title {
   border-radius: 10px;
 }
 
-.bg-toolbar{
-  background-color: #F2FBFA;
+.bg-toolbar {
+  background-color: #f2fbfa;
 }
-.btnEditImg{
-  position: absolute; 
-  bottom: 0; 
-  right: 0; 
-  border: 1px solid #EDEDED ;
+.btnEditImg {
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  border: 1px solid #ededed;
 }
-</style>
+</style>

src/modules/04_registryNew/views/list.vue

@@ -12,6 +12,7 @@ import type { FormFilter } from "@/modules/04_registryNew/interface/request/Main
 
 /** importComponents*/
 import TableView from "@/modules/04_registryNew/components/TableView.vue";
+import avatar from "@/assets/avatar_user.jpg";
 
 /** importStore*/
 import { useRegistryNewDataStore } from "@/modules/04_registryNew/store";
@@ -152,6 +153,7 @@ async function fetchDataPerson(search: boolean = false) {
       maxPage.value = Math.ceil(res.data.result.total / formFilter.pageSize);
       dataPersonMain.value = res.data.result.data;
       total.value = res.data.result.total;
+      insertAvatar(res.data.result.data);
     })
     .catch((err) => {
       messageError($q, err);
@@ -163,6 +165,44 @@ async function fetchDataPerson(search: boolean = false) {
     });
 }
 
+function insertAvatar(items: DataPerson[]) {
+  items.map((x: any, index: number) => {
+    http
+      .get(
+        config.API.fileByFile(
+          "ทะเบียนประวัติ",
+          "โปรไฟล์",
+          x.id,
+          "profile-" + x.id
+        )
+      )
+      .then((img) => {
+        dataPersonMain.value[index] = {
+          ...x,
+          avatar: img.data.downloadUrl,
+        };
+      })
+      .catch(() => {
+        dataPersonMain.value[index] = {
+          ...x,
+          avatar: avatar,
+        };
+      });
+  });
+}
+// const convertImageProfile = (id: string) => {
+//   return http
+//     .get(
+//       config.API.fileByFile("ทะเบียนประวัติ", "โปรไฟล์", id, "profile-" + id)
+//     )
+//     .then((res) => {
+//       return res.data.downloadUrl;
+//     })
+//     .catch(() => {
+//       return avatar;
+//     });
+// };
+
 function onClickShowFilter() {
   isShowFilter.value = !isShowFilter.value;
   isShowBtnFilter.value = false;
@@ -229,7 +269,7 @@ onMounted(async () => {
     ข้อมูลทะเบียนประวัติ
   </div> -->
 
-  <q-card class="q-mt-md ">
+  <q-card class="q-mt-md">
     <q-card-section class="card-img q-pb-lg">
       <div class="text-h5 text-center q-py-md text-weight-medium">
         ค้นหาข้อมูลทะเบียนประวัติ

src/modules/05_placement/components/AppointEmployee/Detail.vue

@@ -1,4 +1,3 @@
-
 <script setup lang="ts">
 import { onMounted, ref } from "vue";
 import { useQuasar } from "quasar";
@@ -14,7 +13,7 @@ import type { QForm } from "quasar";
 import http from "@/plugins/http";
 import config from "@/app.config";
 import PopupPersonal from "@/components/Dialogs/PopupPersonal.vue";
-  
+
 const modalPersonal = ref<boolean>(false);
 const personId = ref<string>("");
 const $q = useQuasar();
@@ -68,8 +67,9 @@ const fecthappointmentByid = async () => {
       const data = res.data.result;
       appointment.value = data;
       profileId.value = data.profileId;
-      title.value.fullname = `${data.prefix}${data.firstname ?? "-"} ${data.lastname ?? "-"
-        }`;
+      title.value.fullname = `${data.prefix}${data.firstname ?? "-"} ${
+        data.lastname ?? "-"
+      }`;
       title.value.organizationPositionOld = data.organizationPositionOld ?? "-";
       title.value.positionLevelOld = data.positionLevelOld ?? "-";
       title.value.positionTypeOld = data.positionTypeOld ?? "-";
@@ -164,8 +164,16 @@ onMounted(async () => {
 </script>
 <template>
   <div class="toptitle text-dark col-12 row items-center">
-    <q-btn icon="mdi-arrow-left" unelevated round dense flat color="primary" class="q-mr-sm"
-      @click="router.push(`/appoint-employee`)" />
+    <q-btn
+      icon="mdi-arrow-left"
+      unelevated
+      round
+      dense
+      flat
+      color="primary"
+      class="q-mr-sm"
+      @click="router.push(`/appoint-employee`)"
+    />
     รายละเอียดการปรับระดับชั้นงานลูกจ้าง {{ title.fullname }}
   </div>
   <q-card bordered class="row col-12 text-dark">
@@ -174,8 +182,15 @@ onMounted(async () => {
         {{ title.fullname }}
       </div>
       <q-space />
-      <q-btn outline color="blue" dense icon-right="mdi-open-in-new" class="q-px-sm" label="ดูข้อมูลทะเบียนประวัติ"
-        @click="onclickViewinfo(profileId)" />
+      <q-btn
+        outline
+        color="blue"
+        dense
+        icon-right="mdi-open-in-new"
+        class="q-px-sm"
+        label="ดูข้อมูลทะเบียนประวัติ"
+        @click="onclickViewinfo(profileId)"
+      />
     </div>
     <div class="col-12"><q-separator /></div>
     <div class="row col-12 q-pa-md">
@@ -220,12 +235,36 @@ onMounted(async () => {
       <q-space />
       <div v-if="status !== 'DONE' && status !== 'REPORT'">
         <div class="q-gutter-sm" v-if="!edit">
-          <q-btn outline color="primary" dense icon-right="mdi-file-edit-outline" class="q-px-sm" label="แก้ไข"
-            style="width: 80px" @click="edit = !edit" />
+          <q-btn
+            outline
+            color="primary"
+            dense
+            icon-right="mdi-file-edit-outline"
+            class="q-px-sm"
+            label="แก้ไข"
+            style="width: 80px"
+            @click="edit = !edit"
+          />
         </div>
         <div class="q-gutter-sm" v-else>
-          <q-btn outline color="public" dense class="q-px-sm" label="บันทึก" style="width: 80px" @click="clickSave" />
-          <q-btn outline color="red" dense class="q-px-sm" label="ยกเลิก" style="width: 80px" @click="cancel()" />
+          <q-btn
+            outline
+            color="public"
+            dense
+            class="q-px-sm"
+            label="บันทึก"
+            style="width: 80px"
+            @click="clickSave"
+          />
+          <q-btn
+            outline
+            color="red"
+            dense
+            class="q-px-sm"
+            label="ยกเลิก"
+            style="width: 80px"
+            @click="cancel()"
+          />
         </div>
       </div>
     </div>
@@ -236,9 +275,19 @@ onMounted(async () => {
           <div class="text-weight-bold">วุฒิการศึกษา</div>
         </div>
         <div class="col-12">
-          <q-input :class="getClass(edit)" :outlined="edit" dense lazy-rules :readonly="!edit" :borderless="!edit"
-            v-model="educationOld" :rules="[(val) => !!val || `${'กรุณากรอกวุฒิการศึกษา'}`]" hide-bottom-space
-            :label="`${'วุฒิการศึกษา'}`" type="text" />
+          <q-input
+            :class="getClass(edit)"
+            :outlined="edit"
+            dense
+            lazy-rules
+            :readonly="!edit"
+            :borderless="!edit"
+            v-model="educationOld"
+            :rules="[(val) => !!val || `${'กรุณากรอกวุฒิการศึกษา'}`]"
+            hide-bottom-space
+            :label="`${'วุฒิการศึกษา'}`"
+            type="text"
+          />
         </div>
       </div>
       <div class="row col-12 q-pa-md">
@@ -249,58 +298,119 @@ onMounted(async () => {
             </div>
 
             <div class="col-12">
-              <q-input :class="getClass(edit)" :outlined="edit" dense lazy-rules :readonly="!edit" :borderless="!edit"
-                v-model="organizationPositionOld" :rules="[(val) => !!val || `${'กรุณากรอกตำแหน่ง/สังกัด'}`]"
-                hide-bottom-space :label="`${'ตำแหน่ง/สังกัด'}`" type="textarea" />
+              <q-input
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="organizationPositionOld"
+                :rules="[(val) => !!val || `${'กรุณากรอกตำแหน่ง/สังกัด'}`]"
+                hide-bottom-space
+                :label="`${'ตำแหน่ง/สังกัด'}`"
+                type="textarea"
+              />
             </div>
           </div>
 
           <div class="col-xs-6 col-sm-3 row">
             <div class="col-12">
-              <q-input :class="getClass(edit)" :outlined="edit" dense lazy-rules :readonly="!edit" :borderless="!edit"
-                v-model="positionTypeOld" :rules="[(val) => !!val || `${'กรุณากรอกตำแหน่งประเภท'}`]" hide-bottom-space
-                :label="`${'ตำแหน่งประเภท'}`" />
+              <q-input
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="positionTypeOld"
+                :rules="[(val) => !!val || `${'กรุณากรอกตำแหน่งประเภท'}`]"
+                hide-bottom-space
+                :label="`${'ตำแหน่งประเภท'}`"
+              />
             </div>
           </div>
           <div class="col-xs-6 col-sm-3 row">
             <div class="col-12">
-              <q-input :class="getClass(edit)" :outlined="edit" dense lazy-rules :readonly="!edit" :borderless="!edit"
-                v-model="positionLevelOld" :rules="[(val) => !!val || `${'กรุณากรอกระดับ'}`]" hide-bottom-space
-                :label="`${'ระดับ'}`" />
+              <q-input
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="positionLevelOld"
+                :rules="[(val) => !!val || `${'กรุณากรอกระดับ'}`]"
+                hide-bottom-space
+                :label="`${'ระดับ'}`"
+              />
             </div>
           </div>
           <div class="col-xs-6 col-sm-3 row">
             <div class="col-12">
-              <q-input :class="getClass(edit)" :outlined="edit" dense lazy-rules :readonly="!edit" :borderless="!edit"
-                v-model="posNo" :rules="[(val) => !!val || `${'กรุณากรอกเลขที่'}`]" hide-bottom-space
-                :label="`${'เลขที่'}`" />
+              <q-input
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="posNo"
+                :rules="[(val) => !!val || `${'กรุณากรอกเลขที่'}`]"
+                hide-bottom-space
+                :label="`${'เลขที่'}`"
+              />
             </div>
           </div>
           <div class="col-xs-6 col-sm-3 row">
             <div class="col-12">
-              <CurrencyInput v-model="salary" label="เงินเดือน" :edit="edit"
-                :rules="[(val: number) => !!val || `${'กรุณากรอกเงินเดือน'}`]" lazy-rules />
+              <CurrencyInput
+                v-model="salary"
+                label="เงินเดือน"
+                :edit="edit"
+                :rules="[(val: number) => !!val || `${'กรุณากรอกเงินเดือน'}`]"
+                lazy-rules
+              />
             </div>
           </div>
           <div class="col-12"><q-separator /></div>
           <div class="col-xs-6 col-sm-6 row items-center">
             <div class="col-12">
-              <datepicker menu-class-name="modalfix" :readonly="!edit" v-model="date" :locale="'th'" autoApply
-                :enableTimePicker="false" week-start="0">
+              <datepicker
+                menu-class-name="modalfix"
+                :readonly="!edit"
+                v-model="date"
+                :locale="'th'"
+                autoApply
+                :enableTimePicker="false"
+                week-start="0"
+              >
                 <template #year="{ year }">{{ year + 543 }}</template>
                 <template #year-overlay-value="{ value }">{{
                   parseInt(value + 543)
                 }}</template>
                 <template #trigger>
-                  <q-input :class="getClass(edit)" :outlined="edit" dense lazy-rules :borderless="!edit" :readonly="!edit"
+                  <q-input
+                    :class="getClass(edit)"
+                    :outlined="edit"
+                    dense
+                    :borderless="!edit"
+                    :readonly="!edit"
                     :model-value="date !== null ? date2Thai(date) : null"
-                    :rules="[(val) => !!val || `${'กรุณาเลือกตั้งแต่วัน'}`]" hide-bottom-space
-                    :label="`${'ดำรงตำแหน่งในระดับปัจจุบันเมื่อ'}`">
+                    :rules="[(val) => !!val || `${'กรุณาเลือกตั้งแต่วัน'}`]"
+                    hide-bottom-space
+                    :label="`${'ดำรงตำแหน่งในระดับปัจจุบันเมื่อ'}`"
+                  >
                     <template v-slot:prepend>
-                      <q-icon name="event" class="cursor-pointer" :style="edit
-                          ? 'color: var(--q-primary)'
-                          : 'color: var(--q-grey)'
-                        ">
+                      <q-icon
+                        name="event"
+                        class="cursor-pointer"
+                        :style="
+                          edit
+                            ? 'color: var(--q-primary)'
+                            : 'color: var(--q-grey)'
+                        "
+                      >
                       </q-icon>
                     </template>
                   </q-input>
@@ -309,8 +419,18 @@ onMounted(async () => {
             </div>
           </div>
           <div class="col-12">
-            <q-input :class="getClass(edit)" :outlined="edit" dense lazy-rules :readonly="!edit" :borderless="!edit"
-              v-model="reason" hide-bottom-space :label="`${'หมายเหตุ '}`" type="textarea" />
+            <q-input
+              :class="getClass(edit)"
+              :outlined="edit"
+              dense
+              lazy-rules
+              :readonly="!edit"
+              :borderless="!edit"
+              v-model="reason"
+              hide-bottom-space
+              :label="`${'หมายเหตุ '}`"
+              type="textarea"
+            />
           </div>
         </div>
       </div>

src/modules/05_placement/components/AppointEmployee/Modal.vue

@@ -9,7 +9,14 @@ import config from "@/app.config";
 
 const $q = useQuasar();
 const mixin = useCounterMixin(); //เรียกฟังก์ชันกลาง
-const { date2Thai, hideLoader, messageError, showLoader, success, dialogConfirm } = mixin; //ฟังก์ชันกลางที่เรียกใช้
+const {
+  date2Thai,
+  hideLoader,
+  messageError,
+  showLoader,
+  success,
+  dialogConfirm,
+} = mixin; //ฟังก์ชันกลางที่เรียกใช้
 
 const notFound = ref<string>("ไม่พบข้อมูลที่ค้นหา");
 const noData = ref<string>("ไม่พบข้อมูลผังโครงสร้าง");
@@ -115,15 +122,18 @@ const myFilterMethod = (node: any, filter: string) => {
     (node.organizationName && node.organizationName.indexOf(filt) > -1) ||
     (node.positionNum && node.positionNum.indexOf(filt) > -1) ||
     (node.positionName && node.positionName.indexOf(filt) > -1) ||
-    (node.governmentCode && node.governmentCode.toString().indexOf(filt) > -1) ||
+    (node.governmentCode &&
+      node.governmentCode.toString().indexOf(filt) > -1) ||
     (node.agency && node.agency.indexOf(filt) > -1) ||
     (node.government && node.government.indexOf(filt) > -1) ||
     (node.department && node.department.indexOf(filt) > -1) ||
     (node.pile && node.pile.indexOf(filt) > -1) ||
-    (node.organizationShortName && node.organizationShortName.indexOf(filt) > -1) ||
+    (node.organizationShortName &&
+      node.organizationShortName.indexOf(filt) > -1) ||
     (node.positionSideName && node.positionSideName.indexOf(filt) > -1) ||
     (node.executivePosition && node.executivePosition.indexOf(filt) > -1) ||
-    (node.executivePositionSide && node.executivePositionSide.indexOf(filt) > -1) ||
+    (node.executivePositionSide &&
+      node.executivePositionSide.indexOf(filt) > -1) ||
     (node.positionLevel && node.positionLevel.indexOf(filt) > -1)
   );
 };
@@ -242,7 +252,6 @@ const positionLevelOptions = ref<Object[]>([
 
 const selectedPosition = async (data: any) => {
   if (data.name == null && selected.value != data.keyId) {
-
     editDataStatus.value = true;
     selected.value = data.keyId;
 
@@ -330,7 +339,6 @@ const checkPosition = (val: string) => {
   return num;
 };
 
-
 watch(props, () => {
   expanded.value = [];
   const dataPersonal = props.personal;
@@ -352,7 +360,6 @@ watch(props, () => {
         }
       }
     });
-
   }
 });
 
@@ -389,24 +396,46 @@ function findByPerson(element: any): any {
             <div class="col-xs-12 col-sm-7 row">
               <q-card flat bordered class="fit q-pa-sm">
                 <q-scroll-area visible style="height: 70vh">
-                  <q-input outlined dense ref="filterRef" v-model="search" placeholder="ค้นหา" class="q-mb-sm">
+                  <q-input
+                    outlined
+                    dense
+                    ref="filterRef"
+                    v-model="search"
+                    placeholder="ค้นหา"
+                    class="q-mb-sm"
+                  >
                     <template v-slot:append>
                       <q-icon name="mdi-magnify" />
                     </template>
                   </q-input>
                   <div class="q-pa-sm q-gutter-sm">
-                    <q-tree no-transition dense :nodes="treeData" node-key="keyId" :filter="search"
-                      :no-results-label="notFound" :no-nodes-label="noData" :filter-method="myFilterMethod"
-                      v-model:expanded="expanded">
+                    <q-tree
+                      no-transition
+                      dense
+                      :nodes="treeData"
+                      node-key="keyId"
+                      :filter="search"
+                      :no-results-label="notFound"
+                      :no-nodes-label="noData"
+                      :filter-method="myFilterMethod"
+                      v-model:expanded="expanded"
+                    >
                       <template v-slot:header-organization="prop">
                         <div class="col">
-                          <div class="row items-center q-px-xs q-pt-xs q-gutter-sm">
+                          <div
+                            class="row items-center q-px-xs q-pt-xs q-gutter-sm"
+                          >
                             <!--แสดงชื่อแผนก พิมพ์ตัวหนา คลิกแล้วกาง/หุบ Tree-->
                             <div class="text-weight-medium">
                               {{ prop.node.organizationName }}
                             </div>
-                            <q-badge v-if="prop.node.totalPositionVacant > 0" rounded color="red" outline
-                              :label="prop.node.totalPositionVacant" />
+                            <q-badge
+                              v-if="prop.node.totalPositionVacant > 0"
+                              rounded
+                              color="red"
+                              outline
+                              :label="prop.node.totalPositionVacant"
+                            />
 
                             <q-space />
                           </div>
@@ -420,31 +449,53 @@ function findByPerson(element: any): any {
                       </template>
 
                       <template v-slot:header-person="prop">
-                        <q-item clickable :active="selected == prop.node.keyId" @click="selectedPosition(prop.node)"
-                          :disable="prop.node.name != null ||
+                        <q-item
+                          clickable
+                          :active="selected == prop.node.keyId"
+                          @click="selectedPosition(prop.node)"
+                          :disable="
+                            prop.node.name != null ||
                             checkPosition(prop.node.positionNumId) != -1
-                            " active-class="my-list-link text-primary text-weight-medium"
-                          class="row items-center text-dark q-py-xs q-pl-sm rounded-borders my-list">
-                          <img v-if="prop.node.avatar == '' ||
-                            prop.node.avatar ==
-                            'https://cdn.quasar.dev/img/boy-avatar.png'
-                            " src="@/assets/avatar_user.jpg" class="col-xs-1 col-sm-2" style="
+                          "
+                          active-class="my-list-link text-primary text-weight-medium"
+                          class="row items-center text-dark q-py-xs q-pl-sm rounded-borders my-list"
+                        >
+                          <img
+                            v-if="
+                              prop.node.avatar == '' ||
+                              prop.node.avatar ==
+                                'https://cdn.quasar.dev/img/boy-avatar.png'
+                            "
+                            src="@/assets/avatar_user.jpg"
+                            class="col-xs-1 col-sm-2"
+                            style="
                               width: 28px;
                               height: 28px;
                               border-radius: 50%;
-                            " />
-                          <img v-else :src="prop.node.avatar" class="col-xs-1 col-sm-2" style="
+                            "
+                          />
+                          <img
+                            v-else
+                            :src="prop.node.avatar"
+                            class="col-xs-1 col-sm-2"
+                            style="
                               width: 28px;
                               height: 28px;
                               border-radius: 50%;
-                            " />
+                            "
+                          />
                           <!--=====ตำแหน่งว่าง สีแดง=====-->
-                          <div v-if="prop.node.name == null" class="q-px-sm text-weight-medium text-red">
+                          <div
+                            v-if="prop.node.name == null"
+                            class="q-px-sm text-weight-medium text-red"
+                          >
                             ว่าง
                           </div>
                           <!--=====หัวหน้า สีเขียว=====-->
                           <div v-else-if="prop.node.positionLeaderFlag">
-                            <div class="q-px-sm text-weight-medium text-primary">
+                            <div
+                              class="q-px-sm text-weight-medium text-primary"
+                            >
                               {{ prop.node.name }}
                             </div>
                           </div>
@@ -464,8 +515,13 @@ function findByPerson(element: any): any {
                           <div class="q-pr-sm">
                             {{ prop.node.positionLevel }}
                           </div>
-                          <q-icon v-if="prop.node.positionLeaderFlag" class="q-mr-sm" size="15px" color="primary"
-                            name="mdi-bookmark"></q-icon>
+                          <q-icon
+                            v-if="prop.node.positionLeaderFlag"
+                            class="q-mr-sm"
+                            size="15px"
+                            color="primary"
+                            name="mdi-bookmark"
+                          ></q-icon>
 
                           <q-space />
                         </q-item>
@@ -481,18 +537,36 @@ function findByPerson(element: any): any {
                   <div class="row col-12 q-col-gutter-xs">
                     <div class="col-xs-12 col-sm-12 col-md-12"></div>
                     <div class="col-xs-12 col-sm-12 col-md-12">
-                      <datepicker menu-class-name="modalfix" v-model="dataForm.containDate" :locale="'th'" autoApply
-                        :enableTimePicker="false" week-start="0">
+                      <datepicker
+                        menu-class-name="modalfix"
+                        v-model="dataForm.containDate"
+                        :locale="'th'"
+                        autoApply
+                        :enableTimePicker="false"
+                        week-start="0"
+                      >
                         <template #year="{ year }">{{ year + 543 }}</template>
                         <template #year-overlay-value="{ value }">{{
                           parseInt(value + 543)
                         }}</template>
                         <template #trigger>
-                          <q-input class="full-width inputgreen cursor-pointer" outlined dense lazy-rules :model-value="date2Thai(new Date(dataForm.containDate))
-                              " :rules="[(val: string) => !!val || `${'วันที่รายงานตัว'}`]"
-                            :label="`${'วันที่รายงานตัว'}`" hide-bottom-space>
+                          <q-input
+                            class="full-width inputgreen cursor-pointer"
+                            outlined
+                            dense
+                            :model-value="
+                              date2Thai(new Date(dataForm.containDate))
+                            "
+                            :rules="[(val: string) => !!val || `${'วันที่รายงานตัว'}`]"
+                            :label="`${'วันที่รายงานตัว'}`"
+                            hide-bottom-space
+                          >
                             <template v-slot:prepend>
-                              <q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)">
+                              <q-icon
+                                name="event"
+                                class="cursor-pointer"
+                                style="color: var(--q-primary)"
+                              >
                               </q-icon>
                             </template>
                           </q-input>
@@ -501,36 +575,92 @@ function findByPerson(element: any): any {
                     </div>
                     <q-space />
                     <div class="col-xs-12 col-sm-12 col-md-12">
-                      <q-select class="full-width inputgreen cursor-pointer custom-input" outlined standout dense
-                        hide-bottom-space lazy-rules :options="posNoOptions" v-model="dataForm.posNoId"
-                        :label="`${'ตำแหน่งเลขที่'}`" map-options />
+                      <q-select
+                        class="full-width inputgreen cursor-pointer custom-input"
+                        outlined
+                        standout
+                        dense
+                        hide-bottom-space
+                        lazy-rules
+                        :options="posNoOptions"
+                        v-model="dataForm.posNoId"
+                        :label="`${'ตำแหน่งเลขที่'}`"
+                        map-options
+                      />
                     </div>
                     <div class="col-xs-12 col-sm-12 col-md-12">
-                      <q-select outlined class="full-width inputgreen cursor-pointer custom-input" standout dense
-                        hide-bottom-space lazy-rules :options="positionOptions" v-model="dataForm.positionId"
-                        :label="`${'ตำแหน่ง'}`" map-options />
+                      <q-select
+                        outlined
+                        class="full-width inputgreen cursor-pointer custom-input"
+                        standout
+                        dense
+                        hide-bottom-space
+                        lazy-rules
+                        :options="positionOptions"
+                        v-model="dataForm.positionId"
+                        :label="`${'ตำแหน่ง'}`"
+                        map-options
+                      />
                     </div>
                     <div class="col-xs-12 col-sm-12 col-md-12">
-                      <q-select outlined class="full-width inputgreen cursor-pointer custom-input" standout dense
-                        hide-bottom-space lazy-rules emit-value :options="positionPathSideOptions"
-                        v-model="dataForm.positionPathSideId" :label="`${'ด้าน/สาขา'}`" map-options />
+                      <q-select
+                        outlined
+                        class="full-width inputgreen cursor-pointer custom-input"
+                        standout
+                        dense
+                        hide-bottom-space
+                        lazy-rules
+                        emit-value
+                        :options="positionPathSideOptions"
+                        v-model="dataForm.positionPathSideId"
+                        :label="`${'ด้าน/สาขา'}`"
+                        map-options
+                      />
                     </div>
 
                     <div class="col-xs-12 col-sm-12 col-md-12">
-                      <q-select outlined class="full-width inputgreen cursor-pointer custom-input" standout dense
-                        hide-bottom-space lazy-rules :options="positionTypeOptions" v-model="dataForm.positionTypeId"
-                        :label="`${'ประเภทตำแหน่ง'}`" map-options />
+                      <q-select
+                        outlined
+                        class="full-width inputgreen cursor-pointer custom-input"
+                        standout
+                        dense
+                        hide-bottom-space
+                        lazy-rules
+                        :options="positionTypeOptions"
+                        v-model="dataForm.positionTypeId"
+                        :label="`${'ประเภทตำแหน่ง'}`"
+                        map-options
+                      />
                     </div>
                     <div class="col-xs-12 col-sm-12 col-md-12">
-                      <q-select outlined class="full-width inputgreen cursor-pointer custom-input" standout dense
-                        hide-bottom-space lazy-rules :options="positionLineOptions" v-model="dataForm.positionLineId"
-                        :label="`${'สายงาน'}`" map-options />
+                      <q-select
+                        outlined
+                        class="full-width inputgreen cursor-pointer custom-input"
+                        standout
+                        dense
+                        hide-bottom-space
+                        lazy-rules
+                        :options="positionLineOptions"
+                        v-model="dataForm.positionLineId"
+                        :label="`${'สายงาน'}`"
+                        map-options
+                      />
                     </div>
                     <div class="col-xs-12 col-sm-12 col-md-12">
-                      <q-select outlined class="full-width inputgreen cursor-pointer custom-input" standout dense
-                        lazy-rules :options="positionLevelOptions" v-model="dataForm.positionLevelId"
-                        :label="`${'ระดับ'}`" hide-bottom-space
-                        :rules="[(val: string) => !!val || `${'กรุณาเลือกระดับ'}`]" emit-value map-options />
+                      <q-select
+                        outlined
+                        class="full-width inputgreen cursor-pointer custom-input"
+                        standout
+                        dense
+                        lazy-rules
+                        :options="positionLevelOptions"
+                        v-model="dataForm.positionLevelId"
+                        :label="`${'ระดับ'}`"
+                        hide-bottom-space
+                        :rules="[(val: string) => !!val || `${'กรุณาเลือกระดับ'}`]"
+                        emit-value
+                        map-options
+                      />
                     </div>
                   </div>
                 </q-scroll-area>
@@ -540,8 +670,12 @@ function findByPerson(element: any): any {
         </q-card-section>
 
         <q-separator />
-        <DialogFooter :editvisible="true" :validate="validateData" :save="saveAppoint"
-          v-model:modalEdit="editDataStatus" />
+        <DialogFooter
+          :editvisible="true"
+          :validate="validateData"
+          :save="saveAppoint"
+          v-model:modalEdit="editDataStatus"
+        />
       </q-form>
     </q-card>
   </q-dialog>

src/modules/05_placement/components/AppointMent/AppointmentModal.vue

@@ -9,7 +9,14 @@ import config from "@/app.config";
 
 const $q = useQuasar();
 const mixin = useCounterMixin(); //เรียกฟังก์ชันกลาง
-const { date2Thai, hideLoader, messageError, showLoader, success,dialogConfirm } = mixin; //ฟังก์ชันกลางที่เรียกใช้
+const {
+  date2Thai,
+  hideLoader,
+  messageError,
+  showLoader,
+  success,
+  dialogConfirm,
+} = mixin; //ฟังก์ชันกลางที่เรียกใช้
 
 const notFound = ref<string>("ไม่พบข้อมูลที่ค้นหา");
 const noData = ref<string>("ไม่พบข้อมูลผังโครงสร้าง");
@@ -106,8 +113,6 @@ const fetchplacementPosition = async () => {
     });
 };
 
-
-
 const props = defineProps({
   personalId: String,
   modal: Boolean,
@@ -126,15 +131,18 @@ const myFilterMethod = (node: any, filter: string) => {
     (node.organizationName && node.organizationName.indexOf(filt) > -1) ||
     (node.positionNum && node.positionNum.indexOf(filt) > -1) ||
     (node.positionName && node.positionName.indexOf(filt) > -1) ||
-    (node.governmentCode && node.governmentCode.toString().indexOf(filt) > -1) ||
+    (node.governmentCode &&
+      node.governmentCode.toString().indexOf(filt) > -1) ||
     (node.agency && node.agency.indexOf(filt) > -1) ||
     (node.government && node.government.indexOf(filt) > -1) ||
     (node.department && node.department.indexOf(filt) > -1) ||
     (node.pile && node.pile.indexOf(filt) > -1) ||
-    (node.organizationShortName && node.organizationShortName.indexOf(filt) > -1) ||
+    (node.organizationShortName &&
+      node.organizationShortName.indexOf(filt) > -1) ||
     (node.positionSideName && node.positionSideName.indexOf(filt) > -1) ||
     (node.executivePosition && node.executivePosition.indexOf(filt) > -1) ||
-    (node.executivePositionSide && node.executivePositionSide.indexOf(filt) > -1) ||
+    (node.executivePositionSide &&
+      node.executivePositionSide.indexOf(filt) > -1) ||
     (node.positionLevel && node.positionLevel.indexOf(filt) > -1)
   );
 };
@@ -183,7 +191,6 @@ const saveAppoint = async () => {
   });
 };
 
-
 const closeModal = () => {
   if (editDataStatus.value == true) {
     dialogConfirm(
@@ -258,7 +265,6 @@ const positionLevelOptions = ref<Object[]>([
 
 const selectedPosition = async (data: any) => {
   if (data.name == null && selected.value != data.keyId) {
-
     editDataStatus.value = true;
     selected.value = data.keyId;
 
@@ -346,7 +352,6 @@ const checkPosition = (val: string) => {
   return num;
 };
 
-
 watch(props, () => {
   expanded.value = [];
   const dataPersonal = props.personal;
@@ -368,7 +373,6 @@ watch(props, () => {
         }
       }
     });
-
   }
 });
 
@@ -566,7 +570,6 @@ function findByPerson(element: any): any {
                             class="full-width inputgreen cursor-pointer"
                             outlined
                             dense
-                            lazy-rules
                             :model-value="
                               date2Thai(new Date(dataForm.containDate))
                             "

src/modules/05_placement/components/AppointMent/Detail.vue

@@ -14,7 +14,7 @@ import type { QForm } from "quasar";
 import http from "@/plugins/http";
 import config from "@/app.config";
 import PopupPersonal from "@/components/Dialogs/PopupPersonal.vue";
-  
+
 const modalPersonal = ref<boolean>(false);
 const personId = ref<string>("");
 const $q = useQuasar();
@@ -395,7 +395,6 @@ onMounted(async () => {
                     :class="getClass(edit)"
                     :outlined="edit"
                     dense
-                    lazy-rules
                     :borderless="!edit"
                     :readonly="!edit"
                     :model-value="date !== null ? date2Thai(date) : null"
@@ -429,7 +428,6 @@ onMounted(async () => {
               :readonly="!edit"
               :borderless="!edit"
               v-model="reason"
-             
               hide-bottom-space
               :label="`${'หมายเหตุ '}`"
               type="textarea"

src/modules/05_placement/components/Other/Detail.vue

@@ -18,7 +18,7 @@ import keycloak from "@/plugins/keycloak";
 
 import CurruncyInput from "@/components/CurruncyInput.vue";
 import PopupPersonal from "@/components/Dialogs/PopupPersonal.vue";
-  
+
 const modalPersonal = ref<boolean>(false);
 const personId = ref<string>("");
 const $q = useQuasar();
@@ -434,7 +434,6 @@ onMounted(async () => {
                     :class="getClass(edit)"
                     :outlined="edit"
                     dense
-                    lazy-rules
                     :readonly="!edit"
                     :borderless="!edit"
                     :model-value="date !== null ? date2Thai(date) : null"
@@ -528,7 +527,6 @@ onMounted(async () => {
                     :class="getClass(edit)"
                     :outlined="edit"
                     dense
-                    lazy-rules
                     :readonly="!edit"
                     :borderless="!edit"
                     :model-value="

src/modules/05_placement/components/Other/OtherModal.vue

@@ -172,7 +172,7 @@ const saveAppoint = async () => {
         // mouthSalaryAmount: dataForm.mouthSalaryAmount,
         // positionSalaryAmount: dataForm.positionSalaryAmount,
       };
-      
+
       showLoader();
       await http
         .put(config.API.otherPosition(id.value), dataAppoint)
@@ -277,8 +277,6 @@ const positionLevelOptions = ref<Object[]>([
 
 const selectedPosition = async (data: any) => {
   if (data.name == null && selected.value != data.keyId) {
-    
-
     editDataStatus.value = true;
     selected.value = data.keyId;
 
@@ -359,7 +357,6 @@ const selectedPosition = async (data: any) => {
     dataForm.positionPathSideId = "";
     dataForm.positionTypeId = "";
   }
-
 };
 
 const checkPosition = (val: string) => {
@@ -372,25 +369,19 @@ const expanded = ref<string[]>([]);
 watch(props, () => {
   expanded.value = [];
   const dataPersonal = props.personal;
- 
 
   if (dataPersonal) {
     dataPersonal.map((data: any) => {
       personal.value = data;
     });
-    
   }
- 
 
   if (personal.value) {
-
     let findData: any = null;
     dataRespone.value.map((x: any) => {
       findData = findByPerson(x);
-    
 
       if (findData != null) {
-        
         selectedPosition(findData);
         for (let i = 3; i <= findData.keyId.length; i += 2) {
           expanded.value.push(findData.keyId.slice(0, i));
@@ -597,7 +588,6 @@ function findByPerson(element: any): any {
                             class="full-width inputgreen cursor-pointer"
                             outlined
                             dense
-                            lazy-rules
                             :model-value="
                               date2Thai(new Date(dataForm.containDate))
                             "

src/modules/05_placement/components/PersonalDetail/Education.vue

@@ -870,7 +870,6 @@ const getClass = (val: boolean) => {
                           :class="getClass(edit)"
                           :outlined="edit"
                           dense
-                          lazy-rules
                           :borderless="!edit"
                           :model-value="startDate + 543"
                           :rules="[
@@ -915,7 +914,6 @@ const getClass = (val: boolean) => {
                           :class="getClass(edit)"
                           :outlined="edit"
                           dense
-                          lazy-rules
                           :borderless="!edit"
                           :model-value="date2Thai(startDate2)"
                           :rules="[
@@ -965,7 +963,6 @@ const getClass = (val: boolean) => {
                           :class="getClass(edit)"
                           :outlined="edit"
                           dense
-                          lazy-rules
                           :borderless="!edit"
                           :model-value="endDate + 543"
                           :rules="[
@@ -1009,7 +1006,6 @@ const getClass = (val: boolean) => {
                           :class="getClass(edit)"
                           :outlined="edit"
                           dense
-                          lazy-rules
                           :borderless="!edit"
                           :model-value="date2Thai(endDate2)"
                           :rules="[
@@ -1059,7 +1055,6 @@ const getClass = (val: boolean) => {
                     :class="getClass(edit)"
                     :outlined="edit"
                     dense
-                    lazy-rules
                     :borderless="!edit"
                     :model-value="date2Thai(finishDate)"
                     :rules="[

src/modules/05_placement/components/PersonalDetail/Information/Certicate.vue

@@ -327,7 +327,7 @@ const clickSave = async () => {
 /**
  * บันทึกเพิ่มข้อมูล
  */
-const saveData = async () => { 
+const saveData = async () => {
   showLoader();
   await http
     .post(config.API.placementCertId(route.params.personalId.toString()), {
@@ -699,7 +699,6 @@ const getClass = (val: boolean) => {
                     :class="getClass(edit)"
                     :outlined="edit"
                     dense
-                    lazy-rules
                     :borderless="!edit"
                     :model-value="date2Thai(issueDate)"
                     :rules="[
@@ -745,7 +744,6 @@ const getClass = (val: boolean) => {
                     :class="getClass(edit)"
                     :outlined="edit"
                     dense
-                    lazy-rules
                     :borderless="!edit"
                     :model-value="date2Thai(expireDate)"
                     :rules="[(val) => !!val || `${'กรุณาเลือกวันที่หมดอายุ'}`]"

src/modules/05_placement/components/PersonalDetail/Information/Information.vue

@@ -438,7 +438,6 @@ const getClass = (val: boolean) => {
                 hide-bottom-space
                 :outlined="edit"
                 dense
-                lazy-rules
                 :readonly="!edit"
                 :borderless="!edit"
                 :model-value="

src/modules/05_placement/components/PersonalList/CardPosition.vue

@@ -345,7 +345,6 @@ onMounted(async () => {
                       hide-bottom-space
                       :model-value="date != null ? date2Thai(date) : null"
                       label="วันที่รายงานตัว"
-                      lazy-rules
                     >
                       <template v-slot:prepend>
                         <q-icon

src/modules/05_placement/components/PersonalList/OrgTree.vue

@@ -61,7 +61,7 @@ let dataForm = reactive({
 });
 
 /** ฟังชั่น get file*/
-async function fetchPublishFile(){
+async function fetchPublishFile() {
   await http
     .get(config.API.getPublishFileHistory)
     .then((res) => {
@@ -74,7 +74,7 @@ async function fetchPublishFile(){
     .finally(async () => {
       hideLoader();
     });
-};
+}
 
 /** โหลดข้อมูลโครงสร้างจาก json */
 const loadTreeData = async () => {
@@ -596,7 +596,6 @@ onMounted(async () => {
                             class="full-width inputgreen cursor-pointer"
                             outlined
                             dense
-                            lazy-rules
                             :model-value="
                               date2Thai(new Date(dataForm.containDate))
                             "

src/modules/05_placement/components/Receive/receiveDetail2.vue

@@ -661,7 +661,7 @@ onMounted(async () => {
                     hide-bottom-space
                     :outlined="edit"
                     dense
-                    lazy-rules
+                    
                     :readonly="!edit"
                     :borderless="!edit"
                     :model-value="

src/modules/05_placement/components/Receive/receiveModal.vue

@@ -538,7 +538,7 @@ onMounted(async () => {
                             class="full-width inputgreen cursor-pointer"
                             outlined
                             dense
-                            lazy-rules
+                            
                             :model-value="
                               date2Thai(new Date(dataForm.containDate))
                             "

src/modules/05_placement/components/Relocation/RelocationModal.vue

@@ -283,8 +283,6 @@ const positionLevelOptions = ref<Object[]>([
 
 const selectedPosition = async (data: any) => {
   if (data.name == null && selected.value != data.keyId) {
-    
-
     editDataStatus.value = true;
     selected.value = data.keyId;
 
@@ -384,7 +382,6 @@ watch(props, () => {
     });
   }
 
-
   if (personal.value) {
     // const findData = dataRespone.value.find(findByPerson);
     let findData: any = null;
@@ -598,7 +595,6 @@ function findByPerson(element: any): any {
                             class="full-width inputgreen cursor-pointer"
                             outlined
                             dense
-                            lazy-rules
                             :model-value="
                               date2Thai(new Date(dataForm.containDate))
                             "

src/modules/05_placement/components/Repatriate/RepatriatebyId.vue

@@ -13,7 +13,7 @@ import config from "@/app.config";
 import type { QForm } from "quasar";
 import type { ResponseData } from "@/modules/05_placement/interface/response/officer";
 import PopupPersonal from "@/components/Dialogs/PopupPersonal.vue";
-  
+
 const modalPersonal = ref<boolean>(false);
 const personalId = ref<string>("");
 const $q = useQuasar();
@@ -386,7 +386,6 @@ onMounted(async () => {
                     :class="getClass(edit)"
                     :outlined="edit"
                     dense
-                    lazy-rules
                     :readonly="!edit"
                     :borderless="!edit"
                     :model-value="date !== null ? date2Thai(date) : null"
@@ -431,7 +430,6 @@ onMounted(async () => {
                     :class="getClass(edit)"
                     :outlined="edit"
                     dense
-                    lazy-rules
                     :readonly="!edit"
                     :borderless="!edit"
                     :model-value="

src/modules/05_placement/components/Transfer/transferRegistry.vue

@@ -664,7 +664,7 @@ onMounted(async () => {
                         :class="getClass(edit)"
                         :outlined="edit"
                         dense
-                        lazy-rules
+                       
                         :borderless="!edit"
                         :readonly="!edit"
                         :model-value="date !== null ? date2Thai(date) : null"

src/modules/05_placement/components/helpgovernment/governmentDetail.vue

@@ -8,7 +8,7 @@ import config from "@/app.config";
 import type { QForm } from "quasar";
 import type { resHelpDetail } from "@/modules/05_placement/interface/response/officer";
 import PopupPersonal from "@/components/Dialogs/PopupPersonal.vue";
-  
+
 const modalPersonal = ref<boolean>(false);
 const personId = ref<string>("");
 const $q = useQuasar();
@@ -316,7 +316,6 @@ onMounted(async () => {
                     :outlined="edit"
                     dense
                     :readonly="!edit"
-                    lazy-rules
                     :borderless="!edit"
                     :rules="[(val) => !!val || `${'กรุณาเลือกตั้งแต่วัน'}`]"
                     :model-value="
@@ -363,7 +362,6 @@ onMounted(async () => {
                     :class="getClass(edit)"
                     :outlined="edit"
                     dense
-                    lazy-rules
                     :borderless="!edit"
                     :model-value="dateEnd !== null ? date2Thai(dateEnd) : null"
                     :rules="[(val) => !!val || `${'กรุณาเลือกตั้งแต่วัน'}`]"

src/modules/06_retirement/components/Discharged/dischargedRegistry.vue

@@ -12,7 +12,7 @@ import keycloak from "@/plugins/keycloak";
 import type { QForm } from "quasar";
 import type { ResponseDataDetail } from "@/modules/06_retirement/interface/response/discharged";
 import PopupPersonal from "@/components/Dialogs/PopupPersonal.vue";
-  
+
 const modalPersonal = ref<boolean>(false);
 const personId = ref<string>("");
 /** use */
@@ -187,7 +187,6 @@ function onclickViewinfo(id: string) {
 function updatemodalPersonal(modal: boolean) {
   modalPersonal.value = modal;
 }
-
 </script>
 <template>
   <div class="toptitle text-dark col-12 row items-center">
@@ -423,7 +422,6 @@ function updatemodalPersonal(modal: boolean) {
                     :class="getClass(edit)"
                     :outlined="edit"
                     dense
-                    lazy-rules
                     :readonly="!edit"
                     :borderless="!edit"
                     :model-value="date !== null ? date2Thai(date) : null"

src/modules/06_retirement/components/DismissOrder/outRegistry.vue

@@ -12,7 +12,7 @@ import keycloak from "@/plugins/keycloak";
 import type { QForm } from "quasar";
 import type { ResponseDataDetail } from "@/modules/06_retirement/interface/response/expulsion";
 import PopupPersonal from "@/components/Dialogs/PopupPersonal.vue";
-  
+
 const modalPersonal = ref<boolean>(false);
 const personId = ref<string>("");
 /** use */
@@ -426,7 +426,6 @@ function updatemodalPersonal(modal: boolean) {
                     :class="getClass(edit)"
                     :outlined="edit"
                     dense
-                    lazy-rules
                     :readonly="!edit"
                     :borderless="!edit"
                     :model-value="date !== null ? date2Thai(date) : null"

src/modules/06_retirement/components/ExitInterview/exitMain.vue

@@ -499,7 +499,6 @@ const openModalCalendar = (rows: any) => {
                 <q-input
                   outlined
                   dense
-                  lazy-rules
                   :model-value="
                     dateBreak !== null ? date2Thai(dateBreak) : null
                   "

src/modules/06_retirement/components/Expulsion/expulsionRegistry.vue

@@ -11,7 +11,7 @@ import keycloak from "@/plugins/keycloak";
 import type { QForm } from "quasar";
 import type { ResponseDataDetail } from "@/modules/06_retirement/interface/response/expulsion";
 import PopupPersonal from "@/components/Dialogs/PopupPersonal.vue";
-  
+
 const modalPersonal = ref<boolean>(false);
 const personId = ref<string>("");
 /** Use */
@@ -436,7 +436,6 @@ function updatemodalPersonal(modal: boolean) {
                     :class="getClass(edit)"
                     :outlined="edit"
                     dense
-                    lazy-rules
                     :borderless="!edit"
                     :readonly="!edit"
                     :model-value="date !== null ? date2Thai(date) : null"

src/modules/06_retirement/components/ListRetirement/TableList.vue

@@ -837,7 +837,6 @@ function updatemodalPersonal(modal: boolean) {
                     dense
                     outlined
                     :rules="[(val) => !!val || `${'กรุณาเลือกวันที่'}`]"
-                    lazy-rules
                     :model-value="
                       signDate !== null ? date2Thai(signDate) : null
                     "

src/modules/06_retirement/components/resign/ResignByid.vue

@@ -314,7 +314,6 @@ const clickCancelConditions = async () => {
   conditions.value = false;
 };
 
-
 const saveConditions = () => {
   if (myForm.value !== null) {
     myForm.value.validate().then((success) => {
@@ -335,9 +334,7 @@ const saveConditions = () => {
 };
 
 //Save จาก Api
-const dataSave = async () => {
-
-};
+const dataSave = async () => {};
 
 /**
  * Functionบันทึก
@@ -361,7 +358,6 @@ const conditionSave = () => {
   }
 };
 
-
 //Save จาก Api
 const saveData = async () => {
   const formData = new FormData();
@@ -772,7 +768,7 @@ function confirmRemove(fileId: string) {
           label="แก้ไข"
           style="width: 80px"
           @click="conditions = !conditions"
-        />  
+        />
       </div>
       <div v-else class="q-gutter-x-sm">
         <q-btn
@@ -1153,7 +1149,6 @@ function confirmRemove(fileId: string) {
                     :class="getClass(edit)"
                     :outlined="edit"
                     dense
-                    lazy-rules
                     :borderless="!edit"
                     :model-value="date !== null ? date2Thai(date) : null"
                     :rules="[
@@ -1304,7 +1299,6 @@ function confirmRemove(fileId: string) {
                 <q-input
                   outlined
                   dense
-                  lazy-rules
                   :model-value="
                     dateBreak !== null ? date2Thai(dateBreak) : null
                   "

src/modules/07_insignia/components/1_Proposals/addProposals.vue

@@ -250,7 +250,6 @@ onMounted(async () => {
                   <template #trigger>
                     <q-input
                       dense
-                      lazy-rules
                       outlined
                       :model-value="yearly + 543"
                       :rules="[(val) => !!val || `${'กรุณาเลือกปีที่เสนอ'}`]"

src/modules/07_insignia/components/3_result/DialogForm.vue

@@ -659,7 +659,6 @@ const filterSelector = (val: any, update: Function, name: any) => {
                     dense
                     borderless
                     outlined
-                    lazy-rules
                     hide-bottom-space
                     :model-value="
                       invoiceDate != null ? date2Thai(invoiceDate) : undefined

src/modules/07_insignia/components/3_result/Dialogbody.vue

@@ -91,11 +91,11 @@ async function SaveData(type: string, id: string) {
 function dataSave(type: string, id: string) {
   const formData = new FormData();
   if (props.dateCheckReceive === null) {
-    formData.append("Date", dateToISO(Datereceive.value as Date ?? nullii));
+    formData.append("Date", dateToISO((Datereceive.value as Date) ?? nullii));
     formData.append("File", files.value);
     formData.append("OrgId", OrganazationId.value);
   } else {
-    formData.append("Date", dateToISO(Datereturn.value as Date?? nullii));
+    formData.append("Date", dateToISO((Datereturn.value as Date) ?? nullii));
     formData.append("File", filesReturn.value);
     formData.append("OrgId", OrganazationId2.value);
   }
@@ -226,7 +226,7 @@ watch(props, () => {
                     :label="`${'วันที่ได้รับ'}`"
                     :disable="dateCheckReceive !== null"
                   >
-                  <template v-if="Datereceive" v-slot:append>
+                    <template v-if="Datereceive" v-slot:append>
                       <q-icon
                         name="cancel"
                         @click.stop.prevent="Datereceive = null"
@@ -319,7 +319,6 @@ watch(props, () => {
                     dense
                     borderless
                     outlined
-                    lazy-rules
                     :rules="[(val) => !!val || 'กรุณาเลือกวันที่คืน']"
                     hide-bottom-space
                     :model-value="

src/modules/07_insignia/components/5_Borrow/DialogForm.vue

@@ -232,7 +232,7 @@ async function searchcardid() {
   } else {
     fullName.value = "";
     brand.value = "";
-    receivedate.value = null
+    receivedate.value = null;
     // OrganazationId.value = "";
   }
 }
@@ -243,7 +243,6 @@ function closeDialog() {
   props.close();
 }
 
-
 /** function reset วันที่คืน*/
 function clearReturnDate() {
   returndate.value = null;
@@ -420,13 +419,13 @@ watch(props, () => {
                       "
                       :label="`${'วันที่ยืม'}`"
                     >
-                    <template v-if="receivedate" v-slot:append>
-                      <q-icon
-                        name="cancel"
-                        @click.stop.prevent="receivedate = null"
-                        class="cursor-pointer"
-                      />
-                    </template>
+                      <template v-if="receivedate" v-slot:append>
+                        <q-icon
+                          name="cancel"
+                          @click.stop.prevent="receivedate = null"
+                          class="cursor-pointer"
+                        />
+                      </template>
                     </q-input>
                   </template>
                 </datepicker>
@@ -483,7 +482,6 @@ watch(props, () => {
                       dense
                       borderless
                       outlined
-                      lazy-rules
                       :rules="[(val) => !!val || 'กรุณาเลือกวันที่คืน']"
                       hide-bottom-space
                       :model-value="

src/modules/08_registryEmployee/components/AddEmployee/Main.vue

@@ -447,7 +447,6 @@ const clickBack = () => {
                   hide-bottom-space
                   outlined
                   dense
-                  lazy-rules
                   :model-value="
                     informaData.birthDate == null
                       ? null

src/modules/08_registryEmployee/components/EditEmployee/Assessment.vue

@@ -35,8 +35,15 @@ const store = useProfileDataStore();
 const { profileData, changeProfileColumns } = store;
 
 const mixin = useCounterMixin();
-const { date2Thai, success, dateToISO, messageError, showLoader, hideLoader,dialogConfirm } =
-  mixin;
+const {
+  date2Thai,
+  success,
+  dateToISO,
+  messageError,
+  showLoader,
+  hideLoader,
+  dialogConfirm,
+} = mixin;
 const route = useRoute();
 const id = ref<string>("");
 const name = ref<string>();
@@ -395,9 +402,9 @@ const clickAdd = async () => {
 /**
  * กดบันทึกใน dialog
  */
-const clickSave = () =>{
-  dialogConfirm($q,()=>SaveData())
-}
+const clickSave = () => {
+  dialogConfirm($q, () => SaveData());
+};
 const SaveData = async () => {
   await myForm.value.validate().then(async (result: boolean) => {
     if (result) {
@@ -735,9 +742,7 @@ const textPoint = (val: number | undefined) => {
         />
         <q-separator />
         <q-card-section class="q-p-sm">
-          <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-xs-12 col-sm-12 col-md-12">
               <datepicker
                 menu-class-name="modalfix"
@@ -758,7 +763,6 @@ const textPoint = (val: number | undefined) => {
                     :class="getClass(edit)"
                     :outlined="edit"
                     dense
-                    lazy-rules
                     :borderless="!edit"
                     :model-value="date2Thai(date)"
                     :rules="[(val) => !!val || `${'กรุณาเลือกวันที่ได้รับ'}`]"

src/modules/08_registryEmployee/components/EditEmployee/Discipline.vue

@@ -34,8 +34,15 @@ const store = useProfileDataStore();
 const { profileData, changeProfileColumns } = store;
 
 const mixin = useCounterMixin();
-const { date2Thai, success, dateToISO, messageError, showLoader, hideLoader, dialogConfirm } =
-  mixin;
+const {
+  date2Thai,
+  success,
+  dateToISO,
+  messageError,
+  showLoader,
+  hideLoader,
+  dialogConfirm,
+} = mixin;
 const route = useRoute();
 const id = ref<string>("");
 const level = ref<string>();
@@ -415,8 +422,8 @@ const clickAdd = async () => {
  * กดบันทึกใน dialog
  */
 const clickSave = () => {
-  dialogConfirm($q,()=>SaveData())
-}
+  dialogConfirm($q, () => SaveData());
+};
 const SaveData = async () => {
   await myForm.value.validate().then(async (result: boolean) => {
     if (result) {
@@ -723,9 +730,7 @@ const resetFilter = () => {};
         <DialogHeader tittle="วินัย" :close="clickClose" />
         <q-separator />
         <q-card-section class="q-p-sm">
-          <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-xs-6 col-sm-6 col-md-6">
               <datepicker
                 menu-class-name="modalfix"
@@ -746,7 +751,6 @@ const resetFilter = () => {};
                     :class="getClass(edit)"
                     :outlined="edit"
                     dense
-                    lazy-rules
                     :borderless="!edit"
                     :model-value="date2Thai(date)"
                     :rules="[(val:string) => !!val || `${'กรุณาเลือกวัน เดือน ปี'}`]"
@@ -866,7 +870,6 @@ const resetFilter = () => {};
                     :class="getClass(edit)"
                     :outlined="edit"
                     dense
-                    lazy-rules
                     :borderless="!edit"
                     :model-value="
                       refCommandDate == null ? null : date2Thai(refCommandDate)

src/modules/08_registryEmployee/components/EditEmployee/Education.vue

@@ -32,8 +32,15 @@ const store = useProfileDataStore();
 const { profileData, changeProfileColumns } = store;
 
 const mixin = useCounterMixin();
-const { success, dateToISO, date2Thai, messageError, showLoader, hideLoader,dialogConfirm } =
-  mixin;
+const {
+  success,
+  dateToISO,
+  date2Thai,
+  messageError,
+  showLoader,
+  hideLoader,
+  dialogConfirm,
+} = mixin;
 const route = useRoute();
 const id = ref<string>("");
 const levelId = ref<string>();
@@ -657,8 +664,8 @@ const clickAdd = async () => {
  * กดบันทึกใน dialog
  */
 const clickSave = () => {
-  dialogConfirm($q,() => SaveData() )
-}
+  dialogConfirm($q, () => SaveData());
+};
 const SaveData = async () => {
   await myForm.value.validate().then(async (result: boolean) => {
     if (result) {
@@ -1054,9 +1061,7 @@ const getClass = (val: boolean) => {
         <DialogHeader tittle="ประวัติการศึกษา" :close="clickClose" />
         <q-separator />
         <q-card-section class="q-p-sm">
-          <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-xs-6 col-sm-6 col-md-6">
               <selector
                 :class="getClass(edit)"
@@ -1142,7 +1147,6 @@ const getClass = (val: boolean) => {
                           :class="getClass(edit)"
                           :outlined="edit"
                           dense
-                          lazy-rules
                           :borderless="!edit"
                           :model-value="startDate + 543"
                           :rules="[
@@ -1187,7 +1191,6 @@ const getClass = (val: boolean) => {
                           :class="getClass(edit)"
                           :outlined="edit"
                           dense
-                          lazy-rules
                           :borderless="!edit"
                           :model-value="date2Thai(startDate2)"
                           :rules="[
@@ -1237,7 +1240,6 @@ const getClass = (val: boolean) => {
                           :class="getClass(edit)"
                           :outlined="edit"
                           dense
-                          lazy-rules
                           :borderless="!edit"
                           :model-value="endDate + 543"
                           :rules="[
@@ -1281,7 +1283,6 @@ const getClass = (val: boolean) => {
                           :class="getClass(edit)"
                           :outlined="edit"
                           dense
-                          lazy-rules
                           :borderless="!edit"
                           :model-value="date2Thai(endDate2)"
                           :rules="[
@@ -1331,7 +1332,6 @@ const getClass = (val: boolean) => {
                     :class="getClass(edit)"
                     :outlined="edit"
                     dense
-                    lazy-rules
                     :borderless="!edit"
                     :model-value="date2Thai(finishDate)"
                     :rules="[

src/modules/08_registryEmployee/components/EditEmployee/Employment.vue

@@ -311,29 +311,71 @@ const paginationHis = ref({
   <q-card flat bordered class="col-12 q-px-lg q-py-md">
     <div class="flex items-center">
       <div class="flex items-center">
-        <q-icon name="mdi-clipboard" size="1.5em" color="grey-5" class="q-mr-md" />
+        <q-icon
+          name="mdi-clipboard"
+          size="1.5em"
+          color="grey-5"
+          class="q-mr-md"
+        />
 
         <div class="text-bold text-subtitle2 col-12 row items-center">
           ข้อมูลการจ้าง
         </div>
       </div>
       <div class="q-gutter-sm q-mx-sm">
-        <q-btn size="12px" flat round color="primary" @click="onClickAdd" icon="mdi-plus">
+        <q-btn
+          size="12px"
+          flat
+          round
+          color="primary"
+          @click="onClickAdd"
+          icon="mdi-plus"
+        >
           <q-tooltip>เพิ่มข้อมูลการจ้าง</q-tooltip>
         </q-btn>
       </div>
 
       <q-space />
       <div class="q-gutter-sm" style="display: flex">
-        <q-input outlined dense v-model="filter" label="ค้นหา" style="min-width: 150px" />
+        <q-input
+          outlined
+          dense
+          v-model="filter"
+          label="ค้นหา"
+          style="min-width: 150px"
+        />
 
-        <q-select v-model="visibleColumns" multiple outlined dense options-dense :display-value="$q.lang.table.columns"
-          emit-value map-options :options="columns" option-value="name" options-cover style="min-width: 150px" />
+        <q-select
+          v-model="visibleColumns"
+          multiple
+          outlined
+          dense
+          options-dense
+          :display-value="$q.lang.table.columns"
+          emit-value
+          map-options
+          :options="columns"
+          option-value="name"
+          options-cover
+          style="min-width: 150px"
+        />
       </div>
     </div>
     <div class="q-mt-sm">
-      <d-table flat bordered id="table" ref="table" :columns="columns" :rows="rows" :filter="filter"
-        row-key="dateEmployment" :paging="true" dense :visible-columns="visibleColumns" v-model:pagination="pagination">
+      <d-table
+        flat
+        bordered
+        id="table"
+        ref="table"
+        :columns="columns"
+        :rows="rows"
+        :filter="filter"
+        row-key="dateEmployment"
+        :paging="true"
+        dense
+        :visible-columns="visibleColumns"
+        v-model:pagination="pagination"
+      >
         <template v-slot:header="props">
           <q-tr :props="props">
             <q-th v-for="col in props.cols" :key="col.name" :props="props">
@@ -352,16 +394,38 @@ const paginationHis = ref({
               </div>
             </q-td>
             <q-td>
-              <q-btn dense flat round color="primary" icon="mdi-pencil" @click="clickEdit(props.row, 'edit')">
+              <q-btn
+                dense
+                flat
+                round
+                color="primary"
+                icon="mdi-pencil"
+                @click="clickEdit(props.row, 'edit')"
+              >
                 <q-tooltip>แก้ไขข้อมูล</q-tooltip>
               </q-btn>
             </q-td>
             <q-td>
-              <q-btn dense flat round color="red" icon="mdi-delete" @click="cilckDelete(props.row.id)">
-                <q-tooltip>ลบข้อมูล</q-tooltip></q-btn>
+              <q-btn
+                dense
+                flat
+                round
+                color="red"
+                icon="mdi-delete"
+                @click="cilckDelete(props.row.id)"
+              >
+                <q-tooltip>ลบข้อมูล</q-tooltip></q-btn
+              >
             </q-td>
             <q-td>
-              <q-btn dense flat round color="info" @click="openPopupHistory(props.row.id)" icon="mdi-history">
+              <q-btn
+                dense
+                flat
+                round
+                color="info"
+                @click="openPopupHistory(props.row.id)"
+                icon="mdi-history"
+              >
                 <q-tooltip>ประวัติข้อมูลการจ้าง </q-tooltip>
               </q-btn>
             </q-td>
@@ -380,17 +444,33 @@ const paginationHis = ref({
           </span>
           <span style="margin-right: 0" v-else> เพิ่มข้อมูลการจ้าง </span>
         </q-toolbar-title>
-        <q-btn for="closeDialog" icon="close" unelevated round dense style="color: #eb0505; background-color: #ffdede"
-          @click="colsePopup" />
+        <q-btn
+          for="closeDialog"
+          icon="close"
+          unelevated
+          round
+          dense
+          style="color: #eb0505; background-color: #ffdede"
+          @click="colsePopup"
+        />
       </q-toolbar>
       <q-separator />
       <form @submit.prevent="validateForm">
         <q-card-section class="q-pt-none">
           <div class="col-12 row q-pa-md">
-            <div class="col-xs-12 col-sm-12 row q-col-gutter-x-md q-col-gutter-y-xs">
+            <div
+              class="col-xs-12 col-sm-12 row q-col-gutter-x-md q-col-gutter-y-xs"
+            >
               <div class="col-xs-12 col-sm-6">
-                <datepicker menu-class-name="modalfix" v-model="formData.dateEmployment" :locale="'th'" autoApply
-                  borderless :enableTimePicker="false" week-start="0">
+                <datepicker
+                  menu-class-name="modalfix"
+                  v-model="formData.dateEmployment"
+                  :locale="'th'"
+                  autoApply
+                  borderless
+                  :enableTimePicker="false"
+                  week-start="0"
+                >
                   <template #year="{ year }">
                     {{ year + 543 }}
                   </template>
@@ -398,13 +478,26 @@ const paginationHis = ref({
                     {{ parseInt(value + 543) }}
                   </template>
                   <template #trigger>
-                    <q-input for="inputdateEmployment" ref="dateEmploymentRef" outlined dense
-                      class="full-width datepicker" :model-value="formData.dateEmployment != null
+                    <q-input
+                      for="inputdateEmployment"
+                      ref="dateEmploymentRef"
+                      outlined
+                      dense
+                      class="full-width datepicker"
+                      :model-value="
+                        formData.dateEmployment != null
                           ? date2Thai(formData.dateEmployment)
                           : null
-                        " label="วันที่จ้าง" :rules="[(val) => !!val || `${'กรุณาเลือกวันที่จ้าง'}`]" lazy-rules>
+                      "
+                      label="วันที่จ้าง"
+                      :rules="[(val) => !!val || `${'กรุณาเลือกวันที่จ้าง'}`]"
+                    >
                       <template v-slot:prepend>
-                        <q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)">
+                        <q-icon
+                          name="event"
+                          class="cursor-pointer"
+                          style="color: var(--q-primary)"
+                        >
                         </q-icon>
                       </template>
                     </q-input>
@@ -413,9 +506,16 @@ const paginationHis = ref({
               </div>
 
               <div class="col-xs-12 col-sm-6">
-                <q-input for="inputOrderEmployment" ref="orderEmploymentRef" dense outlined
-                  v-model="formData.orderEmployment" label="คำสั่งจ้าง"
-                  :rules="[(val) => !!val || `${'กรุณากรอกคำสั่งจ้าง'}`]" lazy-rules />
+                <q-input
+                  for="inputOrderEmployment"
+                  ref="orderEmploymentRef"
+                  dense
+                  outlined
+                  v-model="formData.orderEmployment"
+                  label="คำสั่งจ้าง"
+                  :rules="[(val) => !!val || `${'กรุณากรอกคำสั่งจ้าง'}`]"
+                  lazy-rules
+                />
               </div>
             </div>
           </div>
@@ -425,8 +525,16 @@ const paginationHis = ref({
         </q-card-section>
         <q-separator />
         <q-card-actions align="right" class="bg-white text-teal">
-          <q-btn for="ButtonOnSubmit" id="onSubmit" flat round color="secondary" icon="mdi-content-save-outline"
-            type="submit"><q-tooltip>บับทึกข้อมูล</q-tooltip></q-btn>
+          <q-btn
+            for="ButtonOnSubmit"
+            id="onSubmit"
+            flat
+            round
+            color="secondary"
+            icon="mdi-content-save-outline"
+            type="submit"
+            ><q-tooltip>บับทึกข้อมูล</q-tooltip></q-btn
+          >
         </q-card-actions>
       </form>
     </q-card>
@@ -438,8 +546,15 @@ const paginationHis = ref({
         <q-toolbar-title class="text-subtitle1 text-weight-bold">
           <span style="margin-right: 0"> ประวัติข้อมูลการจ้าง </span>
         </q-toolbar-title>
-        <q-btn for="closeDialog" icon="close" unelevated round dense style="color: #eb0505; background-color: #ffdede"
-          @click="colsePopup" />
+        <q-btn
+          for="closeDialog"
+          icon="close"
+          unelevated
+          round
+          dense
+          style="color: #eb0505; background-color: #ffdede"
+          @click="colsePopup"
+        />
       </q-toolbar>
       <q-separator />
 
@@ -447,16 +562,44 @@ const paginationHis = ref({
         <q-toolbar class="q-pa-none">
           <q-space />
           <div class="q-gutter-sm" style="display: flex">
-            <q-input outlined dense v-model="filterHis" label="ค้นหา" style="min-width: 150px" />
+            <q-input
+              outlined
+              dense
+              v-model="filterHis"
+              label="ค้นหา"
+              style="min-width: 150px"
+            />
 
-            <q-select v-model="visibleColumnsHis" multiple outlined dense options-dense
-              :display-value="$q.lang.table.columns" emit-value map-options :options="columnsHis" option-value="name"
-              options-cover style="min-width: 150px" />
+            <q-select
+              v-model="visibleColumnsHis"
+              multiple
+              outlined
+              dense
+              options-dense
+              :display-value="$q.lang.table.columns"
+              emit-value
+              map-options
+              :options="columnsHis"
+              option-value="name"
+              options-cover
+              style="min-width: 150px"
+            />
           </div>
         </q-toolbar>
-        <d-table flat bordered id="table" ref="table" :columns="columnsHis" :rows="rowsHis" :filter="filterHis"
-          row-key="dateEmployment" :paging="true" dense :visible-columns="visibleColumnsHis"
-          v-model:pagination="paginationHis">
+        <d-table
+          flat
+          bordered
+          id="table"
+          ref="table"
+          :columns="columnsHis"
+          :rows="rowsHis"
+          :filter="filterHis"
+          row-key="dateEmployment"
+          :paging="true"
+          dense
+          :visible-columns="visibleColumnsHis"
+          v-model:pagination="paginationHis"
+        >
           <template v-slot:header="props">
             <q-tr :props="props">
               <q-th v-for="col in props.cols" :key="col.name" :props="props">

src/modules/08_registryEmployee/components/EditEmployee/Information/Certicate.vue

@@ -34,8 +34,15 @@ const store = useProfileDataStore();
 const { profileData, changeProfileColumns } = store;
 
 const mixin = useCounterMixin();
-const { date2Thai, success, dateToISO, messageError, showLoader, hideLoader ,dialogConfirm} =
-  mixin;
+const {
+  date2Thai,
+  success,
+  dateToISO,
+  messageError,
+  showLoader,
+  hideLoader,
+  dialogConfirm,
+} = mixin;
 const route = useRoute();
 const id = ref<string>("");
 const certificateNo = ref<string>();
@@ -326,10 +333,10 @@ const clickAdd = async () => {
  * กดบันทึกใน dialog
  */
 const clickSave = () => {
-  dialogConfirm($q,() => SaveData())
-}
+  dialogConfirm($q, () => SaveData());
+};
 const SaveData = async () => {
- await myForm.value?.validate().then(async (result: boolean) => {
+  await myForm.value?.validate().then(async (result: boolean) => {
     if (result) {
       if (modalEdit.value) {
         await editData();
@@ -638,9 +645,7 @@ const getClass = (val: boolean) => {
         />
         <q-separator />
         <q-card-section class="q-p-sm">
-          <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-xs-6 col-sm-6 col-md-6">
               <q-input
                 :class="getClass(edit)"
@@ -708,7 +713,6 @@ const getClass = (val: boolean) => {
                     :class="getClass(edit)"
                     :outlined="edit"
                     dense
-                    lazy-rules
                     :borderless="!edit"
                     :model-value="date2Thai(issueDate)"
                     :rules="[
@@ -754,7 +758,6 @@ const getClass = (val: boolean) => {
                     :class="getClass(edit)"
                     :outlined="edit"
                     dense
-                    lazy-rules
                     :borderless="!edit"
                     :model-value="date2Thai(expireDate)"
                     :rules="[(val) => !!val || `${'กรุณาเลือกวันที่หมดอายุ'}`]"

src/modules/08_registryEmployee/components/EditEmployee/Information/Government.vue

@@ -580,7 +580,6 @@ const getClass = (val: boolean) => {
                 hide-bottom-space
                 :outlined="edit"
                 dense
-                lazy-rules
                 :readonly="!edit"
                 :borderless="!edit"
                 :model-value="date2Thai(new Date(govermentData.containDate))"
@@ -633,7 +632,6 @@ const getClass = (val: boolean) => {
                 hide-bottom-space
                 :outlined="edit"
                 dense
-                lazy-rules
                 :readonly="!edit"
                 :borderless="!edit"
                 :model-value="date2Thai(new Date(govermentData.workDate))"
@@ -761,4 +759,4 @@ const getClass = (val: boolean) => {
       </q-tr>
     </template>
   </HistoryTable>
-</template>
+</template>

src/modules/08_registryEmployee/components/EditEmployee/Information/Information.vue

@@ -861,7 +861,6 @@ const getClass = (val: boolean) => {
                 hide-bottom-space
                 :outlined="edit"
                 dense
-                lazy-rules
                 :readonly="!edit"
                 :borderless="!edit"
                 :model-value="

src/modules/08_registryEmployee/components/EditEmployee/Leave.vue

@@ -1059,7 +1059,7 @@ const getClass = (val: boolean) => {
                     :class="getClass(edit)"
                     :outlined="edit"
                     dense
-                    lazy-rules
+                    
                     :borderless="!edit"
                     :model-value="dateThaiRange(dateRange)"
                     :rules="[(val:string) => !!val || `${'กรุณาเลือกวัน เดือน ปีที่ลา'}`]"

src/modules/08_registryEmployee/components/EditEmployee/Other.vue

@@ -536,7 +536,7 @@ const getClass = (val: boolean) => {
                     :class="getClass(edit)"
                     :outlined="edit"
                     dense
-                    lazy-rules
+                 
                     :borderless="!edit"
                     :model-value="date2Thai(date)"
                     :rules="[(val) => !!val || `${'กรุณาเลือกวันที่'}`]"

src/modules/08_registryEmployee/components/EditEmployee/Record.vue

@@ -650,7 +650,6 @@ const resetFilter = () => {};
                     :class="getClass(edit)"
                     :outlined="edit"
                     dense
-                    lazy-rules
                     :borderless="!edit"
                     :model-value="date2Thai(date)"
                     :rules="[(val) => !!val || `${'กรุณาเลือกวัน เดือน ปี'}`]"
@@ -747,7 +746,6 @@ const resetFilter = () => {};
                     :class="getClass(edit)"
                     :outlined="edit"
                     dense
-                    lazy-rules
                     :borderless="!edit"
                     :model-value="
                       refCommandDate == null ? null : date2Thai(refCommandDate)

src/modules/08_registryEmployee/components/EditEmployee/Salary.vue

@@ -1535,22 +1535,41 @@ const resetFilter = () => {};
       >
         <template #columns="props">
           <q-tr :props="props">
-            <q-td v-for="col in props.cols" :key="col.name" :props="props" @click="selectData(props)"
-              class="cursor-pointer">
+            <q-td
+              v-for="col in props.cols"
+              :key="col.name"
+              :props="props"
+              @click="selectData(props)"
+              class="cursor-pointer"
+            >
               <div v-if="col.name == 'date'" class="table_ellipsis">
                 {{ date2Thai(col.value) }}
               </div>
-              <div v-else-if="props.row.salaryStatus !== 'DEATH' && (
-                  col.name == 'positionSalaryAmount' ||
-                  col.name == 'mouthSalaryAmount' ||
-                  col.name == 'amount')
-                " class="table_ellipsis">
+              <div
+                v-else-if="
+                  props.row.salaryStatus !== 'DEATH' &&
+                  (col.name == 'positionSalaryAmount' ||
+                    col.name == 'mouthSalaryAmount' ||
+                    col.name == 'amount')
+                "
+                class="table_ellipsis"
+              >
                 {{ col.value == null ? "" : col.value.toLocaleString("en-US") }}
               </div>
-              <div v-else-if="props.row.salaryStatus === 'DEATH' && col.name == 'position'" class="table_ellipsis">
+              <div
+                v-else-if="
+                  props.row.salaryStatus === 'DEATH' && col.name == 'position'
+                "
+                class="table_ellipsis"
+              >
                 ถึงแก่กรรม
               </div>
-              <div v-else-if="props.row.salaryStatus === 'DEATH' && col.name !== 'salaryRef'" class="table_ellipsis">
+              <div
+                v-else-if="
+                  props.row.salaryStatus === 'DEATH' && col.name !== 'salaryRef'
+                "
+                class="table_ellipsis"
+              >
                 -
               </div>
               <div v-else class="table_ellipsis">
@@ -1660,7 +1679,6 @@ const resetFilter = () => {};
                             :class="getClass(edit)"
                             :outlined="edit"
                             dense
-                            lazy-rules
                             :borderless="!edit"
                             :model-value="date2Thai(date)"
                             :rules="[

src/modules/08_registryEmployee/components/EditEmployee/SalaryEmployee.vue

@@ -1618,7 +1618,6 @@ const resetFilter = () => {};
                             :class="getClass(edit)"
                             :outlined="edit"
                             dense
-                            lazy-rules
                             :borderless="!edit"
                             :model-value="date2Thai(date)"
                             :rules="[

src/modules/08_registryEmployee/components/EditEmployee/Train.vue

@@ -30,8 +30,15 @@ const store = useProfileDataStore();
 const { profileData, changeProfileColumns } = store;
 
 const mixin = useCounterMixin();
-const { date2Thai, success, dateToISO, messageError, showLoader, hideLoader,dialogConfirm } =
-  mixin;
+const {
+  date2Thai,
+  success,
+  dateToISO,
+  messageError,
+  showLoader,
+  hideLoader,
+  dialogConfirm,
+} = mixin;
 const route = useRoute();
 const id = ref<string>("");
 const name = ref<string>();
@@ -476,8 +483,8 @@ const SaveData = async () => {
  * บันทึกเพิ่มข้อมูล
  */
 const clickSave = () => {
-  dialogConfirm($q,() => SaveData())
-}
+  dialogConfirm($q, () => SaveData());
+};
 const saveData = async () => {
   if (profileId.value) {
     showLoader();
@@ -792,9 +799,7 @@ const getClass = (val: boolean) => {
         <DialogHeader tittle="การฝึกอบรม/ดูงาน" :close="clickClose" />
         <q-separator />
         <q-card-section class="q-p-sm">
-          <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-xs-6 col-sm-6 col-md-6">
               <q-input
                 :class="getClass(edit)"
@@ -851,7 +856,6 @@ const getClass = (val: boolean) => {
                     hide-bottom-space
                     :outlined="edit"
                     dense
-                    lazy-rules
                     :borderless="!edit"
                     :model-value="date2Thai(startDate)"
                     :rules="[
@@ -944,7 +948,6 @@ const getClass = (val: boolean) => {
                     hide-bottom-space
                     :outlined="edit"
                     dense
-                    lazy-rules
                     :borderless="!edit"
                     :model-value="yearly + 543"
                     :rules="[(val) => !!val || `${'กรุณาเลือกปีงบประมาณ'}`]"
@@ -1047,7 +1050,6 @@ const getClass = (val: boolean) => {
                     hide-bottom-space
                     :outlined="edit"
                     dense
-                    lazy-rules
                     :borderless="!edit"
                     :model-value="date2Thai(dateOrder)"
                     :label="`${'คำสั่งลงวันที่/หนังสืออนุมัติลงวันที่'}`"

src/modules/08_registryEmployee/components/EditEmployee/Work.vue

@@ -30,8 +30,15 @@ const store = useProfileDataStore();
 const { profileData, changeProfileColumns } = store;
 
 const mixin = useCounterMixin();
-const { date2Thai, success, dateToISO, messageError, showLoader, hideLoader,dialogConfirm } =
-  mixin;
+const {
+  date2Thai,
+  success,
+  dateToISO,
+  messageError,
+  showLoader,
+  hideLoader,
+  dialogConfirm,
+} = mixin;
 const route = useRoute();
 const id = ref<string>("");
 const dateStart = ref<Date>(new Date());
@@ -353,11 +360,11 @@ const clickAdd = async () => {
 /**
  * กดบันทึกใน dialog
  */
- const clickSave =  () => {
-  dialogConfirm($q,() => SaveData())
- }
+const clickSave = () => {
+  dialogConfirm($q, () => SaveData());
+};
 const SaveData = async () => {
- await myForm.value.validate().then(async (result: boolean) => {
+  await myForm.value.validate().then(async (result: boolean) => {
     if (result) {
       if (modalEdit.value) {
         await editData();
@@ -666,9 +673,7 @@ const resetFilter = () => {};
         <DialogHeader tittle="ปฏิบัติราชการพิเศษ" :close="clickClose" />
         <q-separator />
         <q-card-section class="q-p-sm">
-          <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-xs-6 col-sm-6 col-md-6">
               <datepicker
                 menu-class-name="modalfix"
@@ -689,7 +694,6 @@ const resetFilter = () => {};
                     :class="getClass(edit)"
                     :outlined="edit"
                     dense
-                    lazy-rules
                     :borderless="!edit"
                     :model-value="date2Thai(dateStart)"
                     :rules="[(val) => !!val || `${'กรุณาเลือกวันที่เริ่มต้น'}`]"
@@ -733,7 +737,6 @@ const resetFilter = () => {};
                     :class="getClass(edit)"
                     :outlined="edit"
                     dense
-                    lazy-rules
                     :borderless="!edit"
                     :model-value="date2Thai(dateEnd)"
                     :rules="[(val) => !!val || `${'กรุณาเลือกวันที่สิ้นสุด'}`]"
@@ -830,7 +833,6 @@ const resetFilter = () => {};
                     :class="getClass(edit)"
                     :outlined="edit"
                     dense
-                    lazy-rules
                     :borderless="!edit"
                     :model-value="
                       refCommandDate == null ? null : date2Thai(refCommandDate)

src/modules/08_registryEmployee/views/EditDetail.vue

@@ -759,7 +759,6 @@ const Retire = async () => {
                   class="full-width inputgreen cursor-pointer"
                   outlined
                   dense
-                  lazy-rules
                   :model-value="date2Thai(leaveDate)"
                   :rules="[(val) => !!val || `${'กรุณาเลือกวันที่พ้นราชการ'}`]"
                   hide-bottom-space
@@ -824,7 +823,6 @@ const Retire = async () => {
                   class="full-width inputgreen cursor-pointer"
                   outlined
                   dense
-                  lazy-rules
                   :model-value="date2Thai(leaveDateOrder)"
                   :rules="[(val) => !!val || `${'กรุณาเลือกวันที่ออกคำสั่ง'}`]"
                   hide-bottom-space

src/modules/09_leave/components/1_Work/DialogReport.vue

@@ -226,7 +226,6 @@ watch(
                     class="bg-white"
                     outlined
                     dense
-                    lazy-rules
                     borderless
                     :model-value="date ? date2Thai(date) : null"
                     :label="`${'วันที่'}`"
@@ -261,7 +260,6 @@ watch(
                     class="bg-white"
                     outlined
                     dense
-                    lazy-rules
                     borderless
                     :label="`${'เดือน'}`"
                     :model-value="monthYearThai(dateMonth)"

src/modules/09_leave/components/1_Work/ToolBar.vue

@@ -95,7 +95,6 @@ function calculateMaxDate() {
             for="selectDate"
             dense
             outlined
-            lazy-rules
             :model-value="
               workStore.selectDate !== null
                 ? date2Thai(workStore.selectDate)

src/modules/09_leave/components/1_Work/ToolBarDate.vue

@@ -63,7 +63,6 @@ function filterFn() {
             for="selectDate"
             dense
             outlined
-            lazy-rules
             :model-value="
               workStore.selectDate !== null
                 ? date2Thai(workStore.selectDate)

src/modules/09_leave/components/2_Leave/ToolBarLeave.vue

@@ -170,7 +170,6 @@ onMounted(async () => {
         <template #trigger>
           <q-input
             dense
-            lazy-rules
             outlined
             :model-value="Number(leaveStore.filter.year) + 543"
             :label="`${'ปีงบประมาณ'}`"

src/modules/09_leave/components/3_Report/LeaveReport.vue

@@ -316,7 +316,6 @@ onMounted(() => {
               <q-input
                 class="bg-white"
                 dense
-                lazy-rules
                 outlined
                 :model-value="Number(year) + 543"
                 :label="`${'ปีงบประมาณ'}`"
@@ -352,7 +351,6 @@ onMounted(() => {
                 class="bg-white"
                 outlined
                 dense
-                lazy-rules
                 borderless
                 :model-value="dateStart ? date2Thai(dateStart) : null"
                 :label="`${'ตั้งเเต่วันที่'}`"
@@ -385,7 +383,6 @@ onMounted(() => {
                 class="bg-white"
                 outlined
                 dense
-                lazy-rules
                 borderless
                 :model-value="dateEnd ? date2Thai(dateEnd) : null"
                 :label="`${'ถึงวันที่'}`"

src/modules/09_leave/components/4_ChangeRound/DialogForm.vue

@@ -299,7 +299,6 @@ watch(
                       :rules="[
                         (val) => !!val || `${'กรุณาเลือกวันที่ให้มีผล'}`,
                       ]"
-                      lazy-rules
                     >
                       <template v-slot:prepend>
                         <q-icon

src/modules/09_leave/components/4_specialTime/DialogApprove.vue

@@ -211,7 +211,6 @@ watch(
                   dense
                   outlined
                   readonly
-                  lazy-rules
                   :model-value="props.dateFix"
                   hide-bottom-space
                   :label="`${'วันที่ขอแก้ไข'}`"

src/modules/09_leave/components/4_specialTime/Table.vue

@@ -108,7 +108,6 @@ function resetFilter() {
             for="selectDate"
             dense
             outlined
-            lazy-rules
             :model-value="
               SpecialTimeStore.selectDate !== null
                 ? date2Thai(SpecialTimeStore.selectDate)

src/modules/10_order/components/PopupHistory.vue

@@ -130,7 +130,7 @@ const clickSearch = async () => {
 };
 // Redirect to ทะเบียนประวัติ
 const clickRedirect = (id: string) => {
-  window.open(`/registry/${id}`, '_blank');
+  window.open(`/registry/${id}`, "_blank");
 };
 const paging = ref<boolean>(true);
 const pagination = ref({
@@ -151,7 +151,6 @@ function onclickViewinfo(id: string) {
 function updatemodalPersonal(modal: boolean) {
   modalPersonal.value = modal;
 }
-
 </script>
 
 <template>
@@ -233,7 +232,6 @@ function updatemodalPersonal(modal: boolean) {
                         hide-bottom-space
                         outlined
                         dense
-                        lazy-rules
                         borderless
                         :model-value="
                           reportYear == null ? null : reportYear + 543

src/modules/11_discipline/components/5_Report/DetailPage.vue

@@ -14,7 +14,7 @@ const typeReport = route.params.type.toString();
 
 const store = useReportDataStore();
 const mixin = useCounterMixin();
-const {  date2Thai } = mixin;
+const { date2Thai } = mixin;
 const { filterFnOptionsType } = store;
 
 const $q = useQuasar();
@@ -28,33 +28,33 @@ const titleReport = ref<string>("");
 const splitterModel = ref(14);
 
 /** กลับหน้าหลัก */
-function backHistory(){
+function backHistory() {
   window.history.back();
-};
+}
 
 /** แสดงรายงาน */
-function showDocument(url: any){
+function showDocument(url: any) {
   const pdfData = usePDF(url);
 
   setTimeout(() => {
     pdfSrc.value = pdfData.pdf.value;
     numOfPages.value = pdfData.pages.value;
   }, 1000);
-};
+}
 
 /** ไปหน้าต่อไปของรายงาน */
-function nextPage(){
+function nextPage() {
   if (page.value < numOfPages.value) {
     page.value++;
   }
-};
+}
 
 /** กลับหน้าก่อนหน้าของรายงาน */
-function backPage(){
+function backPage() {
   if (page.value !== 1) {
     page.value--;
   }
-};
+}
 
 /** โหลดข้อมูลเมื่อเข้าหน้านี้ */
 onMounted(async () => {
@@ -98,7 +98,6 @@ onMounted(async () => {
                   class="full-width inputgreen cursor-pointer"
                   outlined
                   dense
-                  lazy-rules
                   borderless
                   :model-value="date ? date2Thai(date) : null"
                   :label="`${'ตั้งเเต่วันที่'}`"
@@ -110,7 +109,6 @@ onMounted(async () => {
                 </q-input>
               </template>
             </datepicker>
-
           </div>
           <div class="q-pl-xs">
             <datepicker
@@ -130,7 +128,6 @@ onMounted(async () => {
                   class="full-width inputgreen cursor-pointer"
                   outlined
                   dense
-                  lazy-rules
                   borderless
                   :model-value="dateEnd ? date2Thai(dateEnd) : null"
                   :label="`${'ถึงวันที่'}`"
@@ -142,7 +139,6 @@ onMounted(async () => {
                 </q-input>
               </template>
             </datepicker>
-
           </div>
           <q-space />
           <div class="q-py-xs">
@@ -182,7 +178,6 @@ onMounted(async () => {
                 </q-item>
               </template>
             </q-select>
-
           </div>
           <div class="q-pl-xs">
             <q-select
@@ -208,7 +203,6 @@ onMounted(async () => {
                 </q-item>
               </template>
             </q-select>
-
           </div>
           <div v-if="typeReport > '2'" class="q-pl-xs">
             <q-select
@@ -234,7 +228,6 @@ onMounted(async () => {
                 </q-item>
               </template>
             </q-select>
-
           </div>
         </q-toolbar>
         <q-splitter
@@ -262,7 +255,6 @@ onMounted(async () => {
                     @click="backPage"
                     :disable="page == 1"
                   />
-
                 </div>
                 <div class="col-12 col-md-auto">
                   <div class="q-pa-md flex">
@@ -279,7 +271,6 @@ onMounted(async () => {
                     @click="nextPage"
                     :disable="page === numOfPages"
                   />
-
                 </div>
               </div>
             </div>

src/modules/11_discipline/components/7_ListSuspend/DetailPage.vue

@@ -13,7 +13,7 @@ import { useDisciplineSuspendStore } from "@/modules/11_discipline/store/Suspend
 import type { QForm } from "quasar";
 import type { dataDetail } from "@/modules/11_discipline/interface/response/suspend";
 import PopupPersonal from "@/components/Dialogs/PopupPersonal.vue";
-  
+
 const modalPersonal = ref<boolean>(false);
 const personId = ref<string>("");
 /** use */
@@ -64,7 +64,7 @@ const data = reactive<dataDetail>({
 });
 
 /**นำข้อมูลจาก API มาแสดง */
-async function getData(){
+async function getData() {
   showLoader();
   await http
     .get(config.API.suspendById(dataId))
@@ -92,7 +92,7 @@ async function getData(){
       data.offenseDetails = dataGet.offenseDetails;
       data.disciplinaryFaultLevel = dataGet.disciplinaryFaultLevel;
       data.disciplinaryCaseFault = dataGet.disciplinaryCaseFault;
-      getAvatar(dataGet.personId)
+      getAvatar(dataGet.personId);
     })
     .catch((e) => {
       messageError($q, e);
@@ -100,39 +100,37 @@ async function getData(){
     .finally(() => {
       hideLoader();
     });
-};
+}
 
 /**
  * ฟังชั่น ดึงรูปภาพโปรไฟล์
  * @param id id ของบุคคล
  */
-function getAvatar(id:string){
-  if(id){
+function getAvatar(id: string) {
+  if (id) {
     http
-    .get(config.API.profileAvaId(id))
-    .then((res)=>{
-      console.log(res)
-      const dataList = res.data.result
-      data.avatar = dataList.avatar
-    }).catch((e)=>{
-
-    }).finally(()=>{
-      
-    })
+      .get(config.API.profileAvaId(id))
+      .then((res) => {
+        console.log(res);
+        const dataList = res.data.result;
+        data.avatar = dataList.avatar;
+      })
+      .catch((e) => {})
+      .finally(() => {});
   }
 }
 /**
  * ฟังก์ชั่น Cancle
  */
- async function clickCancel(){
+async function clickCancel() {
   await getData();
   edit.value = false;
-};
+}
 
 /**
  * ฟังก์ชั่น Save
  */
- async function conditionSave(){
+async function conditionSave() {
   if (myForm.value !== null) {
     myForm.value.validate().then((success) => {
       if (success) {
@@ -149,12 +147,12 @@ function getAvatar(id:string){
       }
     });
   }
-};
+}
 
 /**
  * ฟังก์ชั่น Saveจาก API
  */
- async function saveData(){
+async function saveData() {
   const body = {
     organization: data.organization,
     position: data.position,
@@ -179,18 +177,18 @@ function getAvatar(id:string){
       await getData();
       hideLoader();
     });
-};
+}
 
 /**
  * Function เพิ่ม Class เวลา Edit
  * @param val เมื่อเป็นEdit จะเปลี่ยน Class
  */
-function getClass(val: boolean){
+function getClass(val: boolean) {
   return {
     "full-width inputgreen cursor-pointer": val,
     "full-width cursor-pointer": !val,
   };
-};
+}
 
 function onclickViewinfo(id: string) {
   modalPersonal.value = true;
@@ -211,7 +209,6 @@ function changeFormDataDate() {
   }
 }
 
-
 /** Hook */
 onMounted(async () => {
   if (keycloak.tokenParsed != null) {
@@ -254,7 +251,10 @@ onMounted(async () => {
     <div class="row col-12 q-pa-md">
       <div class="col-12 row bg-white q-col-gutter-md">
         <div class="col-xs-3 col-sm-2 col-md-1 row">
-          <q-img :src="data.avatar" v-if="data.avatar !== '' && data.avatar !== null" />
+          <q-img
+            :src="data.avatar"
+            v-if="data.avatar !== '' && data.avatar !== null"
+          />
           <q-img src="@/assets/avatar_user.jpg" v-else />
         </div>
         <div class="col-xs-6 col-sm-3 row items-center">
@@ -428,7 +428,6 @@ onMounted(async () => {
                     :class="getClass(edit)"
                     :outlined="edit"
                     dense
-                    lazy-rules
                     :readonly="!edit"
                     :borderless="!edit"
                     :model-value="
@@ -468,7 +467,6 @@ onMounted(async () => {
                 :enableTimePicker="false"
                 week-start="0"
                 :min-date="data.startDateSuspend"
-                
               >
                 <template #year="{ year }">{{ year + 543 }}</template>
                 <template #year-overlay-value="{ value }">{{
@@ -479,7 +477,6 @@ onMounted(async () => {
                     :class="getClass(edit)"
                     :outlined="edit"
                     dense
-                    lazy-rules
                     :readonly="!edit || data.startDateSuspend === null"
                     :borderless="!edit"
                     :model-value="
@@ -490,7 +487,6 @@ onMounted(async () => {
                     :rules="[(val) => !!val || `${'กรุณาเลือกถึงวันที่'}`]"
                     hide-bottom-space
                     :label="`${'ถึงวันที่'}`"
-                    
                   >
                     <template v-slot:prepend>
                       <q-icon

src/modules/11_discipline/components/8_AppealComplain/MainPage.vue

@@ -353,7 +353,6 @@ onMounted(async () => {
               <template #trigger>
                 <q-input
                   dense
-                  lazy-rules
                   outlined
                   :model-value="
                     formData.year === 0 ? null : Number(formData.year) + 543

src/modules/13_salary/components/Command/step01.vue

@@ -475,7 +475,6 @@ function fetchSalaryRound() {
               }}</template>
               <template #trigger>
                 <q-input
-                  lazy-rules
                   class="inputgreen"
                   :model-value="dateYear !== null ? dateYear + 543 : null"
                   :rules="[(val) => !!val || `${'กรุณากรอก พ.ศ.'}`]"
@@ -508,7 +507,6 @@ function fetchSalaryRound() {
               <q-input
                 outlined
                 dense
-                lazy-rules
                 class="inputgreen"
                 :model-value="
                   dateCommand != null ? date2Thai(dateCommand) : null
@@ -644,7 +642,6 @@ function fetchSalaryRound() {
             <template #trigger>
               <q-input
                 dense
-                lazy-rules
                 outlined
                 :model-value="year === 0 ? null : Number(year) + 543"
                 :label="`${'ปีงบประมาณ'}`"

src/modules/13_salary/components/Command/step04.vue

@@ -103,7 +103,9 @@ const attachmentUploadStatus = computed(() => {
 const genReportStatus = computed(() => {
   return code.value == "c-pm-33" ||
     code.value == "c-pm-34" ||
-    code.value == "c-pm-35"
+    code.value == "c-pm-35" ||
+    code.value == "c-pm-36" ||
+    code.value == "c-pm-37"
     ? true
     : false;
 });

src/modules/13_salary/components/SalaryChart/DialogFormMain.vue

@@ -7,7 +7,6 @@ import config from "@/app.config";
 
 import type {
   DataOption,
-  ObjectSalaryRef,
   FormData,
 } from "@/modules/13_salary/interface/index/Main";
 import type {
@@ -28,7 +27,6 @@ const {
   hideLoader,
   messageError,
   success,
-  dialogRemove,
 } = useCounterMixin();
 
 const modal = defineModel<boolean>("modal", { required: true });
@@ -60,24 +58,10 @@ const formData = reactive<FormData>({
   isSpecial: false,
 });
 
-/** ตัวแปร ref สำหรับแสดง validate */
-const nameRef = ref<Object | null>(null);
-const posTypeRef = ref<Object | null>(null);
-const posLevelRef = ref<Object | null>(null);
-
-const ObjectRef: ObjectSalaryRef = {
-  name: nameRef,
-  posTypId: posTypeRef,
-  posLevelId: posLevelRef,
-};
-
 const posType = ref<SalaryPosType[]>([]);
 const salaryPosTypeOption = ref<DataOption[]>([]);
 const salaryPosLevelOption = ref<DataOption[]>([]);
 
-const documentFile = ref<any>(null);
-const itemsDocument = ref<any>([]);
-
 const title = computed(() => {
   const name =
     props.typeAction === "add"
@@ -89,8 +73,9 @@ const title = computed(() => {
   return name;
 });
 
-async function fetchPosType() {
-  await http
+/** fiunction fetch ข้อมูลประเภทตำแหน่ง*/
+function fetchPosType() {
+  http
     .get(config.API.salaryPosType)
     .then((res) => {
       posType.value = res.data.result;
@@ -105,7 +90,8 @@ async function fetchPosType() {
     });
 }
 
-async function fetchPosLevel(id: string) {
+/** fiunction fetch ข้อมูลระดับตำแหน่ง*/
+function fetchPosLevel(id: string) {
   const filterLevel = posType.value.find((e: SalaryPosType) => e.id === id);
   const listOption =
     filterLevel?.posLevels.map((e: SalaryPosLevel) => ({
@@ -119,9 +105,13 @@ async function fetchPosLevel(id: string) {
   }
 }
 
-async function fetchSalaryDetail(id: string) {
+/**
+ *  function fetch ข้อมูลผังบัญชีเงินเดือน
+ * @param id ผังบัญชีเงินเดือน
+ */
+function fetchSalaryDetail(id: string) {
   showLoader();
-  await http
+  http
     .get(config.API.salaryChartByid(id))
     .then((res) => {
       const data = res.data.result;
@@ -144,47 +134,34 @@ async function fetchSalaryDetail(id: string) {
     });
 }
 
-async function fetchDocumentFile(id: string) {
-  await http
-    .get(config.API.salaryChartFile(id))
-    .then((res) => {
-      const list = res.data.map((e: any) => ({ name: e.fileName }));
-      itemsDocument.value = list;
-    })
-    .catch((err) => {});
-}
-
+/** callbackFunction ทำการ fetch ข้อมูลไฟล์เมื่อเปิด Dialog*/
 watch(
   () => modal.value,
-  async () => {
+  () => {
     if (modal.value) {
       if (salaryPosTypeOption.value.length === 0) {
-        await fetchPosType();
+        fetchPosType();
       }
-      // if (props.typeAction === "add") {
-      //   formData.date = new Date();
-      //   formData.startDate = new Date();
-      //   formData.endDate = new Date();
-      // }
-
       if (props.typeAction === "edit") {
-        await showLoader();
-        if (props.data) {
-          salaryId.value = props.data.id;
-          await fetchDocumentFile(props.data.id);
-          await fetchSalaryDetail(props.data.id);
-          await fetchPosLevel(props.data.posTypeId);
-        }
+        setTimeout(() => {
+          if (props.data) {
+            salaryId.value = props.data.id;
+            fetchSalaryDetail(props.data.id);
+            fetchPosLevel(props.data.posTypeId);
+          }
+        }, 100);
       }
     }
   }
 );
 
+/** function ปืด Dialog*/
 function closeDialog() {
   modal.value = !modal.value;
   clearFormData();
 }
 
+/** function เคลียข้อมูล form*/
 function clearFormData() {
   formData.name = "";
   formData.posTypeId = "";
@@ -195,28 +172,11 @@ function clearFormData() {
   formData.startDate = null;
   formData.endDate = null;
   formData.details = "";
-  documentFile.value = null;
-  itemsDocument.value = [];
   isReadonly.value = false;
 }
 
-function onClickSubmit() {
-  const hasError = [];
-  for (const key in ObjectRef) {
-    if (Object.prototype.hasOwnProperty.call(ObjectRef, key)) {
-      const property = ObjectRef[key];
-      if (property.value && typeof property.value.validate === "function") {
-        const isValid = property.value.validate();
-        hasError.push(isValid);
-      }
-    }
-  }
-  if (hasError.every((result) => result === true)) {
-    createSalary();
-  }
-}
-
-function createSalary() {
+/** function บัยทึกข้อมูลผังบัญชีเงินเดือน*/
+function onSubmit() {
   dialogConfirm($q, async () => {
     showLoader();
     try {
@@ -244,13 +204,12 @@ function checkEndDate() {
     }
   }
 }
-
 </script>
 
 <template>
   <q-dialog v-model="modal" persistent>
     <q-card class="col-12" style="width: 80%">
-      <form @submit.prevent.stop="onClickSubmit">
+      <q-form greedy @submit.prevent @validation-success="onSubmit">
         <Header :tittle="title" :close="closeDialog" />
         <q-separator />
         <q-card-section class="scroll" style="max-height: 70vh">
@@ -321,18 +280,14 @@ function checkEndDate() {
                     label="เฉพาะสายงานที่กำหนด"
                   />
 
-
-
                   <q-toggle
-                  :disable="isReadonly"
+                    :disable="isReadonly"
                     color="primary"
                     label="สถานะการใช้งาน"
                     v-model="formData.isActive"
                   />
-  
                 </div>
 
-
                 <div class="col-xs-12 col-md-4">
                   <datepicker
                     menu-class-name="modalfix"
@@ -477,13 +432,14 @@ function checkEndDate() {
             </div>
           </div>
         </q-card-section>
+
         <q-separator />
         <div class="text-right q-ma-sm">
           <q-btn label="บันทึก" type="submit" color="secondary">
             <q-tooltip>บันทึกข้อมูล</q-tooltip>
           </q-btn>
         </div>
-      </form>
+      </q-form>
     </q-card>
   </q-dialog>
 </template>

src/modules/13_salary/components/SalaryChart/DialogFormRate.vue

@@ -5,25 +5,24 @@ import { useRoute } from "vue-router";
 import http from "@/plugins/http";
 import config from "@/app.config";
 
-import type { ObjectSalaryRateRef } from "@/modules/13_salary/interface/index/Main";
+/** importType*/
+import type { FormSalaryRate } from "@/modules/13_salary/interface/index/Main";
 
+/** importComponents*/
 import Header from "@/components/DialogHeader.vue";
 
+/** importStore*/
+
 import { useCounterMixin } from "@/stores/mixin";
 
+/** use*/
+
 const $q = useQuasar();
 const route = useRoute();
-const {
-  date2Thai,
-  dialogConfirm,
-  showLoader,
-  hideLoader,
-  messageError,
-  success,
-} = useCounterMixin();
-
-const salaryId = ref<string>(route.params.id.toString());
+const { dialogConfirm, showLoader, hideLoader, messageError, success } =
+  useCounterMixin();
 
+/** props*/
 const modal = defineModel<boolean>("modal", { required: true });
 const props = defineProps({
   typeAction: {
@@ -40,7 +39,8 @@ const props = defineProps({
   },
 });
 
-const formData = reactive<any>({
+const salaryId = ref<string>(route.params.id.toString());
+const formData = reactive<FormSalaryRate>({
   salaryId: "",
   salary: null,
   salaryHalf: null,
@@ -52,25 +52,6 @@ const formData = reactive<any>({
   isNext: false,
 });
 
-/** ตัวแปร ref สำหรับแสดง validate */
-const salaryRef = ref<Object | null>(null);
-const salaryHalfRef = ref<Object | null>(null);
-const salaryHalfSpecialRef = ref<Object | null>(null);
-const salaryFullRef = ref<Object | null>(null);
-const salaryFullSpecialRef = ref<Object | null>(null);
-const salaryFullHalfRef = ref<Object | null>(null);
-const salaryFullHalfSpecialRef = ref<Object | null>(null);
-
-const ObjectRef: ObjectSalaryRateRef = {
-  salary: salaryRef,
-  salaryHalf: salaryHalfRef,
-  salaryHalfSpecial: salaryHalfSpecialRef,
-  salaryFull: salaryFullRef,
-  salaryFullSpecial: salaryFullSpecialRef,
-  salaryFullHalf: salaryFullHalfRef,
-  salaryFullHalfSpecial: salaryFullHalfSpecialRef,
-};
-
 const title = computed(() => {
   const name =
     props.typeAction === "add"
@@ -82,11 +63,13 @@ const title = computed(() => {
   return name;
 });
 
+/** function ปืด Dialog*/
 function closeDialog() {
   modal.value = !modal.value;
   clearFormData();
 }
 
+/** function เคลียข้อมูล form*/
 function clearFormData() {
   formData.salaryId = "";
   formData.salary = null;
@@ -99,36 +82,20 @@ function clearFormData() {
   formData.isNext = false;
 }
 
-function onClickSubmit() {
-  console.log(formData.salaryHalfSpecial);
-  const hasError = [];
-  for (const key in ObjectRef) {
-    if (Object.prototype.hasOwnProperty.call(ObjectRef, key)) {
-      const property = ObjectRef[key];
-      if (property.value && typeof property.value.validate === "function") {
-        const isValid = property.value.validate();
-        hasError.push(isValid);
-      }
-    }
-  }
-  if (hasError.every((result) => result === true)) {
-    createSalaryRate();
-  }
-}
-
-function createSalaryRate() {
+/** function บันทึกข้อมูล*/
+function onSubmit() {
   dialogConfirm($q, async () => {
     showLoader();
     const body: any = {
       salary:
         typeof formData.salary === "number"
           ? formData.salary
-          : Number(formData.salary.replace(/,/g, "")), //*เงินเดือนฐาน
+          : Number(formData.salary?.replace(/,/g, "")), //*เงินเดือนฐาน
 
       salaryHalf:
         typeof formData.salaryHalf === "number"
           ? formData.salaryHalf
-          : Number(formData.salaryHalf.replace(/,/g, "")), //0.5 ขั้น
+          : Number(formData.salaryHalf?.replace(/,/g, "")), //0.5 ขั้น
 
       salaryHalfSpecial:
         formData.salaryHalfSpecial === "" || formData.salaryHalfSpecial === null
@@ -140,19 +107,19 @@ function createSalaryRate() {
       salaryFull:
         typeof formData.salaryFull === "number"
           ? formData.salaryFull
-          : Number(formData.salaryFull.replace(/,/g, "")), //1 ขั้น
+          : Number(formData.salaryFull?.replace(/,/g, "")), //1 ขั้น
 
       salaryFullSpecial:
         formData.salaryFullSpecial === "" || formData.salaryFullSpecial === null
           ? null
           : typeof formData.salaryFullSpecial === "number"
           ? formData.salaryFullSpecial
-          : Number(formData.salaryFullSpecial.replace(/,/g, "")), //1 ขั้น(เงินพิเศษ)
+          : Number(formData.salaryFullSpecial?.replace(/,/g, "")), //1 ขั้น(เงินพิเศษ)
 
       salaryFullHalf:
         typeof formData.salaryFullHalf === "number"
           ? formData.salaryFullHalf
-          : Number(formData.salaryFullHalf.replace(/,/g, "")), //1.formData5 ขั้น
+          : Number(formData.salaryFullHalf?.replace(/,/g, "")), //1.formData5 ขั้น
 
       salaryFullHalfSpecial:
         formData.salaryFullHalfSpecial === "" ||
@@ -183,6 +150,7 @@ function createSalaryRate() {
   });
 }
 
+/** callbackFunction ทำการ fetch ข้อมูลไฟล์เมื่อเปิด Dialog*/
 watch(
   () => modal.value,
   () => {
@@ -207,120 +175,122 @@ watch(
 <template>
   <q-dialog v-model="modal" persistent>
     <q-card style="width: 700px; max-width: 80vw">
-      <Header :tittle="title" :close="closeDialog" />
-      <q-separator />
+      <q-form greedy @submit.prevent @validation-success="onSubmit">
+        <Header :tittle="title" :close="closeDialog" />
+        <q-separator />
 
-      <q-card-section >
-        <div class="row q-gutter-sm q-pa-sm">
-          <div class="row col-xs-12 col-md-12 q-col-gutter-sm">
-            <div class="col-6">
-              <q-input
-                ref="salaryRef"
-                dense
-                outlined
-                v-model="formData.salary"
-                label="เงินเดือนฐาน"
-                mask="###,###,###,###"
-                reverse-fill-mask
-                :rules="[(val) => !!val || `${'กรุณากรอกเงินเดือนฐาน'}`]"
-                lazy-rules
-                hide-bottom-space
-              />
-            </div>
-            <div class="col-6 row items-center">
-              <q-checkbox dense v-model="formData.isNext" label="ทะลุขั้น" />
-            </div>
-            <div class="col-6">
-              <q-input
-                ref="salaryHalfRef"
-                dense
-                outlined
-                v-model="formData.salaryHalf"
-                label="เลื่อน 0.5 ขั้น"
-                mask="###,###,###,###"
-                reverse-fill-mask
-                :rules="[(val) => !!val || `${'กรุณากรอกเลื่อน 0.5 ขั้น'}`]"
-                lazy-rules
-                hide-bottom-space
-              />
-            </div>
-            <div class="col-6">
-              <q-input
-                ref="salaryHalfSpecialRef"
-                dense
-                outlined
-                v-model="formData.salaryHalfSpecial"
-                label="เงินพิเศษ"
-                mask="###,###,###,###"
-                reverse-fill-mask
-                lazy-rules
-                hide-bottom-space
-              />
-            </div>
-            <div class="col-6">
-              <q-input
-                ref="salaryFullRef"
-                dense
-                outlined
-                v-model="formData.salaryFull"
-                label="เลื่อน 1 ขั้น"
-                mask="###,###,###,###"
-                reverse-fill-mask
-                :rules="[(val) => !!val || `${'กรุณากรอกเลื่อน 1 ขั้น'}`]"
-                lazy-rules
-                hide-bottom-space
-              />
-            </div>
-            <div class="col-6">
-              <q-input
-                ref="salaryFullSpecialRef"
-                dense
-                outlined
-                v-model="formData.salaryFullSpecial"
-                label="เงินพิเศษ"
-                mask="###,###,###,###"
-                reverse-fill-mask
-                lazy-rules
-                hide-bottom-space
-              />
-            </div>
-            <div class="col-6">
-              <q-input
-                ref="salaryFullHalfRef"
-                dense
-                outlined
-                v-model="formData.salaryFullHalf"
-                label="เลื่อน 1.5 ขั้น"
-                mask="###,###,###,###"
-                reverse-fill-mask
-                :rules="[(val) => !!val || `${'กรุณากรอกเลื่อน 1.5 ขั้น'}`]"
-                lazy-rules
-                hide-bottom-space
-              />
-            </div>
-            <div class="col-6">
-              <q-input
-                ref="salaryFullHalfSpecialRef"
-                dense
-                outlined
-                v-model="formData.salaryFullHalfSpecial"
-                label="เงินพิเศษ"
-                mask="###,###,###,###"
-                reverse-fill-mask
-                lazy-rules
-                hide-bottom-space
-              />
+        <q-card-section>
+          <div class="row q-gutter-sm q-pa-sm">
+            <div class="row col-xs-12 col-md-12 q-col-gutter-sm">
+              <div class="col-6">
+                <q-input
+                  ref="salaryRef"
+                  dense
+                  outlined
+                  v-model="formData.salary"
+                  label="เงินเดือนฐาน"
+                  mask="###,###,###,###"
+                  reverse-fill-mask
+                  :rules="[(val) => !!val || `${'กรุณากรอกเงินเดือนฐาน'}`]"
+                  lazy-rules
+                  hide-bottom-space
+                />
+              </div>
+              <div class="col-6 row items-center">
+                <q-checkbox dense v-model="formData.isNext" label="ทะลุขั้น" />
+              </div>
+              <div class="col-6">
+                <q-input
+                  ref="salaryHalfRef"
+                  dense
+                  outlined
+                  v-model="formData.salaryHalf"
+                  label="เลื่อน 0.5 ขั้น"
+                  mask="###,###,###,###"
+                  reverse-fill-mask
+                  :rules="[(val) => !!val || `${'กรุณากรอกเลื่อน 0.5 ขั้น'}`]"
+                  lazy-rules
+                  hide-bottom-space
+                />
+              </div>
+              <div class="col-6">
+                <q-input
+                  ref="salaryHalfSpecialRef"
+                  dense
+                  outlined
+                  v-model="formData.salaryHalfSpecial"
+                  label="เงินพิเศษ"
+                  mask="###,###,###,###"
+                  reverse-fill-mask
+                  lazy-rules
+                  hide-bottom-space
+                />
+              </div>
+              <div class="col-6">
+                <q-input
+                  ref="salaryFullRef"
+                  dense
+                  outlined
+                  v-model="formData.salaryFull"
+                  label="เลื่อน 1 ขั้น"
+                  mask="###,###,###,###"
+                  reverse-fill-mask
+                  :rules="[(val) => !!val || `${'กรุณากรอกเลื่อน 1 ขั้น'}`]"
+                  lazy-rules
+                  hide-bottom-space
+                />
+              </div>
+              <div class="col-6">
+                <q-input
+                  ref="salaryFullSpecialRef"
+                  dense
+                  outlined
+                  v-model="formData.salaryFullSpecial"
+                  label="เงินพิเศษ"
+                  mask="###,###,###,###"
+                  reverse-fill-mask
+                  lazy-rules
+                  hide-bottom-space
+                />
+              </div>
+              <div class="col-6">
+                <q-input
+                  ref="salaryFullHalfRef"
+                  dense
+                  outlined
+                  v-model="formData.salaryFullHalf"
+                  label="เลื่อน 1.5 ขั้น"
+                  mask="###,###,###,###"
+                  reverse-fill-mask
+                  :rules="[(val) => !!val || `${'กรุณากรอกเลื่อน 1.5 ขั้น'}`]"
+                  lazy-rules
+                  hide-bottom-space
+                />
+              </div>
+              <div class="col-6">
+                <q-input
+                  ref="salaryFullHalfSpecialRef"
+                  dense
+                  outlined
+                  v-model="formData.salaryFullHalfSpecial"
+                  label="เงินพิเศษ"
+                  mask="###,###,###,###"
+                  reverse-fill-mask
+                  lazy-rules
+                  hide-bottom-space
+                />
+              </div>
             </div>
           </div>
-        </div>
-      </q-card-section>
-      <q-separator />
+        </q-card-section>
+        <q-separator />
 
-      <q-card-actions align="right" class="bg-white text-teal">
-        <q-btn label="บันทึก" color="secondary" @click="onClickSubmit"
-          ><q-tooltip>บันทึกข้อมูล</q-tooltip></q-btn
-        >
-      </q-card-actions>
+        <q-card-actions align="right" class="bg-white text-teal">
+          <q-btn label="บันทึก" color="secondary" type="submit"
+            ><q-tooltip>บันทึกข้อมูล</q-tooltip></q-btn
+          >
+        </q-card-actions>
+      </q-form>
     </q-card>
   </q-dialog>
 </template>

src/modules/13_salary/components/SalaryChart/DialogUpload.vue

@@ -5,22 +5,18 @@ import axios from "axios";
 import http from "@/plugins/http";
 import config from "@/app.config";
 
-import type { ObjectSalaryRef } from "@/modules/13_salary/interface/index/Main";
-
+/** importComponents*/
 import Header from "@/components/DialogHeader.vue";
 
+/** importStore*/
 import { useCounterMixin } from "@/stores/mixin";
 
+/**use*/
 const $q = useQuasar();
-const {
-  dialogConfirm,
-  showLoader,
-  hideLoader,
-  messageError,
-  success,
-  dialogRemove,
-} = useCounterMixin();
+const { showLoader, hideLoader, messageError, success, dialogRemove } =
+  useCounterMixin();
 
+/**props*/
 const modal = defineModel<boolean>("modal", { required: true });
 const props = defineProps({
   typeAction: {
@@ -54,59 +50,36 @@ const formData = reactive({
   isSpecial: false,
 });
 
-/** ตัวแปร ref สำหรับแสดง validate */
-const salaryTypeRef = ref<Object | null>(null);
-const posTypeRef = ref<Object | null>(null);
-const posLevelRef = ref<Object | null>(null);
-const dateRef = ref<Object | null>(null);
-const startDateRef = ref<Object | null>(null);
-const endDateRef = ref<Object | null>(null);
-
-const ObjectRef: ObjectSalaryRef = {
-  salaryType: salaryTypeRef,
-  posTypId: posTypeRef,
-  posLevelId: posLevelRef,
-  date: dateRef,
-  startDate: startDateRef,
-  endDate: endDateRef,
-};
-
 const documentFile = ref<any>(null);
 const itemsDocument = ref<any>([]);
 
-async function fetchDocumentFile(id: string) {
-  await http
+/**
+ * function fetch ข้อมูลรายการ ไฟล์
+ * @param id
+ */
+function fetchDocumentFile(id: string) {
+  showLoader();
+  http
     .get(config.API.salaryChartFile(id))
     .then((res) => {
       const list = res.data.map((e: any) => ({ name: e.fileName }));
       itemsDocument.value = list;
     })
-    .catch((err) => {})
+    .catch((err) => {
+      messageError($q, err);
+    })
     .finally(() => {
       hideLoader();
     });
 }
 
-watch(
-  () => modal.value,
-  async () => {
-    if (modal.value) {
-      if (props.typeAction === "edit") {
-        await showLoader();
-        if (props.id) {
-          salaryId.value = props.id;
-          await fetchDocumentFile(props.id);
-        }
-      }
-    }
-  }
-);
-
+/** function ปืด Dialog*/
 function closeDialog() {
   modal.value = !modal.value;
   clearFormData();
 }
 
+/** function เคลียข้อมูล form*/
 function clearFormData() {
   formData.salaryType = "";
   formData.posTypeId = "";
@@ -121,42 +94,7 @@ function clearFormData() {
   itemsDocument.value = [];
 }
 
-function onClickSubmit() {
-  const hasError = [];
-  for (const key in ObjectRef) {
-    if (Object.prototype.hasOwnProperty.call(ObjectRef, key)) {
-      const property = ObjectRef[key];
-      if (property.value && typeof property.value.validate === "function") {
-        const isValid = property.value.validate();
-        hasError.push(isValid);
-      }
-    }
-  }
-  if (hasError.every((result) => result === true)) {
-    createSalary();
-  }
-}
-
-function createSalary() {
-  dialogConfirm($q, async () => {
-    showLoader();
-    try {
-      const url =
-        props.typeAction === "add"
-          ? config.API.salaryChart
-          : config.API.salaryChartByid(salaryId.value);
-      await http[props.typeAction === "add" ? "post" : "put"](url, formData);
-      success($q, "บันทีกข้อมูลสำเร็จ");
-      props.fetchData?.();
-    } catch (err) {
-      messageError($q, err);
-    } finally {
-      hideLoader();
-      closeDialog();
-    }
-  });
-}
-
+/** function เรียก path อัปโหลดไฟล์*/
 async function uploadDocumentFile() {
   const fileName = documentFile.value.name.replace(/\.(xlsx|docx|pdf)$/, "");
   showLoader();
@@ -208,6 +146,10 @@ function fileUpLoad(url: string) {
     .finally(() => {});
 }
 
+/**
+ * function ลบข้อมูลรายการไฟล์
+ * @param fileName ชื่่อไฟล์
+ */
 function onClickDeleteFile(fileName: string) {
   dialogRemove($q, async () => {
     showLoader();
@@ -230,9 +172,13 @@ function onClickDeleteFile(fileName: string) {
   });
 }
 
-async function onClickDonwload(fileName: string) {
+/**
+ * function โหลดข้อมูลไฟล์
+ * @param fileName ชื่่อไฟล์
+ */
+function onClickDonwload(fileName: string) {
   showLoader();
-  await http
+  http
     .get(config.API.salaryChartDelFile(salaryId.value, fileName))
     .then((res) => {
       const data = res.data;
@@ -250,8 +196,8 @@ async function onClickDonwload(fileName: string) {
  * @param type  ประเภทไฟล์
  * @param fileName  ชือไฟล์
  */
-async function downloadFile(url: string, type: string, fileName: string) {
-  await axios
+function downloadFile(url: string, type: string, fileName: string) {
+  axios
     .get(url, {
       method: "GET",
       responseType: "blob",
@@ -260,7 +206,7 @@ async function downloadFile(url: string, type: string, fileName: string) {
         Accept: type, // ถ้ามีการระบุเมื่ออัปโหลด
       },
     })
-    .then(async (res) => {
+    .then((res) => {
       const a = document.createElement("a");
       a.href = window.URL.createObjectURL(res.data);
       a.download = fileName;
@@ -273,6 +219,21 @@ async function downloadFile(url: string, type: string, fileName: string) {
       hideLoader();
     });
 }
+
+/** callbackFunction ทำการ fetch ข้อมูลไฟล์เมื่อเปิด Dialog*/
+watch(
+  () => modal.value,
+  () => {
+    if (modal.value) {
+      if (props.typeAction === "edit") {
+        if (props.id) {
+          salaryId.value = props.id;
+          fetchDocumentFile(props.id);
+        }
+      }
+    }
+  }
+);
 </script>
 
 <template>

src/modules/13_salary/components/salaryEmployeeChart/DialogEmployeeChart.vue

@@ -4,13 +4,16 @@ import { useQuasar } from "quasar";
 import http from "@/plugins/http";
 import config from "@/app.config";
 
-import type { ObjectCharRef } from "@/modules/13_salary/interface/index/EmployeeChart";
+/** importType*/
 import type { FormDataChar } from "@/modules/13_salary/interface/request/EmployeeChart";
 
+/** importComponents*/
 import Header from "@/components/DialogHeader.vue";
 
+/** importStore*/
 import { useCounterMixin } from "@/stores/mixin";
 
+/** use*/
 const $q = useQuasar();
 const {
   date2Thai,
@@ -19,9 +22,9 @@ const {
   hideLoader,
   messageError,
   success,
-  dialogRemove,
 } = useCounterMixin();
 
+/** props*/
 const modal = defineModel<boolean>("modal", { required: true });
 const props = defineProps({
   isStatusEdit: { type: Boolean, required: true },
@@ -31,6 +34,8 @@ const props = defineProps({
     required: true,
   },
 });
+
+/** form บัญชีค่าจ้างลูกจ้างประจำ */
 const formData = reactive<FormDataChar>({
   name: "", //ชื่อผังบัญชีอัตราค่าจ้าง
   group: "", //*กลุ่มของผังบัญชีอัตราค่าจ้าง
@@ -41,14 +46,12 @@ const formData = reactive<FormDataChar>({
   details: "", //คำอธิบาย
 });
 
-const nameRef = ref<Object | null>(null);
-const groupRef = ref<Object | null>(null);
-
-const ObjectRef: ObjectCharRef = {
-  name: nameRef,
-  group: groupRef,
-};
+const isReadonly = ref<boolean>(false);
 
+/**
+ * function fetch ข้อมูล ผังบัญชีค่าจ้างลูกจ้างประจำ
+ * @param id ผังบัญชีค่าจ้างลูกจ้างประจำ
+ */
 function fetchSalaryDetail(id: string) {
   showLoader();
   http
@@ -72,47 +75,33 @@ function fetchSalaryDetail(id: string) {
     });
 }
 
-const isReadonly = ref<boolean>(false);
-function onClickSubmit() {
-  const hasError = [];
-  for (const key in ObjectRef) {
-    if (Object.prototype.hasOwnProperty.call(ObjectRef, key)) {
-      const property = ObjectRef[key];
-      if (property.value && typeof property.value.validate === "function") {
-        const isValid = property.value.validate();
-        hasError.push(isValid);
-      }
+/** function บันทึกข้อมูลผังบัญชีค่าจ้างลูกจ้างประจำ*/
+function onSubmit() {
+  dialogConfirm($q, async () => {
+    showLoader();
+    try {
+      const url = !props.isStatusEdit
+        ? config.API.salaryEmployeeChart
+        : config.API.salaryEmployeeChartByid(props.data.id);
+      await http[!props.isStatusEdit ? "post" : "put"](url, formData);
+      success($q, "บันทีกข้อมูลสำเร็จ");
+      props.fetchData?.();
+      closeDialog();
+    } catch (err) {
+      messageError($q, err);
+    } finally {
+      hideLoader();
     }
-  }
-  if (hasError.every((result) => result === true)) {
-    dialogConfirm($q, () => {
-      onSubmit();
-    });
-  }
-}
-
-async function onSubmit() {
-  showLoader();
-  try {
-    const url = !props.isStatusEdit
-      ? config.API.salaryEmployeeChart
-      : config.API.salaryEmployeeChartByid(props.data.id);
-    await http[!props.isStatusEdit ? "post" : "put"](url, formData);
-    success($q, "บันทีกข้อมูลสำเร็จ");
-    props.fetchData?.();
-  } catch (err) {
-    messageError($q, err);
-  } finally {
-    hideLoader();
-    closeDialog();
-  }
+  });
 }
 
+/** function ปืด Dialog*/
 function closeDialog() {
   modal.value = false;
   clearFormData();
 }
 
+/** function เคลียข้อมูล form*/
 function clearFormData() {
   formData.name = "";
   formData.group = "";
@@ -132,6 +121,7 @@ function checkEndDate() {
   }
 }
 
+/** callbaclFunction fetch ช้อมูลเมื่อแก้ไข*/
 watch(
   () => modal.value,
   () => {
@@ -144,7 +134,7 @@ watch(
 <template>
   <q-dialog v-model="modal" persistent>
     <q-card class="col-12" style="width: 80%">
-      <form @submit.prevent.stop="onClickSubmit">
+      <q-form greedy @submit.prevent @validation-success="onSubmit">
         <Header
           :tittle="
             props.isStatusEdit
@@ -359,7 +349,7 @@ watch(
             <q-tooltip>บันทึกข้อมูล</q-tooltip>
           </q-btn>
         </div>
-      </form>
+      </q-form>
     </q-card>
   </q-dialog>
 </template>

src/modules/13_salary/components/salaryEmployeeChart/DialogEmployeeRate.vue

@@ -5,26 +5,27 @@ import { useRoute } from "vue-router";
 import http from "@/plugins/http";
 import config from "@/app.config";
 
-import type { ObjectReteRef } from "@/modules/13_salary/interface/index/EmployeeChart";
-import type { FormDataRate } from "@/modules/13_salary/interface/request/EmployeeChart";
+/** importType*/
+import type {
+  FormDataRate,
+  FormDataRateEpm,
+} from "@/modules/13_salary/interface/request/EmployeeChart";
 
+/** importComponents*/
 import Header from "@/components/DialogHeader.vue";
 
+/** importStore*/
 import { useCounterMixin } from "@/stores/mixin";
 
+/**use */
 const $q = useQuasar();
 const route = useRoute();
-const {
-  date2Thai,
-  dialogConfirm,
-  showLoader,
-  hideLoader,
-  messageError,
-  success,
-} = useCounterMixin();
+const { dialogConfirm, showLoader, hideLoader, messageError, success } =
+  useCounterMixin();
 
 const salaryEmployeeId = ref<string>(route.params.id.toString());
 
+/** props*/
 const modal = defineModel<boolean>("modal", { required: true });
 const props = defineProps({
   isStatusEdit: {
@@ -41,53 +42,31 @@ const props = defineProps({
   },
 });
 
-const formData = reactive<any>({
+/** form อัตราค่าจ้าง */
+const formData = reactive<FormDataRateEpm>({
   salaryNo: null,
   salaryMonth: null,
   salaryDay: null,
 });
 
-/** ตัวแปร ref สำหรับแสดง validate */
-const salaryNoRef = ref<Object | null>(null);
-const salaryMonthRef = ref<Object | null>(null);
-const salaryDayRef = ref<Object | null>(null);
-
-const ObjectRef: ObjectReteRef = {
-  salaryNo: salaryNoRef,
-  salaryMonth: salaryMonthRef,
-  salaryDay: salaryDayRef,
-};
-
+/** function ปืด Dialog*/
 function closeDialog() {
   modal.value = !modal.value;
   clearFormData();
 }
 
+/** function เคลียข้อมูล form*/
 function clearFormData() {
   formData.salaryNo = null;
   formData.salaryMonth = null;
   formData.salaryDay = null;
 }
 
-function onClickSubmit() {
-  const hasError = [];
-  for (const key in ObjectRef) {
-    if (Object.prototype.hasOwnProperty.call(ObjectRef, key)) {
-      const property = ObjectRef[key];
-      if (property.value && typeof property.value.validate === "function") {
-        const isValid = property.value.validate();
-        hasError.push(isValid);
-      }
-    }
-  }
-  if (hasError.every((result) => result === true)) {
-    onSubmit();
-  }
-}
-
+/** function บันทึกข้อมูลอัตราค่าจ้าง*/
 function onSubmit() {
   dialogConfirm($q, async () => {
     showLoader();
+
     const body: FormDataRate = {
       salaryEmployeeId: !props.isStatusEdit
         ? salaryEmployeeId.value
@@ -95,18 +74,19 @@ function onSubmit() {
       step:
         typeof formData.salaryNo === "number"
           ? formData.salaryNo
-          : Number(formData.salaryNo.replace(/,/g, "")),
+          : Number(formData.salaryNo?.replace(/,/g, "")),
 
       salaryMonth:
         typeof formData.salaryMonth === "number"
           ? formData.salaryMonth
-          : Number(formData.salaryMonth.replace(/,/g, "")), //*เงินเดือนฐาน
+          : Number(formData.salaryMonth?.replace(/,/g, "")), //*เงินเดือนฐาน
 
       salaryDay:
         typeof formData.salaryDay === "number"
           ? formData.salaryDay
-          : Number(formData.salaryDay.replace(/,/g, "")), //0.5 ขั้น
+          : Number(formData.salaryDay?.replace(/,/g, "")), //0.5 ขั้น
     };
+
     try {
       const url = !props.isStatusEdit
         ? config.API.salaryEmployeeRateList
@@ -123,13 +103,13 @@ function onSubmit() {
   });
 }
 
+/** callbaclFunction fetch ช้อมูลเมื่อแก้ไข*/
 watch(
   () => modal.value,
   () => {
     if (modal.value && props.isStatusEdit) {
       if (props.data) {
         const data = props.data;
-        console.log(data);
         formData.salaryNo = data.step;
         formData.salaryMonth = data.salaryMonth;
         formData.salaryDay = data.salaryDay;
@@ -142,78 +122,81 @@ watch(
 <template>
   <q-dialog v-model="modal" persistent>
     <q-card style="width: 500px">
-      <Header
-        :tittle="props.isStatusEdit ? 'แก้ไขอัตราค่าจ้าง' : 'เพิ่มอัตราค่าจ้าง'"
-        :close="closeDialog"
-      />
-      <q-separator />
+      <q-form greedy @submit.prevent @validation-success="onSubmit">
+        <Header
+          :tittle="
+            props.isStatusEdit ? 'แก้ไขอัตราค่าจ้าง' : 'เพิ่มอัตราค่าจ้าง'
+          "
+          :close="closeDialog"
+        />
+        <q-separator />
+        <q-card-section>
+          <div class="row q-gutter-sm q-pa-sm">
+            <div class="row col-xs-12 col-md-12 q-col-gutter-sm">
+              <div class="col-12">
+                <q-input
+                  ref="salaryNoRef"
+                  dense
+                  outlined
+                  v-model="formData.salaryNo"
+                  label="ลำดับชั้น"
+                  :rules="[
+                    (val) => !!val || 'กรุณากรอกลำดับชั้น',
+                    (val) =>
+                      Number(val) === Math.floor(val) ||
+                      Number(val) === Math.floor(val) + 0.5 ||
+                      `กรุณากรอกจำนวนเต็มเท่านั้ หรือ .5`,
+                  ]"
+                  lazy-rules
+                  hide-bottom-space
+                />
+              </div>
 
-      <q-card-section>
-        <div class="row q-gutter-sm q-pa-sm">
-          <div class="row col-xs-12 col-md-12 q-col-gutter-sm">
-            <div class="col-12">
-              <q-input
-                ref="salaryNoRef"
-                dense
-                outlined
-                v-model="formData.salaryNo"
-                label="ลำดับชั้น"
-                :rules="[
-                  (val) => !!val || 'กรุณากรอกลำดับชั้น',
-                  (val) =>
-                    Number(val) === Math.floor(val) ||
-                    Number(val) === Math.floor(val) + 0.5 ||
-                    `กรุณากรอกจำนวนเต็มเท่านั้ หรือ .5`,
-                ]"
-                lazy-rules
-                hide-bottom-space
-              />
-            </div>
+              <div class="col-12">
+                <q-input
+                  ref="salaryMonthRef"
+                  dense
+                  outlined
+                  v-model="formData.salaryMonth"
+                  label="อัตราค่าจ้าง/ขั้นวิ่ง (รายเดือน)"
+                  mask="###,###,###,###"
+                  reverse-fill-mask
+                  :rules="[
+                    (val) =>
+                      !!val || `${'กรุณากรอกอัตราค่าจ้าง/ขั้นวิ่ง (รายเดือน)'}`,
+                  ]"
+                  lazy-rules
+                  hide-bottom-space
+                />
+              </div>
 
-            <div class="col-12">
-              <q-input
-                ref="salaryMonthRef"
-                dense
-                outlined
-                v-model="formData.salaryMonth"
-                label="อัตราค่าจ้าง/ขั้นวิ่ง (รายเดือน)"
-                mask="###,###,###,###"
-                reverse-fill-mask
-                :rules="[
-                  (val) =>
-                    !!val || `${'กรุณากรอกอัตราค่าจ้าง/ขั้นวิ่ง (รายเดือน)'}`,
-                ]"
-                lazy-rules
-                hide-bottom-space
-              />
-            </div>
-            <div class="col-12">
-              <q-input
-                ref="salaryDayRef"
-                dense
-                outlined
-                v-model="formData.salaryDay"
-                label="อัตราค่าจ้าง/ขั้นวิ่ง (รายวัน)"
-                mask="###,###,###,###"
-                reverse-fill-mask
-                lazy-rules
-                hide-bottom-space
-                :rules="[
-                  (val) =>
-                    !!val || `${'กรุณากรอกอัตราค่าจ้าง/ขั้นวิ่ง (รายวัน)'}`,
-                ]"
-              />
+              <div class="col-12">
+                <q-input
+                  ref="salaryDayRef"
+                  dense
+                  outlined
+                  v-model="formData.salaryDay"
+                  label="อัตราค่าจ้าง/ขั้นวิ่ง (รายวัน)"
+                  mask="###,###,###,###"
+                  reverse-fill-mask
+                  lazy-rules
+                  hide-bottom-space
+                  :rules="[
+                    (val) =>
+                      !!val || `${'กรุณากรอกอัตราค่าจ้าง/ขั้นวิ่ง (รายวัน)'}`,
+                  ]"
+                />
+              </div>
             </div>
           </div>
-        </div>
-      </q-card-section>
-      <q-separator />
-
-      <q-card-actions align="right" class="bg-white text-teal">
-        <q-btn label="บันทึก" color="secondary" @click="onClickSubmit"
-          ><q-tooltip>บันทึกข้อมูล</q-tooltip></q-btn
-        >
-      </q-card-actions>
+        </q-card-section>
+        <q-separator />
+        <q-card-actions align="right" class="bg-white text-teal">
+          <q-btn label="บันทึก" type="submit" color="secondary">
+            <q-tooltip>บันทึกข้อมูล</q-tooltip>
+          </q-btn>
+        </q-card-actions>
+      </q-form>
     </q-card>
   </q-dialog>
 </template>

src/modules/13_salary/components/salaryEmployeeChart/DialogEmployeeUpload.vue

@@ -1,24 +1,22 @@
 <script setup lang="ts">
-import { ref, reactive, watch } from "vue";
+import { ref, watch } from "vue";
 import { useQuasar } from "quasar";
 import axios from "axios";
 import http from "@/plugins/http";
 import config from "@/app.config";
 
+/** importComponents*/
 import Header from "@/components/DialogHeader.vue";
 
+/** importStore*/
 import { useCounterMixin } from "@/stores/mixin";
 
+/**use*/
 const $q = useQuasar();
-const {
-  dialogConfirm,
-  showLoader,
-  hideLoader,
-  messageError,
-  success,
-  dialogRemove,
-} = useCounterMixin();
+const { showLoader, hideLoader, messageError, success, dialogRemove } =
+  useCounterMixin();
 
+/**props*/
 const modal = defineModel<boolean>("modal", { required: true });
 const props = defineProps({
   id: {
@@ -32,10 +30,13 @@ const props = defineProps({
 });
 
 const salaryId = ref<string>("");
-
 const documentFile = ref<any>(null);
 const itemsDocument = ref<any>([]);
 
+/**
+ * function fetch ข้อมูลรายการ ไฟล์
+ * @param id
+ */
 async function fetchDocumentFile(id: string) {
   showLoader();
   await http
@@ -50,22 +51,12 @@ async function fetchDocumentFile(id: string) {
     });
 }
 
-watch(
-  () => modal.value,
-  async () => {
-    if (modal.value) {
-      if (props.id) {
-        salaryId.value = props.id;
-        await fetchDocumentFile(props.id);
-      }
-    }
-  }
-);
-
+/** function ปืด Dialog*/
 function closeDialog() {
   modal.value = !modal.value;
 }
 
+/** function เรียก path อัปโหลดไฟล์*/
 async function uploadDocumentFile() {
   const fileName = documentFile.value.name.replace(/\.(xlsx|docx|pdf)$/, "");
   showLoader();
@@ -117,6 +108,10 @@ function fileUpLoad(url: string) {
     .finally(() => {});
 }
 
+/**
+ * function ลบข้อมูลรายการไฟล์
+ * @param fileName ชื่่อไฟล์
+ */
 function onClickDeleteFile(fileName: string) {
   dialogRemove($q, async () => {
     showLoader();
@@ -139,6 +134,10 @@ function onClickDeleteFile(fileName: string) {
   });
 }
 
+/**
+ * function โหลดข้อมูลไฟล์
+ * @param fileName ชื่่อไฟล์
+ */
 async function onClickDonwload(fileName: string) {
   showLoader();
   await http
@@ -182,6 +181,19 @@ async function downloadFile(url: string, type: string, fileName: string) {
       hideLoader();
     });
 }
+
+/** callbackFunction ทำการ fetch ข้อมูลไฟล์เมื่อเปิด Dialog*/
+watch(
+  () => modal.value,
+  async () => {
+    if (modal.value) {
+      if (props.id) {
+        salaryId.value = props.id;
+        await fetchDocumentFile(props.id);
+      }
+    }
+  }
+);
 </script>
 
 <template>

src/modules/13_salary/components/salaryEmployeeChart/DialogFormCriteria.vue

@@ -1,34 +1,26 @@
 <script setup lang="ts">
 import { ref, reactive, watch } from "vue";
 import { useQuasar } from "quasar";
-import { useRoute } from "vue-router";
 import http from "@/plugins/http";
 import config from "@/app.config";
 
+/** importType*/
 import type {
-  ObjectReteRef,
   DataOptions,
   DataListOptions,
 } from "@/modules/13_salary/interface/index/EmployeeChart";
-import type { FormDataRate } from "@/modules/13_salary/interface/request/EmployeeChart";
 
+/** importComponents*/
 import Header from "@/components/DialogHeader.vue";
 
+/** importStore*/
 import { useCounterMixin } from "@/stores/mixin";
 
 const $q = useQuasar();
-const route = useRoute();
-const {
-  date2Thai,
-  dialogConfirm,
-  showLoader,
-  hideLoader,
-  messageError,
-  success,
-} = useCounterMixin();
-
-// const salaryEmployeeId = ref<string>(route.params.id.toString());
+const { dialogConfirm, showLoader, hideLoader, messageError, success } =
+  useCounterMixin();
 
+/** props*/
 const modal = defineModel<boolean>("modal", { required: true });
 const isEdit = defineModel<boolean>("isStatusEdit", { required: true });
 const props = defineProps({
@@ -37,10 +29,6 @@ const props = defineProps({
     defult: [],
   },
   getDataMain: Function,
-  // fetchData: {
-  //   type: Function,
-  //   required: true,
-  // },
 });
 
 const posTypeOp = ref<DataOptions[]>([]);
@@ -49,6 +37,7 @@ const posNameOpMain = ref<DataOptions[]>([]);
 const groupOldOp = ref<DataOptions[]>([]);
 const posLevelOp = ref<any[]>([]);
 const posNameListOp = ref<DataListOptions[]>([]);
+
 const formData = reactive<any>({
   id: "",
   posType: "", //กลุ่มงาน
@@ -62,32 +51,13 @@ const formData = reactive<any>({
   rateHighMax: "", //อัตราค่าจ้างสูงกว่าฯ ขั้นสูงใหม่
 });
 
-/** ตัวแปร ref สำหรับแสดง validate */
-const posTypeRef = ref<object | null>(null);
-const posNameRef = ref<object | null>(null);
-const posLevelRef = ref<object | null>(null);
-const rateOldMinRef = ref<object | null>(null);
-const groupOldRef = ref<object | null>(null);
-const rateMaxOldRef = ref<object | null>(null);
-const groupRateHighRef = ref<object | null>(null);
-const rateHighMaxRef = ref<object | null>(null);
-
-const ObjectRef: ObjectReteRef = {
-  posType: posTypeRef,
-  posName: posNameRef,
-  posLevel: posLevelRef,
-  rateOldMin: rateOldMinRef,
-  groupOld: groupOldRef,
-  rateMaxOld: rateMaxOldRef,
-  groupRateHigh: groupRateHighRef,
-  rateHighMax: rateHighMaxRef,
-};
-
+/** function ปืด Dialog*/
 function closeDialog() {
   modal.value = !modal.value;
   clearFormData();
 }
 
+/** function เคลียข้อมูล form*/
 function clearFormData() {
   isEdit.value = false;
   formData.posType = "";
@@ -101,25 +71,10 @@ function clearFormData() {
   formData.rateHighMax = "";
 }
 
-function onClickSubmit() {
-  const hasError = [];
-  for (const key in ObjectRef) {
-    if (Object.prototype.hasOwnProperty.call(ObjectRef, key)) {
-      const property = ObjectRef[key];
-      if (property.value && typeof property.value.validate === "function") {
-        const isValid = property.value.validate();
-        hasError.push(isValid);
-      }
-    }
-  }
-  if (hasError.every((result) => result === true)) {
-    onSubmit();
-  }
-}
-
+/** function บันทึกข้อมูลหลักเกณฑ์*/
 function onSubmit() {
   dialogConfirm($q, async () => {
-    // showLoader();
+    showLoader();
     const body = {
       posTypeId: formData.posType.id,
       position: formData.posName,
@@ -147,7 +102,7 @@ function onSubmit() {
       ? config.API.salaryFormula()
       : config.API.salaryFormulaById(formData.id);
     await http[!isEdit.value ? "post" : "put"](url, body)
-      .then((res) => {
+      .then(() => {
         success($q, "บันทึกข้อมูลสำเร็จ");
         closeDialog();
         props.getDataMain?.();
@@ -161,21 +116,6 @@ function onSubmit() {
   });
 }
 
-// watch(
-//   () => modal.value,
-//   () => {
-//     if (modal.value && props.isStatusEdit) {
-//       if (props.data) {
-//         const data = props.data;
-//         console.log(data);
-//         formData.salaryNo = data.step;
-//         formData.salaryMonth = data.salaryMonth;
-//         formData.salaryDay = data.salaryDay;
-//       }
-//     }
-//   }
-// );
-
 /** ดึงข้อมูล กลุ่มงาน */
 function getPosType() {
   showLoader();
@@ -247,6 +187,7 @@ function getPosNameEdit() {
       hideLoader();
     });
 }
+
 /** ดึงข้อมูล ระดับชั้นงาน */
 function getPosLevel() {
   formData.posLevel = "";
@@ -258,11 +199,9 @@ function getPosLevel() {
     formData.posLevel = posLevelOp.value[0];
   }
 }
+
 /** ดึงข้อมูล ระดับชั้นงาน */
 function getPosLevelEdit() {
-  console.log(1);
-  console.log(posNameListOp.value);
-
   posLevelOp.value = posNameListOp.value
     .filter((item) => item.posDictName === formData.posName)
     .map((i) => ({ id: i.posLevelId, name: i.posLevelName }))
@@ -272,6 +211,7 @@ function getPosLevelEdit() {
   }
 }
 
+/** ดึงข้อมูล กลุ่ม */
 function getSalaryGroup() {
   http
     .get(config.API.salaryEmployeeActive())
@@ -282,14 +222,13 @@ function getSalaryGroup() {
         id: item.id,
         name: `กลุ่มที่ ${item.group}`,
       }));
-      console.log(groupOldOp.value);
     })
     .catch((e) => {
       messageError($q, e);
-    })
-    .finally(() => {});
+    });
 }
 
+/** function fetch ข้อมูลหลักเกณฑ์ */
 function getDataEdit() {
   http.get(config.API.salaryFormula() + `/${formData.id}`).then(async (res) => {
     const data = res.data.result;
@@ -314,10 +253,10 @@ function getDataEdit() {
 }
 watch(
   () => modal.value,
-  async (check) => {
+  (check) => {
     if (check) {
-      await getPosType();
-      await getSalaryGroup();
+      getPosType();
+      getSalaryGroup();
 
       if (isEdit.value) {
         formData.id = props.data?.id ? props.data.id : null;
@@ -333,7 +272,7 @@ watch(
  * @param update  อัพเดทค่า
  * @param refData ดาต้าที่ต้องการฟิลเตอร์
  */
- function filterOption(val: any, update: Function) {
+function filterOption(val: any, update: Function) {
   update(() => {
     posNameOp.value = posNameOpMain.value.filter(
       (v: any) => v.name.indexOf(val) > -1
@@ -345,188 +284,192 @@ watch(
 <template>
   <q-dialog v-model="modal" persistent>
     <q-card class="col-12" style="width: 80%">
-      <Header
-        :tittle="isEdit ? 'แก้ไขหลักเกณฑ์' : 'เพิ่มหลักเกณฑ์'"
-        :close="closeDialog"
-      />
-      <q-separator />
+      <q-form greedy @submit.prevent @validation-success="onSubmit">
+        <Header
+          :tittle="isEdit ? 'แก้ไขหลักเกณฑ์' : 'เพิ่มหลักเกณฑ์'"
+          :close="closeDialog"
+        />
+        <q-separator />
+        <q-card-section>
+          <div class="row q-gutter-sm q-pa-sm">
+            <div class="row col-xs-12 col-md-12 q-col-gutter-sm">
+              <div class="col-4">
+                <q-select
+                  ref="posTypeRef"
+                  dense
+                  outlined
+                  v-model="formData.posType"
+                  label="กลุ่มงาน"
+                  :rules="[(val) => !!val || 'กรุณาเลือกกลุ่มงาน']"
+                  :options="posTypeOp"
+                  option-label="name"
+                  option-value="id"
+                  map-options
+                  lazy-rules
+                  hide-bottom-space
+                  @update:model-value="getPosName()"
+                />
+              </div>
+              <div class="col-4">
+                <q-select
+                  ref="posNameRef"
+                  dense
+                  :readonly="formData.posType"
+                  outlined
+                  v-model="formData.posName"
+                  label="ตำแหน่ง"
+                  :rules="[(val) => !!val || 'กรุณาเลือกตำแหน่ง']"
+                  :options="posNameOp"
+                  option-label="name"
+                  option-value="name"
+                  emit-value
+                  lazy-rules
+                  use-input
+                  @filter="(inputValue:any,doneFn:Function) => filterOption(inputValue, doneFn) "
+                  hide-bottom-space
+                  @update:model-value="getPosLevel()"
+                >
+                  <template v-slot:no-option>
+                    <q-item>
+                      <q-item-section class="text-grey">
+                        ไม่มีข้อมูล
+                      </q-item-section>
+                    </q-item>
+                  </template>
+                </q-select>
+              </div>
+              <div class="col-4">
+                <q-select
+                  :readonly="formData.posName"
+                  ref="posLevelRef"
+                  dense
+                  outlined
+                  v-model="formData.posLevel"
+                  :options="posLevelOp"
+                  option-label="name"
+                  option-value="id"
+                  map-options
+                  label="ระดับชั้นงาน"
+                  :rules="[(val) => !!val || 'กรุณาเลือกระดับชั้นงาน']"
+                  lazy-rules
+                  hide-bottom-space
+                />
+              </div>
 
-      <q-card-section>
-        <div class="row q-gutter-sm q-pa-sm">
-          <div class="row col-xs-12 col-md-12 q-col-gutter-sm">
-            <div class="col-4">
-              <q-select
-                ref="posTypeRef"
-                dense
-                outlined
-                v-model="formData.posType"
-                label="กลุ่มงาน"
-                :rules="[(val) => !!val || 'กรุณาเลือกกลุ่มงาน']"
-                :options="posTypeOp"
-                option-label="name"
-                option-value="id"
-                map-options
-                lazy-rules
-                hide-bottom-space
-                @update:model-value="getPosName()"
-              />
-            </div>
-            <div class="col-4">
-              <q-select
-                ref="posNameRef"
-                dense
-                :readonly="formData.posType"
-                outlined
-                v-model="formData.posName"
-                label="ตำแหน่ง"
-                :rules="[(val) => !!val || 'กรุณาเลือกตำแหน่ง']"
-                :options="posNameOp"
-                option-label="name"
-                option-value="name"
-                emit-value
-                lazy-rules
-                use-input
-                @filter="(inputValue:any,doneFn:Function) => filterOption(inputValue, doneFn) "
-                hide-bottom-space
-                @update:model-value="getPosLevel()"
-              >
-              <template v-slot:no-option>
-          <q-item>
-            <q-item-section class="text-grey"> ไม่มีข้อมูล </q-item-section>
-          </q-item>
-        </template>
-      </q-select>
-            </div>
-            <div class="col-4">
-              <q-select
-                :readonly="formData.posName"
-                ref="posLevelRef"
-                dense
-                outlined
-                v-model="formData.posLevel"
-                :options="posLevelOp"
-                option-label="name"
-                option-value="id"
-                map-options
-                label="ระดับชั้นงาน"
-                :rules="[(val) => !!val || 'กรุณาเลือกระดับชั้นงาน']"
-                lazy-rules
-                hide-bottom-space
-              />
-            </div>
+              <div class="col-8">
+                <q-input
+                  dense
+                  outlined
+                  v-model="formData.reson"
+                  label="หมายเหตุ"
+                />
+              </div>
 
-            <div class="col-8">
-              <q-input
-                dense
-                outlined
-                v-model="formData.reson"
-                label="หมายเหตุ"
-              />
-            </div>
+              <div class="col-12 text-bold">อัตราค่าจ้าง</div>
+              <div class="col-4">
+                <q-input
+                  ref="rateOldMinRef"
+                  dense
+                  outlined
+                  v-model="formData.rateOldMin"
+                  label="ขั้นต่ำสุด"
+                  mask="###,###,###,###"
+                  reverse-fill-mask
+                  :rules="[
+                    (val) => !!val || `${'กรุณากรอกอัตราค่าจ้าง ขั้นต่ำสุด'}`,
+                  ]"
+                  lazy-rules
+                  hide-bottom-space
+                />
+              </div>
+              <div class="col-4">
+                <q-select
+                  ref="groupOldRef"
+                  dense
+                  outlined
+                  multiple
+                  v-model="formData.groupOld"
+                  label="กลุ่มของผังบัญชีอัตราค่าจ้าง"
+                  :rules="[
+                    (val) =>
+                      !!val ||
+                      `${'กรุณาเลือกอัตราค่าจ้าง กลุ่มของผังบัญชีอัตราค่าจ้าง'}`,
+                  ]"
+                  :options="groupOldOp"
+                  map-options
+                  option-label="name"
+                  option-value="id"
+                  lazy-rules
+                  hide-bottom-space
+                />
+              </div>
+              <div class="col-4">
+                <q-input
+                  ref="rateMaxOldRef"
+                  dense
+                  outlined
+                  v-model="formData.rateMaxOld"
+                  label="ขั้นสูงสุดเดิม"
+                  mask="###,###,###,###"
+                  reverse-fill-mask
+                  :rules="[
+                    (val) =>
+                      !!val || `${'กรุณากรอกอัตราค่าจ้าง ขั้นสูงสุดเดิม'}`,
+                  ]"
+                  lazy-rules
+                  hide-bottom-space
+                />
+              </div>
 
-            <div class="col-12 text-bold">อัตราค่าจ้าง</div>
-            <div class="col-4">
-              <q-input
-                ref="rateOldMinRef"
-                dense
-                outlined
-                v-model="formData.rateOldMin"
-                label="ขั้นต่ำสุด"
-                mask="###,###,###,###"
-                reverse-fill-mask
-                :rules="[
-                  (val) => !!val || `${'กรุณากรอกอัตราค่าจ้าง ขั้นต่ำสุด'}`,
-                ]"
-                lazy-rules
-                hide-bottom-space
-              />
-            </div>
-            <div class="col-4">
-              <q-select
-                ref="groupOldRef"
-                dense
-                outlined
-                multiple
-                v-model="formData.groupOld"
-                label="กลุ่มของผังบัญชีอัตราค่าจ้าง"
-                :rules="[
-                  (val) =>
-                    !!val ||
-                    `${'กรุณาเลือกอัตราค่าจ้าง กลุ่มของผังบัญชีอัตราค่าจ้าง'}`,
-                ]"
-                :options="groupOldOp"
-                map-options
-                option-label="name"
-                option-value="id"
-                lazy-rules
-                hide-bottom-space
-              />
-            </div>
-            <div class="col-4">
-              <q-input
-                ref="rateMaxOldRef"
-                dense
-                outlined
-                v-model="formData.rateMaxOld"
-                label="ขั้นสูงสุดเดิม"
-                mask="###,###,###,###"
-                reverse-fill-mask
-                :rules="[
-                  (val) => !!val || `${'กรุณากรอกอัตราค่าจ้าง ขั้นสูงสุดเดิม'}`,
-                ]"
-                lazy-rules
-                hide-bottom-space
-              />
-            </div>
-
-            <div class="col-12 text-bold">
-              อัตราค่าจ้างสูงกว่าอัตราค่าจ้างขั้นสูงของตำแหน่งที่ได้รับแต่งตั้งในแต่ละระดับ
-            </div>
-            <div class="col-4">
-              <q-select
-                ref="groupRateHighRef"
-                dense
-                outlined
-                v-model="formData.groupRateHigh"
-                label="กลุ่มบัญชีค่าจ้าง"
-                :rules="[
-                  (val) => !!val || `${'กรุณากรอกเลือกกลุ่มบัญชีค่าจ้าง'}`,
-                ]"
-                lazy-rules
-                :options="groupOldOp"
-                map-options
-                option-label="name"
-                option-value="id"
-                emit-value
-                hide-bottom-space
-              />
-            </div>
-            <div class="col-4">
-              <q-input
-                ref="rateHighMaxRef"
-                dense
-                outlined
-                v-model="formData.rateHighMax"
-                label="อัตราค่าจ้างขั้นสูงใหม่"
-                mask="###,###,###,###"
-                reverse-fill-mask
-                :rules="[
-                  (val) => !!val || `${'กรุณากรอกอัตราค่าจ้างขั้นสูงใหม่'}`,
-                ]"
-                lazy-rules
-                hide-bottom-space
-              />
+              <div class="col-12 text-bold">
+                อัตราค่าจ้างสูงกว่าอัตราค่าจ้างขั้นสูงของตำแหน่งที่ได้รับแต่งตั้งในแต่ละระดับ
+              </div>
+              <div class="col-4">
+                <q-select
+                  ref="groupRateHighRef"
+                  dense
+                  outlined
+                  v-model="formData.groupRateHigh"
+                  label="กลุ่มบัญชีค่าจ้าง"
+                  :rules="[
+                    (val) => !!val || `${'กรุณากรอกเลือกกลุ่มบัญชีค่าจ้าง'}`,
+                  ]"
+                  lazy-rules
+                  :options="groupOldOp"
+                  map-options
+                  option-label="name"
+                  option-value="id"
+                  emit-value
+                  hide-bottom-space
+                />
+              </div>
+              <div class="col-4">
+                <q-input
+                  ref="rateHighMaxRef"
+                  dense
+                  outlined
+                  v-model="formData.rateHighMax"
+                  label="อัตราค่าจ้างขั้นสูงใหม่"
+                  mask="###,###,###,###"
+                  reverse-fill-mask
+                  :rules="[
+                    (val) => !!val || `${'กรุณากรอกอัตราค่าจ้างขั้นสูงใหม่'}`,
+                  ]"
+                  lazy-rules
+                  hide-bottom-space
+                />
+              </div>
             </div>
           </div>
-        </div>
-      </q-card-section>
-      <q-separator />
+        </q-card-section>
+        <q-separator />
 
-      <q-card-actions align="right" class="bg-white text-teal">
-        <q-btn label="บันทึก" color="secondary" @click="onClickSubmit"
-          ><q-tooltip>บันทึกข้อมูล</q-tooltip></q-btn
-        >
-      </q-card-actions>
+        <q-card-actions align="right" class="bg-white text-teal">
+          <q-btn label="บันทึก" color="secondary" type="submit"
+            ><q-tooltip>บันทึกข้อมูล</q-tooltip></q-btn
+          >
+        </q-card-actions>
+      </q-form>
     </q-card>
   </q-dialog>
 </template>

src/modules/13_salary/components/salaryEmployeeChart/TabCriteria.vue

@@ -1,6 +1,11 @@
 <script setup lang="ts">
 import { ref, reactive, onMounted, watch } from "vue";
+import http from "@/plugins/http";
+import config from "@/app.config";
+import { useQuasar } from "quasar";
 
+/** importType*/
+import type { QTableProps } from "quasar";
 import type {
   ListData,
   ResponseData,
@@ -9,28 +14,17 @@ import type {
   NewPagination,
   DataOption,
 } from "@/modules/13_salary/interface/index/Main";
-import DialogFormCriteria from "@/modules/13_salary/components/salaryEmployeeChart/DialogFormCriteria.vue";
+import type { PosType } from "@/modules/13_salary/interface/response/salaryEmployeeChart";
 
-/** importType*/
-import type { QTableProps } from "quasar";
-import { useQuasar } from "quasar";
+/** importCompopnents*/
+import DialogFormCriteria from "@/modules/13_salary/components/salaryEmployeeChart/DialogFormCriteria.vue";
 
 /** importStore*/
 import { useCounterMixin } from "@/stores/mixin";
-import http from "@/plugins/http";
-import config from "@/app.config";
 
-const posTypeOp = ref<DataOption[]>([]);
-const posType = ref<string>("");
 const $q = useQuasar();
-const {
-  date2Thai,
-  dialogRemove,
-  messageError,
-  showLoader,
-  hideLoader,
-  success,
-} = useCounterMixin();
+const { dialogRemove, messageError, showLoader, hideLoader, success } =
+  useCounterMixin();
 
 /** ข้อมูล Table*/
 const columns = ref<QTableProps["columns"]>([
@@ -138,7 +132,6 @@ const visibleColumns = ref<string[]>([
   "rateHighMax",
   "reson",
 ]);
-
 const rows = ref<ListData[]>([]);
 
 const formFilter = reactive({
@@ -146,23 +139,34 @@ const formFilter = reactive({
   pageSize: 10,
   keyword: "",
 });
-const maxPage = ref<number>(1);
-const totalList = ref<number>(0);
-
-function filterFn() {
-  formFilter.page = 1;
-  getData();
-}
-
-const pagination = ref({
-  page: formFilter.page,
-  rowsPerPage: formFilter.pageSize,
-});
 
 const modalForm = ref<boolean>(false);
 const isStatusEdit = ref<boolean>(false);
-const dataRow = ref<any>({});
+const dataRow = ref<ListData>();
 
+const posTypeOp = ref<DataOption[]>([]);
+const posType = ref<string>("");
+const maxPage = ref<number>(1);
+const totalList = ref<number>(0);
+
+/** ดึงข้อมูลกลุ่มงาน */
+function getPosType() {
+  http
+    .get(config.API.salaryEmployeePosType())
+    .then((res) => {
+      const data = res.data.result;
+
+      posTypeOp.value = data.map((item: PosType) => ({
+        id: item.id,
+        name: item.posTypeName,
+      }));
+    })
+    .catch((e) => {
+      messageError($q, e);
+    });
+}
+
+/** ดึงข้อมูลรายการหลักเกณฑ์ */
 function getData() {
   showLoader();
   http
@@ -188,42 +192,61 @@ function getData() {
       }));
     })
     .catch((e) => {
-      // messageError($q, e);
+      messageError($q, e);
     })
     .finally(() => {
       hideLoader();
     });
 }
 
-function editPopup(params: any) {
+/**
+ * เปิด dialog แก้ไขหลักเกณฑ์
+ * @param params
+ */
+function editPopup(params: ListData) {
   modalForm.value = true;
   isStatusEdit.value = true;
   dataRow.value = params;
 }
 
+/**
+ * function fetch ข้อมูลรายการตามหน้า
+ * @param val หน้า
+ */
 function updatePage(val: number) {
   formFilter.page = val;
   getData();
 }
 
+/** function อัปเดทแถวต่อหน้า*/
 function updatePageSize(newPagination: NewPagination) {
   formFilter.page = 1;
   formFilter.pageSize = newPagination.rowsPerPage;
 }
 
+/**
+ * ลบรายการหลักเกณฑ์
+ * @param id หลักเกณฑ์
+ */
 function onClickDelete(id: string) {
   dialogRemove($q, () => {
+    showLoader();
     http
       .delete(config.API.salaryFormula() + `/${id}`)
       .then(() => {
-        getData();
         success($q, "ลบข้อมูลสำเร็จ");
+        getData();
       })
       .catch((err) => {
         messageError($q, err);
+      })
+      .finally(() => {
+        hideLoader();
       });
   });
 }
+
+/** callbackFuntioon ทำงานเมื่อมี่การอัปเดทแถว */
 watch(
   () => formFilter.pageSize,
   () => {
@@ -231,23 +254,17 @@ watch(
   }
 );
 
-/** ดึงข้อมูลกลุ่มงาน */
-function getPosType() {
-  http
-    .get(config.API.salaryEmployeePosType())
-    .then((res) => {
-      const data = res.data.result;
-      posTypeOp.value = data.map((item: any) => ({
-        id: item.id,
-        name: item.posTypeName,
-      }));
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(() => {});
+/** functionn fetch ข้อมูลรายการหน้าแรก*/
+function filterFn() {
+  formFilter.page = 1;
+  getData();
 }
 
+const pagination = ref({
+  page: formFilter.page,
+  rowsPerPage: formFilter.pageSize,
+});
+
 onMounted(() => {
   getData();
   getPosType();
@@ -267,14 +284,14 @@ onMounted(() => {
         option-value="id"
         emit-value
         map-options
-        @update:model-value="getData"
+        @update:model-value="filterFn"
       >
         <template v-if="posType" v-slot:append>
           <q-icon
             name="cancel"
             @click.stop.prevent="
               posType = '';
-              getData();
+              filterFn();
             "
             class="cursor-pointer"
           />
@@ -347,16 +364,6 @@ onMounted(() => {
               1
             }}
           </div>
-          <!-- <div v-else-if="col.name === 'group'">
-            {{ col.value ? `กลุ่มที่ (${col.value})` : "-" }}
-          </div> -->
-          <!-- <div v-else-if="col.name === 'isActive'">
-            <q-icon
-              :name="col.value ? 'done' : 'close'"
-              :color="col.value ? 'primary' : 'grey'"
-              size="24px"
-            ></q-icon>
-          </div> -->
           <div
             v-else-if="
               col.name == 'rateOldMin' ||
@@ -370,7 +377,6 @@ onMounted(() => {
             <span v-for="(item, index) in col.value">
               {{ item }}{{ index + 1 == col.value.length ? "" : "," }}
             </span>
-            <!-- {{ col.value }} -->
           </div>
           <div v-else>{{ col.value != "" ? col.value : "-" }}</div>
         </q-td>