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 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>
                ประเมินผล
              </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-chart" />
              </q-item-section>

              <q-item-section>
                รายงานการประเมินผล
              </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 /></q-tab-panel>

            <q-tab-panel name="tab3">
              <TabsTemplate2 />
            </q-tab-panel>
            <q-tab-panel name="tab4">
              <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>