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

Merge branch 'develop' into devTee

Browse source
This commit is contained in:
STW_TTTY\stwtt 2024-05-09 13:02:20 +07:00
commit fb1e158861
9 changed files with 828 additions and 109 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,10 +1,12 @@
<script setup lang="ts">
import { ref, reactive, watch } from "vue";
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/08_KPI/interface/index/Main";
import DialogHeader from "@/components/DialogHeader.vue";
import { useCounterMixin } from "@/stores/mixin";
@ -22,6 +24,7 @@ const {
dialogConfirm,
dialogMessageNotify,
success,
date2Thai,
} = mixin;
const modal = defineModel<boolean>("modal", { required: true });
@ -35,6 +38,20 @@ 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: "",
@ -60,20 +77,28 @@ const formDetail = reactive<any>({
strategyId: "",
strategyName: "",
documentInfoEvidence: "",
date: null,
});
function fetchIndicators() {
const nodeId = store.dataProfile.nodeId;
const node = store.dataProfile.node;
const kpiPeriodId = store.dataEvaluation.kpiPeriodId;
/** 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
.get(
config.API.kpiPlan +
`?page=${1}&pageSize=${50}&kpiPeriodId=${kpiPeriodId}&nodeId=${nodeId}&node=${node}&keyword=${""}`
)
.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);
@ -83,7 +108,7 @@ function fetchIndicators() {
});
}
function fetchIndicatorsByid(id: string) {
function fetchListPlanByid(id: string) {
showLoader();
http
.get(config.API.kpiAchievement("planned") + `/${id}`)
@ -94,6 +119,17 @@ function fetchIndicatorsByid(id: string) {
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) => {
@ -105,15 +141,22 @@ function fetchIndicatorsByid(id: string) {
}
function fetchListRole() {
const kpiPeriodId = store.dataEvaluation.kpiPeriodId;
const position = store.dataProfile.position;
// 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
.get(
config.API.kpiRole +
`?page=${1}&pageSize=${50}&kpiPeriodId=${kpiPeriodId}&position=${position}`
)
.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();
@ -131,6 +174,17 @@ function fetchRoleByid(id: string) {
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) => {
@ -141,9 +195,76 @@ function fetchRoleByid(id: string) {
});
}
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 : config.API.kpiRole;
const url =
numpage.value === 1
? config.API.kpiPlan
: numpage.value === 2
? config.API.kpiRole
: config.API.kpiSpecial;
http
.get(`${url}/${id}`)
.then((res) => {
@ -155,6 +276,11 @@ function clickList(id: string, isData: boolean = false) {
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;
@ -163,11 +289,6 @@ function clickList(id: string, isData: boolean = false) {
formDetail.kpiPeriodId = data.kpiPeriodId;
formDetail.includingName = data.includingName;
formDetail.including = data.including;
formDetail.achievement1 = data.achievement1;
formDetail.achievement2 = data.achievement2;
formDetail.achievement3 = data.achievement3;
formDetail.achievement4 = data.achievement4;
formDetail.achievement5 = data.achievement5;
formDetail.node = data.node;
formDetail.nodeId = data.nodeId;
formDetail.nodeName = data.nodeName;
@ -209,14 +330,25 @@ function closeDialog() {
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) {
if (!listCheckID.value && numpage.value !== 3) {
dialogMessageNotify($q, "กรุณาเลือกตัวชี้วัด");
} else {
dialogConfirm($q, async () => {
// showLoader();
showLoader();
const formBody = {
target: formDetail.target,
@ -227,6 +359,23 @@ function onSubmit() {
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
@ -237,68 +386,172 @@ function onSubmit() {
? config.API.kpiAchievement("role") + `/${kpiUserPlannedId.value}`
: config.API.kpiAchievement("role");
const url = numpage.value === 1 ? urlPlanned : urlRole;
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();
closeDialog();
}
});
}
}
function fetchNewList() {
formFilter.page = 1;
numpage.value === 1
? fetchListPlan()
: numpage.value === 2
? fetchListRole()
: fetchListSpecial();
}
watch(
() => modal.value,
() => {
if (modal.value) {
if (numpage.value === 1) {
fetchIndicators();
isStatusEdit.value && fetchIndicatorsByid(kpiUserPlannedId.value);
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="
numpage == 1
? 'เพิ่มตัวชี้วัดตามแผนปฏิบัติราชการประจําปี'
: 'เพิ่มตัวชี้วัดตามหน้าที่ความรับผิดชอบ'
"
:close="closeDialog"
/>
<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="col-12">
<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="search"
v-model="formFilter.keyword"
outlined
dense
label="ค้นหา"
class="inputgreen"
@keydown.enter.prevent="fetchNewList()"
>
<template v-slot:append>
<q-icon v-if="search == ''" name="search" />
<q-icon v-if="formFilter.keyword == ''" name="search" />
<q-icon
v-if="search !== ''"
v-if="formFilter.keyword !== ''"
name="clear"
class="cursor-pointer"
@click="search = ''"
@click="(formFilter.keyword = ''), fetchNewList()"
/>
</template>
</q-input>
@ -335,6 +588,30 @@ watch(
</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>
@ -350,7 +627,7 @@ watch(
<div class="col-6">
<q-card bordered class="full-height q-pa-sm">
<div class="q-pa-sm q-col-gutter-lg">
<div class="col-12 row">
<div class="col-12 row" v-if="numpage !== 3">
<div class="col-4 text-grey-6">หน่วยงาน/ส่วนราชการ</div>
<div class="col-8">{{ formDetail.nodeName }}</div>
</div>
@ -361,11 +638,43 @@ watch(
<div class="col-12 row">
<div class="col-4 text-grey-6">ลำดับ/รหัสตัวชี้วัด</div>
<div class="col-8">{{ formDetail.including }}</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">{{ formDetail.includingName }}</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>
@ -380,6 +689,7 @@ watch(
(val) => !!val || `${'กรุณากรอกค่าเป้าหมาย'}`,
]"
hide-bottom-space
lazy-rules
/>
</div>
</div>
@ -395,6 +705,7 @@ watch(
:rules="[
(val) => !!val || `${'กรุณากรอกหน่วยนับ'}`,
]"
lazy-rules
hide-bottom-space
reverse-fill-mask
/>
@ -414,6 +725,7 @@ watch(
!!val || `${'กรุณากรอกน้ำหนัก (ร้อยละ)'}`,
]"
hide-bottom-space
lazy-rules
mask="###"
/>
</div>
@ -429,34 +741,84 @@ watch(
<div class="col-6 text-center">ระดับคะแนน</div>
<div class="col-6 text-center">ผลสำเร็จของงาน</div>
</div>
<div class="row col-12 items-center lineTop">
<div
class="row col-12 items-center lineTop q-col-gutter-sm"
>
<div class="col-6 text-center text-body2">5</div>
<div class="col-6 text-center text-primary">
{{ formDetail.achievement5 }}
<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">
<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">
{{ formDetail.achievement4 }}
<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">
<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">
{{ formDetail.achievement3 }}
<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">
<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">
{{ formDetail.achievement2 }}
<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">
<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">
{{ formDetail.achievement1 }}
<q-input
v-model="formDetail.achievement1"
outlined
dense
:rules="[(val:string) => !!val || `${'กรุณากรอกผลสำเร็จของงาน'}`,]"
hide-bottom-space
class="inputgreen"
lazy-rules
/>
</div>
</div>
</div>
@ -471,6 +833,7 @@ watch(
:rules="[(val:string) => !!val || `${'กรุณากรอกตัวชี้วัด'}`,]"
hide-bottom-space
class="inputgreen"
lazy-rules
/>
</div>
@ -484,6 +847,7 @@ watch(
:rules="[(val:string) => !!val || `${'กรุณากรอกตัวชี้วัด'}`,]"
hide-bottom-space
class="inputgreen"
lazy-rules
/>
</div>
@ -497,8 +861,57 @@ watch(
: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>

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

@ -171,8 +171,26 @@ function onSubmit() {
<q-tr :props="props" class="cursor-pointer">
<q-td v-for="col in props.cols" :key="col.id">
<div v-if="col.name === 'point'">
<div v-if="type == 'HEAD' || type == 'GROUP'">
<q-rating
<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"
@ -191,9 +209,8 @@ function onSubmit() {
</div>
</q-tooltip>
</template>
</q-rating>
</q-rating> -->
</div>
<div v-else>รอ ทำ select</div>
</div>
<div v-else-if="col.name === 'summary'">
{{ props.row.point !== 0 ? props.row.point * 20 : "-" }}
@ -260,4 +277,14 @@ function onSubmit() {
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>

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

@ -11,7 +11,9 @@ import File from "@/modules/08_KPI/components/Tab/05_File.vue";
const store = useKpiDataStore();
const route = useRoute();
const isReadonly = ref<boolean>(route.name === "KPIEditEvaluator" ? true : false);
const isReadonly = ref<boolean>(
route.name === "KPIEditEvaluator" ? true : false
);
const step = ref<number>(1); // 1 = จัดทำข้อตกลง, 2 = รายงานความก้าวหน้า, 3 = รายงานผลสำเร็จของงาน
const indicatorScore = defineModel("indicatorScore", {
type: Number,
@ -69,8 +71,16 @@ const splitterModel = ref<number>(12);
:label="tab.label"
/> -->
<q-tab name="1" label="จัดทำข้อตกลง" />
<q-tab name="2" label="รายงานความก้าวหน้า" :disable="step < 2" />
<q-tab name="3" label="รายงานผลสำเร็จของงาน" :disable="step < 3" />
<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>
@ -101,9 +111,9 @@ const splitterModel = ref<number>(12);
v-model:indicatorScore="indicatorScore"
v-model:competencyScore="competencyScore"
/>
<Evaluator v-if="store.tabMain === '2'" :type="'evaluator'" />
<Evaluator v-if="store.tabMain === '3'" :type="'commander'" />
<Evaluator v-if="store.tabMain === '4'" :type="'commanderHigh'" />
<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>

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

@ -123,11 +123,11 @@ const modalEvaluate = ref<boolean>(false);
function onAdd(edit: boolean = false, id: string = "") {
isStatusEdit.value = edit;
kpiUserPlannedId.value = id;
if (numpage.value !== 3) {
// if (numpage.value !== 3) {
modal.value = true;
} else if (numpage.value == 3) {
modalAssigned.value = true;
}
// } else if (numpage.value == 3) {
// modalAssigned.value = true;
// }
}
function onEvaluate() {
@ -166,23 +166,23 @@ watch(
}
);
watch(
() => modalAssigned.value,
() => {
if (!modalAssigned.value) {
props.fetchList?.();
}
}
);
// watch(
// () => modalAssigned.value,
// () => {
// if (!modalAssigned.value) {
// props.fetchList?.();
// }
// }
// );
watch(
() => modalEvaluate.value,
() => {
if (!modalEvaluate.value) {
props.fetchList?.();
}
}
);
// watch(
// () => modalEvaluate.value,
// () => {
// if (!modalEvaluate.value) {
// props.fetchList?.();
// }
// }
// );
</script>
<template>
<q-card bordered style="border-radius: 5px" class="no-shadow">
@ -338,18 +338,19 @@ watch(
:isStatusEdit="isStatusEdit"
:kpiUserPlannedId="kpiUserPlannedId"
/>
<Dialog03
<!-- <Dialog03
v-model:modal="modalAssigned"
:numpage="numpage"
:isStatusEdit="isStatusEdit"
:kpiUserPlannedId="kpiUserPlannedId"
/>
/> -->
<DialogEvaluate
<!-- <DialogEvaluate
v-model:modal="modalEvaluate"
:data="rows"
:numpage="numpage"
/>
/> -->
</template>
<style scoped>
.custom-table2 {

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

@ -107,6 +107,12 @@ const columns = ref<QTableProps["columns"]>([
},
]);
const visibleColumns = ref<string[]>(
store.tabOpen === 3
? ["name", "level", "point", "weight", "summary"]
: ["name", "level", "weight"]
);
const typeCompetency = ref<string>("");
function onAdd(type: string) {
typeCompetency.value = type;
@ -239,7 +245,7 @@ onMounted(() => {
</div>
<q-space />
<!-- <q-btn
<q-btn
v-if="!isReadonly"
flat
round
@ -250,7 +256,7 @@ onMounted(() => {
@click="onEvaluate(item.id)"
>
<q-tooltip>ประเมิน</q-tooltip>
</q-btn> -->
</q-btn>
</div>
</q-card-section>
<q-card-section class="q-pa-sm">
@ -266,6 +272,7 @@ onMounted(() => {
hide-pagination
class="custom-table2"
no-data-label="ไม่มีข้อมูล"
:visible-columns="visibleColumns"
>
<template v-slot:header="props">
<q-tr :props="props">
@ -283,7 +290,23 @@ onMounted(() => {
</div>
<div v-else-if="col.name == 'point'">
<div>
<q-rating
<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"
@ -303,7 +326,7 @@ onMounted(() => {
</div>
</q-tooltip>
</template>
</q-rating>
</q-rating> -->
</div>
<!-- <div v-else>รอ ทำ select</div> -->
</div>
@ -402,4 +425,14 @@ onMounted(() => {
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>