ปรับ tab ทดลองงาน
This commit is contained in:
DESKTOP-1R2VSQH\Lenovo ThinkPad E490
parent
6dee95b41b
commit
11594207d7
2 changed files with 138 additions and 43 deletions
|
|
@ -1,21 +1,35 @@
|
|||
<script setup lang="ts">
|
||||
import { useRoute, useRouter } from "vue-router";
|
||||
import { ref, defineAsyncComponent } from "vue";
|
||||
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")
|
||||
() =>
|
||||
import(
|
||||
"@/modules/05_placement/components/probation/FormEvaluation/Template1.vue"
|
||||
)
|
||||
);
|
||||
const TabsTemplate2 = defineAsyncComponent(
|
||||
() => import("@/modules/05_placement/components/probation/FormEvaluation/Template2.vue")
|
||||
() =>
|
||||
import(
|
||||
"@/modules/05_placement/components/probation/FormEvaluation/Template2.vue"
|
||||
)
|
||||
);
|
||||
const TabsTemplate2Format2 = defineAsyncComponent(
|
||||
() => import("@/modules/05_placement/components/probation/FormEvaluation/Template2Format2.vue")
|
||||
() =>
|
||||
import(
|
||||
"@/modules/05_placement/components/probation/FormEvaluation/Template2Format2.vue"
|
||||
)
|
||||
);
|
||||
const TabsTemplate3 = defineAsyncComponent(
|
||||
() => import("@/modules/05_placement/components/probation/FormEvaluation/Template3.vue")
|
||||
() =>
|
||||
import(
|
||||
"@/modules/05_placement/components/probation/FormEvaluation/Template3.vue"
|
||||
)
|
||||
);
|
||||
|
||||
const SummaryScore = defineAsyncComponent(
|
||||
|
|
@ -28,30 +42,69 @@ const SummarySurvey = defineAsyncComponent(
|
|||
const router = useRouter();
|
||||
const route = useRoute();
|
||||
const drawer = ref<boolean>(true);
|
||||
const activeTab = ref<string>("tab1");
|
||||
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;
|
||||
};
|
||||
</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-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.push(`/probation/detail/${personalId}`)" />
|
||||
<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.push(`/probation/detail/${personalId}`),
|
||||
(DataStore.mainTab = 'tab1')
|
||||
"
|
||||
/>
|
||||
การทดลองปฏิบัติหน้าที่ราชการ
|
||||
</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-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="activeTab = 'tab1'">
|
||||
<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> -->
|
||||
|
|
@ -59,68 +112,108 @@ const personalId = ref<string>(route.params.personalId.toString());
|
|||
<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
|
||||
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-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
|
||||
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>
|
||||
แบบประเมินผล<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="activeTab = 'tab4'">
|
||||
<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>
|
||||
แบบประเมินผล<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="activeTab = 'tab5'">
|
||||
<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-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="activeTab = 'tab6'">
|
||||
<q-item-section>
|
||||
ผลการประเมินการ ฯ
|
||||
</q-item-section>
|
||||
<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="activeTab = 'tab7'">
|
||||
<q-item-section>
|
||||
แบบสํารวจ<br/>ความคิดเห็น
|
||||
</q-item-section>
|
||||
<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-panels
|
||||
v-model="activeTab"
|
||||
animated
|
||||
class="shadow-2 rounded-borders"
|
||||
vertical
|
||||
>
|
||||
<q-tab-panel name="tab1">
|
||||
<ProbationFormAssign />
|
||||
</q-tab-panel>
|
||||
|
|
@ -144,11 +237,10 @@ const personalId = ref<string>(route.params.personalId.toString());
|
|||
<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>
|
||||
|
|
|
|||
|
|
@ -5,6 +5,8 @@ export const useAssignDataStore = defineStore("assign", () => {
|
|||
const assign = ref<any>([])
|
||||
const evaluate = ref<any>([])
|
||||
const tabs = ref<any>([]);
|
||||
const mainTab = ref<string>('tab1')
|
||||
|
||||
|
||||
const assignOutput = ref<any>([])
|
||||
const director = ref<any>([])
|
||||
|
|
@ -28,5 +30,6 @@ export const useAssignDataStore = defineStore("assign", () => {
|
|||
tabs,
|
||||
assignOutput,
|
||||
director,
|
||||
mainTab,
|
||||
};
|
||||
});
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue