hrms-mgt/src/modules/12_evaluatePersonal/components/Detail/Tab1.vue

<script setup lang="ts">
import { onBeforeMount, ref, reactive } from "vue";
import { useQuasar } from "quasar";

import { useRoute } from "vue-router";
import { useEvaluateDetailStore } from "@/modules/12_evaluatePersonal/store/EvaluateDetail";
import { useCounterMixin } from "@/stores/mixin";
import http from "@/plugins/http";
import config from "@/app.config";

/** importType*/
import type { FormCommand } from "@/modules/12_evaluatePersonal/interface/index/evalute";

/** importComponents*/
import Stepper from "@/modules/12_evaluatePersonal/components/Detail/Stepper.vue";
import Step1 from "@/modules/12_evaluatePersonal/components/Detail/step/step1.vue";
import Step2 from "@/modules/12_evaluatePersonal/components/Detail/step/step2.vue";
import Step3 from "@/modules/12_evaluatePersonal/components/Detail/step/step3.vue";
import Step4 from "@/modules/12_evaluatePersonal/components/Detail/step/step4.vue";
import Step5 from "@/modules/12_evaluatePersonal/components/Detail/step/step5.vue";
import Step6 from "@/modules/12_evaluatePersonal/components/Detail/step/step6.vue";
import Step7 from "@/modules/12_evaluatePersonal/components/Detail/step/step7.vue";
import Step8 from "@/modules/12_evaluatePersonal/components/Detail/step/step8.vue";
import Step9 from "@/modules/12_evaluatePersonal/components/Detail/step/step9.vue";
import ViewStep1 from "@/modules/12_evaluatePersonal/components/Detail/viewstep/viewStep1.vue";
import ViewStep3 from "@/modules/12_evaluatePersonal/components/Detail/viewstep/viewStep3.vue";
import ViewStep7 from "@/modules/12_evaluatePersonal/components/Detail/viewstep/viewStep7.vue";
import PopupHistory from "@/modules/12_evaluatePersonal/components/Detail/popupHistory.vue";

/** importStor*/

/** use*/
const $q = useQuasar();
const route = useRoute();
const store = useEvaluateDetailStore();
const mixin = useCounterMixin();
const { showLoader, hideLoader, messageError } = mixin;

/**
 * props
 */
const props = defineProps({
  data: {
    type: Object,
    default: {},
  },
});

const id = ref<string>(route.params.id as string); // id รายการประเมิน
const isLoadView = ref<boolean>(false); //แสดง view
const modalHistory = ref<boolean>(false); //แสดง popup ประวัติการประเมิน
// ข้อมูลผู้เซ็นเอกสาร
const formCommand = reactive<FormCommand>({
  elementaryFullName: "", //ชื่อผู้บังคับบัญชาชั้นต้น
  elementaryPosition: "", //ตำแหน่งผู้บังคับบัญชาชั้นต้น
  abovelevelFullname: "", //ชื่อผู้บังคับบัญชาเหนือขึ้นไป 1 ระดับ
  abovelevelPosition: "", //ตำแหน่งผู้บังคับบัญชาเหนือขึ้นไป 1 ระดับ
});

/**
 * ฟังก์ชันเช็คขั้นตอนการประเมิน
 */
async function fetchCheckStep() {
  isLoadView.value = false;
  showLoader();
  await http
    .get(config.API.evaluateGetStep(id.value))
    .then((res) => {
      const data = res.data.result;
      let step =
        data.step === "CHECK_SPEC"
          ? 1
          : data.step === "PREPARE_DOC_V1"
          ? 2
          : data.step === "CHECK_DOC_V1"
          ? 3
          : data.step === "WAIT_CHECK_DOC_V1"
          ? 4
          : data.step === "ANNOUNCE_WEB"
          ? 5
          : data.step === "PREPARE_DOC_V2"
          ? 6
          : data.step === "WAIT_CHECK_DOC_V2"
          ? 7
          : data.step === "CHECK_DOC_V2"
          ? 8
          : data.step === "DONE"
          ? 9
          : 1;

      store.currentStep = step;
      store.step = step;
      isLoadView.value = true;
    })
    .catch((e) => {
      messageError($q, e);
    })
    .finally(() => {
      setTimeout(() => {
        hideLoader();
      }, 3000);
    });
}

/**
 * ฟังก์ชันเปิด,ปิด popup ประวัติการประเมิน
 */
function onClickPopupHistory() {
  modalHistory.value = !modalHistory.value;
}

/**
 * ฟังก์ชันอัปเดทข้อมูลผู้เซ็นเอกสาร
 * @param val ข้อมูลผู้เซ็นเอกสาร
 */
function updateformCommand(val: FormCommand) {
  formCommand.elementaryFullName = val.elementaryFullName;
  formCommand.elementaryPosition = val.elementaryPosition;
  formCommand.abovelevelFullname = val.abovelevelFullname;
  formCommand.abovelevelPosition = val.abovelevelPosition;
}

/**
 * ทำงานเมือ Components ถูกเรียกใช้งาน
 */
onBeforeMount(async () => {
  await fetchCheckStep();
});
</script>

<template>
  <q-card bordered class="col-12 row caedNone q-col-gutter-md">
    <div class="col-xs-12 col-sm-3 row">
      <div class="col-12 row no-wrap">
        <div class="col-12 q-py-md q-px-lg">
          <div class="col-12 row items-center no-wrap">
            <div class="toptitle2">
              {{
                props.data && props.data?.type == "SPECIAL_EXPERT"
                  ? "ประเมินชำนาญการพิเศษ"
                  : "ประเมินชำนาญการ"
              }}
            </div>
            <q-space />
            <div>
              <q-btn
                flat
                round
                dense
                color="primary"
                icon="history"
                @click="onClickPopupHistory"
              >
                <q-tooltip>ประวัติการประเมิน</q-tooltip>
              </q-btn>
            </div>
          </div>
          <div class="col-12">
            <Stepper />
          </div>
        </div>
        <div class="col-12 row">
          <q-separator :vertical="!$q.screen.lt.md" />
        </div>
      </div>
    </div>

    <div class="col-xs-12 col-sm-9 q-pa-md" v-if="isLoadView">
      <div class="col-12 row q-pt-md">
        <div class="toptitle2">
          {{ store.step }}.{{ store.titel[store.step - 1] }}
        </div>
      </div>
      <div class="row q-col-gutter-md col-12">
        <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">
            <Step1 v-if="store.step === 1" :data="props.data" />
            <Step2 v-if="store.step === 2" @update:form="updateformCommand" />
            <Step3 v-if="store.step === 3" :step="store.step" />
            <Step4 v-if="store.step === 4" />
            <Step5 v-if="store.step === 5" />
            <Step6 v-if="store.step === 6" />
            <Step7 v-if="store.step === 7" />
            <Step8 v-if="store.step === 8" />
            <Step9 v-if="store.step === 9" />
          </q-card>
        </div>
        <div
          class="col-xs-12 col-sm-7 row"
          v-if="store.step === 1 || store.step === 3 || store.step === 7"
        >
          <div class="col-12">
            <ViewStep1 v-if="store.step === 1" :data="data" />
            <ViewStep3 v-if="store.step === 3" />
            <ViewStep7 v-if="store.step === 7" />
          </div>
        </div>
      </div>
    </div>
  </q-card>

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

<style scoped>
.q-stepper--vertical .q-stepper__step-inner {
  padding: 0;
}
.toptitle2 {
  font-size: 1rem;
  font-weight: bold;
  margin-bottom: 1.2%;
}
</style>