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

<script setup lang="ts">
import { onMounted } from "vue";
import { useQuasar } from "quasar";

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 { useEvaluateStore } from "@/modules/06_evaluate/store";
import { useCounterMixin } from "@/stores/mixin";
import type router from "../router";

const store = useEvaluateStore();
const mixin = useCounterMixin();
const { dialogConfirm } = mixin;

const $q = useQuasar();

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

function onCilckNextStep() {
  store.step < 9 &&
    dialogConfirm(
      $q,
      async () => {
        const functionCreateDoc: (() => Promise<void>) | null =
          store.step === 1
            ? await saveStep1
            : store.step === 2
            ? await saveStep2
            : 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;

        functionCreateDoc?.();
        store.step++;
      },
      "ยืนยันการดำเนินการ",
      "ต้องการยืนยันการดำเนินการต่อใช่หรือไม่?"
    );
}

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

function updatedFormStep2() {}

async function saveStep1() {
  console.log("Save 1");
}
async function saveStep2() {
  console.log("Save 2");
}
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");
}

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

<template>
  <div class="row q-col-gutter-md">
    <div class="col-xs-12 col-sm-3">
      <div class="toptitle">ประเมินชำนาญการ</div>
      <Stepper />
    </div>

    <div class="col-xs-12 col-sm-9">
      <div class="col-12 row">
        <div class="col-9">
          <div class="toptitle">
            {{ store.step }}.{{ store.titel[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">
        <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" />
              <Step2
                v-if="store.step === 2"
                @update:updatedForm="updatedFormStep2"
              />
              <Step3 v-if="store.step === 3" />
              <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" />
              <ViewStep3 v-if="store.step === 3" />
              <ViewStep7 v-if="store.step === 7" /> </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"
        />
        <q-btn
          unelevated
          label="ดำเนินการต่อ"
          color="public"
          @click="onCilckNextStep"
        />
      </div>
    </div>
  </div>
</template>

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