ui ประเมินผล

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

@@ -1,21 +1,80 @@
 <script setup lang="ts">
-import { ref } from "vue";
+import { ref, reactive, onMounted } from "vue";
 import ViewPDF from "@/modules/06_evaluate/components/viewstep/viewPDF.vue";
 
-const fileEvaluation1 = ref<any>();
+import type { FormCommand } from "@/modules/06_evaluate/interface/evalute";
 
+import { useCounterMixin } from "@/stores/mixin";
+import { useEvaluateStore } from "@/modules/06_evaluate/store";
+
+const store = useEvaluateStore();
+const mixins = useCounterMixin();
+const { date2Thai } = mixins;
+
+const props = defineProps({
+  evaluateId: {
+    type: String,
+  },
+});
+
+const emit = defineEmits(["update:form"]);
+
+const lastDateSendPerformance = ref<string | null>(date2Thai(new Date()));
+
+const fileEvaluation1 = ref<any>();
 const pdfSrc = ref<any>();
 
+const formCommand = reactive<FormCommand>({
+  commanderFullname: "",
+  commanderPosition: "",
+  commanderAboveFullname: "",
+  commanderAbovePosition: "",
+});
+
+const commanderFullnameRef = ref<object | null>(null);
+const commanderPositionRef = ref<object | null>(null);
+const commanderAboveFullnameRef = ref<object | null>(null);
+const commanderAbovePositionRef = ref<object | null>(null);
+
 const modalView = ref<boolean>(false);
 function onClickViewPDF(file: any) {
   pdfSrc.value = file.webkitRelativePath;
   modalView.value = true;
 }
+
+const updateInput = (value: any) => {
+  const ref = {
+    commanderFullnameRef: commanderFullnameRef.value,
+    commanderPositionRef: commanderPositionRef.value,
+    commanderAboveFullnameRef: commanderAboveFullnameRef.value,
+    commanderAbovePositionRef: commanderAbovePositionRef.value,
+  };
+  emit("update:form", value, ref);
+};
+
+onMounted(async () => {
+  const ref = {
+    commanderFullnameRef: commanderFullnameRef.value,
+    commanderPositionRef: commanderPositionRef.value,
+    commanderAboveFullnameRef: commanderAboveFullnameRef.value,
+    commanderAbovePositionRef: commanderAbovePositionRef.value,
+  };
+  emit("update:form", formCommand, ref);
+  // props.evaluateId && (await fetchPathUpload("เล่ม 2", props.evaluateId));
+});
 </script>
 
 <template>
   <div class="row q-col-gutter-md">
-    <div class="col-6">
+    <div class="col-12 text-center">
+      <q-banner class="text-weight-bold text-red-14 bg-red-2">
+        <div class="text-weight-bold">
+          <q-icon name="info_outline" color="red-14" size="24px" />
+          วันสุดท้ายของการส่งผลงานคือวันที่ {{ lastDateSendPerformance }}
+        </div>
+      </q-banner>
+    </div>
+    <div class="col-6" v-if="store.currentStep === 6">
       <q-card bordered style="border: 1px solid #d6dee1">
         <div class="text-weight-medium bg-grey-1 q-py-sm q-px-md">
           เอกสารเล่ม 2
@@ -73,6 +132,82 @@ function onClickViewPDF(file: any) {
         </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="commanderFullnameRef"
+                    dense
+                    class="col-xs-12 col-sm-6"
+                    outlined
+                    label="ชื่อ-นามสกุล"
+                    v-model="formCommand.commanderFullname"
+                    @update:model-value="updateInput(formCommand)"
+                    :rules="[(val) => !!val || `${'กรุณากรอกชื่อ-นามสกุล'}`]"
+                    lazy-rules
+                  />
+                  <q-input
+                    ref="commanderPositionRef"
+                    class="col-xs-12 col-sm-6"
+                    dense
+                    outlined
+                    v-model="formCommand.commanderPosition"
+                    @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="commanderAboveFullnameRef"
+                    dense
+                    class="col-xs-12 col-sm-6"
+                    outlined
+                    v-model="formCommand.commanderAboveFullname"
+                    label="ชื่อ-นามสกุล"
+                    :rules="[(val) => !!val || `${'กรุณากรอกชื่อ-นามสกุล'}`]"
+                    lazy-rules
+                    @update:model-value="updateInput(formCommand)"
+                  />
+                  <q-input
+                    ref="commanderAbovePositionRef"
+                    class="col-xs-12 col-sm-6"
+                    dense
+                    outlined
+                    v-model="formCommand.commanderAbovePosition"
+                    label="ตำแหน่ง"
+                    :rules="[(val) => !!val || `${'กรุณากรอกตำแหน่ง'}`]"
+                    lazy-rules
+                    @update:model-value="updateInput(formCommand)"
+                  />
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </q-card>
+    </div>
   </div>
 
   <!-- Dialog Full Screen -->