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

<script setup lang="ts">
import { useRoute, useRouter } from "vue-router";
import { ref, defineAsyncComponent, onMounted } from "vue";
import { useAssignDataStore } from "@/modules/05_placement/storeAssign";
const DataStore = useAssignDataStore();

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 SummaryScore = defineAsyncComponent(
  () => import("@/modules/05_placement/components/probation/SummaryScore.vue")
);
const SummarySurvey = defineAsyncComponent(
  () => import("@/modules/05_placement/components/probation/SummarySurvey.vue")
);

const router = useRouter();
const route = useRoute();
const drawer = ref<boolean>(true);
const activeTab = ref<string>("");
const personalId = ref<string>(route.params.personalId.toString());

onMounted(() => {
  activeTab.value = DataStore.mainTab;
});
const changeTab = (tab: string) => {
  DataStore.mainTab = tab;
  activeTab.value = DataStore.mainTab;
};
const clickBack = () => {
  router.push(`/probation/detail/${personalId.value}`);
  DataStore.mainTab = "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="clickBack"
            />
            การทดลองปฏิบัติหน้าที่ราชการ
          </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-9">
            <q-item
              active-class="text-primary bg-teal-1 text-weight-medium"
              clickable
              class="q-py-sm"
              dense
              v-ripple
              :active="activeTab == 'tab1'"
              @click="changeTab('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="changeTab('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="changeTab('tab3')"
            >
              <!-- <q-item-section avatar style="min-width: 40px">
                <q-icon size="18px" name="mdi-file-star" />
              </q-item-section> -->

              <q-item-section>
                แบบประเมินผล<br />
                <div class="text-caption text-grey-7">(ผู้บังคับบัญชา)</div>
              </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="changeTab('tab4')"
            >
              <!-- <q-item-section avatar style="min-width: 40px">
                <q-icon size="18px" name="mdi-file-star" />
              </q-item-section> -->

              <q-item-section>
                แบบประเมินผล<br />
                <div class="text-caption text-grey-7">(คณะกรรมการ)</div>
              </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="changeTab('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-item
              active-class="text-primary bg-teal-1 text-weight-medium"
              clickable
              class="q-py-sm"
              dense
              v-ripple
              :active="activeTab == 'tab6'"
              @click="changeTab('tab6')"
            >
              <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 == 'tab7'"
              @click="changeTab('tab7')"
            >
              <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-panel name="tab6">
              <SummaryScore />
            </q-tab-panel>

            <q-tab-panel name="tab7">
              <SummarySurvey />
            </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>