From 659e508a9230162bce52e54bdd6c311a2d081d6f Mon Sep 17 00:00:00 2001
From: setthawutttty <stw.ttty@gmail.com>
Date: Wed, 7 Feb 2024 11:31:36 +0700
Subject: [PATCH] =?UTF-8?q?=E0=B8=9B=E0=B8=A3=E0=B8=B0=E0=B9=80=E0=B8=A1?=
 =?UTF-8?q?=E0=B8=B4=E0=B8=99=E0=B9=80=E0=B8=8A=E0=B8=B5=E0=B9=88=E0=B8=A2?=
 =?UTF-8?q?=E0=B8=A7=E0=B8=8A=E0=B8=B2=E0=B8=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../06_evaluate/components/ExpertPage.vue     | 358 +++++++++++-------
 src/modules/06_evaluate/interface/evalute.ts  |  11 +
 2 files changed, 223 insertions(+), 146 deletions(-)

diff --git a/src/modules/06_evaluate/components/ExpertPage.vue b/src/modules/06_evaluate/components/ExpertPage.vue
index 076035b..d7b6c69 100644
--- a/src/modules/06_evaluate/components/ExpertPage.vue
+++ b/src/modules/06_evaluate/components/ExpertPage.vue
@@ -1,7 +1,13 @@
 <script setup lang="ts">
 import { ref, reactive } from "vue";
 import { useRouter } from "vue-router";
+import { useCounterMixin } from "@/stores/mixin";
+import { useQuasar } from "quasar";
+import type { FormRef } from "@/modules/06_evaluate/interface/evalute";
 
+const $q = useQuasar();
+const mixin = useCounterMixin();
+const { dialogConfirm, messageError, showLoader, hideLoader } = mixin;
 const formData = reactive<any>({
   subject: "",
   author: "",
@@ -13,8 +19,25 @@ const formData = reactive<any>({
 
 const router = useRouter();
 
+const subjectRef = ref<Object | null>(null);
+const authorRef = ref<Object | null>(null);
+const commanderFullnameRef = ref<Object | null>(null);
+const commanderPositionRef = ref<Object | null>(null);
+const commanderAboveFullnameRef = ref<Object | null>(null);
+const commanderAbovePositionRef = ref<Object | null>(null);
+
+/** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
+const objectRef: FormRef = {
+  subject: subjectRef,
+  author: authorRef,
+  commanderFullname: commanderFullnameRef,
+  commanderPosition: commanderPositionRef,
+  commanderAboveFullname: commanderAboveFullnameRef,
+  commanderAbovePosition: commanderAbovePositionRef,
+};
+
 const files = [
-{
+  {
     id: "file1",
     fileName: "แบบพิจารณาคุณสมบัติบุคคล",
     pathName: "1-แบบพิจารณาคุณสมบัติบุคคล",
@@ -48,7 +71,6 @@ const files = [
   },
 ];
 
-
 /**
  * function ดาวน์โหลดไฟล์
  * @param name ชื้อไฟล์
@@ -69,151 +91,195 @@ async function downloadFile(name: string) {
   //     });
 }
 
-function onCilckSave() {
-  alert("save demo");
+function onSubmit() {
+  dialogConfirm($q, () => {
+    console.log(formData);
+    // 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();
+    //   });
+  });
+}
+
+/** ฟังก์ชั่นตรวจสอบความถูกต้องของข้อมูลในฟอร์ม */
+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();
+  } else {
+  }
 }
 </script>
 
 <template>
-  <div class="col-12 row justify-center">
-    <div class="col-xs-12 col-sm-12 col-md-11">
-      <div class="toptitle text-white col-12 row items-center">
-        <q-btn
-          icon="mdi-arrow-left"
-          unelevated
-          round
-          dense
-          flat
-          color="primary"
-          class="q-mr-sm"
-          @click="router.go(-1)"
-        />
-        <div>ประเมินเชี่ยวชาญ</div>
+  <form @submit.prevent="validateForm">
+    <div class="col-12 row justify-center">
+      <div class="col-xs-12 col-sm-12 col-md-11">
+        <div class="toptitle text-white col-12 row items-center">
+          <q-btn
+            icon="mdi-arrow-left"
+            unelevated
+            round
+            dense
+            flat
+            color="primary"
+            class="q-mr-sm"
+            @click="router.go(-1)"
+          />
+          <div>ประเมินเชี่ยวชาญ</div>
+        </div>
       </div>
-    </div>
 
-    <div class="col-xs-12 col-sm-12 col-md-11 row q-col-gutter-md">
-      <div class="col-12 row">
-        <q-card bordered class="col-12 row caedNone q-pa-md q-col-gutter-y-md">
-          <div class="col-12">
-            <q-card bordered class="cardSp1 col-12">
-              <div class="text-weight-medium bg-grey-1 col-12 q-py-sm q-px-md">
-                ผลงาน
-              </div>
-              <div class="col-12"><q-separator /></div>
-              <div class="col-12 q-pa-sm">
-                <div class="row q-col-gutter-sm">
-                  <q-input
-                    ref="performanceRef"
-                    dense
-                    class="col-xs-12 col-sm-6"
-                    outlined
-                    label="ชื่อผลงาน"
-                    v-model="formData.subject"
-                    :rules="[(val) => !!val || `${'กรุณากรอกชื่อผลงาน'}`]"
-                    lazy-rules
-                    hide-bottom-space
-                  />
-                  <q-input
-                    ref="performanceOwnerRef"
-                    class="col-xs-12 col-sm-6"
-                    dense
-                    outlined
-                    v-model="formData.author"
-                    label="เจ้าของผลงาน"
-                    :rules="[(val) => !!val || `${'กรุณากรอกเจ้าของผลงาน'}`]"
-                    lazy-rules
-                    hide-bottom-space
-                  />
+      <div class="col-xs-12 col-sm-12 col-md-11 row q-col-gutter-md">
+        <div class="col-12 row">
+          <q-card
+            bordered
+            class="col-12 row caedNone q-pa-md q-col-gutter-y-md"
+          >
+            <div class="col-12">
+              <q-card bordered class="cardSp1 col-12">
+                <div
+                  class="text-weight-medium bg-grey-1 col-12 q-py-sm q-px-md"
+                >
+                  ผลงาน
                 </div>
-              </div>
-            </q-card>
-          </div>
+                <div class="col-12"><q-separator /></div>
+                <div class="col-12 q-pa-sm">
+                  <div class="row q-col-gutter-sm">
+                    <q-input
+                      ref="subjectRef"
+                      dense
+                      class="col-xs-12 col-sm-6"
+                      outlined
+                      label="ชื่อผลงาน"
+                      v-model="formData.subject"
+                      :rules="[(val) => !!val || `${'กรุณากรอกชื่อผลงาน'}`]"
+                      lazy-rules
+                      hide-bottom-space
+                    />
+                    <q-input
+                      ref="authorRef"
+                      class="col-xs-12 col-sm-6"
+                      dense
+                      outlined
+                      v-model="formData.author"
+                      label="เจ้าของผลงาน"
+                      :rules="[(val) => !!val || `${'กรุณากรอกเจ้าของผลงาน'}`]"
+                      lazy-rules
+                      hide-bottom-space
+                    />
+                  </div>
+                </div>
+              </q-card>
+            </div>
 
-          <!-- เลือกผู้เซ็นเอกสาร -->
-          <div class="col-12">
-            <q-card bordered class="cardSp1 col-12">
-              <div class="text-weight-medium bg-grey-1 q-py-sm q-px-md">
-                เลือกผู้เซ็นเอกสาร
-              </div>
-              <div class="col-12"><q-separator /></div>
-              <div class="col-12 q-pa-sm">
-                <div class="row q-col-gutter-sm">
-                  <div class="col-xs-12 col-sm-12 row">
-                    <div class="text-weight-medium q-pt-xs q-pl-sm">
-                      ผู้บังคับบัญชาชั้นต้น
+            <!-- เลือกผู้เซ็นเอกสาร -->
+            <div class="col-12">
+              <q-card bordered class="cardSp1 col-12">
+                <div class="text-weight-medium bg-grey-1 q-py-sm q-px-md">
+                  เลือกผู้เซ็นเอกสาร
+                </div>
+                <div class="col-12"><q-separator /></div>
+                <div class="col-12 q-pa-sm">
+                  <div class="row q-col-gutter-sm">
+                    <div class="col-xs-12 col-sm-12 row">
+                      <div class="text-weight-medium q-pt-xs q-pl-sm">
+                        ผู้บังคับบัญชาชั้นต้น
+                      </div>
+                      <div class="row col-12 q-col-gutter-sm q-pa-sm">
+                        <q-input
+                          ref="commanderFullnameRef"
+                          dense
+                          class="col-xs-12 col-sm-6"
+                          outlined
+                          label="ชื่อ-นามสกุล"
+                          v-model="formData.commanderFullname"
+                          :rules="[
+                            (val) => !!val || `${'กรุณากรอกชื่อ-นามสกุล'}`,
+                          ]"
+                          lazy-rules
+                          hide-bottom-space
+                        />
+                        <q-input
+                          ref="commanderPositionRef"
+                          class="col-xs-12 col-sm-6"
+                          dense
+                          outlined
+                          v-model="formData.commanderPosition"
+                          label="ตำแหน่ง"
+                          :rules="[(val) => !!val || `${'กรุณากรอกตำแหน่ง'}`]"
+                          lazy-rules
+                          hide-bottom-space
+                        />
+                      </div>
                     </div>
-                    <div class="row col-12 q-col-gutter-sm q-pa-sm">
-                      <q-input
-                        ref="commanderFullnameRef"
-                        dense
-                        class="col-xs-12 col-sm-6"
-                        outlined
-                        label="ชื่อ-นามสกุล"
-                        v-model="formData.commanderFullname"
-                        :rules="[
-                          (val) => !!val || `${'กรุณากรอกชื่อ-นามสกุล'}`,
-                        ]"
-                        lazy-rules
-                        hide-bottom-space
-                      />
-                      <q-input
-                        ref="commanderPositionRef"
-                        class="col-xs-12 col-sm-6"
-                        dense
-                        outlined
-                        v-model="formData.commanderPosition"
-                        label="ตำแหน่ง"
-                        :rules="[(val) => !!val || `${'กรุณากรอกตำแหน่ง'}`]"
-                        lazy-rules
-                        hide-bottom-space
-                      />
+                  </div>
+                  <div class="row q-col-gutter-sm col-12">
+                    <div class="col-xs-12 col-sm-12 row">
+                      <div class="text-weight-medium q-pl-sm q-pt-sm">
+                        ผู้บังคับบัญชาเหนือขึ้นไป 1 ระดับ
+                      </div>
+                      <div class="row col-12 q-col-gutter-md q-pa-sm">
+                        <q-input
+                          ref="commanderAboveFullnameRef"
+                          dense
+                          class="col-xs-12 col-sm-6"
+                          outlined
+                          v-model="formData.commanderAboveFullname"
+                          label="ชื่อ-นามสกุล"
+                          :rules="[
+                            (val) => !!val || `${'กรุณากรอกชื่อ-นามสกุล'}`,
+                          ]"
+                          lazy-rules
+                          hide-bottom-space
+                        />
+                        <q-input
+                          ref="commanderAbovePositionRef"
+                          class="col-xs-12 col-sm-6"
+                          dense
+                          outlined
+                          v-model="formData.commanderAbovePosition"
+                          label="ตำแหน่ง"
+                          :rules="[(val) => !!val || `${'กรุณากรอกตำแหน่ง'}`]"
+                          lazy-rules
+                          hide-bottom-space
+                        />
+                      </div>
                     </div>
                   </div>
                 </div>
-                <div class="row q-col-gutter-sm col-12">
-                  <div class="col-xs-12 col-sm-12 row">
-                    <div class="text-weight-medium q-pl-sm q-pt-sm">
-                      ผู้บังคับบัญชาเหนือขึ้นไป 1 ระดับ
-                    </div>
-                    <div class="row col-12 q-col-gutter-md q-pa-sm">
-                      <q-input
-                        ref="commanderAboveFullnameRef"
-                        dense
-                        class="col-xs-12 col-sm-6"
-                        outlined
-                        v-model="formData.commanderAboveFullname"
-                        label="ชื่อ-นามสกุล"
-                        :rules="[
-                          (val) => !!val || `${'กรุณากรอกชื่อ-นามสกุล'}`,
-                        ]"
-                        lazy-rules
-                        hide-bottom-space
-                      />
-                      <q-input
-                        ref="commanderAbovePositionRef"
-                        class="col-xs-12 col-sm-6"
-                        dense
-                        outlined
-                        v-model="formData.commanderAbovePosition"
-                        label="ตำแหน่ง"
-                        :rules="[(val) => !!val || `${'กรุณากรอกตำแหน่ง'}`]"
-                        lazy-rules
-                        hide-bottom-space
-                      />
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </q-card>
-          </div>
+              </q-card>
+            </div>
 
-          <div class="col-12">
-            <q-card bordered class="cardSp1 col-12">
-              <div class="text-weight-medium bg-grey-1 q-py-sm q-px-md">
-                ดาวน์โหลดเอกสาร
-              </div>
-              <div class="col-12"><q-separator /></div>
+            <div class="col-12">
+              <q-card bordered class="cardSp1 col-12">
+                <div class="text-weight-medium bg-grey-1 q-py-sm q-px-md">
+                  ดาวน์โหลดเอกสาร
+                </div>
+                <div class="col-12"><q-separator /></div>
 
                 <q-list
                   v-for="file in files"
@@ -244,19 +310,19 @@ function onCilckSave() {
                     </q-item-section>
                   </q-item>
                 </q-list>
- 
-            </q-card>
-            <div class="q-pt-sm q-gutter-sm" align="right">
-              <q-btn
-                unelevated
-                label="บันทึกข้อมูล"
-                color="public"
-                @click="onCilckSave()"
-              />
+              </q-card>
+              <div class="q-pt-sm q-gutter-sm" align="right">
+                <q-btn
+                  type="submit"
+                  unelevated
+                  label="บันทึกข้อมูล"
+                  color="public"
+                />
+              </div>
             </div>
-          </div>
-        </q-card>
+          </q-card>
+        </div>
       </div>
     </div>
-  </div>
+  </form>
 </template>
diff --git a/src/modules/06_evaluate/interface/evalute.ts b/src/modules/06_evaluate/interface/evalute.ts
index aa80df8..1d3e17d 100644
--- a/src/modules/06_evaluate/interface/evalute.ts
+++ b/src/modules/06_evaluate/interface/evalute.ts
@@ -93,6 +93,16 @@ interface ListMenu {
   label: string;
 }
 
+interface FormRef{
+  subject: object | null;
+  author: object | null;
+  commanderFullname: object | null;
+  commanderPosition: object | null;
+  commanderAboveFullname: object | null;
+  commanderAbovePosition: object | null;
+  [key: string]: any;
+}
+
 export type {
   PersonInformation,
   FormCommand,
@@ -101,4 +111,5 @@ export type {
   EducationForm,
   CertificatesForm,
   ListMenu,
+  FormRef
 };