ตรวจสอบคุณสมบัติ รายละเอียดส่วนบุคคล - ประเมิน

src/modules/12_evaluatePersonal/components/Detail/step/step2.vue

@@ -1,11 +1,13 @@
 <script setup lang="ts">
-import { ref } from "vue";
+import { ref, reactive, onMounted } 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/12_evaluatePersonal/interface/index/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>();
@@ -69,6 +95,16 @@ async function onClickDowloadFile(
   };
   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>
@@ -114,7 +150,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"
@@ -129,7 +165,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 +216,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 +231,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 +282,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 +297,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 +348,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 +363,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
                 >
@@ -379,7 +415,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"
@@ -394,7 +430,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
                 >
@@ -445,7 +481,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"
@@ -460,7 +496,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
                 >
@@ -470,6 +506,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 -->