hrms-user/src/modules/08_KPI/views/form.vue

<script setup lang="ts">
import { ref, onMounted, reactive, computed } from "vue";
import { useRoute, useRouter } from "vue-router";
import { useQuasar } from "quasar";
import genReport from "@/plugins/genreport";
import axios from "axios";

import http from "@/plugins/http";
import config from "@/app.config";
import { useCounterMixin } from "@/stores/mixin";
import { useKpiDataStore } from "@/modules/08_KPI/store";

import type { FormProfile } from "@/modules/08_KPI/interface/request/index";
import type {
  DataOptions,
  EvaluatorType,
} from "@/modules/08_KPI/interface/index/Main";
import type { EvaOptionType } from "@/modules/08_KPI/interface/response/index";

import TabMain from "@/modules/08_KPI/components/Tab/TabMain.vue";
import DialogHeader from "@/components/DialogHeader.vue";
import DialogGovernment from "@/modules/08_KPI/components/Tab/Dialog/DialogGovernment.vue";

interface ArrayFileList {
  id: string;
  pathName: string;
  fileName: string;
}

const $q = useQuasar();
const store = useKpiDataStore();
const mixin = useCounterMixin();
const {
  showLoader,
  hideLoader,
  messageError,
  dialogConfirm,
  success,
  findOrgName,
  findOrgNameHtml,
  dialogRemove,
} = mixin;
const route = useRoute();
const router = useRouter();
const id = ref<string>(route.params.id as string);

const modalUpload = ref<boolean>(false);
const fileUpload = ref<any>(null);
const fileList = ref<ArrayFileList[]>([]);

const modalGovernment = ref<boolean>(false); // ตัวแปร dialog ช่วยราชการ
const modalEdit = ref<boolean>(false); // ตัวแปร dialog แก้ไขผู้ประเมิน
const isReadonly = <boolean>(route.name === "KPIEditEvaluator" ? true : false);

const evaluatorIdOp = ref<DataOptions[]>([]); // ตัวแปรเก็บ option ผู้ประเมิน
const commanderIdOp = ref<DataOptions[]>([]); // ตัวแปรเก็บ option ผู้บังคับบัญชา
const commanderHighOp = ref<DataOptions[]>([]); // ตัวแปรเก็บ option ผู้บังคับบัญชาเหนือไปอีกขั้น

const evaluatorIdMainOp = ref<DataOptions[]>([]); // ตัวแปรเก็บ option ผู้ประเมิน
const commanderIdMainOp = ref<DataOptions[]>([]); // ตัวแปรเก็บ option ผู้บังคับบัญชา
const commanderHighMainOp = ref<DataOptions[]>([]); // ตัวแปรเก็บ option ผู้บังคับบัญชาเหนือไปอีกขั้น

const evaluatorId = ref<any>(null); // ตัวแปรเก็บ id ผู้ประเมิน
const commanderId = ref<any>(null); // ตัวแปรเก็บ id ผู้บังคับบัญชา
const commanderHighId = ref<any>(null); // ตัวแปรเก็บ id ผู้บังคับบัญชาเหนือไปอีกขั้น

const formProfile = reactive<FormProfile>({
  fullName: "",
  position: "",
  type: "",
  level: "",
  status: "",
  result: "",
  score: "-",
  avartar: "",
});

/** ฟังชั่นดึงข้อมูล ผู้ประเมิน */
async function fetchEvaluation() {
  await http
    .get(config.API.kpiEvaluation + `/${id.value}`)
    .then(async (res) => {
      const data = await res.data.result;
      store.dataEvaluation = await res.data.result;
      formProfile.status = store.convertStatus(data.evaluationStatus);
      formProfile.result = store.convertResults(data.evaluationResults);
      store.checkCompetencyDefaultCompetencyLevel();
      await getAvatar(data.profileId);
    })
    .catch((e) => {
      messageError($q, e);
    });
}

async function getAvatar(id: string) {
  await http
    .get(config.API.orgCheckAvatar(id))
    .then(async (res) => {
      const data = await res.data.result;
      if (data.avatarName) {
        await fetchProfile(id, data.avatarName);
      }
    })
    .catch((e) => {
      messageError($q, e);
    });
}

/** ดึงข้อมูล เพื่อเก็บรูปโปรไฟล์ */
async function fetchProfile(id: string, avatarName: string) {
  http
    .get(config.API.fileByFile("ทะเบียนประวัติ", "โปรไฟล์", id, avatarName))
    .then(async (res) => {
      store.dataEvaluation.avartar = res.data.downloadUrl;
    });
}

/** เปิด dialog แก้ไขผู้ประเมิน */
function openEvaluator() {
  modalEdit.value = true;
  getOrgOp();
}

/** ปิด dialog */
function close() {
  modalEdit.value = false;
  evaluatorId.value = null;
  commanderId.value = null;
  commanderHighId.value = null;
}

/** บันทึกข้อมูล */
function onSubmit() {
  dialogConfirm($q, () => {
    if (id.value) {
      showLoader();
      http
        .put(config.API.kpiEvaluationCheck + `/${id.value}`, {
          evaluatorId: evaluatorId.value ? evaluatorId.value.id : null,
          commanderId: commanderId.value ? commanderId.value.id : null,
          commanderHighId: commanderHighId.value
            ? commanderHighId.value.id
            : null,
        })
        .then(async () => {
          await Promise.all([fetchEvaluation(), getOrgOp()]);
          success($q, "บันทึกสำเร็จ");
          close();
        })
        .catch((e) => {
          messageError($q, e);
        })
        .finally(() => {
          hideLoader();
        });
    }
  });
}

/** ดึงข้อมูล ผู้ประเมิน */
async function getOrgOp() {
  http
    .get(config.API.Kpiorg)
    .then((res) => {
      const data = res.data.result;
      evaluatorIdMainOp.value = data.caregiver.map((i: EvaOptionType) => ({
        id: i.id,
        name: `${i.prefix}${i.firstName} ${i.lastName}`,
      }));
      commanderIdMainOp.value = data.commander.map((i: EvaOptionType) => ({
        id: i.id,
        name: `${i.prefix}${i.firstName} ${i.lastName}`,
      }));
      commanderHighMainOp.value = data.chairman.map((i: EvaOptionType) => ({
        id: i.id,
        name: `${i.prefix}${i.firstName} ${i.lastName}`,
      }));

      evaluatorId.value = data.caregiver
        .map((i: EvaOptionType) => ({
          id: i.id,
          name: `${i.prefix}${i.firstName} ${i.lastName}`,
        }))
        .find((i: EvaOptionType) => i.id == store.dataEvaluation.evaluatorId);
      commanderId.value = data.commander
        .map((i: EvaOptionType) => ({
          id: i.id,
          name: `${i.prefix}${i.firstName} ${i.lastName}`,
        }))
        .find((i: EvaOptionType) => i.id == store.dataEvaluation.commanderId);
      commanderHighId.value = data.chairman
        .map((i: EvaOptionType) => ({
          id: i.id,
          name: `${i.prefix}${i.firstName} ${i.lastName}`,
        }))
        .find(
          (i: EvaOptionType) => i.id == store.dataEvaluation.commanderHighId
        );
    })
    .catch((e) => {
      messageError($q, e);
    })
    .finally(() => {});
}

/** ฟิลเตอร์ input */
function filterOption(val: string, update: Function, refData: string) {
  switch (refData) {
    case "evaluatorIdOp":
      update(() => {
        evaluatorIdOp.value = evaluatorIdMainOp.value.filter(
          (v: DataOptions) => v.name.indexOf(val) > -1
        );
      });
      break;
    case "commanderIdOp":
      update(() => {
        commanderIdOp.value = commanderIdMainOp.value.filter(
          (v: DataOptions) => v.name.indexOf(val) > -1
        );
      });
      break;
    case "commanderHighOp":
      update(() => {
        commanderHighOp.value = commanderHighMainOp.value.filter(
          (v: DataOptions) => v.name.indexOf(val) > -1
        );
      });
      break;
    default:
      break;
  }
}

/** ดึงข้อมูลทั้งหมดในหน้า */
async function getAll() {
  await Promise.all([fetchEvaluation(), getOrgOp(), getProfile()]);
  await store.checkStep();
}

/** ส่งให้ผู้ประเมิน */
function sendToEvaluatore() {
  dialogConfirm(
    $q,
    () => {
      if (id.value) {
        showLoader();
        http
          .put(config.API.kpiSendToStatus(id.value), {
            status: "NEW_EVALUATOR",
          })
          .then(async () => {
            await fetchEvaluation();
            await success($q, "ส่งข้อตกลงให้ผู้ประเมินอนุมัติสำเร็จ");
          })
          .catch((e) => {
            messageError($q, e);
          })
          .finally(() => {
            hideLoader();
          });
      }
    },
    "ยืนยันการส่งข้อตกลงให้ผู้ประเมินอนุมัติ",
    "ต้องการยืนยันส่งข้อตกลงนี้ให้ผู้ประเมินอนุมัติใช่หรือไม่?"
  );
}

/**
 * ยืนยันการส่งให้ผู้ประเมินรายงานผลสำเร็จของงาน
 */
function sendToEvaluateEvaluatore() {
  dialogConfirm(
    $q,
    () => {
      if (id.value) {
        showLoader();
        http
          .put(config.API.kpiSendToStatus(id.value), {
            status: "EVALUATING_EVALUATOR",
          })
          .then(async () => {
            await fetchEvaluation();
            await success($q, "ส่งให้ผู้ประเมินรายงานผลสำเร็จของงานสำเร็จ");
          })
          .catch((e) => {
            messageError($q, e);
          })
          .finally(() => {
            hideLoader();
          });
      }
    },
    "ยืนยันการส่งให้ผู้ประเมินรายงานผลสำเร็จของงาน",
    "ต้องการยืนยันส่งให้ผู้ประเมินรายงานผลสำเร็จของงานใช่หรือไม่?"
  );
}

/**
 * ยืนยันการขอแก้ไขข้อตกลง
 */
function requireEdit() {
  dialogConfirm(
    $q,
    () => {
      if (id.value) {
        showLoader();
        http
          .put(config.API.kpiReqEdit(id.value), {
            status: "EVALUATOR",
          })
          .then(async (res) => {
            await fetchEvaluation();
            await success($q, "ขอแก้ไขสำเร็จ");
          })
          .catch((e) => {
            messageError($q, e);
          })
          .finally(() => {
            hideLoader();
          });
      }
    },
    "ยืนยันการขอแก้ไขข้อตกลง",
    "ต้องการยืนยันการขอแก้ไขข้อตกลงนี้ใช่หรือไม่?"
  );
}

/** เปิด dialog ช่วยราชการ */
function openGovernment() {
  modalGovernment.value = true;
}

/** เช็ค สถานะการทดลองงาน */
function openStatus() {
  router.push(`/probation-detail/${store.dataEvaluation.id}`);
}

/** ส่งให้ผู้ประเมิน */
function sendToEvauator() {
  dialogConfirm($q, () => {
    showLoader();
    http
      .post(config.API.sendToCommander, {
        status: "EVALUATING",
        id: [store.dataEvaluation.id],
      })
      .then(async () => {
        await getAll();
        store.tabMain = "3";
      })
      .catch((e) => {
        messageError($q, e);
      })
      .finally(() => {
        hideLoader();
      });
  });
}

/**
 * ยืนยันการส่งไปสรุปผลการประเมิน
 */
async function goToSummary() {
  dialogConfirm(
    $q,
    async () => {
      showLoader();
      await http
        .get(config.API.sendToSummary(store.dataEvaluation.id))
        .then(async () => {
          await http
            .put(
              config.API.updatePoint(store.dataEvaluation.id),
              store.dataEvaluation.posTypeName != "อำนวยการ" &&
                store.dataEvaluation.posTypeName != "บริหาร"
                ? {
                    totalPoint1: store.indicatorScoreVal.toFixed(2),
                    totalPoint2_1: store.competencyScoreVal.toFixed(2),
                    totalPoint2_2: store.devScoreVal.toFixed(2),
                    summaryPoint: (
                      store.indicatorScoreVal +
                      store.competencyScoreVal +
                      store.devScoreVal
                    ).toFixed(2),
                  }
                : {
                    totalPoint1: (
                      store.excusiveIndicator1ScoreVal +
                      store.excusiveIndicator2ScoreVal
                    ).toFixed(2),
                    totalPoint2_1: store.competencyScoreVal.toFixed(2),
                    summaryPoint: (
                      store.excusiveIndicator1ScoreVal +
                      store.excusiveIndicator2ScoreVal +
                      store.competencyScoreVal
                    ).toFixed(2),
                  }
            )
            .then((res) => {});

          await fetchEvaluation();
          store.tabMain = "4";
          store.tabOpen = 4;
        })
        .catch((e) => {
          messageError($q, e);
        })
        .finally(() => {
          hideLoader();
        });
    },
    "ยืนยันการส่งไปสรุปผลการประเมิน",
    "ต้องการยืนยันส่งไปสรุปผลการประเมินใช่หรือไม่?"
  );
}

/**
 * เปิด dialog ข้อมูลผู้ประเมิน
 * @param profileId id ผู้ประเมิน
 * @param type ประเภท
 */
const modalEvaluatorDetail = ref<boolean>(false);
const topic = ref<string>("");

function viewEvaluatorDetail(profileId: string, type: string) {
  modalEvaluatorDetail.value = true;
  topic.value =
    type == "evaluator"
      ? "ข้อมูลของผู้ประเมิน"
      : type == "commander"
      ? "ข้อมูลของผู้บังคับบัญชาเหนือขึ้นไป"
      : "ข้อมูลของผู้บังคับบัญชาเหนือขึ้นไปอีกชั้นหนึ่ง";
  fetchProfileEvaluator(profileId);
}

const evaluator = ref<EvaluatorType>({
  fullName: "",
  position: "",
  avartar: "",
  posTypeName: "",
  posLevelName: "",
  org: "",
  posExecutiveName: "",
  isPosmasterAct: false,
  posmasterAct: [],
});

/**
 * ข้อมูลของผู้ประเมิน
 * @param id ข้อมูลของผู้ประเมิน
 */
async function fetchProfileEvaluator(id: string) {
  showLoader();
  http
    .get(config.API.orgPosition + `/${id}`)
    .then(async (res) => {
      const data = await res.data.result;
      evaluator.value.fullName =
        data.prefix + data.firstName + " " + data.lastName;
      evaluator.value.position = data.position;
      evaluator.value.posTypeName = data.posTypeName;
      evaluator.value.posLevelName = data.posLevelName;
      evaluator.value.isPosmasterAct = data.isPosmasterAct;
      evaluator.value.posmasterAct = data.posmasterAct;
      evaluator.value.org = await findOrgNameHtml(data);
    })
    .catch((e) => {
      messageError($q, e);
    })
    .finally(() => {
      hideLoader();
    });
}

/** ดึงข้อมูลโปรไฟล์ */
async function getProfile() {
  await http
    .get(config.API.profilePosition())
    .then(async (res) => {
      const data = await res.data.result;
      store.dataProfile = await data;
    })
    .catch((e) => {
      messageError($q, e);
    });
}

async function downloadReport() {
  await http
    .get(config.API.kpiReportList(id.value))
    .then(async (res) => {
      const data = res.data.result;
      await genReport(
        data,
        "แบบกำหนดข้อตกลง" +
          store.dataEvaluation.prefix +
          store.dataEvaluation.firstName +
          " " +
          store.dataEvaluation.lastName
      );
    })
    .catch((e) => {
      messageError($q, e);
    })
    .finally(() => {});
}

async function uploadReport() {
  modalUpload.value = true;
  getData();
}

function closeDialog() {
  modalUpload.value = false;
  fileUpload.value = null;
}

/** ฟังชั่น อัปโหลดไฟล์ */
async function clickUpload(file: any) {
  const fileName = { fileName: file.name };

  dialogConfirm(
    $q,
    async () => {
      showLoader();
      const selectedFile = file;
      const formdata = new FormData();
      formdata.append("file", selectedFile);
      await http
        .post(config.API.file("แบบกำหนดข้อตกลง", "KPI", id.value), {
          replace: true,
          fileList: fileName,
        })
        .then(async (res) => {
          const foundKey: string | undefined = Object.keys(res.data).find(
            (key) =>
              res.data[key]?.fileName !== undefined &&
              res.data[key]?.fileName !== ""
          );
          foundKey &&
            uploadFileDoc(res.data[foundKey]?.uploadUrl, fileUpload.value);
        })
        .catch((err) => {
          messageError($q, err);
        });
    },
    "ยืนยันการอัปโหลดไฟล์",
    "ต้องการยืนยันการอัปโหลดไฟล์นี้หรือไม่ ?"
  );
}

/**
 * อัปโหลดไฟล์
 * @param uploadUrl  url
 * @param file ไฟล์
 */
async function uploadFileDoc(uploadUrl: string, file: any) {
  const Data = new FormData();
  Data.append("file", fileUpload.value);
  await axios
    .put(uploadUrl, file, {
      headers: {
        "Content-Type": file.type,
      },
    })
    .then(async (res) => {
      await getData();
      success($q, "อัปโหลดไฟล์สำเร็จ");
    })
    .catch((e) => {
      messageError($q, e);
    })
    .finally(() => {
      fileUpload.value = null;
      hideLoader();
    });
}

/** ดึงข้อมูล */
async function getData() {
  showLoader();
  await http
    .get(config.API.file("แบบกำหนดข้อตกลง", "KPI", id.value))
    .then((res) => {
      fileList.value = res.data;
    })
    .catch((e) => {
      messageError($q, e);
    })
    .finally(() => {
      hideLoader();
    });
}

/**
 * ลบไฟล์
 * @param fileName file name
 */
function deleteFile(fileName: string) {
  dialogRemove($q, async () => {
    showLoader();
    http
      .delete(
        config.API.file("แบบกำหนดข้อตกลง", "KPI", id.value) + `/${fileName}`
      )
      .catch((e) => {
        messageError($q, e);
      })
      .finally(async () => {
        await getData();

        setTimeout(() => {
          success($q, `ลบไฟล์สำเร็จ`);
          hideLoader();
        }, 500);
      });
  });
}

/**
 * ดาวน์โหลดลิงก์ไฟล์
 * @param fileName file name
 */
function downloadFile(fileName: string) {
  showLoader();
  http
    .get(config.API.file("แบบกำหนดข้อตกลง", "KPI", id.value) + `/${fileName}`)
    .then((res) => {
      const data = res.data.downloadUrl;
      window.open(data, "_blank");
    })
    .catch((e) => {
      messageError($q, e);
    })
    .finally(async () => {
      hideLoader();
    });
}

const sizeImg = ref<any>();

function onResize(size: { width: any; height: any }) {
  if (size.height <= 156) {
    sizeImg.value = "80px";
  } else if (size.height > 156) {
    sizeImg.value = "120px";
  }
}

onMounted(async () => {
  showLoader();
  store.isUpdate = false;
  await getAll();
});
</script>

<template>
  <div class="col-12 row justify-center">
    <div class="col-xs-12 col-sm-12 col-md-11">
      <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="
            isReadonly ? router.push(`/KPI-evaluator`) : router.push(`/KPI`)
          "
        />
        {{
          isReadonly
            ? "รายละเอียดการประเมินผลการปฏิบัติราชการระดับบุคคล"
            : id
            ? `แก้ไขแบบประเมิน`
            : `เพิ่มแบบประเมิน`
        }}
        <q-space />
      </div>
      <div class="col-12">
        <q-card bordered flat class="relative-position">
          <div class="row justify-center q-pa-md" v-if="!$q.screen.gt.xs">
            <q-avatar :size="sizeImg">
              <q-img
                :src="store.dataEvaluation.avartar"
                v-if="store.dataEvaluation.avartar !== undefined"
              />
              <q-img src="@/assets/avatar_user.jpg" v-else />
            </q-avatar>
          </div>
          <div
            v-if="$q.screen.gt.xs"
            class="absolute-center-left"
            style="left: 2%; top: 50%; transform: translateY(-50%)"
          >
            <q-avatar :size="sizeImg">
              <q-img
                :src="store.dataEvaluation.avartar"
                v-if="store.dataEvaluation.avartar !== undefined"
              />
              <q-img src="@/assets/avatar_user.jpg" v-else />
            </q-avatar>
          </div>
          <div class="row col-12">
            <q-resize-observer @resize="onResize" />

            <div class="row items-center col-12 q-pa-sm">
              <div
                class="col-12"
                :style="$q.screen.gt.xs ? 'padding-left: 12%' : ''"
              >
                <div class="row col-12 items-center justify-center">
                  <div>
                    <span class="text-h6 text-weight-medium text-primary">{{
                      store.dataEvaluation.firstName
                        ? `${store.dataEvaluation.prefix}${store.dataEvaluation.firstName} ${store.dataEvaluation.lastName}`
                        : ""
                    }}</span>
                    <p class="q-mb-none text-html">
                      {{ findOrgNameHtml(store.dataEvaluation) }}
                    </p>
                  </div>
                  <q-space v-if="$q.screen.gt.xs" />

                  <div class="q-gutter-x-sm">
                    <span
                      v-if="
                        store.tabMain === '1' &&
                        store.dataEvaluation.evaluationStatus == 'NEW' &&
                        ((store.dataEvaluation.posTypeName != 'อำนวยการ' &&
                          store.dataEvaluation.posTypeName != 'บริหาร' &&
                          store.indicatorWeightTotal != 100) ||
                          ((store.dataEvaluation.posTypeName == 'อำนวยการ' ||
                            store.dataEvaluation.posTypeName == 'บริหาร') &&
                            store.indicatorWeightTotal != 100))
                      "
                      class="text-red"
                      >*น้ำหนัก(ร้อยละ) ผลสัมฤทธิ์ของงานไม่ถูกต้อง</span
                    >
                    <br v-if="!$q.screen.gt.xs" />
                    <q-btn
                      v-if="
                        store.rolePerson == 'USER' &&
                        store.dataEvaluation.evaluationStatus == 'NEW'
                      "
                      :disabled="
                        ((store.dataEvaluation.posTypeName != 'อำนวยการ' ||
                          store.dataEvaluation.posTypeName != 'บริหาร') &&
                          store.indicatorWeightTotal != 100) ||
                        ((store.dataEvaluation.posTypeName == 'อำนวยการ' ||
                          store.dataEvaluation.posTypeName == 'บริหาร') &&
                          store.indicatorWeightTotal != 100)
                      "
                      unelevated
                      round
                      icon="mdi-send"
                      color="grey-2"
                      text-color="blue-6"
                      size="md"
                      @click="sendToEvaluatore()"
                    >
                      <q-tooltip>ส่งให้ผู้ประเมินอนุมัติ</q-tooltip>
                    </q-btn>
                    <q-btn
                      v-if="
                        store.rolePerson == 'USER' &&
                        store.tabMain == '2' &&
                        store.dataEvaluation.evaluationStatus == 'APPROVE'
                      "
                      unelevated
                      round
                      icon="mdi-send"
                      color="grey-2"
                      text-color="blue-6"
                      size="md"
                      @click="sendToEvauator"
                    >
                      <q-tooltip>ทำการประเมิน</q-tooltip>
                    </q-btn>
                    <q-btn
                      v-if="
                        store.rolePerson == 'USER' &&
                        store.dataEvaluation.evaluationStatus == 'EVALUATING' &&
                        store.tabMain == '3'
                      "
                      unelevated
                      round
                      icon="mdi-send"
                      color="grey-2"
                      text-color="blue-6"
                      size="md"
                      @click="sendToEvaluateEvaluatore()"
                    >
                      <q-tooltip
                        >ส่งให้ผู้ประเมินรายงานผลสำเร็จของงาน</q-tooltip
                      >
                    </q-btn>

                    <q-btn
                      v-if="
                        store.rolePerson == 'USER' &&
                        store.tabOpen < 3 &&
                        store.dataEvaluation.evaluationStatus != 'NEW' &&
                        (store.dataEvaluation.evaluationReqEdit == null ||
                          store.dataEvaluation.evaluationReqEdit == 'DONE')
                      "
                      :disabled="store.dataEvaluation.evaluatorId == null"
                      unelevated
                      round
                      icon="mdi-file-edit"
                      color="grey-2"
                      text-color="red-6"
                      size="md"
                      @click="requireEdit()"
                    >
                      <q-tooltip>ขอแก้ไขข้อตกลง</q-tooltip>
                    </q-btn>

                    <q-btn
                      v-if="
                        store.rolePerson == 'EVALUATOR' &&
                        store.tabMain === '3' &&
                        store.dataEvaluation.evaluationStatus ===
                          'EVALUATING_EVALUATOR'
                      "
                      :disabled="
                        store.indicatorScoreVal +
                          store.competencyScoreVal +
                          store.devScoreVal <=
                        0
                      "
                      unelevated
                      round
                      icon="mdi-send"
                      color="grey-2"
                      text-color="blue-6"
                      size="md"
                      @click="goToSummary()"
                    >
                      <q-tooltip>สรุปผลการประเมิน</q-tooltip>
                    </q-btn>

                    <q-btn
                      v-if="store.rolePerson == 'USER'"
                      unelevated
                      round
                      icon="mdi-account"
                      color="grey-2"
                      text-color="edit"
                      size="md"
                      @click="openEvaluator()"
                    >
                      <q-tooltip>{{
                        store.dataEvaluation.evaluationStatus === "NEW" &&
                        store.rolePerson === "USER"
                          ? "แก้ไขผู้ประเมิน"
                          : "ข้อมูลผู้ประเมิน"
                      }}</q-tooltip>
                    </q-btn>
                    <q-btn
                      unelevated
                      round
                      icon="mdi-file-eye-outline"
                      color="grey-2"
                      text-color="primary"
                      size="md"
                      @click="openGovernment"
                    >
                      <q-tooltip>ดูข้อมูลการช่วยราชการ</q-tooltip>
                    </q-btn>
                    <q-btn
                      unelevated
                      round
                      color="grey-2"
                      text-color="blue-5"
                      icon="mdi-file-eye-outline"
                      size="md"
                      @click="openStatus"
                    >
                      <q-tooltip
                        >ดูข้อมูลการทดลองปฏิบัติหน้าที่ราชการ</q-tooltip
                      >
                    </q-btn>
                    <q-btn
                      v-if="
                        store.dataEvaluation.evaluationStatus !== 'NEW' &&
                        store.dataEvaluation.evaluationStatus !==
                          'NEW_EVALUATOR' &&
                        store.dataEvaluation.evaluationStatus !==
                          'NEW_COMMANDER' &&
                        store.dataEvaluation.evaluationStatus !==
                          'NEW_COMMANDER_HIGH'
                      "
                      unelevated
                      round
                      color="grey-2"
                      text-color="primary"
                      icon="download"
                      size="md"
                      @click="downloadReport()"
                    >
                      <q-tooltip
                        >ดาวน์โหลดแบบกำหนดข้อตกลงการประเมินผลสัมฤทธิ์ของงานและพฤติกรรมการปฏิบัติราชการ</q-tooltip
                      >
                    </q-btn>
                    <q-btn
                      v-if="
                        store.dataEvaluation.evaluationStatus !== 'NEW' &&
                        store.dataEvaluation.evaluationStatus !==
                          'NEW_EVALUATOR' &&
                        store.dataEvaluation.evaluationStatus !==
                          'NEW_COMMANDER' &&
                        store.dataEvaluation.evaluationStatus !==
                          'NEW_COMMANDER_HIGH'
                      "
                      unelevated
                      round
                      color="grey-2"
                      text-color="blue"
                      icon="upload"
                      size="md"
                      @click="uploadReport()"
                    >
                      <q-tooltip
                        >อัปโหลดแบบกำหนดข้อตกลงการประเมินผลสัมฤทธิ์ของงานและพฤติกรรมการปฏิบัติราชการ</q-tooltip
                      >
                    </q-btn>
                  </div>
                </div>
              </div>
            </div>

            <div class="row items-center bg-toolbar col-12 q-pa-sm">
              <div
                class="col-12 q-py-xs"
                :style="
                  $q.screen.gt.xs ? 'padding-left: 12%' : 'padding-left:5%'
                "
              >
                <div class="row">
                  <div class="col-xs-12 col-md-2">
                    <div :class="$q.screen.gt.sm ? 'column' : 'row'">
                      <span class="text-grey-6 col">ตำแหน่งในสายงาน</span>
                      <span class="text-weight-medium text-dark col">{{
                        store.dataEvaluation.position
                      }}</span>
                    </div>
                  </div>
                  <div class="col-xs-12 col-md-2">
                    <div :class="$q.screen.gt.sm ? 'column' : 'row'">
                      <span class="text-grey-6 col">ตำแหน่งประเภท</span>
                      <span class="text-weight-medium text-dark col">{{
                        store.dataEvaluation.posTypeName
                      }}</span>
                    </div>
                  </div>
                  <div class="col-xs-12 col-md-2">
                    <div :class="$q.screen.gt.sm ? 'column' : 'row'">
                      <span class="text-grey-6 col">ระดับ</span>
                      <span class="text-weight-medium text-dark col">{{
                        store.dataEvaluation.posLevelName
                      }}</span>
                    </div>
                  </div>
                  <div class="col-xs-12 col-md-2">
                    <div :class="$q.screen.gt.sm ? 'column' : 'row'">
                      <span class="text-grey-6 col">สถานะการประเมิน</span>
                      <span class="text-weight-medium text-dark col">{{
                        formProfile.status
                      }}</span>
                    </div>
                  </div>
                  <div class="col-xs-12 col-md-2">
                    <div :class="$q.screen.gt.sm ? 'column' : 'row'">
                      <span class="text-grey-6 col">ผลการประเมิน</span>
                      <span class="text-weight-medium text-dark col">{{
                        formProfile.result
                      }}</span>
                    </div>
                  </div>
                  <div class="col-xs-12 col-md-2">
                    <div :class="$q.screen.gt.sm ? 'column' : 'row'">
                      <span class="text-grey-6 col">คะแนนประเมิน</span>
                      <span class="text-weight-medium text-primary col">
                        {{
                          store.dataEvaluation.posTypeName != "อำนวยการ" &&
                          store.dataEvaluation.posTypeName != "บริหาร"
                            ? (
                                store.indicatorScoreVal +
                                store.competencyScoreVal +
                                store.devScoreVal
                              ).toFixed(2)
                            : (
                                store.excusiveIndicator1ScoreVal +
                                store.excusiveIndicator2ScoreVal +
                                store.competencyScoreVal
                              ).toFixed(2)
                        }}
                      </span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </q-card>

        <q-card class="q-mt-md rounded">
          <TabMain />
        </q-card>
      </div>
    </div>
  </div>

  <q-dialog v-model="modalEdit" persistent>
    <q-card bordered style="width: 50vh">
      <q-form greedy @submit.prevent @validation-success="onSubmit">
        <DialogHeader
          :tittle="
            store.dataEvaluation.evaluationStatus === 'NEW' &&
            store.rolePerson === 'USER'
              ? 'แก้ไขผู้ประเมิน'
              : 'ข้อมูลผู้ประเมิน'
          "
          :close="close"
        />
        <q-separator />
        <q-card-section>
          <div class="column q-gutter-sm">
            <div class="row">
              <div class="col-10">
                <q-select
                  :readonly="
                    !(
                      store.dataEvaluation.evaluationStatus === 'NEW' &&
                      store.rolePerson === 'USER'
                    )
                  "
                  v-model="evaluatorId"
                  outlined
                  label="ผู้ประเมิน"
                  dense
                  option-label="name"
                  option-value="id"
                  :options="evaluatorIdOp"
                  class="inputgreen"
                  map-options
                  hide-bottom-space
                  lazy-rules
                  :rules="[ (val:string) => !!val ||
            `${'กรุณาเลือกผู้ประเมิน'}`, ]"
                  use-input
                  @filter="(inputValue:string,
            doneFn:Function) => filterOption(inputValue, doneFn,'evaluatorIdOp'
            ) "
                />
              </div>
              <div class="col-2 q-pa-sm text-right">
                <q-icon
                  v-if="evaluatorId"
                  name="mdi-eye"
                  size="sm"
                  color="info"
                  class="cursor-pointer"
                  @click="viewEvaluatorDetail(evaluatorId.id, 'evaluator')"
                >
                  <q-tooltip>ดูข้อมูลผู้ประเมิน</q-tooltip>
                </q-icon>
              </div>
            </div>
            <div class="row">
              <div class="col-10">
                <q-select
                  :readonly="
                    !(
                      store.dataEvaluation.evaluationStatus === 'NEW' &&
                      store.rolePerson === 'USER'
                    )
                  "
                  v-model="commanderId"
                  outlined
                  label="ผู้บังคับบัญชาเหนือขึ้นไป"
                  dense
                  option-label="name"
                  option-value="id"
                  :options="commanderIdOp"
                  map-options
                  class="inputgreen"
                  use-input
                  @filter="(inputValue:string,
                    doneFn:Function) => filterOption(inputValue, doneFn,'commanderIdOp'
                    ) "
                >
                  <template
                    v-if="
                      store.dataEvaluation.evaluationStatus === 'NEW' &&
                      store.rolePerson === 'USER' &&
                      commanderId
                    "
                    v-slot:append
                  >
                    <q-icon
                      name="cancel"
                      @click.stop.prevent="commanderId = null"
                      class="cursor-pointer"
                    />
                  </template>
                </q-select>
              </div>
              <div class="col-2 q-pa-sm text-right">
                <q-icon
                  v-if="commanderId"
                  name="mdi-eye"
                  size="sm"
                  color="info"
                  class="cursor-pointer"
                  @click="viewEvaluatorDetail(commanderId.id, 'commander')"
                >
                  <q-tooltip>ดูข้อมูลผู้บังคับบัญชาเหนือขึ้นไป</q-tooltip>
                </q-icon>
              </div>
            </div>
            <div class="row">
              <div class="col-10">
                <q-select
                  :readonly="
                    !(
                      store.dataEvaluation.evaluationStatus === 'NEW' &&
                      store.rolePerson === 'USER'
                    )
                  "
                  v-model="commanderHighId"
                  outlined
                  label="ผู้บังคับบัญชาเหนือขึ้นไปอีกชั้นหนึ่ง"
                  dense
                  option-label="name"
                  option-value="id"
                  :options="commanderHighOp"
                  map-options
                  use-input
                  class="inputgreen"
                  @filter="(inputValue:string,
                    doneFn:Function) => filterOption(inputValue, doneFn,'commanderHighOp'
                    ) "
                >
                  <template
                    v-if="
                      store.dataEvaluation.evaluationStatus === 'NEW' &&
                      store.rolePerson === 'USER' &&
                      commanderHighId
                    "
                    v-slot:append
                  >
                    <q-icon
                      name="cancel"
                      @click.stop.prevent="commanderHighId = null"
                      class="cursor-pointer"
                    />
                  </template>
                </q-select>
              </div>
              <div class="col-2 q-pa-sm text-right">
                <q-icon
                  v-if="commanderHighId"
                  name="mdi-eye"
                  size="sm"
                  color="info"
                  class="cursor-pointer"
                  @click="
                    viewEvaluatorDetail(commanderHighId.id, 'commanderHigh')
                  "
                >
                  <q-tooltip
                    >ดูข้อมูลผู้บังคับบัญชาเหนือขึ้นไปอีกชั้นหนึ่ง</q-tooltip
                  >
                </q-icon>
              </div>
            </div>
          </div>
        </q-card-section>
        <q-separator />
        <q-card-actions
          v-if="
            store.dataEvaluation.evaluationStatus === 'NEW' &&
            store.rolePerson === 'USER'
          "
          align="right"
          class="bg-white text-teal"
        >
          <q-btn label="บันทึก" color="secondary" type="submit"
            ><q-tooltip>บันทึกข้อมูล</q-tooltip></q-btn
          >
        </q-card-actions>
      </q-form>
    </q-card>
  </q-dialog>

  <q-dialog v-model="modalEvaluatorDetail" persistent>
    <q-card style="width: 60vw; max-width: 70vw; min-height: 40vh">
      <DialogHeader
        :tittle="topic"
        :close="() => (modalEvaluatorDetail = false)"
      />
      <q-separator />

      <q-card-section class="q-pa-md">
        <div class="q-pb-md">
          <span class="text-teal text-weight-bold text-body2">{{
            evaluator.fullName
          }}</span>
        </div>
        <div class="row">
          <div class="col-12 column justify-center no-wrap">
            <div class="row text-grey-6">
              <div class="col-3">ตำแหน่งในสายงาน</div>
              <div class="col-3">ตำแหน่งประเภท</div>
              <div class="col-3">ตำแหน่งทางการบริหาร</div>
              <div class="col-3">สังกัด</div>
            </div>
            <div class="row">
              <div class="col-3">
                {{ evaluator.position ? evaluator.position : "-" }}
              </div>
              <div class="col-3">
                {{ evaluator.posTypeName ? evaluator.posTypeName : "-" }}
                {{
                  evaluator.posLevelName ? ` (${evaluator.posLevelName})` : "-"
                }}
              </div>
              <div class="col-3">
                {{
                  evaluator.posExecutiveName ? evaluator.posExecutiveName : "-"
                }}
              </div>
              <div class="col-3 text-html">
                {{ evaluator.org ? evaluator.org : "-" }}
              </div>
            </div>

            <div class="row q-mt-md text-grey-6">
              <div class="col-12">รักษาการในตำแหน่ง/การรักษาราชการแทน</div>
            </div>
            <div class="row">
              <div class="col-12" v-if="evaluator.isPosmasterAct">
                {{
                  `${evaluator.posmasterAct[0].prefix}${evaluator.posmasterAct[0].firstName} ${evaluator.posmasterAct[0].lastName} (${evaluator.posmasterAct[0].posNo})`
                }}
              </div>
              <div class="col-12" v-else>-</div>
            </div>
          </div>
        </div>
      </q-card-section>
    </q-card>
  </q-dialog>

  <q-dialog v-model="modalUpload" persistent>
    <q-card class="col-12" style="width: 60vw">
      <DialogHeader
        tittle="อัปโหลดแบบกำหนดข้อตกลงการประเมินผลสัมฤทธิ์ของงานและพฤติกรรมการปฏิบัติราชการ"
        :close="closeDialog"
      />
      <q-separator />

      <q-card-section>
        <div class="row col-12 q-col-gutter-y-sm">
          <div class="col-12 row" v-if="fileList.length == 0">
            <q-file
              for="inputFiles"
              class="col-12"
              outlined
              dense
              v-model="fileUpload"
              label="ไฟล์เอกสารแบบกำหนดข้อตกลง"
              hide-bottom-space
              accept=".pdf"
              clearable
            >
              <template v-slot:prepend>
                <q-icon name="attach_file" color="primary" />
              </template>
              <template v-slot:after>
                <q-btn
                  size="14px"
                  v-if="fileUpload"
                  flat
                  round
                  dense
                  color="primary"
                  icon="mdi-upload"
                  @click="clickUpload(fileUpload)"
                  ><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
                >
              </template>
            </q-file>
          </div>

          <div v-if="fileList.length > 0" class="col-xs-12 row">
            <q-list class="full-width rounded-borders" bordered separator>
              <q-item
                clickable
                v-ripple
                v-for="data in fileList"
                :key="data.id"
                class="items-center"
              >
                <q-item-section>{{ data.fileName }}</q-item-section>
                <q-space />
                <div>
                  <q-btn
                    size="12px"
                    flat
                    round
                    dense
                    color="blue"
                    icon="mdi-download"
                    @click="downloadFile(data.fileName)"
                    ><q-tooltip>ดาวน์โหลดไฟล์</q-tooltip></q-btn
                  >

                  <q-btn
                    size="12px"
                    flat
                    round
                    dense
                    color="red"
                    class="q-ml-sm"
                    icon="mdi-delete-outline"
                    @click="deleteFile(data.fileName)"
                    ><q-tooltip>ลบไฟล์</q-tooltip></q-btn
                  >
                </div>
              </q-item>
            </q-list>
          </div>

          <div class="col-12" v-else>
            <q-card class="q-pa-md" bordered> ไม่มีรายการเอกสาร </q-card>
          </div>
        </div>
      </q-card-section>
    </q-card>
  </q-dialog>

  <DialogGovernment v-model:modal="modalGovernment" />
</template>
<style>
.bg-toolbar {
  background-color: #f2fbfa;
}

.absolute-center-left {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
</style>