57 lines
2 KiB
Vue
57 lines
2 KiB
Vue
<script setup lang="ts">
|
|
import { ref } from "vue";
|
|
|
|
import { usePlacementDataStore } from "@/modules/05_placement/store";
|
|
|
|
import type { ItemTabs } from "@/modules/05_placement/interface/request/Main";
|
|
|
|
import ProbationPage from "@/modules/05_placement/components/probation/MainProbation.vue";
|
|
import AppointPage from "@/modules/05_placement/components/probation/MainAppoint.vue";
|
|
import SurveyPage from "@/modules/05_placement/components/probation/MainSurvey.vue";
|
|
|
|
const store = usePlacementDataStore();
|
|
|
|
const tabsManu = ref<ItemTabs[]>([
|
|
{ label: "รายการผู้ทดลองปฏิบัติหน้าที่ราชการ", name: "probation" },
|
|
{ label: "แต่งตั้งคณะกรรมการฯ", name: "appoint" },
|
|
{ label: "ผลสํารวจความคิดเห็น", name: "survey" },
|
|
]);
|
|
</script>
|
|
<template>
|
|
<div class="toptitle text-dark col-12 row items-center">
|
|
รายการผู้ทดลองปฏิบัติหน้าที่ราชการ
|
|
</div>
|
|
|
|
<q-card flat bordered class="col-12">
|
|
<q-tabs
|
|
v-model="store.tabsMain"
|
|
inline-label
|
|
align="left"
|
|
indicator-color="primary"
|
|
active-color="primary bg-teal-1"
|
|
>
|
|
<q-tab
|
|
v-for="(tab, index) in tabsManu"
|
|
:key="index"
|
|
:name="tab.name"
|
|
:label="tab.label"
|
|
/>
|
|
</q-tabs>
|
|
<q-separator />
|
|
<q-tab-panels v-model="store.tabsMain" animated>
|
|
<q-tab-panel name="probation" class="q-pa-sm">
|
|
<!-- รายการผู้ทดลองปฏิบัติหน้าที่ราชการ -->
|
|
<ProbationPage />
|
|
</q-tab-panel>
|
|
|
|
<q-tab-panel name="appoint" class="q-pa-none">
|
|
<!-- แต่งตั้งคณะกรรมการฯ -->
|
|
<AppointPage />
|
|
</q-tab-panel>
|
|
<q-tab-panel name="survey" class="q-pa-sm">
|
|
<!-- ผลสํารวจความคิดเห็น -->
|
|
<SurveyPage />
|
|
</q-tab-panel>
|
|
</q-tab-panels>
|
|
</q-card>
|
|
</template>
|