309 lines
11 KiB
Vue
309 lines
11 KiB
Vue
<script setup lang="ts">
|
|
import { ref,onMounted } from "vue";
|
|
import { useRoute, useRouter } from "vue-router";
|
|
import { useProbationStore } from "@/modules/11_probation/store/probation";
|
|
|
|
import Assign from "@/modules/11_probation/component/01_Assign.vue";
|
|
import RecordCareker from "@/modules/11_probation/component/02_RecordCareker.vue";
|
|
import RecordCommander from "@/modules/11_probation/component/03_RecordCommander.vue";
|
|
import EvaluateCommander from "@/modules/11_probation/component/04_EvaluateCommander.vue";
|
|
import EvaluateChairman from "@/modules/11_probation/component/05_EvaluateChairman.vue";
|
|
import EvaluateResult from "@/modules/11_probation/component/06_EvaluateResult.vue";
|
|
import EvaluateReport from "@/modules/11_probation/component/07_EvaluateReport.vue";
|
|
import SurveyComment from "@/modules/11_probation/component/08_SurveyComment.vue";
|
|
|
|
|
|
const drawer = ref<boolean>(true);
|
|
const activeTab = ref<string>("tab1");
|
|
const store = useProbationStore();
|
|
const router = useRouter();
|
|
const route = useRoute();
|
|
|
|
const id = ref<string>(route.params.id as string)
|
|
const profileId = ref<string>(route.params.profileId as string)
|
|
|
|
/**
|
|
* เปลี่ยน tab เมนู
|
|
* @param tab กำหนด tab
|
|
*/
|
|
function changeTab(tab: string) {
|
|
store.mainTab = tab;
|
|
activeTab.value = store.mainTab;
|
|
}
|
|
|
|
function onMobile(type: string) {
|
|
router.push(`/probation/${type}/${profileId.value}/${id.value}`);
|
|
}
|
|
|
|
/** ปุ่มกลับ */
|
|
function clickBack(){
|
|
router.push(`/probation`);
|
|
store.mainTab = "tab1";
|
|
};
|
|
|
|
/** เมื่อเริ่มโหลดหน้า ให้ tab เป็น tab1 */
|
|
onMounted(() => {
|
|
if (store.mainTab) {
|
|
activeTab.value = store.mainTab;
|
|
} else activeTab.value = "tab1";
|
|
});
|
|
</script>
|
|
<template>
|
|
<div class="col-xs-12 col-sm-12 col-md-11">
|
|
<div class="toptitle text-white col-12 row items-center">
|
|
<q-btn
|
|
icon="mdi-arrow-left"
|
|
unelevated
|
|
round
|
|
dense
|
|
flat
|
|
color="primary"
|
|
class="q-mr-sm"
|
|
@click="clickBack()"
|
|
/>
|
|
<div>การทดลองปฏิบัติหน้าที่ราชการ</div>
|
|
</div>
|
|
</div>
|
|
<q-card bordered :class='!$q.screen.gt.xs ? `borderRadius`:``'>
|
|
<q-layout
|
|
v-if="$q.screen.gt.xs"
|
|
view="hHh Lpr lff"
|
|
container
|
|
class="shadow-2 rounded-borders page-relative"
|
|
style="height: 82vh"
|
|
>
|
|
<q-header class="bg-grey-1"> </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 == '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 />
|
|
<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 == 'tab6'"
|
|
@click="changeTab('tab6')"
|
|
>
|
|
<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 == 'tab7'"
|
|
@click="changeTab('tab7')"
|
|
>
|
|
<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 == 'tab8'"
|
|
@click="changeTab('tab8')"
|
|
>
|
|
<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: 82vh">
|
|
<q-tab-panels
|
|
v-model="activeTab"
|
|
animated
|
|
class="shadow-2 rounded-borders"
|
|
vertical
|
|
>
|
|
<q-tab-panel name="tab1">
|
|
<Assign />
|
|
</q-tab-panel>
|
|
<q-tab-panel name="tab2" class="q-pa-none">
|
|
<RecordCareker />
|
|
</q-tab-panel>
|
|
<q-tab-panel name="tab3">
|
|
<RecordCommander />
|
|
</q-tab-panel>
|
|
<q-tab-panel name="tab4">
|
|
<EvaluateCommander />
|
|
</q-tab-panel>
|
|
<q-tab-panel name="tab5">
|
|
<EvaluateChairman />
|
|
</q-tab-panel>
|
|
<q-tab-panel name="tab6">
|
|
<EvaluateResult />
|
|
</q-tab-panel>
|
|
<q-tab-panel name="tab7">
|
|
<EvaluateReport />
|
|
</q-tab-panel>
|
|
<q-tab-panel name="tab8">
|
|
<SurveyComment />
|
|
</q-tab-panel>
|
|
|
|
</q-tab-panels>
|
|
</q-layout>
|
|
</q-page-container>
|
|
</q-layout>
|
|
<q-list v-else separator>
|
|
<q-item clickable v-ripple @click="onMobile('assign-work')" style="border-radius: 20px 20px 0 0;">
|
|
<q-item-section>แบบมอบหมายงาน ฯ</q-item-section>
|
|
<q-item-section avatar>
|
|
<q-avatar text-color="info" icon="mdi-chevron-right" />
|
|
</q-item-section>
|
|
</q-item>
|
|
<q-item clickable v-ripple @click="onMobile('record-careker')">
|
|
<q-item-section>
|
|
<q-item-label>แบบบันทึกผล</q-item-label>
|
|
<q-item-label class="text-grey-6">(ผู้ดูแล)</q-item-label>
|
|
</q-item-section>
|
|
<q-item-section avatar>
|
|
<q-avatar text-color="info" icon="mdi-chevron-right" />
|
|
</q-item-section>
|
|
</q-item>
|
|
<q-item clickable v-ripple @click="onMobile('record-commander')">
|
|
<q-item-section>
|
|
<q-item-label>แบบบันทึกผล</q-item-label>
|
|
<q-item-label class="text-grey-6">(ผู้บังคับบัญชา)</q-item-label>
|
|
</q-item-section>
|
|
<q-item-section avatar>
|
|
<q-avatar text-color="info" icon="mdi-chevron-right" />
|
|
</q-item-section>
|
|
</q-item>
|
|
<q-item clickable v-ripple @click="onMobile('evaluate-commander')">
|
|
<q-item-section>
|
|
<q-item-label>แบบประเมินผล</q-item-label>
|
|
<q-item-label class="text-grey-6">(ผู้บังคับบัญชา)</q-item-label>
|
|
</q-item-section>
|
|
<q-item-section avatar>
|
|
<q-avatar text-color="info" icon="mdi-chevron-right" />
|
|
</q-item-section>
|
|
</q-item>
|
|
<q-item clickable v-ripple @click="onMobile('evaluate-chairman')">
|
|
<q-item-section>
|
|
<q-item-label>แบบประเมินผล</q-item-label>
|
|
<q-item-label class="text-grey-6">(คณะกรรมการ)</q-item-label>
|
|
</q-item-section>
|
|
<q-item-section avatar>
|
|
<q-avatar text-color="info" icon="mdi-chevron-right" />
|
|
</q-item-section>
|
|
</q-item>
|
|
<q-item clickable v-ripple @click="onMobile('evaluate-result')">
|
|
<q-item-section>แบบรายงานการประเมิน ฯ</q-item-section>
|
|
<q-item-section avatar>
|
|
<q-avatar text-color="info" icon="mdi-chevron-right" />
|
|
</q-item-section>
|
|
</q-item>
|
|
<q-item clickable v-ripple @click="onMobile('evaluate-report')">
|
|
<q-item-section>ผลการประเมินการ ฯ</q-item-section>
|
|
<q-item-section avatar>
|
|
<q-avatar text-color="info" icon="mdi-chevron-right" />
|
|
</q-item-section>
|
|
</q-item>
|
|
<q-item clickable v-ripple @click="onMobile('survey-comment')" style="border-radius: 0 0 20px 20px;">
|
|
<q-item-section>แบบสํารวจความคิดเห็น</q-item-section>
|
|
<q-item-section avatar>
|
|
<q-avatar text-color="info" icon="mdi-chevron-right" />
|
|
</q-item-section>
|
|
</q-item>
|
|
</q-list>
|
|
</q-card>
|
|
</template>
|
|
<style scoped>
|
|
.text_left .q-tabs__content .q-tab {
|
|
justify-content: start;
|
|
padding-left: 20px;
|
|
}
|
|
|
|
.borderRadius{
|
|
border-radius: 20px!important;
|
|
}
|
|
|
|
|
|
</style>
|