KPI
This commit is contained in:
STW_TTTY\stwtt
parent
243f500d4a
commit
4f973738a3
15 changed files with 1896 additions and 733 deletions
|
|
@ -17,6 +17,15 @@ import type {
|
|||
ListCriteria,
|
||||
} from "@/modules/14_KPI/interface/request/index";
|
||||
|
||||
import DialogListCriteria from "@/modules/14_KPI/components/Tab/Dialog/DialogListCriteria.vue";
|
||||
import DialogCompetncyByRow from "@/modules/14_KPI/components/Tab/Dialog/DialogCompetncyByRow.vue";
|
||||
import DialogLevel from "@/modules/14_KPI/components/Tab/Dialog/DialogLevel.vue";
|
||||
|
||||
const modalLevel = ref<boolean>(false);
|
||||
const modalCompetncyByRow = ref<boolean>(false);
|
||||
const dataCompetncyByRow = ref<any[]>([]);
|
||||
const dataLevel = ref<any[]>([]);
|
||||
const modalCriteria = ref<boolean>(false);
|
||||
const dataListCriteria = defineModel<ListCriteria[]>("dataListCriteria", {
|
||||
required: true,
|
||||
});
|
||||
|
|
@ -74,7 +83,7 @@ const columns = ref<QTableProps["columns"]>([
|
|||
name: "point",
|
||||
align: "left",
|
||||
label: "ระดับคะแนนตามเกณฑ์การประเมิน",
|
||||
sortable: true,
|
||||
sortable: false,
|
||||
field: "point",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
|
|
@ -108,7 +117,7 @@ const columns = ref<QTableProps["columns"]>([
|
|||
const visibleColumns = ref<string[]>(
|
||||
store.tabOpen === 3 && store.tabMain === "3"
|
||||
? ["name", "level", "point", "weight", "summary"]
|
||||
: ["name", "level", "weight"]
|
||||
: ["name", "level", "point", "weight"]
|
||||
);
|
||||
|
||||
const typeCompetency = ref<string>("");
|
||||
|
|
@ -162,7 +171,10 @@ function getData(type: string) {
|
|||
let weightAvg = weight / total;
|
||||
let resultAvg = result / total;
|
||||
|
||||
if (store.dataEvaluation.posExecutiveName != null) {
|
||||
if (
|
||||
store.dataEvaluation.posTypeName == "อำนวยการ" &&
|
||||
store.dataEvaluation.posTypeName == "บริหาร"
|
||||
) {
|
||||
store.competencyScoreVal =
|
||||
weightAvg != 0
|
||||
? (resultAvg / weightAvg) * store.excusiveCompetencyScore
|
||||
|
|
@ -173,6 +185,24 @@ function getData(type: string) {
|
|||
? (resultAvg / weightAvg) * store.competencyScore
|
||||
: 0;
|
||||
}
|
||||
|
||||
if (
|
||||
store.isUpdate &&
|
||||
store.tabMain === "3" &&
|
||||
(store.dataEvaluation.evaluationStatus === "EVALUATOR" ||
|
||||
store.dataEvaluation.evaluationStatus === "EVALUATING_EVALUATOR")
|
||||
) {
|
||||
http
|
||||
.put(config.API.updatePoint(store.dataEvaluation.id), {
|
||||
totalPoint2_1: store.competencyScoreVal.toFixed(2),
|
||||
summaryPoint: (
|
||||
store.indicatorScoreVal +
|
||||
store.competencyScoreVal +
|
||||
store.devScoreVal
|
||||
).toFixed(2),
|
||||
})
|
||||
.then((res) => {});
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
|
@ -256,6 +286,20 @@ watch(
|
|||
}
|
||||
);
|
||||
|
||||
function onInfo() {
|
||||
modalCriteria.value = true;
|
||||
}
|
||||
|
||||
function onAchievement(data: any) {
|
||||
modalCompetncyByRow.value = true;
|
||||
dataCompetncyByRow.value = data;
|
||||
}
|
||||
|
||||
function onLevel(num: number, list: any) {
|
||||
dataLevel.value = list.filter((i: any) => i.level == num);
|
||||
modalLevel.value = true;
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
for (let index = 0; index < store.competencyType.length; index++) {
|
||||
const element = store.competencyType[index];
|
||||
|
|
@ -266,13 +310,13 @@ onMounted(() => {
|
|||
|
||||
<template>
|
||||
<div v-for="(item, index) in store.competencyType" :key="index">
|
||||
<q-card bordered style="border-radius: 5px" class="no-shadow">
|
||||
<q-card bordered style="border-radius: 5px" class="no-shadow q-mt-sm">
|
||||
<q-card-section class="bg-grey-2 q-py-sm">
|
||||
<div class="row items-center">
|
||||
<div class="col">
|
||||
<span class="text-weight-medium">{{ item.name }}</span>
|
||||
<q-btn
|
||||
v-if="isEditStep1"
|
||||
v-if="isEditStep1 && item.id != 'HEAD' && item.id != 'GROUP'"
|
||||
class="q-ml-xs"
|
||||
flat
|
||||
round
|
||||
|
|
@ -302,7 +346,7 @@ onMounted(() => {
|
|||
</div>
|
||||
</q-card-section>
|
||||
<q-card-section class="q-pa-sm">
|
||||
<q-table
|
||||
<d-table
|
||||
ref="table"
|
||||
:columns="columns"
|
||||
:rows="rows[item.id]"
|
||||
|
|
@ -312,20 +356,44 @@ onMounted(() => {
|
|||
:paging="true"
|
||||
dense
|
||||
hide-pagination
|
||||
class="custom-table2"
|
||||
no-data-label="ไม่มีข้อมูล"
|
||||
:visible-columns="visibleColumns"
|
||||
>
|
||||
<template v-slot:header="props">
|
||||
<q-tr :props="props">
|
||||
<q-th auto-width />
|
||||
<q-th v-for="col in props.cols" :key="col.name" :props="props">
|
||||
<span class="text-weight-medium">{{ col.label }}</span>
|
||||
<span v-if="col.name == 'point'" class="text-weight-medium">
|
||||
<q-btn
|
||||
flat
|
||||
icon="mdi-eye"
|
||||
color="info"
|
||||
round
|
||||
class="q-ml-xs"
|
||||
@click="onInfo"
|
||||
>
|
||||
<q-tooltip>เกณฑ์การประเมิน</q-tooltip> </q-btn
|
||||
>{{ col.label }}</span
|
||||
>
|
||||
<span v-else class="text-weight-medium">{{ col.label }}</span>
|
||||
</q-th>
|
||||
<q-th auto-width />
|
||||
</q-tr>
|
||||
</template>
|
||||
<template v-slot:body="props">
|
||||
<q-tr :props="props" class="cursor-pointer">
|
||||
<q-td auto-width>
|
||||
<q-btn
|
||||
flat
|
||||
icon="mdi-eye"
|
||||
color="info"
|
||||
round
|
||||
class="q-ml-xs"
|
||||
@click="onAchievement(props.row.achievement)"
|
||||
>
|
||||
<q-tooltip>พฤติกรรมที่คาดหวัง/พฤติกรรมย่อย</q-tooltip>
|
||||
</q-btn>
|
||||
</q-td>
|
||||
<q-td v-for="col in props.cols" :key="col.id">
|
||||
<div v-if="col.name == 'createDate'">
|
||||
{{ col.value ? date2Thai(col.value) : "-" }}
|
||||
|
|
@ -348,29 +416,7 @@ onMounted(() => {
|
|||
</q-tooltip>
|
||||
</q-btn>
|
||||
</q-btn-group>
|
||||
<!-- <q-rating
|
||||
v-model="props.row.point"
|
||||
max="5"
|
||||
size="sm"
|
||||
color="grey"
|
||||
:color-selected="store.ratingColors"
|
||||
label="ระดับการประเมินพฤติกรรม"
|
||||
disable
|
||||
>
|
||||
<template
|
||||
v-for="(i, index) in sortedDataListCriteria"
|
||||
:key="i.level"
|
||||
v-slot:[`tip-${index+1}`]
|
||||
>
|
||||
<q-tooltip>
|
||||
<div class="text-body2">
|
||||
<span v-html="i.description"></span>
|
||||
</div>
|
||||
</q-tooltip>
|
||||
</template>
|
||||
</q-rating> -->
|
||||
</div>
|
||||
<!-- <div v-else>รอ ทำ select</div> -->
|
||||
</div>
|
||||
<div v-else-if="col.name == 'summary'">
|
||||
{{
|
||||
|
|
@ -379,6 +425,14 @@ onMounted(() => {
|
|||
: "-"
|
||||
}}
|
||||
</div>
|
||||
<div v-else-if="col.name == 'level'">
|
||||
<div
|
||||
@click="onLevel(props.row.level, props.row.achievement)"
|
||||
class="text-teal"
|
||||
>
|
||||
{{ props.row.level }}
|
||||
</div>
|
||||
</div>
|
||||
<div v-else>
|
||||
{{ col.value }}
|
||||
</div>
|
||||
|
|
@ -389,6 +443,96 @@ onMounted(() => {
|
|||
store.dataEvaluation.evaluationStatus == 'APPROVE' &&
|
||||
store.tabMain === '2'
|
||||
"
|
||||
>
|
||||
<q-btn
|
||||
flat
|
||||
round
|
||||
icon="mdi-account-details"
|
||||
color="blue-6"
|
||||
size="12px"
|
||||
dense
|
||||
@click="openPopupProgress(props.row.id)"
|
||||
>
|
||||
<q-tooltip>บันทึกเหตุการณ์/พฤติกรรม</q-tooltip>
|
||||
</q-btn>
|
||||
</div>
|
||||
|
||||
<div v-if="isEditStep1">
|
||||
<q-btn
|
||||
flat
|
||||
round
|
||||
:icon="
|
||||
item.id == 'HEAD' || item.id == 'GROUP'
|
||||
? 'edit'
|
||||
: 'edit'
|
||||
"
|
||||
color="info"
|
||||
@click.stop.pervent="onEdit(props.row, item.id)"
|
||||
>
|
||||
<q-tooltip>แก้ไข </q-tooltip>
|
||||
</q-btn>
|
||||
<q-btn
|
||||
flat
|
||||
round
|
||||
icon="delete"
|
||||
color="red"
|
||||
@click.stop.pervent="onDelete(props.row.id, item.id)"
|
||||
>
|
||||
<q-tooltip>ลบข้อมูล </q-tooltip>
|
||||
</q-btn>
|
||||
</div>
|
||||
</q-td>
|
||||
</q-tr>
|
||||
</template>
|
||||
<template #item="props">
|
||||
<div class="q-pa-xs col-xs-12 col-sm-6 col-md-4 col-lg-3">
|
||||
<q-card bordered flat>
|
||||
<q-list>
|
||||
<q-item
|
||||
v-for="col in props.cols.filter((col:any) => col.name !== 'desc')"
|
||||
:key="col.name"
|
||||
>
|
||||
<q-item-section>
|
||||
<q-item-label caption>{{ col.label }}</q-item-label>
|
||||
<q-item-label v-if="col.name == 'createDate'">
|
||||
{{ col.value ? date2Thai(col.value) : "-" }}
|
||||
</q-item-label>
|
||||
<q-item-label v-else-if="col.name == 'point'">
|
||||
<q-btn-group outline>
|
||||
<q-btn
|
||||
v-for="(i, index) in sortedDataListCriteria"
|
||||
:key="index"
|
||||
:class="props.row.point == i.level && 'active'"
|
||||
outline
|
||||
color="grey-6"
|
||||
:label="i.level"
|
||||
>
|
||||
<q-tooltip>
|
||||
<div class="text-body2">
|
||||
<span v-html="i.description"></span>
|
||||
</div>
|
||||
</q-tooltip>
|
||||
</q-btn>
|
||||
</q-btn-group>
|
||||
</q-item-label>
|
||||
<q-item-label v-else-if="col.name == 'summary'">
|
||||
{{
|
||||
props.row.point !== 0
|
||||
? (props.row.point / 5) * props.row.weight
|
||||
: "-"
|
||||
}}
|
||||
</q-item-label>
|
||||
<q-item-label v-else>{{ col.value ?? "-" }}</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</q-list>
|
||||
<q-separator />
|
||||
<q-card-actions
|
||||
align="around"
|
||||
v-if="
|
||||
store.dataEvaluation.evaluationStatus == 'APPROVE' &&
|
||||
store.tabMain === '2'
|
||||
"
|
||||
>
|
||||
<q-btn
|
||||
flat
|
||||
|
|
@ -413,9 +557,9 @@ onMounted(() => {
|
|||
>
|
||||
<q-tooltip>รายงานปัญหา</q-tooltip>
|
||||
</q-btn>
|
||||
</div>
|
||||
</q-card-actions>
|
||||
|
||||
<div v-if="isEditStep1">
|
||||
<q-card-actions align="around" v-if="isEditStep1">
|
||||
<q-btn
|
||||
flat
|
||||
round
|
||||
|
|
@ -434,11 +578,11 @@ onMounted(() => {
|
|||
>
|
||||
<q-tooltip>ลบข้อมูล </q-tooltip>
|
||||
</q-btn>
|
||||
</div>
|
||||
</q-td>
|
||||
</q-tr>
|
||||
</q-card-actions>
|
||||
</q-card>
|
||||
</div>
|
||||
</template>
|
||||
</q-table>
|
||||
</d-table>
|
||||
</q-card-section>
|
||||
</q-card>
|
||||
</div>
|
||||
|
|
@ -468,6 +612,18 @@ onMounted(() => {
|
|||
v-model:type="type"
|
||||
:idList="idList"
|
||||
/>
|
||||
|
||||
<DialogListCriteria
|
||||
v-model:modal="modalCriteria"
|
||||
v-model:dataListCriteria="dataListCriteria"
|
||||
/>
|
||||
|
||||
<DialogCompetncyByRow
|
||||
v-model:modal="modalCompetncyByRow"
|
||||
v-model:rows="dataCompetncyByRow"
|
||||
/>
|
||||
|
||||
<DialogLevel v-model:modal="modalLevel" v-model:rows="dataLevel" />
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue