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

<script setup lang="ts">
import { ref } from "vue";

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

const store = useEvaluateStore();
</script>

<template>
  <q-stepper
    v-model="store.step"
    vertical
    animated
    flat
    ref="stepper"
    :bordered="false"
    header-nav
  >
    <q-step
      keep-alive
      :name="1"
      prefix="1"
      title="ตรวจสอบคุณสมบัติ"
      :done="store.currentStep >= 1"
      :disable="store.currentStep < 1"
    >
    </q-step>

    <q-step
      :name="2"
      prefix="2"
      title="จัดเตรียมเอกสารเล่ม 1"
      :done="store.currentStep >= 2"
      :disable="store.currentStep < 2"
    >
    </q-step>

    <q-step
      :name="3"
      prefix="3"
      title="ตรวจสอบเอกสารเล่ม 1"
      :done="store.currentStep >= 3"
      :disable="store.currentStep < 3"
    >
    </q-step>

    <q-step
      :name="4"
      prefix="4"
      title="รอตรวจสอบคุณสมบัติ"
      :done="store.currentStep >= 4"
      :disable="store.currentStep < 4"
    >
    </q-step>

    <q-step
      :name="5"
      prefix="5"
      title="ประกาศบนเว็บไซต์"
      :done="store.currentStep >= 5"
      :disable="store.currentStep < 5"
    >
    </q-step>

    <q-step
      :name="6"
      prefix="6"
      title="จัดเตรียมเอกสารเล่ม 2"
      :done="store.currentStep >= 6"
      :disable="store.currentStep < 6"
    >
    </q-step>

    <q-step
      :name="7"
      prefix="7"
      title="รอพิจารณาผลการประเมิน 2"
      :done="store.currentStep >= 7"
      :disable="store.currentStep < 7"
    >
    </q-step>

    <q-step
      :name="8"
      prefix="8"
      title="ตรวจสอบความถูกต้องของเอกสารเล่ม 2"
      :done="store.currentStep >= 8"
      :disable="store.currentStep < 8"
    >
    </q-step>

    <q-step
      :name="9"
      prefix="9"
      title="เสร็จสิ้น"
      :done="store.currentStep >= 9"
      :disable="store.currentStep < 9"
    >
    </q-step>
  </q-stepper>
</template>

<style scoped></style>