ปรับ 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> <template>
<q-scroll-area <q-scroll-area
style="height: 56vh" style="height: 100vh"
class="bg-white row col-12 text-dark q-pa-md" class="bg-white row col-12 text-dark q-pa-md"
> >
<div class="text-weight-bold text-body2"> <div class="text-weight-bold text-body2">

View file

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

View file

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