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

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

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

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 { useEvaluateDetailStore } from "@/modules/12_evaluatePersonal/store/EvaluateDetail";
import { useCounterMixin } from "@/stores/mixin";

import PopupHistory from "@/modules/12_evaluatePersonal/components/Detail/popupHistory.vue";

const router = useRouter();
const route = useRoute();
const store = useEvaluateDetailStore();
const mixin = useCounterMixin();
const { dialogConfirm } = mixin;

const $q = useQuasar();

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

const modalHistory = ref<boolean>(false);
const externalLink =
  "https://accreditation.ocsc.go.th/accreditation/search/curriculum";
const id = ref<string>(route.params.id as string);
const formCommand = reactive<FormCommand>({
  elementaryFullName: "",
  elementaryPosition: "",
  abovelevelFullname: "",
  abovelevelPosition: "",
});

const elementaryFullNameRef = ref<object | null>(null);
const elementaryPositonRef = ref<object | null>(null);
const abovelevelFullnameRef = ref<object | null>(null);
const abovelevelPositionRef = ref<object | null>(null);

const formCommandRef: FormCommandRef = {
  elementaryFullName: elementaryFullNameRef,
  elementaryPosition: elementaryPositonRef,
  abovelevelFullname: abovelevelFullnameRef,
  abovelevelPosition: abovelevelPositionRef,
};

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 === 6
      ? await saveStep6
      : store.step === 7
      ? await saveStep7
      : store.step === 8
      ? await saveStep8
      : store.step === 9
      ? await saveStep9
      : null;
  store.step === 2
    ? validateStep2()
    : store.step < 9 &&
      dialogConfirm(
        $q,
        () => {
          functionCreateDoc?.();
          store.step++;
        },
        "ยืนยันการดำเนินการ",
        "ต้องการยืนยันการดำเนินการต่อใช่หรือไม่?"
      );

  // functionCreateDoc?.();
  // store.step < 9 &&
}

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

function updateformCommand(val: any, ref: any) {
  formCommand.elementaryFullName = val.elementaryFullName;
  formCommand.elementaryPosition = val.elementaryPosition;
  formCommand.abovelevelFullname = val.abovelevelFullname;
  formCommand.abovelevelPosition = val.abovelevelPosition;

  elementaryFullNameRef.value = ref.elementaryFullNameRef;
  elementaryPositonRef.value = ref.elementaryPositonRef;
  abovelevelFullnameRef.value = ref.abovelevelFullnameRef;
  abovelevelPositionRef.value = ref.abovelevelPositionRef;
}

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)) {
    saveStep2();
  } else {
    console.log("ไม่ผ่าน");
  }
}

async function saveStep1() {
  console.log("Save 1");
}
async function saveStep2() {
  dialogConfirm(
    $q,
    () => {
      store.step++;
    },
    "ยืนยันการดำเนินการ",
    "ต้องการยืนยันการดำเนินการต่อใช่หรือไม่?"
  );
}
async function saveStep3() {
  console.log("Save 3");
}
async function saveStep4() {
  console.log("Save 4");
}
async function saveStep5() {
  console.log("Save 5");
}
async function saveStep6() {
  console.log("Save 6");
}
async function saveStep7() {
  console.log("Save 7");
}
async function saveStep8() {
  console.log("Save 8");
}
async function saveStep9() {
  console.log("Save 9");
}

function onClickPopupHistory() {
  modalHistory.value = !modalHistory.value;
}

onMounted(() => {
  store.step = 1;
});
</script>

<template>
  <div class="row q-col-gutter-md">
    <div class="col-xs-12 col-sm-3">
      <div class="toptitle">
        {{ props.data && props.data?.type == 'SPECIAL_EXPERT' ? 'ประเมินชำนาญการพิเศษ' : 'ประเมินชำนาญการ' }}

        <q-btn
          flat
          round
          dense
          color="primary"
          icon="history"
          @click="onClickPopupHistory"
        >
          <q-tooltip>ประวัติการประเมิน</q-tooltip>
        </q-btn>
      </div>
      <Stepper />
    </div>

    <div class="col-xs-12 col-sm-9">
      <div class="col-12 row">
        <div class="toptitle">
          {{ 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">
            <q-card-section>
              <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-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" :data="data"/>
              <ViewStep3 v-if="store.step === 3" />
              <ViewStep7 v-if="store.step === 7" /> </q-card-section
          ></q-card>
        </div>
      </div>
    </div>
  </div>

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

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