hrms-bangkok/hrms-user
7
0
Fork 0
Code Issues Pull requests Projects Releases Packages 1 Wiki Activity Actions

KPI ปรับการแสดงผลตาม step

Browse source
This commit is contained in:
Warunee Tamkoo 2024-05-09 14:34:02 +07:00
parent d0627e3c5c
commit 2373a30bc4
5 changed files with 149 additions and 37 deletions
Download patch file Download diff file Expand all files Collapse all files

15
src/modules/08_KPI/components/Tab/01_Assessment.vue
View file

@ -4,8 +4,7 @@ import { useQuasar, type QTableProps } from "quasar";
import { useRoute } from "vue-router";
import DialogListCriteria from "@/modules/08_KPI/components/Tab/Dialog/DialogListCriteria.vue";
import DialogDevelop from '@/modules/08_KPI/components/Tab/Dialog/DialogDevelop.vue'
import DialogDevelop from "@/modules/08_KPI/components/Tab/Dialog/DialogDevelop.vue";
import config from "@/app.config";
import http from "@/plugins/http";
@ -18,7 +17,6 @@ import { useKpiDataStore } from "@/modules/08_KPI/store";
import type { ListCriteria } from "@/modules/08_KPI/interface/request/index";
const indicatorScore = defineModel("indicatorScore", {
type: Number,
default: 0,
@ -249,13 +247,13 @@ watch(
);
function onAdd() {
modalDevelop.value = true
editDevelop.value = false
modalDevelop.value = true;
editDevelop.value = false;
}
function onEdit(id: string) {
modalDevelop.value = true
editDevelop.value = true
modalDevelop.value = true;
editDevelop.value = true;
}
function onDelete(id: string) {}
@ -462,8 +460,7 @@ onMounted(() => {
v-model:dataListCriteria="dataListCriteria"
/>
<DialogDevelop v-model:modal="modalDevelop" v-model:isEdit="editDevelop"/>
<DialogDevelop v-model:modal="modalDevelop" v-model:isEdit="editDevelop" />
</template>
<style scoped>

44
src/modules/08_KPI/components/Tab/DialogEvaluate/01_Indicator.vue
View file

@ -126,9 +126,12 @@ function onSubmit() {
dialogConfirm($q, async () => {
try {
showLoader();
console.log(rows.value);
const formData = rows.value.map((e: any) => ({
id: e.id,
point: e.point,
summary: ((e.point / 5) * e.weight).toFixed(2),
}));
const url =
@ -183,7 +186,29 @@ function onSubmit() {
<q-tr :props="props" class="cursor-pointer">
<q-td v-for="col in props.cols" :key="col.id">
<div v-if="col.name === 'point'">
<q-rating
<q-btn-group outline>
<q-btn
v-for="i in 5"
:class="props.row.point == i && 'active'"
outline
color="grey-6"
:label="i"
@click="
() => {
updateAchievement(props.rowIndex, props.row);
props.row.point = i;
}
"
>
<q-tooltip>
<div class="text-body2">
<span v-html="props.row[`achievement${i}`]"></span>
</div>
</q-tooltip>
</q-btn>
</q-btn-group>
<!-- <q-rating
v-model="props.row.point"
max="5"
size="sm"
@ -209,7 +234,7 @@ function onSubmit() {
<template v-slot:tip-5>
<q-tooltip>{{ props.row.achievement5 }}</q-tooltip>
</template>
</q-rating>
</q-rating> -->
</div>
<div v-else-if="col.name === 'achievement'">
{{ props.row.point ? `ระดับ ${props.row.point}` : "" }}
@ -283,4 +308,19 @@ function onSubmit() {
top: 0;
}
}
.q-btn-group--outline > .q-btn-item:not(:last-child):before {
border-right: 1px solid #c4c4c4;
}
.q-btn-group--outline > .q-btn-item.active {
color: #2196f3 !important;
background-color: #cde6fb !important;
}
.q-btn-group--outline > .q-btn-item + .q-btn-item.active:before {
border-left: 1px solid #2196f3 !important;
background-color: #cde6fb;
}
.q-btn-group--outline > .q-btn-item.active:not(:last-child):before {
border: 1px solid #2196f3;
background-color: #cde6fb;
}
</style>

7
src/modules/08_KPI/components/Tab/DialogEvaluate/02_Competenct.vue
View file

@ -282,9 +282,14 @@ function onSubmit() {
}
.q-btn-group--outline > .q-btn-item.active {
color: #2196f3 !important;
background-color: #fff;
background-color: #cde6fb !important;
}
.q-btn-group--outline > .q-btn-item + .q-btn-item.active:before {
border-left: 1px solid #2196f3 !important;
background-color: #cde6fb;
}
.q-btn-group--outline > .q-btn-item.active:not(:last-child):before {
border: 1px solid #2196f3;
background-color: #cde6fb;
}
</style>

91
src/modules/08_KPI/components/Tab/Topic/01_Indicator.vue
View file

@ -36,14 +36,18 @@ const props = defineProps({
fetchList: { type: Function, required: true },
});
const visibleColumns = ref<string[]>([
"includingName",
"target",
"point",
"weight",
"achievement",
"evaluationResults",
]);
const visibleColumns = ref<string[]>(
store.tabOpen === 3
? [
"includingName",
"target",
"point",
"weight",
"achievement",
"evaluationResults",
]
: ["includingName", "target", "weight"]
);
const columns = ref<QTableProps["columns"]>([
{
name: "includingName",
@ -124,7 +128,7 @@ function onAdd(edit: boolean = false, id: string = "") {
isStatusEdit.value = edit;
kpiUserPlannedId.value = id;
// if (numpage.value !== 3) {
modal.value = true;
modal.value = true;
// } else if (numpage.value == 3) {
// modalAssigned.value = true;
// }
@ -191,7 +195,10 @@ watch(
<div class="col">
<span class="text-weight-medium">{{ title }}</span>
<q-btn
v-if="!isReadonly"
v-if="
store.dataEvaluation.evaluationStatus === 'NEW' &&
store.rolePerson === 'USER'
"
class="q-ml-xs"
flat
round
@ -204,9 +211,12 @@ watch(
<q-tooltip>เพิ่มข้อมูล</q-tooltip>
</q-btn>
</div>
<!-- <div class="col-auto">
<div class="col-auto">
<q-btn
v-if="!isReadonly"
v-if="
store.rolePerson === 'USER' &&
store.dataEvaluation.evaluationStatus === 'EVALUATING'
"
flat
round
icon="mdi-clipboard-check-outline"
@ -217,7 +227,7 @@ watch(
>
<q-tooltip>ประเมิน</q-tooltip>
</q-btn>
</div> -->
</div>
</div>
</q-card-section>
<q-separator />
@ -242,14 +252,35 @@ watch(
<q-th v-for="col in props.cols" :key="col.name" :props="props">
<span class="text-weight-medium">{{ col.label }}</span>
</q-th>
<q-th auto-width v-if="!isReadonly" />
<q-th
auto-width
v-if="
store.dataEvaluation.evaluationStatus === 'NEW' &&
store.rolePerson === 'USER'
"
/>
</q-tr>
</template>
<template v-slot:body="props">
<q-tr :props="props" class="cursor-pointer">
<q-td v-for="col in props.cols" :key="col.id">
<div v-if="col.name === 'point'">
<q-rating
<q-btn-group outline>
<q-btn
v-for="i in 5"
:class="props.row.point == i && 'active'"
outline
color="grey-6"
:label="i"
>
<q-tooltip>
<div class="text-body2">
<span v-html="props.row[`achievement${i}`]"></span>
</div>
</q-tooltip>
</q-btn>
</q-btn-group>
<!-- <q-rating
v-model="props.row.point"
max="5"
size="sm"
@ -273,7 +304,7 @@ watch(
<template v-slot:tip-5>
<q-tooltip>{{ props.row.achievement5 }}</q-tooltip>
</template>
</q-rating>
</q-rating> -->
</div>
<div v-else-if="col.name === 'achievement'">
{{ props.row.point ? `ระดับ ${props.row.point}` : "" }}
@ -289,7 +320,12 @@ watch(
{{ col.value ? col.value : "-" }}
</div>
</q-td>
<td v-if="!isReadonly">
<td
v-if="
store.dataEvaluation.evaluationStatus === 'NEW' &&
store.rolePerson === 'USER'
"
>
<q-btn
flat
round
@ -338,7 +374,7 @@ watch(
:isStatusEdit="isStatusEdit"
:kpiUserPlannedId="kpiUserPlannedId"
/>
<!-- <Dialog03
v-model:modal="modalAssigned"
:numpage="numpage"
@ -346,11 +382,11 @@ watch(
:kpiUserPlannedId="kpiUserPlannedId"
/> -->
<!-- <DialogEvaluate
<DialogEvaluate
v-model:modal="modalEvaluate"
:data="rows"
:numpage="numpage"
/> -->
/>
</template>
<style scoped>
.custom-table2 {
@ -393,4 +429,19 @@ watch(
top: 0;
}
}
.q-btn-group--outline > .q-btn-item:not(:last-child):before {
border-right: 1px solid #c4c4c4;
}
.q-btn-group--outline > .q-btn-item.active {
color: #2196f3 !important;
background-color: #cde6fb !important;
}
.q-btn-group--outline > .q-btn-item + .q-btn-item.active:before {
border-left: 1px solid #2196f3 !important;
background-color: #cde6fb;
}
.q-btn-group--outline > .q-btn-item.active:not(:last-child):before {
border: 1px solid #2196f3;
background-color: #cde6fb;
}
</style>

29
src/modules/08_KPI/components/Tab/Topic/02_Competency.vue
View file

@ -230,7 +230,10 @@ onMounted(() => {
<div class="col">
<span class="text-weight-medium">{{ item.name }}</span>
<q-btn
v-if="!isReadonly"
v-if="
store.dataEvaluation.evaluationStatus === 'NEW' &&
store.rolePerson === 'USER'
"
class="q-ml-xs"
flat
round
@ -246,7 +249,7 @@ onMounted(() => {
<q-space />
<q-btn
v-if="!isReadonly"
v-if="store.dataEvaluation.evaluationStatus == 'EVALUATING'"
flat
round
icon="mdi-clipboard-check-outline"
@ -279,7 +282,13 @@ onMounted(() => {
<q-th v-for="col in props.cols" :key="col.name" :props="props">
<span class="text-weight-medium">{{ col.label }}</span>
</q-th>
<q-th auto-width v-if="!isReadonly" />
<q-th
auto-width
v-if="
store.dataEvaluation.evaluationStatus === 'NEW' &&
store.rolePerson === 'USER'
"
/>
</q-tr>
</template>
<template v-slot:body="props">
@ -341,7 +350,12 @@ onMounted(() => {
{{ col.value }}
</div>
</q-td>
<q-td v-if="!isReadonly">
<q-td
v-if="
store.dataEvaluation.evaluationStatus === 'NEW' &&
store.rolePerson === 'USER'
"
>
<q-btn
flat
round
@ -430,9 +444,14 @@ onMounted(() => {
}
.q-btn-group--outline > .q-btn-item.active {
color: #2196f3 !important;
background-color: #fff;
background-color: #cde6fb !important;
}
.q-btn-group--outline > .q-btn-item + .q-btn-item.active:before {
border-left: 1px solid #2196f3 !important;
background-color: #cde6fb;
}
.q-btn-group--outline > .q-btn-item.active:not(:last-child):before {
border: 1px solid #2196f3;
background-color: #cde6fb;
}
</style>