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

<script setup lang="ts">
/** importStore*/
import { useEvaluateStore } from "@/modules/06_evaluate/store";
/**use*/
const store = useEvaluateStore();
</script>

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

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

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

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

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

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

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

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

    <q-step
      :name="9"
      prefix="9"
      title="เสร็จสิ้น"
      :done="store.currentStep >= 9"
      :disable="store.currentStep < 9"
      class="subStep"
    >
    </q-step>
  </q-stepper>
  <!-- <q-stepper
    v-model="store.step"
    dense
    vertical
    animated
    flat
    ref="stepper"
    class="stepEva"
  >
    <q-step
      keep-alive
      :name="1"
      prefix="1"
      title="ตรวจสอบคุณสมบัติ"
      :done="store.currentStep >= 1"
      :disable="store.currentStep < 1"
      class="subStep"
    >
    </q-step>

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

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

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

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

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

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

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

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

<style>
.stepEva{
  padding: 0px !important;
}
.subStep .q-stepper__tab{
  padding: 10px 10px !important;
  border-radius: 8px;
  font-size: 0.9rem;
}
</style>