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

10
src/api/KPI/api.KPI.ts Normal file
View file

@ -0,0 +1,10 @@
import env from "../index";
const kpiPeriod = `${env.API_URI}/kpi/period`;
const kpiEvaluation = `${env.API_URI}/kpi/user/evaluation`;
const kpiPlan = `${env.API_URI}/kpi/plan`;
export default {
kpiPeriod,
kpiEvaluation,
kpiPlan,
};

2
src/app.config.ts
View file

@ -10,6 +10,7 @@ import evaluate from "./api/evaluate/api.evaluate";
import support from "./api/support/api.support";
import org from "./api/org/api.org";
import scholarship from "./api/scholarship/api.scholarship";
import KPI from "./api/KPI/api.KPI";
const API = {
...testtest,
@ -21,6 +22,7 @@ const API = {
...support,
...org,
...scholarship,
...KPI,
};
export default {

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>

62
src/modules/08_KPI/views/form.vue
View file

@ -1,18 +1,19 @@
<script setup lang="ts">
import { ref, onMounted, reactive } from "vue";
import { useRoute, useRouter } from "vue-router";
import TabMain from "@/modules/08_KPI/views/TabMain.vue";
import http from "@/plugins/http";
import config from "@/app.config";
import TabMain from "@/modules/08_KPI/views/TabMain.vue";
import { useQuasar } from "quasar";
import { useCounterMixin } from "@/stores/mixin";
import { useQuasar } from "quasar";
import { useKpiDataStore } from "@/modules/08_KPI/store";
import type { FormProfile } from "@/modules/08_KPI/interface/request/index";
const route = useRoute();
const id = route.params.id as string;
const id = ref<string>(route.params.id as string);
const store = useKpiDataStore();
const $q = useQuasar();
const mixin = useCounterMixin();
const { showLoader, hideLoader, messageError } = mixin;
@ -27,18 +28,38 @@ const formProfile = reactive<FormProfile>({
level: "ชำนาญการพิเศษ",
status: "จัดเตรียมข้อมูล",
score: "100",
avartar:
"https://cdn.quasar.dev/img/boy-avatar.png",
avartar: "https://cdn.quasar.dev/img/boy-avatar.png",
});
const router = useRouter();
function fetchEvaluation() {
showLoader();
http
.get(config.API.kpiEvaluation + `/${id.value}`)
.then((res) => {
const data = res.data.result;
store.dataEvaluation = data;
console.log(data);
})
.catch((e) => {
messageError($q, e);
})
.finally(() => {
hideLoader();
});
}
function getProfile() {
showLoader();
http
.get(config.API.profileBykeycloak())
.get(config.API.profilePosition())
.then((res) => {
const data = res.data.result;
store.dataProfile = data;
console.log(data);
formProfile.fullName = `${data.prefix}${data.firstName} ${data.lastName}`;
})
.catch((e) => {
messageError($q, e);
@ -52,6 +73,7 @@ function getProfile() {
function onSave() {}
onMounted(() => {
fetchEvaluation();
getProfile();
});
</script>
@ -77,18 +99,18 @@ onMounted(() => {
>
</div>
<div class="col-12">
<q-card bordered flat class="relative-position">
<q-card bordered flat class="relative-position">
<div
class="absolute"
style="left: 2%; top: 50%; transform: translateY(-50%)"
>
<q-avatar size="95px">
<q-img :src="formProfile.avartar" />
</q-avatar>
</div>
class="absolute"
style="left: 2%; top: 50%; transform: translateY(-50%)"
>
<q-avatar size="95px">
<q-img :src="formProfile.avartar" />
</q-avatar>
</div>
<div class="row col-12">
<div class="row items-center col-12 q-pa-sm">
<div class="col-12" style="padding-left: 12%;">
<div class="col-12" style="padding-left: 12%">
<div class="row col-12 items-center">
<span class="text-h6 text-weight-medium text-primary">{{
formProfile.fullName ? formProfile.fullName : "-"
@ -119,10 +141,9 @@ onMounted(() => {
</div>
</div>
</div>
<div class="row items-center bg-toolbar col-12 q-pa-sm">
<div class="col-12 q-py-xs" style="padding-left: 12%;">
<div class="col-12 q-py-xs" style="padding-left: 12%">
<div class="row no-wrap">
<div class="col-2">
<div class="column">
@ -178,8 +199,7 @@ onMounted(() => {
</div>
</template>
<style>
.bg-toolbar{
background-color: #F2FBFA;
.bg-toolbar {
background-color: #f2fbfa;
}
</style>

512
src/modules/08_KPI/views/main.vue
View file

@ -1,101 +1,260 @@
<script setup lang="ts">
import { ref, onMounted } from "vue";
import { ref, onMounted, reactive, watch } from "vue";
import { useRouter } from "vue-router";
import { useQuasar } from "quasar";
import config from "@/app.config";
import http from "@/plugins/http";
import type { DataOptions } from "@/modules/08_KPI/interface/index/Main";
import type { QTableProps } from "quasar";
import DialogHeader from "@/components/DialogHeader.vue";
import { useCounterMixin } from "@/stores/mixin";
const mixin = useCounterMixin()
const { date2Thai } = mixin
const $q = useQuasar();
const mixin = useCounterMixin();
const router = useRouter();
const { showLoader, hideLoader, messageError, date2Thai, dialogConfirm } =
mixin;
const filterKeyword = ref<string>("");
/** Table*/
const rows = ref<any>();
const round = ref<string>("ID1");
const roundOp = ref<DataOptions[]>([
{
id: "ID1",
name: "รอบเมษา",
},
const visibleColumns = ref<string[]>([
"createdAt",
"evaluationStatus",
"evaluationResults",
]);
const visibleColumns = ref<string[]>(["createDate", "status", "result"]);
const columns = ref<QTableProps["columns"]>([
{
name: "createDate",
name: "createdAt",
align: "left",
label: "วันที่สร้างแบบประเมิน",
sortable: true,
field: "createDate",
field: "createdAt",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
format: (v) => date2Thai(v),
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "status",
name: "evaluationStatus",
align: "left",
label: "สถานะการประเมิน",
sortable: true,
field: "status",
field: "evaluationStatus",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
format: (v) => convertStatus(v),
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "result",
name: "evaluationResults",
align: "left",
label: "ผลการประเมิน",
sortable: true,
field: "result",
field: "evaluationResults",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
format: (v) => convertResults(v),
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
]);
/** ดึงข้อมูล */
function getData() {
const data = [
{
id: "ID1",
createDate: '2024-02-16T06:01:00.000Z',
status: "รอดำเนินการ",
result: "ผ่านเกณฑ์การประเมิน",
},
{
id: "ID1",
createDate: '2024-02-16T06:01:00.000Z',
status: "รอดำเนินการ",
result: "ผ่านเกณฑ์การประเมิน",
},
];
rows.value = data;
// showLoader();
// await http
// .get(config.API.orgPrefix)
// .then(async (res) => {
// })
// .catch((err) => {
// messageError($q, err);
// })
// .finally(() => {
// hideLoader();
// });
/** List*/
const year = ref<number>(new Date().getFullYear());
const round = ref<string>("");
const filterKeyword = ref<string>("");
const roundMainOp = ref<DataOptions[]>([]);
const roundDialgOp = ref<DataOptions[]>([]);
/** Dialog*/
const modalDialog = ref<boolean>(false);
const yearDialog = ref<number | null>(null);
const formRound = reactive({
kpiPeriodId: "",
profileId: "",
prefix: "",
firstName: "",
lastName: "",
});
/** pagetion*/
const formQuery = reactive({
page: 1,
pageSize: 10,
});
const totalList = ref<number>(1);
function fetchRoundOption(type: string) {
const y = type === "main" ? year.value : yearDialog.value;
showLoader();
http
.get(
config.API.kpiPeriod + `?page=${1}&pageSize=${10}&keyword=${""}&year=${y}`
)
.then((res) => {
const data = res.data.result.data;
const list = data.map((e: any) => ({
id: e.id,
name:
e.durationKPI === "OCT"
? "รอบตุลาคม"
: e.durationKPI === "APR"
? "รอบเมษายน"
: "",
}));
if (type === "main") {
roundMainOp.value = list;
round.value = "";
fetchList();
} else {
roundDialgOp.value = list;
formRound.kpiPeriodId = "";
}
})
.catch((err) => {
messageError($q, err);
})
.finally(() => {
hideLoader();
});
}
function onEdit(id:string){
router.push(`/KPI/${id}`)
/** ดึงข้อมูล */
function fetchList() {
showLoader();
http
.get(
config.API.kpiEvaluation +
`?page=${formQuery.page}&pageSize=${formQuery.pageSize}&kpiPeriodId=${round.value}`
)
.then((res) => {
const data = res.data.result;
totalList.value = Math.ceil(data.total / formQuery.pageSize);
rows.value = data.data;
})
.catch((err) => {
messageError($q, err);
})
.finally(() => {
hideLoader();
});
}
onMounted(async () => {
getData();
function changRound() {
formQuery.page = 1;
fetchList();
}
function redirectViewDetail(id: string) {
router.push(`/KPI/${id}`);
}
function onClickAddList() {
modalDialog.value = true;
}
function onCloseDialog() {
modalDialog.value = false;
formRound.kpiPeriodId = "";
yearDialog.value = null;
}
function onSubmit() {
dialogConfirm($q, () => {
showLoader();
http
.post(config.API.kpiEvaluation, formRound)
.then((res) => {
console.log(res);
const id = res.data.result;
redirectViewDetail(id);
onCloseDialog();
})
.catch((err) => {
messageError($q, err);
})
.finally(() => {
hideLoader();
});
});
}
function getProfile() {
showLoader();
http
.get(config.API.profileBykeycloak())
.then((res) => {
const data = res.data.result;
formRound.profileId = data.id;
formRound.prefix = data.prefix;
formRound.firstName = data.firstName;
formRound.lastName = data.lastName;
})
.catch((e) => {
messageError($q, e);
})
.finally(() => {
hideLoader();
});
}
const pagination = ref({
sortBy: "desc",
descending: false,
page: 1,
rowsPerPage: 10,
});
/**
* function updatePagination
* @param newPagination ข้อมูล Pagination ใหม่
*/
function updatePagination(newPagination: any) {
formQuery.page = 1;
formQuery.pageSize = newPagination.rowsPerPage;
}
function convertStatus(val: string) {
switch (val) {
case "PENDING":
return "รอดำเนินการ";
case "INPROGRESS":
return "กําลังดำเนินการ";
case "DONE":
return "ประเมินเสร็จสิ้น";
default:
break;
}
}
function convertResults(val: string) {
switch (val) {
case "PENDING":
return "รอดำเนินการ";
case "PASSED":
return "ผ่านการประเมิน";
case "NOTPASSED":
return "ไม่ผ่านการประเมิน";
default:
break;
}
}
watch(
() => formQuery.pageSize,
() => {
fetchList();
}
);
onMounted(() => {
getProfile();
fetchRoundOption("main");
});
</script>
@ -118,29 +277,73 @@ onMounted(async () => {
<div class="col-12">
<q-card bordered class="q-pa-md">
<q-toolbar style="padding: 0">
<q-select
v-model="round"
outlined
label="รอบการประเมิน"
dense
option-label="name"
option-value="id"
:options="roundOp"
style="min-width: 200px"
emit-value
map-options
/>
<q-btn class="q-ml-sm" flat round color="primary" icon="add" @click="router.push(`/KPI/add`)">
<q-tooltip> เพิ่มข้อมูล </q-tooltip>
</q-btn>
<div class="row q-gutter-sm">
<datepicker
menu-class-name="modalfix"
v-model="year"
:locale="'th'"
autoApply
year-picker
:enableTimePicker="false"
@update:model-value="fetchRoundOption('main')"
>
<template #year="{ year }">{{ year + 543 }}</template>
<template #year-overlay-value="{ value }">{{
parseInt(value + 543)
}}</template>
<template #trigger>
<q-input
dense
lazy-rules
outlined
class="inputgreen"
hide-bottom-space
:model-value="!!year ? year + 543 : null"
:label="`${'ปีงบประมาณ'}`"
>
<template v-slot:prepend>
<q-icon
name="event"
class="cursor-pointer"
style="color: var(--q-primary)"
>
</q-icon>
</template>
</q-input>
</template>
</datepicker>
<q-select
v-model="round"
outlined
label="รอบการประเมิน"
dense
option-label="name"
option-value="id"
:options="roundMainOp"
style="min-width: 200px"
emit-value
map-options
@update:model-value="changRound"
/>
<q-btn
flat
round
color="primary"
icon="add"
@click="onClickAddList"
>
<q-tooltip> เพิ่มข้อมูล </q-tooltip>
</q-btn>
</div>
<q-space />
<div class="row q-gutter-sm">
<q-input
<!-- <q-input
outlined
dense
v-model="filterKeyword"
label="ค้นหา"
></q-input>
></q-input> -->
<q-select
v-model="visibleColumns"
multiple
@ -158,44 +361,145 @@ onMounted(async () => {
</div>
</q-toolbar>
<q-table
ref="table"
:columns="columns"
:rows="rows"
:filter="filterKeyword"
row-key="id"
flat
bordered
:paging="true"
dense
class="custom-table2"
:visible-columns="visibleColumns"
>
<template v-slot:header="props">
<q-tr :props="props">
<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 />
</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" @click="onEdit(props.row.id)">
<div v-if="col.name == 'createDate'">
{{ col.value ? date2Thai(col.value):'-' }}
</div>
<div v-else>
{{ col.value }}
</div>
</q-td>
</q-tr>
</template>
</q-table>
<div class="col-12">
<q-table
ref="table"
:columns="columns"
:rows="rows"
:filter="filterKeyword"
row-key="id"
flat
bordered
:paging="true"
dense
class="custom-table2"
:rows-per-page-options="[10, 25, 50, 100]"
:visible-columns="visibleColumns"
v-model:pagination="pagination"
@update:pagination="updatePagination"
>
<template v-slot:header="props">
<q-tr :props="props">
<q-th
v-for="col in props.cols"
:key="col.name"
:props="props"
>
<span class="text-weight-medium">{{ col.label }}</span>
</q-th>
</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"
@click="redirectViewDetail(props.row.id)"
>
<div>
{{ col.value ? col.value : "-" }}
</div>
</q-td>
</q-tr>
</template>
<template v-slot:pagination="scope">
<q-pagination
v-model="formQuery.page"
active-color="primary"
color="dark"
:max="Number(totalList)"
size="sm"
boundary-links
direction-links
:max-pages="5"
@update:model-value="fetchList"
></q-pagination>
</template>
</q-table>
</div>
</q-card>
</div>
</div>
</div>
<q-dialog v-model="modalDialog" persistent>
<q-card class="col-12" style="width: 18%">
<q-form greedy @submit.prevent @validation-success="onSubmit">
<DialogHeader :tittle="'สร้างแบบประเมินผลฯ'" :close="onCloseDialog" />
<q-separator />
<q-card-section class="q-pa-none scroll" style="max-height: 80vh">
<div class="row q-pa-md q-col-gutter-md">
<div class="col-12">
<datepicker
menu-class-name="modalfix"
v-model="yearDialog"
:locale="'th'"
autoApply
year-picker
:enableTimePicker="false"
@update:model-value="fetchRoundOption('dialog')"
>
<template #year="{ year }">{{ year + 543 }}</template>
<template #year-overlay-value="{ value }">{{
parseInt(value + 543)
}}</template>
<template #trigger>
<q-input
dense
lazy-rules
outlined
class="inputgreen"
hide-bottom-space
:model-value="!!yearDialog ? yearDialog + 543 : null"
:label="`${'ปีงบประมาณ'}`"
:rules="[
(val:string) =>
!!val || `${'กรุณาเลือกปีงบประมาณ'}`,
]"
>
<template v-slot:prepend>
<q-icon
name="event"
class="cursor-pointer"
style="color: var(--q-primary)"
>
</q-icon>
</template>
</q-input>
</template>
</datepicker>
</div>
<div class="col-12">
<q-select
v-model="formRound.kpiPeriodId"
outlined
label="รอบการประเมิน"
dense
option-label="name"
option-value="id"
:options="roundDialgOp"
emit-value
map-options
hide-bottom-space
lazy-rules
:rules="[
(val:string) =>
!!val || `${'กรุณาเลือกรอบการประเมิน'}`,
]"
/>
</div>
</div>
</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>
</q-dialog>
</template>
<style scoped lang="scss">
.icon-color {