hrms-mgt/src/modules/15_development/components/MainTab.vue

<script setup lang="ts">
import { ref } from "vue";
import { useQuasar } from "quasar";
import { useRouter, useRoute } from "vue-router";

import BasicInfo from "@/modules/15_development/components/BasicInfo.vue";
import Target from "@/modules/15_development/components/Target.vue";
import ProjectDetail from "@/modules/15_development/components/ProjectDetail.vue";
import FollowResult from "@/modules/15_development/components/FollowResult.vue";
import Other from "@/modules/15_development/components/Other.vue";

import { useCounterMixin } from "@/stores/mixin";

const $q = useQuasar();
const router = useRouter();
const route = useRoute();
const { showLoader, hideLoader, dialogConfirm } = useCounterMixin();

const title = ref<string>(route.params.id ? "แก้ไข" : "เพิ่ม");
const tab = ref<string>("BasicInfo");

function onSubmit() {
  dialogConfirm($q, () => {});
}
</script>
<template>
  <q-form greedy @submit.prevent @validation-success="onSubmit">
    <div class="toptitle text-dark col-12 row items-center">
      <q-btn
        flat
        round
        dense
        class="q-mr-sm"
        icon="mdi-arrow-left"
        color="primary"
        @click="router.go(-1)"
      />
      {{ `${title}รายการโครงการ/หลักสูตรการฝึกอบรม` }}
      <q-space />
      <q-btn
        dense
        unelevated
        label="บันทึก"
        id="onSubmit"
        type="submit"
        color="public"
        class="q-px-md"
      >
        <q-tooltip>บันทึกข้อมูล</q-tooltip>
      </q-btn>
      <!-- <q-btn unelevated label="บันทึก" color="public" @click="onSubmit">
        <q-tooltip>บันทึกข้อมูล</q-tooltip>
      </q-btn> -->
    </div>

    <q-card flat bordered class="col-12">
      <q-tabs
        v-model="tab"
        dense
        align="left"
        inline-label
        class="rounded-borders"
        indicator-color="primary"
        active-bg-color="teal-1"
        active-class="text-primary"
      >
        <q-tab name="BasicInfo" label="ข้อมูลเบื้องต้น" />
        <q-tab name="Target" label="เป้าหมาย" />
        <q-tab name="ProjectDetail" label="ลักษณะโครงการ" />
        <q-tab name="FollowResult" label="การติดตามการประเมินผล" />
        <q-tab name="Other" label="อื่นๆ" />
      </q-tabs>
      <q-separator />
      <div class="q-pa-sm" style="padding: 0px">
        <q-tab-panels v-model="tab" animated>
          <q-tab-panel style="padding: 0px" name="BasicInfo">
            <BasicInfo />
          </q-tab-panel>
          <q-tab-panel name="Target"> <Target /></q-tab-panel>
          <q-tab-panel name="ProjectDetail"> <ProjectDetail /> </q-tab-panel>
          <q-tab-panel name="FollowResult"> <FollowResult /> </q-tab-panel>
          <q-tab-panel name="Other"> <Other /> </q-tab-panel>
        </q-tab-panels>
      </div>
    </q-card>
  </q-form>
</template>

<style scoped></style>