ทะเบียนประวัติ: แก้ไข ฟอร์มเพิ่มข้อมูล

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

@@ -21,11 +21,9 @@ const profileStore = useProfileDataStore();
 const $q = useQuasar();
 const store = useRegistryNewDataStore();
 const {
-  dialogRemove,
   dialogConfirm,
   success,
   messageError,
-  showLoader,
   hideLoader,
   dialogMessageNotify,
   date2Thai,
@@ -54,24 +52,6 @@ const formData = reactive<FormAddPerson>({
   birthDate: null,
 });
 
-const prefixRef = ref<object | null>(null);
-const firstNameRef = ref<object | null>(null);
-const lastNameRef = ref<object | null>(null);
-const citizenIdRef = ref<object | null>(null);
-const positionRef = ref<object | null>(null);
-const posTypeIdRef = ref<object | null>(null);
-const posLevelIdRef = ref<object | null>(null);
-
-const objectRef: MyObjectRef = {
-  prefix: prefixRef,
-  firstName: firstNameRef,
-  lastName: lastNameRef,
-  citizenId: citizenIdRef,
-  position: positionRef,
-  posTypeId: posTypeIdRef,
-  posLevelId: posLevelIdRef,
-};
-
 function fetchPrefix() {
   http
     .get(config.API.orgPrefix)
@@ -152,22 +132,6 @@ function clearFormData() {
   formData.birthDate = null;
 }
 
-function validateForm() {
-  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();
-  }
-}
-
 async function onSubmit() {
   dialogConfirm($q, async () => {
     await http
@@ -209,35 +173,38 @@ watch(
 <template>
   <q-dialog v-model="modal" persistent>
     <q-card style="min-width: 350px">
-      <form @submit.prevent="validateForm">
+      <q-form @submit.prevent @validation-success="onSubmit()" greedy>
         <q-card-section class="flex justify-between" style="padding: 0">
           <DialogHeader tittle="เพิ่มข้อมูล" :close="closeDialog" />
         </q-card-section>
-
         <q-separator />
         <q-card-section class="q-pa-md q-col-gutter-md">
           <div class="row q-gutter-sm">
             <div class="col">
               <q-select
                 bg-color="white"
-                ref="prefixRef"
                 v-model="formData.prefix"
                 label="คำนำหน้าชื่อ"
                 outlined
                 dense
+                lazy-rules
                 :options="prefixOps"
                 option-label="name"
                 option-value="id"
                 map-options
                 hide-bottom-space
-                :rules="[(val) => !!val || 'กรุณาเลือกคำนำหน้าชื่อ']"
+                :rules="[
+                  (val) => {
+                    console.log(val);
+                    return val.length > 0 || 'กรุณาเลือกคำนำหน้าชื่อ';
+                  },
+                ]"
                 emit-value
               />
             </div>
             <div class="col">
               <q-select
                 bg-color="white"
-                ref="prefixRef"
                 v-model="formData.rank"
                 label="ยศ"
                 outlined
@@ -253,7 +220,6 @@ watch(
           </div>
           <q-input
             bg-color="white"
-            ref="firstNameRef"
             outlined
             v-model="formData.firstName"
             label="ชื่อ"
@@ -265,7 +231,6 @@ watch(
           />
           <q-input
             bg-color="white"
-            ref="lastNameRef"
             outlined
             v-model="formData.lastName"
             label="นามสกุล"
@@ -277,7 +242,6 @@ watch(
           />
           <q-input
             bg-color="white"
-            ref="citizenIdRef"
             outlined
             v-model="formData.citizenId"
             label="เลขประจำตัวประชาชน"
@@ -295,51 +259,6 @@ watch(
             mask="#############"
             @update:model-value="changeCardID"
           />
-          <q-input
-            bg-color="white"
-            ref="positionRef"
-            outlined
-            v-model="formData.position"
-            label="ตำแหน่ง"
-            dense
-            lazy-rules
-            borderless
-            :rules="[(val) => val.length > 0 || 'กรุณากรอกตำแหน่ง']"
-            hide-bottom-space
-          />
-          <q-select
-            bg-color="white"
-            ref="posTypeIdRef"
-            v-model="formData.posTypeId"
-            label="ประเภทตำแหน่ง"
-            outlined
-            :options="store.posTypeOps"
-            dense
-            options-cover
-            map-options
-            emit-value
-            option-label="name"
-            option-value="id"
-            hide-bottom-space
-            :rules="[(val) => !!val || 'กรุณาเลือกประเภทตำแหน่ง']"
-            @update:model-value="fetchLevel"
-          />
-          <q-select
-            bg-color="white"
-            ref="posLevelIdRef"
-            v-model="formData.posLevelId"
-            label="ระดับตำแหน่ง"
-            :options="levelOps"
-            outlined
-            dense
-            map-options
-            emit-value
-            option-label="posLevelName"
-            option-value="id"
-            options-cover
-            hide-bottom-space
-            :rules="[(val) => !!val || 'กรุณาเลือกระดับตำแหน่ง']"
-          />
           <div class="row q-col-gutter-sm">
             <div class="col-xs-6 col-sm-6 col-md-6">
               <datepicker
@@ -359,7 +278,6 @@ watch(
                 <template #trigger>
                   <q-input
                     for="inputDatereceive"
-                    ref="dateReceivedRef"
                     outlined
                     dense
                     hide-bottom-space
@@ -399,6 +317,48 @@ watch(
               />
             </div>
           </div>
+          <q-input
+            bg-color="white"
+            outlined
+            v-model="formData.position"
+            label="ตำแหน่ง"
+            dense
+            lazy-rules
+            borderless
+            :rules="[(val) => val.length > 0 || 'กรุณากรอกตำแหน่ง']"
+            hide-bottom-space
+          />
+          <q-select
+            bg-color="white"
+            v-model="formData.posTypeId"
+            label="ประเภทตำแหน่ง"
+            outlined
+            :options="store.posTypeOps"
+            dense
+            options-cover
+            map-options
+            emit-value
+            option-label="name"
+            option-value="id"
+            hide-bottom-space
+            :rules="[(val) => !!val || 'กรุณาเลือกประเภทตำแหน่ง']"
+            @update:model-value="fetchLevel"
+          />
+          <q-select
+            bg-color="white"
+            v-model="formData.posLevelId"
+            label="ระดับตำแหน่ง"
+            :options="levelOps"
+            outlined
+            dense
+            map-options
+            emit-value
+            option-label="posLevelName"
+            option-value="id"
+            options-cover
+            hide-bottom-space
+            :rules="[(val) => !!val || 'กรุณาเลือกระดับตำแหน่ง']"
+          />
         </q-card-section>
 
         <q-separator />
@@ -415,7 +375,7 @@ watch(
             <q-tooltip>บันทึกข้อมูล</q-tooltip>
           </q-btn>
         </q-card-actions>
-      </form>
+      </q-form>
     </q-card>
   </q-dialog>
 </template>