hrms-user/src/modules/06_evaluate/components/step/step3.vue

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

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

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

const selectedItem = ref(1);

function handleItemClick(itemNumber: number) {
  store.tabPanels = itemNumber.toString();
  selectedItem.value = itemNumber;
}
</script>

<template>
  <q-list separator>
    <q-item
      clickable
      v-ripple
      :active="selectedItem === 1 ? true : false"
      active-class="text-primary"
      @click="handleItemClick(1)"
    >
      <q-item-section>แบบพิจารณาคุณสมบัติบุคคล</q-item-section>
    </q-item>
    <q-item
      clickable
      v-ripple
      :active="selectedItem === 2 ? true : false"
      active-class="text-primary"
      @click="handleItemClick(2)"
    >
      <q-item-section>แบบแสดงรายละเอียดการเสนอผลงาน</q-item-section>
    </q-item>
    <q-item
      clickable
      v-ripple
      :active="selectedItem === 3 ? true : false"
      active-class="text-primary"
      @click="handleItemClick(3)"
    >
      <q-item-section
        >แบบตรวจสอบความถูกต้องครบถ้วนของข้อมูลเพื่อประกอบการคัดเลือกบุคคล</q-item-section
      >
    </q-item>
    <q-item
      clickable
      v-ripple
      :active="selectedItem === 4 ? true : false"
      active-class="text-primary"
      @click="handleItemClick(4)"
    >
      <q-item-section> แบบประเมินคุณลักษณะบุคคล </q-item-section>
    </q-item>
    <q-item
      clickable
      v-ripple
      :active="selectedItem === 5 ? true : false"
      active-class="text-primary"
      @click="handleItemClick(5)"
    >
      <q-item-section> แบบสรุปข้อมูลของผู้ขอรับการคัดเลือก </q-item-section>
    </q-item>
    <q-item
      clickable
      v-ripple
      :active="selectedItem === 6 ? true : false"
      active-class="text-primary"
      @click="handleItemClick(6)"
    >
      <q-item-section> ผลงานที่จะส่งประเมิน </q-item-section>
    </q-item>
  </q-list>
</template>

<style scoped></style>