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

<script setup lang="ts">
import { ref, reactive, watch, onMounted } from "vue";
import { useRouter, useRoute } from "vue-router";
import { useCounterMixin } from "@/stores/mixin";
import { useQuasar } from "quasar";
import type { FormRef } from "@/modules/06_evaluate/interface/evalute";
import http from "@/plugins/http";
import config from "@/app.config";

import genReport from "@/plugins/genreport";

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

const formData = reactive<any>({
  subject: "",
  author: "",
  commanderFullname: "",
  commanderPosition: "",
  commanderAboveFullname: "",
  commanderAbovePosition: "",
});

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,
};

const files = [
  {
    id: "file1",
    fileName: "แบบพิจารณาคุณสมบัติบุคคล",
    pathName: "1-แบบพิจารณาคุณสมบัติบุคคล",
    tp: "EV1_005",
    templateName: "template-1",
    nameFile: "แบบพิจารณาคุณสมบัติบุคคล",
  },
  {
    id: "file2",
    fileName: "แบบแสดงรายละเอียดการเสนอผลงาน",
    pathName: "2-แบบแสดงรายละเอียดการเสนอผลงาน",
    tp: "EV1_006",
    templateName: "template-2",
    nameFile: "แบบแสดงรายละเอียดการเสนอผลงาน",
  },
  {
    id: "file3",
    fileName:
      "แบบตรวจสอบความถูกต้องครบถ้วนของข้อมูลเพื่อประกอบการคัดเลือกบุคคล (เอกสารแบบ ก)",
    pathName:
      "3-แบบตรวจสอบความถูกต้องครบถ้วนของข้อมูลเพื่อประกอบการคัดเลือกบุคคล (เอกสารแบบ ก)",
    tp: "EV1_007",
    templateName: "template-3",
    nameFile:
      "แบบตรวจสอบความถูกต้องครบถ้วนของข้อมูลเพื่อประกอบการคัดเลือกบุคคล (เอกสารแบบ ก)",
  },
  {
    id: "file4",
    fileName: "แบบประเมินคุณลักษณะบุคคล",
    pathName: "4-แบบประเมินคุณลักษณะบุคคล",
    tp: "EV1_008",
    templateName: "template-4",
    nameFile: "แบบประเมินคุณลักษณะบุคคล",
  },
  {
    id: "file5",
    fileName: "แบบสรุปข้อมูลของผู้ขอรับการคัดเลือก (เอกสารหมายเลข 9)",
    pathName: "5-แบบสรุปข้อมูลของผู้ขอรับการคัดเลือก (เอกสารหมายเลข 9)",
    tp: "EV1_009",
    templateName: "template-5",
    nameFile: "แบบสรุปข้อมูลของผู้ขอรับการคัดเลือก (เอกสารหมายเลข 9)",
  },
  {
    id: "file6",
    fileName: "ผลงานที่จะส่งประเมิน (เอกสารหมายเลข 11)",
    pathName: "6-ผลงานที่จะส่งประเมิน (เอกสารหมายเลข 11)",
    tp: "EV1_010",
    templateName: "template-6",
    nameFile: "ผลงานที่จะส่งประเมิน (เอกสารหมายเลข 11)",
  },
];

function onSubmit() {
  dialogConfirm($q, () => {
    showLoader();
    http
      .post(config.API.evaluationExpertise, formData)
      .then((res) => {
        router.push(`/evaluate/detail/expertise/${res.data.result.id}`);
      })
      .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); //สร้างไฟล์ต้นแบบ
}
</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.go(-1)"
          />
          <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
                        class="col-xs-12 col-sm-6"
                        outlined
                        label="ชื่อผลงาน"
                        v-model="formData.subject"
                        :rules="[(val) => !!val || `${'กรุณากรอกชื่อผลงาน'}`]"
                        lazy-rules
                        hide-bottom-space
                      />
                      <q-input
                        ref="authorRef"
                        class="col-xs-12 col-sm-6"
                        dense
                        outlined
                        v-model="formData.author"
                        label="เจ้าของผลงาน"
                        :rules="[
                          (val) => !!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"
                            outlined
                            label="ชื่อ-นามสกุล"
                            v-model="formData.commanderFullname"
                            :rules="[
                              (val) => !!val || `${'กรุณากรอกชื่อ-นามสกุล'}`,
                            ]"
                            lazy-rules
                            hide-bottom-space
                          />
                          <q-input
                            ref="commanderPositionRef"
                            class="col-xs-12 col-sm-6"
                            dense
                            outlined
                            v-model="formData.commanderPosition"
                            label="ตำแหน่ง"
                            :rules="[(val) => !!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
                            v-model="formData.commanderAboveFullname"
                            label="ชื่อ-นามสกุล"
                            :rules="[
                              (val) => !!val || `${'กรุณากรอกชื่อ-นามสกุล'}`,
                            ]"
                            lazy-rules
                            hide-bottom-space
                          />
                          <q-input
                            ref="commanderAbovePositionRef"
                            class="col-xs-12 col-sm-6"
                            dense
                            outlined
                            v-model="formData.commanderAbovePosition"
                            label="ตำแหน่ง"
                            :rules="[(val) => !!val || `${'กรุณากรอกตำแหน่ง'}`]"
                            lazy-rules
                            hide-bottom-space
                          />
                        </div>
                      </div>
                    </div>
                  </div>
                </q-card>
              </div>

              <!-- <div class="col-12">
                <q-card bordered>
                  <div class="text-weight-medium bg-grey-1 q-py-sm q-px-md">
                    ดาวน์โหลดเอกสาร
                  </div>
                  <div class="col-12"><q-separator /></div>

                  <q-list
                    v-for="file in files"
                    :key="file.id"
                    class="full-width"
                    bordered
                  >
                    <q-item clickable v-ripple>
                      <q-item-section class="text-grey-9">{{
                        file.fileName
                      }}</q-item-section>
                      <q-item-section avatar>
                        <div class="row">
                          <div>
                            <q-btn
                              dense
                              flat
                              round
                              size="12px"
                              color="blue"
                              icon="mdi-download"
                              @click="
                                onClickDowloadFile(
                                  file.tp,
                                  file.templateName,
                                  file.nameFile
                                )
                              "
                            >
                              <q-tooltip>ดาวน์โหลดไฟล์</q-tooltip>
                            </q-btn>
                          </div>
                        </div>
                      </q-item-section>
                    </q-item>
                  </q-list>
                </q-card>
              </div> -->
            </div>
            <q-separator />

            <q-card-actions align="right">
              <q-btn label="บันทึกข้อมูล" color="secondary" type="submit"
                ><q-tooltip>บันทึกข้อมูล</q-tooltip></q-btn
              >
            </q-card-actions>
          </q-card>
        </div>
      </div>
    </div>
  </q-form>
</template>