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

รายการขอรับประเมินผลการปฏิบัติราชการระดับบุคคล

Browse source
This commit is contained in:
DESKTOP-1R2VSQH\Lenovo ThinkPad E490 2024-04-22 17:25:58 +07:00
parent 95ac852446
commit 0adb7ae187
6 changed files with 786 additions and 304 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -36,7 +36,10 @@ onMounted(() => {
});
</script>
<template>
<q-scroll-area style="height: 56vh" class="bg-white row col-12 text-dark q-pa-md">
<q-scroll-area
style="height: 56vh"
class="bg-white row col-12 text-dark q-pa-md"
>
<div class="text-weight-bold text-body2">
<span class="txt-under text-blue-6">องค์ประกอบที่ 1</span>
<span class="q-ml-sm"> ผลสัมฤทธิ์ของงาน</span>
@ -44,18 +47,30 @@ onMounted(() => {
<div class="q-gutter-md q-mt-sm">
<!-- องค์ประกอบที่ 1 -->
<Work v-model:data="rows_01" :title="`1. งานตามแผนปฏิบัติราชการประจำปี`" :page="1" />
<Work v-model:data="rows_02" :title="`2. งานตามหน้าที่ความรับผิดชอบหลัก`" :page="2" />
<Work v-model:data="rows_03" :title="`3. งานที่ได้รับมอบหมาย`" :page="3" />
<Work
v-model:data="rows_01"
:title="`1. งานตามแผนปฏิบัติราชการประจำปี`"
:page="1"
/>
<Work
v-model:data="rows_02"
:title="`2. งานตามหน้าที่ความรับผิดชอบหลัก`"
:page="2"
/>
<Work
v-model:data="rows_03"
:title="`3. งานที่ได้รับมอบหมายพิเศษ`"
:page="3"
/>
<div class="row text-body2 text-weight-bold">
<div class="col-6 text-center row justify-center">
<span>รวมผลการประเมิน (ร้อยละ) 100</span>
<div class="text-primary q-pl-md">{{ total }}</div>
</div>
<div class="col-6 text-center row justify-center">
<span>สรุปผลการประเมินผลสัมฤทธิ์ของงาน (คะแนนเต็ม 70 คะแนน)</span>
<div class="text-primary q-pl-md">{{ resultWork }}</div>
<div class="text-primary q-pl-md">{{ resultWork }}</div>
</div>
</div>
@ -68,7 +83,11 @@ onMounted(() => {
</div>
<Capacity v-model:data="rows_04" :title="`1. สมรรถนะหลัก`" :page="1" />
<Capacity v-model:data="rows_05" :title="`2. สมรรถนะประจำกลุ่ม`" :page="2" />
<Capacity
v-model:data="rows_05"
:title="`2. สมรรถนะประจำกลุ่ม`"
:page="2"
/>
<div class="row text-body2 text-weight-bold justify-center">
<span>ผลการประเมินสมรรถนะ (20 คะแนน)</span>

471
src/modules/08_KPI/components/Tab/Dialog/01_Dialog.vue
View file

@ -1,82 +1,136 @@
<script setup lang="ts">
import { ref, reactive } from "vue";
import { ref, reactive, watch } from "vue";
import { useQuasar } from "quasar";
import config from "@/app.config";
import http from "@/plugins/http";
import DialogHeader from "@/components/DialogHeader.vue";
import { useCounterMixin } from "@/stores/mixin";
import { useKpiDataStore } from "@/modules/08_KPI/store";
const $q = useQuasar();
const mixin = useCounterMixin();
const store = useKpiDataStore();
const { showLoader, hideLoader, messageError, dialogConfirm } = mixin;
const modal = defineModel<boolean>("modal", { required: true });
const numpage = defineModel<number>("numpage", { required: true });
const splitterModel = ref<number>(25);
const search = ref<string>("");
const define = ref<string>("");
const formula = ref<string>("");
const listCheck = ref<number | null>();
const listTarget = ref<any>([
{
id: "ID1",
metricCode: "1กก",
indicatorName: "ตัวชี้วัด 1",
},
{
id: "ID2",
metricCode: "2กก",
indicatorName: "ตัวชี้วัด 2",
},
]);
const listCheck = ref<number | null>(null);
const listTarget = ref<any>([]);
const formDetail = reactive<any>({
oc: `สำนักงานคณะกรรมการข้าราชการกรุงเทพมหานคร/กองบริหารทั่วไป/กลุ่มงานช่วยนักบริหาร`,
indicators: "1",
code: "1กก",
name: "ตัวชี้วัด 1",
orgRevisionId: "",
id: "",
year: null,
round: "",
kpiPeriodId: "",
includingName: "",
including: "",
target: "",
unit: "",
weight: "100",
});
const formScore = reactive<any>({
score5: "5",
score4: "4",
score3: "3",
score2: "2",
score1: "1",
unit: null,
weight: null,
achievement1: "",
achievement2: "",
achievement3: "",
achievement4: "",
achievement5: "",
meaning: "",
formula: "",
node: null,
nodeId: "",
strategy: null,
strategyId: "",
});
const fieldDetailLabels = {
oc: "หน่วยงาน/ส่วนราชการ",
indicators: "ลำดับตัวชี้วัด",
code: "รหัสตัวชี้วัด",
name: "ชื่อตัวชี้วัด",
target: "ค่าเป้าหมาย",
unit: "หน่วยนับ",
weight: "น้ำหนัก (ร้อยละ)",
};
function fetchIndicators() {
const nodeId = store.dataProfile.nodeId;
const node = store.dataProfile.node;
const kpiPeriodId = store.dataEvaluation.kpiPeriodId;
const fieldLabels = {
score5: "5",
score4: "4",
score3: "3",
score2: "2",
score1: "1",
};
showLoader();
http
.get(
config.API.kpiPlan +
`?page=${1}&pageSize=${50}&kpiPeriodId=${kpiPeriodId}&nodeId=${nodeId}&node=${node}&keyword=${""}`
)
.then((res) => {
listTarget.value = res.data.result.data;
})
.catch((err) => {
messageError($q, err);
})
.finally(() => {
hideLoader();
});
}
function clickList(index: number, data: any) {
listCheck.value = index;
// dataList.value = data.map((i: any) => ({
// commandNo: i.commandNo,
// duty: i.duty,
// prefix: i.prefix,
// firstName: i.firstName,
// lastName: i.lastName,
// fullName:`${i.prefix}${i.firstName} ${i.lastName}`
// }));
function clickList(index: number, id: string) {
showLoader();
http
.get(config.API.kpiPlan + `/${id}`)
.then((res) => {
listCheck.value = index;
const data = res.data.result;
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.target = data.target;
formDetail.unit = data.unit;
formDetail.weight = data.weight;
formDetail.achievement1 = data.achievement1;
formDetail.achievement2 = data.achievement2;
formDetail.achievement3 = data.achievement3;
formDetail.achievement4 = data.achievement4;
formDetail.achievement5 = data.achievement5;
formDetail.meaning = data.meaning;
formDetail.formula = data.formula;
formDetail.node = data.node;
formDetail.nodeId = data.nodeId;
formDetail.strategy = data.strategy;
formDetail.strategyId = data.strategyId;
})
.catch((err) => {
messageError($q, err);
})
.finally(() => {
hideLoader();
});
}
/** ปิด dialog */
function closeDialog() {
modal.value = false;
search.value = ''
define.value = ''
formula.value = ''
search.value = "";
listCheck.value = null;
formDetail.orgRevisionId = "";
formDetail.id = "";
formDetail.year = "";
formDetail.round = "";
formDetail.kpiPeriodId = "";
formDetail.includingName = "";
formDetail.including = "";
formDetail.target = "";
formDetail.unit = "";
formDetail.weight = "";
formDetail.achievement1 = "";
formDetail.achievement2 = "";
formDetail.achievement3 = "";
formDetail.achievement4 = "";
formDetail.achievement5 = "";
formDetail.meaning = "";
formDetail.formula = "";
formDetail.node = "";
formDetail.nodeId = "";
formDetail.strategy = "";
formDetail.strategyId = "";
}
/** เรียกใช้ class */
@ -84,27 +138,40 @@ function getclass() {
return "inputgreen";
}
function onSubmit() {}
function onSubmit() {
dialogConfirm($q, () => {});
}
watch(
() => modal.value,
() => {
if (modal.value) {
fetchIndicators();
}
}
);
</script>
<template>
<q-dialog v-model="modal" persistent>
<q-card class="col-12" style="width: 85%">
<q-card class="col-12" style="width: 70%">
<q-form greedy @submit.prevent @validation-success="onSubmit">
<DialogHeader
:tittle="
numpage == 1
? 'เพิ่มตัวชี้วัดตามแผนปฏิบัติราชการประจําปี'
: 'เพิ่มตัวชี้วัดตามหน้าที่ความรับผิดชอบ'
"
:close="closeDialog"
/>
<q-separator />
<DialogHeader
:tittle="
numpage == 1
? 'เพิ่มตัวชี้วัดตามแผนปฏิบัติราชการประจําปี'
: 'เพิ่มตัวชี้วัดตามหน้าที่ความรับผิดชอบ'
"
:close="closeDialog"
/>
<q-separator />
<q-card-section class="q-pa-none scroll" style="max-height: 80vh">
<div class="col-12 row">
<div class="bg-grey-1 q-pa-md col-xs-12 col-sm-4 col-md-3 row lineRight">
<q-card-section class="q-pa-none scroll" style="max-height: 75vh">
<div class="col-12 row">
<div
class="bg-grey-1 q-pa-md col-xs-12 col-sm-4 col-md-3 row lineRight"
>
<div class="col-12 fit">
<div class="col-12 ">
<div class="col-12">
<q-input
v-model="search"
outlined
@ -122,47 +189,44 @@ function onSubmit() {}
/>
</template>
</q-input>
</div>
<q-card bordered flat class="q-mt-sm no-shadow bg-white col-12">
<div class="row q-px-md q-py-sm items-center bg-grey-1">
<div class="col-4">
<span>รหัสตัวชี้วัด</span>
</div>
<div class="col-4">
<span>ชื่อตัวชี้วัด</span>
</div>
</div>
<q-separator/>
<q-card-section class="q-pa-none">
<q-list
separator
dense
>
<q-item
v-for="(item, index) in listTarget"
:key="index"
clickable
v-ripple
:active="listCheck === index"
active-class="my-menu-link"
@click="clickList(index, item.id)"
>
<q-item-section class="q-pa-none">
<div class="row items-center" style="height: 20px">
<div class="col-4">
<span>{{ item.metricCode }}</span>
</div>
<div class="col-4">
<span>{{ item.indicatorName }}</span>
</div>
</div>
</q-item-section>
</q-item>
</q-list>
</q-card-section>
</q-card>
</div>
<q-card bordered flat class="q-mt-sm no-shadow bg-white col-12">
<div class="row q-px-md q-py-sm items-center bg-grey-1">
<div class="col-4">
<span>รหัสตัวชี้วัด</span>
</div>
<div class="col-4">
<span>ชื่อตัวชี้วัด</span>
</div>
</div>
<q-separator />
<q-card-section class="q-pa-none">
<q-list separator dense>
<q-item
v-for="(item, index) in listTarget"
:key="index"
clickable
v-ripple
:active="listCheck === index"
active-class="my-menu-link"
@click="clickList(index, item.id)"
>
<q-item-section class="q-pa-none">
<div class="row items-center" style="height: 20px">
<div class="col-4">
<span>{{ item.including }}</span>
</div>
<div class="col-4">
<span>{{ item.includingName }}</span>
</div>
</div>
</q-item-section>
</q-item>
</q-list>
</q-card-section>
</q-card>
</div>
</div>
<div class="col-xs-12 col-sm-8 col-md-9 row">
@ -174,57 +238,123 @@ function onSubmit() {}
</div>
<div class="col-8">
<q-card bordered class="full-height q-pa-sm">
<div
v-for="(field, index) in Object.keys(fieldDetailLabels)"
:key="index + 1"
>
<div class="row q-pa-sm q-col-gutter-lg col-12">
<div class="col-4 text-grey-6">
{{
fieldDetailLabels[
field as keyof typeof fieldDetailLabels
]
}}
</div>
<div class="q-pa-sm q-col-gutter-lg">
<div class="col-12 row">
<div class="col-4 text-grey-6">หน่วยงาน/ส่วนราชการ</div>
<div class="col-8">{{ formDetail.nodeId }}</div>
</div>
<div class="col-12 row">
<div class="col-4 text-grey-6">ยุทธศาสตร์ / แผน</div>
<div class="col-8">{{ formDetail.strategyId }}</div>
</div>
<div class="col-12 row">
<div class="col-4 text-grey-6">รหัสตัวชี้วัด</div>
<div class="col-8">{{ formDetail.including }}</div>
</div>
<div class="col-12 row">
<div class="col-4 text-grey-6">ชื่อตัวชี้วัด</div>
<div class="col-8">{{ formDetail.includingName }}</div>
</div>
<div class="col-12 row">
<div class="col-4 text-grey-6">ค่าเป้าหมาย</div>
<div class="col-8">
<span>{{
formDetail[field] ? formDetail[field] : "-"
}}</span>
<q-input
outlined
v-model="formDetail.target"
bg-color="white"
dense
class="inputgreen"
:rules="[
(val) => !!val || `${'กรุณากรอกค่าเป้าหมาย'}`,
]"
hide-bottom-space
/>
</div>
</div>
<div class="col-12 row">
<div class="col-4 text-grey-6">หน่วยนับ</div>
<div class="col-8">
<q-input
outlined
v-model="formDetail.unit"
bg-color="white"
dense
class="inputgreen"
:rules="[
(val) => !!val || `${'กรุณากรอกหน่วยนับ'}`,
]"
hide-bottom-space
mask="#"
reverse-fill-mask
/>
</div>
</div>
<div class="col-12 row">
<div class="col-4 text-grey-6">น้ำหนัก (ร้อยละ)</div>
<div class="col-8">
<q-input
outlined
v-model="formDetail.weight"
bg-color="white"
dense
class="inputgreen"
:rules="[
(val) =>
!!val || `${'กรุณากรอกน้ำหนัก (ร้อยละ)'}`,
]"
hide-bottom-space
mask="#"
reverse-fill-mask
/>
</div>
</div>
</div>
</q-card>
</div>
<div class="col-4 row ">
<div class="col-4 row">
<div class="row col-12 card-box">
<div class="col-12 bg-grey-2 row items-center text-weight-medium">
<div
class="col-12 bg-grey-2 row items-center text-weight-medium"
>
<div class="col-6 text-center">ระดับคะแนน</div>
<div class="col-6 text-center">ผลสำเร็จของงาน</div>
</div>
<div
v-for="(field, index) in Object.keys(fieldLabels)"
:key="index + 1"
class="row col-12 items-center lineTop"
>
<div
class="col-6 text-center text-body2"
>
{{ fieldLabels[field as keyof typeof fieldLabels] }}
</div>
<div class="col-6 text-center text-primary">
<span>{{
formScore[field] ? formScore[field] : "-"
}}</span>
</div>
<div class="row col-12 items-center lineTop">
<div class="col-6 text-center text-body2">5</div>
<div class="col-6 text-center text-primary">
{{ formDetail.achievement5 }}
</div>
</div>
<div class="row col-12 items-center lineTop">
<div class="col-6 text-center text-body2">4</div>
<div class="col-6 text-center text-primary">
{{ formDetail.achievement4 }}
</div>
</div>
<div class="row col-12 items-center lineTop">
<div class="col-6 text-center text-body2">3</div>
<div class="col-6 text-center text-primary">
{{ formDetail.achievement3 }}
</div>
</div>
<div class="row col-12 items-center lineTop">
<div class="col-6 text-center text-body2">2</div>
<div class="col-6 text-center text-primary">
{{ formDetail.achievement2 }}
</div>
</div>
<div class="row col-12 items-center lineTop">
<div class="col-6 text-center text-body2">1</div>
<div class="col-6 text-center text-primary">
{{ formDetail.achievement1 }}
</div>
</div>
</div>
</div>
<div class="col-12">
<q-input
v-model="define"
v-model="formDetail.meaning"
label="นิยามหรือความหมายของตัวชี้วัด"
type="textarea"
outlined
@ -237,7 +367,7 @@ function onSubmit() {}
</div>
<div class="col-12">
<q-input
v-model="formula"
v-model="formDetail.formula"
label="สูตรคำนวณ"
type="textarea"
outlined
@ -251,18 +381,15 @@ function onSubmit() {}
</div>
</div>
</div>
</q-card-section>
<q-separator />
</q-card-section>
<q-separator />
<q-card-actions align="right" class="bg-white text-teal">
<q-btn
label="บันทึก"
color="secondary"
type="submit"
><q-tooltip>บันทึกข้อมูล</q-tooltip></q-btn
>
</q-card-actions>
</q-form>
<q-card-actions align="right" class="bg-white text-teal">
<q-btn label="บันทึก" color="secondary" type="submit"
><q-tooltip>บันทึกข้อมูล</q-tooltip></q-btn
>
</q-card-actions>
</q-form>
</q-card>
</q-dialog>
</template>
@ -272,17 +399,17 @@ function onSubmit() {}
background: #ebf9f7 !important;
color: #1bb19ab8 !important;
}
.no-shadow{
box-shadow:none !important;
.no-shadow {
box-shadow: none !important;
}
.lineRight{
border-right: 1px solid #EDEDED !important;
.lineRight {
border-right: 1px solid #ededed !important;
}
.lineTop{
border-top: 1px solid #EDEDED !important;
.lineTop {
border-top: 1px solid #ededed !important;
}
.card-box{
border: 1px solid #EDEDED !important;
.card-box {
border: 1px solid #ededed !important;
border-radius: 8px;
}
</style>