ปรับ UI

src/modules/12_evaluatePersonal/components/Detail/Tab1.vue

@@ -203,7 +203,7 @@ onMounted(() => {
             <q-card-section>
               <Step1 v-if="store.step === 1" />
               <Step2 v-if="store.step === 2" @update:form="updateformCommand" />
-              <Step3 v-if="store.step === 3" />
+              <Step3 v-if="store.step === 3" :step="store.step"/>
               <Step4 v-if="store.step === 4" />
               <Step5 v-if="store.step === 5" />
               <Step6 v-if="store.step === 6" />

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

@@ -522,6 +522,7 @@ onMounted(() => {
                 </div>
                 <div class="row col-12 q-col-gutter-md q-pa-sm">
                   <q-input
+                    readonly
                     ref="elementaryFullNameRef"
                     dense
                     class="col-xs-12 col-sm-6"
@@ -533,6 +534,7 @@ onMounted(() => {
                     lazy-rules
                   />
                   <q-input
+                    readonly
                     ref="elementaryPositonRef"
                     class="col-xs-12 col-sm-6"
                     dense
@@ -554,6 +556,7 @@ onMounted(() => {
                 </div>
                 <div class="row col-12 q-col-gutter-md q-pa-sm">
                   <q-input
+                    readonly
                     ref="abovelevelFullnameRef"
                     dense
                     class="col-xs-12 col-sm-6"
@@ -568,6 +571,7 @@ onMounted(() => {
                     ref="abovelevelPositionRef"
                     class="col-xs-12 col-sm-6"
                     dense
+                    readonly
                     outlined
                     v-model="formCommand.abovelevelPosition"
                     label="ตำแหน่ง"

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

@@ -7,9 +7,10 @@ import config from "@/app.config";
 import keycloak from "@/plugins/keycloak";
 import { useCounterMixin } from "@/stores/mixin";
 import genReport from "@/plugins/genreport";
-
+import { useQuasar } from "quasar";
+const $q = useQuasar();
 const mixin = useCounterMixin();
-const { date2Thai, showLoader, hideLoader, messageError } = mixin;
+const { date2Thai, showLoader, hideLoader, messageError,success } = mixin;
 
 const router = useRouter();
 const route = useRoute();
@@ -144,6 +145,46 @@ function onWebSite() {}
 //       hideLoader();
 //     });
 // }
+
+function upLoadFile() {
+  showLoader();
+  http
+    .post(config.API.evaluationFileListbyId("เล่ม 1", id.value), {
+      fileList: {
+        fileName: "4-แบบประเมินคุณลักษณะบุคคล",
+        metadata: {
+          tag: "value",
+        },
+      },
+    })
+    .then((res) => {
+      const foundKey: any = Object.keys(res.data).find(
+        (key) =>
+          res.data[key]?.fileName !== undefined &&
+          res.data[key]?.fileName !== ""
+      );
+      const link = res.data[foundKey]?.uploadUrl;
+      fileUpLoad(link);
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+function fileUpLoad(url: string) {
+  axios.put(url, fileEvaluationUpload.value, {
+    headers: { "Content-Type": fileEvaluationUpload.value?.type },
+    onUploadProgress: (e) => console.log(e),
+  }).catch((e)=>{
+    messageError($q,e)
+  }).finally(()=>{
+    fileEvaluationUpload.value = null
+    success($q, "อัปโหลดไฟล์สำเร็จ");
+  })
+}
 </script>
 
 <template>
@@ -240,7 +281,13 @@ function onWebSite() {}
                 </q-file>
               </div>
               <div class="col-1 self-center text-center q-pl-none">
-                <q-btn flat round dense color="primary" icon="mdi-upload"
+                <q-btn
+                  flat
+                  round
+                  dense
+                  color="primary"
+                  icon="mdi-upload "
+                  @click="upLoadFile"
                   ><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
                 >
               </div>

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

@@ -1,5 +1,20 @@
 <script setup lang="ts">
 import { ref } from "vue";
+import { useCounterMixin } from "@/stores/mixin";
+import { useQuasar } from "quasar";
+import axios from "axios";
+import http from "@/plugins/http";
+import config from "@/app.config";
+import { useRouter, useRoute } from "vue-router";
+const router = useRouter();
+const route = useRoute();
+
+const $q = useQuasar();
+const mixin = useCounterMixin();
+const { date2Thai, showLoader, hideLoader, messageError, success } = mixin;
+const AnnouncementDate = ref<string | null>(date2Thai(new Date()));
+const id = ref<string>(route.params.id as string);
+
 
 const fileEvaluation5 = ref<any>();
 const status = ref<string>("ANNOUNCE_WEB");
@@ -7,17 +22,17 @@ const website = ref<string>("https://bma-ehr.frappet.com/");
 
 const files = [
   {
-    id: "x1",
+    id: "file1",
     fileName: "แบบสรุปข้อมูลของผู้ขอรับการคัดเลือก (เอกสารหมายเลข 9)",
     pathName: "12",
   },
   {
-    id: "x2",
+    id: "file2",
     fileName: "ประกาศผลการคัดเลือกบุคคล (เอกสารหมายเลข 10)",
     pathName: "12",
   },
   {
-    id: "x3",
+    id: "file3",
     fileName: "เอกสารแสดงผลงานที่จะส่งประเมิน (เอกสารหมายเลข 11)",
     pathName: "12",
   },
@@ -47,14 +62,73 @@ function deleteFile(name: string) {
 function save() {
   console.log("save");
 }
+
+function upLoadFile() {
+  showLoader();
+  http
+    .post(config.API.evaluationFileListbyId("เล่ม 1", id.value), {
+      fileList: {
+        fileName: "บันทึกแจ้งผลการประกาศคัดเลือก",
+        metadata: {
+          tag: "value",
+        },
+      },
+    })
+    .then((res) => {
+      const foundKey: any = Object.keys(res.data).find(
+        (key) =>
+          res.data[key]?.fileName !== undefined &&
+          res.data[key]?.fileName !== ""
+      );
+      const link = res.data[foundKey]?.uploadUrl;
+      fileUpLoad(link);
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+function fileUpLoad(url: string) {
+  axios
+    .put(url, fileEvaluation5.value, {
+      headers: { "Content-Type": fileEvaluation5.value?.type },
+      onUploadProgress: (e) => console.log(e),
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      fileEvaluation5.value = null;
+      success($q, "อัปโหลดไฟล์สำเร็จ");
+    });
+}
+
+function copyLink(link: string) {
+  navigator.clipboard
+    .writeText(link)
+    .then(() => {
+      console.log(`Copied link for file: ${link}`);
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      success($q, "คัดลอกสำเร็จ");
+    });
+}
 </script>
 
 <template>
   <div class="row q-gutter-sm">
     <div class="col-12">
-      <q-banner inline-actions bordered class="bg-red-1 text-red border-red">
+      <q-banner class="text-weight-bold text-red-14 bg-red-2 text-center">
-        <q-icon name="mdi-information-outline" size="20px" />
+        <div class="text-weight-bold">
-        ประกาศเมื่อวันที่ 20 พ.ค. 2566 ถึงวันที่ 20 ธ.ค. 2566
+          <q-icon name="info_outline" color="red-14" size="24px" />
+          ประกาศเมื่อวันที่ {{ AnnouncementDate }}
+        </div>
       </q-banner>
     </div>
 
@@ -78,15 +152,13 @@ function save() {
               <div class="row">
                 <div>
                   <q-btn
-                    dense
                     flat
                     round
-                    size="12px"
+                    color="primary"
-                    color="blue"
+                    icon="mdi-clipboard-outline"
-                    icon="mdi-download-outline"
+                    @click="copyLink(file.fileName)"
-                    @click="downloadFile(file.pathName)"
                   >
-                    <q-tooltip>ดาวน์โหลดไฟล์</q-tooltip>
+                    <q-tooltip>คัดลอกลิ้งค์</q-tooltip>
                   </q-btn>
                 </div>
               </div>
@@ -121,7 +193,13 @@ function save() {
                 </q-file>
               </div>
               <div class="col-1 self-center text-center q-pl-none">
-                <q-btn flat round dense color="primary" icon="mdi-upload"
+                <q-btn
+                  flat
+                  round
+                  dense
+                  color="primary"
+                  icon="mdi-upload"
+                  @click="upLoadFile"
                   ><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
                 >
               </div>
@@ -168,8 +246,8 @@ function save() {
               </q-list>
             </div>
             <div class="col-12" v-else>
-                <q-card class="q-pa-md" bordered> ไม่มีรายการเอกสาร </q-card>
+              <q-card class="q-pa-md" bordered> ไม่มีรายการเอกสาร </q-card>
-              </div>
+            </div>
           </div>
         </div>
       </q-card>

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

@@ -1,20 +1,45 @@
 <script setup lang="ts">
-import { ref } from "vue";
+import { ref, reactive } from "vue";
 import ViewPDF from "@/modules/12_evaluatePersonal/components/Detail/viewstep/viewPDF.vue";
+import { useCounterMixin } from "@/stores/mixin";
+import { useRouter, useRoute } from "vue-router";
+import type { FormCommand } from "@/modules/12_evaluatePersonal/interface/index/evalute";
 
+const mixin = useCounterMixin();
+const { date2Thai, showLoader, hideLoader, messageError, success } = mixin;
+const AnnouncementDate = ref<string | null>(date2Thai(new Date()));
 const fileEvaluation1 = ref<any>();
 
 const pdfSrc = ref<any>();
-
 const modalView = ref<boolean>(false);
+const emit = defineEmits(["update:form"]);
+const formCommand = reactive<FormCommand>({
+  elementaryFullName: "",
+  elementaryPosition: "",
+  abovelevelFullname: "",
+  abovelevelPosition: "",
+});
+
 function onClickViewPDF(file: any) {
   pdfSrc.value = file.webkitRelativePath;
   modalView.value = true;
 }
+
+const updateInput = (value: any) => {
+  emit("update:form", value, ref);
+};
 </script>
 
 <template>
   <div class="row q-col-gutter-md">
+    <div class="col-12">
+      <q-banner class="text-weight-bold text-red-14 bg-red-2 text-center">
+        <div class="text-weight-bold">
+          <q-icon name="info_outline" color="red-14" size="24px" />
+          ประกาศเมื่อวันที่ {{ AnnouncementDate }}
+        </div>
+      </q-banner>
+    </div>
     <div class="col-6">
       <q-card bordered style="border: 1px solid #d6dee1">
         <div class="text-weight-medium bg-grey-1 q-py-sm q-px-md">
@@ -73,6 +98,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="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 -->