เลือกผู้เซ็นเอกสาร ประเมินผล 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" />

src/modules/06_evaluate/components/step/step2.vue

@@ -1,11 +1,13 @@
 <script setup lang="ts">
-import { ref, onMounted } from "vue";
+import { ref, onMounted, reactive } from "vue";
 import keycloak from "@/plugins/keycloak";
 import http from "@/plugins/http";
 import config from "@/app.config";
 import genReport from "@/plugins/genreport";
 import { useQuasar } from "quasar";
 
+import type { FormCommand } from "@/modules/06_evaluate/interface/evalute";
+
 import { useCounterMixin } from "@/stores/mixin";
 
 const $q = useQuasar();
@@ -17,6 +19,30 @@ const fullName = ref<string>(
   keycloak.tokenParsed ? keycloak.tokenParsed.name!.toString() : ""
 );
 
+const emit = defineEmits(["update:form"]);
+
+const formCommand = reactive<FormCommand>({
+  elementaryFullName: "",
+  elementaryPosition: "",
+  abovelevelFullname: "",
+  abovelevelPosition: "",
+});
+
+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 updateInput = (value: any) => {
+  const ref = {
+    elementaryFullNameRef: elementaryFullNameRef.value,
+    elementaryPositonRef: elementaryPositonRef.value,
+    abovelevelFullnameRef: abovelevelFullnameRef.value,
+    abovelevelPositionRef: abovelevelPositionRef.value,
+  };
+  emit("update:form", value, ref);
+};
+
 const fileEvaluation1 = ref<any>();
 const fileEvaluation2 = ref<any>();
 const fileEvaluation3 = ref<any>();
@@ -68,6 +94,16 @@ async function onClickDowloadFile(
   console.log(body);
   await genReport(body, fileName);
 }
+
+onMounted(() => {
+  const ref = {
+    elementaryFullNameRef: elementaryFullNameRef.value,
+    elementaryPositonRef: elementaryPositonRef.value,
+    abovelevelFullnameRef: abovelevelFullnameRef.value,
+    abovelevelPositionRef: abovelevelPositionRef.value,
+  };
+  emit("update:form", formCommand, ref);
+});
 </script>
 
 <template>
@@ -113,7 +149,7 @@ async function onClickDowloadFile(
                   <q-tooltip> ดูไฟล์เอกสาร </q-tooltip></q-btn
                 >
               </div>
-              <div class="col-xs-12 col-sm-11 row">
+              <div class="col-xs-12 col-sm-10 row">
                 <q-file
                   v-model="fileEvaluation1"
                   class="col-12"
@@ -128,8 +164,7 @@ async function onClickDowloadFile(
                   </template>
                 </q-file>
               </div>
-
-              <div class="col-1 self-center text-center">
+              <div class="col-2 self-center text-center q-pl-none">
                 <q-btn flat round dense color="primary" icon="mdi-upload"
                   ><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
                 >
@@ -180,7 +215,7 @@ async function onClickDowloadFile(
                   <q-tooltip> ดูไฟล์เอกสาร </q-tooltip></q-btn
                 >
               </div>
-              <div class="col-xs-12 col-sm-11 row">
+              <div class="col-xs-12 col-sm-10 row">
                 <q-file
                   v-model="fileEvaluation2"
                   class="col-12"
@@ -195,7 +230,7 @@ async function onClickDowloadFile(
                   </template>
                 </q-file>
               </div>
-              <div class="col-1 self-center text-center">
+              <div class="col-2 self-center text-center q-pl-none">
                 <q-btn flat round dense color="primary" icon="mdi-upload"
                   ><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
                 >
@@ -246,7 +281,7 @@ async function onClickDowloadFile(
                   <q-tooltip> ดูไฟล์เอกสาร </q-tooltip></q-btn
                 >
               </div>
-              <div class="col-xs-12 col-sm-11 row">
+              <div class="col-xs-12 col-sm-10 row">
                 <q-file
                   v-model="fileEvaluation3"
                   class="col-12"
@@ -261,7 +296,7 @@ async function onClickDowloadFile(
                   </template>
                 </q-file>
               </div>
-              <div class="col-1 self-center text-center">
+              <div class="col-2 self-center text-center q-pl-none">
                 <q-btn flat round dense color="primary" icon="mdi-upload"
                   ><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
                 >
@@ -312,7 +347,7 @@ async function onClickDowloadFile(
                   <q-tooltip> ดูไฟล์เอกสาร </q-tooltip></q-btn
                 >
               </div>
-              <div class="col-xs-12 col-sm-11 row">
+              <div class="col-xs-12 col-sm-10 row">
                 <q-file
                   v-model="fileEvaluation4"
                   class="col-12"
@@ -327,7 +362,7 @@ async function onClickDowloadFile(
                   </template>
                 </q-file>
               </div>
-              <div class="col-1 self-center text-center">
+              <div class="col-2 self-center text-center q-pl-none">
                 <q-btn flat round dense color="primary" icon="mdi-upload"
                   ><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
                 >
@@ -363,6 +398,7 @@ async function onClickDowloadFile(
                     )
                   "
                 >
+                  >
                   <q-tooltip> ดาวน์โหลดต้นแบบ </q-tooltip></q-btn
                 >
               </div>
@@ -378,7 +414,7 @@ async function onClickDowloadFile(
                   <q-tooltip> ดูไฟล์เอกสาร </q-tooltip></q-btn
                 >
               </div>
-              <div class="col-xs-12 col-sm-11 row">
+              <div class="col-xs-12 col-sm-10 row">
                 <q-file
                   v-model="fileEvaluation5"
                   class="col-12"
@@ -393,7 +429,7 @@ async function onClickDowloadFile(
                   </template>
                 </q-file>
               </div>
-              <div class="col-1 self-center text-center">
+              <div class="col-2 self-center text-center q-pl-none">
                 <q-btn flat round dense color="primary" icon="mdi-upload"
                   ><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
                 >
@@ -444,7 +480,7 @@ async function onClickDowloadFile(
                   <q-tooltip> ดูไฟล์เอกสาร </q-tooltip></q-btn
                 >
               </div>
-              <div class="col-xs-12 col-sm-11 row">
+              <div class="col-xs-12 col-sm-10 row">
                 <q-file
                   v-model="fileEvaluation6"
                   class="col-12"
@@ -459,7 +495,7 @@ async function onClickDowloadFile(
                   </template>
                 </q-file>
               </div>
-              <div class="col-1 self-center text-center">
+              <div class="col-2 self-center text-center q-pl-none">
                 <q-btn flat round dense color="primary" icon="mdi-upload"
                   ><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
                 >
@@ -469,6 +505,83 @@ async function onClickDowloadFile(
         </div>
       </q-card>
     </div>
+
+    <!-- เลือกผู้เซ็นเอกสาร -->
+    <div class="col-12">
+      <q-card bordered style="border: 1px solid #d6dee1">
+        <div class="text-weight-medium bg-grey-1 q-py-sm q-px-md">
+          เลือกผู้เซ็นเอกสาร
+        </div>
+        <div class="col-12"><q-separator /></div>
+        <div class="row">
+          <div class="col-12 q-pa-sm">
+            <div class="row q-col-gutter-md col-12">
+              <div class="col-xs-12 col-sm-12 row">
+                <div class="text-weight-medium q-py-sm">
+                  ผู้บังคับบัญชาชั้นต้น
+                </div>
+                <div class="row col-12 q-col-gutter-md q-pa-sm">
+                  <q-input
+                    ref="elementaryFullNameRef"
+                    dense
+                    class="col-xs-12 col-sm-6"
+                    outlined
+                    label="ชื่อ-นามสกุล"
+                    v-model="formCommand.elementaryFullName"
+                    @update:model-value="updateInput(formCommand)"
+                    :rules="[(val) => !!val || `${'กรุณากรอกชื่อ-นามสกุล'}`]"
+                    lazy-rules
+                  />
+                  <q-input
+                    ref="elementaryPositonRef"
+                    class="col-xs-12 col-sm-6"
+                    dense
+                    outlined
+                    v-model="formCommand.elementaryPosition"
+                    @update:model-value="updateInput(formCommand)"
+                    label="ตำแหน่ง"
+                    :rules="[(val) => !!val || `${'กรุณากรอกตำแหน่ง'}`]"
+                    lazy-rules
+                  />
+                </div>
+              </div>
+            </div>
+
+            <div class="row q-col-gutter-md col-12">
+              <div class="col-xs-12 col-sm-12 row">
+                <div class="text-weight-medium q-py-sm">
+                  ผู้บังคับบัญชาเหนือขึ้นไป 1 ระดับ
+                </div>
+                <div class="row col-12 q-col-gutter-md q-pa-sm">
+                  <q-input
+                    ref="abovelevelFullnameRef"
+                    dense
+                    class="col-xs-12 col-sm-6"
+                    outlined
+                    v-model="formCommand.abovelevelFullname"
+                    label="ชื่อ-นามสกุล"
+                    :rules="[(val) => !!val || `${'กรุณากรอกชื่อ-นามสกุล'}`]"
+                    lazy-rules
+                    @update:model-value="updateInput(formCommand)"
+                  />
+                  <q-input
+                    ref="abovelevelPositionRef"
+                    class="col-xs-12 col-sm-6"
+                    dense
+                    outlined
+                    v-model="formCommand.abovelevelPosition"
+                    label="ตำแหน่ง"
+                    :rules="[(val) => !!val || `${'กรุณากรอกตำแหน่ง'}`]"
+                    lazy-rules
+                    @update:model-value="updateInput(formCommand)"
+                  />
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </q-card>
+    </div>
   </div>
 
   <!-- Dialog Full Screen -->

src/modules/06_evaluate/interface/evalute.ts

@@ -0,0 +1,17 @@
+interface FormCommand {
+  elementaryFullName: string;
+  elementaryPosition: string;
+  abovelevelFullname: string;
+  abovelevelPosition: string;
+}
+
+interface FormCommandRef {
+  elementaryFullName: object | null;
+  elementaryPosition: object | null;
+  abovelevelFullname: object | null;
+  abovelevelPosition: object | null;
+
+  [key: string]: any;
+}
+
+export type { FormCommand, FormCommandRef };