93 lines
2.7 KiB
Vue
93 lines
2.7 KiB
Vue
<script setup lang="ts">
|
|
import { ref } from "vue";
|
|
import { useKpiDataStore } from "@/modules/08_KPI/store";
|
|
import { useRoute } from "vue-router";
|
|
|
|
import Assessment from "@/modules/08_KPI/components/Tab/01_Assessment.vue";
|
|
import Evaluator from "@/modules/08_KPI/components/Tab/02_Evaluator.vue";
|
|
import CommanderAbove from "@/modules/08_KPI/components/Tab/03_CommanderAbove.vue";
|
|
import CommanderAboveOneStep from "@/modules/08_KPI/components/Tab/04_CommanderAboveOneStep.vue";
|
|
import File from "@/modules/08_KPI/components/Tab/05_File.vue";
|
|
|
|
const store = useKpiDataStore();
|
|
const route = useRoute();
|
|
|
|
const itemsTab = ref<any>([
|
|
{
|
|
name: "1",
|
|
label: "จัดทำแบบฟอร์มการประเมิน",
|
|
},
|
|
{
|
|
name: "2",
|
|
label: "รายงานความก้าวหน้า",
|
|
},
|
|
{
|
|
name: "3",
|
|
label: "รายงานผลสำเร็จของงาน",
|
|
},
|
|
{
|
|
name: "5",
|
|
label: "ไฟล์เอกสาร",
|
|
},
|
|
]);
|
|
|
|
const splitterModel = ref<number>(12);
|
|
</script>
|
|
|
|
<template>
|
|
<q-splitter v-model="splitterModel" :horizontal="!$q.screen.gt.xs" disable>
|
|
<template v-slot:before>
|
|
<q-tabs
|
|
v-model="store.tabMain"
|
|
:vertical="$q.screen.gt.xs"
|
|
class="text-grey-7 text-weight-light"
|
|
active-class="bg-blue-1 text-blue-8 text-weight-bold"
|
|
>
|
|
<q-tab name="1" label="จัดทำข้อตกลง" />
|
|
<q-tab
|
|
name="2"
|
|
label="รายงานความก้าวหน้า"
|
|
:disable="store.tabOpen < 2"
|
|
/>
|
|
<q-tab
|
|
name="3"
|
|
label="รายงานผลสำเร็จของงาน"
|
|
:disable="store.tabOpen < 3"
|
|
/>
|
|
<q-tab name="5" label="ไฟล์เอกสาร" />
|
|
</q-tabs>
|
|
</template>
|
|
|
|
<template v-slot:after>
|
|
<q-tab-panels
|
|
v-model="store.tabMain"
|
|
animated
|
|
swipeable
|
|
vertical
|
|
transition-prev="jump-up"
|
|
transition-next="jump-up"
|
|
>
|
|
<q-tab-panel
|
|
v-for="(tab, index) in itemsTab"
|
|
:key="index"
|
|
:name="tab.name"
|
|
class="q-pa-none"
|
|
>
|
|
<Assessment v-if="store.tabMain === '1'" />
|
|
<Assessment v-if="store.tabMain === '2'" :type="'evaluator'" />
|
|
<Assessment v-if="store.tabMain === '3'" :type="'commander'" />
|
|
<Assessment v-if="store.tabMain === '4'" :type="'commanderHigh'" />
|
|
<File v-if="store.tabMain === '5'" />
|
|
</q-tab-panel>
|
|
</q-tab-panels>
|
|
</template>
|
|
</q-splitter>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.hover-tab:hover {
|
|
background-color: #0793f1;
|
|
color: white !important;
|
|
opacity: 1 !important;
|
|
}
|
|
</style>
|