284 lines
8.4 KiB
Vue
284 lines
8.4 KiB
Vue
<script setup lang="ts">
|
|
import { useRoute, useRouter } from "vue-router";
|
|
import { ref, defineAsyncComponent, onMounted } from "vue";
|
|
import { useProbationDataStore } from "@/modules/05_placement/storeProbation";
|
|
const DataStore = useProbationDataStore();
|
|
|
|
const ProbationFormAssign = defineAsyncComponent(
|
|
() => import("@/modules/05_placement/components/probation/FormAssign.vue")
|
|
);
|
|
const TabsTemplate1 = defineAsyncComponent(
|
|
() =>
|
|
import(
|
|
"@/modules/05_placement/components/probation/FormEvaluation/Template1.vue"
|
|
)
|
|
);
|
|
const TabsTemplateCommader = defineAsyncComponent(
|
|
() =>
|
|
import(
|
|
"@/modules/05_placement/components/probation/FormEvaluation/Template1Commader.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 checkRoutePermisson = ref<boolean>(route.name == "probationFormDetail");
|
|
const drawer = ref<boolean>(true);
|
|
const activeTab = ref<string>("");
|
|
const personalId = ref<string>(route.params.personalId.toString());
|
|
|
|
/**
|
|
* เปลี่ยน tab เมนู
|
|
* @param tab กำหนด tab
|
|
*/
|
|
function changeTab(tab: string) {
|
|
DataStore.mainTab = tab;
|
|
activeTab.value = DataStore.mainTab;
|
|
}
|
|
|
|
/** ปุ่มกลับ */
|
|
function clickBack() {
|
|
router.go(-1);
|
|
DataStore.mainTab = "tab1";
|
|
}
|
|
|
|
/** เมื่อเริ่มโหลดหน้า ให้ tab เป็น tab1 */
|
|
onMounted(() => {
|
|
if (DataStore.mainTab) {
|
|
activeTab.value = DataStore.mainTab;
|
|
} else activeTab.value = "tab1";
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<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>แบบมอบหมายงาน ฯ</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>
|
|
แบบบันทึกผล
|
|
<br />
|
|
<div class="text-caption text-grey-7">(ผู้ดูแล)</div>
|
|
</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 == 'tab8'"
|
|
@click="changeTab('tab8')"
|
|
>
|
|
<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 == 'tab3'"
|
|
@click="changeTab('tab3')"
|
|
>
|
|
<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>
|
|
แบบประเมินผล<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> แบบรายงาน<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="tab8">
|
|
<TabsTemplateCommader />
|
|
</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>
|