From 8c21b94fbd4d96343f8ecdd12e82d139f9163087 Mon Sep 17 00:00:00 2001
From: setthawutttty <stw.ttty@gmail.com>
Date: Wed, 7 Feb 2024 10:33:17 +0700
Subject: [PATCH] clearForm

---
 .../components/DialogSelectPerson.vue         | 398 +++++++++---------
 1 file changed, 203 insertions(+), 195 deletions(-)

diff --git a/src/modules/02_organizationalNew/components/DialogSelectPerson.vue b/src/modules/02_organizationalNew/components/DialogSelectPerson.vue
index 0a36505e6..e70868570 100644
--- a/src/modules/02_organizationalNew/components/DialogSelectPerson.vue
+++ b/src/modules/02_organizationalNew/components/DialogSelectPerson.vue
@@ -247,10 +247,17 @@ function inputEdit(val: boolean) {
   };
 }
 
+function clearForm() {
+  formData.positionType = "";
+  formData.positionLevel = "";
+  formData.personal = "";
+}
+
 watch(
   () => modal.value,
   () => {
     if (modal.value == true) {
+      clearForm();
       fetchType();
       fetchExecutive();
 
@@ -302,36 +309,33 @@ function validateForm() {
   //   }
   // }
   // if (hasError.every((result) => result === true)) {
-    onSubmit();
+  onSubmit();
   // } else {
   // }
 }
 
 /** ฟังชั่น บันทึก */
 function onSubmit() {
-  dialogConfirm(
-    $q,
-    () => {
-      // showLoader();
-      // http
-      //   .post(config.API.createOrganization, formData)
-      //   .then((res) => {
-      //     status.value = true;
-      //     store.typeOrganizational = "draft";
-      //     store.draftId = res.data.result.id;
-      //     success($q, "บันทึกข้อมูลสำเร็จ");
-      //     // props.fetchActive?.();
-      //   })
-      //   .catch((err) => {
-      //     messageError($q, err);
-      //   })
-      //   .finally(async () => {
-      //     modal.value = await false;
-      //     await close();
-      //     await hideLoader();
-      //   });
-    },
-  );
+  dialogConfirm($q, () => {
+    // showLoader();
+    // http
+    //   .post(config.API.createOrganization, formData)
+    //   .then((res) => {
+    //     status.value = true;
+    //     store.typeOrganizational = "draft";
+    //     store.draftId = res.data.result.id;
+    //     success($q, "บันทึกข้อมูลสำเร็จ");
+    //     // props.fetchActive?.();
+    //   })
+    //   .catch((err) => {
+    //     messageError($q, err);
+    //   })
+    //   .finally(async () => {
+    //     modal.value = await false;
+    //     await close();
+    //     await hideLoader();
+    //   });
+  });
 }
 
 /** เมื่อ enter ให้ทำการ ค้นหาข้อมูล */
@@ -351,7 +355,7 @@ function filterFn() {
     },
   ];
 
-  rowResult.value = data
+  rowResult.value = data;
   // props.fetchListDisciplinary?.();
 }
 </script>
@@ -360,189 +364,193 @@ function filterFn() {
     <q-dialog v-model="modal" persistent>
       <q-card style="min-width: 80vw">
         <form @submit.prevent="validateForm">
-        <DialogHeader :tittle="`เลือกคนครอง`" :close="close" />
-        <q-separator />
+          <DialogHeader :tittle="`เลือกคนครอง`" :close="close" />
+          <q-separator />
 
-        <q-card-section>
-          <div class="q-px-md">
-            <div class="row q-col-gutter-sm q-mb-xs">
-              <div class="col-4 text-bold">
-                <div>
-                  <p>เลขที่ตำแหน่ง</p>
+          <q-card-section>
+            <div class="q-px-md">
+              <div class="row q-col-gutter-sm q-mb-xs">
+                <div class="col-4 text-bold">
+                  <div>
+                    <p>เลขที่ตำแหน่ง</p>
+                  </div>
+                </div>
+                <div class="col-8 text-grey-8">
+                  <p>{{ formData.positionNo }}</p>
                 </div>
               </div>
-              <div class="col-8 text-grey-8">
-                <p>{{ formData.positionNo }}</p>
-              </div>
-            </div>
 
-            <div class="row q-col-gutter-sm q-mb-xs">
-              <div class="col-12">
-                <d-table
-                  flat
-                  :columns="columns"
-                  :rows="row"
-                  row-key="id"
-                  dense
-                  hide-bottom
-                  class="custom-header-table-expand"
-                >
-                  <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-tr>
-                  </template>
-                  <template v-slot:body="props">
-                    <q-tr :props="props" class="cursor-pointer">
-                      <q-td
-                        v-for="col in props.cols"
-                        :key="col.name"
-                        :props="props"
-                      >
-                        <div v-if="col.name == 'no'">
-                          {{ props.rowIndex + 1 }}
-                        </div>
+              <div class="row q-col-gutter-sm q-mb-xs">
+                <div class="col-12">
+                  <d-table
+                    flat
+                    :columns="columns"
+                    :rows="row"
+                    row-key="id"
+                    dense
+                    hide-bottom
+                    class="custom-header-table-expand"
+                  >
+                    <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-tr>
+                    </template>
+                    <template v-slot:body="props">
+                      <q-tr :props="props" class="cursor-pointer">
+                        <q-td
+                          v-for="col in props.cols"
+                          :key="col.name"
+                          :props="props"
+                        >
+                          <div v-if="col.name == 'no'">
+                            {{ props.rowIndex + 1 }}
+                          </div>
 
-                        <div v-else>
-                          {{ col.value }}
-                        </div>
-                      </q-td>
-                    </q-tr>
-                  </template>
-                </d-table>
+                          <div v-else>
+                            {{ col.value }}
+                          </div>
+                        </q-td>
+                      </q-tr>
+                    </template>
+                  </d-table>
+                </div>
               </div>
-            </div>
-            <div class="row q-col-gutter-sm q-mt-sm">
-              <div class="col-2">
+              <div class="row q-col-gutter-sm q-mt-sm">
+                <div class="col-2">
+                  <q-select
+                    ref="positionTypeRef"
+                    :class="inputEdit(isReadonly)"
+                    label="ประเภทตำแหน่ง"
+                    v-model="formData.positionType"
+                    :options="typeOps"
+                    emit-value
+                    dense
+                    @update:model-value="updateSelectType"
+                    map-options
+                    outlined
+                    option-label="name"
+                    option-value="id"
+                    lazy-rules
+                    hide-bottom-space
+                    :rules="
+                      !isDisValidate
+                        ? [(val) => !!val || `${'กรุณาเลือกประเภทตำแหน่ง'}`]
+                        : []
+                    "
+                  />
+                </div>
+                <div class="col-2">
+                  <q-select
+                    ref="positionLevelRef"
+                    :class="inputEdit(isReadonly)"
+                    label="ระดับตำแหน่ง"
+                    v-model="formData.positionLevel"
+                    :disable="formData.positionType === ''"
+                    :options="levelOps"
+                    emit-value
+                    dense
+                    map-options
+                    outlined
+                    option-label="name"
+                    option-value="id"
+                    lazy-rules
+                    hide-bottom-space
+                    :rules="
+                      !isDisValidate
+                        ? [(val) => !!val || `${'กรุณาเลือกระดับตำแหน่ง'}`]
+                        : []
+                    "
+                  />
+                </div>
+                <div class="col-2">
+                  <q-input
+                    ref="positionExecutiveFieldRef"
+                    v-model="formData.personal"
+                    :class="inputEdit(isReadonly)"
+                    dense
+                    outlined
+                    for="#search"
+                    label="คำค้นหา"
+                    lazy-rules
+                    hide-bottom-space
+                    @keydown.enter.prevent="filterFn"
+                  />
+                </div>
+                <q-space />
                 <q-select
-                  ref="positionTypeRef"
-                  :class="inputEdit(isReadonly)"
-                  label="ประเภทตำแหน่ง"
-                  v-model="formData.positionType"
-                  :options="typeOps"
+                  for="#select"
+                  v-model="visibleColumnsResult"
+                  multiple
+                  outlined
+                  dense
+                  options-dense
+                  :display-value="$q.lang.table.columns"
                   emit-value
-                  dense
-                  @update:model-value="updateSelectType"
                   map-options
-                  outlined
-                  option-label="name"
-                  option-value="id"
-                  lazy-rules
-                  hide-bottom-space
-                  :rules="
-                    !isDisValidate
-                      ? [(val) => !!val || `${'กรุณาเลือกประเภทตำแหน่ง'}`]
-                      : []
-                  "
+                  :options="columnsResult"
+                  option-value="name"
+                  options-cover
+                  style="min-width: 150px"
+                  class="col-xs-12 col-sm-3 col-md-2"
                 />
-              </div>
-              <div class="col-2">
-                <q-select
-                  ref="positionLevelRef"
-                  :class="inputEdit(isReadonly)"
-                  label="ระดับตำแหน่ง"
-                  v-model="formData.positionLevel"
-                  :disable="formData.positionType === ''"
-                  :options="levelOps"
-                  emit-value
-                  dense
-                  map-options
-                  outlined
-                  option-label="name"
-                  option-value="id"
-                  lazy-rules
-                  hide-bottom-space
-                  :rules="
-                    !isDisValidate
-                      ? [(val) => !!val || `${'กรุณาเลือกระดับตำแหน่ง'}`]
-                      : []
-                  "
-                />
-              </div>
-              <div class="col-2">
-                <q-input
-                  ref="positionExecutiveFieldRef"
-                  v-model="formData.personal"
-                  :class="inputEdit(isReadonly)"
-                  dense
-                  outlined
-                  for="#search"
-                  label="คำค้นหา"
-                  lazy-rules
-                  hide-bottom-space
-                  @keydown.enter.prevent="filterFn"
-                />
-              </div>
-              <q-space />
-              <q-select
-                for="#select"
-                v-model="visibleColumnsResult"
-                multiple
-                outlined
-                dense
-                options-dense
-                :display-value="$q.lang.table.columns"
-                emit-value
-                map-options
-                :options="columnsResult"
-                option-value="name"
-                options-cover
-                style="min-width: 150px"
-                class="col-xs-12 col-sm-3 col-md-2"
-              />
-              <div class="col-12">
-                <d-table
-                  flat
-                  :columns="columnsResult"
-                  :rows="rowResult"
-                  row-key="id"
-                  dense
-                  hide-bottom
-                  class="custom-header-table-expand"
-                >
-                  <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-tr>
-                  </template>
-                  <template v-slot:body="props">
-                    <q-tr :props="props" class="cursor-pointer">
-                      <q-td
-                        v-for="col in props.cols"
-                        :key="col.name"
-                        :props="props"
-                      >
-                        <div v-if="col.name == 'no'">
-                          {{ props.rowIndex + 1 }}
-                        </div>
+                <div class="col-12">
+                  <d-table
+                    flat
+                    :columns="columnsResult"
+                    :rows="rowResult"
+                    row-key="id"
+                    dense
+                    hide-bottom
+                    class="custom-header-table-expand"
+                  >
+                    <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-tr>
+                    </template>
+                    <template v-slot:body="props">
+                      <q-tr :props="props" class="cursor-pointer">
+                        <q-td
+                          v-for="col in props.cols"
+                          :key="col.name"
+                          :props="props"
+                        >
+                          <div v-if="col.name == 'no'">
+                            {{ props.rowIndex + 1 }}
+                          </div>
 
-                        <div v-else>
-                          {{ col.value }}
-                        </div>
-                      </q-td>
-                    </q-tr>
-                  </template>
-                </d-table>
+                          <div v-else>
+                            {{ col.value }}
+                          </div>
+                        </q-td>
+                      </q-tr>
+                    </template>
+                  </d-table>
+                </div>
               </div>
             </div>
-          </div>
-        </q-card-section>
-        <q-separator />
-        <q-card-actions align="right" class="bg-white text-teal">
-          <q-btn type="submit" :label="`บันทึก`" color="public" />
-        </q-card-actions>
+          </q-card-section>
+          <q-separator />
+          <q-card-actions align="right" class="bg-white text-teal">
+            <q-btn type="submit" :label="`บันทึก`" color="public" />
+          </q-card-actions>
         </form>
       </q-card>
     </q-dialog>