hrms-bangkok/hrms-mgt
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-06-18 15:01:14 +07:00
commit 6f1196f867
22 changed files with 1199 additions and 169 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/api/02_organizational/api.organization.ts
View file

@ -6,6 +6,8 @@ const orgProfile = `${env.API_URI}/org/profile`;
const orgEmployeePos = `${env.API_URI}/org/employee/pos`;
export default {
keycloakPosition: () => `${organization}/profile/keycloak/position`,
/** โครงสร้างอัตรากำลัง*/
activeOrganization: `${organization}/active`,
orgByid: (id: string) => `${organization}/${id}`,

4
src/api/14_KPI/api.KPI.ts
View file

@ -20,6 +20,7 @@ const urlFile = `${env.API_URI}/salary`;
const kpiGroup = `${env.API_URI}/kpi/group`;
const kpiLink = `${env.API_URI}/kpi/link`;
const placementKeycloak = `${env.API_URI}/placement/officer/profileId`;
export default {
KPI,
@ -68,7 +69,8 @@ export default {
kpiLink,
profilePosition: () => `${env.API_URI}/org/profile/keycloak/position`,
profilePosition: () => `${env.API_URI}/org/profile/profileid/position`,
placementKeycloak,
/** Report*/
kpiReport: () => `${KPI}/report/announcement`,

10
src/interface/request/main/main.ts
View file

@ -275,11 +275,11 @@ const menuList = readonly<any[]>([
path: "appoint-employee",
role: "placement",
},
{
label: "ออกคำสั่งย้ายสับเปลี่ยนตำแหน่ง",
path: "changePositions",
role: "placement",
},
// {
// label: "ออกคำสั่งย้ายสับเปลี่ยนตำแหน่ง",
// path: "changePositions",
// role: "placement",
// },
{
label: "รายการอื่นๆ",
path: "other",

1
src/modules/02_organizationalNew/components/DialogSelectPerson.vue
View file

@ -687,6 +687,7 @@ watch([() => page.value, () => pageSize.value], () => {
active-color="primary"
color="dark"
:max="totalPage"
:max-pages="5"
size="sm"
boundary-links
direction-links

28
src/modules/03_recruiting/views/01_compete/PeriodAdd.vue
View file

@ -16,14 +16,14 @@
<q-card flat bordered class="col-12">
<q-form ref="myForm">
<q-card-section class="q-pa-md">
<div class="col-xs-12 col-sm-8"></div>
<div class="col-12 row items-center q-col-gutter-x-sm">
<div class="col-12 row q-col-gutter-sm">
<div class="col-xs-12 col-sm-8">
<q-input
outlined
v-model="name"
label="ชื่อรอบสอบแข่งขัน"
dense
hide-bottom-space
lazy-rules
:rules="[(val) => !!val || `${'กรุณากรอกชื่อรอบสอบแข่งขัน'}`]"
></q-input>
@ -57,8 +57,8 @@
<q-input
dense
outlined
:model-value="yearly + 543"
:rules="[(val) => !!val || `${'กรุณาเลือกปีงบประมาณ'}`]"
:model-value="yearly + 543"
:label="`${'ปีงบประมาณ'}`"
>
<template v-slot:prepend>
@ -79,15 +79,15 @@
v-model="fee"
type="number"
label="ค่าธรรมเนียม"
dense
lazy-rules
input-class="text-right"
dense
:rules="[
(val) => val >= 0 || `${'กรุณากรอกค่าธรรมเนียมให้ถูกต้อง'}`,
]"
input-class="text-right"
></q-input>
</div>
<div class="col-xs-12 col-sm-3 col-md-3" v-if="announcementExam">
<div class="col-xs-12 col-sm-4 col-md-3" v-if="announcementExam">
<datepicker
menu-class-name="modalfix"
v-model="dateExam"
@ -107,10 +107,9 @@
<q-input
outlined
dense
class="full-width datepicker q-mb-md"
class="full-width datepicker"
:model-value="dateExam != null ? date2Thai(dateExam) : null"
:label="`${'วันที่สอบ'}`"
:rules="[(val) => !!val || `${'กรุณาเลือกวันที่สอบ'}`]"
>
<template v-slot:prepend>
<q-icon
@ -145,7 +144,8 @@
<q-input
outlined
dense
class="full-width datepicker q-mb-md"
hide-bottom-space
class="full-width datepicker"
:model-value="
dateAnnouncement != null
? dateThaiRange(dateAnnouncement)
@ -187,12 +187,11 @@
<q-input
outlined
dense
class="full-width datepicker q-mb-md"
class="full-width datepicker"
:model-value="
dateRegister != null ? dateThaiRange(dateRegister) : null
"
:label="`${'วันที่สมัคร'}`"
:rules="[(val) => !!val || `${'กรุณาเลือกวันที่สมัคร'}`]"
>
<template v-slot:prepend>
<q-icon
@ -227,12 +226,11 @@
<q-input
outlined
dense
class="full-width datepicker q-mb-md"
class="full-width datepicker"
:model-value="
datePayment != null ? dateThaiRange(datePayment) : null
"
:label="`${'วันที่ชำระเงิน'}`"
:rules="[(val) => !!val || `${'กรุณาเลือกวันที่ชำระเงิน'}`]"
>
<template v-slot:prepend>
<q-icon
@ -267,12 +265,11 @@
<q-input
outlined
dense
class="full-width datepicker q-mb-md"
class="full-width datepicker"
:model-value="
dateAnnounce != null ? date2Thai(dateAnnounce) : null
"
:label="`${'วันประกาศผลสอบ'}`"
:rules="[(val) => !!val || `${'กรุณาเลือกวันประกาศผลสอบ'}`]"
>
<template v-slot:prepend>
<q-icon
@ -637,7 +634,6 @@
v-model="note"
label="หมายเหตุ"
dense
lazy-rules
type="textarea"
/>
</div>

1
src/modules/07_insignia/components/2_Manage/Tab1.vue
View file

@ -743,7 +743,6 @@ function clearInsigniaFilters(name: string) {
onMounted(async () => {
organizationOptions.value = await DataStore.optionsTypeOc;
organization.value = await DataStore.typeOc;
console.log(organization.value);
if (organization.value !== "" || organization.value !== undefined) {
if (props.fecthInsigniaByOc) {

55
src/modules/07_insignia/components/2_Manage/listManage.vue
View file

@ -63,7 +63,7 @@ async function fecthlistRound() {
DataStore.roundId = round.value;
roundName.value = lastValue.name;
await fecthStat(round.value);
await fecthAgency();
// await fecthAgency();
}
})
.catch((err) => {
@ -92,47 +92,59 @@ const fecthStat = async (id: string) => {
/** funcion เช็คหน่วยงาน*/
async function fecthAgency() {
showLoader();
await http
.get(config.API.insigniaAgency())
.get(config.API.keycloakPosition())
.then(async (res) => {
loadview.value = true;
DataStore.agency = res.data.result;
DataStore.agency = res.data.result.rootId;
DataStore.typeOc = DataStore.agency;
if (roleDataStore.adminRole) {
await fecthType(); // ถ้าไม่มีหนวยงานจะเรียกหน่วยงานทั้งหมด
} else {
}
})
.catch((err) => {
messageError($q, err);
})
.finally(() => {
loading.value = true;
hideLoader();
});
}
/** funcion เรียกหน่อยวงาน*/
async function fecthType() {
await http
.get(config.API.typeOc())
function fetchActiveId() {
http
.get(config.API.activeOrganization)
.then((res) => {
optiontypeOc.value = res.data.result.map((e: any) => ({
id: e.organizationId,
name: e.organizationName,
}));
DataStore.fetchOption(optiontypeOc.value); //ค่าของหน่วยงานทั้งหมดไว้ที่ DataStore
const data = res.data.result;
fetchListOrg(data.activeId);
})
.catch((err) => {
messageError($q, err);
});
}
function fetchListOrg(id: string) {
showLoader();
http
.get(config.API.orgByid(id))
.then(async (res) => {
const data = await res.data.result.map((item: any) => ({
id: item.orgTreeId,
name: item.orgName,
}));
optiontypeOc.value = data;
DataStore.fetchOption(optiontypeOc.value); //ค่าของหน่วยงานทั้งหมดไว้ที่ DataStore
fecthAgency();
})
.catch((err) => {
messageError($q, err);
})
.finally(() => {
hideLoader();
});
}
/**function เรียกประเภทเครื่องราช*/
async function fecthInsignia() {
await http
.get(config.API.insignia)
.get(config.API.insigniaOrg)
.then((res) => {
let data = res.data.result;
DataStore.fetchInsigniaType(data);
@ -397,6 +409,7 @@ async function uploadFile(event: any) {
onMounted(async () => {
tab.value = DataStore.mainTab;
await fecthlistRound();
await fetchActiveId();
DataStore.dataInsigniaType.length === 0 && (await fecthInsignia());
});
</script>
@ -652,13 +665,13 @@ onMounted(async () => {
<!-- popup หมายเหตุ -->
<DialogPopupReason
v-model:modal="modalPopupBackToEdit"
v-model:modal="modalPopupBackToEdit"
title="หมายเหตุการตีกลับ"
label="หมายเหตุ"
:savaForm="backToEdit"
/>
<DialogPopupReason
v-model:modal="modalbackInsignia2Role"
v-model:modal="modalbackInsignia2Role"
title="หมายเหตุการตีกลับ"
label="หมายเหตุ"
:savaForm="backToEditinsignia2Role"

4
src/modules/07_insignia/components/4_Allocate/Main.vue
View file

@ -134,7 +134,7 @@ async function fecthRound() {
/** function เรียกประเภทเครื่องราช*/
async function fecthInsignia() {
await http
.get(config.API.insignia)
.get(config.API.insigniaOrg)
.then((res) => {
let data = res.data.result;
DataStore.fetchDatainsignia(data);
@ -151,7 +151,7 @@ async function fecthInsignia() {
/** function เรียก Tab*/
const fecthInsigniaType = async () => {
await http(config.API.insigniaType)
await http(config.API.insigniaTypeOrg)
.then((res) => {
let data = res.data.result;
DataStore.fetchDatainsigniaType(data);

4
src/modules/07_insignia/components/5_Borrow/Main.vue
View file

@ -307,7 +307,7 @@ async function fecthRound() {
/** function เรียกประเภทเครื่องราชฯ*/
async function fecthInsignia() {
await http
.get(config.API.insignia)
.get(config.API.insigniaOrg)
.then((res) => {
let data = res.data.result;
DataStore.fetchDataInsignia(data);
@ -324,7 +324,7 @@ async function fecthInsignia() {
/** function เรียกระดับเครื่องราชฯ Tab*/
async function fecthInsigniaType() {
await http(config.API.insigniaType)
await http(config.API.insigniaTypeOrg)
.then(async (res) => {
let data = res.data.result;
DataStore.fetchDatainsigniaType(data);

2
src/modules/07_insignia/storeAllocate.ts
View file

@ -23,7 +23,7 @@ export const useAllocateDataStore = defineStore("insigniaallocate", () => {
insigniaOp.value.push({
name: `${e.name} (${e.shortName})`,
id: e.id,
type: e.insigniaType.id,
type: e.insigniaTypeId,
});
});
data.forEach((e: any) => {

2
src/modules/07_insignia/storeBrrow.ts
View file

@ -41,7 +41,7 @@ export const useBrrowDataStore = defineStore("insigniaBrrow", () => {
insigniaOp.value.push({
name: `${e.name} (${e.shortName})`,
id: e.id,
type: e.insigniaType.id,
type: e.insigniaTypeId,
});
});
data.forEach((e: any) => {

3
src/modules/07_insignia/storeResult.ts
View file

@ -43,9 +43,10 @@ export const useResultDataStore = defineStore("insigniaResult", () => {
insigniaOp.value.push({
name: `${e.name} (${e.shortName})`,
id: e.id,
insigniaType: e.insigniaType.id,
insigniaType: e.insigniaTypeId,
});
});
data.forEach((e: any) => {
insigniaOp2.value.push({ name: `${e.name} (${e.shortName})`, id: e.id });
});

5
src/modules/07_insignia/views/ResultPage.vue
View file

@ -254,7 +254,7 @@ async function fecthRound() {
/** function เรียกประเภทเครื่องราช*/
async function fecthInsignia() {
await http
.get(config.API.insignia)
.get(config.API.insigniaOrg)
.then((res) => {
let data = res.data.result;
DataStore.fetchDatainsignia(data);
@ -266,7 +266,7 @@ async function fecthInsignia() {
/** function เรียกระดับเครื่องราช*/
async function fecthInsigniaType() {
await http(config.API.insigniaType)
await http(config.API.insigniaTypeOrg)
.then((res) => {
let data = res.data.result;
DataStore.fetchDatainsigniaType(data);
@ -299,6 +299,7 @@ watch(tab, () => {
if (tab.value !== "doc") {
DataStore.insignia = "";
fecthlistInsignia();
insigniaTypeOption.value = DataStore.insigniaOp.filter(
(e: any) => e.insigniaType == tab.value || e.name == "ทั้งหมด"
);

24
src/modules/14_KPI/components/Tab/01_Assessment.vue
View file

@ -199,14 +199,22 @@ watch(
}
);
onMounted(() => {
getCriteria();
fetchListPlanned();
fetchListRole();
fetchAssigned();
setTimeout(() => {
hideLoader();
}, 1000);
onMounted(async () => {
showLoader();
try {
await Promise.all([
getCriteria(),
fetchListPlanned(),
fetchListRole(),
fetchAssigned(),
]);
} catch (err) {
messageError($q, err);
} finally {
setTimeout(() => {
hideLoader();
}, 4000);
}
});
</script>

276
src/modules/14_KPI/components/Tab/Dialog/DialogGovernment.vue Normal file
View file

@ -0,0 +1,276 @@
<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";
const $q = useQuasar();
const mixin = useCounterMixin();
const {
dialogConfirm,
success,
showLoader,
hideLoader,
messageError,
findPosMasterNoOld,
findOrgNameOld,
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 columns = ref<QTableProps["columns"]>([
{
name: "no",
align: "left",
label: "ลำดับ",
sortable: false,
field: "no",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "name",
align: "left",
label: "ชื่อ-นามสกุล",
sortable: true,
field: "name",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
format(val, row) {
return `${row.prefix}${row.firstName} ${row.lastName}`;
},
},
{
name: "posMasterNoOld",
align: "left",
label: "เลขที่ตำแหน่ง",
sortable: true,
field: "posMasterNoOld",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
format(val, row) {
return findPosMasterNoOld(row);
},
},
{
name: "positionOld",
align: "left",
label: "ตำแหน่งในสายงาน",
sortable: true,
field: "positionOld",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "positionLevel",
align: "left",
label: "ประเภทตำแหน่ง",
sortable: true,
field: "positionLevel",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
format(val, row) {
let name = "";
if (row.posTypeNameOld && row.posLevelNameOld) {
name = `${row.posTypeNameOld} (${row.posLevelNameOld})`;
} else if (row.posTypeNameOld) {
name = `${row.posTypeNameOld}`;
} else if (row.posLevelNameOld) {
name = `(${row.posLevelNameOld})`;
} else name = "-";
return name;
},
},
{
name: "organizationPositionOld",
align: "left",
label: "สังกัด",
sortable: true,
field: "organization",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
format: (val, row) => findOrgNameOld(row),
},
{
name: "organization",
align: "left",
label: "หน่วยงานที่ให้ช่วยราชการ",
sortable: true,
field: "organization",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "dateStart",
align: "left",
label: "วันเริ่มช่วยราชการ",
sortable: true,
field: "dateStart",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
format: (val) => date2Thai(val),
},
{
name: "dateEnd",
align: "left",
label: "วันสิ้นสุดการช่วยราชการ",
sortable: true,
field: "dateEnd",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
format: (val) => date2Thai(val),
},
{
name: "createdAt",
align: "left",
label: "วันที่ดำเนินการ",
sortable: true,
field: "createdAt",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
format: (val) => date2Thai(val),
},
{
name: "status",
align: "left",
label: "สถานะ",
sortable: true,
field: "status",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
format: (val) => statusText(val),
},
]);
const visibleColumns = ref<string[]>([
"no",
"name",
"posMasterNoOld",
"positionOld",
"positionLevel",
"organizationPositionOld",
"organization",
"dateStart",
"dateEnd",
"createdAt",
"status",
]);
const statusText = (val: string) => {
switch (val) {
case "WAITTING":
return "รอดำเนินการ";
case "PENDING":
return "เลือกตำแหน่งแล้ว";
case "APPROVE":
return "อนุมัติ";
case "REJECT":
return "ไม่อนุมัติ";
case "REPORT":
return "ส่งรายชื่อไปออกคำสั่ง";
case "DONE":
return "ออกคำสั่งเสร็จแล้ว";
default:
return "-";
}
};
function close() {
modal.value = false;
}
function getData(){
showLoader()
http
.get(config.API.placementKeycloak+`/${id.value}`)
.then((res)=>{
const data = res.data.result
rows.value = data
}).catch((e)=>{
messageError($q,e)
}).finally(()=>{
hideLoader()
})
}
watch(()=>modal.value,(n)=>{
if(n == true){
getData()
}
})
</script>
<template>
<q-dialog persistent v-model="modal">
<q-card bordered style="min-width: 80vw">
<DialogHeader tittle="ข้อมูลการช่วยราชการ" :close="close" />
<q-separator />
<q-card-section>
<div class="row">
<div class="col-12">
<d-table
ref="table"
:columns="columns"
:rows="rows"
:filter="filterKeyword"
row-key="id"
flat
bordered
:paging="true"
dense
:rows-per-page-options="[10, 25, 50, 100]"
:visible-columns="visibleColumns"
>
<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 === 'no'">
{{ props.rowIndex + 1 }}
</div>
<div v-else>
{{ col.value ? col.value : "-" }}
</div>
</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>
</q-card-section>
</q-card>
</q-dialog>
</template>

64
src/modules/14_KPI/components/Tab/Dialog/DialogStatus.vue Normal file
View file

@ -0,0 +1,64 @@
<script setup lang="ts">
import DialogHeader from "@/components/DialogHeader.vue";
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";
const route = useRoute();
const work = ref<boolean>(false);
const $q = useQuasar();
const mixin = useCounterMixin();
const { showLoader, hideLoader, messageError } = mixin;
const modal = defineModel<boolean>("modal", { required: true });
const profileId = defineModel<string>("profileId", { required: true });
function close() {
modal.value = false;
}
function getData() {
showLoader();
http
.get(config.API.profilePosition() + `/${profileId.value}`)
.then((res) => {
const data = res.data.result.isProbation;
work.value = data;
})
.catch((e) => {
messageError($q, e);
})
.finally(() => {
hideLoader();
});
}
watch(
() => modal.value,
(n) => {
if (n == true) {
getData();
}
}
);
</script>
<template>
<q-dialog persistent v-model="modal">
<q-card bordered style="min-width: 20vw">
<DialogHeader tittle="สถานะการทดลองงาน" :close="close" />
<q-separator />
<q-card-section class="q-pa-sm">
<div class="row">
<div class="col-12 text-center bg-grey-1 q-pa-md rounded-borders">
<span class="text-weight-bold text-teal">{{
work ? `อยู่ระหว่างทดลองงาน` : "พ้นจากการทดลองงาน"
}}</span>
</div>
</div>
</q-card-section>
</q-card>
</q-dialog>
</template>

15
src/modules/14_KPI/components/Tab/TabMain.vue
View file

@ -43,14 +43,6 @@ const splitterModel = ref<number>(12);
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"
@ -62,12 +54,7 @@ const splitterModel = ref<number>(12);
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>

15
src/modules/14_KPI/interface/index/Main.ts
View file

@ -2,6 +2,10 @@ interface DataOption {
id: string;
name: string;
}
interface ItemsTab {
label: string;
name: string;
}
interface ItemsMenu {
label: string;
@ -61,4 +65,13 @@ interface FormData {
qualification: string;
}
export type { DataOption, ItemsMenu,NewPagination,typeOp,ResponsePreson,tableType,FormData };
export type {
DataOption,
ItemsMenu,
NewPagination,
typeOp,
ResponsePreson,
tableType,
FormData,
ItemsTab,
};

27
src/modules/14_KPI/interface/response/KPI.ts Normal file
View file

@ -0,0 +1,27 @@
interface ResUserEvaluation {
capacityPoint: null;
commanderHighId: null | string;
commanderId: null | string;
createdAt: string;
durationKPI: string;
evaluationReqEdit: null | string;
evaluationResults: string;
evaluationStatus: string;
evaluatorId: string;
firstName: string;
id: string;
kpiPeriodId: string;
lastName: string;
plannedPoint: null | string;
posExecutiveName: null | string;
posLevelName: string;
posTypeName: string;
position: string;
prefix: string;
profileId: string;
rolePoint: null | string;
specialPoint: null | string;
year: number;
}
export type { ResUserEvaluation };

104
src/modules/14_KPI/router.ts
View file

@ -13,6 +13,7 @@ const roundPage = () => import("@/modules/14_KPI/views/round.vue");
const listPage = () => import("@/modules/14_KPI/views/list.vue");
const detailPage = () => import("@/modules/14_KPI/views/detail.vue");
const reportPage = () => import("@/modules/14_KPI/views/report.vue");
const detailView = () => import("@/modules/14_KPI/views/detailView.vue");
export default [
{
@ -25,97 +26,7 @@ export default [
Role: "evaluateKPI",
},
},
// {
// path: "/KPI-indicator-plan",
// name: "KPIIndicatorByPlan",
// component: IndicatorByPlan,
// meta: {
// Auth: true,
// Key: [1.1],
// Role: "evaluateKPI",
// },
// },
// {
// path: "/KPI-indicator-plan/add",
// name: "KPIIndicatorByPlan/Add",
// component: IndicatorByPlanDetail,
// meta: {
// Auth: true,
// Key: [1.1],
// Role: "evaluateKPI",
// },
// },
// {
// path: "/KPI-indicator-plan/:id",
// name: "KPIIndicatorByPlanByid",
// component: IndicatorByPlanDetail,
// meta: {
// Auth: true,
// Key: [1.1],
// Role: "evaluateKPI",
// },
// },
// {
// path: "/KPI-indicator-role",
// name: "KPIIndicatorByRole",
// component: IndicatorByRole,
// meta: {
// Auth: true,
// Key: [1.1],
// Role: "evaluateKPI",
// },
// },
// {
// path: "/KPI-indicator-role/add",
// name: "KPIIndicatorByRoleAdd",
// component: IndicatorByRoleDetail,
// meta: {
// Auth: true,
// Key: [1.1],
// Role: "evaluateKPI",
// },
// },
// {
// path: "/KPI-indicator-role/:id",
// name: "KPIIndicatorByRoleByid",
// component: IndicatorByRoleDetail,
// meta: {
// Auth: true,
// Key: [1.1],
// Role: "evaluateKPI",
// },
// },
// {
// path: "/KPI-competency",
// name: "KPICompetency",
// component: competencyPage,
// meta: {
// Auth: true,
// Key: [1.1],
// Role: "evaluateKPI",
// },
// },
// {
// path: "/KPI-competency/add",
// name: "KPICompetencyAdd",
// component: competencyAddPage,
// meta: {
// Auth: true,
// Key: [1.1],
// Role: "evaluateKPI",
// },
// },
// {
// path: "/KPI-competency/:id",
// name: "KPICompetencyByid",
// component: competencyAddPage,
// meta: {
// Auth: true,
// Key: [1.1],
// Role: "evaluateKPI",
// },
// },
{
path: "/KPI-list",
name: "KPI​List",
@ -129,7 +40,7 @@ export default [
{
path: "/KPI-list/:id",
name: "KPIDetail",
component: detailPage,
component: detailView,
meta: {
Auth: true,
Key: [1.1],
@ -146,4 +57,15 @@ export default [
Role: "evaluateKPI",
},
},
{
path: "/KPI-list/new/:id",
name: "KPIDetailnew",
component: detailView,
meta: {
Auth: true,
Key: [1.1],
Role: "evaluateKPI",
},
},
];

3
src/modules/14_KPI/views/detail.vue
View file

@ -59,14 +59,13 @@ async function fetchEvaluation() {
.get(config.API.kpiUserEvaluation + `/${id.value}`)
.then(async (res) => {
const data = await res.data.result;
store.dataEvaluation = await data;
formProfile.status = store.convertStatus(data.evaluationStatus);
formProfile.result = store.convertResults(data.evaluationResults);
await store.checkCompetency();
await store.checkCompetencyDefaultCompetencyLevel();
fetchProfile(data.profileId);
await fetchProfile(data.profileId);
plannedPoint.value = data.plannedPoint == null ? "" : data.plannedPoint;
rolePoint.value = data.rolePoint == null ? "" : data.rolePoint;

719
src/modules/14_KPI/views/detailView.vue Normal file
View file

@ -0,0 +1,719 @@
<script setup lang="ts">
import { ref, onMounted, reactive, computed, watch } from "vue";
import { useRoute, useRouter } from "vue-router";
import { useQuasar } from "quasar";
import http from "@/plugins/http";
import config from "@/app.config";
import Avatar from "@/assets/!avatar_user.jpg";
import DialogHeader from "@/components/DialogHeader.vue";
import Assessment from "@/modules/14_KPI/components/Tab/01_Assessment.vue";
import File from "@/modules/14_KPI/components/Tab/05_File.vue";
import DialogGovernment from "@/modules/14_KPI/components/Tab/Dialog/DialogGovernment.vue";
import DialogStatus from "@/modules/14_KPI/components/Tab/Dialog/DialogStatus.vue";
import type {
DataOption,
ItemsTab,
} from "@/modules/14_KPI/interface/index/Main";
import type { ResUserEvaluation } from "@/modules/14_KPI/interface/response/KPI";
import { useKpiDataStore } from "@/modules/14_KPI/store";
import { useCounterMixin } from "@/stores/mixin";
const $q = useQuasar();
const route = useRoute();
const router = useRouter();
const store = useKpiDataStore();
const { showLoader, hideLoader, messageError, dialogConfirm, success } =
useCounterMixin();
const kpiId = ref<string>(route.params.id as string);
const profileId = ref<string>("");
/** Header*/
const dataEvaluation = ref<ResUserEvaluation>();
const avartarProfile = ref<string>("");
function fetchEvaluation() {
http
.get(config.API.kpiUserEvaluation + `/${kpiId.value}`)
.then((res) => {
const data = res.data.result;
store.dataEvaluation = data;
dataEvaluation.value = data;
profileId.value = data.profileId;
fetchProfile(data.profileId);
fetchProfilePosition(data.profileId);
})
.catch((e) => {
messageError($q, e);
})
.finally(() => {
if (store.dataEvaluation) {
Promise.all([
store.checkStep(),
store.checkCompetency(),
store.checkCompetencyDefaultCompetencyLevel(),
]);
}
});
}
function fetchProfilePosition(id: string) {
http
.get(config.API.profilePosition() + `/${id}`)
.then((res) => {
const data = res.data.result;
store.dataProfile = data;
})
.catch((e) => {
messageError($q, e);
});
}
function sendToEvaluatore(status: string) {
dialogConfirm(
$q,
() => {
if (kpiId.value) {
showLoader();
http
.put(config.API.kpiSendToStatus(kpiId.value), {
status: status,
})
.then(() => {
success($q, "ส่งข้อตกลงให้ผู้ประเมินอนุมัติสำเร็จ");
close();
})
.catch((e) => {
messageError($q, e);
})
.finally(() => {
hideLoader();
});
}
},
"ยืนยันการส่งข้อตกลงให้ผู้ประเมินอนุมัติ",
"ต้องการยืนยันส่งข้อตกลงนี้ให้ผู้ประเมินอนุมัติใช่หรือไม่?"
);
}
function requireEdit() {
dialogConfirm(
$q,
() => {
if (kpiId.value) {
showLoader();
http
.put(config.API.kpiReqEdit(kpiId.value), {
status: "EVALUATOR",
})
.then((res) => {
success($q, "ขอแก้ไขสำเร็จ");
close();
})
.catch((e) => {
messageError($q, e);
})
.finally(() => {
hideLoader();
});
}
},
"ยืนยันการขอแก้ไขข้อตกลง",
"ต้องการยืนยันการขอแก้ไขข้อตกลงนี้ใช่หรือไม่?"
);
}
function fetchProfile(id: string) {
http
.get(
config.API.fileByFile("ทะเบียนประวัติ", "โปรไฟล์", id, `profile-${id}`)
)
.then((res) => {
avartarProfile.value = res.data.downloadUrl;
})
.catch(() => {
avartarProfile.value = Avatar;
});
}
/** Dialog ข้อมูลผู้ประเมิน*/
const modal = ref<boolean>(false);
const evaluatorIdOp = ref<DataOption[]>([]);
const commanderIdOp = ref<DataOption[]>([]);
const commanderHighOp = ref<DataOption[]>([]);
const evaluatorIdMainOp = ref<DataOption[]>([]);
const commanderIdMainOp = ref<DataOption[]>([]);
const commanderHighMainOp = ref<DataOption[]>([]);
const evaluatorId = ref<any>(null);
const commanderId = ref<any>(null);
const commanderHighId = ref<any>(null);
function openDialogAssessor() {
modal.value = true;
fetchListAssessor();
}
function closeDialogAssessor() {
modal.value = false;
evaluatorId.value = null;
commanderId.value = null;
commanderHighId.value = null;
}
function onSubmit() {
dialogConfirm($q, () => {
if (kpiId.value) {
showLoader();
http
.put(config.API.kpiEvaluationCheck + `/${kpiId.value}`, {
evaluatorId: evaluatorId.value ? evaluatorId.value.id : null,
commanderId: commanderId.value ? commanderId.value.id : null,
commanderHighId: commanderHighId.value
? commanderHighId.value.id
: null,
})
.then(() => {
close();
fetchEvaluation();
success($q, "บันทึกสำเร็จ");
})
.catch((e) => {
messageError($q, e);
})
.finally(() => {
hideLoader();
});
}
});
}
function fetchListAssessor() {
http
.get(config.API.Kpiorg)
.then((res) => {
const data = res.data.result;
evaluatorIdMainOp.value = data.caregiver.map((i: any) => ({
id: i.id,
name: `${i.prefix}${i.firstName} ${i.lastName}`,
}));
commanderIdMainOp.value = data.commander.map((i: any) => ({
id: i.id,
name: `${i.prefix}${i.firstName} ${i.lastName}`,
}));
commanderHighMainOp.value = data.chairman.map((i: any) => ({
id: i.id,
name: `${i.prefix}${i.firstName} ${i.lastName}`,
}));
evaluatorId.value = data.caregiver
.map((i: any) => ({
id: i.id,
name: `${i.prefix}${i.firstName} ${i.lastName}`,
}))
.find((i: any) => i.id == store.dataEvaluation.evaluatorId);
commanderId.value = data.caregiver
.map((i: any) => ({
id: i.id,
name: `${i.prefix}${i.firstName} ${i.lastName}`,
}))
.find((i: any) => i.id == store.dataEvaluation.commanderId);
commanderHighId.value = data.caregiver
.map((i: any) => ({
id: i.id,
name: `${i.prefix}${i.firstName} ${i.lastName}`,
}))
.find((i: any) => i.id == store.dataEvaluation.commanderHighId);
})
.catch((e) => {
messageError($q, e);
})
.finally(() => {});
}
function filterOption(val: any, update: Function, refData: string) {
switch (refData) {
case "evaluatorIdOp":
update(() => {
evaluatorIdOp.value = evaluatorIdMainOp.value.filter(
(v: any) => v.name.indexOf(val) > -1
);
});
break;
case "commanderIdOp":
update(() => {
commanderIdOp.value = commanderIdMainOp.value.filter(
(v: any) => v.name.indexOf(val) > -1
);
});
break;
case "commanderHighOp":
update(() => {
commanderHighOp.value = commanderHighMainOp.value.filter(
(v: any) => v.name.indexOf(val) > -1
);
});
break;
default:
break;
}
}
const modalGovernment = ref<boolean>(false);
function openGovernment() {
modalGovernment.value = true;
}
const modalStatus = ref<boolean>(false);
function openStatus() {
modalStatus.value = true;
}
/** ์ Body*/
const splitterModel = ref<number>(15);
const itemsTab = ref<ItemsTab[]>([
{
name: "1",
label: "จัดทำแบบฟอร์มการประเมิน",
},
{
name: "2",
label: "รายงานความก้าวหน้า",
},
{
name: "3",
label: "รายงานผลสำเร็จของงาน",
},
{
name: "5",
label: "ไฟล์เอกสาร",
},
]);
onMounted(() => {
fetchEvaluation();
});
</script>
<template>
<div class="toptitle col-12 row items-center">
<q-btn
icon="mdi-arrow-left"
unelevated
round
dense
flat
color="primary"
class="q-mr-sm"
@click="router.push(`/KPI-list`)"
/>
รายละเอียดการประเมินผลการปฏิบัติราชการระดับบุคคล
</div>
<!-- Profile -->
<q-card>
<q-card-section style="padding: 0px">
<div
class="absolute-center-left"
style="left: 2%; top: 50%; transform: translateY(-50%)"
>
<q-avatar size="90px">
<q-img :src="avartarProfile" />
</q-avatar>
</div>
<div class="row col-12">
<div class="row items-center col-12 q-pa-sm">
<div class="col-12" style="padding-left: 12%">
<div class="row col-12 items-center">
<span class="text-h6 text-weight-medium text-primary">
{{
`${dataEvaluation?.prefix ?? ""}${
dataEvaluation?.firstName
} ${dataEvaluation?.lastName}`
}}
</span>
<q-space />
<div class="q-gutter-x-sm">
<span
class="text-red"
v-if="
(store.dataEvaluation.posExecutiveName == null &&
store.indicatorWeightTotal != 100) ||
(store.dataEvaluation.posExecutiveName != null &&
(store.indicatorWeight1Total != 100 ||
store.indicatorWeight2Total != 20))
"
>*น้ำหนัก(ร้อยละ) ผลสัมฤทธิ์ของงานไม่ถูกต้อง</span
>
<q-btn
v-if="
store.rolePerson == 'USER' &&
store.dataEvaluation.evaluationStatus == 'NEW'
"
:disabled="
(store.dataEvaluation.posExecutiveName == null &&
store.indicatorWeightTotal != 100) ||
(store.dataEvaluation.posExecutiveName != null &&
(store.indicatorWeight1Total != 100 ||
store.indicatorWeight2Total != 20))
"
unelevated
round
icon="mdi-send"
color="grey-2"
text-color="blue-6"
size="md"
>
<q-tooltip>ส่งให้ผู้ประเมินอนุมัติ</q-tooltip>
</q-btn>
<q-btn
v-if="
store.rolePerson == 'USER' &&
store.dataEvaluation.evaluationStatus == 'EVALUATING'
"
unelevated
round
icon="mdi-send"
color="grey-2"
text-color="blue-6"
size="md"
@click="sendToEvaluatore('EVALUATING_EVALUATOR')"
>
<q-tooltip>ส่งให้ผู้ประเมินอนุมัติผลการประเมิน</q-tooltip>
</q-btn>
<q-btn
v-if="
store.rolePerson == 'USER' &&
store.tabOpen < 3 &&
store.dataEvaluation.evaluationStatus != 'NEW' &&
(store.dataEvaluation.evaluationReqEdit == null ||
store.dataEvaluation.evaluationReqEdit == 'DONE')
"
:disabled="store.dataEvaluation.evaluatorId == null"
unelevated
round
icon="mdi-file-edit"
color="grey-2"
text-color="red-6"
size="md"
@click="requireEdit()"
>
<q-tooltip>ขอแก้ไขข้อตกลง</q-tooltip>
</q-btn>
<q-btn
unelevated
round
icon="mdi-account"
color="grey-2"
text-color="edit"
size="md"
@click="openDialogAssessor"
>
<q-tooltip>{{
dataEvaluation?.evaluationStatus === "NEW" &&
store.rolePerson === "USER"
? "แก้ไขผู้ประเมิน"
: "ข้อมูลผู้ประเมิน"
}}</q-tooltip>
</q-btn>
<q-btn
unelevated
round
icon="mdi-file-eye-outline"
color="grey-2"
text-color="primary"
size="md"
@click="openGovernment"
>
<q-tooltip>ดูข้อมูลการช่วยราชการ</q-tooltip>
</q-btn>
<q-btn
unelevated
round
color="grey-2"
text-color="blue-5"
icon="mdi-file-eye-outline"
size="md"
@click="openStatus"
>
<q-tooltip>ดูข้อมูลการทดลองงาน</q-tooltip>
</q-btn>
</div>
</div>
</div>
</div>
<div class="row items-center bg-toolbar col-12 q-pa-sm">
<div class="col-12 q-py-xs" style="padding-left: 12%">
<div class="row no-wrap">
<div class="col-2">
<div class="column">
<span class="text-grey-6">ตำแหน่งในสายงาน</span>
<span class="text-weight-medium text-dark">
{{ dataEvaluation?.position }}
</span>
</div>
</div>
<div class="col-2">
<div class="column">
<span class="text-grey-6">ประเภทตำแหน่ง</span>
<span class="text-weight-medium text-dark">
{{ dataEvaluation?.posTypeName }}
</span>
</div>
</div>
<div class="col-2">
<div class="column">
<span class="text-grey-6">ระดับตำแหน่ง</span>
<span class="text-weight-medium text-dark">
{{ dataEvaluation?.posLevelName }}
</span>
</div>
</div>
<div class="col-2">
<div class="column">
<span class="text-grey-6">สถานะการประเมิน</span>
<span class="text-weight-medium text-dark">
{{
dataEvaluation?.evaluationStatus
? store.convertStatus(dataEvaluation?.evaluationStatus)
: "-"
}}
</span>
</div>
</div>
<div class="col-2">
<div class="column">
<span class="text-grey-6">ผลการประเมิน</span>
<span class="text-weight-medium text-dark">
{{
dataEvaluation?.evaluationResults
? store.convertResults(dataEvaluation.evaluationResults)
: "-"
}}
ผลการประเมิน
</span>
</div>
</div>
<div class="col-2">
<div class="column">
<span class="text-grey-6">คะแนนประเมิน</span>
<span class="text-weight-medium text-primary">
คะแนนประเมิน
{{
dataEvaluation?.posExecutiveName === null
? (
store.indicatorScoreVal +
store.competencyScoreVal +
store.devScoreVal
).toFixed(2)
: (
store.excusiveIndicator1ScoreVal +
store.excusiveIndicator2ScoreVal +
store.competencyScoreVal
).toFixed(2)
}}
</span>
</div>
</div>
</div>
</div>
</div>
</div>
</q-card-section>
</q-card>
<q-card class="q-mt-md">
<q-card-section style="padding: 0px">
<q-splitter v-model="splitterModel" disable>
<template v-slot:before>
<q-tabs
v-model="store.tabMain"
vertical
class="text-grey-7 text-weight-light"
active-class="bg-blue-1 text-blue-8 text-weight-bold"
>
<q-tab name="1" label="จัดทำข้อตกลง" />
<q-tab
name="2"
label="รายงานความก้าวหน้า"
:disable="store.tabOpen < 2"
/>
<q-tab
name="3"
label="รายงานผลสำเร็จของงาน"
:disable="store.tabOpen < 3"
/>
<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'" />
<Assessment v-if="store.tabMain === '3'" />
<File v-if="store.tabMain === '5'" />
</q-tab-panel>
</q-tab-panels>
</template> </q-splitter
></q-card-section>
</q-card>
<q-dialog v-model="modal" persistent>
<q-card bordered style="width: 50vh">
<q-form greedy @submit.prevent @validation-success="onSubmit">
<DialogHeader
:tittle="
store.dataEvaluation.evaluationStatus === 'NEW' &&
store.rolePerson === 'USER'
? 'แก้ไขผู้ประเมิน'
: 'ข้อมูลผู้ประเมิน'
"
:close="closeDialogAssessor"
/>
<q-separator />
<q-card-section>
<div class="column q-gutter-sm">
<q-select
:readonly="
!(
store.dataEvaluation.evaluationStatus === 'NEW' &&
store.rolePerson === 'USER'
)
"
v-model="evaluatorId"
outlined
label="ผู้ประเมิน"
dense
option-label="name"
option-value="id"
:options="evaluatorIdOp"
class="inputgreen"
map-options
hide-bottom-space
lazy-rules
:rules="[ (val:string) => !!val ||
`${'กรุณาเลือกผู้ประเมิน'}`, ]"
use-input
@filter="(inputValue:any,
doneFn:Function) => filterOption(inputValue, doneFn,'evaluatorIdOp'
) "
/>
<q-select
:readonly="
!(
store.dataEvaluation.evaluationStatus === 'NEW' &&
store.rolePerson === 'USER'
)
"
v-model="commanderId"
outlined
label="ผู้บังคับบัญชาเหนือขึ้นไป"
dense
option-label="name"
option-value="id"
:options="commanderIdOp"
map-options
class="inputgreen"
use-input
@filter="(inputValue:any,
doneFn:Function) => filterOption(inputValue, doneFn,'commanderIdOp'
) "
>
<template
v-if="
store.dataEvaluation.evaluationStatus === 'NEW' &&
store.rolePerson === 'USER' &&
commanderId
"
v-slot:append
>
<q-icon
name="cancel"
@click.stop.prevent="commanderId = null"
class="cursor-pointer"
/>
</template>
</q-select>
<q-select
:readonly="
!(
store.dataEvaluation.evaluationStatus === 'NEW' &&
store.rolePerson === 'USER'
)
"
v-model="commanderHighId"
outlined
label="ผู้บังคับบัญชาเหนือขึ้นไปอีกชั้นหนึ่ง"
dense
option-label="name"
option-value="id"
:options="commanderHighOp"
map-options
use-input
class="inputgreen"
@filter="(inputValue:any,
doneFn:Function) => filterOption(inputValue, doneFn,'commanderHighOp'
) "
>
<template
v-if="
store.dataEvaluation.evaluationStatus === 'NEW' &&
store.rolePerson === 'USER' &&
commanderHighId
"
v-slot:append
>
<q-icon
name="cancel"
@click.stop.prevent="commanderHighId = null"
class="cursor-pointer"
/>
</template>
</q-select>
</div>
</q-card-section>
<q-separator />
<q-card-actions
v-if="
store.dataEvaluation.evaluationStatus === 'NEW' &&
store.rolePerson === 'USER'
"
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>
<DialogGovernment v-model:modal="modalGovernment" />
<DialogStatus v-model:modal="modalStatus" :profileId="profileId" />
</template>
<style scoped>
.bg-toolbar {
background-color: #f2fbfa;
}
.absolute-center-left {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
</style>