114 lines
3.5 KiB
Vue
114 lines
3.5 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 isReadonly = <boolean>(route.name === "KPIEditEvaluator" ? true : false);
|
|
const indicatorScore = defineModel("indicatorScore", {
|
|
type: Number,
|
|
default: 0,
|
|
});
|
|
const competencyScore = defineModel("competencyScore", {
|
|
type: Number,
|
|
default: 0,
|
|
});
|
|
const itemsTab = ref<any>([
|
|
{
|
|
name: "1",
|
|
label: "ผู้ขอรับการประเมิน",
|
|
},
|
|
{
|
|
name: "2",
|
|
label: "ผู้ประเมิน",
|
|
},
|
|
{
|
|
name: "3",
|
|
label: "ผู้บังคับบัญชาเหนือขึ้นไป",
|
|
},
|
|
{
|
|
name: "4",
|
|
label: "ผู้บังคับบัญชาเหนือขึ้นไปอีกชั้นหนึ่ง",
|
|
},
|
|
{
|
|
name: "5",
|
|
label: "ไฟล์เอกสาร",
|
|
},
|
|
]);
|
|
|
|
const splitterModel = ref<number>(12);
|
|
</script>
|
|
|
|
<template>
|
|
<q-splitter v-model="splitterModel" disable>
|
|
<template v-slot:before>
|
|
<q-tabs
|
|
v-model="store.tabMain"
|
|
vertical
|
|
class="text-grey-7 text-weight-light"
|
|
active-class="bg-blue-1 text-blue-8 text-weight-bold"
|
|
>
|
|
<!-- <q-tab
|
|
class="hover-tab"
|
|
v-for="(tab, index) in itemsTab"
|
|
:key="index"
|
|
:name="tab.name"
|
|
:icon="tab.icon"
|
|
:label="tab.label"
|
|
/> -->
|
|
<q-tab name="1" label="ผู้ขอรับการประเมิน" />
|
|
<q-tab name="2" label="ผู้ประเมิน"> </q-tab>
|
|
<q-tab name="3" label="ผู้บังคับบัญชา">
|
|
<div class="text-caption">เหนือขึ้นไป</div>
|
|
</q-tab>
|
|
<q-tab name="4" label="ผู้บังคับบัญชา">
|
|
<div class="text-caption">เหนือขึ้นไปอีกชั้นหนึ่ง</div>
|
|
</q-tab>
|
|
<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'"
|
|
v-model:indicatorScore="indicatorScore"
|
|
v-model:competencyScore="competencyScore"
|
|
/>
|
|
<Evaluator v-if="store.tabMain === '2'" :type="'evaluator'" />
|
|
<Evaluator v-if="store.tabMain === '3'" :type="'commander'" />
|
|
<Evaluator 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>
|