updated kpi list & detail
This commit is contained in:
parent
8c829c03bd
commit
bd0835b0f1
32 changed files with 5970 additions and 2034 deletions
587
src/modules/14_KPI/components/Tab/01_Assessment.vue
Normal file
587
src/modules/14_KPI/components/Tab/01_Assessment.vue
Normal file
|
|
@ -0,0 +1,587 @@
|
|||
<script setup lang="ts">
|
||||
import { ref, onMounted, computed, watch, reactive } from "vue";
|
||||
import { useQuasar, type QTableProps } from "quasar";
|
||||
import { useRoute } from "vue-router";
|
||||
|
||||
import DialogListCriteria from "@/modules/14_KPI/components/Tab/Dialog/DialogListCriteria.vue";
|
||||
|
||||
import config from "@/app.config";
|
||||
import http from "@/plugins/http";
|
||||
|
||||
import Work from "@/modules/14_KPI/components/Tab/Topic/01_Indicator.vue";
|
||||
import Competency from "@/modules/14_KPI/components/Tab/Topic/02_Competency.vue";
|
||||
import Develop from "@/modules/14_KPI/components/Tab/Topic/03_Develop.vue";
|
||||
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
import { useKpiDataStore } from "@/modules/14_KPI/store";
|
||||
|
||||
import type { ListCriteria } from "@/modules/14_KPI/interface/request/index";
|
||||
const dataListCriteria = ref<ListCriteria[]>([]);
|
||||
|
||||
const modalCriteria = ref<boolean>(false);
|
||||
const $q = useQuasar();
|
||||
const route = useRoute();
|
||||
const {
|
||||
hideLoader,
|
||||
messageError,
|
||||
date2Thai,
|
||||
success,
|
||||
showLoader,
|
||||
dialogRemove,
|
||||
} = 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);
|
||||
|
||||
const weightPlanned = ref<number>(0);
|
||||
const weightRole = ref<number>(0);
|
||||
const weightAssigned = ref<number>(0);
|
||||
const resultPlanned = ref<number>(0);
|
||||
const resultRole = ref<number>(0);
|
||||
const resultAssigned = ref<number>(0);
|
||||
function fetchListPlanned() {
|
||||
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) {
|
||||
resultPlanned.value = newRow.reduce(
|
||||
(sum: number, e: any) => sum + e.evaluationResults,
|
||||
0
|
||||
);
|
||||
store.excusiveIndicator1PercentVal = resultPlanned.value;
|
||||
|
||||
const weight = newRow.reduce(
|
||||
(sum: number, e: any) => sum + e.weight,
|
||||
0
|
||||
);
|
||||
|
||||
weightPlanned.value = weight;
|
||||
store.indicatorWeight1Total = Number(weight);
|
||||
|
||||
totalResults1.value =
|
||||
(resultPlanned.value * store.excusiveIndicator1Weight) / weight;
|
||||
store.excusiveIndicator1ScoreVal = totalResults1.value;
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
messageError($q, err);
|
||||
});
|
||||
}
|
||||
|
||||
function fetchListRole() {
|
||||
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) {
|
||||
resultRole.value = newRow.reduce(
|
||||
(sum: number, e: any) => sum + e.evaluationResults,
|
||||
0
|
||||
);
|
||||
|
||||
const weight = newRow.reduce(
|
||||
(sum: number, e: any) => sum + e.weight,
|
||||
0
|
||||
);
|
||||
|
||||
weightRole.value = weight;
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
messageError($q, err);
|
||||
});
|
||||
}
|
||||
|
||||
function fetchAssigned() {
|
||||
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) {
|
||||
resultAssigned.value = newRow.reduce(
|
||||
(sum: number, e: any) => sum + e.evaluationResults,
|
||||
0
|
||||
);
|
||||
|
||||
store.excusiveIndicator2PercentVal = resultAssigned.value;
|
||||
|
||||
const weight = newRow.reduce(
|
||||
(sum: number, e: any) => sum + e.weight,
|
||||
0
|
||||
);
|
||||
|
||||
weightAssigned.value = weight;
|
||||
store.indicatorWeight2Total = Number(weight);
|
||||
|
||||
totalResults3.value =
|
||||
(resultAssigned.value * store.excusiveIndicator2Weight) / weight;
|
||||
store.excusiveIndicator2ScoreVal = totalResults3.value;
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
messageError($q, err);
|
||||
});
|
||||
}
|
||||
|
||||
function onInfo() {
|
||||
modalCriteria.value = true;
|
||||
}
|
||||
|
||||
function getCriteria() {
|
||||
http
|
||||
.get(config.API.KpiEvaluationInfo)
|
||||
.then((res) => {
|
||||
const data = res.data.result.data;
|
||||
dataListCriteria.value = data;
|
||||
})
|
||||
.catch((e) => {
|
||||
messageError($q, e);
|
||||
});
|
||||
}
|
||||
|
||||
const isShowScore = computed(() => {
|
||||
return store.tabOpen === 3 && store.tabMain === "3";
|
||||
});
|
||||
|
||||
watch(
|
||||
[weightPlanned, weightRole, weightAssigned],
|
||||
([newA, newB, newC], [prevA, prevB, prevC]) => {
|
||||
if (newA !== prevA || newB !== prevB || newC !== prevC) {
|
||||
store.indicatorWeightTotal =
|
||||
Number(weightPlanned.value) +
|
||||
Number(weightAssigned.value) +
|
||||
Number(weightRole.value);
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
watch(
|
||||
[resultPlanned, resultRole, resultAssigned],
|
||||
([newA, newB, newC], [prevA, prevB, prevC]) => {
|
||||
if (newA !== prevA || newB !== prevB || newC !== prevC) {
|
||||
store.indicatorPercentVal =
|
||||
Number(resultPlanned.value) +
|
||||
Number(resultRole.value) +
|
||||
Number(resultAssigned.value);
|
||||
|
||||
store.indicatorScoreVal =
|
||||
store.indicatorPercentVal * (store.indicatorScore / 100);
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
onMounted(() => {
|
||||
getCriteria();
|
||||
fetchListPlanned();
|
||||
fetchListRole();
|
||||
fetchAssigned();
|
||||
setTimeout(() => {
|
||||
hideLoader();
|
||||
}, 1000);
|
||||
});
|
||||
</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 -->
|
||||
<div v-if="store.dataEvaluation.posExecutiveName != null">
|
||||
<Work
|
||||
v-model:data="rows_01"
|
||||
:title="`มิติที่ 1 ภารกิจตามนโยบายและยุทธศาสตร์ของกรุงเทพมหานคร`"
|
||||
:page="1"
|
||||
:fetchList="fetchListPlanned"
|
||||
:total="totalResults1"
|
||||
/>
|
||||
|
||||
<div v-if="isShowScore">
|
||||
<q-table
|
||||
flat
|
||||
dense
|
||||
bordered
|
||||
:rows="[
|
||||
{
|
||||
name: 'รวมผลการประเมิน (ร้อยละ)',
|
||||
value: store.excusiveIndicator1PercentVal.toFixed(2),
|
||||
},
|
||||
{
|
||||
name: 'ผลการประเมินมิติที่ 1 (คะแนน)',
|
||||
value: store.excusiveIndicator1ScoreVal.toFixed(2),
|
||||
},
|
||||
]"
|
||||
:columns="[
|
||||
{
|
||||
name: 'name',
|
||||
field: 'name',
|
||||
label: 'name',
|
||||
style: 'font-size: 14px',
|
||||
},
|
||||
{
|
||||
name: 'value',
|
||||
field: 'value',
|
||||
label: 'value',
|
||||
style: 'font-size: 14px; font-weight: bold',
|
||||
},
|
||||
]"
|
||||
row-key="name"
|
||||
hide-header
|
||||
hide-bottom
|
||||
class="q-mt-xs q-mb-md"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div v-else class="q-mt-md"></div>
|
||||
|
||||
<Work
|
||||
v-model:data="rows_03"
|
||||
:title="`มิติที่ 2 วาระเร่งด่วนที่ได้รับมอบหมายพิเศษ (ถ้ามี)`"
|
||||
:page="3"
|
||||
:fetchList="fetchAssigned"
|
||||
:total="totalResults3"
|
||||
/>
|
||||
|
||||
<div v-if="isShowScore">
|
||||
<q-table
|
||||
flat
|
||||
dense
|
||||
bordered
|
||||
:rows="[
|
||||
// {
|
||||
// name: 'รวมผลการประเมิน (ร้อยละ)',
|
||||
// value: store.excusiveIndicator2PercentVal.toFixed(2),
|
||||
// },
|
||||
{
|
||||
name: 'ผลการประเมินมิติที่ 2 (คะแนน)',
|
||||
value: store.excusiveIndicator2ScoreVal.toFixed(2),
|
||||
},
|
||||
]"
|
||||
:columns="[
|
||||
{
|
||||
name: 'name',
|
||||
field: 'name',
|
||||
label: 'name',
|
||||
style: 'font-size: 14px',
|
||||
},
|
||||
{
|
||||
name: 'value',
|
||||
field: 'value',
|
||||
label: 'value',
|
||||
style: 'font-size: 14px; font-weight: bold',
|
||||
},
|
||||
]"
|
||||
row-key="name"
|
||||
hide-header
|
||||
hide-bottom
|
||||
class="q-mt-xs q-mb-md"
|
||||
/>
|
||||
|
||||
<div class="row text-body2 text-weight-bold">
|
||||
<div class="col-12 text-center row justify-center">
|
||||
<span
|
||||
>สรุปผลการประเมินผลสัมฤทธิ์ของงาน (มิติที่ 1 + มิติที่ 2)
|
||||
(คะแนนเต็ม
|
||||
{{ store.excusiveIndicatorScore }}
|
||||
คะแนน)</span
|
||||
>
|
||||
<div class="text-primary q-pl-md">
|
||||
{{
|
||||
(
|
||||
store.excusiveIndicator1ScoreVal +
|
||||
store.excusiveIndicator2ScoreVal
|
||||
).toFixed(2)
|
||||
}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-else>
|
||||
<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 v-if="isShowScore">
|
||||
<q-table
|
||||
flat
|
||||
dense
|
||||
bordered
|
||||
:rows="[
|
||||
{
|
||||
name: 'รวมผลการประเมิน (ร้อยละ)',
|
||||
value: store.indicatorPercentVal.toFixed(2),
|
||||
},
|
||||
]"
|
||||
:columns="[
|
||||
{
|
||||
name: 'name',
|
||||
field: 'name',
|
||||
label: 'name',
|
||||
style: 'font-size: 14px',
|
||||
},
|
||||
{
|
||||
name: 'value',
|
||||
field: 'value',
|
||||
label: 'value',
|
||||
style: 'font-size: 14px; font-weight: bold',
|
||||
},
|
||||
]"
|
||||
row-key="name"
|
||||
hide-header
|
||||
hide-bottom
|
||||
class="q-mt-xs q-mb-md"
|
||||
/>
|
||||
|
||||
<div class="row text-body2 text-weight-bold">
|
||||
<div class="col-12 text-center row justify-center">
|
||||
<span
|
||||
>สรุปผลการประเมินผลสัมฤทธิ์ของงาน (คะแนนเต็ม
|
||||
{{ store.indicatorScore }}
|
||||
คะแนน)</span
|
||||
>
|
||||
<div class="text-primary q-pl-md">
|
||||
{{ store.indicatorScoreVal.toFixed(2) }}
|
||||
</div>
|
||||
</div>
|
||||
</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" />
|
||||
|
||||
<q-table
|
||||
v-if="isShowScore"
|
||||
flat
|
||||
dense
|
||||
bordered
|
||||
:rows="[
|
||||
{
|
||||
name: `สรุปผลการประเมินสมรรถนะ (คะแนนเต็ม ${
|
||||
!store.dataEvaluation.posExecutiveName
|
||||
? store.competencyScore
|
||||
: store.excusiveCompetencyScore
|
||||
} คะแนน)`,
|
||||
value: store.competencyScoreVal.toFixed(2),
|
||||
},
|
||||
]"
|
||||
:columns="[
|
||||
{
|
||||
name: 'name',
|
||||
field: 'name',
|
||||
label: 'name',
|
||||
style: 'font-size: 14px',
|
||||
},
|
||||
{
|
||||
name: 'value',
|
||||
field: 'value',
|
||||
label: 'value',
|
||||
style: 'font-size: 14px; font-weight: bold',
|
||||
},
|
||||
]"
|
||||
row-key="name"
|
||||
hide-header
|
||||
hide-bottom
|
||||
class="q-mt-xs q-mb-md"
|
||||
/>
|
||||
|
||||
<div v-if="!store.dataEvaluation.posExecutiveName">
|
||||
<Develop />
|
||||
|
||||
<div v-if="isShowScore">
|
||||
<q-table
|
||||
flat
|
||||
dense
|
||||
bordered
|
||||
:rows="[
|
||||
{
|
||||
name: `ผลการประเมินการพัฒนาตนเอง (คะแนนเต็ม ${store.devScore} คะแนน)`,
|
||||
value: store.devScoreVal.toFixed(2),
|
||||
},
|
||||
]"
|
||||
:columns="[
|
||||
{
|
||||
name: 'name',
|
||||
field: 'name',
|
||||
label: 'name',
|
||||
style: 'font-size: 14px',
|
||||
},
|
||||
{
|
||||
name: 'value',
|
||||
field: 'value',
|
||||
label: 'value',
|
||||
style: 'font-size: 14px; font-weight: bold',
|
||||
},
|
||||
]"
|
||||
row-key="name"
|
||||
hide-header
|
||||
hide-bottom
|
||||
class="q-mt-xs q-mb-md"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="isShowScore">
|
||||
<div
|
||||
v-if="store.dataEvaluation.posExecutiveName == null"
|
||||
class="row text-body2 text-weight-bold"
|
||||
>
|
||||
<div class="col-12 text-center row justify-center">
|
||||
<span
|
||||
>สรุปผลการประเมินพฤติกรรมการปฏิบัติราชการ (สมรรถนะ+การพัฒนาตนเอง)
|
||||
(คะแนนเต็ม {{ store.competencyDevScore }} คะแนน)</span
|
||||
>
|
||||
<div class="text-primary q-pl-md">
|
||||
{{ (store.competencyScoreVal + store.devScoreVal).toFixed(2) }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else class="row text-body2 text-weight-bold">
|
||||
<div class="col-12 text-center row justify-center">
|
||||
<span
|
||||
>สรุปผลการประเมินพฤติกรรมการปฏิบัติราชการ (สมรรถนะ) (คะแนนเต็ม
|
||||
{{ store.competencyScore }} คะแนน)</span
|
||||
>
|
||||
<div class="text-primary q-pl-md">
|
||||
{{ store.competencyScoreVal.toFixed(2) }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</q-scroll-area>
|
||||
|
||||
<DialogListCriteria
|
||||
v-model:modal="modalCriteria"
|
||||
v-model:dataListCriteria="dataListCriteria"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.txt-under {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.q-btn-group--outline > .q-btn-item:not(:last-child):before {
|
||||
border-right: 1px solid #c4c4c4;
|
||||
}
|
||||
.q-btn-group--outline > .q-btn-item.active {
|
||||
color: #2196f3 !important;
|
||||
background-color: #fff;
|
||||
}
|
||||
.q-btn-group--outline > .q-btn-item.active:not(:last-child):before {
|
||||
border: 1px solid #2196f3;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
333
src/modules/14_KPI/components/Tab/02_Evaluator.vue
Normal file
333
src/modules/14_KPI/components/Tab/02_Evaluator.vue
Normal file
|
|
@ -0,0 +1,333 @@
|
|||
<script setup lang="ts">
|
||||
import { ref, reactive, onMounted } 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 type { FormComment } from "@/modules/14_KPI/interface/request/index";
|
||||
import type { ResEvaluator } from "@/modules/14_KPI/interface/response/index";
|
||||
|
||||
import DialogHeader from "@/components/DialogHeader.vue";
|
||||
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
|
||||
const $q = useQuasar();
|
||||
const route = useRoute();
|
||||
const { showLoader, hideLoader, messageError, dialogConfirm, success } =
|
||||
useCounterMixin();
|
||||
|
||||
const evaluatorId = ref<string>(route.params.id.toString());
|
||||
const isReadonly = <boolean>(route.name === "KPIEditEvaluator" ? true : false);
|
||||
|
||||
const props = defineProps({
|
||||
type: {
|
||||
type: String,
|
||||
require: true,
|
||||
},
|
||||
});
|
||||
|
||||
/** Table*/
|
||||
const visibleColumns = ref<string[]>(["topic", "reason"]);
|
||||
const columns = ref<QTableProps["columns"]>([
|
||||
{
|
||||
name: "topic",
|
||||
align: "left",
|
||||
label: "หัวข้อ",
|
||||
sortable: true,
|
||||
field: "topic",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px;",
|
||||
},
|
||||
{
|
||||
name: "reason",
|
||||
align: "left",
|
||||
label: "ความคิดเห็น",
|
||||
sortable: true,
|
||||
field: "reason",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px;",
|
||||
},
|
||||
]);
|
||||
const rows = ref<ResEvaluator[]>([]);
|
||||
const filterKeyword = ref<string>("");
|
||||
|
||||
const modal = ref<boolean>(false);
|
||||
const formComment = reactive<FormComment>({
|
||||
topic: "",
|
||||
reason: "",
|
||||
});
|
||||
const optionTopicMain = ref<string[]>([
|
||||
"เห็นชอบตัวชี้วัดผลสัมฤทธิ์ของงาน รายการสมรรถนะ และน้ำหนักคะแนนของผู้ใต้บังคับบัญชา",
|
||||
"ส่งกลับให้แก้ไข",
|
||||
"บันทึกคำปรึกษาแนะนำ",
|
||||
"บันทึกความเห็น",
|
||||
"เห็นด้วยกับผลการประเมิน",
|
||||
"บันทึกข้อเสนอแนะการพัฒนา",
|
||||
]);
|
||||
const optionTopic = ref<string[]>(optionTopicMain.value);
|
||||
|
||||
function fetchList() {
|
||||
showLoader();
|
||||
http
|
||||
.get(config.API.kpiEvaluation + `/${props.type}/${evaluatorId.value}`)
|
||||
.then((res) => {
|
||||
rows.value = res.data.result;
|
||||
})
|
||||
.catch((err) => {
|
||||
messageError($q, err);
|
||||
})
|
||||
.finally(() => {
|
||||
hideLoader();
|
||||
});
|
||||
}
|
||||
|
||||
function openDialog() {
|
||||
modal.value = true;
|
||||
}
|
||||
|
||||
function closeDialog() {
|
||||
modal.value = false;
|
||||
formComment.topic = "";
|
||||
formComment.reason = "";
|
||||
}
|
||||
|
||||
function createValue(val: string, done: Function) {
|
||||
if (val.length > 0) {
|
||||
if (!optionTopic.value.includes(val)) {
|
||||
optionTopic.value.push(val);
|
||||
}
|
||||
done(val);
|
||||
}
|
||||
}
|
||||
|
||||
function filterFn(val: string, update: Function) {
|
||||
update(() => {
|
||||
optionTopic.value = optionTopicMain.value.filter(
|
||||
(v: string) => v.indexOf(val) > -1
|
||||
);
|
||||
});
|
||||
}
|
||||
|
||||
function onSubmit() {
|
||||
dialogConfirm($q, () => {
|
||||
showLoader();
|
||||
http
|
||||
.put(
|
||||
config.API.kpiEvaluation + `/${props.type}/${evaluatorId.value}`,
|
||||
formComment
|
||||
)
|
||||
.then(() => {
|
||||
fetchList();
|
||||
closeDialog();
|
||||
success($q, "บันทึกข้อมูลสำเร็จ");
|
||||
})
|
||||
.catch((err) => {
|
||||
messageError($q, err);
|
||||
})
|
||||
.finally(() => {
|
||||
hideLoader();
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
const pagination = ref({
|
||||
sortBy: "desc",
|
||||
descending: false,
|
||||
page: 1,
|
||||
rowsPerPage: 10,
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
fetchList();
|
||||
});
|
||||
</script>
|
||||
<template>
|
||||
<div class="q-pa-md">
|
||||
<q-toolbar style="padding: 0px">
|
||||
<q-btn
|
||||
v-if="isReadonly"
|
||||
flat
|
||||
round
|
||||
dense
|
||||
icon="add"
|
||||
color="blue-4"
|
||||
@click="openDialog"
|
||||
>
|
||||
<q-tooltip>เสนอความคิดเห็น</q-tooltip>
|
||||
</q-btn>
|
||||
<q-space />
|
||||
<div class="row q-col-gutter-sm">
|
||||
<q-input
|
||||
outlined
|
||||
dense
|
||||
debounce="300"
|
||||
v-model="filterKeyword"
|
||||
placeholder="ค้นหา"
|
||||
>
|
||||
<template v-slot:append>
|
||||
<q-icon name="search" />
|
||||
</template>
|
||||
</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">
|
||||
<q-table
|
||||
ref="table"
|
||||
:columns="columns"
|
||||
:rows="rows"
|
||||
:filter="filterKeyword"
|
||||
row-key="id"
|
||||
flat
|
||||
bordered
|
||||
dense
|
||||
class="custom-table"
|
||||
:visible-columns="visibleColumns"
|
||||
:rows-per-page-options="[10, 20, 50, 100]"
|
||||
no-data-label="ไม่มีข้อมูล"
|
||||
v-model:pagination="pagination"
|
||||
>
|
||||
<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" style="width: 50%">
|
||||
{{ col.value ? col.value : "-" }}
|
||||
</q-td>
|
||||
</q-tr>
|
||||
</template>
|
||||
<template v-slot:pagination="scope">
|
||||
ทั้งหมด {{ rows.length }} รายการ
|
||||
<q-pagination
|
||||
v-model="pagination.page"
|
||||
active-color="primary"
|
||||
color="dark"
|
||||
:max="scope.pagesNumber"
|
||||
:max-pages="5"
|
||||
size="sm"
|
||||
boundary-links
|
||||
direction-links
|
||||
></q-pagination>
|
||||
</template>
|
||||
</q-table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<q-dialog v-model="modal" persistent>
|
||||
<q-card style="width: 700px; max-width: 80vw">
|
||||
<DialogHeader :tittle="'เสนอความคิดเห็น'" :close="closeDialog" />
|
||||
<q-separator />
|
||||
<q-form greedy @submit.prevent @validation-success="onSubmit">
|
||||
<q-card-section>
|
||||
<div class="row q-col-gutter-md">
|
||||
<div class="col-12">
|
||||
<q-select
|
||||
class="inputgreen"
|
||||
dense
|
||||
outlined
|
||||
v-model="formComment.topic"
|
||||
use-input
|
||||
input-debounce="0"
|
||||
@new-value="createValue"
|
||||
:options="optionTopic"
|
||||
@filter="filterFn"
|
||||
hide-bottom-space
|
||||
lazy-rules
|
||||
label="หัวข้อ"
|
||||
:rules="[
|
||||
(val:string) =>
|
||||
!!val || `${'กรุณาเลือกหัวข้อ'}`,
|
||||
]"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<q-input
|
||||
v-model="formComment.reason"
|
||||
class="inputgreen"
|
||||
dense
|
||||
outlined
|
||||
type="textarea"
|
||||
label="ควาดคิดเห็น"
|
||||
hide-bottom-space
|
||||
lazy-rules
|
||||
:rules="[
|
||||
(val:string) =>
|
||||
!!val || `${'กรุณากรอกความคิดเห็น'}`,
|
||||
]"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</q-card-section>
|
||||
<q-separator />
|
||||
<q-card-actions align="right">
|
||||
<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>
|
||||
.custom-table {
|
||||
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>
|
||||
3
src/modules/14_KPI/components/Tab/03_CommanderAbove.vue
Normal file
3
src/modules/14_KPI/components/Tab/03_CommanderAbove.vue
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
<template>
|
||||
<div class="q-pa-md">ผู้บังคับบัญชา เหนือขึ้นไป</div>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
<template>
|
||||
<div class="q-pa-md">ผู้บังคับบัญชาเหนือขึ้นไปอีกชั้นหนึ่ง</div>
|
||||
</template>
|
||||
240
src/modules/14_KPI/components/Tab/05_File.vue
Normal file
240
src/modules/14_KPI/components/Tab/05_File.vue
Normal file
|
|
@ -0,0 +1,240 @@
|
|||
<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 === "KPIEditEvaluator" ? true : false);
|
||||
|
||||
const documentFile = ref<any>(null);
|
||||
const fileList = ref<ArrayFileList[]>([]);
|
||||
|
||||
async function getData() {
|
||||
showLoader();
|
||||
await http
|
||||
.get(config.API.KpiFile + `/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
|
||||
v-if="!isReadonly"
|
||||
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>
|
||||
949
src/modules/14_KPI/components/Tab/Dialog/01_FormIndicator.vue
Normal file
949
src/modules/14_KPI/components/Tab/Dialog/01_FormIndicator.vue
Normal file
|
|
@ -0,0 +1,949 @@
|
|||
<script setup lang="ts">
|
||||
import { ref, reactive, watch, computed } from "vue";
|
||||
import { useQuasar } from "quasar";
|
||||
import { useRoute } from "vue-router";
|
||||
import config from "@/app.config";
|
||||
import http from "@/plugins/http";
|
||||
|
||||
import type { DataOptions } from "@/modules/14_KPI/interface/index/Main";
|
||||
|
||||
import DialogHeader from "@/components/DialogHeader.vue";
|
||||
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
import { useKpiDataStore } from "@/modules/14_KPI/store";
|
||||
|
||||
const $q = useQuasar();
|
||||
const mixin = useCounterMixin();
|
||||
const store = useKpiDataStore();
|
||||
const {
|
||||
showLoader,
|
||||
hideLoader,
|
||||
messageError,
|
||||
dialogConfirm,
|
||||
dialogMessageNotify,
|
||||
success,
|
||||
date2Thai,
|
||||
} = 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 formFilter = reactive<any>({
|
||||
isAll: false,
|
||||
keyword: "",
|
||||
node: 0,
|
||||
nodeId: "",
|
||||
period: "",
|
||||
year: null,
|
||||
page: 1,
|
||||
pageSize: 20,
|
||||
});
|
||||
|
||||
const totalList = ref<number>(0); //จำนวนข้อมูลรายการ
|
||||
const maxPage = ref<number>(1);
|
||||
|
||||
const formDetail = reactive<any>({
|
||||
orgRevisionId: "",
|
||||
id: "",
|
||||
year: null,
|
||||
round: "",
|
||||
kpiPeriodId: "",
|
||||
includingName: "",
|
||||
including: "",
|
||||
target: "",
|
||||
unit: "",
|
||||
weight: null,
|
||||
achievement1: "",
|
||||
achievement2: "",
|
||||
achievement3: "",
|
||||
achievement4: "",
|
||||
achievement5: "",
|
||||
meaning: "",
|
||||
formula: "",
|
||||
node: null,
|
||||
nodeId: "",
|
||||
nodeName: "",
|
||||
strategy: null,
|
||||
strategyId: "",
|
||||
strategyName: "",
|
||||
documentInfoEvidence: "",
|
||||
date: null,
|
||||
});
|
||||
|
||||
/** Option รอบการประเมิน*/
|
||||
const roundOp = ref<DataOptions[]>([
|
||||
{ id: "APR", name: "รอบเมษายน" },
|
||||
{ id: "OCT", name: "รอบตุลาคม" },
|
||||
]);
|
||||
|
||||
function fetchListPlan() {
|
||||
formFilter.nodeId = store.dataProfile.nodeId;
|
||||
formFilter.node = store.dataProfile.node;
|
||||
formFilter.year = formFilter?.year ? formFilter.year.toString() : "";
|
||||
// const kpiPeriodId = store.dataEvaluation.kpiPeriodId;
|
||||
|
||||
showLoader();
|
||||
http
|
||||
.post(config.API.kpiPlan + `/search`, formFilter)
|
||||
.then((res) => {
|
||||
listTarget.value = res.data.result.data;
|
||||
maxPage.value = Math.ceil(res.data.result.total / formFilter.pageSize);
|
||||
totalList.value = res.data.result.total;
|
||||
})
|
||||
.catch((err) => {
|
||||
messageError($q, err);
|
||||
})
|
||||
.finally(() => {
|
||||
hideLoader();
|
||||
});
|
||||
}
|
||||
|
||||
function fetchListPlanByid(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;
|
||||
formDetail.achievement1 = data.achievement1;
|
||||
formDetail.achievement2 = data.achievement2;
|
||||
formDetail.achievement3 = data.achievement3;
|
||||
formDetail.achievement4 = data.achievement4;
|
||||
formDetail.achievement5 = data.achievement5;
|
||||
formDetail.documentInfoEvidence = data.documentInfoEvidence;
|
||||
if (data.startDate && data.endDate) {
|
||||
formDetail.date = [];
|
||||
formDetail.date[0] = data.startDate;
|
||||
formDetail.date[1] = data.endDate;
|
||||
}
|
||||
clickList(data.kpiPlanId, true);
|
||||
})
|
||||
.catch((err) => {
|
||||
messageError($q, err);
|
||||
})
|
||||
.finally(() => {
|
||||
hideLoader();
|
||||
});
|
||||
}
|
||||
|
||||
function fetchListRole() {
|
||||
// const kpiPeriodId = store.dataEvaluation.kpiPeriodId;
|
||||
// const position = store.dataProfile.position;
|
||||
formFilter.nodeId = store.dataProfile.nodeId;
|
||||
formFilter.node = store.dataProfile.node;
|
||||
formFilter.year = formFilter?.year ? formFilter.year.toString() : "";
|
||||
formFilter.position = store.dataProfile.position;
|
||||
|
||||
http
|
||||
.post(config.API.kpiRole + `/search`, formFilter)
|
||||
.then((res) => {
|
||||
listTarget.value = res.data.result.data;
|
||||
maxPage.value = Math.ceil(res.data.result.total / formFilter.pageSize);
|
||||
totalList.value = res.data.result.total;
|
||||
})
|
||||
.catch((err) => {
|
||||
messageError($q, err);
|
||||
})
|
||||
.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;
|
||||
formDetail.achievement1 = data.achievement1;
|
||||
formDetail.achievement2 = data.achievement2;
|
||||
formDetail.achievement3 = data.achievement3;
|
||||
formDetail.achievement4 = data.achievement4;
|
||||
formDetail.achievement5 = data.achievement5;
|
||||
formDetail.documentInfoEvidence = data.documentInfoEvidence;
|
||||
if (data.startDate && data.endDate) {
|
||||
formDetail.date = [];
|
||||
formDetail.date[0] = data.startDate;
|
||||
formDetail.date[1] = data.endDate;
|
||||
}
|
||||
clickList(data.kpiRoleId, true);
|
||||
})
|
||||
.catch((err) => {
|
||||
messageError($q, err);
|
||||
})
|
||||
.finally(() => {
|
||||
hideLoader();
|
||||
});
|
||||
}
|
||||
|
||||
function fetchListSpecial() {
|
||||
formFilter.nodeId = store.dataProfile.nodeId;
|
||||
formFilter.node = store.dataProfile.node;
|
||||
formFilter.year = formFilter?.year ? formFilter.year.toString() : "";
|
||||
|
||||
const body = {
|
||||
keyword: formFilter.keyword,
|
||||
period: formFilter.period,
|
||||
year: formFilter.year,
|
||||
pageSize: formFilter.pageSize,
|
||||
page: formFilter.page,
|
||||
};
|
||||
|
||||
showLoader();
|
||||
http
|
||||
.post(config.API.kpiSpecial + `/search`, body)
|
||||
.then((res) => {
|
||||
listTarget.value = res.data.result.data;
|
||||
maxPage.value = Math.ceil(res.data.result.total / formFilter.pageSize);
|
||||
totalList.value = res.data.result.total;
|
||||
})
|
||||
.catch((err) => {
|
||||
messageError($q, err);
|
||||
})
|
||||
.finally(() => {
|
||||
hideLoader();
|
||||
});
|
||||
}
|
||||
|
||||
function fetchspecialByid(id: string) {
|
||||
showLoader();
|
||||
http
|
||||
.get(config.API.kpiAchievement("special") + `/${id}`)
|
||||
.then((res) => {
|
||||
const data = res.data.result;
|
||||
formDetail.including = data.including;
|
||||
formDetail.includingName = data.includingName;
|
||||
formDetail.target = data.target;
|
||||
formDetail.unit = data.unit;
|
||||
formDetail.achievement1 = data.achievement1;
|
||||
formDetail.achievement2 = data.achievement2;
|
||||
formDetail.achievement3 = data.achievement3;
|
||||
formDetail.achievement4 = data.achievement4;
|
||||
formDetail.achievement5 = data.achievement5;
|
||||
formDetail.weight = data.weight;
|
||||
formDetail.formula = data.formula;
|
||||
formDetail.meaning = data.meaning;
|
||||
formDetail.documentInfoEvidence = data.documentInfoEvidence;
|
||||
if (data.startDate && data.endDate) {
|
||||
formDetail.date = [];
|
||||
formDetail.date[0] = data.startDate;
|
||||
formDetail.date[1] = data.endDate;
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
messageError($q, err);
|
||||
})
|
||||
.finally(() => {
|
||||
hideLoader();
|
||||
});
|
||||
}
|
||||
|
||||
function clickList(id: string, isData: boolean = false) {
|
||||
showLoader();
|
||||
const url =
|
||||
numpage.value === 1
|
||||
? config.API.kpiPlan
|
||||
: numpage.value === 2
|
||||
? config.API.kpiRole
|
||||
: config.API.kpiSpecial;
|
||||
http
|
||||
.get(`${url}/${id}`)
|
||||
.then((res) => {
|
||||
listCheckID.value = id;
|
||||
const data = res.data.result;
|
||||
if (!isData) {
|
||||
formDetail.target = data.target;
|
||||
formDetail.unit = data.unit;
|
||||
formDetail.weight = data.weight;
|
||||
formDetail.meaning = data.meaning;
|
||||
formDetail.formula = data.formula;
|
||||
formDetail.achievement1 = data.achievement1;
|
||||
formDetail.achievement2 = data.achievement2;
|
||||
formDetail.achievement3 = data.achievement3;
|
||||
formDetail.achievement4 = data.achievement4;
|
||||
formDetail.achievement5 = data.achievement5;
|
||||
}
|
||||
formDetail.orgRevisionId = data.corgRevisionId;
|
||||
formDetail.id = data.id;
|
||||
formDetail.year = data.year;
|
||||
formDetail.round = data.round;
|
||||
formDetail.kpiPeriodId = data.kpiPeriodId;
|
||||
formDetail.includingName = data.includingName;
|
||||
formDetail.including = data.including;
|
||||
formDetail.node = data.node;
|
||||
formDetail.nodeId = data.nodeId;
|
||||
formDetail.nodeName = data.nodeName;
|
||||
formDetail.strategy = data.strategy;
|
||||
formDetail.strategyId = data.strategyId;
|
||||
formDetail.strategyName = data.strategyName;
|
||||
formDetail.documentInfoEvidence = data.documentInfoEvidence;
|
||||
})
|
||||
.catch((err) => {
|
||||
messageError($q, err);
|
||||
})
|
||||
.finally(() => {
|
||||
hideLoader();
|
||||
});
|
||||
}
|
||||
|
||||
/** ปิด 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 = "";
|
||||
formDetail.documentInfoEvidence = "";
|
||||
formDetail.date = null;
|
||||
|
||||
formFilter.isAll = false;
|
||||
formFilter.keyword = "";
|
||||
formFilter.node = 0;
|
||||
formFilter.nodeId = "";
|
||||
formFilter.period = "";
|
||||
formFilter.year = null;
|
||||
formFilter.page = 1;
|
||||
formFilter.pageSize = 20;
|
||||
}
|
||||
|
||||
function onSubmit() {
|
||||
if (!listCheckID.value && numpage.value !== 3) {
|
||||
dialogMessageNotify($q, "กรุณาเลือกตัวชี้วัด");
|
||||
} else {
|
||||
dialogConfirm($q, async () => {
|
||||
showLoader();
|
||||
|
||||
const formBody = {
|
||||
target: formDetail.target,
|
||||
unit: 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,
|
||||
achievement1: formDetail.achievement1,
|
||||
achievement2: formDetail.achievement2,
|
||||
achievement3: formDetail.achievement3,
|
||||
achievement4: formDetail.achievement4,
|
||||
achievement5: formDetail.achievement5,
|
||||
documentInfoEvidence: formDetail.documentInfoEvidence,
|
||||
startDate: formDetail.date ? formDetail.date[0] : undefined,
|
||||
endDate: formDetail.date ? formDetail.date[1] : undefined,
|
||||
including: numpage.value === 3 ? formDetail.including : undefined,
|
||||
includingName:
|
||||
numpage.value === 3 ? formDetail.includingName : undefined,
|
||||
period:
|
||||
numpage.value === 3 ? store.dataEvaluation.durationKPI : undefined,
|
||||
year:
|
||||
numpage.value === 3
|
||||
? store.dataEvaluation.year.toString()
|
||||
: 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 urlSpecial = isStatusEdit.value
|
||||
? config.API.kpiAchievement("special") + `/${kpiUserPlannedId.value}`
|
||||
: config.API.kpiAchievement("special");
|
||||
|
||||
const url =
|
||||
numpage.value === 1
|
||||
? urlPlanned
|
||||
: numpage.value === 2
|
||||
? urlRole
|
||||
: urlSpecial;
|
||||
const method = isStatusEdit.value ? "put" : "post";
|
||||
await http[method](url, formBody);
|
||||
closeDialog();
|
||||
success($q, "บันทึกข้อมูลสำเร็จ");
|
||||
} catch (err) {
|
||||
messageError($q, err);
|
||||
} finally {
|
||||
hideLoader();
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function fetchNewList() {
|
||||
formFilter.page = 1;
|
||||
numpage.value === 1
|
||||
? fetchListPlan()
|
||||
: numpage.value === 2
|
||||
? fetchListRole()
|
||||
: fetchListSpecial();
|
||||
}
|
||||
watch(
|
||||
() => modal.value,
|
||||
() => {
|
||||
if (modal.value) {
|
||||
if (numpage.value === 1) {
|
||||
fetchListPlan();
|
||||
isStatusEdit.value && fetchListPlanByid(kpiUserPlannedId.value);
|
||||
} else if (numpage.value === 2) {
|
||||
fetchListRole();
|
||||
isStatusEdit.value && fetchRoleByid(kpiUserPlannedId.value);
|
||||
} else if (numpage.value === 3) {
|
||||
fetchListSpecial();
|
||||
isStatusEdit.value && fetchspecialByid(kpiUserPlannedId.value);
|
||||
}
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
const title = computed(() => {
|
||||
let name = "";
|
||||
if (numpage.value === 1) {
|
||||
name = isStatusEdit.value
|
||||
? "แก้ไขตัวชี้วัดตามแผนปฏิบัติราชการประจําปี"
|
||||
: "เพิ่มตัวชี้วัดตามแผนปฏิบัติราชการประจําปี";
|
||||
} else if (numpage.value === 2) {
|
||||
name = isStatusEdit.value
|
||||
? "แก้ไขตัวชี้วัดตามหน้าที่ความรับผิดชอบ"
|
||||
: "เพิ่มตัวชี้วัดตามหน้าที่ความรับผิดชอบ";
|
||||
} else if (numpage.value === 3) {
|
||||
name = isStatusEdit.value
|
||||
? "แก้ไขตัวชี้วัดที่ได้รับมอบหมาย"
|
||||
: "เพิ่มตัวชี้วัดที่ได้รับมอบหมาย";
|
||||
}
|
||||
return name;
|
||||
});
|
||||
</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="title" :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="row col-12" v-if="numpage !== 3">
|
||||
<q-checkbox
|
||||
v-model="formFilter.isAll"
|
||||
label="แสดงตัวชี้วัดภายใต้หน่วยงาน/ส่วนราชการทุกระดับ"
|
||||
@update:model-value="fetchNewList()"
|
||||
/>
|
||||
</div>
|
||||
<div class="row q-col-gutter-sm col-12">
|
||||
<div class="col-5">
|
||||
<datepicker
|
||||
menu-class-name="modalfix"
|
||||
v-model="formFilter.year"
|
||||
:locale="'th'"
|
||||
autoApply
|
||||
year-picker
|
||||
:enableTimePicker="false"
|
||||
@update:model-value="fetchNewList()"
|
||||
>
|
||||
<template #year="{ year }">{{ year + 543 }}</template>
|
||||
<template #year-overlay-value="{ value }">{{
|
||||
parseInt(value + 543)
|
||||
}}</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
dense
|
||||
outlined
|
||||
:model-value="
|
||||
formFilter.year === null || formFilter.year === ''
|
||||
? null
|
||||
: Number(formFilter.year) + 543
|
||||
"
|
||||
:label="`${'ปีงบประมาณ'}`"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon
|
||||
name="event"
|
||||
class="cursor-pointer"
|
||||
style="color: var(--q-primary)"
|
||||
>
|
||||
</q-icon>
|
||||
</template>
|
||||
<template v-slot:append>
|
||||
<q-icon
|
||||
v-if="formFilter.year"
|
||||
name="cancel"
|
||||
class="cursor-pointer"
|
||||
@click.stop.prevent="
|
||||
(formFilter.year = null), fetchNewList()
|
||||
"
|
||||
/>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
</div>
|
||||
<div class="col-7">
|
||||
<q-select
|
||||
dense
|
||||
outlined
|
||||
v-model="formFilter.period"
|
||||
:options="roundOp"
|
||||
option-label="name"
|
||||
option-value="id"
|
||||
emit-value
|
||||
map-options
|
||||
input-class="text-red"
|
||||
label="รอบการประเมิน"
|
||||
clearable
|
||||
@update:model-value="fetchNewList()"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 q-mt-sm">
|
||||
<q-input
|
||||
v-model="formFilter.keyword"
|
||||
outlined
|
||||
dense
|
||||
label="ค้นหา"
|
||||
@keydown.enter.prevent="fetchNewList()"
|
||||
>
|
||||
<template v-slot:append>
|
||||
<q-icon v-if="formFilter.keyword == ''" name="search" />
|
||||
<q-icon
|
||||
v-if="formFilter.keyword !== ''"
|
||||
name="clear"
|
||||
class="cursor-pointer"
|
||||
@click="(formFilter.keyword = ''), fetchNewList()"
|
||||
/>
|
||||
</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">ลำดับ/รหัสตัวชี้วัด</div>
|
||||
<div class="col-4">ชื่อตัวชี้วัด</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-separator />
|
||||
<div
|
||||
class="q-pa-lg flex justify-end"
|
||||
v-if="totalList !== 0"
|
||||
>
|
||||
ทั้งหมด {{ totalList }} รายการ
|
||||
<q-pagination
|
||||
v-model="formFilter.page"
|
||||
active-color="primary"
|
||||
color="dark"
|
||||
:max="Number(maxPage)"
|
||||
size="sm"
|
||||
boundary-links
|
||||
direction-links
|
||||
:max-pages="5"
|
||||
@update:model-value="
|
||||
numpage === 1
|
||||
? fetchListPlan()
|
||||
: numpage === 2
|
||||
? fetchListRole()
|
||||
: fetchListSpecial()
|
||||
"
|
||||
></q-pagination>
|
||||
</div>
|
||||
</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" v-if="numpage !== 3">
|
||||
<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">
|
||||
<q-input
|
||||
v-if="numpage === 3"
|
||||
outlined
|
||||
v-model="formDetail.including"
|
||||
bg-color="white"
|
||||
dense
|
||||
class="inputgreen"
|
||||
:rules="[
|
||||
(val) =>
|
||||
!!val || `${'กรุณากรอกลำดับ/รหัสตัวชี้วัด'}`,
|
||||
]"
|
||||
lazy-rules
|
||||
hide-bottom-space
|
||||
/>
|
||||
|
||||
<div v-else>{{ formDetail.including }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 row">
|
||||
<div class="col-4 text-grey-6">ชื่อตัวชี้วัด</div>
|
||||
<div class="col-8">
|
||||
<q-input
|
||||
v-if="numpage === 3"
|
||||
outlined
|
||||
v-model="formDetail.includingName"
|
||||
bg-color="white"
|
||||
dense
|
||||
class="inputgreen"
|
||||
:rules="[
|
||||
(val) => !!val || `${'กรุณากรอกชื่อตัวชี้วัด'}`,
|
||||
]"
|
||||
lazy-rules
|
||||
hide-bottom-space
|
||||
/>
|
||||
<div v-else>{{ formDetail.includingName }}</div>
|
||||
</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
|
||||
lazy-rules
|
||||
/>
|
||||
</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 || `${'กรุณากรอกหน่วยนับ'}`,
|
||||
]"
|
||||
lazy-rules
|
||||
hide-bottom-space
|
||||
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
|
||||
lazy-rules
|
||||
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 q-col-gutter-sm"
|
||||
>
|
||||
<div class="col-6 text-center text-body2">5</div>
|
||||
<div class="col-6">
|
||||
<q-input
|
||||
v-model="formDetail.achievement5"
|
||||
outlined
|
||||
dense
|
||||
:rules="[(val:string) => !!val || `${'กรุณากรอกผลสำเร็จของงาน'}`,]"
|
||||
hide-bottom-space
|
||||
class="inputgreen"
|
||||
lazy-rules
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="row col-12 items-center lineTop q-col-gutter-sm"
|
||||
>
|
||||
<div class="col-6 text-center text-body2">4</div>
|
||||
<div class="col-6 text-center text-primary">
|
||||
<q-input
|
||||
v-model="formDetail.achievement4"
|
||||
outlined
|
||||
dense
|
||||
:rules="[(val:string) => !!val || `${'กรุณากรอกผลสำเร็จของงาน'}`,]"
|
||||
hide-bottom-space
|
||||
class="inputgreen"
|
||||
lazy-rules
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="row col-12 items-center lineTop q-col-gutter-sm"
|
||||
>
|
||||
<div class="col-6 text-center text-body2">3</div>
|
||||
<div class="col-6 text-center text-primary">
|
||||
<q-input
|
||||
v-model="formDetail.achievement3"
|
||||
outlined
|
||||
dense
|
||||
:rules="[(val:string) => !!val || `${'กรุณากรอกผลสำเร็จของงาน'}`,]"
|
||||
hide-bottom-space
|
||||
class="inputgreen"
|
||||
lazy-rules
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="row col-12 items-center lineTop q-col-gutter-sm"
|
||||
>
|
||||
<div class="col-6 text-center text-body2">2</div>
|
||||
<div class="col-6 text-center text-primary">
|
||||
<q-input
|
||||
v-model="formDetail.achievement2"
|
||||
outlined
|
||||
dense
|
||||
:rules="[(val:string) => !!val || `${'กรุณากรอกผลสำเร็จของงาน'}`,]"
|
||||
hide-bottom-space
|
||||
class="inputgreen"
|
||||
lazy-rules
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="row col-12 items-center lineTop q-col-gutter-sm"
|
||||
>
|
||||
<div class="col-6 text-center text-body2">1</div>
|
||||
<div class="col-6 text-center text-primary">
|
||||
<q-input
|
||||
v-model="formDetail.achievement1"
|
||||
outlined
|
||||
dense
|
||||
:rules="[(val:string) => !!val || `${'กรุณากรอกผลสำเร็จของงาน'}`,]"
|
||||
hide-bottom-space
|
||||
class="inputgreen"
|
||||
lazy-rules
|
||||
/>
|
||||
</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"
|
||||
lazy-rules
|
||||
/>
|
||||
</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"
|
||||
lazy-rules
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<q-input
|
||||
v-model="formDetail.documentInfoEvidence"
|
||||
label="ข้อมูลเอกสารหลักฐาน"
|
||||
type="textarea"
|
||||
outlined
|
||||
dense
|
||||
:rules="[(val:string) => !!val || `${'กรุณากรอกข้อมูลเอกสารหลักฐาน'}`,]"
|
||||
hide-bottom-space
|
||||
class="inputgreen"
|
||||
lazy-rules
|
||||
/>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<datepicker
|
||||
v-model="formDetail.date"
|
||||
:locale="'th'"
|
||||
autoApply
|
||||
:enableTimePicker="false"
|
||||
week-start="0"
|
||||
range
|
||||
>
|
||||
<template #year="{ year }">{{ year + 543 }}</template>
|
||||
<template #year-overlay-value="{ value }">{{
|
||||
parseInt(value + 543)
|
||||
}}</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
dense
|
||||
outlined
|
||||
class="inputgreen"
|
||||
:model-value="
|
||||
formDetail.date
|
||||
? `${date2Thai(formDetail.date[0])} - ${date2Thai(
|
||||
formDetail.date[1]
|
||||
)}`
|
||||
: null
|
||||
"
|
||||
:label="`${'ช่วงเวลาเริ่มต้น-สิ้นสุด'}`"
|
||||
hide-bottom-space
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon
|
||||
name="event"
|
||||
class="cursor-pointer"
|
||||
style="color: var(--q-primary)"
|
||||
>
|
||||
</q-icon>
|
||||
</template>
|
||||
<template v-slot:append>
|
||||
<q-icon
|
||||
v-if="formDetail.date !== null"
|
||||
name="cancel"
|
||||
class="cursor-pointer"
|
||||
@click="formDetail.date = null"
|
||||
/>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
</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,361 @@
|
|||
<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/14_KPI/interface/request/index";
|
||||
|
||||
import DialogHeader from "@/components/DialogHeader.vue";
|
||||
|
||||
import { useKpiDataStore } from "@/modules/14_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: "", //หน่วยนับ
|
||||
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 = "";
|
||||
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 = 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"
|
||||
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>
|
||||
604
src/modules/14_KPI/components/Tab/Dialog/04_FormCompetency.vue
Normal file
604
src/modules/14_KPI/components/Tab/Dialog/04_FormCompetency.vue
Normal file
|
|
@ -0,0 +1,604 @@
|
|||
<script setup lang="ts">
|
||||
import { ref, reactive, onMounted, watch } from "vue";
|
||||
import DialogHeader from "@/components/DialogHeader.vue";
|
||||
import type { DataOptions } from "@/modules/14_KPI/interface/index/Main";
|
||||
import type { ListCapacity } from "@/modules/14_KPI/interface/request/index";
|
||||
import { useKpiDataStore } from "@/modules/14_KPI/store";
|
||||
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
|
||||
import http from "@/plugins/http";
|
||||
import config from "@/app.config";
|
||||
import { useQuasar, type QTableProps } 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 pagination = ref({
|
||||
sortBy: "desc",
|
||||
descending: false,
|
||||
page: 1,
|
||||
rowsPerPage: 20,
|
||||
});
|
||||
|
||||
const weight = ref<number>(100);
|
||||
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);
|
||||
|
||||
const visibleColumns = ref<String[]>(["level", "description"]);
|
||||
const columns = ref<QTableProps["columns"]>([
|
||||
{
|
||||
name: "level",
|
||||
align: "center",
|
||||
label: "ระดับสมรรถนะ",
|
||||
sortable: true,
|
||||
field: "level",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px; width:5px;",
|
||||
},
|
||||
{
|
||||
name: "description",
|
||||
align: "left",
|
||||
label: "พฤติกรรมที่คาดหวัง/พฤติกรรมย่อย",
|
||||
sortable: true,
|
||||
field: "description",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px; width:15%;",
|
||||
},
|
||||
]);
|
||||
|
||||
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,
|
||||
};
|
||||
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
|
||||
readonly
|
||||
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 class="col-8">
|
||||
<q-select
|
||||
:readonly="type == 'HEAD' || type == 'GROUP'"
|
||||
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-table
|
||||
flat
|
||||
bordered
|
||||
dense
|
||||
:paging="true"
|
||||
row-key="level"
|
||||
class="custom-table2"
|
||||
virtual-scroll
|
||||
:rows="dataListCapacityDetails"
|
||||
hide-pagination
|
||||
:columns="columns"
|
||||
:visible-columns="visibleColumns"
|
||||
v-model:pagination="pagination"
|
||||
>
|
||||
<template v-slot:header="props">
|
||||
<q-tr :props="props">
|
||||
<q-th
|
||||
v-for="col in props.cols"
|
||||
:key="col.name"
|
||||
:props="props"
|
||||
class="bg-grey-2"
|
||||
>
|
||||
<span class="text-weight-bold">{{ 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.name"
|
||||
:props="props"
|
||||
>
|
||||
<div v-if="(col.name = 'description')">
|
||||
<span v-html="col.value"></span>
|
||||
</div>
|
||||
<div v-else>
|
||||
{{ col.value }}
|
||||
<!-- <span v-html="item.description"></span> -->
|
||||
</div>
|
||||
</q-td>
|
||||
</q-tr>
|
||||
</template>
|
||||
<template v-slot:no-data="{ icon, message }">
|
||||
<div
|
||||
class="q-pa-md text-weight-bold full-width text-center"
|
||||
>
|
||||
<span style="font-size: 16px">ไม่พบข้อมูลสมรรถนะ</span>
|
||||
</div>
|
||||
</template>
|
||||
</q-table>
|
||||
|
||||
<!-- <q-card bordered class="col-12 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-start">
|
||||
<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
|
||||
v-if="index !== dataListCapacityDetails.length - 1"
|
||||
/>
|
||||
</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;
|
||||
}
|
||||
.custom-table2 {
|
||||
.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,607 @@
|
|||
<script setup lang="ts">
|
||||
import { ref, watch, onMounted, reactive } from "vue";
|
||||
import DialogHeader from "@/components/DialogHeader.vue";
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
|
||||
import http from "@/plugins/http";
|
||||
import config from "@/app.config";
|
||||
|
||||
import type {
|
||||
FormComment,
|
||||
FormCommentByRole,
|
||||
} from "@/modules/14_KPI/interface/request/index";
|
||||
import { useRoute } from "vue-router";
|
||||
import { useQuasar } from "quasar";
|
||||
|
||||
import { useKpiDataStore } from "@/modules/14_KPI/store";
|
||||
|
||||
const store = useKpiDataStore();
|
||||
const $q = useQuasar();
|
||||
const route = useRoute();
|
||||
const id = ref<string>(route.params.id as string);
|
||||
const mixin = useCounterMixin();
|
||||
const {
|
||||
dialogConfirm,
|
||||
showLoader,
|
||||
hideLoader,
|
||||
messageError,
|
||||
dialogMessageNotify,
|
||||
success,
|
||||
} = mixin;
|
||||
|
||||
const modal = defineModel<boolean>("modal", { required: true });
|
||||
const type = defineModel<string>("type", { required: true });
|
||||
const idList = defineModel<string>("idList", { required: true });
|
||||
const modalAdd = ref<boolean>(false);
|
||||
const sendId = ref<string>("");
|
||||
|
||||
const splitterModel = ref<number>(40);
|
||||
const listTarget = ref<any>([]);
|
||||
const listCheck = ref<string>("");
|
||||
|
||||
const reasonEvaluator = ref<string>(""); //ผู้ประเมิน
|
||||
const reasonCommander = ref<string>(""); //ผู้บังคับบัญชาเหนือขึ้นไป
|
||||
const reasonCommanderHigh = ref<string>(""); //ผู้บังคับบัญชาเหนือขึ้นไปอีกขั้นหนึ่ง
|
||||
|
||||
const reasonEvaluatorRef = ref<any>();
|
||||
const reasonCommanderRef = ref<any>();
|
||||
const reasonCommanderHighRef = ref<any>();
|
||||
const sendType = ref<string>("");
|
||||
const formDataAdd = reactive<FormComment>({
|
||||
topic: "",
|
||||
reason: "",
|
||||
});
|
||||
|
||||
const formDataView = reactive<FormCommentByRole>({
|
||||
id: "",
|
||||
topic: "",
|
||||
reason: "",
|
||||
|
||||
reasonEvaluator: "",
|
||||
reasonCommander: "",
|
||||
reasonCommanderHigh: "",
|
||||
});
|
||||
|
||||
let count = ref<number>(0);
|
||||
function clickList(index: string, data: any) {
|
||||
// if (data.status == "DRAFT") {
|
||||
|
||||
// }
|
||||
listCheck.value = index as string;
|
||||
|
||||
formDataView.id = data.id;
|
||||
formDataView.topic = data.topic;
|
||||
formDataView.reason = data.reason;
|
||||
|
||||
formDataView.reasonEvaluator = data.reasonEvaluator;
|
||||
formDataView.reasonCommander = data.reasonCommander;
|
||||
formDataView.reasonCommanderHigh = data.reasonCommanderHigh;
|
||||
|
||||
reasonEvaluator.value = data.reasonEvaluator ?? "";
|
||||
reasonCommander.value = data.reasonCommander ?? "";
|
||||
reasonCommanderHigh.value = data.reasonCommanderHigh ?? "";
|
||||
|
||||
if (count.value >= 1) {
|
||||
reasonEvaluatorRef.value.reset();
|
||||
reasonCommanderRef.value.reset();
|
||||
reasonCommanderHighRef.value.reset();
|
||||
}
|
||||
count.value++;
|
||||
showLoader();
|
||||
setTimeout(() => {
|
||||
hideLoader();
|
||||
}, 100);
|
||||
}
|
||||
|
||||
function onEdit(index: string, data: any) {
|
||||
modalAdd.value = true;
|
||||
sendId.value = data.id;
|
||||
formDataAdd.topic = data.topic;
|
||||
formDataAdd.reason = data.reason;
|
||||
}
|
||||
|
||||
function onSubmitAdd() {
|
||||
dialogConfirm($q, () => {
|
||||
showLoader();
|
||||
http
|
||||
.put(
|
||||
config.API.kpiCommentP(
|
||||
"problem",
|
||||
type.value + sendType.value,
|
||||
store.rolePerson.toLowerCase(),
|
||||
sendId.value ? sendId.value : idList.value
|
||||
),
|
||||
{
|
||||
reason: formDataAdd.reason,
|
||||
topic: formDataAdd.topic,
|
||||
}
|
||||
)
|
||||
.then(async (res) => {
|
||||
success($q, "บันทึกข้อมูลสำเร็จ");
|
||||
if (sendId.value) {
|
||||
const id = res.data.result;
|
||||
await closeAdd();
|
||||
const data = listTarget.value.find((item: any) => item.id == id);
|
||||
clickList(id, data);
|
||||
} else {
|
||||
sendId.value = res.data.result;
|
||||
getList();
|
||||
}
|
||||
})
|
||||
.catch((e) => {
|
||||
messageError($q, e);
|
||||
})
|
||||
.finally(() => {
|
||||
hideLoader();
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function onSubmit() {}
|
||||
|
||||
function close() {
|
||||
count.value = 0;
|
||||
modal.value = false;
|
||||
|
||||
reasonEvaluator.value = "";
|
||||
reasonCommander.value = "";
|
||||
reasonCommanderHigh.value = "";
|
||||
|
||||
listTarget.value = [];
|
||||
listCheck.value = "";
|
||||
}
|
||||
|
||||
function closeAdd() {
|
||||
modalAdd.value = false;
|
||||
formDataAdd.topic = "";
|
||||
formDataAdd.reason = "";
|
||||
sendId.value = "";
|
||||
getList();
|
||||
}
|
||||
|
||||
function getList() {
|
||||
showLoader();
|
||||
http
|
||||
.get(
|
||||
config.API.kpiCommentP(
|
||||
"problem",
|
||||
type.value,
|
||||
store.rolePerson.toLowerCase(),
|
||||
idList.value
|
||||
)
|
||||
)
|
||||
.then((res) => {
|
||||
const data = res.data.result;
|
||||
listTarget.value = data;
|
||||
})
|
||||
.catch((e) => {
|
||||
messageError($q, e);
|
||||
})
|
||||
.finally(() => {
|
||||
hideLoader();
|
||||
});
|
||||
}
|
||||
|
||||
function onSubmitComment(role: string) {
|
||||
dialogConfirm($q, () => {
|
||||
const body = {
|
||||
reason:
|
||||
role == "evaluator"
|
||||
? reasonEvaluator.value
|
||||
: role == "commander"
|
||||
? reasonCommander.value
|
||||
: role == "commanderhigh"
|
||||
? reasonCommanderHigh.value
|
||||
: null,
|
||||
};
|
||||
showLoader();
|
||||
http
|
||||
.put(
|
||||
config.API.kpiCommentP(
|
||||
"problem",
|
||||
type.value,
|
||||
store.rolePerson.toLowerCase(),
|
||||
formDataView.id
|
||||
),
|
||||
body
|
||||
)
|
||||
.then((res) => {
|
||||
success($q, "บันทึกข้อมูลสำเร็จ");
|
||||
|
||||
getList();
|
||||
setTimeout(() => {
|
||||
if (listCheck.value) {
|
||||
const idCheck = listCheck.value;
|
||||
const data = listTarget.value.find(
|
||||
(item: any) => item.id == idCheck
|
||||
);
|
||||
clickList(idCheck, data);
|
||||
}
|
||||
}, 200);
|
||||
})
|
||||
.catch((e) => {
|
||||
messageError($q, e);
|
||||
})
|
||||
.finally(() => {
|
||||
hideLoader();
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function statusText(val: string) {
|
||||
switch (val) {
|
||||
case "DRAFT":
|
||||
return "แบบร่าง";
|
||||
case "EVALUATOR":
|
||||
return "ผู้ประเมิน";
|
||||
case "COMMANDER":
|
||||
return "ผู้บังคับบัญชาเหนือขึ้นไป";
|
||||
case "COMMANDERHIGH":
|
||||
return "ผู้บังคับบัญชาเหนือขึ้นไปอีกขั้นหนึ่ง";
|
||||
case "DONE":
|
||||
return "เสร็จสิ้น";
|
||||
|
||||
default:
|
||||
return "";
|
||||
}
|
||||
}
|
||||
|
||||
function onNoti() {
|
||||
listCheck.value = "";
|
||||
count.value = 0;
|
||||
}
|
||||
watch(
|
||||
() => modal.value,
|
||||
() => {
|
||||
if (modal.value == true) {
|
||||
getList();
|
||||
}
|
||||
}
|
||||
);
|
||||
</script>
|
||||
<template>
|
||||
<q-dialog v-model="modal" persistent>
|
||||
<q-card style="min-width: 70vw">
|
||||
<q-form greedy @submit.prevent @validation-success="onSubmit">
|
||||
<DialogHeader tittle="รายงานปัญหา" :close="close" />
|
||||
<q-separator />
|
||||
<q-card-section class="q-pa-none">
|
||||
<q-splitter
|
||||
v-model="splitterModel"
|
||||
disable
|
||||
separator-class="bg-gray"
|
||||
separator-style="width: 1px"
|
||||
>
|
||||
<template v-slot:before>
|
||||
<div class="q-pa-sm">
|
||||
<q-btn
|
||||
v-if="store.rolePerson === 'USER'"
|
||||
icon="add"
|
||||
color="teal"
|
||||
flat
|
||||
round
|
||||
@click="
|
||||
() => {
|
||||
modalAdd = true;
|
||||
}
|
||||
"
|
||||
>
|
||||
<q-tooltip>เพิ่มหัวข้อรายงานปัญหา</q-tooltip>
|
||||
</q-btn>
|
||||
|
||||
<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.id"
|
||||
clickable
|
||||
v-ripple
|
||||
:active="listCheck === item.id"
|
||||
active-class="my-menu-link"
|
||||
@click="
|
||||
item.status == 'DRAFT'
|
||||
? onNoti()
|
||||
: clickList(item.id, item)
|
||||
"
|
||||
>
|
||||
<q-item-section class="q-pa-none">
|
||||
<div class="row items-center">
|
||||
<div class="col-12 row justify-between">
|
||||
<span>{{ item.topic }}</span>
|
||||
<q-badge
|
||||
v-if="item.status == 'DRAFT'"
|
||||
outline
|
||||
color="grey"
|
||||
label="แบบร่าง"
|
||||
@click="onEdit(item.id, item)"
|
||||
/>
|
||||
</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>
|
||||
</template>
|
||||
|
||||
<template v-slot:after>
|
||||
<div
|
||||
v-if="!listCheck"
|
||||
class="row col-12 items-center"
|
||||
style="height: 30vh"
|
||||
>
|
||||
<q-banner class="q-pa-lg col-12 text-center">
|
||||
<q-icon
|
||||
name="mdi-hand-pointing-left"
|
||||
size="lg"
|
||||
color="primary"
|
||||
/>
|
||||
<p class="text-grey-9 q-pt-sm">กรุณาเลือกหัวข้อรายงานปัญหา</p>
|
||||
</q-banner>
|
||||
</div>
|
||||
<div v-else>
|
||||
<div class="row q-pa-md q-col-gutter-sm">
|
||||
<div class="row col-12 text-weight-medium">
|
||||
<div class="col-4 text-grey-6">หัวข้อปัญหา</div>
|
||||
<div class="col-8">{{ formDataView.topic }}</div>
|
||||
</div>
|
||||
<div class="row col-12 text-weight-medium">
|
||||
<div class="col-4 text-grey-6">รายละเอียดปัญหา</div>
|
||||
<div class="col-8">{{ formDataView.reason }}</div>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<q-separator />
|
||||
</div>
|
||||
|
||||
<!-- ความคิดเห็นของผู้ประเมิน -->
|
||||
<q-form
|
||||
v-if="store.dataEvaluation.evaluatorId"
|
||||
ref="reasonEvaluatorRef"
|
||||
greedy
|
||||
@submit.prevent
|
||||
@validation-success="onSubmitComment('evaluator')"
|
||||
class="full-width q-mt-sm"
|
||||
>
|
||||
<div class="row col-12 q-col-gutter-sm">
|
||||
<div class="col-12">
|
||||
<span class="text-weight-medium text-grey-6"
|
||||
>ความคิดเห็นของผู้ประเมิน</span
|
||||
>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<q-input
|
||||
outlined
|
||||
dense
|
||||
:readonly="
|
||||
formDataView.reasonEvaluator !== null ||
|
||||
store.rolePerson !== 'EVALUATOR'
|
||||
"
|
||||
label="ความคิดเห็นของผู้ประเมิน"
|
||||
v-model="reasonEvaluator"
|
||||
type="textarea"
|
||||
class="inputgreen"
|
||||
lazy-rules
|
||||
hide-bottom-space
|
||||
:rules="[(val:string) => !!val || `${'กรุณากรอกความคิดเห็นของผู้ประเมิน'}`,]"
|
||||
></q-input>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-if="
|
||||
formDataView.reasonEvaluator == null &&
|
||||
store.rolePerson == 'EVALUATOR'
|
||||
"
|
||||
class="col-12"
|
||||
align="right"
|
||||
>
|
||||
<q-btn
|
||||
label="บันทึกความคิดเห็น"
|
||||
color="secondary"
|
||||
type="submit"
|
||||
><q-tooltip>บันทึกความคิดเห็น</q-tooltip></q-btn
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</q-form>
|
||||
|
||||
<!-- ความคิดเห็นของผู้บังคับบัญชาเหนือขึ้นไป -->
|
||||
<q-form
|
||||
v-if="store.dataEvaluation.commanderId"
|
||||
class="full-width q-mt-sm"
|
||||
ref="reasonCommanderRef"
|
||||
greedy
|
||||
@submit.prevent
|
||||
@validation-success="onSubmitComment('commander')"
|
||||
>
|
||||
<div class="row col-12 q-col-gutter-sm">
|
||||
<div class="col-12">
|
||||
<span class="text-weight-medium text-grey-6"
|
||||
>ความคิดเห็นของผู้บังคับบัญชาเหนือขึ้นไป</span
|
||||
>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<q-input
|
||||
outlined
|
||||
dense
|
||||
label="ความคิดเห็นของผู้บังคับบัญชาเหนือขึ้นไป"
|
||||
v-model="reasonCommander"
|
||||
type="textarea"
|
||||
class="inputgreen"
|
||||
lazy-rules
|
||||
:readonly="
|
||||
formDataView.reasonCommander !== null ||
|
||||
store.rolePerson !== 'COMMANDER'
|
||||
"
|
||||
hide-bottom-space
|
||||
:rules="[(val:string) => !!val || `${'กรุณากรอกความคิดเห็นของผู้บังคับบัญชาเหนือขึ้นไป'}`,]"
|
||||
></q-input>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-if="
|
||||
formDataView.reasonCommander == null &&
|
||||
store.rolePerson == 'COMMANDER'
|
||||
"
|
||||
class="col-12"
|
||||
align="right"
|
||||
>
|
||||
<q-btn
|
||||
label="บันทึกความคิดเห็น"
|
||||
color="secondary"
|
||||
type="submit"
|
||||
><q-tooltip>บันทึกความคิดเห็น</q-tooltip></q-btn
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</q-form>
|
||||
|
||||
<q-form
|
||||
v-if="store.dataEvaluation.commanderHighId"
|
||||
class="full-width q-mt-sm"
|
||||
ref="reasonCommanderHighRef"
|
||||
greedy
|
||||
@submit.prevent
|
||||
@validation-success="onSubmitComment('commanderhigh')"
|
||||
>
|
||||
<div class="row col-12 q-col-gutter-sm">
|
||||
<div class="col-12">
|
||||
<span class="text-weight-medium text-grey-6"
|
||||
>ความคิดเห็นของผู้บังคับบัญชาเหนือขึ้นไปอีกขั้นหนึ่ง</span
|
||||
>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<q-input
|
||||
outlined
|
||||
dense
|
||||
label="ความคิดเห็นของผู้บังคับบัญชาเหนือขึ้นไปอีกขั้นหนึ่ง"
|
||||
v-model="reasonCommanderHigh"
|
||||
type="textarea"
|
||||
class="inputgreen"
|
||||
lazy-rules
|
||||
:readonly="
|
||||
formDataView.reasonCommanderHigh !== null ||
|
||||
store.rolePerson !== 'COMMANDERHIGH'
|
||||
"
|
||||
hide-bottom-space
|
||||
:rules="[(val:string) => !!val || `${'กรุณากรอกความคิดเห็นของผู้บังคับบัญชาเหนือขึ้นไปอีกขั้นหนึ่ง'}`,]"
|
||||
></q-input>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-if="
|
||||
formDataView.reasonCommanderHigh == null &&
|
||||
store.rolePerson == 'COMMANDERHIGH'
|
||||
"
|
||||
class="col-12"
|
||||
align="right"
|
||||
>
|
||||
<q-btn
|
||||
label="บันทึกความคิดเห็น"
|
||||
color="secondary"
|
||||
type="submit"
|
||||
><q-tooltip>บันทึกความคิดเห็น</q-tooltip></q-btn
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</q-form>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</q-splitter>
|
||||
</q-card-section>
|
||||
</q-form>
|
||||
</q-card>
|
||||
</q-dialog>
|
||||
|
||||
<q-dialog v-model="modalAdd" persistent>
|
||||
<q-card style="min-width: 30vw">
|
||||
<q-form greedy @submit.prevent @validation-success="onSubmitAdd">
|
||||
<DialogHeader
|
||||
:tittle="`${sendId ? 'แก้ไข' : 'เพิ่ม'}หัวข้อรายงานปัญหา`"
|
||||
:close="closeAdd"
|
||||
/>
|
||||
<q-separator />
|
||||
|
||||
<q-card-section>
|
||||
<div class="row q-col-gutter-sm">
|
||||
<div class="col-12">
|
||||
<q-input
|
||||
v-model="formDataAdd.topic"
|
||||
outlined
|
||||
class="inputgreen"
|
||||
label="หัวข้อรายงานปัญหา"
|
||||
dense
|
||||
lazy-rules
|
||||
hide-bottom-space
|
||||
:rules="[(val:string) => !!val || `${'กรุณากรอกหัวข้อรายงานปัญหา'}`,]"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<q-input
|
||||
v-model="formDataAdd.reason"
|
||||
outlined
|
||||
class="inputgreen"
|
||||
label="รายละเอียดปัญหา"
|
||||
dense
|
||||
lazy-rules
|
||||
hide-bottom-space
|
||||
:rules="[(val:string) => !!val || `${'กรุณากรอกรายละเอียดปัญหา'}`,]"
|
||||
type="textarea"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</q-card-section>
|
||||
<q-separator />
|
||||
<q-card-actions align="right" class="bg-white text-teal">
|
||||
<q-btn
|
||||
label="บันทึกแบบร่าง"
|
||||
color="info"
|
||||
type="submit"
|
||||
@click="
|
||||
() => {
|
||||
sendType = '';
|
||||
}
|
||||
"
|
||||
><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn
|
||||
>
|
||||
<q-btn
|
||||
v-if="sendId !== ''"
|
||||
label="ส่งไปยังผู้ประเมิน"
|
||||
color="secondary"
|
||||
type="submit"
|
||||
@click="
|
||||
() => {
|
||||
sendType = 'send';
|
||||
}
|
||||
"
|
||||
><q-tooltip>ส่งไปยังผู้ประเมิน</q-tooltip></q-btn
|
||||
>
|
||||
</q-card-actions>
|
||||
</q-form>
|
||||
</q-card>
|
||||
</q-dialog>
|
||||
</template>
|
||||
<style scoped>
|
||||
.border-right {
|
||||
border-right: 1px solid #000;
|
||||
}
|
||||
.my-menu-link {
|
||||
background: #ebf9f7 !important;
|
||||
color: #1bb19ab8 !important;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,523 @@
|
|||
<script setup lang="ts">
|
||||
import { ref, watch, onMounted, reactive } from "vue";
|
||||
import DialogHeader from "@/components/DialogHeader.vue";
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
|
||||
import http from "@/plugins/http";
|
||||
import config from "@/app.config";
|
||||
|
||||
import type {
|
||||
FormComment,
|
||||
FormCommentByRole,
|
||||
} from "@/modules/14_KPI/interface/request/index";
|
||||
import { useRoute } from "vue-router";
|
||||
import { useQuasar } from "quasar";
|
||||
import { useKpiDataStore } from "@/modules/14_KPI/store";
|
||||
|
||||
const store = useKpiDataStore();
|
||||
const $q = useQuasar();
|
||||
const mixin = useCounterMixin();
|
||||
const { dialogConfirm, showLoader, hideLoader, messageError, success } = mixin;
|
||||
|
||||
const modal = defineModel<boolean>("modal", { required: true });
|
||||
const type = defineModel<string>("type", { required: true });
|
||||
const idList = defineModel<string>("idList", { required: true });
|
||||
const modalAdd = ref<boolean>(false);
|
||||
|
||||
const splitterModel = ref<number>(40);
|
||||
const listTarget = ref<any>([]);
|
||||
const listCheck = ref<string>("");
|
||||
|
||||
const reasonEvaluator = ref<string>(""); //ผู้ประเมิน
|
||||
const reasonCommander = ref<string>(""); //ผู้บังคับบัญชาเหนือขึ้นไป
|
||||
const reasonCommanderHigh = ref<string>(""); //ผู้บังคับบัญชาเหนือขึ้นไปอีกขั้นหนึ่ง
|
||||
|
||||
const reasonEvaluatorRef = ref<any>();
|
||||
const reasonCommanderRef = ref<any>();
|
||||
const reasonCommanderHighRef = ref<any>();
|
||||
|
||||
const formDataAdd = reactive<FormComment>({
|
||||
topic: "",
|
||||
reason: "",
|
||||
});
|
||||
|
||||
const formDataView = reactive<FormCommentByRole>({
|
||||
id: "",
|
||||
topic: "",
|
||||
reason: "",
|
||||
|
||||
reasonEvaluator: "",
|
||||
reasonCommander: "",
|
||||
reasonCommanderHigh: "",
|
||||
});
|
||||
|
||||
let count = ref<number>(0);
|
||||
function clickList(index: string, data: any) {
|
||||
listCheck.value = index as string;
|
||||
|
||||
formDataView.id = data.id;
|
||||
formDataView.topic = data.topic;
|
||||
formDataView.reason = data.reason;
|
||||
|
||||
formDataView.reasonEvaluator = data.reasonEvaluator;
|
||||
formDataView.reasonCommander = data.reasonCommander;
|
||||
formDataView.reasonCommanderHigh = data.reasonCommanderHigh;
|
||||
|
||||
reasonEvaluator.value = data.reasonEvaluator ?? "";
|
||||
reasonCommander.value = data.reasonCommander ?? "";
|
||||
reasonCommanderHigh.value = data.reasonCommanderHigh ?? "";
|
||||
|
||||
if (count.value >= 1) {
|
||||
reasonEvaluatorRef.value.reset();
|
||||
reasonCommanderRef.value.reset();
|
||||
reasonCommanderHighRef.value.reset();
|
||||
}
|
||||
count.value++;
|
||||
showLoader();
|
||||
setTimeout(() => {
|
||||
hideLoader();
|
||||
}, 100);
|
||||
}
|
||||
|
||||
function onSubmitAdd() {
|
||||
dialogConfirm($q, () => {
|
||||
showLoader();
|
||||
http
|
||||
.put(
|
||||
config.API.kpiCommentP(
|
||||
"progress",
|
||||
type.value,
|
||||
store.rolePerson.toLocaleLowerCase(),
|
||||
idList.value
|
||||
),
|
||||
{
|
||||
reason: formDataAdd.reason,
|
||||
topic: formDataAdd.topic,
|
||||
}
|
||||
)
|
||||
.then((res) => {
|
||||
success($q, "บันทึกข้อมูลสำเร็จ");
|
||||
getList();
|
||||
closeAdd();
|
||||
})
|
||||
.catch((e) => {
|
||||
messageError($q, e);
|
||||
})
|
||||
.finally(() => {
|
||||
hideLoader();
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function onSubmit() {}
|
||||
|
||||
function close() {
|
||||
count.value = 0;
|
||||
modal.value = false;
|
||||
|
||||
reasonEvaluator.value = "";
|
||||
reasonCommander.value = "";
|
||||
reasonCommanderHigh.value = "";
|
||||
|
||||
listTarget.value = [];
|
||||
listCheck.value = "";
|
||||
}
|
||||
|
||||
function closeAdd() {
|
||||
modalAdd.value = false;
|
||||
formDataAdd.topic = "";
|
||||
formDataAdd.reason = "";
|
||||
}
|
||||
|
||||
function getList() {
|
||||
showLoader();
|
||||
http
|
||||
.get(
|
||||
config.API.kpiCommentP(
|
||||
"progress",
|
||||
type.value,
|
||||
store.rolePerson.toLocaleLowerCase(),
|
||||
idList.value
|
||||
)
|
||||
)
|
||||
.then((res) => {
|
||||
const data = res.data.result;
|
||||
listTarget.value = data;
|
||||
})
|
||||
.catch((e) => {
|
||||
messageError($q, e);
|
||||
})
|
||||
.finally(() => {
|
||||
hideLoader();
|
||||
});
|
||||
}
|
||||
|
||||
function onSubmitComment(role: string) {
|
||||
dialogConfirm($q, () => {
|
||||
const body = {
|
||||
reason:
|
||||
role == "evaluator"
|
||||
? reasonEvaluator.value
|
||||
: role == "commander"
|
||||
? reasonCommander.value
|
||||
: role == "commanderhigh"
|
||||
? reasonCommanderHigh.value
|
||||
: null,
|
||||
};
|
||||
showLoader();
|
||||
http
|
||||
.put(
|
||||
config.API.kpiCommentP(
|
||||
"progress",
|
||||
type.value,
|
||||
store.rolePerson.toLocaleLowerCase(),
|
||||
formDataView.id
|
||||
),
|
||||
body
|
||||
)
|
||||
.then((res) => {
|
||||
success($q, "บันทึกข้อมูลสำเร็จ");
|
||||
|
||||
getList();
|
||||
setTimeout(() => {
|
||||
if (listCheck.value) {
|
||||
const idCheck = listCheck.value;
|
||||
const data = listTarget.value.find(
|
||||
(item: any) => item.id == idCheck
|
||||
);
|
||||
clickList(idCheck, data);
|
||||
}
|
||||
}, 200);
|
||||
})
|
||||
.catch((e) => {
|
||||
messageError($q, e);
|
||||
})
|
||||
.finally(() => {
|
||||
hideLoader();
|
||||
});
|
||||
});
|
||||
}
|
||||
watch(
|
||||
() => modal.value,
|
||||
() => {
|
||||
if (modal.value == true) {
|
||||
getList();
|
||||
}
|
||||
}
|
||||
);
|
||||
</script>
|
||||
<template>
|
||||
<q-dialog v-model="modal" persistent>
|
||||
<q-card style="min-width: 70vw">
|
||||
<q-form greedy @submit.prevent @validation-success="onSubmit">
|
||||
<DialogHeader tittle="รายงานความก้าวหน้า" :close="close" />
|
||||
<q-separator />
|
||||
<q-card-section class="q-pa-none">
|
||||
<q-splitter
|
||||
v-model="splitterModel"
|
||||
disable
|
||||
separator-class="bg-gray"
|
||||
separator-style="width: 1px"
|
||||
>
|
||||
<template v-slot:before>
|
||||
<div class="q-pa-sm">
|
||||
<q-btn
|
||||
v-if="store.rolePerson === 'USER'"
|
||||
icon="add"
|
||||
color="teal"
|
||||
flat
|
||||
round
|
||||
@click="
|
||||
() => {
|
||||
modalAdd = true;
|
||||
}
|
||||
"
|
||||
>
|
||||
<q-tooltip>เพิ่มความก้าวหน้า</q-tooltip>
|
||||
</q-btn>
|
||||
|
||||
<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.id"
|
||||
clickable
|
||||
v-ripple
|
||||
:active="listCheck === item.id"
|
||||
active-class="my-menu-link"
|
||||
@click="clickList(item.id, item)"
|
||||
>
|
||||
<q-item-section class="q-pa-none">
|
||||
<div class="row items-center">
|
||||
<div class="col-12">
|
||||
<span>{{ item.topic }}</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>
|
||||
</template>
|
||||
|
||||
<template v-slot:after>
|
||||
<div
|
||||
v-if="!listCheck"
|
||||
class="row col-12 items-center"
|
||||
style="height: 30vh"
|
||||
>
|
||||
<q-banner class="q-pa-lg col-12 text-center">
|
||||
<q-icon
|
||||
name="mdi-hand-pointing-left"
|
||||
size="lg"
|
||||
color="primary"
|
||||
/>
|
||||
<p class="text-grey-9 q-pt-sm">
|
||||
กรุณาเลือกหัวข้อความก้าวหน้า
|
||||
</p>
|
||||
</q-banner>
|
||||
</div>
|
||||
<div v-else>
|
||||
<div class="row q-pa-md q-col-gutter-sm">
|
||||
<div class="row col-12 text-weight-medium">
|
||||
<div class="col-4 text-grey-6">หัวข้อความก้าวหน้า</div>
|
||||
<div class="col-8">{{ formDataView.topic }}</div>
|
||||
</div>
|
||||
<div class="row col-12 text-weight-medium">
|
||||
<div class="col-4 text-grey-6">รายละเอียดความก้าวหน้า</div>
|
||||
<div class="col-8">{{ formDataView.reason }}</div>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<q-separator />
|
||||
</div>
|
||||
|
||||
<!-- ความคิดเห็นของผู้ประเมิน -->
|
||||
<q-form
|
||||
v-if="store.dataEvaluation.evaluatorId"
|
||||
ref="reasonEvaluatorRef"
|
||||
greedy
|
||||
@submit.prevent
|
||||
@validation-success="onSubmitComment('evaluator')"
|
||||
class="full-width q-mt-sm"
|
||||
>
|
||||
<div class="row col-12 q-col-gutter-sm">
|
||||
<div class="col-12">
|
||||
<span class="text-weight-medium text-grey-6"
|
||||
>ความคิดเห็นของผู้ประเมิน</span
|
||||
>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<q-input
|
||||
outlined
|
||||
dense
|
||||
:readonly="
|
||||
formDataView.reasonEvaluator !== null ||
|
||||
store.rolePerson !== 'EVALUATOR'
|
||||
"
|
||||
label="ความคิดเห็นของผู้ประเมิน"
|
||||
v-model="reasonEvaluator"
|
||||
type="textarea"
|
||||
class="inputgreen"
|
||||
lazy-rules
|
||||
hide-bottom-space
|
||||
:rules="[(val:string) => !!val || `${'กรุณากรอกความคิดเห็นของผู้ประเมิน'}`,]"
|
||||
></q-input>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-if="
|
||||
formDataView.reasonEvaluator == null &&
|
||||
store.rolePerson == 'EVALUATOR'
|
||||
"
|
||||
class="col-12"
|
||||
align="right"
|
||||
>
|
||||
<q-btn
|
||||
label="บันทึกความคิดเห็น"
|
||||
color="secondary"
|
||||
type="submit"
|
||||
><q-tooltip>บันทึกความคิดเห็น</q-tooltip></q-btn
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</q-form>
|
||||
|
||||
<!-- ความคิดเห็นของผู้บังคับบัญชาเหนือขึ้นไป -->
|
||||
<q-form
|
||||
v-if="store.dataEvaluation.commanderId"
|
||||
class="full-width q-mt-sm"
|
||||
ref="reasonCommanderRef"
|
||||
greedy
|
||||
@submit.prevent
|
||||
@validation-success="onSubmitComment('commander')"
|
||||
>
|
||||
<div class="row col-12 q-col-gutter-sm">
|
||||
<div class="col-12">
|
||||
<span class="text-weight-medium text-grey-6"
|
||||
>ความคิดเห็นของผู้บังคับบัญชาเหนือขึ้นไป</span
|
||||
>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<q-input
|
||||
outlined
|
||||
dense
|
||||
label="ความคิดเห็นของผู้บังคับบัญชาเหนือขึ้นไป"
|
||||
v-model="reasonCommander"
|
||||
type="textarea"
|
||||
class="inputgreen"
|
||||
lazy-rules
|
||||
:readonly="
|
||||
formDataView.reasonCommander !== null ||
|
||||
store.rolePerson !== 'COMMANDER'
|
||||
"
|
||||
hide-bottom-space
|
||||
:rules="[(val:string) => !!val || `${'กรุณากรอกความคิดเห็นของผู้บังคับบัญชาเหนือขึ้นไป'}`,]"
|
||||
></q-input>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-if="
|
||||
formDataView.reasonCommander == null &&
|
||||
store.rolePerson == 'COMMANDER'
|
||||
"
|
||||
class="col-12"
|
||||
align="right"
|
||||
>
|
||||
<q-btn
|
||||
label="บันทึกความคิดเห็น"
|
||||
color="secondary"
|
||||
type="submit"
|
||||
><q-tooltip>บันทึกความคิดเห็น</q-tooltip></q-btn
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</q-form>
|
||||
|
||||
<q-form
|
||||
v-if="store.dataEvaluation.commanderHighId"
|
||||
class="full-width q-mt-sm"
|
||||
ref="reasonCommanderHighRef"
|
||||
greedy
|
||||
@submit.prevent
|
||||
@validation-success="onSubmitComment('commanderhigh')"
|
||||
>
|
||||
<div class="row col-12 q-col-gutter-sm">
|
||||
<div class="col-12">
|
||||
<span class="text-weight-medium text-grey-6"
|
||||
>ความคิดเห็นของผู้บังคับบัญชาเหนือขึ้นไปอีกขั้นหนึ่ง</span
|
||||
>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<q-input
|
||||
outlined
|
||||
dense
|
||||
label="ความคิดเห็นของผู้บังคับบัญชาเหนือขึ้นไปอีกขั้นหนึ่ง"
|
||||
v-model="reasonCommanderHigh"
|
||||
type="textarea"
|
||||
class="inputgreen"
|
||||
lazy-rules
|
||||
:readonly="
|
||||
formDataView.reasonCommanderHigh !== null ||
|
||||
store.rolePerson !== 'COMMANDERHIGH'
|
||||
"
|
||||
hide-bottom-space
|
||||
:rules="[(val:string) => !!val || `${'กรุณากรอกความคิดเห็นของผู้บังคับบัญชาเหนือขึ้นไปอีกขั้นหนึ่ง'}`,]"
|
||||
></q-input>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-if="
|
||||
formDataView.reasonCommanderHigh == null &&
|
||||
store.rolePerson == 'COMMANDERHIGH'
|
||||
"
|
||||
class="col-12"
|
||||
align="right"
|
||||
>
|
||||
<q-btn
|
||||
label="บันทึกความคิดเห็น"
|
||||
color="secondary"
|
||||
type="submit"
|
||||
><q-tooltip>บันทึกความคิดเห็น</q-tooltip></q-btn
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</q-form>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</q-splitter>
|
||||
</q-card-section>
|
||||
</q-form>
|
||||
</q-card>
|
||||
</q-dialog>
|
||||
|
||||
<q-dialog v-model="modalAdd" persistent>
|
||||
<q-card style="min-width: 30vw">
|
||||
<q-form greedy @submit.prevent @validation-success="onSubmitAdd">
|
||||
<DialogHeader tittle="เพิ่มหัวข้อความก้าวหน้า" :close="closeAdd" />
|
||||
<q-separator />
|
||||
|
||||
<q-card-section>
|
||||
<div class="row q-col-gutter-sm">
|
||||
<div class="col-12">
|
||||
<q-input
|
||||
v-model="formDataAdd.topic"
|
||||
outlined
|
||||
class="inputgreen"
|
||||
label="หัวข้อความก้าวหน้า"
|
||||
dense
|
||||
lazy-rules
|
||||
hide-bottom-space
|
||||
:rules="[(val:string) => !!val || `${'กรุณากรอกหัวข้อความก้าวหน้า'}`,]"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<q-input
|
||||
v-model="formDataAdd.reason"
|
||||
outlined
|
||||
class="inputgreen"
|
||||
label="รายละเอียดความก้าวหน้า"
|
||||
dense
|
||||
lazy-rules
|
||||
hide-bottom-space
|
||||
:rules="[(val:string) => !!val || `${'กรุณากรอกรายละเอียดความก้าวหน้า'}`,]"
|
||||
type="textarea"
|
||||
/>
|
||||
</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>
|
||||
.border-right {
|
||||
border-right: 1px solid #000;
|
||||
}
|
||||
.my-menu-link {
|
||||
background: #ebf9f7 !important;
|
||||
color: #1bb19ab8 !important;
|
||||
}
|
||||
</style>
|
||||
258
src/modules/14_KPI/components/Tab/Dialog/DialogDevelop.vue
Normal file
258
src/modules/14_KPI/components/Tab/Dialog/DialogDevelop.vue
Normal file
|
|
@ -0,0 +1,258 @@
|
|||
<script setup lang="ts">
|
||||
import DialogHeader from "@/components/DialogHeader.vue";
|
||||
import { ref, reactive, watch } from "vue";
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
import { useQuasar } from "quasar";
|
||||
|
||||
import http from "@/plugins/http";
|
||||
import config from "@/app.config";
|
||||
import { useRoute } from "vue-router";
|
||||
|
||||
const props = defineProps({
|
||||
getAll: Function,
|
||||
});
|
||||
const route = useRoute();
|
||||
const idKpi = ref<string>(route.params.id.toLocaleString());
|
||||
|
||||
const $q = useQuasar();
|
||||
const mixin = useCounterMixin();
|
||||
const {
|
||||
showLoader,
|
||||
hideLoader,
|
||||
dialogConfirm,
|
||||
messageError,
|
||||
success,
|
||||
dialogMessageNotify,
|
||||
} = mixin;
|
||||
|
||||
const modal = defineModel<boolean>("modal", { required: true });
|
||||
const id = defineModel<string>("id", { required: true });
|
||||
|
||||
const formData = reactive({
|
||||
name: "",
|
||||
group: [],
|
||||
target: "",
|
||||
isDevelopment70: false,
|
||||
isDevelopment20: false,
|
||||
isDevelopment10: false,
|
||||
achievement10: "มีผลการพัฒนาและมีการดำเนินการตามเป้าหมายการนำไปพัฒนางาน",
|
||||
achievement5: "มีผลการพัฒนาแต่ยังไม่ได้ดำเนินการตามเป้าหมายการนำไปพัฒนางาน",
|
||||
achievement0: "ไม่ได้ดำเนินการพัฒนา",
|
||||
});
|
||||
function close() {
|
||||
modal.value = false;
|
||||
id.value = "";
|
||||
|
||||
formData.name = "";
|
||||
formData.group = [];
|
||||
formData.target = "";
|
||||
formData.isDevelopment70 = false;
|
||||
formData.isDevelopment20 = false;
|
||||
formData.isDevelopment10 = false;
|
||||
formData.achievement10 =
|
||||
"มีผลการพัฒนาและมีการดำเนินการตามเป้าหมายการนำไปพัฒนางาน";
|
||||
formData.achievement5 =
|
||||
"มีผลการพัฒนาแต่ยังไม่ได้ดำเนินการตามเป้าหมายการนำไปพัฒนางาน";
|
||||
formData.achievement0 = "ไม่ได้ดำเนินการพัฒนา";
|
||||
props.getAll?.();
|
||||
}
|
||||
|
||||
function onSubmit() {
|
||||
if (
|
||||
formData.isDevelopment70 == false &&
|
||||
formData.isDevelopment20 == false &&
|
||||
formData.isDevelopment10 == false
|
||||
) {
|
||||
dialogMessageNotify($q, "กรุณาเลือกวิธีการพัฒนา อย่างน้อย 1 ตัวเลือก");
|
||||
} else {
|
||||
dialogConfirm($q, () => {
|
||||
const url = id.value
|
||||
? config.API.kpiAchievementDevelop + `/${id.value}`
|
||||
: config.API.kpiAchievementDevelop;
|
||||
const body = {
|
||||
name: formData.name,
|
||||
target: formData.target,
|
||||
achievement10: formData.achievement10,
|
||||
achievement5: formData.achievement5,
|
||||
achievement0: formData.achievement0,
|
||||
isDevelopment70: formData.isDevelopment70,
|
||||
isDevelopment20: formData.isDevelopment20,
|
||||
isDevelopment10: formData.isDevelopment10,
|
||||
kpiUserEvaluationId: idKpi.value,
|
||||
};
|
||||
showLoader();
|
||||
http[id.value ? "put" : "post"](url, body)
|
||||
.then((res) => {
|
||||
success($q, "บันทึกข้อมูลสำเร็จ");
|
||||
close();
|
||||
})
|
||||
.catch((e) => {
|
||||
messageError($q, e);
|
||||
})
|
||||
.finally(() => {
|
||||
hideLoader();
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
watch(
|
||||
() => id.value,
|
||||
(i) => {
|
||||
if (i) {
|
||||
showLoader();
|
||||
http
|
||||
.get(config.API.kpiAchievementDevelop + `/${id.value}`)
|
||||
.then((res) => {
|
||||
const data = res.data.result;
|
||||
formData.name = data.name;
|
||||
formData.group = data.group;
|
||||
formData.target = data.target;
|
||||
formData.isDevelopment70 = data.isDevelopment70;
|
||||
formData.isDevelopment20 = data.isDevelopment20;
|
||||
formData.isDevelopment10 = data.isDevelopment10;
|
||||
formData.achievement10 = data.achievement10;
|
||||
formData.achievement5 = data.achievement5;
|
||||
formData.achievement0 = data.achievement0;
|
||||
})
|
||||
.catch((e) => {
|
||||
messageError($q, e);
|
||||
})
|
||||
.finally(() => {
|
||||
hideLoader();
|
||||
});
|
||||
}
|
||||
}
|
||||
);
|
||||
</script>
|
||||
<template>
|
||||
<q-dialog persistent v-model="modal">
|
||||
<q-card style="width: 80%">
|
||||
<q-form greedy @submit.prevent @validation-success="onSubmit">
|
||||
<DialogHeader
|
||||
:tittle="`${id ? 'แก้ไข' : 'เพิ่ม'}การพัฒนาตนเอง`"
|
||||
:close="close"
|
||||
/>
|
||||
<q-separator />
|
||||
<q-card-section>
|
||||
<div class="row q-col-gutter-sm">
|
||||
<div class="col-12">
|
||||
<q-input
|
||||
v-model="formData.name"
|
||||
outlined
|
||||
dense
|
||||
:rules="[(val:string) => !!val || `${'กรุณากรอกชื่อเรื่อง / เนื้อเรื่อง / หัวข้อการพัฒนา'}`,]"
|
||||
lazy-rules
|
||||
hide-bottom-space
|
||||
class="inputgreen"
|
||||
label="ชื่อเรื่อง / เนื้อเรื่อง / หัวข้อการพัฒนา"
|
||||
>
|
||||
</q-input>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<span class="text-weight-medium">วิธีการพัฒนา</span>
|
||||
</div>
|
||||
<div class="column">
|
||||
<q-checkbox
|
||||
v-model="formData.isDevelopment70"
|
||||
label="70 การลงมือปฏิบัติ (โดยผู้บังคับบัญชามอบหมาย)"
|
||||
/>
|
||||
<q-checkbox
|
||||
v-model="formData.isDevelopment20"
|
||||
label="20 การเรียนรู้จากผู้อื่น (Coach/Mentor/Consulting)"
|
||||
/>
|
||||
<q-checkbox
|
||||
v-model="formData.isDevelopment10"
|
||||
label="10 การฝึกอบรมอื่นๆ"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<q-input
|
||||
label="เป้าหมายการนำไปพัฒนางาน"
|
||||
v-model="formData.target"
|
||||
outlined
|
||||
type="textarea"
|
||||
dense
|
||||
class="inputgreen"
|
||||
:rules="[(val:string) => !!val || `${'กรุณากรอกเป้าหมายการนำไปพัฒนางาน'}`,]"
|
||||
lazy-rules
|
||||
hide-bottom-space
|
||||
></q-input>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<q-card bordered>
|
||||
<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-start">
|
||||
<span>เกณฑ์การประเมิน</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row q-pa-sm">
|
||||
<div class="col-4 text-center self-start text-body1">
|
||||
<span>10</span>
|
||||
</div>
|
||||
<div class="col-8">
|
||||
<q-input
|
||||
class="inputgreen"
|
||||
v-model="formData.achievement10"
|
||||
outlined
|
||||
dense
|
||||
label="เกณฑ์การประเมิน"
|
||||
:rules="[(val:string) => !!val || `${'กรุณากรอกเกณฑ์การประเมิน'}`,]"
|
||||
lazy-rules
|
||||
hide-bottom-space
|
||||
></q-input>
|
||||
</div>
|
||||
</div>
|
||||
<q-separator />
|
||||
<div class="row q-pa-sm bg-grey-2">
|
||||
<div class="col-4 text-center self-start text-body1">
|
||||
<span>5</span>
|
||||
</div>
|
||||
<div class="col-8">
|
||||
<q-input
|
||||
class="inputgreen"
|
||||
v-model="formData.achievement5"
|
||||
outlined
|
||||
dense
|
||||
label="เกณฑ์การประเมิน"
|
||||
:rules="[(val:string) => !!val || `${'กรุณากรอกเกณฑ์การประเมิน'}`,]"
|
||||
lazy-rules
|
||||
hide-bottom-space
|
||||
></q-input>
|
||||
</div>
|
||||
</div>
|
||||
<q-separator />
|
||||
<div class="row q-pa-sm">
|
||||
<div class="col-4 text-center self-start text-body1">
|
||||
<span>0</span>
|
||||
</div>
|
||||
<div class="col-8">
|
||||
<q-input
|
||||
class="inputgreen"
|
||||
v-model="formData.achievement0"
|
||||
outlined
|
||||
dense
|
||||
label="เกณฑ์การประเมิน"
|
||||
:rules="[(val:string) => !!val || `${'กรุณากรอกเกณฑ์การประเมิน'}`,]"
|
||||
lazy-rules
|
||||
hide-bottom-space
|
||||
></q-input>
|
||||
</div>
|
||||
</div>
|
||||
</q-card>
|
||||
</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>
|
||||
|
|
@ -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>
|
||||
111
src/modules/14_KPI/components/Tab/Dialog/DialogViewInfo.vue
Normal file
111
src/modules/14_KPI/components/Tab/Dialog/DialogViewInfo.vue
Normal file
|
|
@ -0,0 +1,111 @@
|
|||
divdiv
|
||||
<script setup lang="ts">
|
||||
import { ref, watch } from "vue";
|
||||
import { useQuasar } from "quasar";
|
||||
import config from "@/app.config";
|
||||
import http from "@/plugins/http";
|
||||
|
||||
import DialogHeader from "@/components/DialogHeader.vue";
|
||||
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
|
||||
const $q = useQuasar();
|
||||
const { showLoader, hideLoader, messageError } = useCounterMixin();
|
||||
|
||||
const modal = defineModel<boolean>("modal", { required: true });
|
||||
const numpage = defineModel<number>("numpage", { required: true });
|
||||
const kpiUserPlannedId = defineModel<string>("kpiUserPlannedId", {
|
||||
required: true,
|
||||
});
|
||||
|
||||
const dataAchievement = ref<any[]>([]);
|
||||
|
||||
function fetchByid(id: string, type: string) {
|
||||
showLoader();
|
||||
http
|
||||
.get(config.API.kpiAchievement(`${type}`) + `/${id}`)
|
||||
.then((res) => {
|
||||
const data = res.data.result;
|
||||
dataAchievement.value = [
|
||||
{
|
||||
level: "5",
|
||||
val: data.achievement5,
|
||||
},
|
||||
{
|
||||
level: "4",
|
||||
val: data.achievement4,
|
||||
},
|
||||
{
|
||||
level: "3",
|
||||
val: data.achievement3,
|
||||
},
|
||||
{
|
||||
level: "2",
|
||||
val: data.achievement2,
|
||||
},
|
||||
{
|
||||
level: "1",
|
||||
val: data.achievement1,
|
||||
},
|
||||
];
|
||||
})
|
||||
.catch((err) => {
|
||||
messageError($q, err);
|
||||
})
|
||||
.finally(() => {
|
||||
hideLoader();
|
||||
});
|
||||
}
|
||||
|
||||
function closeDialog() {
|
||||
modal.value = false;
|
||||
}
|
||||
|
||||
watch(
|
||||
() => modal.value,
|
||||
() => {
|
||||
if (modal.value) {
|
||||
const type =
|
||||
numpage.value === 1
|
||||
? "planned"
|
||||
: numpage.value === 2
|
||||
? "role"
|
||||
: "special";
|
||||
fetchByid(kpiUserPlannedId.value, type);
|
||||
}
|
||||
}
|
||||
);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<q-dialog v-model="modal" persistent>
|
||||
<q-card class="col-12" style="width: 45%">
|
||||
<DialogHeader :tittle="'คำอธิบายผลสำเร็จของงาน'" :close="closeDialog" />
|
||||
<q-separator />
|
||||
<q-card-section>
|
||||
<q-card bordered>
|
||||
<div class="bg-grey-2 q-pa-sm">
|
||||
<div
|
||||
class="row text-dark text-body2 text-weight-medium text-weight-bold"
|
||||
>
|
||||
<div class="text-center col-6">ระดับคะแนน</div>
|
||||
<div class="text-center col-6">ผลสำเร็จของงาน</div>
|
||||
</div>
|
||||
</div>
|
||||
<q-separator />
|
||||
<div v-for="(item, index) in dataAchievement" :key="item.id">
|
||||
<div :class="`row q-pa-sm ${index % 2 !== 0 && 'bg-grey-2'}`">
|
||||
<div class="col-6 text-center text-body1">{{ item.level }}</div>
|
||||
<div class="col-6 text-center self-center">
|
||||
<span>{{ item.val }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<q-separator />
|
||||
</div>
|
||||
</q-card>
|
||||
</q-card-section>
|
||||
</q-card>
|
||||
</q-dialog>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
|
|
@ -0,0 +1,332 @@
|
|||
<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/14_KPI/store";
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
|
||||
const $q = useQuasar();
|
||||
const store = useKpiDataStore();
|
||||
const { showLoader, hideLoader, messageError, dialogConfirm, success } =
|
||||
useCounterMixin();
|
||||
|
||||
const props = defineProps({
|
||||
fetchList: { type: Function, required: true },
|
||||
});
|
||||
|
||||
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();
|
||||
console.log(rows.value);
|
||||
|
||||
const formData = rows.value.map((e: any) => ({
|
||||
id: e.id,
|
||||
point: e.point,
|
||||
summary: ((e.point / 5) * e.weight).toFixed(2),
|
||||
}));
|
||||
|
||||
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).then((res) => {
|
||||
props.fetchList();
|
||||
});
|
||||
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-btn-group outline>
|
||||
<q-btn
|
||||
v-for="i in 5"
|
||||
:class="props.row.point == i && 'active'"
|
||||
outline
|
||||
color="grey-6"
|
||||
:label="i"
|
||||
@click="
|
||||
() => {
|
||||
updateAchievement(props.rowIndex, props.row);
|
||||
props.row.point = i;
|
||||
}
|
||||
"
|
||||
>
|
||||
<q-tooltip>
|
||||
<div class="text-body2">
|
||||
<span v-html="props.row[`achievement${i}`]"></span>
|
||||
</div>
|
||||
</q-tooltip>
|
||||
</q-btn>
|
||||
</q-btn-group>
|
||||
|
||||
<!-- <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;
|
||||
}
|
||||
}
|
||||
.q-btn-group--outline > .q-btn-item:not(:last-child):before {
|
||||
border-right: 1px solid #c4c4c4;
|
||||
}
|
||||
.q-btn-group--outline > .q-btn-item.active {
|
||||
color: #2196f3 !important;
|
||||
background-color: #cde6fb !important;
|
||||
}
|
||||
.q-btn-group--outline > .q-btn-item + .q-btn-item.active:before {
|
||||
border-left: 1px solid #2196f3 !important;
|
||||
background-color: #cde6fb;
|
||||
}
|
||||
.q-btn-group--outline > .q-btn-item.active:not(:last-child):before {
|
||||
border: 1px solid #2196f3;
|
||||
background-color: #cde6fb;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,296 @@
|
|||
<script setup lang="ts">
|
||||
import { ref, watch, computed } from "vue";
|
||||
|
||||
import DialogHeader from "@/components/DialogHeader.vue";
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
import { useKpiDataStore } from "@/modules/14_KPI/store";
|
||||
|
||||
import { useQuasar, type QTableProps } from "quasar";
|
||||
import http from "@/plugins/http";
|
||||
import config from "@/app.config";
|
||||
|
||||
import type { ListCriteria } from "@/modules/14_KPI/interface/request/index";
|
||||
|
||||
const dataListCriteria = defineModel<ListCriteria[]>("dataListCriteria", {
|
||||
required: true,
|
||||
});
|
||||
|
||||
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,
|
||||
summary: i.point * 20,
|
||||
}));
|
||||
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>
|
||||
<q-btn-group outline>
|
||||
<q-btn
|
||||
v-for="(i, index) in sortedDataListCriteria"
|
||||
:key="index"
|
||||
:class="props.row.point == i.level && 'active'"
|
||||
outline
|
||||
color="grey-6"
|
||||
:label="i.level"
|
||||
@click="props.row.point = i.level"
|
||||
>
|
||||
<q-tooltip>
|
||||
<div class="text-body2">
|
||||
<span v-html="i.description"></span>
|
||||
</div>
|
||||
</q-tooltip>
|
||||
</q-btn>
|
||||
</q-btn-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>
|
||||
<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;
|
||||
}
|
||||
}
|
||||
.q-btn-group--outline > .q-btn-item:not(:last-child):before {
|
||||
border-right: 1px solid #c4c4c4;
|
||||
}
|
||||
.q-btn-group--outline > .q-btn-item.active {
|
||||
color: #2196f3 !important;
|
||||
background-color: #cde6fb !important;
|
||||
}
|
||||
.q-btn-group--outline > .q-btn-item + .q-btn-item.active:before {
|
||||
border-left: 1px solid #2196f3 !important;
|
||||
background-color: #cde6fb;
|
||||
}
|
||||
.q-btn-group--outline > .q-btn-item.active:not(:last-child):before {
|
||||
border: 1px solid #2196f3;
|
||||
background-color: #cde6fb;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,277 @@
|
|||
<script setup lang="ts">
|
||||
import DialogHeader from "@/components/DialogHeader.vue";
|
||||
import http from "@/plugins/http";
|
||||
import config from "@/app.config";
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
import { useQuasar, type QTableProps } from "quasar";
|
||||
import { ref } from "vue";
|
||||
|
||||
const props = defineProps({
|
||||
getAll: Function,
|
||||
});
|
||||
|
||||
const $q = useQuasar();
|
||||
const mixin = useCounterMixin();
|
||||
const {
|
||||
dialogConfirm,
|
||||
showLoader,
|
||||
hideLoader,
|
||||
success,
|
||||
messageError,
|
||||
dialogMessageNotify,
|
||||
} = mixin;
|
||||
|
||||
const modal = defineModel<boolean>("modal", { required: true });
|
||||
const rows = defineModel<any[]>("data", { required: true });
|
||||
const summary = ref<number | null>(null);
|
||||
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: "develop",
|
||||
align: "left",
|
||||
label: "วิธีการพัฒนา",
|
||||
sortable: true,
|
||||
field: "develop",
|
||||
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: "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: "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 onSubmit() {
|
||||
const data = rows.value.map((i: any) => ({
|
||||
id: i.id,
|
||||
point: i.summary,
|
||||
summary: i.summary,
|
||||
}));
|
||||
showLoader();
|
||||
http
|
||||
.post(config.API.kpiAchievementDevelop + `/point`, data)
|
||||
.then((res) => {
|
||||
success($q, "บันทึกข้อมลสำเร็จ");
|
||||
close();
|
||||
})
|
||||
.catch((e) => {
|
||||
messageError($q, e);
|
||||
})
|
||||
.finally(() => {
|
||||
hideLoader();
|
||||
});
|
||||
}
|
||||
|
||||
function close() {
|
||||
modal.value = false;
|
||||
rows.value = [];
|
||||
props.getAll?.();
|
||||
}
|
||||
</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="close" />
|
||||
<q-separator />
|
||||
<q-card-section 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"
|
||||
: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"
|
||||
class="vertical-top"
|
||||
>
|
||||
<div v-if="col.name == 'develop'">
|
||||
<div class="column">
|
||||
<q-checkbox
|
||||
size="xs"
|
||||
:model-value="props.row.isDevelopment70"
|
||||
label="70 การลงมือปฏิบัติ (โดยผู้บังคับบัญชามอบหมาย)"
|
||||
/>
|
||||
<q-checkbox
|
||||
size="xs"
|
||||
:model-value="props.row.isDevelopment20"
|
||||
label="20 การเรียนรู้จากผู้อื่น (Coach/Mentor/Consulting)"
|
||||
/>
|
||||
<q-checkbox
|
||||
size="xs"
|
||||
:model-value="props.row.isDevelopment10"
|
||||
label="10 การฝึกอบรมอื่นๆ"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else-if="col.name === 'summary'">
|
||||
{{ props.row.summary ? props.row.summary : 0 }}
|
||||
</div>
|
||||
|
||||
<div v-else-if="col.name == 'achievement'">
|
||||
<q-btn-group outline>
|
||||
<q-btn
|
||||
outline
|
||||
color="grey-6"
|
||||
label="0"
|
||||
:class="props.row.summary == 0 && 'active'"
|
||||
@click="props.row.summary = 0"
|
||||
><q-tooltip>{{
|
||||
props.row.achievement0
|
||||
}}</q-tooltip></q-btn
|
||||
>
|
||||
<q-btn
|
||||
outline
|
||||
color="grey-6"
|
||||
label="5"
|
||||
:class="props.row.summary == 5 && 'active'"
|
||||
@click="props.row.summary = 5"
|
||||
><q-tooltip>{{
|
||||
props.row.achievement5
|
||||
}}</q-tooltip></q-btn
|
||||
>
|
||||
<q-btn
|
||||
outline
|
||||
color="grey-6"
|
||||
label="10"
|
||||
:class="props.row.summary == 10 && 'active'"
|
||||
@click="props.row.summary = 10"
|
||||
><q-tooltip>{{
|
||||
props.row.achievement10
|
||||
}}</q-tooltip></q-btn
|
||||
>
|
||||
</q-btn-group>
|
||||
</div>
|
||||
<div v-else>
|
||||
{{ col.value ? col.value : "-" }}
|
||||
</div>
|
||||
</q-td>
|
||||
</q-tr>
|
||||
</template>
|
||||
</q-table>
|
||||
</div>
|
||||
</q-card-section>
|
||||
<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>
|
||||
.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;
|
||||
}
|
||||
}
|
||||
.q-btn-group--outline > .q-btn-item:not(:last-child):before {
|
||||
border-right: 1px solid #c4c4c4;
|
||||
}
|
||||
.q-btn-group--outline > .q-btn-item.active {
|
||||
color: #2196f3 !important;
|
||||
background-color: #fff;
|
||||
}
|
||||
.q-btn-group--outline > .q-btn-item.active:not(:last-child):before {
|
||||
border: 1px solid #2196f3;
|
||||
}
|
||||
</style>
|
||||
107
src/modules/14_KPI/components/Tab/TabMain.vue
Normal file
107
src/modules/14_KPI/components/Tab/TabMain.vue
Normal file
|
|
@ -0,0 +1,107 @@
|
|||
<script setup lang="ts">
|
||||
import { ref } from "vue";
|
||||
import { useKpiDataStore } from "@/modules/14_KPI/store";
|
||||
import { useRoute } from "vue-router";
|
||||
|
||||
import Assessment from "@/modules/14_KPI/components/Tab/01_Assessment.vue";
|
||||
import Evaluator from "@/modules/14_KPI/components/Tab/02_Evaluator.vue";
|
||||
import CommanderAbove from "@/modules/14_KPI/components/Tab/03_CommanderAbove.vue";
|
||||
import CommanderAboveOneStep from "@/modules/14_KPI/components/Tab/04_CommanderAboveOneStep.vue";
|
||||
import File from "@/modules/14_KPI/components/Tab/05_File.vue";
|
||||
|
||||
const store = useKpiDataStore();
|
||||
const route = useRoute();
|
||||
|
||||
const itemsTab = ref<any>([
|
||||
{
|
||||
name: "1",
|
||||
label: "จัดทำแบบฟอร์มการประเมิน",
|
||||
},
|
||||
{
|
||||
name: "2",
|
||||
label: "รายงานความก้าวหน้า",
|
||||
},
|
||||
{
|
||||
name: "3",
|
||||
label: "รายงานผลสำเร็จของงาน",
|
||||
},
|
||||
{
|
||||
name: "5",
|
||||
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
|
||||
class="hover-tab"
|
||||
v-for="(tab, index) in itemsTab"
|
||||
:key="index"
|
||||
:name="tab.name"
|
||||
:icon="tab.icon"
|
||||
:label="tab.label"
|
||||
/> -->
|
||||
<q-tab name="1" label="จัดทำข้อตกลง" />
|
||||
<q-tab
|
||||
name="2"
|
||||
label="รายงานความก้าวหน้า"
|
||||
:disable="store.tabOpen < 2"
|
||||
/>
|
||||
<q-tab
|
||||
name="3"
|
||||
label="รายงานผลสำเร็จของงาน"
|
||||
:disable="store.tabOpen < 3"
|
||||
/>
|
||||
<!-- <q-tab name="3" label="ผู้บังคับบัญชา">
|
||||
<div class="text-caption">เหนือขึ้นไป</div>
|
||||
</q-tab>
|
||||
<q-tab name="4" label="ผู้บังคับบัญชา">
|
||||
<div class="text-caption">เหนือขึ้นไปอีกชั้นหนึ่ง</div>
|
||||
</q-tab> -->
|
||||
<q-tab name="5" 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'" />
|
||||
<Assessment v-if="store.tabMain === '2'" :type="'evaluator'" />
|
||||
<Assessment v-if="store.tabMain === '3'" :type="'commander'" />
|
||||
<Assessment v-if="store.tabMain === '4'" :type="'commanderHigh'" />
|
||||
<File v-if="store.tabMain === '5'" />
|
||||
</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>
|
||||
534
src/modules/14_KPI/components/Tab/Topic/01_Indicator.vue
Normal file
534
src/modules/14_KPI/components/Tab/Topic/01_Indicator.vue
Normal file
|
|
@ -0,0 +1,534 @@
|
|||
<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/Tab/Dialog/01_FormIndicator.vue";
|
||||
// import Dialog03 from "@/modules/14_KPI/components/Tab/Dialog/03_FormIndicatorSpecial.vue";
|
||||
import DialogEvaluate from "@/modules/14_KPI/components/Tab/DialogEvaluate/01_Indicator.vue";
|
||||
import DialogViewInfo from "@/modules/14_KPI/components/Tab/Dialog/DialogViewInfo.vue";
|
||||
import DialogProgress from "@/modules/14_KPI/components/Tab/Dialog/DialogCommentProgress.vue";
|
||||
import DialogProblem from "@/modules/14_KPI/components/Tab/Dialog/DialogCommentProblem.vue";
|
||||
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
import { useKpiDataStore } from "@/modules/14_KPI/store";
|
||||
|
||||
const $q = useQuasar();
|
||||
const store = useKpiDataStore();
|
||||
const route = useRoute();
|
||||
const {
|
||||
date2Thai,
|
||||
dialogRemove,
|
||||
showLoader,
|
||||
hideLoader,
|
||||
messageError,
|
||||
success,
|
||||
} = useCounterMixin();
|
||||
|
||||
const title = defineModel<string>("title", { required: true });
|
||||
const rows = defineModel<any>("data", { required: true });
|
||||
const numpage = defineModel<number>("page", { required: true });
|
||||
|
||||
const props = defineProps({
|
||||
fetchList: { type: Function, required: true },
|
||||
});
|
||||
|
||||
const visibleColumns = ref<string[]>(
|
||||
store.tabOpen === 3 && store.tabMain === "3"
|
||||
? [
|
||||
"includingName",
|
||||
"target",
|
||||
"point",
|
||||
"weight",
|
||||
"achievement",
|
||||
"evaluationResults",
|
||||
]
|
||||
: ["includingName", "target", "weight"]
|
||||
);
|
||||
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);
|
||||
const modalViewInfo = 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 onClickView(id: string) {
|
||||
kpiUserPlannedId.value = id;
|
||||
modalViewInfo.value = true;
|
||||
}
|
||||
|
||||
async 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();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
const modalProgress = ref<boolean>(false);
|
||||
const modalProblem = ref<boolean>(false);
|
||||
const type = ref<string>("");
|
||||
const idList = ref<string>("");
|
||||
function openPopupProgress(id: string) {
|
||||
modalProgress.value = true;
|
||||
type.value =
|
||||
numpage.value === 1 ? "plan" : numpage.value === 2 ? "role" : "special";
|
||||
idList.value = id;
|
||||
}
|
||||
|
||||
function openPopupProblem(id: string) {
|
||||
modalProblem.value = true;
|
||||
|
||||
type.value =
|
||||
numpage.value === 1 ? "plan" : numpage.value === 2 ? "role" : "special";
|
||||
idList.value = id;
|
||||
}
|
||||
|
||||
watch(
|
||||
() => modal.value,
|
||||
() => {
|
||||
if (!modal.value) {
|
||||
props.fetchList?.();
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
const isEditStep1 = computed(() => {
|
||||
return (
|
||||
(store.dataEvaluation.evaluationStatus === "NEW" &&
|
||||
store.rolePerson === "USER" &&
|
||||
store.tabMain === "1") ||
|
||||
(store.dataEvaluation.evaluationStatus === "NEW_EVALUATOR" &&
|
||||
store.rolePerson === "EVALUATOR" &&
|
||||
store.tabMain === "1")
|
||||
);
|
||||
});
|
||||
|
||||
const isEditStep3 = computed(() => {
|
||||
return (
|
||||
(store.dataEvaluation.evaluationStatus === "EVALUATING" &&
|
||||
store.rolePerson === "USER" &&
|
||||
store.tabMain === "3") ||
|
||||
(store.dataEvaluation.evaluationStatus === "EVALUATING_EVALUATOR" &&
|
||||
store.rolePerson === "EVALUATOR" &&
|
||||
store.tabMain === "3")
|
||||
);
|
||||
});
|
||||
|
||||
// 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="isEditStep1"
|
||||
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="isEditStep3"
|
||||
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 auto-width />
|
||||
<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>
|
||||
<q-btn
|
||||
flat
|
||||
round
|
||||
icon="info"
|
||||
color="info"
|
||||
size="12px"
|
||||
dense
|
||||
@click="onClickView(props.row.id)"
|
||||
>
|
||||
<q-tooltip>คำอธิบายผลสำเร็จของงาน</q-tooltip>
|
||||
</q-btn></q-td
|
||||
>
|
||||
<q-td v-for="col in props.cols" :key="col.id">
|
||||
<div v-if="col.name === 'point'">
|
||||
<q-btn-group outline>
|
||||
<q-btn
|
||||
v-for="i in 5"
|
||||
:class="props.row.point == i && 'active'"
|
||||
outline
|
||||
color="grey-6"
|
||||
:label="i"
|
||||
>
|
||||
<q-tooltip>
|
||||
<div class="text-body2">
|
||||
<span v-html="props.row[`achievement${i}`]"></span>
|
||||
</div>
|
||||
</q-tooltip>
|
||||
</q-btn>
|
||||
</q-btn-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>{{ 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>
|
||||
<div
|
||||
v-if="
|
||||
store.dataEvaluation.evaluationStatus == 'APPROVE' &&
|
||||
store.tabMain === '2'
|
||||
"
|
||||
>
|
||||
<q-btn
|
||||
flat
|
||||
round
|
||||
icon="mdi-developer-board"
|
||||
color="blue-6"
|
||||
size="12px"
|
||||
dense
|
||||
@click="openPopupProgress(props.row.id)"
|
||||
>
|
||||
<q-tooltip>รายงานความก้าวหน้า</q-tooltip>
|
||||
</q-btn>
|
||||
<q-btn
|
||||
flat
|
||||
round
|
||||
icon="warning"
|
||||
color="red-5"
|
||||
size="12px"
|
||||
dense
|
||||
main="problem"
|
||||
@click="openPopupProblem(props.row.id)"
|
||||
>
|
||||
<q-tooltip>รายงานปัญหา</q-tooltip>
|
||||
</q-btn>
|
||||
</div>
|
||||
|
||||
<div v-if="isEditStep1">
|
||||
<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>
|
||||
</div>
|
||||
</td>
|
||||
</q-tr>
|
||||
</template>
|
||||
</q-table>
|
||||
</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"
|
||||
:fetchList="fetchList"
|
||||
/>
|
||||
|
||||
<DialogViewInfo
|
||||
v-model:modal="modalViewInfo"
|
||||
:numpage="numpage"
|
||||
:isStatusEdit="isStatusEdit"
|
||||
:kpiUserPlannedId="kpiUserPlannedId"
|
||||
/>
|
||||
|
||||
<DialogProgress
|
||||
v-model:modal="modalProgress"
|
||||
v-model:type="type"
|
||||
:idList="idList"
|
||||
/>
|
||||
<DialogProblem
|
||||
v-model:modal="modalProblem"
|
||||
v-model:type="type"
|
||||
:idList="idList"
|
||||
/>
|
||||
</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;
|
||||
}
|
||||
}
|
||||
.q-btn-group--outline > .q-btn-item:not(:last-child):before {
|
||||
border-right: 1px solid #c4c4c4;
|
||||
}
|
||||
.q-btn-group--outline > .q-btn-item.active {
|
||||
color: #2196f3 !important;
|
||||
background-color: #cde6fb !important;
|
||||
}
|
||||
.q-btn-group--outline > .q-btn-item + .q-btn-item.active:before {
|
||||
border-left: 1px solid #2196f3 !important;
|
||||
background-color: #cde6fb;
|
||||
}
|
||||
.q-btn-group--outline > .q-btn-item.active:not(:last-child):before {
|
||||
border: 1px solid #2196f3;
|
||||
background-color: #cde6fb;
|
||||
}
|
||||
</style>
|
||||
529
src/modules/14_KPI/components/Tab/Topic/02_Competency.vue
Normal file
529
src/modules/14_KPI/components/Tab/Topic/02_Competency.vue
Normal file
|
|
@ -0,0 +1,529 @@
|
|||
<script setup lang="ts">
|
||||
import { onMounted, ref, computed, watch } from "vue";
|
||||
import Dialog from "@/modules/14_KPI/components/Tab/Dialog/04_FormCompetency.vue";
|
||||
import DialogEvaluate from "@/modules/14_KPI/components/Tab/DialogEvaluate/02_Competenct.vue";
|
||||
import DialogProgress from "@/modules/14_KPI/components/Tab/Dialog/DialogCommentProgress.vue";
|
||||
import DialogProblem from "@/modules/14_KPI/components/Tab/Dialog/DialogCommentProblem.vue";
|
||||
|
||||
import { useQuasar, type QTableProps } from "quasar";
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
import { useKpiDataStore } from "@/modules/14_KPI/store";
|
||||
import http from "@/plugins/http";
|
||||
import config from "@/app.config";
|
||||
import { useRoute } from "vue-router";
|
||||
|
||||
import type {
|
||||
FormCapacityList,
|
||||
ListCriteria,
|
||||
} from "@/modules/14_KPI/interface/request/index";
|
||||
|
||||
const dataListCriteria = defineModel<ListCriteria[]>("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 === "KPIEditEvaluator" ? 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 visibleColumns = ref<string[]>(
|
||||
store.tabOpen === 3 && store.tabMain === "3"
|
||||
? ["name", "level", "point", "weight", "summary"]
|
||||
: ["name", "level", "weight"]
|
||||
);
|
||||
|
||||
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) {
|
||||
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;
|
||||
|
||||
if (store.dataEvaluation.posExecutiveName != null) {
|
||||
store.competencyScoreVal =
|
||||
weightAvg != 0
|
||||
? (resultAvg / weightAvg) * store.excusiveCompetencyScore
|
||||
: 0;
|
||||
} else {
|
||||
store.competencyScoreVal =
|
||||
weightAvg != 0
|
||||
? (resultAvg / weightAvg) * store.competencyScore
|
||||
: 0;
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function onEdit(data: FormCapacityList, 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;
|
||||
}
|
||||
|
||||
const modalProgress = ref<boolean>(false);
|
||||
const modalProblem = ref<boolean>(false);
|
||||
const type = ref<string>("");
|
||||
const idList = ref<string>("");
|
||||
function openPopupProgress(id: string) {
|
||||
modalProgress.value = true;
|
||||
type.value = "capacity";
|
||||
idList.value = id;
|
||||
}
|
||||
|
||||
function openPopupProblem(id: string) {
|
||||
modalProblem.value = true;
|
||||
type.value = "capacity";
|
||||
idList.value = id;
|
||||
}
|
||||
|
||||
const isEditStep1 = computed(() => {
|
||||
return (
|
||||
(store.dataEvaluation.evaluationStatus === "NEW" &&
|
||||
store.rolePerson === "USER" &&
|
||||
store.tabMain === "1") ||
|
||||
(store.dataEvaluation.evaluationStatus === "NEW_EVALUATOR" &&
|
||||
store.rolePerson === "EVALUATOR" &&
|
||||
store.tabMain === "1")
|
||||
);
|
||||
});
|
||||
|
||||
const isEditStep3 = computed(() => {
|
||||
return (
|
||||
(store.dataEvaluation.evaluationStatus === "EVALUATING" &&
|
||||
store.rolePerson === "USER" &&
|
||||
store.tabMain === "3") ||
|
||||
(store.dataEvaluation.evaluationStatus === "EVALUATING_EVALUATOR" &&
|
||||
store.rolePerson === "EVALUATOR" &&
|
||||
store.tabMain === "3")
|
||||
);
|
||||
});
|
||||
|
||||
watch(
|
||||
() => store.dataEvaluation.capacityPoint,
|
||||
(newValue, oldValue) => {
|
||||
if (newValue !== oldValue) {
|
||||
for (let index = 0; index < store.competencyType.length; index++) {
|
||||
const element = store.competencyType[index];
|
||||
getData(element.id);
|
||||
}
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
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="isEditStep1"
|
||||
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="isEditStep3"
|
||||
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="ไม่มีข้อมูล"
|
||||
:visible-columns="visibleColumns"
|
||||
>
|
||||
<template v-slot:header="props">
|
||||
<q-tr :props="props">
|
||||
<q-th v-for="col in props.cols" :key="col.name" :props="props">
|
||||
<span class="text-weight-medium">{{ col.label }}</span>
|
||||
</q-th>
|
||||
<q-th auto-width />
|
||||
</q-tr>
|
||||
</template>
|
||||
<template v-slot:body="props">
|
||||
<q-tr :props="props" class="cursor-pointer">
|
||||
<q-td v-for="col in props.cols" :key="col.id">
|
||||
<div v-if="col.name == 'createDate'">
|
||||
{{ col.value ? date2Thai(col.value) : "-" }}
|
||||
</div>
|
||||
<div v-else-if="col.name == 'point'">
|
||||
<div>
|
||||
<q-btn-group outline>
|
||||
<q-btn
|
||||
v-for="(i, index) in sortedDataListCriteria"
|
||||
:key="index"
|
||||
:class="props.row.point == i.level && 'active'"
|
||||
outline
|
||||
color="grey-6"
|
||||
:label="i.level"
|
||||
>
|
||||
<q-tooltip>
|
||||
<div class="text-body2">
|
||||
<span v-html="i.description"></span>
|
||||
</div>
|
||||
</q-tooltip>
|
||||
</q-btn>
|
||||
</q-btn-group>
|
||||
<!-- <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>
|
||||
<div
|
||||
v-if="
|
||||
store.dataEvaluation.evaluationStatus == 'APPROVE' &&
|
||||
store.tabMain === '2'
|
||||
"
|
||||
>
|
||||
<q-btn
|
||||
flat
|
||||
round
|
||||
icon="mdi-developer-board"
|
||||
color="blue-6"
|
||||
size="12px"
|
||||
dense
|
||||
@click="openPopupProgress(props.row.id)"
|
||||
>
|
||||
<q-tooltip>รายงานความก้าวหน้า</q-tooltip>
|
||||
</q-btn>
|
||||
<q-btn
|
||||
flat
|
||||
round
|
||||
icon="warning"
|
||||
color="red-5"
|
||||
size="12px"
|
||||
dense
|
||||
main="problem"
|
||||
@click="openPopupProblem(props.row.id)"
|
||||
>
|
||||
<q-tooltip>รายงานปัญหา</q-tooltip>
|
||||
</q-btn>
|
||||
</div>
|
||||
|
||||
<div v-if="isEditStep1">
|
||||
<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>
|
||||
</div>
|
||||
</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"
|
||||
/>
|
||||
|
||||
<DialogProgress
|
||||
v-model:modal="modalProgress"
|
||||
v-model:type="type"
|
||||
:idList="idList"
|
||||
/>
|
||||
<DialogProblem
|
||||
v-model:modal="modalProblem"
|
||||
v-model:type="type"
|
||||
:idList="idList"
|
||||
/>
|
||||
</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;
|
||||
}
|
||||
}
|
||||
.q-btn-group--outline > .q-btn-item:not(:last-child):before {
|
||||
border-right: 1px solid #c4c4c4;
|
||||
}
|
||||
.q-btn-group--outline > .q-btn-item.active {
|
||||
color: #2196f3 !important;
|
||||
background-color: #cde6fb !important;
|
||||
}
|
||||
.q-btn-group--outline > .q-btn-item + .q-btn-item.active:before {
|
||||
border-left: 1px solid #2196f3 !important;
|
||||
background-color: #cde6fb;
|
||||
}
|
||||
.q-btn-group--outline > .q-btn-item.active:not(:last-child):before {
|
||||
border: 1px solid #2196f3;
|
||||
background-color: #cde6fb;
|
||||
}
|
||||
</style>
|
||||
449
src/modules/14_KPI/components/Tab/Topic/03_Develop.vue
Normal file
449
src/modules/14_KPI/components/Tab/Topic/03_Develop.vue
Normal file
|
|
@ -0,0 +1,449 @@
|
|||
<script setup lang="ts">
|
||||
import { onMounted, ref, computed, watch, reactive } from "vue";
|
||||
import DialogDevelop from "@/modules/14_KPI/components/Tab/Dialog/DialogDevelop.vue";
|
||||
import DialogEvalutionDevelop from "@/modules/14_KPI/components/Tab/DialogEvaluate/03_DialogEvalutionDevelop.vue";
|
||||
import DialogProgress from "@/modules/14_KPI/components/Tab/Dialog/DialogCommentProgress.vue";
|
||||
import DialogProblem from "@/modules/14_KPI/components/Tab/Dialog/DialogCommentProblem.vue";
|
||||
|
||||
import { useQuasar, type QTableProps } from "quasar";
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
import { useKpiDataStore } from "@/modules/14_KPI/store";
|
||||
import http from "@/plugins/http";
|
||||
import config from "@/app.config";
|
||||
import { useRoute } from "vue-router";
|
||||
|
||||
const store = useKpiDataStore();
|
||||
const route = useRoute();
|
||||
const evaluationId = ref<string>(route.params.id.toString());
|
||||
const modalEvaluate = ref<boolean>(false);
|
||||
|
||||
const rows = ref<any[]>([]);
|
||||
const modalDevelop = ref<boolean>(false);
|
||||
const idEditDevelop = ref<string>("");
|
||||
|
||||
const $q = useQuasar();
|
||||
const mixin = useCounterMixin();
|
||||
const {
|
||||
date2Thai,
|
||||
messageError,
|
||||
showLoader,
|
||||
hideLoader,
|
||||
dialogRemove,
|
||||
success,
|
||||
} = mixin;
|
||||
|
||||
const formData = reactive({
|
||||
isDevelopment70: false,
|
||||
isDevelopment20: false,
|
||||
isDevelopment10: 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: "develop",
|
||||
align: "left",
|
||||
label: "วิธีการพัฒนา",
|
||||
sortable: true,
|
||||
field: "develop",
|
||||
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: "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: "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 visibleColumns = ref<string[]>(
|
||||
store.tabOpen === 3 && store.tabMain === "3"
|
||||
? ["name", "develop", "target", "achievement", "summary"]
|
||||
: ["name", "develop", "target"]
|
||||
);
|
||||
|
||||
function onAdd() {
|
||||
modalDevelop.value = true;
|
||||
}
|
||||
|
||||
function onEdit(id: string) {
|
||||
modalDevelop.value = true;
|
||||
idEditDevelop.value = id;
|
||||
}
|
||||
|
||||
function getDevelop() {
|
||||
http
|
||||
.get(config.API.kpiAchievementDevelop + `?id=${evaluationId.value}`)
|
||||
.then((res) => {
|
||||
const data = res.data.result;
|
||||
rows.value = data;
|
||||
|
||||
store.devScoreVal = rows.value.reduce(
|
||||
(sum: number, e: any) => sum + e.summary,
|
||||
0
|
||||
);
|
||||
});
|
||||
}
|
||||
|
||||
function onEvaluate() {
|
||||
modalEvaluate.value = true;
|
||||
}
|
||||
|
||||
function onDelete(id: string) {
|
||||
dialogRemove($q, () => {
|
||||
showLoader();
|
||||
http
|
||||
.delete(config.API.kpiAchievementDevelop + `/${id}`)
|
||||
.then((res) => {
|
||||
success($q, "ลบข้อมูลสำเร็จ");
|
||||
getDevelop();
|
||||
})
|
||||
.catch((e) => {
|
||||
messageError($q, e);
|
||||
})
|
||||
.finally(() => {
|
||||
hideLoader();
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
const modalProgress = ref<boolean>(false);
|
||||
const modalProblem = ref<boolean>(false);
|
||||
const type = ref<string>("");
|
||||
const idList = ref<string>("");
|
||||
function openPopupProgress(id: string) {
|
||||
modalProgress.value = true;
|
||||
type.value = "development";
|
||||
idList.value = id;
|
||||
}
|
||||
|
||||
function openPopupProblem(id: string) {
|
||||
modalProblem.value = true;
|
||||
|
||||
type.value = "development";
|
||||
idList.value = id;
|
||||
}
|
||||
|
||||
const isEditStep1 = computed(() => {
|
||||
return (
|
||||
(store.dataEvaluation.evaluationStatus === "NEW" &&
|
||||
store.rolePerson === "USER" &&
|
||||
store.tabMain === "1") ||
|
||||
(store.dataEvaluation.evaluationStatus === "NEW_EVALUATOR" &&
|
||||
store.rolePerson === "EVALUATOR" &&
|
||||
store.tabMain === "1")
|
||||
);
|
||||
});
|
||||
|
||||
const isEditStep3 = computed(() => {
|
||||
return (
|
||||
(store.dataEvaluation.evaluationStatus === "EVALUATING" &&
|
||||
store.rolePerson === "USER" &&
|
||||
store.tabMain === "3") ||
|
||||
(store.dataEvaluation.evaluationStatus === "EVALUATING_EVALUATOR" &&
|
||||
store.rolePerson === "EVALUATOR" &&
|
||||
store.tabMain === "3")
|
||||
);
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
getDevelop();
|
||||
});
|
||||
</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">การพัฒนาตนเอง</span>
|
||||
<q-btn
|
||||
v-if="isEditStep1"
|
||||
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
|
||||
v-if="isEditStep3"
|
||||
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"
|
||||
row-key="id"
|
||||
flat
|
||||
bordered
|
||||
:paging="true"
|
||||
dense
|
||||
hide-pagination
|
||||
class="custom-table2"
|
||||
no-data-label="ไม่มีข้อมูล"
|
||||
:visible-columns="visibleColumns"
|
||||
>
|
||||
<template v-slot:header="props">
|
||||
<q-tr :props="props">
|
||||
<q-th v-for="col in props.cols" :key="col.name" :props="props">
|
||||
<span class="text-weight-medium">{{ col.label }}</span>
|
||||
</q-th>
|
||||
<q-th auto-width />
|
||||
</q-tr>
|
||||
</template>
|
||||
<template v-slot:body="props">
|
||||
<q-tr :props="props" class="cursor-pointer">
|
||||
<q-td v-for="col in props.cols" :key="col.id" class="vertical-top">
|
||||
<div v-if="col.name == 'createDate'">
|
||||
{{ col.value ? date2Thai(col.value) : "-" }}
|
||||
</div>
|
||||
|
||||
<div v-else-if="col.name == 'develop'">
|
||||
<div class="column">
|
||||
<q-checkbox
|
||||
size="xs"
|
||||
:model-value="props.row.isDevelopment70"
|
||||
label="70 การลงมือปฏิบัติ (โดยผู้บังคับบัญชามอบหมาย)"
|
||||
/>
|
||||
<q-checkbox
|
||||
size="xs"
|
||||
:model-value="props.row.isDevelopment20"
|
||||
label="20 การเรียนรู้จากผู้อื่น (Coach/Mentor/Consulting)"
|
||||
/>
|
||||
<q-checkbox
|
||||
size="xs"
|
||||
:model-value="props.row.isDevelopment10"
|
||||
label="10 การฝึกอบรมอื่นๆ"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else-if="col.name == 'achievement'">
|
||||
<q-btn-group outline>
|
||||
<q-btn
|
||||
outline
|
||||
color="grey-6"
|
||||
label="0"
|
||||
:class="props.row.summary == 0 && 'active'"
|
||||
><q-tooltip>{{ props.row.achievement0 }}</q-tooltip></q-btn
|
||||
>
|
||||
<q-btn
|
||||
outline
|
||||
color="grey-6"
|
||||
label="5"
|
||||
:class="props.row.summary == 5 && 'active'"
|
||||
><q-tooltip>{{ props.row.achievement5 }}</q-tooltip></q-btn
|
||||
>
|
||||
<q-btn
|
||||
outline
|
||||
color="grey-6"
|
||||
label="10"
|
||||
:class="props.row.summary == 10 && 'active'"
|
||||
><q-tooltip>{{ props.row.achievement10 }}</q-tooltip></q-btn
|
||||
>
|
||||
</q-btn-group>
|
||||
</div>
|
||||
<div v-else-if="col.name === 'summary'">
|
||||
{{ props.row.summary ? props.row.summary : 0 }}
|
||||
</div>
|
||||
<div v-else>
|
||||
{{ col.value ? col.value : "-" }}
|
||||
</div>
|
||||
</q-td>
|
||||
<q-td>
|
||||
<div
|
||||
v-if="
|
||||
store.dataEvaluation.evaluationStatus == 'APPROVE' &&
|
||||
store.tabMain === '2'
|
||||
"
|
||||
>
|
||||
<q-btn
|
||||
flat
|
||||
round
|
||||
icon="mdi-developer-board"
|
||||
color="blue-6"
|
||||
size="12px"
|
||||
dense
|
||||
@click="openPopupProgress(props.row.id)"
|
||||
>
|
||||
<q-tooltip>รายงานความก้าวหน้า</q-tooltip>
|
||||
</q-btn>
|
||||
<q-btn
|
||||
flat
|
||||
round
|
||||
icon="warning"
|
||||
color="red-5"
|
||||
size="12px"
|
||||
dense
|
||||
main="problem"
|
||||
@click="openPopupProblem(props.row.id)"
|
||||
>
|
||||
<q-tooltip>รายงานปัญหา</q-tooltip>
|
||||
</q-btn>
|
||||
</div>
|
||||
|
||||
<div v-if="isEditStep1">
|
||||
<q-btn
|
||||
flat
|
||||
round
|
||||
icon="edit"
|
||||
color="edit"
|
||||
@click.stop.pervent="onEdit(props.row.id)"
|
||||
>
|
||||
<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>
|
||||
</div>
|
||||
</q-td>
|
||||
</q-tr>
|
||||
</template>
|
||||
</q-table>
|
||||
</q-card-section>
|
||||
</q-card>
|
||||
|
||||
<DialogDevelop
|
||||
v-model:modal="modalDevelop"
|
||||
v-model:id="idEditDevelop"
|
||||
:get-all="getDevelop"
|
||||
/>
|
||||
|
||||
<DialogEvalutionDevelop
|
||||
v-model:modal="modalEvaluate"
|
||||
v-model:data="rows"
|
||||
:get-all="getDevelop"
|
||||
/>
|
||||
|
||||
<DialogProgress
|
||||
v-model:modal="modalProgress"
|
||||
v-model:type="type"
|
||||
:idList="idList"
|
||||
/>
|
||||
<DialogProblem
|
||||
v-model:modal="modalProblem"
|
||||
v-model:type="type"
|
||||
:idList="idList"
|
||||
/>
|
||||
</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;
|
||||
}
|
||||
}
|
||||
.q-btn-group--outline > .q-btn-item:not(:last-child):before {
|
||||
border-right: 1px solid #c4c4c4;
|
||||
}
|
||||
.q-btn-group--outline > .q-btn-item.active {
|
||||
color: #2196f3 !important;
|
||||
background-color: #cde6fb !important;
|
||||
}
|
||||
.q-btn-group--outline > .q-btn-item + .q-btn-item.active:before {
|
||||
border-left: 1px solid #2196f3 !important;
|
||||
background-color: #cde6fb;
|
||||
}
|
||||
.q-btn-group--outline > .q-btn-item.active:not(:last-child):before {
|
||||
border: 1px solid #2196f3;
|
||||
background-color: #cde6fb;
|
||||
}
|
||||
</style>
|
||||
Loading…
Add table
Add a link
Reference in a new issue