ปรับ layout และชื่อไฟล์ KPI

This commit is contained in:
Warunee Tamkoo 2024-04-23 11:18:33 +07:00
parent dd76936d92
commit e1619148c6
3 changed files with 20 additions and 13 deletions

View file

@ -38,7 +38,7 @@ onMounted(() => {
<template>
<q-scroll-area
style="height: 56vh"
style="height: 100vh"
class="bg-white row col-12 text-dark q-pa-md"
>
<div class="text-weight-bold text-body2">

View file

@ -1,13 +1,13 @@
<script setup lang="ts">
import { ref } from "vue";
import { useKpiDataStore } from '@/modules/08_KPI/store'
import { useKpiDataStore } from "@/modules/08_KPI/store";
import Assessment from '@/modules/08_KPI/components/Tab/01_Assessment.vue'
import CommanderAbove from '@/modules/08_KPI/components/Tab/02_CommanderAbove.vue'
import CommanderAboveOneStep from '@/modules/08_KPI/components/Tab/03_CommanderAboveOneStep.vue'
import File from '@/modules/08_KPI/components/Tab/04_File.vue'
import Assessment from "@/modules/08_KPI/components/Tab/01_Assessment.vue";
import CommanderAbove from "@/modules/08_KPI/components/Tab/02_CommanderAbove.vue";
import CommanderAboveOneStep from "@/modules/08_KPI/components/Tab/03_CommanderAboveOneStep.vue";
import File from "@/modules/08_KPI/components/Tab/04_File.vue";
const store = useKpiDataStore()
const store = useKpiDataStore();
const itemsTab = ref<any>([
{
@ -30,10 +30,16 @@ const itemsTab = ref<any>([
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-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"
@ -44,7 +50,7 @@ const splitterModel = ref<number>(12);
/> -->
<q-tab name="1" label="ผู้ขอรับการประเมิน" />
<q-tab name="2" label="ผู้บังคับบัญชา">
<div class="text-caption">เหนอขนไป</div>
<div class="text-caption">เหนอขนไป</div>
</q-tab>
<q-tab name="3" label="ผู้บังคับบัญชา">
<div class="text-caption">เหนอขนไปอกหนงข</div>
@ -77,10 +83,11 @@ const splitterModel = ref<number>(12);
</template>
</q-splitter>
</template>
<style scoped>
.hover-tab:hover {
background-color: #0793f1;
color: white !important;
opacity: 1 !important;
}
</style>
</style>

View file

@ -3,7 +3,7 @@ import { ref, onMounted, reactive } from "vue";
import { useRoute, useRouter } from "vue-router";
import http from "@/plugins/http";
import config from "@/app.config";
import TabMain from "@/modules/08_KPI/views/TabMain.vue";
import TabMain from "@/modules/08_KPI/components/Tab/TabMain.vue";
import { useQuasar } from "quasar";
import { useCounterMixin } from "@/stores/mixin";
@ -115,9 +115,9 @@ onMounted(() => {
/>
{{ id ? `แก้ไขแบบประเมิน` : `เพิ่มแบบประเมิน` }}
<q-space />
<q-btn label="บันทึก" color="secondary" unelevated @click="onSave"
<!-- <q-btn label="บันทึก" color="secondary" unelevated @click="onSave"
><q-tooltip>นท</q-tooltip></q-btn
>
> -->
</div>
<div class="col-12">
<q-card bordered flat class="relative-position">