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

<script setup lang="ts">
import { useEvaluateDetailStore } from "@/modules/12_evaluatePersonal/store/EvaluateDetail";

const store = useEvaluateDetailStore();
</script>

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

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

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

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

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

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

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

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

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

<style scoped></style>