เลือกผู้เซ็นเอกสาร ประเมินผล step2

src/modules/06_evaluate/components/Tab1.vue

@@ -1,7 +1,12 @@
 <script setup lang="ts">
-import { onMounted } from "vue";
+import { ref, reactive, onMounted } from "vue";
 import { useQuasar } from "quasar";
 
+import type {
+  FormCommand,
+  FormCommandRef,
+} from "@/modules/06_evaluate/interface/evalute";
+
 import Stepper from "@/modules/06_evaluate/components/Stepper.vue";
 import Step1 from "@/modules/06_evaluate/components/step/step1.vue";
 import Step2 from "@/modules/06_evaluate/components/step/step2.vue";
@@ -19,7 +24,6 @@ import ViewStep7 from "@/modules/06_evaluate/components/viewstep/viewStep7.vue";
 
 import { useEvaluateStore } from "@/modules/06_evaluate/store";
 import { useCounterMixin } from "@/stores/mixin";
-import type router from "../router";
 
 const store = useEvaluateStore();
 const mixin = useCounterMixin();
@@ -30,40 +34,61 @@ const $q = useQuasar();
 const externalLink =
   "https://accreditation.ocsc.go.th/accreditation/search/curriculum";
 
-function onCilckNextStep() {
-  store.step < 9 &&
-    dialogConfirm(
-      $q,
-      async () => {
-        const functionCreateDoc: (() => Promise<void>) | null =
-          store.step === 1
-            ? await saveStep1
-            : store.step === 2
-            ? await saveStep2
-            : store.step === 3
-            ? await saveStep3
-            : store.step === 4
-            ? await saveStep4
-            : store.step === 5
-            ? await saveStep5
-            : store.step === 5
-            ? await saveStep5
-            : store.step === 6
-            ? await saveStep6
-            : store.step === 7
-            ? await saveStep7
-            : store.step === 8
-            ? await saveStep8
-            : store.step === 9
-            ? await saveStep9
-            : null;
+const formCommand = reactive<FormCommand>({
+  elementaryFullName: "",
+  elementaryPosition: "",
+  abovelevelFullname: "",
+  abovelevelPosition: "",
+});
 
-        functionCreateDoc?.();
-        store.step++;
-      },
-      "ยืนยันการดำเนินการ",
-      "ต้องการยืนยันการดำเนินการต่อใช่หรือไม่?"
-    );
+const elementaryFullNameRef = ref<object | null>(null);
+const elementaryPositonRef = ref<object | null>(null);
+const abovelevelFullnameRef = ref<object | null>(null);
+const abovelevelPositionRef = ref<object | null>(null);
+
+const formCommandRef: FormCommandRef = {
+  elementaryFullName: elementaryFullNameRef,
+  elementaryPosition: elementaryPositonRef,
+  abovelevelFullname: abovelevelFullnameRef,
+  abovelevelPosition: abovelevelPositionRef,
+};
+
+async function onCilckNextStep() {
+  const functionCreateDoc: (() => Promise<void>) | null =
+    store.step === 1
+      ? await saveStep1
+      : store.step === 3
+      ? await saveStep3
+      : store.step === 4
+      ? await saveStep4
+      : store.step === 5
+      ? await saveStep5
+      : store.step === 5
+      ? await saveStep5
+      : store.step === 6
+      ? await saveStep6
+      : store.step === 7
+      ? await saveStep7
+      : store.step === 8
+      ? await saveStep8
+      : store.step === 9
+      ? await saveStep9
+      : null;
+  store.step === 2
+    ? validateStep2()
+    : store.step < 9 &&
+      dialogConfirm(
+        $q,
+        () => {
+          functionCreateDoc?.();
+          store.step++;
+        },
+        "ยืนยันการดำเนินการ",
+        "ต้องการยืนยันการดำเนินการต่อใช่หรือไม่?"
+      );
+
+  // functionCreateDoc?.();
+  // store.step < 9 &&
 }
 
 function onCilckprPeviousStep() {
@@ -78,13 +103,48 @@ function onCilckprPeviousStep() {
     );
 }
 
-function updatedFormStep2() {}
+function updateformCommand(val: any, ref: any) {
+  formCommand.elementaryFullName = val.elementaryFullName;
+  formCommand.elementaryPosition = val.elementaryPosition;
+  formCommand.abovelevelFullname = val.abovelevelFullname;
+  formCommand.abovelevelPosition = val.abovelevelPosition;
+
+  elementaryFullNameRef.value = ref.elementaryFullNameRef;
+  elementaryPositonRef.value = ref.elementaryPositonRef;
+  abovelevelFullnameRef.value = ref.abovelevelFullnameRef;
+  abovelevelPositionRef.value = ref.abovelevelPositionRef;
+}
+
+async function validateStep2() {
+  const hasError = [];
+  for (const key in formCommandRef) {
+    if (Object.prototype.hasOwnProperty.call(formCommandRef, key)) {
+      const property = formCommandRef[key];
+      if (property.value && typeof property.value.validate === "function") {
+        const isValid = property.value.validate();
+        hasError.push(isValid);
+      }
+    }
+  }
+  if (hasError.every((result) => result === true)) {
+    saveStep2();
+  } else {
+    console.log("ไม่ผ่าน");
+  }
+}
 
 async function saveStep1() {
   console.log("Save 1");
 }
 async function saveStep2() {
-  console.log("Save 2");
+  dialogConfirm(
+    $q,
+    () => {
+      store.step++;
+    },
+    "ยืนยันการดำเนินการ",
+    "ต้องการยืนยันการดำเนินการต่อใช่หรือไม่?"
+  );
 }
 async function saveStep3() {
   console.log("Save 3");
@@ -157,10 +217,7 @@ onMounted(() => {
           <q-card flat bordered class="col-12 q-pa-md">
             <q-card-section>
               <Step1 v-if="store.step === 1" />
-              <Step2
-                v-if="store.step === 2"
-                @update:updatedForm="updatedFormStep2"
-              />
+              <Step2 v-if="store.step === 2" @update:form="updateformCommand" />
               <Step3 v-if="store.step === 3" />
               <Step4 v-if="store.step === 4" />
               <Step5 v-if="store.step === 5" />