hrms-user/src/modules/06_evaluate/components/ExpertPageDetail.vue

<script setup lang="ts">
import { ref, reactive, watch, onMounted } from "vue";
import { useRouter, useRoute } from "vue-router";
import { useQuasar } from "quasar";
import axios from "axios";

import http from "@/plugins/http";
import config from "@/app.config";
import genReport from "@/plugins/genreport";
import { useCounterMixin } from "@/stores/mixin";

import type {
  FormRef,
  FormCommand,
  FormData,
} from "@/modules/06_evaluate/interface/evalute";

const $q = useQuasar();
const mixin = useCounterMixin();
const {
  dialogConfirm,
  messageError,
  showLoader,
  hideLoader,
  date2Thai,
  success,
} = mixin;
const router = useRouter();
const route = useRoute();

const evaluateId = ref<string>(route.params.id as string);
const profile = ref<any>();

/** form ผู้เซ็นเอกสาร*/
const formCommand = reactive<FormCommand>({
  commanderFullname: "", //ผู้บังคับบัญชาชั้นต้น
  commanderPosition: "", //ตำแหน่ง ผู้บังคับบัญชาชั้นต้น
  commanderAboveFullname: "", //ผู้บังคับบัญชาเหนือขึ้นไป 1 ระดับ
  commanderAbovePosition: "", //ตำแหน่ง ผู้บังคับบัญชาเหนือขึ้นไป 1 ระดับ
  author: "", //เจ้าของผลงาน
  subject: "", //ชื่อผลงาน
  assignedPosition: "",
});

const formData = reactive<FormData>({
  id: "",
  subject: "", // ชื่อผลงาน
  author: "", //เจ้าของผลงาน
  commanderFullname: "", //ผู้บังคับบัญชาชั้นต้น
  commanderPosition: "", //ตำแหน่ง ผู้บังคับบัญชาชั้นต้น
  commanderAboveFullname: "", //ผู้บังคับบัญชาเหนือขึ้นไป 1 ระดับ
  commanderAbovePosition: "", //ตำแหน่ง ผู้บังคับบัญชาเหนือขึ้นไป 1 ระดับ
});

const downloadFile1 = ref<string>("");
const downloadFile2 = ref<string>("");
const downloadFile3 = ref<string>("");
const downloadFile4 = ref<string>("");
const downloadFile5 = ref<string>("");
const downloadFile6 = ref<string>("");

/** ตัวแปร file*/
const fileEvaluation1 = ref<File | null>();
const fileEvaluation2 = ref<File | null>();
const fileEvaluation3 = ref<File | null>();
const fileEvaluation4 = ref<File | null>();
const fileEvaluation5 = ref<File | null>();
const fileEvaluation6 = ref<File | null>();

const fileEvaluation1Ref = ref<object | null>(null);
const fileEvaluation2Ref = ref<object | null>(null);
const fileEvaluation3Ref = ref<object | null>(null);
const fileEvaluation4Ref = ref<object | null>(null);
const fileEvaluation5Ref = ref<object | null>(null);
const fileEvaluation6Ref = ref<object | null>(null);
const performanceRef = ref<object | null>(null);
const performanceOwnerRef = ref<object | null>(null);

const subjectRef = ref<Object | null>(null);
const authorRef = ref<Object | null>(null);
const commanderFullnameRef = ref<Object | null>(null);
const commanderPositionRef = ref<Object | null>(null);
const commanderAboveFullnameRef = ref<Object | null>(null);
const commanderAbovePositionRef = ref<Object | null>(null);

/** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
const objectRef: FormRef = {
  subject: subjectRef,
  author: authorRef,
  commanderFullname: commanderFullnameRef,
  commanderPosition: commanderPositionRef,
  commanderAboveFullname: commanderAboveFullnameRef,
  commanderAbovePosition: commanderAbovePositionRef,
};

/**
 * function ดาวน์โหลดไฟล์
 * @param fileName ชื่อไฟล์
 */
async function downloadFile(fileName: string) {
  showLoader();
  await http
    .get(
      config.API.loadFileDocument(
        "ประเมินเชี่ยวชาญ",
        evaluateId.value,
        fileName
      )
    )
    .then((res) => {
      if (fileName === "1-แบบพิจารณาคุณสมบัติบุคคล") {
        downloadFile1.value = res.data.downloadUrl;
      } else if (fileName === "2-แบบแสดงรายละเอียดการเสนอผลงาน") {
        downloadFile2.value = res.data.downloadUrl;
      } else if (
        fileName ===
        "3-แบบตรวจสอบความถูกต้องครบถ้วนของข้อมูลเพื่อประกอบการคัดเลือกบุคคล (เอกสารแบบ ก)"
      ) {
        downloadFile3.value = res.data.downloadUrl;
      } else if (fileName === "4-แบบประเมินคุณลักษณะบุคคล") {
        downloadFile4.value = res.data.downloadUrl;
      } else if (
        fileName === "5-แบบสรุปข้อมูลของผู้ขอรับการคัดเลือก (เอกสารหมายเลข 9)"
      ) {
        downloadFile5.value = res.data.downloadUrl;
      } else if (fileName === "6-ผลงานที่จะส่งประเมิน (เอกสารหมายเลข 11)") {
        downloadFile6.value = res.data.downloadUrl;
      }
    })
    .finally(() => {
      hideLoader();
    });
}

function onSubmit() {
  dialogConfirm($q, () => {
    showLoader();
    http
      .post(config.API.evaluationExpertise, formData)
      .then((res) => {})
      .catch((err) => {
        messageError($q, err);
      })
      .finally(async () => {
        await close();
        await hideLoader();
      });
  });
}

/** ฟังก์ชั่นตรวจสอบความถูกต้องของข้อมูลในฟอร์ม */
function validateForm() {
  const hasError = [];
  for (const key in objectRef) {
    if (Object.prototype.hasOwnProperty.call(objectRef, key)) {
      const property = objectRef[key];
      if (property.value && typeof property.value.validate === "function") {
        const isValid = property.value.validate();
        hasError.push(isValid);
      }
    }
  }
  if (hasError.every((result) => result === true)) {
    onSubmit();
  } else {
  }
}

/**
 * funcion ดาวน์โหลดไฟล์
 * @param tp templatname
 * @param templateName
 * @param fileName ชือ่ไฟล์
 */
async function onClickDowloadFile(
  tp: string,
  templateName: string,
  fileName: string
) {
  showLoader();
  let educations: any = [];
  if (profile.value != null) {
    profile.value.educations.map((e: any) => {
      educations.push({
        educationLevel: e.educationLevel ?? "",
        finishYear:
          e.finishDate == null
            ? ""
            : new Date(e.finishDate).getFullYear() + 543,
        institute: e.institute ?? "",
      });
    });
  }
  let certificates: any = [];
  if (profile.value != null) {
    profile.value.certificates.map((e: any) => {
      certificates.push({
        certificateNo: e.certificateNo ?? "",
        certificateType: e.certificateType ?? "",
        issuer: e.issuer ?? "",
      });
    });
  }
  let salaries: any = [];
  if (profile.value != null) {
    profile.value.salaries.map((e: any) => {
      salaries.push({
        date: e.date == null ? "" : date2Thai(new Date(e.date)),
        position: e.position ?? "",
        amount: e.amount ?? "",
      });
    });
  }
  let trainings: any = [];
  if (profile.value != null) {
    profile.value.trainings.map((e: any) => {
      trainings.push({
        yearly: e.yearly ?? "",
        startDate: e.startDate == null ? "" : date2Thai(new Date(e.startDate)),
        endDate: e.endDate == null ? "" : date2Thai(new Date(e.endDate)),
        name: e.name ?? "",
        topic: e.topic ?? "",
      });
    });
  }
  const data = Object.assign(
    { educations: educations },
    { certificates: certificates },
    { salaries: salaries },
    { trainings: trainings },
    { fullName: profile.value == null ? "" : profile.value.fullName },
    { position: profile.value == null ? "" : profile.value.position },
    { positionLevel: profile.value == null ? "" : profile.value.positionLevel },
    { posNo: profile.value == null ? "" : profile.value.posNo },
    { oc: profile.value == null ? "" : profile.value.oc },
    {
      birthDate:
        profile.value == null ? "" : date2Thai(profile.value.birthDate),
    },
    { govAge: profile.value == null ? "" : profile.value.govAge },
    {
      positionLevelNew:
        profile.value == null
          ? ""
          : profile.value.type == "EXPERT"
          ? "ชำนาญการ"
          : "ชำนาญการพิเศษ",
    },
    tp === "EV1_005" || tp === "EV1_007" ? { organizationName: "-" } : null,
    tp === "EV1_007" ? { positionName: "-" } : null,
    tp === "EV1_007" ? { positionLeaveName: "-" } : null
  );
  const body = {
    template: tp,
    reportName: templateName,
    data: data,
  };
  await genReport(body, fileName); //สร้างไฟล์ต้นแบบ
}

/**
 * function fetch ลิงก์อัปโหลดไฟล์
 * @param volume เล่ม
 * @param id  evaluate ID
 * @param type ประเภทไฟล์
 * @param file ไฟล์
 */
async function fetchPathUpload(
  volume: string,
  id: string | undefined,
  type: string,
  file: any
) {
  const body = {
    fileList: {
      fileName: type,
      metadata: {
        subject: formCommand.subject,
        author: formCommand.author,
      },
    },
  };

  if (id && file) {
    showLoader();
    await http
      .post(config.API.loadPathDocument(volume, id), body)
      .then((res) => {
        const foundKey: string | undefined = Object.keys(res.data).find(
          (key) =>
            res.data[key]?.fileName !== undefined &&
            res.data[key]?.fileName !== ""
        );
        foundKey && uploadfile(res.data[foundKey]?.uploadUrl, file);
      })
      .catch((err) => {
        messageError($q, err);
      })
      .finally(() => {
        downloadFile(type);
        hideLoader();
      });
  }
}

/**
 *  functoin อัปโหลดไฟล์
 * @param uploadUrl  link อัปโหลด
 * @param file  ไฟล์
 */
async function uploadfile(uploadUrl: string, file: any) {
  showLoader();
  await axios
    .put(uploadUrl, file, {
      headers: {
        "Content-Type": file.type,
      },
    })
    .then(() => {
      success($q, "อัปโหลไฟล์สำเร็จ");
    })
    .catch((err) => {
      messageError($q, err);
    })
    .finally(() => {
      hideLoader();
    });
}

function getData() {
  showLoader();
  http
    .get(config.API.evaluationExpertise + `/${evaluateId.value}`)
    .then((res) => {
      const data = res.data.result;
      formData.id = data.id;
      formData.commanderFullname = data.commanderFullname;
      formData.commanderPosition = data.commanderPosition;
      formData.commanderAboveFullname = data.commanderAboveFullname;
      formData.commanderAbovePosition = data.commanderAbovePosition;
      formData.author = data.author;
      formData.subject = data.subject;
    })
    .catch((e) => {
      messageError($q, e);
    })
    .finally(() => {
      hideLoader();
    });
}

onMounted(() => {
  getData();
  downloadFile("1-แบบพิจารณาคุณสมบัติบุคคล");
  downloadFile("2-แบบแสดงรายละเอียดการเสนอผลงาน");
  downloadFile(
    "3-แบบตรวจสอบความถูกต้องครบถ้วนของข้อมูลเพื่อประกอบการคัดเลือกบุคคล (เอกสารแบบ ก)"
  );
  downloadFile("4-แบบประเมินคุณลักษณะบุคคล");
  downloadFile("5-แบบสรุปข้อมูลของผู้ขอรับการคัดเลือก (เอกสารหมายเลข 9)");
  downloadFile("6-ผลงานที่จะส่งประเมิน (เอกสารหมายเลข 11)");
});
</script>

<template>
  <q-form @submit.prevent="validateForm">
    <div class="col-12 row justify-center">
      <div class="col-xs-12 col-sm-12 col-md-11 q-mb-sm">
        <div class="toptitle text-white col-12 row items-center">
          <q-btn
            icon="mdi-arrow-left"
            unelevated
            round
            dense
            flat
            color="primary"
            class="q-mr-sm"
            @click="router.push(`/evaluate`)"
          />
          <div>ประเมินเชี่ยวชาญ</div>
        </div>
      </div>

      <div class="col-xs-12 col-sm-12 col-md-11 row q-col-gutter-md">
        <div class="col-12">
          <q-card bordered>
            <div class="col-12 row q-pa-md q-col-gutter-y-md">
              <div class="col-12">
                <q-card bordered class="col-12">
                  <div
                    class="text-weight-medium bg-grey-1 col-12 q-py-sm q-px-md"
                  >
                    ผลงาน
                  </div>
                  <div class="col-12"><q-separator /></div>
                  <div class="col-12 q-pa-sm">
                    <div class="row q-col-gutter-sm">
                      <q-input
                        ref="subjectRef"
                        dense
                        readonly
                        class="col-xs-12 col-sm-6"
                        outlined
                        label="ชื่อผลงาน"
                        v-model="formData.subject"
                        :rules="[(val:string) => !!val || `${'กรุณากรอกชื่อผลงาน'}`]"
                        lazy-rules
                        hide-bottom-space
                      />
                      <q-input
                        ref="authorRef"
                        class="col-xs-12 col-sm-6"
                        dense
                        readonly
                        outlined
                        v-model="formData.author"
                        label="เจ้าของผลงาน"
                        :rules="[
                          (val:string) => !!val || `${'กรุณากรอกเจ้าของผลงาน'}`,
                        ]"
                        lazy-rules
                        hide-bottom-space
                      />
                    </div>
                  </div>
                </q-card>
              </div>

              <!-- เลือกผู้เซ็นเอกสาร -->
              <div class="col-12">
                <q-card bordered class="col-12">
                  <div class="text-weight-medium bg-grey-1 q-py-sm q-px-md">
                    เลือกผู้เซ็นเอกสาร
                  </div>
                  <div class="col-12"><q-separator /></div>
                  <div class="col-12 q-pa-sm">
                    <div class="row q-col-gutter-sm">
                      <div class="col-xs-12 col-sm-12 row">
                        <div class="text-weight-medium q-pt-xs q-pl-sm">
                          ผู้บังคับบัญชาชั้นต้น
                        </div>
                        <div class="row col-12 q-col-gutter-sm q-pa-sm">
                          <q-input
                            ref="commanderFullnameRef"
                            dense
                            class="col-xs-12 col-sm-6"
                            readonly
                            outlined
                            label="ชื่อ-นามสกุล"
                            v-model="formData.commanderFullname"
                            :rules="[
                              (val:string) => !!val || `${'กรุณากรอกชื่อ-นามสกุล'}`,
                            ]"
                            lazy-rules
                            hide-bottom-space
                          />
                          <q-input
                            ref="commanderPositionRef"
                            class="col-xs-12 col-sm-6"
                            readonly
                            dense
                            outlined
                            v-model="formData.commanderPosition"
                            label="ตำแหน่ง"
                            :rules="[(val:string) => !!val || `${'กรุณากรอกตำแหน่ง'}`]"
                            lazy-rules
                            hide-bottom-space
                          />
                        </div>
                      </div>
                    </div>
                    <div class="row q-col-gutter-sm col-12">
                      <div class="col-xs-12 col-sm-12 row">
                        <div class="text-weight-medium q-pl-sm q-pt-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
                            readonly
                            v-model="formData.commanderAboveFullname"
                            label="ชื่อ-นามสกุล"
                            :rules="[
                              (val:string) => !!val || `${'กรุณากรอกชื่อ-นามสกุล'}`,
                            ]"
                            lazy-rules
                            hide-bottom-space
                          />
                          <q-input
                            ref="commanderAbovePositionRef"
                            class="col-xs-12 col-sm-6"
                            dense
                            readonly
                            outlined
                            v-model="formData.commanderAbovePosition"
                            label="ตำแหน่ง"
                            :rules="[(val:string) => !!val || `${'กรุณากรอกตำแหน่ง'}`]"
                            lazy-rules
                            hide-bottom-space
                          />
                        </div>
                      </div>
                    </div>
                  </div>
                </q-card>
              </div>
              <div class="col-12">
                <div class="row q-col-gutter-sm">
                  <!-- แบบพิจารณาคุณสมบัติบุคคล -->
                  <div class="col-6">
                    <q-card bordered>
                      <div
                        class="text-weight-medium bg-grey-1 q-py-sm q-pl-md q-pr-sm col-12 row items-center"
                      >
                        <div>แบบพิจารณาคุณสมบัติบุคคล</div>
                        <q-space />
                        <div>
                          <q-btn
                            flat
                            dense
                            icon="download"
                            color="indigo"
                            @click="
                              onClickDowloadFile(
                                'EV1_005',
                                'template-1',
                                'แบบพิจารณาคุณสมบัติบุคคล'
                              )
                            "
                          >
                            <q-tooltip> ดาวน์โหลดต้นแบบ </q-tooltip></q-btn
                          >
                        </div>
                        <div>
                          <q-btn
                            v-if="downloadFile1 != ''"
                            :href="downloadFile1"
                            target="_blank"
                            class="q-ml-sm"
                            color="blue"
                            flat
                            dense
                            icon="visibility"
                          >
                            <q-tooltip> ดูไฟล์เอกสาร </q-tooltip></q-btn
                          >
                        </div>
                      </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">
                            <q-file
                              ref="fileEvaluation1Ref"
                              v-model="fileEvaluation1"
                              class="col-xs-12 col-sm-12"
                              outlined
                              dense
                              lazy-rules
                              hide-bottom-space
                              accept=".pdf"
                              :rules="
                                downloadFile1 === ''
                                  ? [(val:string) => !!val || 'กรุณาเลือกไฟล์']
                                  : []
                              "
                            >
                              <template v-slot:prepend>
                                <q-icon name="attach_file" />
                              </template>
                              <template v-slot:after>
                                <q-btn
                                  flat
                                  round
                                  dense
                                  color="primary"
                                  icon="mdi-upload"
                                  @click="
                                    fetchPathUpload(
                                      'ประเมินเชี่ยวชาญ',
                                      evaluateId,
                                      '1-แบบพิจารณาคุณสมบัติบุคคล',
                                      fileEvaluation1
                                    )
                                  "
                                  ><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
                                >
                              </template>
                            </q-file>
                          </div>
                        </div>
                      </div>
                    </q-card>
                  </div>

                  <!-- แบบแสดงรายละเอียดการเสนอผลงาน     -->
                  <div class="col-6">
                    <q-card bordered>
                      <div
                        class="text-weight-medium bg-grey-1 q-py-sm q-pl-md q-pr-sm col-12 row items-center"
                      >
                        <div>แบบแสดงรายละเอียดการเสนอผลงาน</div>
                        <q-space />
                        <div>
                          <q-btn
                            flat
                            dense
                            icon="download"
                            color="indigo"
                            @click="
                              onClickDowloadFile(
                                'EV1_006',
                                'template-2',
                                'แบบแสดงรายละเอียดการเสนอผลงาน'
                              )
                            "
                          >
                            <q-tooltip> ดาวน์โหลดต้นแบบ </q-tooltip></q-btn
                          >
                        </div>
                        <div>
                          <q-btn
                            v-if="downloadFile2 != ''"
                            :href="downloadFile2"
                            target="_blank"
                            class="q-ml-sm"
                            color="blue"
                            flat
                            dense
                            icon="visibility"
                          >
                            <q-tooltip> ดูไฟล์เอกสาร </q-tooltip></q-btn
                          >
                        </div>
                      </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">
                            <q-file
                              ref="fileEvaluation2Ref"
                              v-model="fileEvaluation2"
                              class="col-12"
                              outlined
                              dense
                              lazy-rules
                              accept=".pdf"
                              hide-bottom-space
                              :rules="
                                downloadFile2 === ''
                                  ? [(val:string) => !!val || 'กรุณาเลือกไฟล์']
                                  : []
                              "
                            >
                              <template v-slot:prepend>
                                <q-icon name="attach_file" />
                              </template>
                              <template v-slot:after>
                                <q-btn
                                  flat
                                  round
                                  dense
                                  color="primary"
                                  icon="mdi-upload"
                                  @click="
                                    fetchPathUpload(
                                      'ประเมินเชี่ยวชาญ',
                                      evaluateId,
                                      '2-แบบแสดงรายละเอียดการเสนอผลงาน',
                                      fileEvaluation2
                                    )
                                  "
                                  ><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
                                >
                              </template>
                            </q-file>
                          </div>
                        </div>
                      </div>
                    </q-card>
                  </div>

                  <!-- แบบตรวจสอบความถูกต้องครบถ้วนของข้อมูลเพื่อประกอบการคัดเลือกบุคคล (เอกสารแบบ ก) -->
                  <div class="col-6">
                    <q-card bordered>
                      <div
                        class="col-12 row text-weight-medium bg-grey-1 q-py-sm q-pl-md q-pr-sm no-wrap"
                      >
                        <div>
                          แบบตรวจสอบความถูกต้องครบถ้วนของข้อมูลเพื่อประกอบการคัดเลือกบุคคล
                          (เอกสารแบบ ก.)
                        </div>
                        <q-space />
                        <div>
                          <q-btn
                            flat
                            dense
                            icon="download"
                            color="indigo"
                            @click="
                              onClickDowloadFile(
                                'EV1_007',
                                'template-3',
                                'แบบตรวจสอบความถูกต้องครบถ้วนของข้อมูลเพื่อประกอบการคัดเลือกบุคคล (เอกสารแบบ ก)'
                              )
                            "
                          >
                            <q-tooltip> ดาวน์โหลดต้นแบบ </q-tooltip></q-btn
                          >
                        </div>
                        <div v-if="downloadFile3 != ''">
                          <q-btn
                            :href="downloadFile3"
                            target="_blank"
                            flat
                            dense
                            icon="visibility"
                            class="q-ml-sm"
                            color="blue"
                          >
                            <q-tooltip> ดูไฟล์เอกสาร </q-tooltip></q-btn
                          >
                        </div>
                      </div>
                      <div class="col-12"><q-separator /></div>
                      <div class="row">
                        <div class="col-12 q-pa-sm">
                          <q-file
                            ref="fileEvaluation3Ref"
                            v-model="fileEvaluation3"
                            class="col-12"
                            outlined
                            dense
                            lazy-rules
                            hide-bottom-space
                            accept=".pdf"
                            :rules="
                              downloadFile3 === ''
                                ? [(val:string) => !!val || 'กรุณาเลือกไฟล์']
                                : []
                            "
                          >
                            <template v-slot:prepend>
                              <q-icon name="attach_file" />
                            </template>
                            <template v-slot:after>
                              <q-btn
                                flat
                                round
                                dense
                                color="primary"
                                icon="mdi-upload"
                                @click="
                                  fetchPathUpload(
                                    'ประเมินเชี่ยวชาญ',
                                    evaluateId,
                                    '3-แบบตรวจสอบความถูกต้องครบถ้วนของข้อมูลเพื่อประกอบการคัดเลือกบุคคล (เอกสารแบบ ก)',
                                    fileEvaluation3
                                  )
                                "
                                ><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
                              >
                            </template>
                          </q-file>
                        </div>
                      </div>
                    </q-card>
                  </div>

                  <!-- แบบสรุปข้อมูลของผู้ขอรับการคัดเลือก (เอกสารหมายเลข 9) -->
                  <div class="col-6">
                    <q-card bordered>
                      <div
                        class="col-12 row text-weight-medium bg-grey-1 q-py-sm q-pl-md q-pr-sm no-wrap"
                      >
                        <div class="col-7">
                          แบบสรุปข้อมูลของผู้ขอรับการคัดเลือก (เอกสารหมายเลข 9)
                        </div>
                        <q-space />
                        <div>
                          <q-btn
                            flat
                            dense
                            icon="download"
                            color="indigo"
                            @click="
                              onClickDowloadFile(
                                'EV1_009',
                                'template-5',
                                'แบบสรุปข้อมูลของผู้ขอรับการคัดเลือก (เอกสารหมายเลข 9)'
                              )
                            "
                            ><q-tooltip> ดาวน์โหลดต้นแบบ </q-tooltip></q-btn
                          >
                        </div>
                        <div>
                          <q-btn
                            v-if="downloadFile5 != ''"
                            :href="downloadFile5"
                            target="_blank"
                            flat
                            dense
                            icon="visibility"
                            class="q-ml-sm"
                            color="blue"
                          >
                            <q-tooltip> ดูไฟล์เอกสาร </q-tooltip></q-btn
                          >
                        </div>
                      </div>
                      <div class="col-12"><q-separator /></div>
                      <div class="row">
                        <div class="col-12 q-pa-sm">
                          <q-file
                            ref="fileEvaluation5Ref"
                            v-model="fileEvaluation5"
                            class="col-12"
                            outlined
                            dense
                            lazy-rules
                            accept=".pdf"
                            hide-bottom-space
                            :rules="
                              downloadFile5 === ''
                                ? [(val:string) => !!val || 'กรุณาเลือกไฟล์']
                                : []
                            "
                          >
                            <template v-slot:prepend>
                              <q-icon name="attach_file" />
                            </template>
                            <template v-slot:after>
                              <q-btn
                                flat
                                round
                                dense
                                color="primary"
                                icon="mdi-upload"
                                @click="
                                  fetchPathUpload(
                                    'ประเมินเชี่ยวชาญ',
                                    evaluateId,
                                    '5-แบบสรุปข้อมูลของผู้ขอรับการคัดเลือก (เอกสารหมายเลข 9)',
                                    fileEvaluation5
                                  )
                                "
                                ><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
                              >
                            </template>
                          </q-file>
                        </div>
                      </div>
                    </q-card>
                  </div>

                  <!-- แบบประเมินคุณลักษณะบุคคล -->
                  <div class="col-6">
                    <q-card bordered>
                      <div
                        class="col-12 row text-weight-medium bg-grey-1 q-py-sm q-pl-md q-pr-sm items-center"
                      >
                        <div>แบบประเมินคุณลักษณะบุคคล</div>
                        <q-space />
                        <div>
                          <q-btn
                            flat
                            dense
                            icon="download"
                            color="indigo"
                            @click="
                              onClickDowloadFile(
                                'EV1_008',
                                'template-4',
                                'แบบประเมินคุณลักษณะบุคคล'
                              )
                            "
                          >
                            <q-tooltip> ดาวน์โหลดต้นแบบ </q-tooltip></q-btn
                          >
                        </div>
                        <div>
                          <q-btn
                            v-if="downloadFile4 != ''"
                            :href="downloadFile4"
                            target="_blank"
                            flat
                            dense
                            icon="visibility"
                            class="q-ml-sm"
                            color="blue"
                          >
                            <q-tooltip> ดูไฟล์เอกสาร </q-tooltip></q-btn
                          >
                        </div>
                      </div>
                      <div class="col-12"><q-separator /></div>
                      <div class="row">
                        <div class="col-12 q-pa-sm">
                          <q-file
                            ref="fileEvaluation4Ref"
                            v-model="fileEvaluation4"
                            class="col-12"
                            outlined
                            dense
                            lazy-rules
                            hide-bottom-space
                            accept=".pdf"
                            :rules="
                              downloadFile4 === ''
                                ? [(val:string) => !!val || 'กรุณาเลือกไฟล์']
                                : []
                            "
                          >
                            <template v-slot:prepend>
                              <q-icon name="attach_file" />
                            </template>
                            <template v-slot:after>
                              <q-btn
                                flat
                                round
                                dense
                                color="primary"
                                icon="mdi-upload"
                                @click="
                                  fetchPathUpload(
                                    'ประเมินเชี่ยวชาญ',
                                    evaluateId,
                                    '4-แบบประเมินคุณลักษณะบุคคล',
                                    fileEvaluation4
                                  )
                                "
                                ><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
                              >
                            </template>
                          </q-file>
                        </div>
                      </div>
                    </q-card>
                  </div>

                  <!--ผลงานที่จะส่งประเมิน (เอกสารหมายเลข 11) -->
                  <div class="col-6">
                    <q-card bordered>
                      <div
                        class="col-12 row text-weight-medium bg-grey-1 q-py-sm q-pl-md q-pr-sm items-center"
                      >
                        <div>ผลงานที่จะส่งประเมิน (เอกสารหมายเลข 11)</div>
                        <q-space />
                        <div>
                          <q-btn
                            flat
                            dense
                            icon="download"
                            color="indigo"
                            @click="
                              onClickDowloadFile(
                                'EV1_010',
                                'template-6',
                                'ผลงานที่จะส่งประเมิน (เอกสารหมายเลข 11)'
                              )
                            "
                          >
                            <q-tooltip> ดาวน์โหลดต้นแบบ </q-tooltip></q-btn
                          >
                        </div>
                        <div>
                          <q-btn
                            v-if="downloadFile6 != ''"
                            :href="downloadFile6"
                            target="_blank"
                            flat
                            dense
                            icon="visibility"
                            class="q-ml-sm"
                            color="blue"
                          >
                            <q-tooltip> ดูไฟล์เอกสาร </q-tooltip></q-btn
                          >
                        </div>
                      </div>
                      <div class="col-12"><q-separator /></div>
                      <div class="row">
                        <div class="col-12 q-pa-sm">
                          <q-file
                            ref="fileEvaluation6Ref"
                            v-model="fileEvaluation6"
                            class="col-12"
                            outlined
                            hide-bottom-space
                            dense
                            lazy-rules
                            accept=".pdf"
                            :rules="
                              downloadFile6 === ''
                                ? [(val:string) => !!val || 'กรุณาเลือกไฟล์']
                                : []
                            "
                          >
                            <template v-slot:prepend>
                              <q-icon name="attach_file" />
                            </template>
                            <template v-slot:after>
                              <q-btn
                                flat
                                round
                                dense
                                color="primary"
                                icon="mdi-upload"
                                @click="
                                  fetchPathUpload(
                                    'ประเมินเชี่ยวชาญ',
                                    evaluateId,
                                    '6-ผลงานที่จะส่งประเมิน (เอกสารหมายเลข 11)',
                                    fileEvaluation6
                                  )
                                "
                                ><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
                              >
                            </template>
                          </q-file>
                        </div>
                      </div>
                    </q-card>
                  </div>
                </div>
              </div>
            </div>
          </q-card>
        </div>
      </div>
    </div>
  </q-form>
</template>