hrms-user/src/modules/06_evaluate/views/EvaluateMain.vue

<script setup lang="ts">
import { ref, onMounted } from "vue";
import { useQuasar } from "quasar";
import { useRouter } from "vue-router";
import http from "@/plugins/http";
import config from "@/app.config";

import Tab1 from "@/modules/06_evaluate/components/Tab1.vue"; // ชำนาญการ
import Tab2 from "@/modules/06_evaluate/components/Tab2.vue"; // ชำนาญการพิเศษ

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

const mixin = useCounterMixin();
const store = useEvaluateStore();
const router = useRouter();
const $q = useQuasar();

const { showLoader, hideLoader, messageError } = mixin;
</script>
<template>
  <div class="col-12 row justify-center">
    <div class="col-xs-12 col-sm-12 col-md-11">
      <div class="toptitle text-white col-12 row items-center">
        <!-- <q-btn
          icon="mdi-arrow-left"
          unelevated
          round
          dense
          flat
          color="primary"
          class="q-mr-sm"
          @click="router.go(-1)"
        /> -->
        <div>ประเมินบุคคล</div>
      </div>
    </div>

    <div class="col-xs-12 col-sm-12 col-md-11 row q-col-gutter-md">
      <div class="col-12 row">
        <q-card bordered class="col-12 row caedNone">
          <q-card class="col-12 items-center">
            <q-tabs
              v-model="store.tabMenu"
              dense
              align="left"
              inline-label
              class="rounded-borders"
              indicator-color="primary"
              active-bg-color="teal-1"
              active-class="text-primary"
            >
              <q-tab name="1" label="ชำนาญการ" />
              <q-tab name="2" label="ชำนาญการพิเศษ" />
            </q-tabs>
            <q-separator />
            <q-tab-panels v-model="store.tabMenu" animated>
              <q-tab-panel name="1">
                <Tab1 :title="'ชำนาญการ'" :step="store.step" />
              </q-tab-panel>

              <q-tab-panel name="2">
                <Tab1 :title="'ชำนาญการพิเศษ'" :step="store.step"
              /></q-tab-panel>
            </q-tab-panels>
          </q-card>
        </q-card>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped></style>