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

Merge branch 'develop' into devTee

Browse source 
# Conflicts:
#	src/api/KPI/api.kpis.ts
This commit is contained in:
STW_TTTY\stwtt 2024-04-23 16:24:48 +07:00
commit a0da7e0c94
4 changed files with 251 additions and 49 deletions
Download patch file Download diff file Expand all files Collapse all files

5
src/api/KPI/api.kpis.ts
View file

@ -9,6 +9,7 @@ const KpiCapacity = `${env.API_URI}/kpi/capacity`;
const KpiFile = `${env.API_URI}/salary/file`;
const KpiUser = `${env.API_URI}/kpi/user`;
const kpiAchievement = `${env.API_URI}/kpi/user/achievement`;
export default {
kpiPeriod,
kpiEvaluation,
@ -17,6 +18,10 @@ export default {
KpiCapacity,
file: KpiFile,
kpiAchievement: (type: string) => `${kpiAchievement}/${type}`,
/** ผลสัมฤทธิ์ของงาน*/
fileByFile: (name: string, group: string, id: string, fileName: string) =>
`${url}/file/${name}/${group}/${id}/${fileName}`,

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

@ -1,38 +1,69 @@
<script setup lang="ts">
import { useQuasar, type QTableProps } from "quasar";
import { ref, onMounted } from "vue";
import { useQuasar } from "quasar";
import { useRoute } from "vue-router";
import config from "@/app.config";
import http from "@/plugins/http";
import Work from "@/modules/08_KPI/components/Tab/Topic/01_Indicator.vue";
import Competency from "@/modules/08_KPI/components/Tab/Topic/02_Competency.vue";
import { useCounterMixin } from "@/stores/mixin";
import { useKpiDataStore } from "@/modules/08_KPI/store";
const $q = useQuasar();
const route = useRoute();
const { showLoader, hideLoader, messageError } = useCounterMixin();
const store = useKpiDataStore();
const evaluationId = ref<string>(route.params.id.toString());
const rows_01 = ref<any[]>();
const rows_02 = ref<any[]>();
const rows_03 = ref<any[]>();
const rows_04 = ref<any[]>();
const rows_05 = ref<any[]>();
const total = ref<number>(0);
const resultWork = ref<number>(0);
const resultEvaluation = ref<number>(0);
function getList() {
const data = [
{
indicators: "ตัวชี้วัด 1",
target: null,
scoreLevel: "4",
weight: "50",
workResult: "ระดับ 5",
evaluationResults: "50",
},
];
rows_01.value = data;
function fetchListPlanned() {
showLoader();
http
.get(config.API.kpiAchievement("planned") + `?id=${evaluationId.value}`)
.then((res) => {
const data = res.data.result;
rows_01.value = data;
})
.catch((err) => {
messageError($q, err);
})
.finally(() => {
hideLoader();
});
}
function fetchListRole() {
showLoader();
http
.get(config.API.kpiAchievement("role") + `?id=${evaluationId.value}`)
.then((res) => {
const data = res.data.result;
rows_02.value = data;
})
.catch((err) => {
messageError($q, err);
})
.finally(() => {
hideLoader();
});
}
function fetchAssigned() {}
onMounted(() => {
getList();
fetchListPlanned();
fetchListRole();
});
</script>
@ -52,16 +83,19 @@ onMounted(() => {
v-model:data="rows_01"
:title="`1. งานตามแผนปฏิบัติราชการประจำปี`"
:page="1"
:fetchList="fetchListPlanned"
/>
<Work
v-model:data="rows_02"
:title="`2. งานตามหน้าที่ความรับผิดชอบหลัก`"
:page="2"
:fetchList="fetchListRole"
/>
<Work
v-model:data="rows_03"
:title="`3. งานที่ได้รับมอบหมายพิเศษ`"
:page="3"
:fetchList="fetchAssigned"
/>
<div class="row text-body2 text-weight-bold">
<div class="col-6 text-center row justify-center">

112
src/modules/08_KPI/components/Tab/Dialog/01_FormIndicator.vue
View file

@ -1,4 +1,3 @@
div
<script setup lang="ts">
import { ref, reactive, watch } from "vue";
import { useQuasar } from "quasar";
@ -20,10 +19,15 @@ const {
messageError,
dialogConfirm,
dialogMessageNotify,
success,
} = mixin;
const modal = defineModel<boolean>("modal", { required: true });
const numpage = defineModel<number>("numpage", { required: true });
const isStatusEdit = defineModel<boolean>("isStatusEdit", { required: true });
const kpiUserPlannedId = defineModel<string>("kpiUserPlannedId", {
required: true,
});
const search = ref<string>("");
const listCheckID = ref<string | null>(null);
@ -59,7 +63,6 @@ function fetchIndicators() {
const nodeId = store.dataProfile.nodeId;
const node = store.dataProfile.node;
const kpiPeriodId = store.dataEvaluation.kpiPeriodId;
showLoader();
http
.get(
@ -77,6 +80,27 @@ function fetchIndicators() {
});
}
function fetchIndicatorsByid(id: string) {
showLoader();
http
.get(config.API.kpiAchievement("planned") + `/${id}`)
.then((res) => {
const data = res.data.result;
formDetail.target = data.target;
formDetail.unit = data.unit;
formDetail.weight = data.weight;
formDetail.meaning = data.meaning;
formDetail.formula = data.formula;
clickList(data.kpiPlanId, true);
})
.catch((err) => {
messageError($q, err);
})
.finally(() => {
hideLoader();
});
}
function fetchListRole() {
const kpiPeriodId = store.dataEvaluation.kpiPeriodId;
const position = store.dataProfile.position;
@ -93,7 +117,28 @@ function fetchListRole() {
});
}
function clickList(id: string) {
function fetchRoleByid(id: string) {
showLoader();
http
.get(config.API.kpiAchievement("role") + `/${id}`)
.then((res) => {
const data = res.data.result;
formDetail.target = data.target;
formDetail.unit = data.unit;
formDetail.weight = data.weight;
formDetail.meaning = data.meaning;
formDetail.formula = data.formula;
clickList(data.kpiRoleId, true);
})
.catch((err) => {
messageError($q, err);
})
.finally(() => {
hideLoader();
});
}
function clickList(id: string, isData: boolean = false) {
showLoader();
const url = numpage.value === 1 ? config.API.kpiPlan : config.API.kpiRole;
http
@ -101,6 +146,13 @@ function clickList(id: string) {
.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.orgRevisionId = data.corgRevisionId;
formDetail.id = data.id;
formDetail.year = data.year;
@ -108,16 +160,11 @@ function clickList(id: string) {
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.nodeName = data.nodeName;
@ -165,7 +212,39 @@ function onSubmit() {
if (!listCheckID.value) {
dialogMessageNotify($q, "กรุณาเลือกตัวชี้วัด");
} else {
dialogConfirm($q, () => {});
dialogConfirm($q, async () => {
// showLoader();
const formBody = {
target: formDetail.target,
unit: Number(formDetail.unit),
weight: Number(formDetail.weight),
meaning: formDetail.meaning,
formula: formDetail.formula,
kpiUserEvaluationId: store.dataEvaluation.id,
kpiPlanId: numpage.value === 1 ? listCheckID.value : undefined,
kpiRoleId: numpage.value === 2 ? listCheckID.value : undefined,
};
try {
const urlPlanned = isStatusEdit.value
? config.API.kpiAchievement("planned") + `/${kpiUserPlannedId.value}`
: config.API.kpiAchievement("planned");
const urlRole = isStatusEdit.value
? config.API.kpiAchievement("role") + `/${kpiUserPlannedId.value}`
: config.API.kpiAchievement("role");
const url = numpage.value === 1 ? urlPlanned : urlRole;
const method = isStatusEdit.value ? "put" : "post";
await http[method](url, formBody);
success($q, "บันทึกข้อมูลสำเร็จ");
} catch (err) {
messageError($q, err);
} finally {
hideLoader();
closeDialog();
}
});
}
}
@ -175,8 +254,10 @@ watch(
if (modal.value) {
if (numpage.value === 1) {
fetchIndicators();
isStatusEdit.value && fetchIndicatorsByid(kpiUserPlannedId.value);
} else if (numpage.value === 2) {
fetchListRole();
isStatusEdit.value && fetchRoleByid(kpiUserPlannedId.value);
}
}
}
@ -219,6 +300,7 @@ watch(
</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">
@ -231,8 +313,9 @@ watch(
<q-separator />
<q-card-section class="q-pa-none">
<q-list separator dense>
<q-list separator>
<q-item
dense
v-for="(item, index) in listTarget"
:key="index"
clickable
@ -242,12 +325,12 @@ watch(
@click="clickList(item.id)"
>
<q-item-section class="q-pa-none">
<div class="row items-center" style="height: 20px">
<div class="row items-center" style="height: 50px">
<div class="col-4">
<span>{{ item.including }}</span>
{{ item.including }}
</div>
<div class="col-4">
<span>{{ item.includingName }}</span>
{{ item.includingName }}
</div>
</div>
</q-item-section>
@ -333,8 +416,7 @@ watch(
!!val || `${'กรุณากรอกน้ำหนัก (ร้อยละ)'}`,
]"
hide-bottom-space
mask="#"
reverse-fill-mask
mask="###"
/>
</div>
</div>

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

@ -1,36 +1,57 @@
<script setup lang="ts">
import { ref } from "vue";
import { ref, watch } from "vue";
import { useQuasar } from "quasar";
import { useRoute } from "vue-router";
import config from "@/app.config";
import http from "@/plugins/http";
import Dialog from "@/modules/08_KPI/components/Tab/Dialog/01_FormIndicator.vue";
import Dialog03 from "@/modules/08_KPI/components/Tab/Dialog/03_FormIndicatorSpecial.vue";
import type { QTableProps } from "quasar";
import { useCounterMixin } from "@/stores/mixin";
const $q = useQuasar();
const route = useRoute();
const {
date2Thai,
dialogRemove,
showLoader,
hideLoader,
messageError,
success,
} = useCounterMixin();
const title = defineModel<string>("title", { required: true });
const rows = defineModel<any>("data", { required: true });
const numpage = defineModel<number>("page", { required: true });
const mixin = useCounterMixin();
const { date2Thai } = mixin;
const props = defineProps({
fetchList: { type: Function, required: true },
});
const kpiUserPlannedId = ref<string>("");
const filterKeyword = ref<string>("");
const modal = ref<boolean>(false);
const modalAssigned = ref<boolean>(false);
const isStatusEdit = ref<boolean>(false);
const visibleColumns = ref<string[]>([
"indicators",
"includingName",
"target",
"scoreLevel",
"point",
"weight",
"workResult",
"achievement",
"evaluationResults",
]);
const columns = ref<QTableProps["columns"]>([
{
name: "indicators",
name: "includingName",
align: "left",
label: "ตัวชี้วัด",
sortable: true,
field: "indicators",
field: "includingName",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
@ -48,11 +69,11 @@ const columns = ref<QTableProps["columns"]>([
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "scoreLevel",
name: "point",
align: "left",
label: "ระดับคะแนนตามเกณฑ์การประเมิน",
sortable: true,
field: "scoreLevel",
field: "point",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
@ -70,11 +91,11 @@ const columns = ref<QTableProps["columns"]>([
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "workResult",
name: "achievement",
align: "left",
label: "ผลสำเร็จของงาน",
sortable: true,
field: "workResult",
field: "achievement",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
@ -93,13 +114,43 @@ const columns = ref<QTableProps["columns"]>([
},
]);
function onAdd() {
function onAdd(edit: boolean = false, id: string = "") {
if (numpage.value !== 3) {
modal.value = true;
isStatusEdit.value = edit;
kpiUserPlannedId.value = id;
} else if (numpage.value == 3) {
modalAssigned.value = true;
}
}
function onDelete(id: string) {
dialogRemove($q, async () => {
try {
showLoader();
const url =
numpage.value === 1
? config.API.kpiAchievement("planned") + `/${id}`
: config.API.kpiAchievement("role") + `/${id}`;
await http.delete(url);
props.fetchList?.();
success($q, "ลบข้อมูลสำเร็จ");
} catch (err) {
messageError($q, err);
} finally {
hideLoader();
}
});
}
watch(
() => modal.value,
() => {
if (!modal.value) {
props.fetchList?.();
}
}
);
</script>
<template>
<q-card bordered style="border-radius: 5px" class="no-shadow">
@ -114,7 +165,7 @@ function onAdd() {
color="primary"
size="12px"
dense
@click="onAdd"
@click="onAdd()"
>
<q-tooltip>เพิ่มข้อมูล</q-tooltip>
</q-btn>
@ -129,11 +180,11 @@ function onAdd() {
row-key="id"
flat
bordered
:paging="true"
dense
hide-pagination
class="custom-table2"
:visible-columns="visibleColumns"
:rows-per-page-options="[20]"
no-data-label="ไม่มีข้อมูล"
>
<template v-slot:header="props">
@ -154,13 +205,43 @@ function onAdd() {
{{ col.value ? col.value : "-" }}
</div>
</q-td>
<td>
<q-btn
flat
round
icon="edit"
color="edit"
size="12px"
dense
@click="onAdd(true, props.row.id)"
>
<q-tooltip>แก้ไขข้อมูล</q-tooltip>
</q-btn>
<q-btn
flat
round
icon="delete"
color="red"
size="12px"
dense
@click="onDelete(props.row.id)"
>
<q-tooltip>ลบข้อมูล</q-tooltip>
</q-btn>
</td>
</q-tr>
</template>
</q-table>
</q-card-section>
</q-card>
<Dialog v-model:modal="modal" :numpage="numpage" />
<Dialog
v-model:modal="modal"
:numpage="numpage"
:isStatusEdit="isStatusEdit"
:kpiUserPlannedId="kpiUserPlannedId"
/>
<Dialog03 v-model:modal="modalAssigned" :numpage="numpage" />
</template>
<style scoped>