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

Refactoring code module 08_KPI

Browse source
This commit is contained in:
STW_TTTY\stwtt 2024-09-10 11:42:43 +07:00
parent 3636f380fb
commit 67d117dcfc
48 changed files with 989 additions and 1140 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,21 +1,21 @@
<script setup lang="ts">
import { ref, onMounted, computed, watch, reactive } from "vue";
import { useQuasar, type QTableProps } from "quasar";
import { ref, onMounted, computed, watch } from "vue";
import { useQuasar } from "quasar";
import { useRoute } from "vue-router";
import DialogListCriteria from "@/modules/08_KPI/components/Tab/Dialog/DialogListCriteria.vue";
import config from "@/app.config";
import http from "@/plugins/http";
import Work from "@/modules/08_KPI/components/Tab/Topic/01_Indicator.vue";
import Competency from "@/modules/08_KPI/components/Tab/Topic/02_Competency.vue";
import Develop from "@/modules/08_KPI/components/Tab/Topic/03_Develop.vue";
import { useCounterMixin } from "@/stores/mixin";
import { useKpiDataStore } from "@/modules/08_KPI/store";
import type { ListCriteria } from "@/modules/08_KPI/interface/request/index";
import type { EvaluationIndicatorType } from "@/modules/08_KPI/interface/response/index";
import Work from "@/modules/08_KPI/components/Tab/Topic/01_Indicator.vue";
import Competency from "@/modules/08_KPI/components/Tab/Topic/02_Competency.vue";
import Develop from "@/modules/08_KPI/components/Tab/Topic/03_Develop.vue";
import DialogListCriteria from "@/modules/08_KPI/components/Tab/Dialog/DialogListCriteria.vue";
const dataListCriteria = ref<ListCriteria[]>([]);
const modalCriteria = ref<boolean>(false);
@ -27,14 +27,13 @@ const store = useKpiDataStore();
const evaluationId = ref<string>(route.params.id.toString());
const rows_01 = ref<any[]>();
const rows_02 = ref<any[]>();
const rows_03 = ref<any[]>();
const rows_01 = ref<EvaluationIndicatorType[]>();
const rows_02 = ref<EvaluationIndicatorType[]>();
const rows_03 = ref<EvaluationIndicatorType[]>();
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);
@ -42,12 +41,13 @@ 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) => ({
const newRow = data.map((e: EvaluationIndicatorType) => ({
...e,
evaluationResults: (e.point / 5) * e.weight,
}));
@ -83,7 +83,7 @@ function fetchListRole() {
.get(config.API.kpiAchievement("role") + `?id=${evaluationId.value}`)
.then((res) => {
const data = res.data.result;
const newRow = data.map((e: any) => ({
const newRow = data.map((e: EvaluationIndicatorType) => ({
...e,
evaluationResults: (e.point / 5) * e.weight,
}));
@ -281,10 +281,6 @@ onMounted(() => {
dense
bordered
:rows="[
// {
// name: 'รวมผลการประเมิน (ร้อยละ)',
// value: store.excusiveIndicator2PercentVal.toFixed(2),
// },
{
name: 'ผลการประเมินมิติที่ 2 (คะแนน)',
value: store.excusiveIndicator2ScoreVal.toFixed(2),

6
src/modules/08_KPI/components/Tab/02_Evaluator.vue
View file

@ -2,17 +2,17 @@
import { ref, reactive, onMounted } from "vue";
import { useQuasar } from "quasar";
import { useRoute } from "vue-router";
import type { QTableProps } from "quasar";
import config from "@/app.config";
import http from "@/plugins/http";
import { useCounterMixin } from "@/stores/mixin";
import type { QTableProps } from "quasar";
import type { FormComment } from "@/modules/08_KPI/interface/request/index";
import type { ResEvaluator } from "@/modules/08_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 } =

3
src/modules/08_KPI/components/Tab/03_CommanderAbove.vue
View file

@ -1,3 +0,0 @@
<template>
<div class="q-pa-md">ผู้บังคับบัญชา เหนือขึ้นไป</div>
</template>

3
src/modules/08_KPI/components/Tab/04_CommanderAboveOneStep.vue
View file

@ -1,3 +0,0 @@
<template>
<div class="q-pa-md">ผู้บังคับบัญชาเหนือขึ้นไปอีกชั้นหนึ่ง</div>
</template>

1
src/modules/08_KPI/components/Tab/04_Result.vue
View file

@ -206,7 +206,6 @@ async function downloadReport() {
await http
.get(config.API.kpiReport(id.value))
.then(async (res) => {
console.log(res.data.result.data);
const data = res.data.result;
await genReport(
data,

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

@ -1,17 +1,16 @@
<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 { useCounterMixin } from "@/stores/mixin";
import { useKpiDataStore } from "@/modules/08_KPI/store";
import type { DataOptions } from "@/modules/08_KPI/interface/index/Main";
import DialogHeader from "@/components/DialogHeader.vue";
import { useCounterMixin } from "@/stores/mixin";
import { useKpiDataStore } from "@/modules/08_KPI/store";
const $q = useQuasar();
const mixin = useCounterMixin();
const store = useKpiDataStore();
@ -90,7 +89,6 @@ 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
@ -108,6 +106,10 @@ function fetchListPlan() {
});
}
/**
* ดึงข้อมูลตัวชี้วัด
* @param id id
*/
function fetchListPlanByid(id: string) {
showLoader();
http
@ -140,8 +142,6 @@ function fetchListPlanByid(id: string) {
}
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() : "";
@ -183,7 +183,6 @@ function fetchRoleByid(id: string) {
formDetail.endDate = data.endDate;
listCheckID.value = data.kpiRoleId;
// clickList(data.kpiRoleId, true);
})
.catch((err) => {
messageError($q, err);

31
src/modules/08_KPI/components/Tab/Dialog/03_FormIndicatorSpecial.vue
View file

@ -1,27 +1,21 @@
<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 { useKpiDataStore } from "@/modules/08_KPI/store";
import { useCounterMixin } from "@/stores/mixin";
import type { FormDataAssigned } from "@/modules/08_KPI/interface/request/index";
import DialogHeader from "@/components/DialogHeader.vue";
import { useKpiDataStore } from "@/modules/08_KPI/store";
import { useCounterMixin } from "@/stores/mixin";
const $q = useQuasar();
const store = useKpiDataStore();
const {
showLoader,
hideLoader,
messageError,
dialogConfirm,
dialogMessageNotify,
success,
} = useCounterMixin();
const { showLoader, hideLoader, messageError, dialogConfirm, success } =
useCounterMixin();
const modal = defineModel<boolean>("modal", { required: true });
const isStatusEdit = defineModel<boolean>("isStatusEdit", { required: true });
@ -51,7 +45,6 @@ function fetchspecialByid(id: string) {
.get(config.API.kpiAchievement("special") + `/${id}`)
.then((res) => {
const data = res.data.result;
formData.including = data.including;
formData.includingName = data.includingName;
formData.target = data.target;
@ -143,7 +136,7 @@ watch(
bg-color="white"
dense
class="inputgreen"
:rules="[(val) => !!val || `${'กรุณากรอกลำดับ/รหัสตัวชี้วัด'}`]"
:rules="[(val:string) => !!val || `${'กรุณากรอกลำดับ/รหัสตัวชี้วัด'}`]"
hide-bottom-space
lazy-rules
/>
@ -222,7 +215,7 @@ watch(
dense
class="inputgreen"
:rules="[
(val) => !!val || `${'กรุณากรอกผลสำเร็จของงาน'}`,
(val:string) => !!val || `${'กรุณากรอกผลสำเร็จของงาน'}`,
]"
hide-bottom-space
lazy-rules
@ -242,7 +235,7 @@ watch(
dense
class="inputgreen"
:rules="[
(val) => !!val || `${'กรุณากรอกผลสำเร็จของงาน'}`,
(val:string) => !!val || `${'กรุณากรอกผลสำเร็จของงาน'}`,
]"
hide-bottom-space
lazy-rules
@ -262,7 +255,7 @@ watch(
dense
class="inputgreen"
:rules="[
(val) => !!val || `${'กรุณากรอกผลสำเร็จของงาน'}`,
(val:string) => !!val || `${'กรุณากรอกผลสำเร็จของงาน'}`,
]"
hide-bottom-space
lazy-rules
@ -282,7 +275,7 @@ watch(
dense
class="inputgreen"
:rules="[
(val) => !!val || `${'กรุณากรอกผลสำเร็จของงาน'}`,
(val:string) => !!val || `${'กรุณากรอกผลสำเร็จของงาน'}`,
]"
hide-bottom-space
lazy-rules
@ -302,7 +295,7 @@ watch(
dense
class="inputgreen"
:rules="[
(val) => !!val || `${'กรุณากรอกผลสำเร็จของงาน'}`,
(val:string) => !!val || `${'กรุณากรอกผลสำเร็จของงาน'}`,
]"
hide-bottom-space
lazy-rules
@ -333,7 +326,7 @@ watch(
type="textarea"
dense
class="inputgreen"
:rules="[(val) => !!val || `${'กรุณากรอกสูตรคำนวณ'}`]"
:rules="[(val:string) => !!val || `${'กรุณากรอกสูตรคำนวณ'}`]"
hide-bottom-space
lazy-rules
/>

74
src/modules/08_KPI/components/Tab/Dialog/04_FormCompetency.vue
View file

@ -1,16 +1,17 @@
<script setup lang="ts">
import { ref, reactive, onMounted, watch } from "vue";
import DialogHeader from "@/components/DialogHeader.vue";
import type { DataOptions } from "@/modules/08_KPI/interface/index/Main";
import type { ListCapacity } from "@/modules/08_KPI/interface/request/index";
import { useKpiDataStore } from "@/modules/08_KPI/store";
import { useCounterMixin } from "@/stores/mixin";
import { useRoute } from "vue-router";
import { useQuasar, type QTableProps } from "quasar";
import http from "@/plugins/http";
import config from "@/app.config";
import { useQuasar, type QTableProps } from "quasar";
import { useRoute } from "vue-router";
import { useKpiDataStore } from "@/modules/08_KPI/store";
import { useCounterMixin } from "@/stores/mixin";
import type { DataOptions } from "@/modules/08_KPI/interface/index/Main";
import type { ListCapacity } from "@/modules/08_KPI/interface/request/index";
import DialogHeader from "@/components/DialogHeader.vue";
const dataListCapacityDetails = ref<ListCapacity[]>([]);
const route = useRoute();
@ -22,7 +23,7 @@ const props = defineProps({
const $q = useQuasar();
const store = useKpiDataStore();
const expectedLevel = ref<any>();
const expectedLevel = ref<number | null>(null);
const pagination = ref({
sortBy: "desc",
descending: false,
@ -162,6 +163,7 @@ function getclass() {
return "inputgreen";
}
/** save สมรรถนะ */
function onSubmit() {
if (formDetail.id == "") {
dialogMessageNotify($q, "กรุณาเลือกสมรรถนะ");
@ -173,7 +175,7 @@ function onSubmit() {
const body = {
kpiUserEvaluationId: idParam.value,
kpiCapacityId: formDetail.id,
level: expectedLevel.value.toString(),
level: expectedLevel.value?.toString(),
weight: weight.value,
};
showLoader();
@ -193,6 +195,7 @@ function onSubmit() {
}
}
/** ดึงข้อมูล สมรรถนะ */
function getData() {
showLoader();
http
@ -214,12 +217,17 @@ function getData() {
});
}
/**
* ฟิลเตอร์
* @param val ค่าที่ฟิลเตอร์
*/
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}`)
@ -444,17 +452,6 @@ watch(
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>
@ -496,7 +493,6 @@ watch(
</div>
<div v-else>
{{ col.value }}
<!-- <span v-html="item.description"></span> -->
</div>
</q-td>
</q-tr>
@ -535,40 +531,6 @@ watch(
</div>
</template>
</d-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>

599
src/modules/08_KPI/components/Tab/Dialog/DialogCommentProblem.vue
View file

@ -1,33 +1,23 @@
<script setup lang="ts">
import { ref, watch, onMounted, reactive } from "vue";
import DialogHeader from "@/components/DialogHeader.vue";
import { useCounterMixin } from "@/stores/mixin";
import { useQuasar } from "quasar";
import http from "@/plugins/http";
import config from "@/app.config";
import { useCounterMixin } from "@/stores/mixin";
import { useKpiDataStore } from "@/modules/08_KPI/store";
import type {
FormComment,
FormCommentByRole,
} from "@/modules/08_KPI/interface/request/index";
import { useRoute } from "vue-router";
import { useQuasar } from "quasar";
import { useKpiDataStore } from "@/modules/08_KPI/store";
import DialogHeader from "@/components/DialogHeader.vue";
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 { dialogConfirm, showLoader, hideLoader, messageError, success } = mixin;
const modal = defineModel<boolean>("modal", { required: true });
const type = defineModel<string>("type", { required: true });
@ -46,6 +36,7 @@ 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: "",
@ -64,10 +55,12 @@ const formDataView = reactive<FormCommentByRole>({
});
let count = ref<number>(0);
/**
* ดึงข้อมูลหัวข้อรายงานปัญหา
* @param index id หัวข้อ
* @param data ข้อมูล
*/
function clickList(index: string, data: any) {
// if (data.status == "DRAFT") {
// }
listCheck.value = index as string;
formDataView.id = data.id;
@ -94,13 +87,18 @@ function clickList(index: string, data: any) {
}, 100);
}
function onEdit(index: string, data: any) {
/**
* เปิดเเบบร่าง
* @param data ข้อมูลเเบบร่าง
*/
function onEdit(data: any) {
modalAdd.value = true;
sendId.value = data.id;
formDataAdd.topic = data.topic;
formDataAdd.reason = data.reason;
}
/** save หัวข้อปัญหา */
function onSubmitAdd() {
dialogConfirm($q, () => {
showLoader();
@ -138,8 +136,7 @@ function onSubmitAdd() {
});
}
function onSubmit() {}
/** ปิด dialog */
function close() {
count.value = 0;
modal.value = false;
@ -183,6 +180,10 @@ function getList() {
});
}
/**
* save comment
* @param role ระดับผู้ประเมิน
*/
function onSubmitComment(role: string) {
dialogConfirm($q, () => {
const body = {
@ -229,28 +230,12 @@ function onSubmitComment(role: string) {
});
}
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,
() => {
@ -263,282 +248,280 @@ watch(
<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' &&
store.dataEvaluation.evaluationStatus == 'APPROVE' &&
store.tabMain === '2'
"
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"
<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' &&
store.dataEvaluation.evaluationStatus == 'APPROVE' &&
store.tabMain === '2'
"
icon="add"
color="teal"
flat
round
@click="
() => {
modalAdd = true;
}
"
>
<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>
<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">
<q-separator />
<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)"
/>
</div>
</div>
</q-item-section>
</q-item>
</q-list>
</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' ||
store.tabMain !== '2'
"
label="ความคิดเห็นของผู้ประเมิน"
v-model="reasonEvaluator"
type="textarea"
class="inputgreen"
lazy-rules
hide-bottom-space
:rules="[(val:string) => !!val || `${'กรุณากรอกความคิดเห็นของผู้ประเมิน'}`,]"
></q-input>
</div>
<div v-else class="q-pa-md">
<span>ไม่พบข้อมูล</span>
</div>
</q-card-section>
</q-card>
</div>
</template>
<div
v-if="
formDataView.reasonEvaluator == null &&
store.rolePerson == 'EVALUATOR' &&
store.dataEvaluation.evaluationStatus == 'APPROVE' &&
store.tabMain === '2'
"
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' ||
store.tabMain !== '2'
"
hide-bottom-space
:rules="[(val:string) => !!val || `${'กรุณากรอกความคิดเห็นของผู้บังคับบัญชาเหนือขึ้นไป'}`,]"
></q-input>
</div>
<div
v-if="
formDataView.reasonCommander == null &&
store.rolePerson == 'COMMANDER' &&
store.dataEvaluation.evaluationStatus == 'APPROVE' &&
store.tabMain === '2'
"
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' ||
store.tabMain !== '2'
"
hide-bottom-space
:rules="[(val:string) => !!val || `${'กรุณากรอกความคิดเห็นของผู้บังคับบัญชาเหนือขึ้นไปอีกขั้นหนึ่ง'}`,]"
></q-input>
</div>
<div
v-if="
formDataView.reasonCommanderHigh == null &&
store.rolePerson == 'COMMANDERHIGH' &&
store.dataEvaluation.evaluationStatus == 'APPROVE' &&
store.tabMain === '2'
"
class="col-12"
align="right"
>
<q-btn
label="บันทึกความคิดเห็น"
color="secondary"
type="submit"
><q-tooltip>บันทึกความคิดเห็น</q-tooltip></q-btn
>
</div>
</div>
</q-form>
<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' ||
store.tabMain !== '2'
"
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' &&
store.dataEvaluation.evaluationStatus == 'APPROVE' &&
store.tabMain === '2'
"
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' ||
store.tabMain !== '2'
"
hide-bottom-space
:rules="[(val:string) => !!val || `${'กรุณากรอกความคิดเห็นของผู้บังคับบัญชาเหนือขึ้นไป'}`,]"
></q-input>
</div>
<div
v-if="
formDataView.reasonCommander == null &&
store.rolePerson == 'COMMANDER' &&
store.dataEvaluation.evaluationStatus == 'APPROVE' &&
store.tabMain === '2'
"
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' ||
store.tabMain !== '2'
"
hide-bottom-space
:rules="[(val:string) => !!val || `${'กรุณากรอกความคิดเห็นของผู้บังคับบัญชาเหนือขึ้นไปอีกขั้นหนึ่ง'}`,]"
></q-input>
</div>
<div
v-if="
formDataView.reasonCommanderHigh == null &&
store.rolePerson == 'COMMANDERHIGH' &&
store.dataEvaluation.evaluationStatus == 'APPROVE' &&
store.tabMain === '2'
"
class="col-12"
align="right"
>
<q-btn
label="บันทึกความคิดเห็น"
color="secondary"
type="submit"
><q-tooltip>บันทึกความคิดเห็น</q-tooltip></q-btn
>
</div>
</div>
</q-form>
</div>
</template>
</q-splitter>
</q-card-section>
</q-form>
</div>
</template>
</q-splitter>
</q-card-section>
</q-card>
</q-dialog>

19
src/modules/08_KPI/components/Tab/Dialog/DialogCommentProgress.vue
View file

@ -1,21 +1,20 @@
<script setup lang="ts">
import { ref, watch, onMounted, reactive } from "vue";
import { ref, watch, reactive } from "vue";
import { useQuasar } from "quasar";
import DialogHeader from "@/components/DialogHeader.vue";
import { useCounterMixin } from "@/stores/mixin";
import http from "@/plugins/http";
import config from "@/app.config";
import { useKpiDataStore } from "@/modules/08_KPI/store";
import type {
FormComment,
FormCommentByRole,
ListTarget,
} from "@/modules/08_KPI/interface/request/index";
import { useRoute } from "vue-router";
import { useQuasar } from "quasar";
import { useKpiDataStore } from "@/modules/08_KPI/store";
const numLevel = ref<string>("");
const store = useKpiDataStore();
const $q = useQuasar();
const mixin = useCounterMixin();
const {
@ -27,15 +26,15 @@ const {
dialogMessageNotify,
} = mixin;
const check = ref<string>("");
const rows = defineModel<any>("rows");
const numLevel = ref<string>("");
const store = useKpiDataStore();
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 listTarget = ref<ListTarget[]>([]);
const listCheck = ref<string>("");
const reasonEvaluator = ref<string>(""); //ผู้ประเมิน
@ -202,7 +201,7 @@ function onSubmitComment(role: string) {
if (listCheck.value) {
const idCheck = listCheck.value;
const data = listTarget.value.find(
(item: any) => item.id == idCheck
(item: ListTarget) => item.id == idCheck
);
clickList(idCheck, data);
}

8
src/modules/08_KPI/components/Tab/Dialog/DialogCompetncyByRow.vue
View file

@ -1,11 +1,9 @@
<script setup lang="ts">
import { ref, reactive, onMounted, watch } from "vue";
import DialogHeader from "@/components/DialogHeader.vue";
import { useCounterMixin } from "@/stores/mixin";
import { ref, watch } from "vue";
import type { QTableProps } from "quasar";
const mixin = useCounterMixin();
const { showLoader, hideLoader } = mixin;
import DialogHeader from "@/components/DialogHeader.vue";
const modal = defineModel<boolean>("modal", { required: true });
const rows = defineModel<any>("rows", { required: true });
const dataRows = ref<any[]>([]);

162
src/modules/08_KPI/components/Tab/Dialog/DialogDevelop.vue
View file

@ -1,32 +1,44 @@
<script setup lang="ts">
import DialogHeader from "@/components/DialogHeader.vue";
import { ref, reactive, watch, computed } 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";
import { useCounterMixin } from "@/stores/mixin";
import type {
DataOptionTechnique,
ProjectYearOp,
} from "@/modules/08_KPI/interface/index/Main";
const $q = useQuasar();
const mixin = useCounterMixin();
const {
showLoader,
hideLoader,
dialogConfirm,
messageError,
success,
dialogMessageNotify,
} = mixin;
const props = defineProps({
getAll: Function,
});
const route = useRoute();
const idKpi = ref<string>(route.params.id.toLocaleString());
const development = ref<any[]>([]);
const reasonDevelopment70 = ref<string>("");
const reasonDevelopment20 = ref<string>("");
const reasonDevelopment10 = ref<string>("");
const choice = ref<string>("MANUAL");
const projectName = ref<any>("");
const projectOp = ref<ProjectYearOp[]>([]);
const projectOpMain = ref<ProjectYearOp[]>([]);
const development = ref<string[]>([]); //ตัวแปรเก็บ ตัวเลือกการพัฒนา
const reasonDevelopment70 = ref<string>(""); //อื่นๆ การลงมือปฏิบัติ (โดยผู้บังคับบัญชามอบหมาย)
const reasonDevelopment20 = ref<string>(""); //อื่นๆ การเรียนรู้จากผู้อื่น (Coach/Mentor/Consulting)
const reasonDevelopment10 = ref<string>(""); //อื่นๆ การฝึกอบรมอื่นๆ
const choice = ref<string>("MANUAL"); //ตัวเลืออก กรอกเอง/เลือกในระบบ
const projectName = ref<any>(""); //ชื่อเรื่อง
const projectOp = ref<ProjectYearOp[]>([]); //ตัวเลือก โครงการ/หลักสูตรการฝึกอบรม
const projectOpMain = ref<ProjectYearOp[]>([]); //ตัวเลือก โครงการ/หลักสูตรการฝึกอบรม แสดง
const choiceOp = ref<DataOptionTechnique[]>([
{ value: "PROJECT", label: "เลือกจากโครงการ/หลักสูตรการฝึกอบรม" },
{ value: "MANUAL", label: "กรอกเอง" },
@ -58,17 +70,6 @@ const isDevelopment10 = computed(() => {
);
});
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 });
@ -160,6 +161,7 @@ const projectTechniquesOp3 = ref<DataOptionTechnique[]>([
{ value: "other3", label: "อื่น ๆ (ระบุ)" },
]);
/** ปิด Dialog */
function close() {
modal.value = false;
id.value = "";
@ -187,6 +189,7 @@ function close() {
props.getAll?.();
}
/** บันทึกข้อมูลการพัฒนาตน */
function onSubmit() {
if (
isDevelopment70.value == false &&
@ -232,60 +235,9 @@ function onSubmit() {
});
}
}
watch(
() => id.value,
(i) => {
if (i) {
showLoader();
http
.get(config.API.kpiAchievementDevelop + `/${id.value}`)
.then(async (res) => {
const data = res.data.result;
formData.year = data.selectTypeYear;
await getDataByYear();
setTimeout(() => {
choice.value = data.selectType;
projectName.value = projectOpMain.value.find(
(i: any) => i.id == data.selectTypeId
);
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;
development.value = data.developmentProjects;
reasonDevelopment70.value = data.developmentProjects.includes(
"other1"
)
? data.reasonDevelopment70
: "";
reasonDevelopment20.value = data.developmentProjects.includes(
"other2"
)
? data.reasonDevelopment20
: "";
reasonDevelopment10.value = data.developmentProjects.includes(
"other3"
)
? data.reasonDevelopment10
: "";
}, 500);
})
.catch((e) => {
messageError($q, e);
})
.finally(() => {
hideLoader();
});
}
}
);
const customPosition = () => ({ top: "490px", left: "410px" });
async function getDataByYear() {
if (formData.year) {
showLoader();
@ -350,6 +302,59 @@ function filterOptionFn(val: string, update: Function) {
);
});
}
watch(
() => id.value,
(i) => {
if (i) {
showLoader();
http
.get(config.API.kpiAchievementDevelop + `/${id.value}`)
.then(async (res) => {
const data = res.data.result;
formData.year = data.selectTypeYear;
await getDataByYear();
setTimeout(() => {
choice.value = data.selectType;
projectName.value = projectOpMain.value.find(
(i: any) => i.id == data.selectTypeId
);
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;
development.value = data.developmentProjects;
reasonDevelopment70.value = data.developmentProjects.includes(
"other1"
)
? data.reasonDevelopment70
: "";
reasonDevelopment20.value = data.developmentProjects.includes(
"other2"
)
? data.reasonDevelopment20
: "";
reasonDevelopment10.value = data.developmentProjects.includes(
"other3"
)
? data.reasonDevelopment10
: "";
}, 500);
})
.catch((e) => {
messageError($q, e);
})
.finally(() => {
hideLoader();
});
}
}
);
</script>
<template>
<q-dialog persistent v-model="modal">
@ -542,19 +547,6 @@ function filterOptionFn(val: string, update: Function) {
</div>
</div>
</div>
<!-- <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

67
src/modules/08_KPI/components/Tab/Dialog/DialogGovernment.vue
View file

@ -1,20 +1,19 @@
<script setup lang="ts">
import DialogHeader from "@/components/DialogHeader.vue";
import type { QTableProps } from "quasar";
import { ref, watch } from "vue";
import { useCounterMixin } from "@/stores/mixin";
import type { QTableProps } from "quasar";
import { useQuasar } from "quasar";
import { useRouter, useRoute } from "vue-router";
import http from "@/plugins/http";
import config from "@/app.config";
import { useKpiDataStore } from "@/modules/08_KPI/store";
import { useCounterMixin } from "@/stores/mixin";
import DialogHeader from "@/components/DialogHeader.vue";
const store = useKpiDataStore();
const $q = useQuasar();
const store = useKpiDataStore();
const mixin = useCounterMixin();
const {
dialogConfirm,
success,
showLoader,
hideLoader,
messageError,
@ -23,13 +22,25 @@ const {
date2Thai,
} = mixin;
const route = useRoute();
const router = useRouter();
const id = ref<string>(route.params.id as string);
const modal = defineModel<boolean>("modal", { required: true });
const filterKeyword = ref<string>("");
const rows = ref<any[]>([]);
const visibleColumns = ref<string[]>([
"no",
"name",
"posMasterNoOld",
"positionOld",
"positionLevel",
"organizationPositionOld",
"organization",
"dateStart",
"dateEnd",
"createdAt",
"status",
"commandNo",
]);
//หัวตาราง
const columns = ref<QTableProps["columns"]>([
{
@ -164,22 +175,9 @@ const columns = ref<QTableProps["columns"]>([
format: (val) => statusText(val),
},
]);
const visibleColumns = ref<string[]>([
"no",
"name",
"posMasterNoOld",
"positionOld",
"positionLevel",
"organizationPositionOld",
"organization",
"dateStart",
"dateEnd",
"createdAt",
"status",
"commandNo",
]);
const statusText = (val: string) => {
/** เเปลง status เป็น text */
function statusText(val: string) {
switch (val) {
case "WAITTING":
return "รอดำเนินการ";
@ -197,12 +195,14 @@ const statusText = (val: string) => {
default:
return "-";
}
};
}
/** ปิด dialog */
function close() {
modal.value = false;
}
/** ดึงข้อมูล */
function getData() {
showLoader();
http
@ -218,6 +218,7 @@ function getData() {
hideLoader();
});
}
watch(
() => modal.value,
(n) => {
@ -271,20 +272,6 @@ watch(
</q-td>
</q-tr>
</template>
<!-- <template v-slot:pagination="scope">
ทั้งหมด {{ total }} รายการ
<q-pagination
v-model="formQuery.page"
active-color="primary"
color="dark"
:max="Number(totalList)"
size="sm"
boundary-links
direction-links
:max-pages="5"
@update:model-value="fetchList"
></q-pagination>
</template> -->
</d-table>
</div>
</div>

8
src/modules/08_KPI/components/Tab/Dialog/DialogLevel.vue
View file

@ -1,11 +1,9 @@
<script setup lang="ts">
import { ref, reactive, onMounted, watch } from "vue";
import DialogHeader from "@/components/DialogHeader.vue";
import { useCounterMixin } from "@/stores/mixin";
import { ref } from "vue";
import type { QTableProps } from "quasar";
const mixin = useCounterMixin();
const { showLoader, hideLoader } = mixin;
import DialogHeader from "@/components/DialogHeader.vue";
const modal = defineModel<boolean>("modal", { required: true });
const rows = defineModel<any>("rows", { required: true });
const dataRows = ref<any[]>([]);

14
src/modules/08_KPI/components/Tab/Dialog/DialogListCriteria.vue
View file

@ -1,20 +1,8 @@
<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;
}
import type { ListCriteria } from "@/modules/08_KPI/interface/index/Main";
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,

25
src/modules/08_KPI/components/Tab/Dialog/DialogStatus.vue
View file

@ -1,40 +1,31 @@
<script setup lang="ts">
import DialogHeader from "@/components/DialogHeader.vue";
import type { QTableProps } from "quasar";
import { ref, watch } from "vue";
import { useCounterMixin } from "@/stores/mixin";
import { useQuasar } from "quasar";
import { useRouter, useRoute } from "vue-router";
import http from "@/plugins/http";
import config from "@/app.config";
import { useKpiDataStore } from "@/modules/08_KPI/store";
import { useCounterMixin } from "@/stores/mixin";
import DialogHeader from "@/components/DialogHeader.vue";
const store = useKpiDataStore();
const route = useRoute();
const router = useRouter();
const id = ref<string>(route.params.id as string);
const work = ref<boolean>(false);
const $q = useQuasar();
const work = ref<boolean>(false);
const mixin = useCounterMixin();
const {
dialogConfirm,
success,
showLoader,
hideLoader,
messageError,
findPosMasterNoOld,
findOrgNameOld,
date2Thai,
} = mixin;
const { showLoader, hideLoader, messageError } = mixin;
const modal = defineModel<boolean>("modal", { required: true });
const isProbation = defineModel<boolean>("isProbation", { required: true });
/** ปิด dialog */
function close() {
modal.value = false;
}
/** ดึงข้อมูล */
function getData() {
showLoader();
http

4
src/modules/08_KPI/components/Tab/Dialog/DialogViewInfo.vue
View file

@ -1,8 +1,9 @@
<script setup lang="ts">
import { ref, watch } from "vue";
import { useQuasar } from "quasar";
import config from "@/app.config";
import http from "@/plugins/http";
import config from "@/app.config";
import DialogHeader from "@/components/DialogHeader.vue";
@ -16,7 +17,6 @@ const numpage = defineModel<number>("numpage", { required: true });
const kpiUserPlannedId = defineModel<string>("kpiUserPlannedId", {
required: true,
});
const dataAchievement = ref<any[]>([]);
function fetchByid(id: string, type: string) {

38
src/modules/08_KPI/components/Tab/DialogEvaluate/01_Indicator.vue
View file

@ -1,15 +1,15 @@
<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 http from "@/plugins/http";
import config from "@/app.config";
import { useKpiDataStore } from "@/modules/08_KPI/store";
import { useCounterMixin } from "@/stores/mixin";
import type { QTableProps } from "quasar";
import { useKpiDataStore } from "@/modules/08_KPI/store";
import { useCounterMixin } from "@/stores/mixin";
import DialogHeader from "@/components/DialogHeader.vue";
const $q = useQuasar();
const store = useKpiDataStore();
@ -213,34 +213,6 @@ function onSubmit() {
</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}` : "" }}

46
src/modules/08_KPI/components/Tab/DialogEvaluate/02_Competenct.vue
View file

@ -1,16 +1,16 @@
<script setup lang="ts">
import { ref, watch, computed } from "vue";
import { ref, computed } from "vue";
import { useQuasar, type QTableProps } from "quasar";
import DialogHeader from "@/components/DialogHeader.vue";
import http from "@/plugins/http";
import config from "@/app.config";
import { useCounterMixin } from "@/stores/mixin";
import { useKpiDataStore } from "@/modules/08_KPI/store";
import { useQuasar, type QTableProps } from "quasar";
import http from "@/plugins/http";
import config from "@/app.config";
import type { ListCriteria } from "@/modules/08_KPI/interface/request/index";
import DialogHeader from "@/components/DialogHeader.vue";
const dataListCriteria = defineModel<ListCriteria[]>("dataListCriteria", {
required: true,
});
@ -23,19 +23,14 @@ const props = defineProps({
getData: Function,
default: () => console.log("not function"),
});
const {
dialogConfirm,
hideLoader,
showLoader,
messageError,
success,
dialogMessageNotify,
} = useCounterMixin();
const store = useKpiDataStore();
const { dialogConfirm, messageError, dialogMessageNotify } = useCounterMixin();
const $q = useQuasar();
const store = useKpiDataStore();
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",
@ -191,27 +186,6 @@ function onSubmit() {
</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'">

20
src/modules/08_KPI/components/Tab/DialogEvaluate/03_DialogEvalutionDevelop.vue
View file

@ -1,12 +1,14 @@
<script setup lang="ts">
import DialogHeader from "@/components/DialogHeader.vue";
import { ref } from "vue";
import { useQuasar, type QTableProps } from "quasar";
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";
import { useKpiDataStore } from "@/modules/08_KPI/store";
import DialogHeader from "@/components/DialogHeader.vue";
const props = defineProps({
getAll: Function,
});
@ -15,18 +17,10 @@ const store = useKpiDataStore();
const $q = useQuasar();
const mixin = useCounterMixin();
const {
dialogConfirm,
showLoader,
hideLoader,
success,
messageError,
dialogMessageNotify,
} = mixin;
const { showLoader, hideLoader, success, messageError } = 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",
@ -85,6 +79,7 @@ const columns = ref<QTableProps["columns"]>([
},
]);
/** save ข้อมูล */
function onSubmit() {
const data = rows.value.map((i: any) => ({
id: i.id,
@ -107,6 +102,7 @@ function onSubmit() {
});
}
/** ปิด dialog */
function close() {
modal.value = false;
rows.value = [];

1
src/modules/08_KPI/components/Tab/TabMain.vue
View file

@ -1,5 +1,6 @@
<script setup lang="ts">
import { ref } from "vue";
import { useKpiDataStore } from "@/modules/08_KPI/store";
import Assessment from "@/modules/08_KPI/components/Tab/01_Assessment.vue";

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

@ -1,34 +1,26 @@
<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 { useCounterMixin } from "@/stores/mixin";
import { useKpiDataStore } from "@/modules/08_KPI/store";
import type { QTableProps } from "quasar";
import Dialog from "@/modules/08_KPI/components/Tab/Dialog/01_FormIndicator.vue";
// import Dialog03 from "@/modules/08_KPI/components/Tab/Dialog/03_FormIndicatorSpecial.vue";
import DialogEvaluate from "@/modules/08_KPI/components/Tab/DialogEvaluate/01_Indicator.vue";
import DialogViewInfo from "@/modules/08_KPI/components/Tab/Dialog/DialogViewInfo.vue";
import DialogProgress from "@/modules/08_KPI/components/Tab/Dialog/DialogCommentProgress.vue";
import DialogProblem from "@/modules/08_KPI/components/Tab/Dialog/DialogCommentProblem.vue";
import { useCounterMixin } from "@/stores/mixin";
import { useKpiDataStore } from "@/modules/08_KPI/store";
const checkDetail = ref<boolean>(false);
const $q = useQuasar();
const store = useKpiDataStore();
const route = useRoute();
const {
date2Thai,
dialogRemove,
showLoader,
hideLoader,
messageError,
success,
} = useCounterMixin();
const { dialogRemove, showLoader, hideLoader, messageError, success } =
useCounterMixin();
const checkDetail = ref<boolean>(false);
const title = defineModel<string>("title", { required: true });
const rows = defineModel<any>("data", { required: true });
const numpage = defineModel<number>("page", { required: true });
@ -121,7 +113,6 @@ const columns = ref<QTableProps["columns"]>([
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);
@ -129,11 +120,7 @@ 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) {
@ -218,24 +205,6 @@ const isEditStep3 = computed(() => {
store.tabMain === "3")
);
});
// watch(
// () => modalAssigned.value,
// () => {
// if (!modalAssigned.value) {
// props.fetchList?.();
// }
// }
// );
// watch(
// () => modalEvaluate.value,
// () => {
// if (!modalEvaluate.value) {
// props.fetchList?.();
// }
// }
// );
</script>
<template>
@ -503,13 +472,6 @@ const isEditStep3 = computed(() => {
:kpiUserPlannedId="kpiUserPlannedId"
/>
<!-- <Dialog03
v-model:modal="modalAssigned"
:numpage="numpage"
:isStatusEdit="isStatusEdit"
:kpiUserPlannedId="kpiUserPlannedId"
/> -->
<DialogEvaluate
v-model:modal="modalEvaluate"
:data="rows"

117
src/modules/08_KPI/components/Tab/Topic/02_Competency.vue
View file

@ -1,25 +1,26 @@
<script setup lang="ts">
import { onMounted, ref, computed, watch } from "vue";
import Dialog from "@/modules/08_KPI/components/Tab/Dialog/04_FormCompetency.vue";
import DialogEvaluate from "@/modules/08_KPI/components/Tab/DialogEvaluate/02_Competenct.vue";
import DialogProgress from "@/modules/08_KPI/components/Tab/Dialog/DialogCommentProgress.vue";
import DialogProblem from "@/modules/08_KPI/components/Tab/Dialog/DialogCommentProblem.vue";
import { onMounted, ref, computed } from "vue";
import { useRoute } from "vue-router";
import http from "@/plugins/http";
import config from "@/app.config";
import { useQuasar, type QTableProps } from "quasar";
import { useCounterMixin } from "@/stores/mixin";
import { useKpiDataStore } from "@/modules/08_KPI/store";
import http from "@/plugins/http";
import config from "@/app.config";
import { useRoute } from "vue-router";
import type {
FormCapacityList,
ListCriteria,
} from "@/modules/08_KPI/interface/request/index";
import type { DataOptions } from "@/modules/08_KPI/interface/index/Main";
import Dialog from "@/modules/08_KPI/components/Tab/Dialog/04_FormCompetency.vue";
import DialogLevel from "@/modules/08_KPI/components/Tab/Dialog/DialogLevel.vue";
import DialogProblem from "@/modules/08_KPI/components/Tab/Dialog/DialogCommentProblem.vue";
import DialogProgress from "@/modules/08_KPI/components/Tab/Dialog/DialogCommentProgress.vue";
import DialogEvaluate from "@/modules/08_KPI/components/Tab/DialogEvaluate/02_Competenct.vue";
import DialogListCriteria from "@/modules/08_KPI/components/Tab/Dialog/DialogListCriteria.vue";
import DialogCompetncyByRow from "@/modules/08_KPI/components/Tab/Dialog/DialogCompetncyByRow.vue";
import DialogLevel from "@/modules/08_KPI/components/Tab/Dialog/DialogLevel.vue";
import type { DataOptions } from "@/modules/08_KPI/interface/index/Main";
const modalLevel = ref<boolean>(false);
const modalCompetncyByRow = ref<boolean>(false);
@ -39,7 +40,6 @@ 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);
@ -121,15 +121,44 @@ const visibleColumns = ref<string[]>(
);
const typeCompetency = ref<string>("");
const rows = ref<any>([]);
const lists = ref<any>([]);
const modalProgress = ref<boolean>(false);
const modalProblem = ref<boolean>(false);
const type = ref<string>("");
const idList = ref<string>("");
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 competencyType = ref<DataOptions[]>([]);
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")
);
});
/** เพิ่มข้อมูล */
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}`)
@ -192,12 +221,18 @@ function getData(type: string) {
});
}
/** เปิดหน้าต่างเเก้ไข */
function onEdit(data: FormCapacityList, type: string) {
idCapacity.value = data.id;
typeCompetency.value = type;
modal.value = true;
}
/**
* ลบข้อมูล
* @param id id row
* @param type แยกประเภท
*/
function onDelete(id: string, type: string) {
dialogRemove($q, () => {
showLoader();
@ -216,68 +251,52 @@ function onDelete(id: string, type: string) {
});
}
/**
* ประเมิน
* @param type เเยกประเภท
*/
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>("");
/**
* รายงานความก้าวหน้า
* @param id id row
*/
function openPopupProgress(id: string) {
modalProgress.value = true;
type.value = "capacity";
idList.value = id;
}
/**
* รายงานปัญหา
* @param id 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")
);
});
/** dialog กณฑ์การประเมินสมรรถนะ */
function onInfo() {
modalCriteria.value = true;
}
function onAchievement(data: any) {
modalCompetncyByRow.value = true;
dataCompetncyByRow.value = data;
}
/**
* เปิด dialog รายละเอียดระดับที่คาดหวัง
* @param num ระดับ
* @param list list ข้อมูล
*/
function onLevel(num: number, list: any) {
dataLevel.value = list.filter((i: any) => i.level == num);
modalLevel.value = true;
}
const competencyType = ref<DataOptions[]>([]);
onMounted(() => {
setTimeout(async () => {
// console.log("posTypeName===>", store.dataEvaluation.posTypeName);
competencyType.value = await (store.dataEvaluation.posTypeName ==
"อำนวยการ" || store.dataEvaluation.posTypeName == "บริหาร"
? store.competencyType.filter(

91
src/modules/08_KPI/components/Tab/Topic/03_Develop.vue
View file

@ -1,17 +1,18 @@
<script setup lang="ts">
import { onMounted, ref, computed, watch, reactive } from "vue";
import { onMounted, ref, computed, reactive } from "vue";
import { useRoute } from "vue-router";
import http from "@/plugins/http";
import config from "@/app.config";
import { useQuasar, type QTableProps } from "quasar";
import { useCounterMixin } from "@/stores/mixin";
import { useKpiDataStore } from "@/modules/08_KPI/store";
import DialogDevelop from "@/modules/08_KPI/components/Tab/Dialog/DialogDevelop.vue";
import DialogEvalutionDevelop from "@/modules/08_KPI/components/Tab/DialogEvaluate/03_DialogEvalutionDevelop.vue";
import DialogProgress from "@/modules/08_KPI/components/Tab/Dialog/DialogCommentProgress.vue";
import DialogProblem from "@/modules/08_KPI/components/Tab/Dialog/DialogCommentProblem.vue";
import { useQuasar, type QTableProps } from "quasar";
import { useCounterMixin } from "@/stores/mixin";
import { useKpiDataStore } from "@/modules/08_KPI/store";
import http from "@/plugins/http";
import config from "@/app.config";
import { useRoute } from "vue-router";
const store = useKpiDataStore();
const route = useRoute();
const evaluationId = ref<string>(route.params.id.toString());
@ -37,10 +38,30 @@ const isUpdate = defineModel("isUpdate", {
default: false,
});
const formData = reactive({
isDevelopment70: false,
isDevelopment20: false,
isDevelopment10: false,
const modalProgress = ref<boolean>(false);
const modalProblem = ref<boolean>(false);
const type = ref<string>("");
const idList = ref<string>("");
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")
);
});
const columns = ref<QTableProps["columns"]>([
{
@ -119,11 +140,16 @@ function onAdd() {
modalDevelop.value = true;
}
/**
* เปิด dialog แก้ไข
* @param id id
*/
function onEdit(id: string) {
modalDevelop.value = true;
idEditDevelop.value = id;
}
/** ดึงข้อมูลพัฒนา */
function getDevelop() {
http
.get(config.API.kpiAchievementDevelop + `?id=${evaluationId.value}`)
@ -142,6 +168,9 @@ function onEvaluate() {
modalEvaluate.value = true;
}
/** ลบข้อมูลตาม id
* @param id id row
*/
function onDelete(id: string) {
dialogRemove($q, () => {
showLoader();
@ -160,10 +189,6 @@ function onDelete(id: string) {
});
}
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";
@ -177,28 +202,6 @@ function openPopupProblem(id: string) {
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();
});
@ -341,18 +344,6 @@ onMounted(() => {
>
<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">