hrms-mgt/src/modules/05_placement/components/probation/MainDetail.vue

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

const ProbationFormAssign = defineAsyncComponent(
  () => import("@/modules/05_placement/components/probation/FormAssign.vue")
);
const TabsTemplate1 = defineAsyncComponent(
  () => import("@/modules/05_placement/components/probation/FormEvaluation/Template1.vue")
);
const TabsTemplate2 = defineAsyncComponent(
  () => import("@/modules/05_placement/components/probation/FormEvaluation/Template2.vue")
);
const TabsTemplate2Format2 = defineAsyncComponent(
  () => import("@/modules/05_placement/components/probation/FormEvaluation/Template2Format2.vue")
);
const TabsTemplate3 = defineAsyncComponent(
  () => import("@/modules/05_placement/components/probation/FormEvaluation/Template3.vue")
);
// const Tabs2 = defineAsyncComponent(
//   () => import("@/modules/05_placement/components/probation/tabs/tabs2.vue")
// );
const Tabs3 = defineAsyncComponent(
  () => import("@/modules/05_placement/components/probation/tabs/tabs3.vue")
);
const Tabs4 = defineAsyncComponent(
  () => import("@/modules/05_placement/components/probation/tabs/tabs4.vue")
);

const router = useRouter();
const drawer = ref<boolean>(true);
const activeTab = ref<string>("tab1");
</script>

<template>
  <!-- <div class="toptitle text-dark col-12 row items-center">จัดการบัญชี 2</div> -->
  <q-card flat bordered class="col-12">
    <q-layout view="hHh Lpr lff" container class="shadow-2 rounded-borders page-relative" style="height: 82vh">
      <q-header class="bg-grey-1">
        <q-toolbar>
          <div class="text-h6 text-weight-medium text-dark col-12 row items-center q-py-md">
            <q-btn icon="mdi-arrow-left" unelevated round dense flat color="primary" class="q-mr-sm"
              @click="router.go(-1)" />
            การทดลองปฏิบัติหน้าที่ราชการของ นายสมคิด ยอดใจ
          </div>
        </q-toolbar>
        <q-separator />
      </q-header>
      <q-drawer v-model="drawer" show-if-above :width="150" :breakpoint="500" class="bg-grey-1" bordered>
        <q-scroll-area class="fit" :horizontal-thumb-style="{ opacity: 0 }">
          <q-list class="text-grey-7">
            <q-item active-class="text-primary bg-teal-1 text-weight-medium" clickable class="q-py-sm" dense v-ripple
              :active="activeTab == 'tab1'" @click="activeTab = 'tab1'">
              <!-- <q-item-section avatar style="min-width: 40px">
                <q-icon size="18px" name="mdi-file" />
              </q-item-section> -->

              <q-item-section> แบบมอบหมายงานฯ</q-item-section>
            </q-item>

            <q-item dense class="q-py-sm" active-class="text-primary bg-teal-1 text-weight-medium" clickable v-ripple
              :active="activeTab == 'tab2'" @click="activeTab = 'tab2'">
              <!-- <q-item-section avatar style="min-width: 40px">
                <q-icon size="18px" name="mdi-file-edit" />
              </q-item-section> -->

              <q-item-section>
                แบบบันทึกผล
              </q-item-section>
            </q-item>

            <q-item active-class="text-primary bg-teal-1 text-weight-medium" clickable class="q-py-sm" dense v-ripple
              :active="activeTab == 'tab3'" @click="activeTab = 'tab3'">
              <!-- <q-item-section avatar style="min-width: 40px">
                <q-icon size="18px" name="mdi-file-star" />
              </q-item-section> -->

              <q-item-section>
                แบบประเมินผล<br/>(ผู้บังคับบัญชา)
              </q-item-section>
            </q-item>

            <q-item active-class="text-primary bg-teal-1 text-weight-medium" clickable class="q-py-sm" dense v-ripple
              :active="activeTab == 'tab4'" @click="activeTab = 'tab4'">
              <!-- <q-item-section avatar style="min-width: 40px">
                <q-icon size="18px" name="mdi-file-star" />
              </q-item-section> -->

              <q-item-section>
                แบบประเมินผล<br/>(คณะกรรมการ)
              </q-item-section>
            </q-item>

            <q-item active-class="text-primary bg-teal-1 text-weight-medium" clickable class="q-py-sm" dense v-ripple
              :active="activeTab == 'tab5'" @click="activeTab = 'tab5'">
              <!-- <q-item-section avatar style="min-width: 40px">
                <q-icon size="18px" name="mdi-file-chart" />
              </q-item-section> -->

              <q-item-section>
                แบบรายงาน<br/>การประเมินฯ
              </q-item-section>
            </q-item>
          </q-list>
        </q-scroll-area>
      </q-drawer>
      <q-page-container>
        <q-layout view="hHh Lpr lFf" container style="height: 72vh">
          <q-tab-panels v-model="activeTab" animated class="shadow-2 rounded-borders" vertical>
            <q-tab-panel name="tab1">
              <ProbationFormAssign />
            </q-tab-panel>

            <q-tab-panel name="tab2">
              <TabsTemplate1 :activeTab="activeTab"/>
            </q-tab-panel>

            <q-tab-panel name="tab3">
              <TabsTemplate2 />
            </q-tab-panel>

            <q-tab-panel name="tab4">
              <TabsTemplate2Format2 />
            </q-tab-panel>

            <q-tab-panel name="tab5">
              <TabsTemplate3 />
            </q-tab-panel>
          </q-tab-panels>
        </q-layout>
      </q-page-container>
    </q-layout>
  </q-card>
</template>

<style lang="scss" scope>
.btn-absolute {
  z-index: 50;
  position: absolute;
  left: 200px;
  top: 10px;
}

.btnShadow {
  box-shadow: 0 1px 2px rgb(0 0 0 / 10%), 3px 3px 7px 1px rgba(95, 95, 95, 0.15) !important;
}
</style>