UI รายการการประเมินผลการปฏิบัติราชการระดับบุคคล
This commit is contained in:
DESKTOP-1R2VSQH\Lenovo ThinkPad E490
parent
d43748e450
commit
0b50e82c5e
19 changed files with 4442 additions and 41 deletions
|
|
@ -2,22 +2,23 @@ import env from "../index";
|
|||
const KPI = `${env.API_URI}/kpi`;
|
||||
const kpiPeriod = `${env.API_URI}/kpi/period`;
|
||||
const kpiEvaluation = `${env.API_URI}/kpi/evaluation`;
|
||||
const kpiUserEvaluation = `${env.API_URI}/kpi/user/evaluation`;
|
||||
const kpiAchievement = `${env.API_URI}/kpi/user/achievement`;
|
||||
const kpiGroup = `${env.API_URI}/kpi/group`;
|
||||
const kpiPlan = `${env.API_URI}/kpi/plan`;
|
||||
const kpiCapacity = `${env.API_URI}/kpi/capacity`;
|
||||
const kpiLink = `${env.API_URI}/kpi/link`;
|
||||
const KpiUser = `${env.API_URI}/kpi/user`;
|
||||
export default {
|
||||
KPI,
|
||||
/** รอบการประเมินผล*/
|
||||
kpiPeriod: `${kpiPeriod}`,
|
||||
kpiPeriod,
|
||||
kpiPeriodById: (id: string) => `${kpiPeriod}/${id}`,
|
||||
kpiEvaluation,
|
||||
|
||||
|
||||
/** role */
|
||||
kpiRoleMainList:`${KPI}/role`,
|
||||
kpiRoleMainList: `${KPI}/role`,
|
||||
|
||||
|
||||
kpiGroup,
|
||||
kpiGroupById: (id: string) => `${kpiGroup}/${id}`,
|
||||
kpiPlan,
|
||||
|
|
@ -27,4 +28,10 @@ export default {
|
|||
kpiCapacity,
|
||||
|
||||
kpiLink,
|
||||
|
||||
kpiUserEvaluation,
|
||||
profilePosition: () => `${env.API_URI}/org/profile/keycloak/position`,
|
||||
kpiAchievement: (type: string) => `${kpiAchievement}/${type}`,
|
||||
kpiAchievementPoint: (type: string) => `${kpiAchievement}/${type}/point`,
|
||||
kpiUserCapacity: `${KpiUser}/capacity`,
|
||||
};
|
||||
|
|
|
|||
238
src/modules/14_KPI/components/detailList/01_Assessment.vue
Normal file
238
src/modules/14_KPI/components/detailList/01_Assessment.vue
Normal file
|
|
@ -0,0 +1,238 @@
|
|||
<script setup lang="ts">
|
||||
import { ref, onMounted, computed } 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/14_KPI/components/detailList/Topic/01_Indicator.vue";
|
||||
import Competency from "@/modules/14_KPI/components/detailList/Topic/02_Competency.vue";
|
||||
import DialogListCriteria from "@/modules/14_KPI/components/detailList/Dialog/DialogListCriteria.vue";
|
||||
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
import { useKPIDataStore } from "@/modules/14_KPI/store/KPIStore";
|
||||
|
||||
// import type { ListCriteria } from "@/modules/08_KPI/interface/request/index";
|
||||
|
||||
const dataListCriteria = ref<any[]>([]);
|
||||
|
||||
const modalCriteria = ref<boolean>(false);
|
||||
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 totalResults1 = ref<number>(0);
|
||||
const totalResults2 = ref<number>(0);
|
||||
const totalResults3 = ref<number>(0);
|
||||
// const resultWork = ref<number>(0);
|
||||
|
||||
function fetchListPlanned() {
|
||||
showLoader();
|
||||
http
|
||||
.get(config.API.kpiAchievement("planned") + `?id=${evaluationId.value}`)
|
||||
.then((res) => {
|
||||
const data = res.data.result;
|
||||
const newRow = data.map((e: any) => ({
|
||||
...e,
|
||||
evaluationResults: (e.point / 5) * e.weight,
|
||||
}));
|
||||
rows_01.value = newRow;
|
||||
if (newRow.length > 0) {
|
||||
const result = newRow.reduce(
|
||||
(sum: number, e: any) => sum + e.evaluationResults,
|
||||
0
|
||||
);
|
||||
const weight = newRow.reduce(
|
||||
(sum: number, e: any) => sum + e.weight,
|
||||
0
|
||||
);
|
||||
totalResults1.value = (result * 60) / weight;
|
||||
}
|
||||
})
|
||||
.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;
|
||||
const newRow = data.map((e: any) => ({
|
||||
...e,
|
||||
evaluationResults: (e.point / 5) * e.weight,
|
||||
}));
|
||||
rows_02.value = newRow;
|
||||
if (newRow.length > 0) {
|
||||
const result = newRow.reduce(
|
||||
(sum: number, e: any) => sum + e.evaluationResults,
|
||||
0
|
||||
);
|
||||
const weight = newRow.reduce(
|
||||
(sum: number, e: any) => sum + e.weight,
|
||||
0
|
||||
);
|
||||
totalResults2.value = (result * 60) / weight;
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
messageError($q, err);
|
||||
})
|
||||
.finally(() => {
|
||||
hideLoader();
|
||||
});
|
||||
}
|
||||
|
||||
function fetchAssigned() {
|
||||
showLoader();
|
||||
http
|
||||
.get(config.API.kpiAchievement("special") + `?id=${evaluationId.value}`)
|
||||
.then((res) => {
|
||||
const data = res.data.result;
|
||||
const newRow = data.map((e: any) => ({
|
||||
...e,
|
||||
evaluationResults: (e.point / 5) * e.weight,
|
||||
}));
|
||||
rows_03.value = newRow;
|
||||
if (newRow.length > 0) {
|
||||
const result = newRow.reduce(
|
||||
(sum: number, e: any) => sum + e.evaluationResults,
|
||||
0
|
||||
);
|
||||
const weight = newRow.reduce(
|
||||
(sum: number, e: any) => sum + e.weight,
|
||||
0
|
||||
);
|
||||
totalResults3.value = (result * 20) / weight;
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
messageError($q, err);
|
||||
})
|
||||
.finally(() => {
|
||||
hideLoader();
|
||||
});
|
||||
}
|
||||
|
||||
function onInfo() {
|
||||
modalCriteria.value = true;
|
||||
}
|
||||
const resultWork = computed(() => {
|
||||
const total = totalResults1.value + totalResults2.value + totalResults3.value;
|
||||
return total.toFixed(2);
|
||||
});
|
||||
|
||||
function getCriteria() {
|
||||
http
|
||||
.get(config.API.kpiEvaluation)
|
||||
.then((res) => {
|
||||
const data = res.data.result.data;
|
||||
dataListCriteria.value = data;
|
||||
})
|
||||
.catch((e) => {
|
||||
messageError($q, e);
|
||||
})
|
||||
.finally(() => {
|
||||
hideLoader();
|
||||
});
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
getCriteria();
|
||||
fetchListPlanned();
|
||||
fetchListRole();
|
||||
fetchAssigned();
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<q-scroll-area
|
||||
style="height: 100vh"
|
||||
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>
|
||||
</div>
|
||||
|
||||
<div class="q-gutter-md q-mt-sm">
|
||||
<!-- องค์ประกอบที่ 1 -->
|
||||
<Work
|
||||
v-model:data="rows_01"
|
||||
:title="`1. งานตามแผนปฏิบัติราชการประจำปี`"
|
||||
:page="1"
|
||||
:fetchList="fetchListPlanned"
|
||||
:total="totalResults1"
|
||||
/>
|
||||
<Work
|
||||
v-model:data="rows_02"
|
||||
:title="`2. งานตามหน้าที่ความรับผิดชอบหลัก`"
|
||||
:page="2"
|
||||
:fetchList="fetchListRole"
|
||||
:total="totalResults2"
|
||||
/>
|
||||
<Work
|
||||
v-model:data="rows_03"
|
||||
:title="`3. งานที่ได้รับมอบหมายพิเศษ`"
|
||||
:page="3"
|
||||
:fetchList="fetchAssigned"
|
||||
:total="totalResults3"
|
||||
/>
|
||||
<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-12 text-center row justify-center">
|
||||
<span>สรุปผลการประเมินผลสัมฤทธิ์ของงาน (คะแนนเต็ม 80 คะแนน)</span>
|
||||
<div class="text-primary q-pl-md">{{ resultWork }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<q-separator size="3px" class="q-my-lg" />
|
||||
|
||||
<!-- องค์ประกอบที่ 2 -->
|
||||
<div class="text-weight-bold text-body2 q-mb-sm">
|
||||
<span class="txt-under text-blue-6">องค์ประกอบที่ 2</span>
|
||||
<span class="q-ml-sm"> พฤติกรรมการปฎิบัติราชการ (สมรรถนะ)</span>
|
||||
<q-btn
|
||||
flat
|
||||
icon="info"
|
||||
color="info"
|
||||
round
|
||||
class="q-ml-xs"
|
||||
@click="onInfo"
|
||||
>
|
||||
<q-tooltip>เกณฑ์การประเมิน</q-tooltip>
|
||||
</q-btn>
|
||||
</div>
|
||||
|
||||
<Competency v-model:dataListCriteria="dataListCriteria" />
|
||||
</div>
|
||||
</q-scroll-area>
|
||||
|
||||
<DialogListCriteria
|
||||
v-model:modal="modalCriteria"
|
||||
v-model:dataListCriteria="dataListCriteria"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.txt-under {
|
||||
text-decoration: underline;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
<template>
|
||||
<div class="q-pa-md">2</div>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
<template>
|
||||
<div class="q-pa-md">3</div>
|
||||
</template>
|
||||
239
src/modules/14_KPI/components/detailList/04_File.vue
Normal file
239
src/modules/14_KPI/components/detailList/04_File.vue
Normal file
|
|
@ -0,0 +1,239 @@
|
|||
<script setup lang="ts">
|
||||
import { ref, onMounted } from "vue";
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
import axios from "axios";
|
||||
import { useQuasar } from "quasar";
|
||||
|
||||
import http from "@/plugins/http";
|
||||
import config from "@/app.config";
|
||||
import { useRoute } from "vue-router";
|
||||
|
||||
const $q = useQuasar();
|
||||
const route = useRoute();
|
||||
const id = ref<string>(route.params.id ? route.params.id.toString() : "");
|
||||
const {
|
||||
dialogConfirm,
|
||||
showLoader,
|
||||
hideLoader,
|
||||
success,
|
||||
messageError,
|
||||
dialogRemove,
|
||||
} = useCounterMixin();
|
||||
interface ArrayFileList {
|
||||
id: string;
|
||||
pathName: string;
|
||||
fileName: string;
|
||||
}
|
||||
|
||||
const isReadonly = <boolean>(route.name === "KPIDetail" ? true : false);
|
||||
|
||||
const documentFile = ref<any>(null);
|
||||
const fileList = ref<ArrayFileList[]>([]);
|
||||
|
||||
async function getData() {
|
||||
// showLoader();
|
||||
// await http
|
||||
// .get(config.API.file + `/KPI/ไฟล์เอกสาร/${id.value}`)
|
||||
// .then((res) => {
|
||||
// fileList.value = res.data;
|
||||
// })
|
||||
// .catch((e) => {
|
||||
// messageError($q, e);
|
||||
// })
|
||||
// .finally(() => {
|
||||
// hideLoader();
|
||||
// });
|
||||
}
|
||||
|
||||
async function uploadFileDoc(uploadUrl: string, file: any) {
|
||||
// const Data = new FormData();
|
||||
// Data.append("file", documentFile.value);
|
||||
// showLoader();
|
||||
// await axios
|
||||
// .put(uploadUrl, file, {
|
||||
// headers: {
|
||||
// "Content-Type": file.type,
|
||||
// },
|
||||
// })
|
||||
// .then((res) => {
|
||||
// success($q, "อัปโหลดไฟล์สำเร็จ");
|
||||
// getData();
|
||||
// })
|
||||
// .catch((e) => {
|
||||
// messageError($q, e);
|
||||
// })
|
||||
// .finally(() => {
|
||||
// hideLoader();
|
||||
// documentFile.value = null;
|
||||
// });
|
||||
}
|
||||
async function clickUpload(file: any) {
|
||||
// const fileName = { fileName: file.name };
|
||||
|
||||
// dialogConfirm(
|
||||
// $q,
|
||||
// async () => {
|
||||
// const selectedFile = file;
|
||||
// const formdata = new FormData();
|
||||
// formdata.append("file", selectedFile);
|
||||
// await http
|
||||
// .post(config.API.file + `/KPI/ไฟล์เอกสาร/${id.value}`, {
|
||||
// replace: false,
|
||||
// fileList: fileName,
|
||||
// })
|
||||
// .then(async (res) => {
|
||||
// const foundKey: string | undefined = Object.keys(res.data).find(
|
||||
// (key) =>
|
||||
// res.data[key]?.fileName !== undefined &&
|
||||
// res.data[key]?.fileName !== ""
|
||||
// );
|
||||
// foundKey &&
|
||||
// uploadFileDoc(res.data[foundKey]?.uploadUrl, documentFile.value);
|
||||
// })
|
||||
// .catch((err) => {
|
||||
// messageError($q, err);
|
||||
// });
|
||||
// },
|
||||
// "ยืนยันการอัปโหลดไฟล์",
|
||||
// "ต้องการยืนยันการอัปโหลดไฟล์นี้หรือไม่ ?"
|
||||
// );
|
||||
}
|
||||
|
||||
/**
|
||||
* ดาวน์โหลดลิงค์ไฟล์
|
||||
* @param fileName file name
|
||||
*/
|
||||
function downloadFile(fileName: string) {
|
||||
showLoader();
|
||||
http
|
||||
.get(config.API.file + `/KPI/ไฟล์เอกสาร/${id.value}/${fileName}`)
|
||||
.then((res) => {
|
||||
const data = res.data.downloadUrl;
|
||||
window.open(data, "_blank");
|
||||
})
|
||||
.catch((e) => {
|
||||
messageError($q, e);
|
||||
})
|
||||
.finally(async () => {
|
||||
hideLoader();
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* ลบไฟล์
|
||||
* @param fileName file name
|
||||
*/
|
||||
function deleteFile(fileName: string) {
|
||||
dialogRemove($q, async () => {
|
||||
showLoader();
|
||||
http
|
||||
.delete(config.API.file + `/KPI/ไฟล์เอกสาร/${id.value}/${fileName}`)
|
||||
|
||||
.then((res) => {
|
||||
success($q, `ลบไฟล์สำเร็จ`);
|
||||
setTimeout(() => {
|
||||
getData();
|
||||
hideLoader();
|
||||
}, 1000);
|
||||
})
|
||||
.catch((e) => {
|
||||
messageError($q, e);
|
||||
})
|
||||
.finally(() => {
|
||||
hideLoader();
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
getData();
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="q-pa-md">
|
||||
<q-card bordered class="row col-12" style="border: 1px solid #d6dee1">
|
||||
<div class="col-12 text-weight-medium bg-grey-1 q-py-sm q-px-md">
|
||||
อัปโหลดไฟล์เอกสารหลักฐาน
|
||||
</div>
|
||||
<div class="col-12"><q-separator /></div>
|
||||
<div class="row col-12 q-col-gutter-y-sm q-pa-sm">
|
||||
<div class="col-12 row" v-if="!isReadonly">
|
||||
<q-file
|
||||
for="inputFiles"
|
||||
class="col-12"
|
||||
outlined
|
||||
dense
|
||||
v-model="documentFile"
|
||||
label="ไฟล์เอกสารหลักฐาน"
|
||||
hide-bottom-space
|
||||
accept=".pdf,.xlsx,.docx,.png,.jpg"
|
||||
clearable
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon name="attach_file" color="primary" />
|
||||
</template>
|
||||
<template v-slot:after>
|
||||
<q-btn
|
||||
size="14px"
|
||||
v-if="documentFile"
|
||||
flat
|
||||
round
|
||||
dense
|
||||
color="add"
|
||||
icon="mdi-upload"
|
||||
@click="clickUpload(documentFile)"
|
||||
><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
|
||||
>
|
||||
</template>
|
||||
</q-file>
|
||||
|
||||
<!-- <div class="col-1 self-center" v-if="formData.documentFile"></div> -->
|
||||
</div>
|
||||
|
||||
<div v-if="fileList.length > 0" class="col-xs-12 row">
|
||||
<q-list class="full-width rounded-borders" bordered separator>
|
||||
<q-item
|
||||
clickable
|
||||
v-ripple
|
||||
v-for="data in fileList"
|
||||
:key="data.id"
|
||||
class="items-center"
|
||||
>
|
||||
<q-item-section>{{ data.fileName }}</q-item-section>
|
||||
<q-space />
|
||||
<div>
|
||||
<q-btn
|
||||
size="12px"
|
||||
flat
|
||||
round
|
||||
dense
|
||||
color="blue"
|
||||
icon="mdi-download"
|
||||
@click="downloadFile(data.fileName)"
|
||||
><q-tooltip>ดาวน์โหลดไฟล์</q-tooltip></q-btn
|
||||
>
|
||||
|
||||
<q-btn
|
||||
size="12px"
|
||||
flat
|
||||
round
|
||||
dense
|
||||
color="red"
|
||||
class="q-ml-sm"
|
||||
icon="mdi-delete-outline"
|
||||
@click="deleteFile(data.fileName)"
|
||||
><q-tooltip>ลบไฟล์</q-tooltip></q-btn
|
||||
>
|
||||
</div>
|
||||
</q-item>
|
||||
</q-list>
|
||||
</div>
|
||||
|
||||
<div class="col-12" v-else>
|
||||
<q-card class="q-pa-md" bordered> ไม่มีรายการเอกสาร </q-card>
|
||||
</div>
|
||||
</div>
|
||||
</q-card>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,527 @@
|
|||
<script setup lang="ts">
|
||||
import { ref, reactive, watch } from "vue";
|
||||
import { useQuasar } from "quasar";
|
||||
import { useRoute } from "vue-router";
|
||||
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 route = useRoute();
|
||||
const mixin = useCounterMixin();
|
||||
const store = useKpiDataStore();
|
||||
|
||||
const {
|
||||
showLoader,
|
||||
hideLoader,
|
||||
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);
|
||||
const listTarget = ref<any>([]);
|
||||
|
||||
const formDetail = reactive<any>({
|
||||
orgRevisionId: "",
|
||||
id: "",
|
||||
year: null,
|
||||
round: "",
|
||||
kpiPeriodId: "",
|
||||
includingName: "",
|
||||
including: "",
|
||||
target: "",
|
||||
unit: null,
|
||||
weight: null,
|
||||
achievement1: "",
|
||||
achievement2: "",
|
||||
achievement3: "",
|
||||
achievement4: "",
|
||||
achievement5: "",
|
||||
meaning: "",
|
||||
formula: "",
|
||||
node: null,
|
||||
nodeId: "",
|
||||
nodeName: "",
|
||||
strategy: null,
|
||||
strategyId: "",
|
||||
strategyName: "",
|
||||
});
|
||||
|
||||
function fetchIndicators() {
|
||||
const nodeId = store.dataProfile.nodeId;
|
||||
const node = store.dataProfile.node;
|
||||
const kpiPeriodId = store.dataEvaluation.kpiPeriodId;
|
||||
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 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;
|
||||
http
|
||||
.get(
|
||||
config.API.kpiRole +
|
||||
`?page=${1}&pageSize=${50}&kpiPeriodId=${kpiPeriodId}&position=${position}`
|
||||
)
|
||||
.then((res) => {
|
||||
listTarget.value = res.data.result.data;
|
||||
})
|
||||
.finally(() => {
|
||||
hideLoader();
|
||||
});
|
||||
}
|
||||
|
||||
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
|
||||
.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.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.achievement1 = data.achievement1;
|
||||
formDetail.achievement2 = data.achievement2;
|
||||
formDetail.achievement3 = data.achievement3;
|
||||
formDetail.achievement4 = data.achievement4;
|
||||
formDetail.achievement5 = data.achievement5;
|
||||
formDetail.node = data.node;
|
||||
formDetail.nodeId = data.nodeId;
|
||||
formDetail.nodeName = data.nodeName;
|
||||
formDetail.strategy = data.strategy;
|
||||
formDetail.strategyId = data.strategyId;
|
||||
formDetail.strategyName = data.strategyName;
|
||||
})
|
||||
.catch((err) => {
|
||||
messageError($q, err);
|
||||
})
|
||||
.finally(() => {
|
||||
hideLoader();
|
||||
});
|
||||
}
|
||||
|
||||
/** ปิด dialog */
|
||||
function closeDialog() {
|
||||
modal.value = false;
|
||||
search.value = "";
|
||||
listCheckID.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 = "";
|
||||
}
|
||||
|
||||
function onSubmit() {
|
||||
if (!listCheckID.value) {
|
||||
dialogMessageNotify($q, "กรุณาเลือกตัวชี้วัด");
|
||||
} else {
|
||||
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();
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
watch(
|
||||
() => modal.value,
|
||||
() => {
|
||||
if (modal.value) {
|
||||
if (numpage.value === 1) {
|
||||
fetchIndicators();
|
||||
isStatusEdit.value && fetchIndicatorsByid(kpiUserPlannedId.value);
|
||||
} else if (numpage.value === 2) {
|
||||
fetchListRole();
|
||||
isStatusEdit.value && fetchRoleByid(kpiUserPlannedId.value);
|
||||
}
|
||||
}
|
||||
}
|
||||
);
|
||||
</script>
|
||||
<template>
|
||||
<q-dialog v-model="modal" persistent>
|
||||
<q-card class="col-12" style="width: 100%">
|
||||
<q-form greedy @submit.prevent @validation-success="onSubmit">
|
||||
<DialogHeader
|
||||
:tittle="
|
||||
numpage == 1
|
||||
? 'เพิ่มตัวชี้วัดตามแผนปฏิบัติราชการประจําปี'
|
||||
: 'เพิ่มตัวชี้วัดตามหน้าที่ความรับผิดชอบ'
|
||||
"
|
||||
:close="closeDialog"
|
||||
/>
|
||||
<q-separator />
|
||||
|
||||
<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-3 row lineRight">
|
||||
<div class="col-12 fit">
|
||||
<div class="col-12">
|
||||
<q-input
|
||||
v-model="search"
|
||||
outlined
|
||||
dense
|
||||
label="ค้นหา"
|
||||
class="inputgreen"
|
||||
>
|
||||
<template v-slot:append>
|
||||
<q-icon v-if="search == ''" name="search" />
|
||||
<q-icon
|
||||
v-if="search !== ''"
|
||||
name="clear"
|
||||
class="cursor-pointer"
|
||||
@click="search = ''"
|
||||
/>
|
||||
</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>
|
||||
<q-item
|
||||
dense
|
||||
v-for="(item, index) in listTarget"
|
||||
:key="index"
|
||||
clickable
|
||||
v-ripple
|
||||
:active="listCheckID === item.id"
|
||||
active-class="my-menu-link"
|
||||
@click="clickList(item.id)"
|
||||
>
|
||||
<q-item-section class="q-pa-none">
|
||||
<div class="row items-center" style="height: 50px">
|
||||
<div class="col-4">
|
||||
{{ item.including }}
|
||||
</div>
|
||||
<div class="col-4">
|
||||
{{ item.includingName }}
|
||||
</div>
|
||||
</div>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</q-list>
|
||||
</q-card-section>
|
||||
</q-card>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-9">
|
||||
<div class="row q-pa-md q-col-gutter-sm">
|
||||
<div class="col-12">
|
||||
<span class="text-body2 text-weight-medium"
|
||||
>รายละเอียดตัวชี้วัด</span
|
||||
>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<q-card bordered class="full-height q-pa-sm">
|
||||
<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.nodeName }}</div>
|
||||
</div>
|
||||
<div class="col-12 row" v-if="numpage === 1">
|
||||
<div class="col-4 text-grey-6">ยุทธศาสตร์ / แผน</div>
|
||||
<div class="col-8">{{ formDetail.strategyName }}</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">
|
||||
<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="###"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</q-card>
|
||||
</div>
|
||||
<div class="col-6 row">
|
||||
<div class="row col-12 card-box">
|
||||
<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 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="formDetail.meaning"
|
||||
label="นิยามหรือความหมายของตัวชี้วัด"
|
||||
type="textarea"
|
||||
outlined
|
||||
dense
|
||||
:rules="[(val:string) => !!val || `${'กรุณากรอกตัวชี้วัด'}`,]"
|
||||
hide-bottom-space
|
||||
class="inputgreen"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<q-input
|
||||
v-model="formDetail.formula"
|
||||
label="สูตรคำนวณ"
|
||||
type="textarea"
|
||||
outlined
|
||||
dense
|
||||
:rules="[(val:string) => !!val || `${'กรุณากรอกตัวชี้วัด'}`,]"
|
||||
hide-bottom-space
|
||||
class="inputgreen"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</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>
|
||||
.my-menu-link {
|
||||
background: #ebf9f7 !important;
|
||||
color: #1bb19ab8 !important;
|
||||
}
|
||||
.no-shadow {
|
||||
box-shadow: none !important;
|
||||
}
|
||||
.lineRight {
|
||||
border-right: 1px solid #ededed !important;
|
||||
}
|
||||
.lineTop {
|
||||
border-top: 1px solid #ededed !important;
|
||||
}
|
||||
.card-box {
|
||||
border: 1px solid #ededed !important;
|
||||
border-radius: 8px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,362 @@
|
|||
<script setup lang="ts">
|
||||
import { ref, reactive, watch } from "vue";
|
||||
import { useQuasar } from "quasar";
|
||||
import config from "@/app.config";
|
||||
import http from "@/plugins/http";
|
||||
|
||||
import type { FormDataAssigned } from "@/modules/08_KPI/interface/request/index";
|
||||
|
||||
import DialogHeader from "@/components/DialogHeader.vue";
|
||||
|
||||
import { useKpiDataStore } from "@/modules/08_KPI/store";
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
|
||||
const $q = useQuasar();
|
||||
const store = useKpiDataStore();
|
||||
|
||||
const {
|
||||
showLoader,
|
||||
hideLoader,
|
||||
messageError,
|
||||
dialogConfirm,
|
||||
dialogMessageNotify,
|
||||
success,
|
||||
} = useCounterMixin();
|
||||
|
||||
const modal = defineModel<boolean>("modal", { required: true });
|
||||
const isStatusEdit = defineModel<boolean>("isStatusEdit", { required: true });
|
||||
const kpiUserPlannedId = defineModel<string>("kpiUserPlannedId", {
|
||||
required: true,
|
||||
});
|
||||
|
||||
const formData = reactive<FormDataAssigned>({
|
||||
including: "", //รหัสตัวชี้วัด
|
||||
includingName: "", //ชื่อตัวชี้วัด
|
||||
target: "", //ค่าเป้าหมาย
|
||||
unit: null, //หน่วยนับ
|
||||
weight: null, //น้ำหนัก (ร้อยละ)
|
||||
meaning: "", //นิยามหรือความหมายของตัวชี้วัด
|
||||
formula: "", //สูตรคำนวณ
|
||||
achievement1: "", // ผลสำเร็จของงาน1
|
||||
achievement2: "", // ผลสำเร็จของงาน2
|
||||
achievement3: "", // ผลสำเร็จของงาน3
|
||||
achievement4: "", // ผลสำเร็จของงาน4
|
||||
achievement5: "", // ผลสำเร็จของงาน5
|
||||
kpiUserEvaluationId: "",
|
||||
});
|
||||
|
||||
function fetchspecialByid(id: string) {
|
||||
showLoader();
|
||||
http
|
||||
.get(config.API.kpiAchievement("special") + `/${id}`)
|
||||
.then((res) => {
|
||||
const data = res.data.result;
|
||||
console.log(data);
|
||||
|
||||
formData.including = data.including;
|
||||
formData.includingName = data.includingName;
|
||||
formData.target = data.target;
|
||||
formData.unit = data.unit;
|
||||
formData.achievement1 = data.achievement1;
|
||||
formData.achievement2 = data.achievement2;
|
||||
formData.achievement3 = data.achievement3;
|
||||
formData.achievement4 = data.achievement4;
|
||||
formData.achievement5 = data.achievement5;
|
||||
formData.weight = data.weight;
|
||||
formData.formula = data.formula;
|
||||
formData.meaning = data.meaning;
|
||||
})
|
||||
.catch((err) => {
|
||||
messageError($q, err);
|
||||
})
|
||||
.finally(() => {
|
||||
hideLoader();
|
||||
});
|
||||
}
|
||||
|
||||
/** ปิด dialog */
|
||||
function closeDialog() {
|
||||
modal.value = false;
|
||||
formData.including = "";
|
||||
formData.includingName = "";
|
||||
formData.target = "";
|
||||
formData.unit = null;
|
||||
formData.achievement1 = "";
|
||||
formData.achievement2 = "";
|
||||
formData.achievement3 = "";
|
||||
formData.achievement4 = "";
|
||||
formData.achievement5 = "";
|
||||
formData.weight = null;
|
||||
formData.meaning = "";
|
||||
formData.formula = "";
|
||||
}
|
||||
|
||||
function onSubmit() {
|
||||
dialogConfirm($q, async () => {
|
||||
showLoader();
|
||||
formData.weight = Number(formData.weight);
|
||||
formData.unit = Number(formData.unit);
|
||||
formData.kpiUserEvaluationId = store.dataEvaluation.id;
|
||||
|
||||
try {
|
||||
const url = isStatusEdit.value
|
||||
? config.API.kpiAchievement("special") + `/${kpiUserPlannedId.value}`
|
||||
: config.API.kpiAchievement("special");
|
||||
|
||||
const method = isStatusEdit.value ? "put" : "post";
|
||||
await http[method](url, formData);
|
||||
success($q, "บันทึกข้อมูลสำเร็จ");
|
||||
} catch (err) {
|
||||
messageError($q, err);
|
||||
} finally {
|
||||
hideLoader();
|
||||
closeDialog();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
watch(
|
||||
() => modal.value,
|
||||
() => {
|
||||
if (modal.value) {
|
||||
isStatusEdit.value && fetchspecialByid(kpiUserPlannedId.value);
|
||||
}
|
||||
}
|
||||
);
|
||||
</script>
|
||||
<template>
|
||||
<q-dialog v-model="modal" persistent>
|
||||
<q-card class="col-12" style="width: 50%">
|
||||
<q-form greedy @submit.prevent @validation-success="onSubmit">
|
||||
<DialogHeader
|
||||
:tittle="`เพิ่มตัวชี้วัดที่ได้รับมอบหมาย`"
|
||||
:close="closeDialog"
|
||||
/>
|
||||
<q-separator />
|
||||
|
||||
<q-card-section>
|
||||
<div class="row q-col-gutter-sm">
|
||||
<div class="col-2">
|
||||
<q-input
|
||||
outlined
|
||||
v-model="formData.including"
|
||||
label="รหัสตัวชี้วัด"
|
||||
bg-color="white"
|
||||
dense
|
||||
class="inputgreen"
|
||||
:rules="[(val) => !!val || `${'กรุณากรอกรหัสตัวชี้วัด'}`]"
|
||||
hide-bottom-space
|
||||
lazy-rules
|
||||
/>
|
||||
</div>
|
||||
<div class="col-10">
|
||||
<q-input
|
||||
v-model="formData.includingName"
|
||||
label="ชื่อตัวชี้วัด"
|
||||
outlined
|
||||
dense
|
||||
:rules="[(val:string) => !!val || `${'กรุณากรอกชื่อตัวชี้วัด'}`,]"
|
||||
hide-bottom-space
|
||||
class="inputgreen"
|
||||
lazy-rules
|
||||
/>
|
||||
</div>
|
||||
<div class="col-4">
|
||||
<q-input
|
||||
v-model="formData.target"
|
||||
label="ค่าเป้าหมาย"
|
||||
outlined
|
||||
dense
|
||||
:rules="[(val:string) => !!val || `${'กรุณากรอกค่าเป้าหมาย'}`,]"
|
||||
hide-bottom-space
|
||||
class="inputgreen"
|
||||
lazy-rules
|
||||
/>
|
||||
</div>
|
||||
<div class="col-4">
|
||||
<q-input
|
||||
v-model="formData.unit"
|
||||
label="หน่วยนับ"
|
||||
outlined
|
||||
dense
|
||||
:rules="[(val:string) => !!val || `${'กรุณากรอกหน่วยนับ'}`,]"
|
||||
hide-bottom-space
|
||||
class="inputgreen"
|
||||
mask="#"
|
||||
reverse-fill-mask
|
||||
lazy-rules
|
||||
/>
|
||||
</div>
|
||||
<div class="col-4">
|
||||
<q-input
|
||||
v-model="formData.weight"
|
||||
label="น้ำหนัก (ร้อยละ)"
|
||||
outlined
|
||||
dense
|
||||
:rules="[(val:string) => !!val || `${'กรุณากรอกน้ำหนัก (ร้อยละ)'}`,]"
|
||||
hide-bottom-space
|
||||
class="inputgreen"
|
||||
mask="#"
|
||||
reverse-fill-mask
|
||||
lazy-rules
|
||||
/>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<q-card bordered>
|
||||
<q-card>
|
||||
<q-card-actions class="bg-grey-3 row">
|
||||
<div class="col-4 flex justify-center items-center">
|
||||
<div>ระดับคะแนน</div>
|
||||
</div>
|
||||
<div class="col-8 q-px-xl">ผลสำเร็จของงาน</div>
|
||||
</q-card-actions>
|
||||
</q-card>
|
||||
<div class="row">
|
||||
<div class="col-4 flex justify-center items-center">
|
||||
<div>5</div>
|
||||
</div>
|
||||
<div class="col-8 q-pa-sm">
|
||||
<q-input
|
||||
outlined
|
||||
v-model="formData.achievement5"
|
||||
label="กรอกผลสำเร็จของงาน"
|
||||
bg-color="white"
|
||||
dense
|
||||
class="inputgreen"
|
||||
:rules="[
|
||||
(val) => !!val || `${'กรุณากรอกผลสำเร็จของงาน'}`,
|
||||
]"
|
||||
hide-bottom-space
|
||||
lazy-rules
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-4 flex justify-center items-center">
|
||||
<div>4</div>
|
||||
</div>
|
||||
<div class="col-8 q-pa-sm">
|
||||
<q-input
|
||||
outlined
|
||||
v-model="formData.achievement4"
|
||||
label="กรอกผลสำเร็จของงาน"
|
||||
bg-color="white"
|
||||
dense
|
||||
class="inputgreen"
|
||||
:rules="[
|
||||
(val) => !!val || `${'กรุณากรอกผลสำเร็จของงาน'}`,
|
||||
]"
|
||||
hide-bottom-space
|
||||
lazy-rules
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-4 flex justify-center items-center">
|
||||
<div>3</div>
|
||||
</div>
|
||||
<div class="col-8 q-pa-sm">
|
||||
<q-input
|
||||
outlined
|
||||
v-model="formData.achievement3"
|
||||
label="กรอกผลสำเร็จของงาน"
|
||||
bg-color="white"
|
||||
dense
|
||||
class="inputgreen"
|
||||
:rules="[
|
||||
(val) => !!val || `${'กรุณากรอกผลสำเร็จของงาน'}`,
|
||||
]"
|
||||
hide-bottom-space
|
||||
lazy-rules
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-4 flex justify-center items-center">
|
||||
<div>2</div>
|
||||
</div>
|
||||
<div class="col-8 q-pa-sm">
|
||||
<q-input
|
||||
outlined
|
||||
v-model="formData.achievement2"
|
||||
label="กรอกผลสำเร็จของงาน"
|
||||
bg-color="white"
|
||||
dense
|
||||
class="inputgreen"
|
||||
:rules="[
|
||||
(val) => !!val || `${'กรุณากรอกผลสำเร็จของงาน'}`,
|
||||
]"
|
||||
hide-bottom-space
|
||||
lazy-rules
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-4 flex justify-center items-center">
|
||||
<div>1</div>
|
||||
</div>
|
||||
<div class="col-8 q-pa-sm">
|
||||
<q-input
|
||||
outlined
|
||||
v-model="formData.achievement1"
|
||||
label="กรอกผลสำเร็จของงาน"
|
||||
bg-color="white"
|
||||
dense
|
||||
class="inputgreen"
|
||||
:rules="[
|
||||
(val) => !!val || `${'กรุณากรอกผลสำเร็จของงาน'}`,
|
||||
]"
|
||||
hide-bottom-space
|
||||
lazy-rules
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</q-card>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<q-input
|
||||
v-model="formData.meaning"
|
||||
label="นิยามหรือความหมายของตัวชี้วัด"
|
||||
outlined
|
||||
dense
|
||||
type="textarea"
|
||||
:rules="[(val:string) => !!val || `${'กรุณากรอกนิยามหรือความหมายของตัวชี้วัด'}`,]"
|
||||
hide-bottom-space
|
||||
class="inputgreen"
|
||||
lazy-rules
|
||||
/>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<q-input
|
||||
outlined
|
||||
v-model="formData.formula"
|
||||
label="สูตรคำนวณ"
|
||||
bg-color="white"
|
||||
type="textarea"
|
||||
dense
|
||||
class="inputgreen"
|
||||
:rules="[(val) => !!val || `${'กรุณากรอกสูตรคำนวณ'}`]"
|
||||
hide-bottom-space
|
||||
lazy-rules
|
||||
/>
|
||||
</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>
|
||||
.my-menu-link {
|
||||
background: #ebf9f7 !important;
|
||||
color: #1bb19ab8 !important;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,486 @@
|
|||
<script setup lang="ts">
|
||||
import { ref, reactive, onMounted, watch } from "vue";
|
||||
import DialogHeader from "@/components/DialogHeader.vue";
|
||||
import type { DataOptions } from "@/modules/08_KPI/interface/index/Main";
|
||||
import type { ListCapacity } from "@/modules/08_KPI/interface/request/index";
|
||||
import { useKpiDataStore } from "@/modules/08_KPI/store";
|
||||
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
|
||||
import http from "@/plugins/http";
|
||||
import config from "@/app.config";
|
||||
import { useQuasar } from "quasar";
|
||||
import { useRoute } from "vue-router";
|
||||
|
||||
const dataListCapacityDetails = ref<ListCapacity[]>([]);
|
||||
const route = useRoute();
|
||||
const idParam = ref<string>(route.params.id as string);
|
||||
|
||||
const props = defineProps({
|
||||
getDataList: Function,
|
||||
});
|
||||
|
||||
const $q = useQuasar();
|
||||
const store = useKpiDataStore();
|
||||
const expectedLevel = ref<any>();
|
||||
|
||||
const weight = ref<number | null>(null);
|
||||
const mixin = useCounterMixin();
|
||||
const {
|
||||
showLoader,
|
||||
hideLoader,
|
||||
dialogConfirm,
|
||||
messageError,
|
||||
dialogMessageNotify,
|
||||
success,
|
||||
} = mixin;
|
||||
const modal = defineModel<boolean>("modal", { required: true });
|
||||
const idProps = defineModel<string | null>("id", { required: true });
|
||||
const competencyType = defineModel<string>("competencyType", {
|
||||
required: true,
|
||||
});
|
||||
const search = ref<string>("");
|
||||
|
||||
const type = ref<string>("");
|
||||
|
||||
const listCheck = ref<string>();
|
||||
const listTarget = ref<any>([]);
|
||||
const listTargetMain = ref<any>([]);
|
||||
|
||||
const expectedLevelOp = ref<Object[]>(["1", "2", "3", "4", "5"]);
|
||||
const formDetail = reactive<any>({
|
||||
id: "",
|
||||
type: "สมรรถนะหลัก",
|
||||
name: "สมรรถนะ 1",
|
||||
definition: "",
|
||||
criteria: "",
|
||||
});
|
||||
const formScore = reactive<any>({
|
||||
score1: "",
|
||||
score2: "",
|
||||
score3: "",
|
||||
score4: "",
|
||||
score5: "",
|
||||
});
|
||||
|
||||
const fieldDetailLabels = {
|
||||
type: "ประเภทสมรรถนะ",
|
||||
name: "ชื่อสมรรถนะ",
|
||||
definition: "คำจำกัดความ",
|
||||
};
|
||||
|
||||
const fieldLabels = {
|
||||
score1: "1",
|
||||
score2: "2",
|
||||
score3: "3",
|
||||
score4: "4",
|
||||
score5: "5",
|
||||
};
|
||||
|
||||
const competencyTypeOp = ref<DataOptions[]>(store.competencyType);
|
||||
|
||||
function clickList(index: string, data: any) {
|
||||
const dataCapacityDetails = data.capacityDetails.sort(
|
||||
(a: any, b: any) => a.level - b.level
|
||||
);
|
||||
showLoader();
|
||||
setTimeout(() => {
|
||||
hideLoader();
|
||||
}, 100);
|
||||
formScore.score1 = "";
|
||||
formScore.score2 = "";
|
||||
formScore.score3 = "";
|
||||
formScore.score4 = "";
|
||||
formScore.score5 = "";
|
||||
listCheck.value = index as string;
|
||||
|
||||
formDetail.id = data.id;
|
||||
formDetail.type = data.type;
|
||||
formDetail.name = data.name;
|
||||
formDetail.definition = data.description;
|
||||
dataListCapacityDetails.value = dataCapacityDetails;
|
||||
// formScore.score1 = dataCapacityDetails[0].description;
|
||||
// formScore.score2 = dataCapacityDetails[1].description;
|
||||
// formScore.score3 = dataCapacityDetails[2].description;
|
||||
// formScore.score4 = dataCapacityDetails[3].description;
|
||||
// formScore.score5 = dataCapacityDetails[4].description;
|
||||
}
|
||||
|
||||
/** ปิด dialog */
|
||||
function closeDialog() {
|
||||
modal.value = false;
|
||||
type.value = "";
|
||||
search.value = "";
|
||||
listCheck.value = "";
|
||||
formScore.score1 = "";
|
||||
formScore.score2 = "";
|
||||
formScore.score3 = "";
|
||||
formScore.score4 = "";
|
||||
formScore.score5 = "";
|
||||
formDetail.id = "";
|
||||
formDetail.type = "";
|
||||
formDetail.name = "";
|
||||
formDetail.definition = "";
|
||||
formDetail.criteria = "";
|
||||
idProps.value = null;
|
||||
weight.value = null;
|
||||
expectedLevel.value = null;
|
||||
|
||||
dataListCapacityDetails.value = [];
|
||||
}
|
||||
|
||||
/** เรียกใช้ class */
|
||||
function getclass() {
|
||||
return "inputgreen";
|
||||
}
|
||||
|
||||
function onSubmit() {
|
||||
if (formDetail.id == "") {
|
||||
dialogMessageNotify($q, "กรุณาเลือกสมรรถนะ");
|
||||
} else {
|
||||
dialogConfirm($q, () => {
|
||||
const url = idProps.value
|
||||
? config.API.kpiUserCapacity + `/${idProps.value}`
|
||||
: config.API.kpiUserCapacity;
|
||||
const body = {
|
||||
kpiUserEvaluationId: idParam.value,
|
||||
kpiCapacityId: formDetail.id,
|
||||
level: expectedLevel.value.toString(),
|
||||
weight: weight.value,
|
||||
summary: 0,
|
||||
};
|
||||
showLoader();
|
||||
http[idProps.value ? `put` : `post`](url, body)
|
||||
.then((res) => {
|
||||
success($q, "บันทึกข้อมูลสำเร็จ");
|
||||
closeDialog();
|
||||
props.getDataList?.(competencyType.value);
|
||||
})
|
||||
.catch((e) => {
|
||||
messageError($q, e);
|
||||
})
|
||||
.finally(() => {
|
||||
hideLoader();
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function getData() {
|
||||
showLoader();
|
||||
http
|
||||
.get(config.API.KpiCapacity + `?type=${type.value}`)
|
||||
.then((res) => {
|
||||
const data = res.data.result.data;
|
||||
listTarget.value = data;
|
||||
listTargetMain.value = data;
|
||||
if (data.capacityDetails) {
|
||||
formScore.score1 = data.capacityDetails[0].description;
|
||||
formScore.score2 = data.capacityDetails[1].description;
|
||||
formScore.score3 = data.capacityDetails[2].description;
|
||||
formScore.score4 = data.capacityDetails[3].description;
|
||||
formScore.score5 = data.capacityDetails[4].description;
|
||||
}
|
||||
})
|
||||
.finally(() => {
|
||||
hideLoader();
|
||||
});
|
||||
}
|
||||
|
||||
function filterTxt(val: any) {
|
||||
listTarget.value = listTargetMain.value.filter(
|
||||
(v: any) => v.name.indexOf(val) > -1
|
||||
);
|
||||
}
|
||||
|
||||
function getDataById() {
|
||||
http
|
||||
.get(config.API.kpiUserCapacity + `/${idProps.value}`)
|
||||
.then((res) => {
|
||||
const list = listTargetMain.value;
|
||||
const data = res.data.result;
|
||||
const target = list.find((item: any) => item.name == data.name);
|
||||
|
||||
const dataListCriteria = target.capacityDetails.sort(
|
||||
(a: any, b: any) => a.level - b.level
|
||||
);
|
||||
|
||||
listCheck.value = data.name as string;
|
||||
formDetail.name = data.name;
|
||||
|
||||
weight.value = data.weight;
|
||||
expectedLevel.value = data.level;
|
||||
|
||||
formDetail.id = target.id;
|
||||
formDetail.type = target.type;
|
||||
formDetail.name = target.name;
|
||||
formDetail.definition = target.description;
|
||||
|
||||
dataListCapacityDetails.value = dataListCriteria;
|
||||
})
|
||||
.catch((e) => {})
|
||||
.finally(() => {});
|
||||
}
|
||||
|
||||
watch(
|
||||
() => modal.value,
|
||||
() => {
|
||||
if (modal.value) {
|
||||
type.value = competencyType.value;
|
||||
getData();
|
||||
if (idProps.value) {
|
||||
setTimeout(() => {
|
||||
getDataById();
|
||||
}, 500);
|
||||
} else {
|
||||
if (type.value == "HEAD") {
|
||||
expectedLevel.value = store.defaultCompetencyCoreLevel;
|
||||
} else if (type.value == "GROUP") {
|
||||
expectedLevel.value = store.defaultCompetencyGroupLevel;
|
||||
} else {
|
||||
expectedLevel.value = null;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<q-dialog v-model="modal" persistent>
|
||||
<q-card class="col-12" style="width: 85%">
|
||||
<q-form greedy @submit.prevent @validation-success="onSubmit">
|
||||
<DialogHeader :tittle="`เพิ่มสมรรถนะ`" :close="closeDialog" />
|
||||
<q-separator />
|
||||
|
||||
<q-card-section class="q-pa-none scroll" style="max-height: 80vh">
|
||||
<div class="row">
|
||||
<div class="bg-grey-1 q-pa-md col-3 row lineRight">
|
||||
<div class="col-12 q-col-gutter-sm fit">
|
||||
<div class="col-12">
|
||||
<q-select
|
||||
v-model="type"
|
||||
outlined
|
||||
label="ประเภทสมรรถนะ"
|
||||
dense
|
||||
readonly
|
||||
bg-color="white"
|
||||
option-label="name"
|
||||
option-value="id"
|
||||
:options="competencyTypeOp"
|
||||
emit-value
|
||||
:class="getclass()"
|
||||
map-options
|
||||
/>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<q-input
|
||||
v-model="search"
|
||||
outlined
|
||||
dense
|
||||
label="ค้นหา"
|
||||
bg-color="white"
|
||||
:class="getclass()"
|
||||
@update:model-value="filterTxt"
|
||||
>
|
||||
<template v-slot:append>
|
||||
<q-icon v-if="search == ''" name="search" />
|
||||
<q-icon
|
||||
v-if="search !== ''"
|
||||
name="clear"
|
||||
class="cursor-pointer"
|
||||
@click="(search = ''), (listTarget = listTargetMain)"
|
||||
/>
|
||||
</template>
|
||||
</q-input>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<q-card bordered flat class="no-shadow bg-white col-12">
|
||||
<div class="row q-px-md q-py-sm items-center bg-grey-1">
|
||||
<div class="col-12">
|
||||
<span>ชื่อสมรรถนะ</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<q-separator />
|
||||
<q-card-section class="q-pa-none">
|
||||
<div v-if="listTarget.length > 0">
|
||||
<q-list separator dense>
|
||||
<q-item
|
||||
v-for="(item, index) in listTarget"
|
||||
:key="item.name"
|
||||
clickable
|
||||
v-ripple
|
||||
:active="listCheck === item.name"
|
||||
active-class="my-menu-link"
|
||||
@click="clickList(item.name, item)"
|
||||
>
|
||||
<q-item-section class="q-pa-none">
|
||||
<div class="row items-center">
|
||||
<div class="col-12">
|
||||
<span>{{ item.name }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</q-list>
|
||||
</div>
|
||||
|
||||
<div v-else class="q-pa-md">
|
||||
<span>ไม่พบข้อมูล</span>
|
||||
</div>
|
||||
</q-card-section>
|
||||
</q-card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-9 q-pa-md q-col-gutter-sm">
|
||||
<span class="text-body2 text-weight-medium"
|
||||
>รายละเอียดสมรรถนะ</span
|
||||
>
|
||||
|
||||
<div class="row q-col-gutter-sm">
|
||||
<div class="col-5 row">
|
||||
<q-card bordered class="fit q-pa-sm no-shadow">
|
||||
<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="col-8">
|
||||
<span v-if="field == 'type'">{{
|
||||
formDetail[field]
|
||||
? store.convertCompetencyType(formDetail[field])
|
||||
: "-"
|
||||
}}</span>
|
||||
<span
|
||||
v-else-if="field == 'definition'"
|
||||
v-html="formDetail[field]"
|
||||
></span>
|
||||
<span v-else>{{
|
||||
formDetail[field] ? formDetail[field] : "-"
|
||||
}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row q-col-gutter-sm q-pa-sm">
|
||||
<div class="col-4 text-grey-6">น้ำหนัก (ร้อยละ)</div>
|
||||
<div class="col-8">
|
||||
<q-input
|
||||
v-model="weight"
|
||||
dense
|
||||
outlined
|
||||
lazy-rules
|
||||
:rules="[(val:string) => !!val || `${'กรุณากรอกน้ำหนัก (ร้อยละ)'}`,]"
|
||||
hide-bottom-space
|
||||
class="inputgreen"
|
||||
mask="###"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-4 text-grey-6">ระดับที่คาดหวัง</div>
|
||||
<div
|
||||
v-if="type == 'HEAD' || type == 'GROUP'"
|
||||
class="col-8"
|
||||
>
|
||||
<q-select
|
||||
v-model="expectedLevel"
|
||||
:options="expectedLevelOp"
|
||||
dense
|
||||
emit-value
|
||||
outlined
|
||||
lazy-rules
|
||||
:rules="[(val:string) => !!val || `${'กรุณาเลือกระดับที่คาดหวัง'}`,]"
|
||||
hide-bottom-space
|
||||
class="inputgreen"
|
||||
/>
|
||||
</div>
|
||||
<div v-else>
|
||||
<q-input
|
||||
v-model="expectedLevel"
|
||||
dense
|
||||
outlined
|
||||
lazy-rules
|
||||
:rules="[(val:string) => !!val || `${'กรุณาระดับที่คาดหวัง'}`,]"
|
||||
hide-bottom-space
|
||||
class="inputgreen"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</q-card>
|
||||
</div>
|
||||
<div class="col-7">
|
||||
<q-card bordered class="col-12 row no-shadow">
|
||||
<div class="bg-grey-2 row q-py-sm text-weight-bold col-12">
|
||||
<div class="col-4 text-center">
|
||||
<span>ระดับสมรรถนะ</span>
|
||||
</div>
|
||||
<div class="col-8 text-center">
|
||||
<span>พฤติกรรมที่คาดหวัง/พฤติกรรมย่อย</span>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
v-if="dataListCapacityDetails.length == 0"
|
||||
class="q-pa-md text-weight-bold col-12 text-center "
|
||||
style="border: 2px solid #f5f5f5;"
|
||||
>
|
||||
<span>ไม่พบข้อมูลสมรรถนะ</span>
|
||||
</div>
|
||||
<div
|
||||
v-for="(item, index) in dataListCapacityDetails"
|
||||
:key="item.id"
|
||||
>
|
||||
<div :class="`row q-pa-sm`">
|
||||
<div class="col-4 text-center self-start text-body1">
|
||||
<span>{{ item.level }}</span>
|
||||
</div>
|
||||
<div class="col-8">
|
||||
<span v-html="item.description"></span>
|
||||
</div>
|
||||
</div>
|
||||
<q-separator />
|
||||
</div>
|
||||
</q-card>
|
||||
</div>
|
||||
</div>
|
||||
</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>
|
||||
.my-menu-link {
|
||||
background: #ebf9f7 !important;
|
||||
color: #1bb19ab8 !important;
|
||||
}
|
||||
.no-shadow {
|
||||
box-shadow: none !important;
|
||||
}
|
||||
.lineRight {
|
||||
border-right: 1px solid #ededed !important;
|
||||
}
|
||||
.lineTop {
|
||||
border-top: 1px solid #ededed !important;
|
||||
}
|
||||
.card-box {
|
||||
border: 1px solid #ededed !important;
|
||||
border-radius: 8px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,53 @@
|
|||
<script setup lang="ts">
|
||||
import { watch, ref } from "vue";
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
import DialogHeader from "@/components/DialogHeader.vue";
|
||||
import http from "@/plugins/http";
|
||||
import config from "@/app.config";
|
||||
import { useQuasar } from "quasar";
|
||||
|
||||
interface ListCriteria {
|
||||
id: string;
|
||||
level: number;
|
||||
description: string;
|
||||
}
|
||||
|
||||
const $q = useQuasar();
|
||||
const dataList = ref<ListCriteria[]>([]);
|
||||
const { showLoader, hideLoader, messageError } = useCounterMixin();
|
||||
const modal = defineModel<boolean>("modal", { required: true });
|
||||
const dataListCriteria = defineModel<ListCriteria[]>("dataListCriteria", { required: true });
|
||||
|
||||
function close() {
|
||||
modal.value = false;
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<q-dialog persistent v-model="modal">
|
||||
<q-card style="min-width: 60%">
|
||||
<DialogHeader tittle="เกณฑ์การประเมินสมรรถนะ" :close="close" />
|
||||
<q-separator />
|
||||
<q-card-section class="">
|
||||
<q-card bordered>
|
||||
<div class="bg-grey-2 q-pa-sm">
|
||||
<div class="row text-dark text-body2 text-weight-medium">
|
||||
<div class="text-center col-8">เกณฑ์การประเมิน</div>
|
||||
<div class="text-center col-4">ระดับคะแนน</div>
|
||||
</div>
|
||||
</div>
|
||||
<q-separator />
|
||||
<div v-for="(item, index) in dataListCriteria" :key="item.id">
|
||||
<div :class="`row q-pa-sm ${index %2 !== 0 && 'bg-grey-2'}`">
|
||||
<div class="col-8"><span v-html="item.description"></span></div>
|
||||
<div class="col-4 text-center self-center text-body1 text-weight-bold">
|
||||
<span>{{ item.level }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<q-separator />
|
||||
</div>
|
||||
</q-card>
|
||||
</q-card-section>
|
||||
</q-card>
|
||||
</q-dialog>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,286 @@
|
|||
<script setup lang="ts">
|
||||
import { ref } from "vue";
|
||||
import { useQuasar } from "quasar";
|
||||
import config from "@/app.config";
|
||||
import http from "@/plugins/http";
|
||||
|
||||
import DialogHeader from "@/components/DialogHeader.vue";
|
||||
|
||||
import type { QTableProps } from "quasar";
|
||||
|
||||
import { useKpiDataStore } from "@/modules/08_KPI/store";
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
|
||||
const $q = useQuasar();
|
||||
const store = useKpiDataStore();
|
||||
const { showLoader, hideLoader, messageError, dialogConfirm, success } =
|
||||
useCounterMixin();
|
||||
|
||||
const modal = defineModel<boolean>("modal", { required: true });
|
||||
const rows = defineModel<any>("data", { required: true });
|
||||
const numpage = defineModel<number>("numpage", { required: true });
|
||||
|
||||
/** table*/
|
||||
const columns = ref<QTableProps["columns"]>([
|
||||
{
|
||||
name: "includingName",
|
||||
align: "left",
|
||||
label: "ตัวชี้วัด",
|
||||
sortable: true,
|
||||
field: "includingName",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
{
|
||||
name: "target",
|
||||
align: "left",
|
||||
label: "ค่าเป้าหมาย",
|
||||
sortable: true,
|
||||
field: "target",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
{
|
||||
name: "point",
|
||||
align: "left",
|
||||
label: "ระดับคะแนนตามเกณฑ์การประเมิน",
|
||||
sortable: true,
|
||||
field: "point",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
{
|
||||
name: "weight",
|
||||
align: "left",
|
||||
label: "น้ำหนัก (ร้อยละ)",
|
||||
sortable: true,
|
||||
field: "weight",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
{
|
||||
name: "achievement",
|
||||
align: "left",
|
||||
label: "ผลสำเร็จของงาน",
|
||||
sortable: true,
|
||||
field: "achievement",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
{
|
||||
name: "evaluationResults",
|
||||
align: "left",
|
||||
label: "ผลการประเมิน",
|
||||
sortable: true,
|
||||
field: "evaluationResults",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
]);
|
||||
const visibleColumns = ref<string[]>([
|
||||
"includingName",
|
||||
"target",
|
||||
"point",
|
||||
"weight",
|
||||
"achievement",
|
||||
"evaluationResults",
|
||||
]);
|
||||
|
||||
function closeDialog() {
|
||||
modal.value = false;
|
||||
}
|
||||
|
||||
function updateAchievement(index: number, data: any) {
|
||||
switch (data.point) {
|
||||
case 1:
|
||||
rows.value[index].achievement = data.achievement1;
|
||||
break;
|
||||
case 2:
|
||||
rows.value[index].achievement = data.achievement2;
|
||||
break;
|
||||
case 3:
|
||||
rows.value[index].achievement = data.achievement3;
|
||||
break;
|
||||
case 4:
|
||||
rows.value[index].achievement = data.achievement4;
|
||||
break;
|
||||
case 5:
|
||||
rows.value[index].achievement = data.achievement5;
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
function onSubmit() {
|
||||
dialogConfirm($q, async () => {
|
||||
try {
|
||||
showLoader();
|
||||
const formData = rows.value.map((e: any) => ({
|
||||
id: e.id,
|
||||
point: e.point,
|
||||
}));
|
||||
|
||||
const url =
|
||||
numpage.value === 1
|
||||
? config.API.kpiAchievementPoint("planned")
|
||||
: numpage.value === 2
|
||||
? config.API.kpiAchievementPoint("role")
|
||||
: numpage.value === 3
|
||||
? config.API.kpiAchievementPoint("special")
|
||||
: "";
|
||||
await http.post(url, formData);
|
||||
success($q, "บันทึกข้อมูลสำเร็จ");
|
||||
} catch (err) {
|
||||
messageError($q, err);
|
||||
} finally {
|
||||
hideLoader();
|
||||
closeDialog();
|
||||
}
|
||||
});
|
||||
}
|
||||
</script>
|
||||
<template>
|
||||
<q-dialog v-model="modal" persistent>
|
||||
<q-card style="width: 1200px; max-width: 80vw">
|
||||
<DialogHeader :tittle="'ประเมินผลสัมฤทธิ์ของงาน'" :close="closeDialog" />
|
||||
|
||||
<q-separator />
|
||||
<q-card-section style="height: 80vh">
|
||||
<div class="col-12 q-pa-sm">
|
||||
<q-table
|
||||
ref="table"
|
||||
:columns="columns"
|
||||
:rows="rows"
|
||||
row-key="id"
|
||||
flat
|
||||
bordered
|
||||
dense
|
||||
hide-pagination
|
||||
class="custom-table2"
|
||||
:visible-columns="visibleColumns"
|
||||
:rows-per-page-options="[20]"
|
||||
no-data-label="ไม่มีข้อมูล"
|
||||
>
|
||||
<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">
|
||||
<div v-if="col.name === 'point'">
|
||||
<q-rating
|
||||
v-model="props.row.point"
|
||||
max="5"
|
||||
size="sm"
|
||||
color="grey"
|
||||
:color-selected="store.ratingColors"
|
||||
label="ระดับการประเมินพฤติกรรม"
|
||||
@update:model-value="
|
||||
updateAchievement(props.rowIndex, props.row)
|
||||
"
|
||||
>
|
||||
<template v-slot:tip-1>
|
||||
<q-tooltip>{{ props.row.achievement1 }}</q-tooltip>
|
||||
</template>
|
||||
<template v-slot:tip-2>
|
||||
<q-tooltip>{{ props.row.achievement2 }}</q-tooltip>
|
||||
</template>
|
||||
<template v-slot:tip-3>
|
||||
<q-tooltip>{{ props.row.achievement3 }}</q-tooltip>
|
||||
</template>
|
||||
<template v-slot:tip-4>
|
||||
<q-tooltip>{{ props.row.achievement4 }}</q-tooltip>
|
||||
</template>
|
||||
<template v-slot:tip-5>
|
||||
<q-tooltip>{{ props.row.achievement5 }}</q-tooltip>
|
||||
</template>
|
||||
</q-rating>
|
||||
</div>
|
||||
<div v-else-if="col.name === 'achievement'">
|
||||
{{ props.row.point ? `ระดับ ${props.row.point}` : "" }}
|
||||
</div>
|
||||
<div v-else-if="col.name === 'evaluationResults'">
|
||||
{{
|
||||
parseFloat(
|
||||
Number(
|
||||
(props.row.point / 5) * props.row.weight
|
||||
).toFixed(2)
|
||||
)
|
||||
}}
|
||||
</div>
|
||||
<div v-else>
|
||||
{{ col.value ? col.value : "-" }}
|
||||
</div>
|
||||
</q-td>
|
||||
</q-tr>
|
||||
</template>
|
||||
</q-table>
|
||||
</div>
|
||||
</q-card-section>
|
||||
<q-separator />
|
||||
<q-card-actions align="right">
|
||||
<q-btn label="บันทึก" color="secondary" @click="onSubmit"
|
||||
><q-tooltip>บันทึกข้อมูล</q-tooltip></q-btn
|
||||
>
|
||||
</q-card-actions>
|
||||
</q-card>
|
||||
</q-dialog>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.custom-table2 {
|
||||
max-height: 64vh;
|
||||
|
||||
.q-table tr:nth-child(odd) td {
|
||||
background: white;
|
||||
}
|
||||
|
||||
.q-table tr:nth-child(even) td {
|
||||
background: #f8f8f8;
|
||||
}
|
||||
|
||||
.q-table thead tr {
|
||||
background: #ecebeb;
|
||||
}
|
||||
|
||||
.q-table thead tr th {
|
||||
position: sticky;
|
||||
}
|
||||
|
||||
.q-table td:nth-of-type(2) {
|
||||
z-index: 3 !important;
|
||||
}
|
||||
|
||||
.q-table th:nth-of-type(2),
|
||||
.q-table td:nth-of-type(2) {
|
||||
position: sticky;
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
/* this will be the loading indicator */
|
||||
.q-table thead tr:last-child th {
|
||||
/* height of all previous header rows */
|
||||
top: 48px;
|
||||
}
|
||||
|
||||
.q-table thead tr:first-child th {
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,262 @@
|
|||
<script setup lang="ts">
|
||||
import { ref, watch, computed } from "vue";
|
||||
|
||||
import DialogHeader from "@/components/DialogHeader.vue";
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
|
||||
import { useQuasar, type QTableProps } from "quasar";
|
||||
import http from "@/plugins/http";
|
||||
import config from "@/app.config";
|
||||
|
||||
// import type { ListCriteria } from "@/modules/08_KPI/interface/request/index";
|
||||
|
||||
const dataListCriteria = defineModel<any[]>("dataListCriteria", {
|
||||
required: true,
|
||||
});
|
||||
|
||||
import { useKPIDataStore } from "@/modules/14_KPI/store/KPIStore";
|
||||
const sortedDataListCriteria = computed(() => {
|
||||
return dataListCriteria.value.sort((a, b) => a.level - b.level);
|
||||
});
|
||||
|
||||
const props = defineProps({
|
||||
getData: Function,
|
||||
default: () => console.log("not function"),
|
||||
});
|
||||
const {
|
||||
dialogConfirm,
|
||||
hideLoader,
|
||||
showLoader,
|
||||
messageError,
|
||||
success,
|
||||
dialogMessageNotify,
|
||||
} = useCounterMixin();
|
||||
const store = useKPIDataStore();
|
||||
const $q = useQuasar();
|
||||
const modal = defineModel<boolean>("modal", { required: true });
|
||||
const rows = defineModel<any>("data", { required: true });
|
||||
const type = defineModel<string>("type", { required: true });
|
||||
const visibleColumns = ref<string[]>([
|
||||
"name",
|
||||
"level",
|
||||
"point",
|
||||
"weight",
|
||||
"summary",
|
||||
]);
|
||||
|
||||
const columns = ref<QTableProps["columns"]>([
|
||||
{
|
||||
name: "name",
|
||||
align: "left",
|
||||
label: "รายการสมรรถนะ",
|
||||
sortable: true,
|
||||
field: "name",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
{
|
||||
name: "level",
|
||||
align: "left",
|
||||
label: "ระดับที่คาดหวัง",
|
||||
sortable: true,
|
||||
field: "level",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
{
|
||||
name: "point",
|
||||
align: "left",
|
||||
label: "ระดับคะแนนตามเกณฑ์การประเมิน",
|
||||
sortable: true,
|
||||
field: "point",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
{
|
||||
name: "weight",
|
||||
align: "left",
|
||||
label: "น้ำหนัก (ร้อยละ)",
|
||||
sortable: true,
|
||||
field: "weight",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
{
|
||||
name: "summary",
|
||||
align: "left",
|
||||
label: "ผลการประเมิน",
|
||||
sortable: true,
|
||||
field: "summary",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
]);
|
||||
|
||||
function closeDialog() {
|
||||
modal.value = false;
|
||||
props.getData?.(type.value);
|
||||
}
|
||||
|
||||
function onSubmit() {
|
||||
// const main = rows.value;
|
||||
// const checkPoint = main.some((item: any) => item.point === 0);
|
||||
// if (checkPoint) {
|
||||
// dialogMessageNotify($q, "กรุณาเลือกระดับคะแนนตามเกณฑ์การประเมิน");
|
||||
// } else {
|
||||
// dialogConfirm($q, () => {
|
||||
// const data = rows.value;
|
||||
// const body = data.map((i: any) => ({
|
||||
// id: i.id,
|
||||
// point: i.point,
|
||||
// }));
|
||||
// http
|
||||
// .post(config.API.kpiUserCapacity + `/point`, body)
|
||||
// .then((res) => {
|
||||
// closeDialog();
|
||||
// })
|
||||
// .catch((e) => {
|
||||
// messageError($q, e);
|
||||
// })
|
||||
// .finally(() => {});
|
||||
// });
|
||||
// }
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<q-dialog v-model="modal" persistent style="width: 60vw">
|
||||
<q-card style="width: 1200px; max-width: 80vw">
|
||||
<q-form greedy @submit.prevent @validation-success="onSubmit">
|
||||
<DialogHeader :tittle="'ประเมิน'" :close="closeDialog" />
|
||||
<q-separator />
|
||||
<q-card-section class="q-pt-none" style="min-height: 70vh">
|
||||
<div class="col-12 q-pa-sm">
|
||||
<q-table
|
||||
ref="table"
|
||||
:columns="columns"
|
||||
:rows="rows"
|
||||
row-key="id"
|
||||
flat
|
||||
bordered
|
||||
dense
|
||||
hide-pagination
|
||||
class="custom-table2"
|
||||
:visible-columns="visibleColumns"
|
||||
:rows-per-page-options="[20]"
|
||||
no-data-label="ไม่มีข้อมูล"
|
||||
>
|
||||
<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">
|
||||
<div v-if="col.name === 'point'">
|
||||
<div v-if="type == 'HEAD' || type == 'GROUP'">
|
||||
<q-rating
|
||||
v-model="props.row.point"
|
||||
max="5"
|
||||
size="sm"
|
||||
color="grey"
|
||||
:color-selected="store.ratingColors"
|
||||
label="ระดับการประเมินพฤติกรรม"
|
||||
>
|
||||
<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'">
|
||||
{{ props.row.point !== 0 ? props.row.point * 20 : "-" }}
|
||||
</div>
|
||||
<div v-else>
|
||||
{{ col.value ? col.value : "-" }}
|
||||
</div>
|
||||
</q-td>
|
||||
</q-tr>
|
||||
</template>
|
||||
</q-table>
|
||||
</div>
|
||||
</q-card-section>
|
||||
<q-separator />
|
||||
|
||||
<q-card-actions align="right" class="q-pa-md">
|
||||
<q-btn unelevated label="บันทึก" color="secondary" type="submit"
|
||||
><q-tooltip>บันทึกข้อมูล</q-tooltip></q-btn
|
||||
>
|
||||
</q-card-actions>
|
||||
</q-form>
|
||||
</q-card>
|
||||
</q-dialog>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.custom-table2 {
|
||||
max-height: 64vh;
|
||||
|
||||
.q-table tr:nth-child(odd) td {
|
||||
background: white;
|
||||
}
|
||||
|
||||
.q-table tr:nth-child(even) td {
|
||||
background: #f8f8f8;
|
||||
}
|
||||
|
||||
.q-table thead tr {
|
||||
background: #ecebeb;
|
||||
}
|
||||
|
||||
.q-table thead tr th {
|
||||
position: sticky;
|
||||
}
|
||||
|
||||
.q-table td:nth-of-type(2) {
|
||||
z-index: 3 !important;
|
||||
}
|
||||
|
||||
.q-table th:nth-of-type(2),
|
||||
.q-table td:nth-of-type(2) {
|
||||
position: sticky;
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
/* this will be the loading indicator */
|
||||
.q-table thead tr:last-child th {
|
||||
/* height of all previous header rows */
|
||||
top: 48px;
|
||||
}
|
||||
|
||||
.q-table thead tr:first-child th {
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
89
src/modules/14_KPI/components/detailList/TabMain.vue
Normal file
89
src/modules/14_KPI/components/detailList/TabMain.vue
Normal file
|
|
@ -0,0 +1,89 @@
|
|||
<script setup lang="ts">
|
||||
import { ref } from "vue";
|
||||
import { useRoute } from "vue-router";
|
||||
|
||||
import Assessment from "@/modules/14_KPI/components/detailList/01_Assessment.vue";
|
||||
import CommanderAbove from "@/modules/14_KPI/components/detailList/02_CommanderAbove.vue";
|
||||
import CommanderAboveOneStep from "@/modules/14_KPI/components/detailList/03_CommanderAboveOneStep.vue";
|
||||
import File from "@/modules/14_KPI/components/detailList/04_File.vue";
|
||||
|
||||
import { useKPIDataStore } from "@/modules/14_KPI/store/KPIStore";
|
||||
|
||||
const store = useKPIDataStore();
|
||||
const route = useRoute();
|
||||
|
||||
const isReadonly = <boolean>(route.name === "KPIDetail" ? true : false);
|
||||
|
||||
const itemsTab = ref<any>([
|
||||
{
|
||||
name: "1",
|
||||
label: "ผู้ขอรับการประเมิน",
|
||||
},
|
||||
{
|
||||
name: "2",
|
||||
label: "ผู้บังคับบัญชาเหนือขึ้นไป",
|
||||
},
|
||||
{
|
||||
name: "3",
|
||||
label: "ผู้บังคับบัญชาเหนือขึ้นไปอีกหนึ่งขั้น",
|
||||
},
|
||||
{
|
||||
name: "4",
|
||||
label: "ไฟล์เอกสาร",
|
||||
},
|
||||
]);
|
||||
|
||||
const splitterModel = ref<number>(12);
|
||||
</script>
|
||||
<template>
|
||||
<q-splitter v-model="splitterModel" disable>
|
||||
<template v-slot:before>
|
||||
<q-tabs
|
||||
v-model="store.tabMain"
|
||||
vertical
|
||||
class="text-grey-7 text-weight-light"
|
||||
active-class="bg-blue-1 text-blue-8 text-weight-bold"
|
||||
>
|
||||
<q-tab name="1" label="ผู้ขอรับการประเมิน" />
|
||||
<q-tab name="2" label="ผู้บังคับบัญชา">
|
||||
<div class="text-caption">เหนือขึ้นไป</div>
|
||||
</q-tab>
|
||||
<q-tab name="3" label="ผู้บังคับบัญชา">
|
||||
<div class="text-caption">เหนือขึ้นไปอีกหนึ่งขั้น</div>
|
||||
</q-tab>
|
||||
<q-tab name="4" label="ไฟล์เอกสาร" />
|
||||
</q-tabs>
|
||||
</template>
|
||||
|
||||
<template v-slot:after>
|
||||
<q-tab-panels
|
||||
v-model="store.tabMain"
|
||||
animated
|
||||
swipeable
|
||||
vertical
|
||||
transition-prev="jump-up"
|
||||
transition-next="jump-up"
|
||||
>
|
||||
<q-tab-panel
|
||||
v-for="(tab, index) in itemsTab"
|
||||
:key="index"
|
||||
:name="tab.name"
|
||||
class="q-pa-none"
|
||||
>
|
||||
<Assessment v-if="store.tabMain === '1'" />
|
||||
<CommanderAbove v-if="store.tabMain === '2'" />
|
||||
<CommanderAboveOneStep v-if="store.tabMain === '3'" />
|
||||
<File v-if="store.tabMain === '4'" />
|
||||
</q-tab-panel>
|
||||
</q-tab-panels>
|
||||
</template>
|
||||
</q-splitter>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.hover-tab:hover {
|
||||
background-color: #0793f1;
|
||||
color: white !important;
|
||||
opacity: 1 !important;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,345 @@
|
|||
<!-- <script setup lang="ts">
|
||||
import { onMounted, ref } from "vue";
|
||||
import Dialog from "@/modules/08_KPI/components/Tab/Dialog/04_FormCompetency.vue";
|
||||
import DialogEvaluate from "@/modules/08_KPI/components/Tab/DialogEvaluate/02_Competenct.vue";
|
||||
|
||||
import { useQuasar, type QTableProps } from "quasar";
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
import { useKpiDataStore } from "@/modules/08_KPI/store";
|
||||
import http from "@/plugins/http";
|
||||
import config from "@/app.config";
|
||||
import { useRoute } from "vue-router";
|
||||
|
||||
import type { FormCapacityList } from "@/modules/08_KPI/interface/request/index";
|
||||
|
||||
const modalEvaluate = ref<boolean>(false);
|
||||
const store = useKpiDataStore();
|
||||
|
||||
const route = useRoute();
|
||||
const id = ref<string>(route.params.id as string);
|
||||
const idCapacity = ref<string | null>(null);
|
||||
|
||||
const $q = useQuasar();
|
||||
const mixin = useCounterMixin();
|
||||
const {
|
||||
date2Thai,
|
||||
messageError,
|
||||
showLoader,
|
||||
hideLoader,
|
||||
dialogRemove,
|
||||
success,
|
||||
} = mixin;
|
||||
|
||||
const type = defineModel<string>("type", { required: true });
|
||||
const name = defineModel<any>("name", { required: true });
|
||||
const lists = defineModel<any>("lists", { required: true });
|
||||
|
||||
const filterKeyword = ref<string>("");
|
||||
const modal = ref<boolean>(false);
|
||||
|
||||
const visibleColumns = ref<string[]>([
|
||||
"name",
|
||||
"level",
|
||||
"point",
|
||||
"weight",
|
||||
"summary",
|
||||
]);
|
||||
|
||||
const columns = ref<QTableProps["columns"]>([
|
||||
{
|
||||
name: "name",
|
||||
align: "left",
|
||||
label: "รายการสมรรถนะ",
|
||||
sortable: true,
|
||||
field: "name",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
{
|
||||
name: "level",
|
||||
align: "left",
|
||||
label: "ระดับที่คาดหวัง",
|
||||
sortable: true,
|
||||
field: "level",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
{
|
||||
name: "point",
|
||||
align: "left",
|
||||
label: "ระดับคะแนนตามเกณฑ์การประเมิน",
|
||||
sortable: true,
|
||||
field: "point",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
{
|
||||
name: "weight",
|
||||
align: "left",
|
||||
label: "น้ำหนัก (ร้อยละ)",
|
||||
sortable: true,
|
||||
field: "weight",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
{
|
||||
name: "summary",
|
||||
align: "left",
|
||||
label: "ผลการประเมิน",
|
||||
sortable: true,
|
||||
field: "summary",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
]);
|
||||
|
||||
function onAdd() {
|
||||
modal.value = true;
|
||||
}
|
||||
|
||||
const rows = ref<FormCapacityList[]>([]);
|
||||
|
||||
function getData() {
|
||||
showLoader();
|
||||
http
|
||||
.get(config.API.kpiUserCapacity + `?id=${id.value}&type=${type.value}`)
|
||||
.then((res) => {
|
||||
const data = res.data.result.data;
|
||||
rows.value = data;
|
||||
lists.value.push(res.data.result.data);
|
||||
console.log("lists card===>", lists.value);
|
||||
})
|
||||
.catch((e) => {
|
||||
messageError($q, e);
|
||||
})
|
||||
.finally(() => {
|
||||
hideLoader();
|
||||
});
|
||||
}
|
||||
|
||||
function onEdit(data: FormCapacityList) {
|
||||
modal.value = true;
|
||||
idCapacity.value = data.id;
|
||||
}
|
||||
|
||||
function onDelete(id: string) {
|
||||
dialogRemove($q, () => {
|
||||
showLoader();
|
||||
http
|
||||
.delete(config.API.kpiUserCapacity + `/${id}`)
|
||||
.then((res) => {
|
||||
success($q, "ลบข้อมูลสำเร็จ");
|
||||
getData();
|
||||
})
|
||||
.catch((e) => {
|
||||
messageError($q, e);
|
||||
})
|
||||
.finally(() => {
|
||||
hideLoader();
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function onEvaluate() {
|
||||
modalEvaluate.value = true;
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
getData();
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<q-card bordered style="border-radius: 5px" class="no-shadow">
|
||||
<q-card-section class="bg-grey-2 q-py-sm">
|
||||
<div class="row items-center">
|
||||
<div class="col">
|
||||
<span class="text-weight-medium">{{ name }}</span>
|
||||
<q-btn
|
||||
class="q-ml-xs"
|
||||
flat
|
||||
round
|
||||
icon="mdi-plus"
|
||||
color="primary"
|
||||
size="12px"
|
||||
dense
|
||||
@click="onAdd"
|
||||
>
|
||||
<q-tooltip>เพิ่มข้อมูล</q-tooltip>
|
||||
</q-btn>
|
||||
</div>
|
||||
|
||||
<q-space />
|
||||
<q-btn
|
||||
flat
|
||||
round
|
||||
icon="mdi-clipboard-check-outline"
|
||||
color="blue-5"
|
||||
size="12px"
|
||||
dense
|
||||
@click="onEvaluate"
|
||||
>
|
||||
<q-tooltip>ประเมิน</q-tooltip>
|
||||
</q-btn>
|
||||
</div>
|
||||
</q-card-section>
|
||||
<q-card-section class="q-pa-sm">
|
||||
<q-table
|
||||
ref="table"
|
||||
:columns="columns"
|
||||
:rows="rows"
|
||||
:filter="filterKeyword"
|
||||
row-key="id"
|
||||
flat
|
||||
bordered
|
||||
:paging="true"
|
||||
dense
|
||||
hide-pagination
|
||||
class="custom-table2"
|
||||
:visible-columns="visibleColumns"
|
||||
no-data-label="ไม่มีข้อมูล"
|
||||
>
|
||||
<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">
|
||||
<div v-if="col.name == 'createDate'">
|
||||
{{ col.value ? date2Thai(col.value) : "-" }}
|
||||
</div>
|
||||
<div v-else-if="col.name == 'point'">
|
||||
<div v-if="type == 'HEAD' || type == 'GROUP'">
|
||||
<q-rating
|
||||
v-model="props.row.point"
|
||||
max="5"
|
||||
size="sm"
|
||||
color="grey"
|
||||
:color-selected="store.ratingColors"
|
||||
label="ระดับการประเมินพฤติกรรม"
|
||||
disable
|
||||
>
|
||||
<template v-slot:tip-1>
|
||||
<q-tooltip>ต่ำกว่าระดับที่คาดหวังมาก (1)</q-tooltip>
|
||||
</template>
|
||||
<template v-slot:tip-2>
|
||||
<q-tooltip>ต่ำกว่าระดับที่คาดหวัง (2)</q-tooltip>
|
||||
</template>
|
||||
<template v-slot:tip-3>
|
||||
<q-tooltip>อยู่ในระดับที่คาดหวัง (3)</q-tooltip>
|
||||
</template>
|
||||
<template v-slot:tip-4>
|
||||
<q-tooltip>อยู่ในระดับสูงกว่าที่คาดหวัง (4)</q-tooltip>
|
||||
</template>
|
||||
<template v-slot:tip-5>
|
||||
<q-tooltip>เป็นแบบอย่างที่ดีให้กับผู้อื่น (5)</q-tooltip>
|
||||
</template>
|
||||
</q-rating>
|
||||
</div>
|
||||
<div v-else>รอ ทำ select</div>
|
||||
</div>
|
||||
<div v-else-if="col.name == 'summary'">
|
||||
{{ props.row.point !== 0 ? props.row.point * 20 : "-" }}
|
||||
</div>
|
||||
<div v-else>
|
||||
{{ col.value ? col.value : "-" }}
|
||||
</div>
|
||||
</q-td>
|
||||
<q-td auto-width>
|
||||
<q-btn
|
||||
flat
|
||||
round
|
||||
icon="edit"
|
||||
color="edit"
|
||||
@click.stop.pervent="onEdit(props.row)"
|
||||
>
|
||||
<q-tooltip>แก้ไข </q-tooltip>
|
||||
</q-btn>
|
||||
<q-btn
|
||||
flat
|
||||
round
|
||||
icon="delete"
|
||||
color="red"
|
||||
@click.stop.pervent="onDelete(props.row.id)"
|
||||
>
|
||||
<q-tooltip>ลบข้อมูล </q-tooltip>
|
||||
</q-btn>
|
||||
</q-td>
|
||||
</q-tr>
|
||||
</template>
|
||||
</q-table>
|
||||
</q-card-section>
|
||||
</q-card>
|
||||
|
||||
<Dialog
|
||||
v-model:modal="modal"
|
||||
v-model:competency-type="type"
|
||||
v-model:id="idCapacity"
|
||||
:get-data-list="getData"
|
||||
/>
|
||||
|
||||
<DialogEvaluate
|
||||
v-model:modal="modalEvaluate"
|
||||
v-model:data="rows"
|
||||
v-model:type="type"
|
||||
:get-data="getData"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.custom-table2 {
|
||||
max-height: 64vh;
|
||||
|
||||
.q-table tr:nth-child(odd) td {
|
||||
background: white;
|
||||
}
|
||||
|
||||
.q-table tr:nth-child(even) td {
|
||||
background: #f8f8f8;
|
||||
}
|
||||
|
||||
.q-table thead tr {
|
||||
background: #ecebeb;
|
||||
}
|
||||
|
||||
.q-table thead tr th {
|
||||
position: sticky;
|
||||
}
|
||||
|
||||
.q-table td:nth-of-type(2) {
|
||||
z-index: 3 !important;
|
||||
}
|
||||
|
||||
.q-table th:nth-of-type(2),
|
||||
.q-table td:nth-of-type(2) {
|
||||
position: sticky;
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
/* this will be the loading indicator */
|
||||
.q-table thead tr:last-child th {
|
||||
/* height of all previous header rows */
|
||||
top: 48px;
|
||||
}
|
||||
|
||||
.q-table thead tr:first-child th {
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
</style> -->
|
||||
395
src/modules/14_KPI/components/detailList/Topic/01_Indicator.vue
Normal file
395
src/modules/14_KPI/components/detailList/Topic/01_Indicator.vue
Normal file
|
|
@ -0,0 +1,395 @@
|
|||
<script setup lang="ts">
|
||||
import { computed, ref, watch } from "vue";
|
||||
import { useQuasar } from "quasar";
|
||||
import { useRoute } from "vue-router";
|
||||
import config from "@/app.config";
|
||||
import http from "@/plugins/http";
|
||||
|
||||
import type { QTableProps } from "quasar";
|
||||
|
||||
// import Dialog from "@/modules/14_KPI/components/detailList/Dialog/01_FormIndicator.vue";
|
||||
// import Dialog03 from "@/modules/14_KPI/components/detailList/Dialog/03_FormIndicatorSpecial.vue";
|
||||
// import DialogEvaluate from "@/modules/14_KPI/components/detailList/DialogEvaluate/01_Indicator.vue";
|
||||
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
import { useKPIDataStore } from "@/modules/14_KPI/store/KPIStore";
|
||||
|
||||
const $q = useQuasar();
|
||||
const store = useKPIDataStore();
|
||||
const route = useRoute();
|
||||
const {
|
||||
date2Thai,
|
||||
dialogRemove,
|
||||
showLoader,
|
||||
hideLoader,
|
||||
messageError,
|
||||
success,
|
||||
} = useCounterMixin();
|
||||
|
||||
const isReadonly = <boolean>(route.name === "KPIDetail" ? true : false);
|
||||
const title = defineModel<string>("title", { required: true });
|
||||
const rows = defineModel<any>("data", { required: true });
|
||||
const numpage = defineModel<number>("page", { required: true });
|
||||
const evaluationTotal = defineModel<number>("total", { required: true });
|
||||
|
||||
const props = defineProps({
|
||||
fetchList: { type: Function, required: true },
|
||||
});
|
||||
|
||||
const visibleColumns = ref<string[]>([
|
||||
"includingName",
|
||||
"target",
|
||||
"point",
|
||||
"weight",
|
||||
"achievement",
|
||||
"evaluationResults",
|
||||
]);
|
||||
const columns = ref<QTableProps["columns"]>([
|
||||
{
|
||||
name: "includingName",
|
||||
align: "left",
|
||||
label: "ตัวชี้วัด",
|
||||
sortable: true,
|
||||
field: "includingName",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
{
|
||||
name: "target",
|
||||
align: "left",
|
||||
label: "ค่าเป้าหมาย",
|
||||
sortable: true,
|
||||
field: "target",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
{
|
||||
name: "point",
|
||||
align: "left",
|
||||
label: "ระดับคะแนนตามเกณฑ์การประเมิน",
|
||||
sortable: true,
|
||||
field: "point",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
{
|
||||
name: "weight",
|
||||
align: "left",
|
||||
label: "น้ำหนัก (ร้อยละ)",
|
||||
sortable: true,
|
||||
field: "weight",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
{
|
||||
name: "achievement",
|
||||
align: "left",
|
||||
label: "ผลสำเร็จของงาน",
|
||||
sortable: true,
|
||||
field: "achievement",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
{
|
||||
name: "evaluationResults",
|
||||
align: "left",
|
||||
label: "ผลการประเมิน",
|
||||
sortable: true,
|
||||
field: "evaluationResults",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
]);
|
||||
|
||||
const kpiUserPlannedId = ref<string>("");
|
||||
const filterKeyword = ref<string>("");
|
||||
const modal = ref<boolean>(false);
|
||||
const modalAssigned = ref<boolean>(false);
|
||||
const isStatusEdit = ref<boolean>(false);
|
||||
const modalEvaluate = ref<boolean>(false);
|
||||
|
||||
function onAdd(edit: boolean = false, id: string = "") {
|
||||
isStatusEdit.value = edit;
|
||||
kpiUserPlannedId.value = id;
|
||||
if (numpage.value !== 3) {
|
||||
modal.value = true;
|
||||
} else if (numpage.value == 3) {
|
||||
modalAssigned.value = true;
|
||||
}
|
||||
}
|
||||
|
||||
function onEvaluate() {
|
||||
modalEvaluate.value = true;
|
||||
}
|
||||
|
||||
function onDelete(id: string) {
|
||||
// dialogRemove($q, async () => {
|
||||
// try {
|
||||
// showLoader();
|
||||
// const url =
|
||||
// numpage.value === 1
|
||||
// ? config.API.kpiAchievement("planned") + `/${id}`
|
||||
// : numpage.value === 2
|
||||
// ? config.API.kpiAchievement("role") + `/${id}`
|
||||
// : numpage.value === 3
|
||||
// ? config.API.kpiAchievement("special") + `/${id}`
|
||||
// : "";
|
||||
// await http.delete(url);
|
||||
// success($q, "ลบข้อมูลสำเร็จ");
|
||||
// props.fetchList?.();
|
||||
// } catch (err) {
|
||||
// messageError($q, err);
|
||||
// } finally {
|
||||
// hideLoader();
|
||||
// }
|
||||
// });
|
||||
}
|
||||
|
||||
watch(
|
||||
() => modal.value,
|
||||
() => {
|
||||
if (!modal.value) {
|
||||
props.fetchList?.();
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
watch(
|
||||
() => modalAssigned.value,
|
||||
() => {
|
||||
if (!modalAssigned.value) {
|
||||
props.fetchList?.();
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
watch(
|
||||
() => modalEvaluate.value,
|
||||
() => {
|
||||
if (!modalEvaluate.value) {
|
||||
props.fetchList?.();
|
||||
}
|
||||
}
|
||||
);
|
||||
</script>
|
||||
<template>
|
||||
<q-card bordered style="border-radius: 5px" class="no-shadow">
|
||||
<q-card-section class="bg-grey-2 q-py-sm">
|
||||
<div class="row items-center no-wrap">
|
||||
<div class="col">
|
||||
<span class="text-weight-medium">{{ title }}</span>
|
||||
<q-btn
|
||||
v-if="!isReadonly"
|
||||
class="q-ml-xs"
|
||||
flat
|
||||
round
|
||||
icon="mdi-plus"
|
||||
color="primary"
|
||||
size="12px"
|
||||
dense
|
||||
@click="onAdd()"
|
||||
>
|
||||
<q-tooltip>เพิ่มข้อมูล</q-tooltip>
|
||||
</q-btn>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<q-btn
|
||||
v-if="!isReadonly"
|
||||
flat
|
||||
round
|
||||
icon="mdi-clipboard-check-outline"
|
||||
color="blue-5"
|
||||
size="12px"
|
||||
dense
|
||||
@click="onEvaluate"
|
||||
>
|
||||
<q-tooltip>ประเมิน</q-tooltip>
|
||||
</q-btn>
|
||||
</div>
|
||||
</div>
|
||||
</q-card-section>
|
||||
<q-separator />
|
||||
<q-card-section class="q-pa-sm">
|
||||
<q-table
|
||||
ref="table"
|
||||
:columns="columns"
|
||||
:rows="rows"
|
||||
:filter="filterKeyword"
|
||||
row-key="id"
|
||||
flat
|
||||
bordered
|
||||
dense
|
||||
hide-pagination
|
||||
class="custom-table2"
|
||||
:visible-columns="visibleColumns"
|
||||
:rows-per-page-options="[20]"
|
||||
no-data-label="ไม่มีข้อมูล"
|
||||
>
|
||||
<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 v-if="!isReadonly" />
|
||||
</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">
|
||||
<div v-if="col.name === 'point'">
|
||||
<q-rating
|
||||
v-model="props.row.point"
|
||||
max="5"
|
||||
size="sm"
|
||||
color="grey"
|
||||
:color-selected="store.ratingColors"
|
||||
label="ระดับการประเมินพฤติกรรม"
|
||||
disable
|
||||
>
|
||||
<template v-slot:tip-1>
|
||||
<q-tooltip>{{ props.row.achievement1 }}</q-tooltip>
|
||||
</template>
|
||||
<template v-slot:tip-2>
|
||||
<q-tooltip>{{ props.row.achievement2 }}</q-tooltip>
|
||||
</template>
|
||||
<template v-slot:tip-3>
|
||||
<q-tooltip>{{ props.row.achievement3 }}</q-tooltip>
|
||||
</template>
|
||||
<template v-slot:tip-4>
|
||||
<q-tooltip>{{ props.row.achievement4 }}</q-tooltip>
|
||||
</template>
|
||||
<template v-slot:tip-5>
|
||||
<q-tooltip>{{ props.row.achievement5 }}</q-tooltip>
|
||||
</template>
|
||||
</q-rating>
|
||||
</div>
|
||||
<div v-else-if="col.name === 'achievement'">
|
||||
{{ props.row.point ? `ระดับ ${props.row.point}` : "" }}
|
||||
</div>
|
||||
<div v-else-if="col.name === 'evaluationResults'">
|
||||
{{
|
||||
parseFloat(
|
||||
Number((props.row.point / 5) * props.row.weight).toFixed(2)
|
||||
)
|
||||
}}
|
||||
</div>
|
||||
<div v-else>
|
||||
{{ col.value ? col.value : "-" }}
|
||||
</div>
|
||||
</q-td>
|
||||
<td v-if="!isReadonly">
|
||||
<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>
|
||||
<template v-slot:bottom>
|
||||
<span class="text-body2 text-weight-bold"
|
||||
>รวมผลการประเมิน (ร้อยละ)</span
|
||||
>
|
||||
<div class="text-primary q-pl-md">{{ evaluationTotal }}</div>
|
||||
</template>
|
||||
</q-table>
|
||||
<!-- <div class="row text-body2 text-weight-bold q-pa-md">
|
||||
<div class="col-12 text-center row justify-center">
|
||||
<span>รวมผลการประเมิน (ร้อยละ)</span>
|
||||
<div class="text-primary q-pl-md">{{ evaluationTotal }}</div>
|
||||
</div>
|
||||
</div> -->
|
||||
</q-card-section>
|
||||
</q-card>
|
||||
|
||||
<Dialog
|
||||
v-model:modal="modal"
|
||||
:numpage="numpage"
|
||||
:isStatusEdit="isStatusEdit"
|
||||
:kpiUserPlannedId="kpiUserPlannedId"
|
||||
/>
|
||||
<Dialog03
|
||||
v-model:modal="modalAssigned"
|
||||
:numpage="numpage"
|
||||
:isStatusEdit="isStatusEdit"
|
||||
:kpiUserPlannedId="kpiUserPlannedId"
|
||||
/>
|
||||
|
||||
<DialogEvaluate
|
||||
v-model:modal="modalEvaluate"
|
||||
:data="rows"
|
||||
:numpage="numpage"
|
||||
/>
|
||||
</template>
|
||||
<style scoped>
|
||||
.custom-table2 {
|
||||
max-height: 64vh;
|
||||
|
||||
.q-table tr:nth-child(odd) td {
|
||||
background: white;
|
||||
}
|
||||
|
||||
.q-table tr:nth-child(even) td {
|
||||
background: #f8f8f8;
|
||||
}
|
||||
|
||||
.q-table thead tr {
|
||||
background: #ecebeb;
|
||||
}
|
||||
|
||||
.q-table thead tr th {
|
||||
position: sticky;
|
||||
}
|
||||
|
||||
.q-table td:nth-of-type(2) {
|
||||
z-index: 3 !important;
|
||||
}
|
||||
|
||||
.q-table th:nth-of-type(2),
|
||||
.q-table td:nth-of-type(2) {
|
||||
position: sticky;
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
/* this will be the loading indicator */
|
||||
.q-table thead tr:last-child th {
|
||||
/* height of all previous header rows */
|
||||
top: 48px;
|
||||
}
|
||||
|
||||
.q-table thead tr:first-child th {
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
391
src/modules/14_KPI/components/detailList/Topic/02_Competency.vue
Normal file
391
src/modules/14_KPI/components/detailList/Topic/02_Competency.vue
Normal file
|
|
@ -0,0 +1,391 @@
|
|||
<script setup lang="ts">
|
||||
import { onMounted, ref, computed } from "vue";
|
||||
|
||||
// import Dialog from "@/modules/14_KPI/components/detailList/Dialog/04_FormCompetency.vue";
|
||||
// import DialogEvaluate from "@/modules/14_KPI/components/detailList/DialogEvaluate/02_Competenct.vue";
|
||||
|
||||
import { useQuasar, type QTableProps } from "quasar";
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
import { useKPIDataStore } from "@/modules/14_KPI/store/KPIStore";
|
||||
|
||||
import http from "@/plugins/http";
|
||||
import config from "@/app.config";
|
||||
import { useRoute } from "vue-router";
|
||||
|
||||
// import type {
|
||||
// FormCapacityList,
|
||||
// ListCriteria,
|
||||
// } from "@/modules/08_KPI/interface/request/index";
|
||||
|
||||
const dataListCriteria = defineModel<any[]>("dataListCriteria", {
|
||||
required: true,
|
||||
});
|
||||
|
||||
const sortedDataListCriteria = computed(() => {
|
||||
return dataListCriteria.value.sort((a, b) => a.level - b.level);
|
||||
});
|
||||
|
||||
const modalEvaluate = ref<boolean>(false);
|
||||
const store = useKPIDataStore();
|
||||
|
||||
const route = useRoute();
|
||||
const id = ref<string>(route.params.id as string);
|
||||
const isReadonly = <boolean>(route.name === "KPIDetail" ? true : false);
|
||||
|
||||
const idCapacity = ref<string | null>(null);
|
||||
|
||||
const $q = useQuasar();
|
||||
const mixin = useCounterMixin();
|
||||
const {
|
||||
date2Thai,
|
||||
messageError,
|
||||
showLoader,
|
||||
hideLoader,
|
||||
dialogRemove,
|
||||
success,
|
||||
} = mixin;
|
||||
|
||||
const modal = ref<boolean>(false);
|
||||
|
||||
const columns = ref<QTableProps["columns"]>([
|
||||
{
|
||||
name: "name",
|
||||
align: "left",
|
||||
label: "รายการสมรรถนะ",
|
||||
sortable: true,
|
||||
field: "name",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
{
|
||||
name: "level",
|
||||
align: "left",
|
||||
label: "ระดับที่คาดหวัง",
|
||||
sortable: true,
|
||||
field: "level",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
{
|
||||
name: "point",
|
||||
align: "left",
|
||||
label: "ระดับคะแนนตามเกณฑ์การประเมิน",
|
||||
sortable: true,
|
||||
field: "point",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
{
|
||||
name: "weight",
|
||||
align: "left",
|
||||
label: "น้ำหนัก (ร้อยละ)",
|
||||
sortable: true,
|
||||
field: "weight",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
{
|
||||
name: "summary",
|
||||
align: "left",
|
||||
label: "ผลการประเมิน",
|
||||
sortable: true,
|
||||
field: "summary",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
]);
|
||||
|
||||
const typeCompetency = ref<string>("");
|
||||
function onAdd(type: string) {
|
||||
typeCompetency.value = type;
|
||||
modal.value = true;
|
||||
}
|
||||
|
||||
const rows = ref<any>([]);
|
||||
const lists = ref<any>([]);
|
||||
const resultEvaluation = ref<string | 0>(0);
|
||||
function getData(type: string) {
|
||||
showLoader();
|
||||
http
|
||||
.get(config.API.kpiUserCapacity + `?id=${id.value}&type=${type}`)
|
||||
.then(async (res) => {
|
||||
const data = res.data.result.data;
|
||||
rows.value[type] = data;
|
||||
lists.value = await lists.value.filter((x: any) => x.type != type);
|
||||
lists.value.push({ type: type, data });
|
||||
})
|
||||
.catch((e) => {
|
||||
messageError($q, e);
|
||||
})
|
||||
.finally(async () => {
|
||||
// cal summary
|
||||
let result = 0;
|
||||
let weight = 0;
|
||||
let total = 0;
|
||||
for (let index = 0; index < store.competencyType.length; index++) {
|
||||
const element = await store.competencyType[index];
|
||||
const dataArr = await lists.value.find(
|
||||
(x: any) => x.type == element.id
|
||||
);
|
||||
if (dataArr) {
|
||||
result += dataArr.data.reduce(
|
||||
(sum: number, e: any) => sum + (e.point / 5) * e.weight,
|
||||
0
|
||||
);
|
||||
weight += dataArr.data.reduce(
|
||||
(sum: number, e: any) => sum + e.weight,
|
||||
0
|
||||
);
|
||||
total++;
|
||||
}
|
||||
}
|
||||
if (total > 0) {
|
||||
let weightAvg = weight / total;
|
||||
let resultAvg = result / total;
|
||||
let sum = weightAvg != 0 ? (resultAvg / weightAvg) * 20 : 0;
|
||||
resultEvaluation.value = sum.toFixed(2);
|
||||
}
|
||||
// end cal summary
|
||||
hideLoader();
|
||||
});
|
||||
}
|
||||
|
||||
function onEdit(data: any, type: string) {
|
||||
idCapacity.value = data.id;
|
||||
typeCompetency.value = type;
|
||||
modal.value = true;
|
||||
}
|
||||
|
||||
function onDelete(id: string, type: string) {
|
||||
// dialogRemove($q, () => {
|
||||
// showLoader();
|
||||
// http
|
||||
// .delete(config.API.kpiUserCapacity + `/${id}`)
|
||||
// .then((res) => {
|
||||
// success($q, "ลบข้อมูลสำเร็จ");
|
||||
// getData(type);
|
||||
// })
|
||||
// .catch((e) => {
|
||||
// messageError($q, e);
|
||||
// })
|
||||
// .finally(() => {
|
||||
// hideLoader();
|
||||
// });
|
||||
// });
|
||||
}
|
||||
|
||||
function onEvaluate(type: string) {
|
||||
typeCompetency.value = type;
|
||||
modalEvaluate.value = true;
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
for (let index = 0; index < store.competencyType.length; index++) {
|
||||
const element = store.competencyType[index];
|
||||
getData(element.id);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div v-for="(item, index) in store.competencyType" :key="index">
|
||||
<q-card bordered style="border-radius: 5px" class="no-shadow">
|
||||
<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="!isReadonly"
|
||||
class="q-ml-xs"
|
||||
flat
|
||||
round
|
||||
icon="mdi-plus"
|
||||
color="primary"
|
||||
size="12px"
|
||||
dense
|
||||
@click="onAdd(item.id)"
|
||||
>
|
||||
<q-tooltip>เพิ่มข้อมูล</q-tooltip>
|
||||
</q-btn>
|
||||
</div>
|
||||
|
||||
<q-space />
|
||||
<q-btn
|
||||
v-if="!isReadonly"
|
||||
flat
|
||||
round
|
||||
icon="mdi-clipboard-check-outline"
|
||||
color="blue-5"
|
||||
size="12px"
|
||||
dense
|
||||
@click="onEvaluate(item.id)"
|
||||
>
|
||||
<q-tooltip>ประเมิน</q-tooltip>
|
||||
</q-btn>
|
||||
</div>
|
||||
</q-card-section>
|
||||
<q-card-section class="q-pa-sm">
|
||||
<q-table
|
||||
ref="table"
|
||||
:columns="columns"
|
||||
:rows="rows[item.id]"
|
||||
row-key="id"
|
||||
flat
|
||||
bordered
|
||||
:paging="true"
|
||||
dense
|
||||
hide-pagination
|
||||
class="custom-table2"
|
||||
no-data-label="ไม่มีข้อมูล"
|
||||
>
|
||||
<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 v-if="!isReadonly" />
|
||||
</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">
|
||||
<div v-if="col.name == 'createDate'">
|
||||
{{ col.value ? date2Thai(col.value) : "-" }}
|
||||
</div>
|
||||
<div v-else-if="col.name == 'point'">
|
||||
<div>
|
||||
<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'">
|
||||
{{
|
||||
props.row.point !== 0
|
||||
? (props.row.point / 5) * props.row.weight
|
||||
: "-"
|
||||
}}
|
||||
</div>
|
||||
<div v-else>
|
||||
{{ col.value }}
|
||||
</div>
|
||||
</q-td>
|
||||
<q-td v-if="!isReadonly">
|
||||
<q-btn
|
||||
flat
|
||||
round
|
||||
icon="edit"
|
||||
color="edit"
|
||||
@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>
|
||||
</q-td>
|
||||
</q-tr>
|
||||
</template>
|
||||
</q-table>
|
||||
</q-card-section>
|
||||
</q-card>
|
||||
</div>
|
||||
|
||||
<Dialog
|
||||
v-model:modal="modal"
|
||||
v-model:competency-type="typeCompetency"
|
||||
v-model:id="idCapacity"
|
||||
:get-data-list="getData"
|
||||
/>
|
||||
|
||||
<DialogEvaluate
|
||||
v-model:modal="modalEvaluate"
|
||||
v-model:data="rows[typeCompetency]"
|
||||
v-model:type="typeCompetency"
|
||||
v-model:dataListCriteria="dataListCriteria"
|
||||
:get-data="getData"
|
||||
/>
|
||||
|
||||
<div class="row text-body2 text-weight-bold justify-center">
|
||||
<span>สรุปผลการประเมินสมรรถนะ (คะแนนเต็ม 20 คะแนน)</span>
|
||||
<div class="text-primary q-pl-md">{{ resultEvaluation }}</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.custom-table2 {
|
||||
max-height: 64vh;
|
||||
|
||||
.q-table tr:nth-child(odd) td {
|
||||
background: white;
|
||||
}
|
||||
|
||||
.q-table tr:nth-child(even) td {
|
||||
background: #f8f8f8;
|
||||
}
|
||||
|
||||
.q-table thead tr {
|
||||
background: #ecebeb;
|
||||
}
|
||||
|
||||
.q-table thead tr th {
|
||||
position: sticky;
|
||||
}
|
||||
|
||||
.q-table td:nth-of-type(2) {
|
||||
z-index: 3 !important;
|
||||
}
|
||||
|
||||
.q-table th:nth-of-type(2),
|
||||
.q-table td:nth-of-type(2) {
|
||||
position: sticky;
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
/* this will be the loading indicator */
|
||||
.q-table thead tr:last-child th {
|
||||
/* height of all previous header rows */
|
||||
top: 48px;
|
||||
}
|
||||
|
||||
.q-table thead tr:first-child th {
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,9 +1,188 @@
|
|||
import { defineStore } from "pinia";
|
||||
import { ref } from "vue";
|
||||
import type { DataOption } from "@/modules/14_KPI/interface/index/Main";
|
||||
|
||||
// store
|
||||
export const useKPIDataStore = defineStore("KPIDataStore", () => {
|
||||
const competencyType = ref<string>("HEAD");
|
||||
// const competencyType = ref<string>("HEAD");
|
||||
|
||||
return { competencyType };
|
||||
const tabMain = ref<string>("1");
|
||||
const dataProfile = ref<any>();
|
||||
const dataEvaluation = ref<any>();
|
||||
|
||||
const competencyType = ref<DataOption[]>([
|
||||
{
|
||||
id: "HEAD",
|
||||
name: "สมรรถนะหลัก",
|
||||
},
|
||||
{
|
||||
id: "GROUP",
|
||||
name: "สมรรถนะประจำกลุ่มงาน",
|
||||
},
|
||||
{
|
||||
id: "EXECUTIVE",
|
||||
name: "สมรรถนะประจำผู้บริหารกรุงเทพมหานคร",
|
||||
},
|
||||
{
|
||||
id: "DIRECTOR",
|
||||
name: "สมรรถนะเฉพาะสำหรับตำแหน่ง ผอ.เขต ผช.ผอ.เขต และหัวหน้าฝ่ายในสังกัด สนง.เขต",
|
||||
},
|
||||
{
|
||||
id: "INSPECTOR",
|
||||
name: "สมรรถนะเฉพาะสำหรับตำแหน่งผู้ตรวจราชการ กทม. และผู้ตรวจราชการ",
|
||||
},
|
||||
]);
|
||||
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
const ratingColors = ref<string[]>([
|
||||
"light-blue-3",
|
||||
"light-blue-6",
|
||||
"blue",
|
||||
"blue-9",
|
||||
"blue-10",
|
||||
]);
|
||||
|
||||
function checkCompetency() {
|
||||
const position = dataProfile.value.position;
|
||||
const posTypeName = dataProfile.value.posTypeName;
|
||||
const posLevelName = dataProfile.value.posLevelName;
|
||||
|
||||
if (
|
||||
position == "ผู้ตรวจราชการกรุงเทพมหานคร" ||
|
||||
position == "ผู้ตรวจราชการ"
|
||||
) {
|
||||
competencyType.value = competencyType.value.filter(
|
||||
(x: DataOption) => x.id == "HEAD" || x.id == "INSPECTOR"
|
||||
);
|
||||
} else if (position == "ผู้อำนวยการเขต") {
|
||||
competencyType.value = competencyType.value.filter(
|
||||
(x: DataOption) => x.id == "HEAD" || x.id == "DIRECTOR"
|
||||
);
|
||||
} else {
|
||||
switch (posTypeName + " " + posLevelName) {
|
||||
// case "ทั่วไป ปฏิบัติงาน":
|
||||
// case "ทั่วไป ชำนาญงาน":
|
||||
// case "ทั่วไป อาวุโส":
|
||||
// case "วิชาการ ปฏิบัติการ":
|
||||
// case "วิชาการ ชำนาญการ":
|
||||
// case "วิชาการ ชำนาญการพิเศษ":
|
||||
// case "วิชาการ เชี่ยวชาญ":
|
||||
// case "วิชาการ ทรงคุณวุฒิ":
|
||||
// competencyType.value = competencyType.value.filter(
|
||||
// (x: DataOptions) => x.id == "HEAD" || x.id == "GROUP"
|
||||
// );
|
||||
// break;
|
||||
case "อำนวยการ ต้น":
|
||||
case "อำนวยการ สูง":
|
||||
case "บริหาร ต้น":
|
||||
case "บริหาร สูง":
|
||||
competencyType.value = competencyType.value.filter(
|
||||
(x: DataOption) => x.id == "HEAD" || x.id == "EXECUTIVE"
|
||||
);
|
||||
break;
|
||||
default:
|
||||
competencyType.value = competencyType.value.filter(
|
||||
(x: DataOption) => x.id == "HEAD" || x.id == "GROUP"
|
||||
);
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const defaultCompetencyCoreLevel = ref<number>();
|
||||
const defaultCompetencyGroupLevel = ref<number | null>(null);
|
||||
function checkCompetencyDefaultCompetencyLevel() {
|
||||
const posTypeName = dataProfile.value.posTypeName;
|
||||
const posLevelName = dataProfile.value.posLevelName;
|
||||
|
||||
switch (posTypeName + " " + posLevelName) {
|
||||
case "บริหาร สูง":
|
||||
defaultCompetencyCoreLevel.value = 5;
|
||||
break;
|
||||
case "บริหาร ต้น":
|
||||
defaultCompetencyCoreLevel.value = 4;
|
||||
break;
|
||||
case "อำนวยการ สูง":
|
||||
defaultCompetencyCoreLevel.value = 4;
|
||||
break;
|
||||
case "อำนวยการ ต้น":
|
||||
defaultCompetencyCoreLevel.value = 3;
|
||||
break;
|
||||
case "วิชาการ ทรงคุณวุฒิ":
|
||||
defaultCompetencyCoreLevel.value = 5;
|
||||
defaultCompetencyGroupLevel.value = 5;
|
||||
break;
|
||||
case "วิชาการ เชี่ยวชาญ":
|
||||
defaultCompetencyCoreLevel.value = 4;
|
||||
defaultCompetencyGroupLevel.value = 4;
|
||||
break;
|
||||
case "วิชาการ ชำนาญการพิเศษ":
|
||||
defaultCompetencyCoreLevel.value = 3;
|
||||
defaultCompetencyGroupLevel.value = 4;
|
||||
break;
|
||||
case "วิชาการ ชำนาญการ":
|
||||
defaultCompetencyCoreLevel.value = 2;
|
||||
defaultCompetencyGroupLevel.value = 3;
|
||||
break;
|
||||
case "วิชาการ ปฏิบัติการ":
|
||||
defaultCompetencyCoreLevel.value = 1;
|
||||
defaultCompetencyGroupLevel.value = 2;
|
||||
break;
|
||||
case "ทั่วไป ทักษะพิเศษ":
|
||||
defaultCompetencyCoreLevel.value = 4;
|
||||
defaultCompetencyGroupLevel.value = 4;
|
||||
break;
|
||||
case "ทั่วไป อาวุโส":
|
||||
defaultCompetencyCoreLevel.value = 3;
|
||||
defaultCompetencyGroupLevel.value = 3;
|
||||
break;
|
||||
case "ทั่วไป ชำนาญงาน":
|
||||
defaultCompetencyCoreLevel.value = 2;
|
||||
defaultCompetencyGroupLevel.value = 2;
|
||||
break;
|
||||
case "ทั่วไป ปฏิบัติงาน":
|
||||
defaultCompetencyCoreLevel.value = 1;
|
||||
defaultCompetencyGroupLevel.value = 1;
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
competencyType,
|
||||
convertStatus,
|
||||
convertResults,
|
||||
tabMain,
|
||||
dataProfile,
|
||||
dataEvaluation,
|
||||
ratingColors,
|
||||
checkCompetency,
|
||||
checkCompetencyDefaultCompetencyLevel,
|
||||
};
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,3 +1,244 @@
|
|||
<script setup lang="ts">
|
||||
import { ref, onMounted, reactive } from "vue";
|
||||
import { useRoute, useRouter } from "vue-router";
|
||||
import { useQuasar } from "quasar";
|
||||
import http from "@/plugins/http";
|
||||
import config from "@/app.config";
|
||||
|
||||
import TabMain from "@/modules/14_KPI/components/detailList/TabMain.vue";
|
||||
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
import { useKPIDataStore } from "@/modules/14_KPI/store/KPIStore";
|
||||
|
||||
// import type { FormProfile } from "@/modules/08_KPI/interface/request/index";
|
||||
|
||||
const route = useRoute();
|
||||
const id = ref<string>(route.params.id as string);
|
||||
const isReadonly = <boolean>(route.name === "KPIDetail" ? true : false);
|
||||
|
||||
const store = useKPIDataStore();
|
||||
const $q = useQuasar();
|
||||
const mixin = useCounterMixin();
|
||||
const { showLoader, hideLoader, messageError } = mixin;
|
||||
|
||||
const formProfile = reactive<any>({
|
||||
fullName: "",
|
||||
position: "",
|
||||
type: "",
|
||||
level: "",
|
||||
status: "",
|
||||
result: "",
|
||||
score: "-",
|
||||
avartar: "",
|
||||
});
|
||||
|
||||
const router = useRouter();
|
||||
|
||||
function fetchEvaluation() {
|
||||
showLoader();
|
||||
http
|
||||
.get(config.API.kpiUserEvaluation + `/${id.value}`)
|
||||
.then((res) => {
|
||||
const data = res.data.result;
|
||||
store.dataEvaluation = data;
|
||||
formProfile.status = store.convertStatus(data.evaluationStatus);
|
||||
formProfile.result = store.convertResults(data.evaluationResults);
|
||||
fetchProfile(data.profileId);
|
||||
})
|
||||
.catch((e) => {
|
||||
messageError($q, e);
|
||||
})
|
||||
.finally(() => {
|
||||
hideLoader();
|
||||
});
|
||||
}
|
||||
|
||||
function getProfile() {
|
||||
showLoader();
|
||||
http
|
||||
.get(config.API.profilePosition())
|
||||
.then((res) => {
|
||||
const data = res.data.result;
|
||||
store.dataProfile = data;
|
||||
store.checkCompetency();
|
||||
store.checkCompetencyDefaultCompetencyLevel();
|
||||
formProfile.fullName = `${data.prefix}${data.firstName} ${data.lastName}`;
|
||||
formProfile.position = data.position;
|
||||
formProfile.type = data.posTypeName;
|
||||
formProfile.level = data.posLevelName;
|
||||
})
|
||||
.catch((e) => {
|
||||
messageError($q, e);
|
||||
})
|
||||
.finally(() => {
|
||||
hideLoader();
|
||||
});
|
||||
}
|
||||
|
||||
async function fetchProfile(id: string) {
|
||||
showLoader();
|
||||
await http
|
||||
.get(
|
||||
config.API.fileByFile("ทะเบียนประวัติ", "โปรไฟล์", id, `profile-${id}`)
|
||||
)
|
||||
.then(async (res) => {
|
||||
formProfile.avartar = res.data.downloadUrl;
|
||||
})
|
||||
.catch(() => {
|
||||
// profilePicture.value = avatar;
|
||||
})
|
||||
.finally(() => {
|
||||
hideLoader();
|
||||
});
|
||||
}
|
||||
|
||||
/** save */
|
||||
function onSave() {}
|
||||
|
||||
onMounted(() => {
|
||||
fetchEvaluation();
|
||||
getProfile();
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>detail</div>
|
||||
<div class="col-xs-12 col-sm-12 col-md-11">
|
||||
<div class="toptitle col-12 row items-center">
|
||||
<q-btn
|
||||
icon="mdi-arrow-left"
|
||||
unelevated
|
||||
round
|
||||
dense
|
||||
flat
|
||||
color="primary"
|
||||
class="q-mr-sm"
|
||||
@click="isReadonly ? router.push(`/KPI-list`) : router.push(`/KPI`)"
|
||||
/>
|
||||
{{ id ? `แก้ไขแบบประเมิน` : `เพิ่มแบบประเมิน` }}
|
||||
<q-space />
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<q-card bordered flat class="relative-position">
|
||||
<div
|
||||
class="absolute-center-left"
|
||||
style="left: 2%; top: 50%; transform: translateY(-50%)"
|
||||
>
|
||||
<q-avatar size="95px">
|
||||
<img
|
||||
v-if="formProfile.avartar == null"
|
||||
src="@/assets/avatar_user.jpg"
|
||||
class="bg-grey-3"
|
||||
style="object-fit: cover"
|
||||
/>
|
||||
|
||||
<img v-else :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="row col-12 items-center">
|
||||
<span class="text-h6 text-weight-medium text-primary">{{
|
||||
formProfile.fullName ? formProfile.fullName : "-"
|
||||
}}</span>
|
||||
<q-space />
|
||||
<div class="q-gutter-x-sm">
|
||||
<q-btn
|
||||
unelevated
|
||||
round
|
||||
icon="mdi-file-eye-outline"
|
||||
color="grey-2"
|
||||
text-color="primary"
|
||||
size="md"
|
||||
>
|
||||
<q-tooltip>ดูข้อมูลการช่วยราชการ</q-tooltip>
|
||||
</q-btn>
|
||||
<q-btn
|
||||
unelevated
|
||||
round
|
||||
color="grey-2"
|
||||
text-color="blue-5"
|
||||
icon="mdi-file-eye-outline"
|
||||
size="md"
|
||||
>
|
||||
<q-tooltip>ดูข้อมูลการทดลองงาน</q-tooltip>
|
||||
</q-btn>
|
||||
</div>
|
||||
</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="row no-wrap">
|
||||
<div class="col-2">
|
||||
<div class="column">
|
||||
<span class="text-grey-6">ตำแหน่งในสายงาน</span>
|
||||
<span class="text-weight-medium text-dark">{{
|
||||
formProfile.position
|
||||
}}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-2">
|
||||
<div class="column">
|
||||
<span class="text-grey-6">ประเภทตำแหน่ง</span>
|
||||
<span class="text-weight-medium text-dark">{{
|
||||
formProfile.type
|
||||
}}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-2">
|
||||
<div class="column">
|
||||
<span class="text-grey-6">ระดับตำแหน่ง</span>
|
||||
<span class="text-weight-medium text-dark">{{
|
||||
formProfile.level
|
||||
}}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-2">
|
||||
<div class="column">
|
||||
<span class="text-grey-6">สถานะการประเมิน</span>
|
||||
<span class="text-weight-medium text-dark">{{
|
||||
formProfile.status
|
||||
}}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-2">
|
||||
<div class="column">
|
||||
<span class="text-grey-6">ผลการประเมิน</span>
|
||||
<span class="text-weight-medium text-dark">{{
|
||||
formProfile.result
|
||||
}}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-2">
|
||||
<div class="column">
|
||||
<span class="text-grey-6">คะแนนประเมิน</span>
|
||||
<span class="text-weight-medium text-primary">{{
|
||||
formProfile.score
|
||||
}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</q-card>
|
||||
|
||||
<q-card class="q-mt-md rounded">
|
||||
<TabMain />
|
||||
</q-card>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<style>
|
||||
.bg-toolbar {
|
||||
background-color: #f2fbfa;
|
||||
}
|
||||
|
||||
.absolute-center-left {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,3 +1,328 @@
|
|||
<script setup lang="ts">
|
||||
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 { DataOption } from "@/modules/14_KPI/interface/index/Main";
|
||||
import type { QTableProps } from "quasar";
|
||||
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
import { useKPIDataStore } from "@/modules/14_KPI/store/KPIStore";
|
||||
|
||||
const $q = useQuasar();
|
||||
const router = useRouter();
|
||||
const store = useKPIDataStore();
|
||||
|
||||
const { showLoader, hideLoader, messageError, date2Thai, dialogConfirm } =
|
||||
useCounterMixin();
|
||||
|
||||
const filterKeyword = ref<string>("");
|
||||
|
||||
const rows = ref<any>();
|
||||
|
||||
const year = ref<number>(new Date().getFullYear());
|
||||
|
||||
const round = ref<string>("");
|
||||
const roundOp = ref<DataOption[]>([]);
|
||||
|
||||
const visibleColumns = ref<string[]>([
|
||||
"name",
|
||||
"createdAt",
|
||||
"evaluationStatus",
|
||||
"evaluationStatus",
|
||||
]);
|
||||
const columns = ref<QTableProps["columns"]>([
|
||||
{
|
||||
name: "name",
|
||||
align: "left",
|
||||
label: "ผู้ขอรับการประเมิน",
|
||||
sortable: true,
|
||||
field: "name",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
{
|
||||
name: "createdAt",
|
||||
align: "left",
|
||||
label: "วันที่สร้างแบบประเมิน",
|
||||
sortable: true,
|
||||
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: "evaluationStatus",
|
||||
align: "left",
|
||||
label: "สถานะการประเมิน",
|
||||
sortable: true,
|
||||
field: "evaluationStatus",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
format: (v) => store.convertResults(v),
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
{
|
||||
name: "evaluationStatus",
|
||||
align: "left",
|
||||
label: "ผลการประเมิน",
|
||||
sortable: true,
|
||||
field: "evaluationStatus",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
format: (v) => store.convertResults(v),
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
]);
|
||||
|
||||
const formQuery = reactive({
|
||||
page: 1,
|
||||
pageSize: 10,
|
||||
});
|
||||
const maxPage = ref<number>(1);
|
||||
const totalList = ref<number>(0);
|
||||
|
||||
function fetchRoundOption() {
|
||||
showLoader();
|
||||
http
|
||||
.get(
|
||||
config.API.kpiPeriod +
|
||||
`?page=${1}&pageSize=${10}&keyword=${""}&year=${year.value}`
|
||||
)
|
||||
.then((res) => {
|
||||
const data = res.data.result.data;
|
||||
const list = data.map((e: any) => ({
|
||||
id: e.id,
|
||||
name:
|
||||
e.durationKPI === "OCT"
|
||||
? "รอบตุลาคม"
|
||||
: e.durationKPI === "APR"
|
||||
? "รอบเมษายน"
|
||||
: "",
|
||||
}));
|
||||
roundOp.value = list;
|
||||
fetchList();
|
||||
})
|
||||
.catch((err) => {
|
||||
messageError($q, err);
|
||||
})
|
||||
.finally(() => {
|
||||
hideLoader();
|
||||
});
|
||||
}
|
||||
|
||||
function fetchList() {
|
||||
showLoader();
|
||||
http
|
||||
.get(
|
||||
config.API.kpiUserEvaluation +
|
||||
`/admin?page=${formQuery.page}&pageSize=${formQuery.pageSize}&kpiPeriodId=${round.value}`
|
||||
)
|
||||
.then((res) => {
|
||||
const data = res.data.result;
|
||||
maxPage.value = Math.ceil(data.total / formQuery.pageSize);
|
||||
totalList.value = data.total;
|
||||
rows.value = data.data;
|
||||
})
|
||||
.catch((err) => {
|
||||
messageError($q, err);
|
||||
})
|
||||
.finally(() => {
|
||||
hideLoader();
|
||||
});
|
||||
}
|
||||
|
||||
function changRound() {
|
||||
formQuery.page = 1;
|
||||
fetchList();
|
||||
}
|
||||
|
||||
function redirectViewDetail(id: string) {
|
||||
router.push(`KPI-list/${id}`);
|
||||
}
|
||||
|
||||
/**
|
||||
* function updatePagination
|
||||
* @param newPagination ข้อมูล Pagination ใหม่
|
||||
*/
|
||||
function updatePagination(newPagination: any) {
|
||||
formQuery.page = 1;
|
||||
formQuery.pageSize = newPagination.rowsPerPage;
|
||||
}
|
||||
|
||||
const pagination = ref({
|
||||
sortBy: "desc",
|
||||
descending: false,
|
||||
page: 1,
|
||||
rowsPerPage: 10,
|
||||
});
|
||||
|
||||
watch(
|
||||
() => formQuery.pageSize,
|
||||
() => {
|
||||
fetchList();
|
||||
}
|
||||
);
|
||||
|
||||
onMounted(async () => {
|
||||
fetchRoundOption();
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>list</div>
|
||||
<div class="col-xs-12 col-sm-12 col-md-11">
|
||||
<div class="toptitle col-12 row items-center">
|
||||
รายการการประเมินผลการปฏิบัติราชการระดับบุคคล
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<q-card bordered class="q-pa-md">
|
||||
<q-toolbar style="padding: 0">
|
||||
<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()"
|
||||
>
|
||||
<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="roundOp"
|
||||
style="min-width: 200px"
|
||||
emit-value
|
||||
map-options
|
||||
@update:model-value="changRound"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<q-space />
|
||||
<div class="row q-gutter-sm">
|
||||
<q-input
|
||||
outlined
|
||||
dense
|
||||
v-model="filterKeyword"
|
||||
label="ค้นหา"
|
||||
></q-input>
|
||||
<q-select
|
||||
v-model="visibleColumns"
|
||||
multiple
|
||||
outlined
|
||||
dense
|
||||
options-dense
|
||||
:display-value="$q.lang.table.columns"
|
||||
emit-value
|
||||
map-options
|
||||
:options="columns"
|
||||
option-value="name"
|
||||
options-cover
|
||||
style="min-width: 150px"
|
||||
/>
|
||||
</div>
|
||||
</q-toolbar>
|
||||
<div class="col-12">
|
||||
<d-table
|
||||
ref="table"
|
||||
:columns="columns"
|
||||
:rows="rows"
|
||||
:filter="filterKeyword"
|
||||
row-key="id"
|
||||
flat
|
||||
bordered
|
||||
:paging="true"
|
||||
dense
|
||||
: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 v-if="col.name === 'name'">
|
||||
{{
|
||||
`${props.row.prefix}${props.row.firstname} ${props.row.lastname}`
|
||||
}}
|
||||
</div>
|
||||
<div v-else>
|
||||
{{ col.value ? col.value : "-" }}
|
||||
</div>
|
||||
</q-td>
|
||||
</q-tr>
|
||||
</template>
|
||||
<template v-slot:pagination="scope">
|
||||
ทั้งหมด {{ totalList }} รายการ
|
||||
<q-pagination
|
||||
v-model="formQuery.page"
|
||||
active-color="primary"
|
||||
color="dark"
|
||||
:max="Number(maxPage)"
|
||||
size="sm"
|
||||
boundary-links
|
||||
direction-links
|
||||
:max-pages="5"
|
||||
@update:model-value="fetchList"
|
||||
></q-pagination>
|
||||
</template>
|
||||
</d-table>
|
||||
</div>
|
||||
</q-card>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<style scoped lang="scss">
|
||||
.icon-color {
|
||||
color: #4154b3;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -45,11 +45,14 @@ function fetchData(id: string) {
|
|||
.get(config.API.developmentMainTab("tab1", id))
|
||||
.then(async (res) => {
|
||||
const data = res.data.result;
|
||||
|
||||
formData.year = data.year;
|
||||
formData.reason = data.reason;
|
||||
formData.projectName = data.projectName;
|
||||
formData.objective = data.objective;
|
||||
formData.nodeId = data.nodeId;
|
||||
formData.node = data.node;
|
||||
formData.orgRevisionId = data.revisionId;
|
||||
|
||||
const arrayExpanded = [
|
||||
data.root,
|
||||
|
|
@ -59,19 +62,6 @@ function fetchData(id: string) {
|
|||
data.child4,
|
||||
];
|
||||
expanded.value = arrayExpanded.filter((e) => e !== null).slice(0, -1);
|
||||
|
||||
// if (node.value && formData?.nodeId) {
|
||||
// const nodeTree = await searchAndReplace(node.value, formData?.nodeId);
|
||||
// if (nodeTree) {
|
||||
// expanded.value = [];
|
||||
// const parts = nodeTree?.orgName.split("/");
|
||||
// for (let i = 1; i < parts.length; i++) {
|
||||
// const arrangedParts = parts[i];
|
||||
// expanded.value.push(arrangedParts);
|
||||
// }
|
||||
// updateSelected(nodeTree);
|
||||
// }
|
||||
// }
|
||||
})
|
||||
.catch((err) => {
|
||||
messageError($q, err);
|
||||
|
|
@ -144,26 +134,6 @@ function updateSelected(data: DataTree) {
|
|||
formData.orgRevisionId = data.orgRevisionId;
|
||||
}
|
||||
|
||||
/**
|
||||
* function หาหน่วยงานที่รับผิดชอบ
|
||||
* @param orgTreeData ข้อมูล nodeTree
|
||||
* @param treeId tree ID
|
||||
*/
|
||||
async function searchAndReplace(orgTreeData: any, treeId: string | null) {
|
||||
if (orgTreeData) {
|
||||
for (let orgTree of orgTreeData) {
|
||||
if (orgTree.orgTreeId === treeId) {
|
||||
return orgTree;
|
||||
}
|
||||
let foundOrg: any = await searchAndReplace(orgTree.children, treeId);
|
||||
if (foundOrg) {
|
||||
return foundOrg;
|
||||
}
|
||||
}
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
fetchActive();
|
||||
});
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue