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

ปรับ kpi

Browse source
This commit is contained in:
STW_TTTY\stwtt 2024-08-06 15:43:41 +07:00
parent 56fae384bf
commit b832a6e2a4
6 changed files with 174 additions and 127 deletions
Download patch file Download diff file Expand all files Collapse all files

136
src/modules/14_KPI/components/Tab/Dialog/01_FormIndicator.vue
View file

@ -26,6 +26,7 @@ const {
} = mixin;
const modal = defineModel<boolean>("modal", { required: true });
const checkDetail = defineModel<boolean>("checkDetail", { required: true });
const numpage = defineModel<number>("numpage", { required: true });
const isStatusEdit = defineModel<boolean>("isStatusEdit", { required: true });
const kpiUserPlannedId = defineModel<string>("kpiUserPlannedId", {
@ -252,51 +253,53 @@ function fetchspecialByid(id: string) {
}
function clickList(id: string, isData: boolean = false) {
showLoader();
const url =
numpage.value === 1
? config.API.kpiPlan
: numpage.value === 2
? config.API.kpiRole
: config.API.kpiSpecial;
http
.get(`${url}/${id}`)
.then((res) => {
listCheckID.value = id;
const data = res.data.result;
if (!isData) {
formDetail.target = data.target;
formDetail.unit = data.unit;
formDetail.weight = data.weight;
formDetail.meaning = data.meaning;
formDetail.formula = data.formula;
formDetail.achievement1 = data.achievement1;
formDetail.achievement2 = data.achievement2;
formDetail.achievement3 = data.achievement3;
formDetail.achievement4 = data.achievement4;
formDetail.achievement5 = data.achievement5;
}
formDetail.orgRevisionId = data.corgRevisionId;
formDetail.id = data.id;
formDetail.year = data.year;
formDetail.round = data.round;
formDetail.kpiPeriodId = data.kpiPeriodId;
formDetail.includingName = data.includingName;
formDetail.including = data.including;
formDetail.node = data.node;
formDetail.nodeId = data.nodeId;
formDetail.nodeName = data.nodeName;
formDetail.strategy = data.strategy;
formDetail.strategyId = data.strategyId;
formDetail.strategyName = data.strategyName;
formDetail.documentInfoEvidence = data.documentInfoEvidence;
})
.catch((err) => {
messageError($q, err);
})
.finally(() => {
hideLoader();
});
if (!checkDetail.value) {
showLoader();
const url =
numpage.value === 1
? config.API.kpiPlan
: numpage.value === 2
? config.API.kpiRole
: config.API.kpiSpecial;
http
.get(`${url}/${id}`)
.then((res) => {
listCheckID.value = id;
const data = res.data.result;
if (!isData) {
formDetail.target = data.target;
formDetail.unit = data.unit;
formDetail.weight = data.weight;
formDetail.meaning = data.meaning;
formDetail.formula = data.formula;
formDetail.achievement1 = data.achievement1;
formDetail.achievement2 = data.achievement2;
formDetail.achievement3 = data.achievement3;
formDetail.achievement4 = data.achievement4;
formDetail.achievement5 = data.achievement5;
}
formDetail.orgRevisionId = data.corgRevisionId;
formDetail.id = data.id;
formDetail.year = data.year;
formDetail.round = data.round;
formDetail.kpiPeriodId = data.kpiPeriodId;
formDetail.includingName = data.includingName;
formDetail.including = data.including;
formDetail.node = data.node;
formDetail.nodeId = data.nodeId;
formDetail.nodeName = data.nodeName;
formDetail.strategy = data.strategy;
formDetail.strategyId = data.strategyId;
formDetail.strategyName = data.strategyName;
formDetail.documentInfoEvidence = data.documentInfoEvidence;
})
.catch((err) => {
messageError($q, err);
})
.finally(() => {
hideLoader();
});
}
}
/** ปิด dialog */
@ -337,6 +340,9 @@ function closeDialog() {
formFilter.year = null;
formFilter.page = 1;
formFilter.pageSize = 20;
isStatusEdit.value = false
checkDetail.value = false;
}
function onSubmit() {
@ -420,12 +426,16 @@ watch(
if (numpage.value === 1) {
fetchListPlan();
isStatusEdit.value && fetchListPlanByid(kpiUserPlannedId.value);
checkDetail.value && fetchListPlanByid(kpiUserPlannedId.value);
} else if (numpage.value === 2) {
fetchListRole();
isStatusEdit.value && fetchRoleByid(kpiUserPlannedId.value);
checkDetail.value && fetchRoleByid(kpiUserPlannedId.value);
} else if (numpage.value === 3) {
fetchListSpecial();
isStatusEdit.value && fetchspecialByid(kpiUserPlannedId.value);
checkDetail.value && fetchspecialByid(kpiUserPlannedId.value);
}
}
}
@ -454,7 +464,14 @@ const title = computed(() => {
<q-dialog v-model="modal" persistent>
<q-card class="col-12" style="width: 100%">
<q-form greedy @submit.prevent @validation-success="onSubmit">
<DialogHeader :tittle="title" :close="closeDialog" />
<DialogHeader
:tittle="
checkDetail
? `รายละเอียดตัวชี้วัดตามแผนปฏิบัติราชการประจําปี`
: `${title}`
"
:close="closeDialog"
/>
<q-separator />
<q-card-section class="q-pa-none scroll" style="max-height: 75vh">
@ -463,6 +480,7 @@ const title = computed(() => {
<div class="col-12 fit">
<div class="row col-12" v-if="numpage !== 3">
<q-checkbox
:disable="checkDetail"
v-model="formFilter.isAll"
label="แสดงตัวชี้วัดภายใต้หน่วยงาน/ส่วนราชการทุกระดับ"
@update:model-value="fetchNewList()"
@ -471,6 +489,7 @@ const title = computed(() => {
<div class="row q-col-gutter-sm col-12">
<div class="col-5">
<datepicker
:readonly="checkDetail"
menu-class-name="modalfix"
v-model="formFilter.year"
:locale="'th'"
@ -486,6 +505,7 @@ const title = computed(() => {
<template #trigger>
<q-input
dense
:readonly="checkDetail"
outlined
:model-value="
formFilter.year === null || formFilter.year === ''
@ -519,6 +539,7 @@ const title = computed(() => {
<div class="col-7">
<q-select
dense
:readonly="checkDetail"
outlined
v-model="formFilter.period"
:options="roundOp"
@ -538,6 +559,7 @@ const title = computed(() => {
<q-input
v-model="formFilter.keyword"
outlined
:readonly="checkDetail"
dense
label="ค้นหา"
@keydown.enter.prevent="fetchNewList()"
@ -572,6 +594,7 @@ const title = computed(() => {
:active="listCheckID === item.id"
active-class="my-menu-link"
@click="clickList(item.id)"
:style="checkDetail ? 'pointer-events: none;' : ''"
>
<q-item-section class="q-pa-none">
<div class="row items-center full-width">
@ -639,6 +662,7 @@ const title = computed(() => {
<q-input
v-if="numpage === 3"
outlined
:readonly="checkDetail"
v-model="formDetail.including"
bg-color="white"
dense
@ -660,6 +684,7 @@ const title = computed(() => {
<q-input
v-if="numpage === 3"
outlined
:readonly="checkDetail"
v-model="formDetail.includingName"
bg-color="white"
dense
@ -678,6 +703,7 @@ const title = computed(() => {
<div class="col-8">
<q-input
outlined
:readonly="checkDetail"
v-model="formDetail.target"
bg-color="white"
dense
@ -698,6 +724,7 @@ const title = computed(() => {
v-model="formDetail.unit"
bg-color="white"
dense
:readonly="checkDetail"
class="inputgreen"
:rules="[
(val:string) => !!val || `${'กรุณากรอกหน่วยนับ'}`,
@ -712,6 +739,7 @@ const title = computed(() => {
<div class="col-4 text-grey-6">น้ำหนัก (ร้อยละ)</div>
<div class="col-8">
<q-input
:readonly="checkDetail"
outlined
v-model="formDetail.weight"
bg-color="white"
@ -743,6 +771,7 @@ const title = computed(() => {
<div class="col-6 text-center text-body2">5</div>
<div class="col-6">
<q-input
:readonly="checkDetail"
v-model="formDetail.achievement5"
outlined
dense
@ -758,6 +787,7 @@ const title = computed(() => {
<div class="col-6 text-center text-body2">4</div>
<div class="col-6 text-center text-primary">
<q-input
:readonly="checkDetail"
v-model="formDetail.achievement4"
outlined
dense
@ -773,6 +803,7 @@ const title = computed(() => {
<div class="col-6 text-center text-body2">3</div>
<div class="col-6 text-center text-primary">
<q-input
:readonly="checkDetail"
v-model="formDetail.achievement3"
outlined
dense
@ -788,6 +819,7 @@ const title = computed(() => {
<div class="col-6 text-center text-body2">2</div>
<div class="col-6 text-center text-primary">
<q-input
:readonly="checkDetail"
v-model="formDetail.achievement2"
outlined
dense
@ -803,6 +835,7 @@ const title = computed(() => {
<div class="col-6 text-center text-body2">1</div>
<div class="col-6 text-center text-primary">
<q-input
:readonly="checkDetail"
v-model="formDetail.achievement1"
outlined
dense
@ -821,6 +854,7 @@ const title = computed(() => {
label="นิยามหรือความหมายของตัวชี้วัด"
type="textarea"
outlined
:readonly="checkDetail"
dense
:rules="[(val:string) => !!val || `${'กรุณากรอกตัวชี้วัด'}`,]"
hide-bottom-space
@ -834,6 +868,7 @@ const title = computed(() => {
v-model="formDetail.formula"
label="สูตรคำนวณ"
type="textarea"
:readonly="checkDetail"
outlined
dense
:rules="[(val:string) => !!val || `${'กรุณากรอกตัวชี้วัด'}`,]"
@ -850,6 +885,7 @@ const title = computed(() => {
type="textarea"
outlined
dense
:readonly="checkDetail"
:rules="[(val:string) => !!val || `${'กรุณากรอกข้อมูลเอกสารหลักฐาน'}`,]"
hide-bottom-space
class="inputgreen"
@ -860,6 +896,7 @@ const title = computed(() => {
<datepicker
v-model="formDetail.startDate"
:locale="'th'"
:readonly="checkDetail"
autoApply
:enableTimePicker="false"
week-start="0"
@ -871,6 +908,7 @@ const title = computed(() => {
}}</template>
<template #trigger>
<q-input
:readonly="checkDetail"
dense
outlined
class="inputgreen"
@ -906,6 +944,7 @@ const title = computed(() => {
<datepicker
v-model="formDetail.endDate"
:locale="'th'"
:readonly="checkDetail"
autoApply
:enableTimePicker="false"
week-start="0"
@ -918,6 +957,7 @@ const title = computed(() => {
<template #trigger>
<q-input
dense
:readonly="checkDetail"
outlined
class="inputgreen"
:model-value="
@ -952,9 +992,9 @@ const title = computed(() => {
</div>
</div>
</q-card-section>
<q-separator />
<q-separator v-if="!checkDetail"/>
<q-card-actions align="right" class="bg-white text-teal">
<q-card-actions v-if="!checkDetail" align="right" class="bg-white text-teal">
<q-btn label="บันทึก" color="secondary" type="submit"
><q-tooltip>บันทึกข้อมูล</q-tooltip></q-btn
>

4
src/modules/14_KPI/components/Tab/Dialog/04_FormCompetency.vue
View file

@ -551,8 +551,8 @@ watch(
</q-card-section>
<q-separator />
<q-card-actions align="right" class="bg-white text-teal">
<q-btn label="บันทึก" color="secondary" type="submit"
<q-card-actions align="right" class="bg-white text-teal" v-if="competencyType !== 'HEAD' && competencyType !== 'GROUP'">
<q-btn v-if="competencyType !== 'HEAD' && competencyType !== 'GROUP'" label="บันทึก" color="secondary" type="submit"
><q-tooltip>บันทึกข้อมูล</q-tooltip></q-btn
>
</q-card-actions>

17
src/modules/14_KPI/components/Tab/Topic/01_Indicator.vue
View file

@ -32,7 +32,7 @@ const {
const title = defineModel<string>("title", { required: true });
const rows = defineModel<any[]>("data", { required: true });
const numpage = defineModel<number>("page", { required: true });
const checkDetail = ref<boolean>(false);
const props = defineProps({
fetchList: { type: Function, required: true },
});
@ -137,8 +137,9 @@ function onAdd(edit: boolean = false, id: string = "") {
}
function onClickView(id: string) {
checkDetail.value = true;
kpiUserPlannedId.value = id;
modalViewInfo.value = true;
modal.value = true;
}
async function onEvaluate() {
@ -310,7 +311,7 @@ const isEditStep3 = computed(() => {
dense
@click="onClickView(props.row.id)"
>
<q-tooltip>คำอธิบายผลสำเร็จของงาน</q-tooltip>
<q-tooltip>รายละเอียด</q-tooltip>
</q-btn></q-td
>
<q-td v-for="col in props.cols" :key="col.id">
@ -334,7 +335,10 @@ const isEditStep3 = computed(() => {
<div v-else-if="col.name === 'achievement'">
{{ props.row.point ? `ระดับ ${props.row.point}` : "" }}
</div>
<div v-else-if="col.name === 'includingName'" style="width: 200px; white-space: normal;">
<div
v-else-if="col.name === 'includingName'"
style="width: 200px; white-space: normal"
>
{{ props.row.includingName ? props.row.includingName : "-" }}
</div>
<div v-else-if="col.name === 'evaluationResults'">
@ -350,7 +354,7 @@ const isEditStep3 = computed(() => {
</q-td>
<td>
<div
v-if="
v-if="
(store.dataEvaluation.evaluationStatus == 'APPROVE' &&
store.tabMain === '2') ||
store.tabMain === '3'
@ -506,8 +510,9 @@ const isEditStep3 = computed(() => {
<Dialog
v-model:modal="modal"
:numpage="numpage"
:isStatusEdit="isStatusEdit"
v-model:isStatusEdit="isStatusEdit"
:kpiUserPlannedId="kpiUserPlannedId"
v-model:checkDetail="checkDetail"
/>
<!-- <Dialog03

85
src/modules/14_KPI/components/Tab/Topic/02_Competency.vue
View file

@ -15,6 +15,7 @@ import { useRoute } from "vue-router";
import type {
FormCapacityList,
ListCriteria,
DataOptions,
} from "@/modules/14_KPI/interface/request/index";
import DialogListCriteria from "@/modules/14_KPI/components/Tab/Dialog/DialogListCriteria.vue";
@ -126,8 +127,8 @@ function onAdd(type: string) {
modal.value = true;
}
const rows = ref<any[]>([]);
const lists = ref<any[]>([]);
const rows = ref<any>([]);
const lists = ref<any>([]);
// const resultEvaluation = ref<string | 0>(0);
function getData(type: any) {
@ -147,8 +148,8 @@ function getData(type: any) {
let result = 0;
let weight = 0;
let total = 0;
for (let index = 0; index < store.competencyType.length; index++) {
const element = await store.competencyType[index];
for (let index = 0; index < competencyType.value.length; index++) {
const element = await competencyType.value[index];
const dataArr = await lists.value.find(
(x: any) => x.type == element.id
@ -274,18 +275,6 @@ const isEditStep3 = computed(() => {
);
});
watch(
() => store.dataEvaluation.capacityPoint,
(newValue, oldValue) => {
if (newValue !== oldValue) {
for (let index = 0; index < store.competencyType.length; index++) {
const element = store.competencyType[index];
getData(element.id);
}
}
}
);
function onInfo() {
modalCriteria.value = true;
}
@ -300,16 +289,35 @@ function onLevel(num: number, list: any) {
modalLevel.value = true;
}
const competencyType = ref<DataOptions[]>([]);
onMounted(() => {
for (let index = 0; index < store.competencyType.length; index++) {
const element = store.competencyType[index];
getData(element.id);
}
setTimeout(async () => {
// console.log("posTypeName===>", store.dataEvaluation.posTypeName);
competencyType.value =
store.dataEvaluation.posTypeName == "อำนวยการ" ||
store.dataEvaluation.posTypeName == "บริหาร"
? store.competencyType.filter(
(x: DataOptions) =>
x.id == "HEAD" ||
x.id == "EXECUTIVE" ||
x.id == "INSPECTOR" ||
x.id == "DIRECTOR"
)
: store.competencyType.filter(
(x: DataOptions) => x.id == "HEAD" || x.id == "GROUP"
);
for (let index = 0; index < competencyType.value.length; index++) {
const element = competencyType.value[index];
getData(element.id);
}
}, 1000);
});
</script>
<template>
<div v-for="(item, index) in store.competencyType" :key="index">
<div v-for="(item, index) in competencyType" :key="index">
<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">
@ -349,7 +357,7 @@ onMounted(() => {
<d-table
ref="table"
:columns="columns"
:rows="rows[item.id]?.length !== 0 ? rows[item.id]:[]"
:rows="rows[item.id]"
row-key="id"
flat
bordered
@ -384,14 +392,19 @@ onMounted(() => {
<q-tr :props="props" class="cursor-pointer">
<q-td auto-width>
<q-btn
v-if="isEditStep1"
flat
icon="mdi-eye"
color="info"
round
class="q-ml-xs"
@click="onAchievement(props.row.achievement)"
:icon="
item.id == 'HEAD' || item.id == 'GROUP' ? 'mdi-eye' : 'edit'
"
color="info"
@click.stop.pervent="onEdit(props.row, item.id)"
>
<q-tooltip>พฤติกรรมที่คาดหวัง/พฤติกรรมย่อย</q-tooltip>
<q-tooltip v-if="item.id == 'HEAD' || item.id == 'GROUP'"
>รายละเอียด</q-tooltip
>
<q-tooltip v-else>แก้ไข</q-tooltip>
</q-btn>
</q-td>
<q-td v-for="col in props.cols" :key="col.id">
@ -439,7 +452,7 @@ onMounted(() => {
</q-td>
<q-td>
<div
v-if="
v-if="
(store.dataEvaluation.evaluationStatus == 'APPROVE' &&
store.tabMain === '2') ||
store.tabMain === '3'
@ -459,22 +472,6 @@ onMounted(() => {
</div>
<div v-if="isEditStep1">
<q-btn
flat
round
:icon="
item.id == 'HEAD' || item.id == 'GROUP'
? 'mdi-eye'
: 'edit'
"
color="info"
@click.stop.pervent="onEdit(props.row, item.id)"
>
<q-tooltip v-if="item.id == 'HEAD' || item.id == 'GROUP'"
>ดูรายละเอียด</q-tooltip
>
<q-tooltip v-else>แก้ไข</q-tooltip>
</q-btn>
<q-btn
flat
round

6
src/modules/14_KPI/interface/request/index.ts
View file

@ -53,6 +53,11 @@ interface FormComment {
reason: string;
}
interface DataOptions {
id: string;
name: string;
}
interface FormCommentByRole {
id: string;
topic: string;
@ -80,4 +85,5 @@ export type {
FormComment,
FormCommentByRole,
FormQuery,
DataOptions
};

53
src/modules/14_KPI/views/round.vue
View file

@ -505,34 +505,33 @@ onMounted(() => {
<template v-slot:body="props">
<q-tr :props="props" class="cursor-pointer">
<q-td>
<q-btn flat round color="grey" icon="mdi-dots-vertical">
<q-menu>
<q-list style="min-width: 150px" dense>
<q-item
v-if="props.row.isActive !== false && checkPermission($route)?.attrIsUpdate !== false"
clickable
v-close-popup
@click="onClickAction('close', props.row.id)"
>
<q-item-section avatar>
<q-icon :color="'orange'" :name="'mdi-close'" />
</q-item-section>
<q-item-section>ปิดรอบ</q-item-section>
</q-item>
<q-item
v-if="checkPermission($route)?.attrIsDelete !== false"
clickable
v-close-popup
@click="onClickAction('delete', props.row.id)"
>
<q-item-section avatar>
<q-icon :color="'red'" :name="'delete'" />
</q-item-section>
<q-item-section>ลบรอบ</q-item-section>
</q-item>
</q-list>
</q-menu>
<q-btn
v-if="
props.row.isActive !== false &&
checkPermission($route)?.attrIsUpdate !== false
"
flat
round
dense
color="orange"
icon="mdi-close"
>
<q-tooltip>ปิดรอบ</q-tooltip>
</q-btn>
<q-btn
v-if="checkPermission($route)?.attrIsDelete !== false"
clickable
v-close-popup
@click="onClickAction('delete', props.row.id)"
flat
round
dense
color="red"
icon="mdi-delete"
>
<q-tooltip>ลบรอบ</q-tooltip>
</q-btn>
</q-td>
<q-td v-for="col in props.cols" :key="col.name" :props="props">
<div class="table_ellipsis">