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

<script setup lang="ts">
import { ref, reactive, onMounted, onUnmounted } from "vue";
import { useQuasar } from "quasar";
import evaluationFunctions from "@/modules/06_evaluate/stores/evaluationFunction";

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

import Stepper from "@/modules/06_evaluate/components/Stepper.vue";
import Step1 from "@/modules/06_evaluate/components/step/step1.vue";
import Step2 from "@/modules/06_evaluate/components/step/step2.vue";
import Step3 from "@/modules/06_evaluate/components/step/step3.vue";
import Step4 from "@/modules/06_evaluate/components/step/step4.vue";
import Step5 from "@/modules/06_evaluate/components/step/step5.vue";
import Step6 from "@/modules/06_evaluate/components/step/step6.vue";
import Step7 from "@/modules/06_evaluate/components/step/step7.vue";
import Step8 from "@/modules/06_evaluate/components/step/step8.vue";
import Step9 from "@/modules/06_evaluate/components/step/step9.vue";

import ViewStep1 from "@/modules/06_evaluate/components/viewstep/viewStep1.vue";
import ViewStep3 from "@/modules/06_evaluate/components/viewstep/viewStep3.vue";
import ViewStep7 from "@/modules/06_evaluate/components/viewstep/viewStep7.vue";

import DialogMain from "@/modules/06_evaluate/components/directorandmeet/DialogMain.vue";
import PopupHistory from "@/modules/06_evaluate/components/viewstep/popupHistory.vue";

import { useEvaluateStore } from "@/modules/06_evaluate/store";
import { useCounterMixin } from "@/stores/mixin";

const store = useEvaluateStore();
const mixin = useCounterMixin();
const $q = useQuasar();

const { dialogConfirm, showLoader, hideLoader, messageError } = mixin;
const {
  fetchCheckStatus,
  saveEvaluation,
  nextPrapare,
  nextCheckDoc,
  nextCheckDoc2,
  nextPrepareDoc2,
} = evaluationFunctions;

const props = defineProps({
  title: {
    type: String,
  },
  step: {
    type: Number,
  },
});

const externalLink =
  "https://accreditation.ocsc.go.th/accreditation/search/curriculum";

const formDetail = ref<any>();
const formSpec = reactive<FormSpec>({
  isEducationalQft: false, // คุณวุฒิการศึกษา
  isGovermantServiceHtr: false, // ประวัติการรับราชการ
  isOperatingExp: false, // ประสบการณ์ในการปฏิบัติงาน
  isMinPeriodOfTenure: false, // ระยะเวลาขั้นต่ำในการดำรงตำแหน่งในสายงานที่ขอเข้ารับการคัดเลือก
  isHaveSpecificQft: false, // มีคุณสมบัติตรงตามคุณสมบัติเฉพาะสำหรับตำแหน่งที่กำหนด ในมาตราฐานกำหนดตำแหน่ง
  isHaveProLicense: false, // มีใบอนุญาตประกอบวิชาชีพของสายงานต่างๆ
  isHaveMinPeriodOrHoldPos: false, // มีระยะเวลาขั้นต่ำในการดำรงตำแหน่งหรือเคยดำรงตำแหน่งในสายงานที่จะคัดเลือกตามคุณวุฒิของบุคคลและระดับตำแหน่งที่จะคัดเลือก
});

const formCommand = reactive<FormCommand>({
  commanderFullname: "",
  commanderPosition: "",
  commanderAboveFullname: "",
  commanderAbovePosition: "",
});

const commanderFullnameRef = ref<object | null>(null);
const commanderPositionRef = ref<object | null>(null);
const commanderAboveFullnameRef = ref<object | null>(null);
const commanderAbovePositionRef = ref<object | null>(null);
const 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 formCommandRef: FormCommandRef = {
  commanderFullname: commanderFullnameRef,
  commanderPosition: commanderPositionRef,
  commanderAboveFullname: commanderAboveFullnameRef,
  commanderAbovePosition: commanderAbovePositionRef,
  fileEvaluation1: fileEvaluation1Ref,
  fileEvaluation2: fileEvaluation2Ref,
  fileEvaluation3: fileEvaluation3Ref,
  fileEvaluation4: fileEvaluation4Ref,
  fileEvaluation5: fileEvaluation5Ref,
  fileEvaluation6: fileEvaluation6Ref,
};

async function onCilckNextStep() {
  const functionCreateDoc: (() => Promise<void>) | null =
    store.step === 1
      ? await saveStep1
      : store.step === 3
      ? await saveStep3
      : store.step === 4
      ? await saveStep4
      : store.step === 5
      ? await saveStep5
      : store.step === 5
      ? await saveStep5
      : store.step === 7
      ? await saveStep7
      : store.step === 8
      ? await saveStep8
      : store.step === 9
      ? await saveStep9
      : null;
  store.step === 2 || store.step === 6
    ? validateStep2()
    : store.step < 9 &&
      dialogConfirm(
        $q,
        () => {
          functionCreateDoc?.();
        },
        "ยืนยันการดำเนินการ",
        "ต้องการยืนยันการดำเนินการต่อใช่หรือไม่?"
      );
}

async function onCilckprPeviousStep(type: string) {
  store.step < 9 &&
    dialogConfirm(
      $q,
      async () => {
        store.step--;
      },
      "ยืนยันการย้อนกลับ",
      "ต้องการย้อนกลับใช่หรือไม่?"
    );
}

async function saveStep1() {
  saveEvaluation(formSpec, formDetail.value);
}

async function updateCheckSpec(data: FormSpec) {
  formSpec.isEducationalQft = data.isEducationalQft;
  formSpec.isGovermantServiceHtr = data.isGovermantServiceHtr;
  formSpec.isOperatingExp = data.isOperatingExp;
  formSpec.isMinPeriodOfTenure = data.isMinPeriodOfTenure;
  formSpec.isHaveSpecificQft = data.isHaveSpecificQft;
  formSpec.isHaveProLicense = data.isHaveProLicense;
  formSpec.isHaveMinPeriodOrHoldPos = data.isHaveMinPeriodOrHoldPos;
}

function updateFormDetail(data: any) {
  formDetail.value = data;
}

async function saveStep2() {
  dialogConfirm(
    $q,
    () => {
      nextPrapare("approve", formCommand);
    },
    "ยืนยันการดำเนินการ",
    "ต้องการยืนยันการดำเนินการต่อใช่หรือไม่?"
  );
}

function updateformCommand(val: any, ref: any) {
  formCommand.commanderFullname = val.commanderFullname;
  formCommand.commanderPosition = val.commanderPosition;
  formCommand.commanderAboveFullname = val.commanderAboveFullname;
  formCommand.commanderAbovePosition = val.commanderAbovePosition;

  commanderFullnameRef.value = ref.commanderFullnameRef;
  commanderPositionRef.value = ref.commanderPositionRef;
  commanderAboveFullnameRef.value = ref.commanderAboveFullnameRef;
  commanderAbovePositionRef.value = ref.commanderAbovePositionRef;
  fileEvaluation1Ref.value = ref.fileEvaluation1Ref;
  fileEvaluation2Ref.value = ref.fileEvaluation2Ref;
  fileEvaluation3Ref.value = ref.fileEvaluation3Ref;
  fileEvaluation4Ref.value = ref.fileEvaluation4Ref;
  fileEvaluation5Ref.value = ref.fileEvaluation5Ref;
  fileEvaluation6Ref.value = ref.fileEvaluation6Ref;
}

async function validateStep2() {
  const hasError = [];
  for (const key in formCommandRef) {
    if (Object.prototype.hasOwnProperty.call(formCommandRef, key)) {
      const property = formCommandRef[key];
      if (property.value && typeof property.value.validate === "function") {
        const isValid = property.value.validate();
        hasError.push(isValid);
      }
    }
  }
  if (hasError.every((result) => result === true)) {
    store.step === 2 ? saveStep2() : saveStep6();
  } else {
    console.log("ไม่ผ่าน");
  }
}

const pdfSrc = ref<any>();
async function saveStep3() {
  nextCheckDoc("approve");
}
async function updateFilePDF(url: any) {
  pdfSrc.value = url;
}

async function saveStep4() {
  console.log("Save 4");
}
async function saveStep5() {
  console.log("Save 5");
}
async function saveStep6() {
  nextCheckDoc2(formCommand);
}
async function saveStep7() {
  nextPrepareDoc2();
}
async function saveStep8() {
  console.log("Save 8");
}
async function saveStep9() {
  console.log("Save 9");
}

const modalDirector = ref<boolean>(false);

function onClickDialogDirevtor() {
  modalDirector.value = true;
}

function closeDialogDirector() {
  modalDirector.value = false;
}
function fetchDirector() {
  console.log("ประเมินชำนาญการ:director");
}

function fetchMeeting() {
  console.log("ประเมินชำนาญการ:meeting");
}
const modalHistory = ref<boolean>(false);
function onClickPopupHistory() {
  modalHistory.value = !modalHistory.value;
}

onMounted(async () => {
  await fetchCheckStatus();
});
</script>

<template>
  <div class="row q-col-gutter-md">
    <div class="col-xs-12 col-sm-3">
      <div class="toptitle">
        {{ props.title }}
        <q-btn
          v-if="store.evaluateId"
          flat
          round
          dense
          color="primary"
          icon="history"
          @click="onClickPopupHistory"
        >
          <q-tooltip>ประวัติการประเมิน</q-tooltip>
        </q-btn>
      </div>
      <Stepper />

      <!-- <div class="text-center">
        <q-btn
          unelevated
          outline
          label="รายชื่อกรรมการและการประชุม"
          color="public"
          @click="onClickDialogDirevtor"
        />
      </div> -->
    </div>

    <div class="col-xs-12 col-sm-9">
      <div class="col-12 row">
        <div class="col-9">
          <div class="toptitle">
            {{ store.step }}.{{ store.title[store.step - 1] }}
          </div>
        </div>
        <div class="col-3 text-right">
          <q-btn
            v-if="store.step === 1"
            :href="externalLink"
            target="_blank"
            outline
            color="blue"
            no-caps
          >
            ตรวจสอบคุณสมบัติกับ ก.พ.
          </q-btn>
        </div>
      </div>

      <div class="row q-col-gutter-md col-12" v-if="store.showLoadStatus">
        <div
          :class="
            store.step === 2 ||
            store.step === 4 ||
            store.step === 5 ||
            store.step === 6 ||
            store.step === 8 ||
            store.step === 9
              ? 'col-xs-12 col-sm-12 row'
              : 'col-xs-12 col-sm-5 row'
          "
        >
          <q-card flat bordered class="col-12 q-pa-md">
            <q-card-section>
              <Step1
                v-if="store.step === 1"
                @update:spec="updateCheckSpec"
                :evaluateId="store.evaluateId"
                :educations="formDetail?.educations"
              />

              <Step2
                v-if="store.step === 2"
                @update:form="updateformCommand"
                :evaluateId="store.evaluateId"
              />
              <Step3
                v-if="store.step === 3"
                @update:file="updateFilePDF"
                :evaluateId="store.evaluateId"
              />
              <Step4 v-if="store.step === 4" />
              <Step5 v-if="store.step === 5" :evaluateId="store.evaluateId" />
              <Step6
                v-if="store.step === 6"
                @update:form="updateformCommand"
                :evaluateId="store.evaluateId"
              />
              <Step7
                v-if="store.step === 7"
                @update:file="updateFilePDF"
                :evaluateId="store.evaluateId"
              />
              <Step8 v-if="store.step === 8" :evaluateId="store.evaluateId" />
              <Step9 v-if="store.step === 9" />
            </q-card-section>
          </q-card>
        </div>
        <div
          class="col-xs-12 col-sm-7 row"
          v-if="store.step === 1 || store.step === 3 || store.step === 7"
        >
          <q-card flat bordered class="col-12">
            <q-card-section>
              <ViewStep1
                v-if="store.step === 1"
                @update:formDeital="updateFormDetail"
              />
              <ViewStep3 v-if="store.step === 3 && pdfSrc" :pdfSrc="pdfSrc" />
              <ViewStep7
                v-if="store.step === 7 && pdfSrc"
                :pdfSrc="pdfSrc"
              /> </q-card-section
          ></q-card>
        </div>
      </div>
      <div class="q-mt-md q-gutter-md" align="right">
        <!-- <q-btn
          v-if="store.step !== 1"
          unelevated
          outline
          label="ย้อนกลับ"
          color="public"
          @click="onCilckprPeviousStep('reject')"
        /> -->
        <q-btn
          v-if="
            store.step >= store.currentStep &&
            store.step !== 4 &&
            store.step !== 5 &&
            store.step !== 8 &&
            store.step !== 9
          "
          unelevated
          label="ดำเนินการต่อ"
          color="public"
          @click="onCilckNextStep"
        />
      </div>
    </div>
  </div>

  <DialogMain
    :modal="modalDirector"
    :close="closeDialogDirector"
    :fetchDirector="fetchDirector"
    :fetchMeeting="fetchMeeting"
  />

  <PopupHistory
    :modal="modalHistory"
    :close="onClickPopupHistory"
    :id="store.evaluateId"
  />
</template>

<style>
.q-stepper--vertical .q-stepper__step-inner {
  padding: 0;
}
</style>