updated KPI
This commit is contained in:
parent
465afc25be
commit
c7ec715952
2 changed files with 266 additions and 93 deletions
|
|
@ -153,6 +153,16 @@ const columns = ref<QTableProps["columns"]>([
|
|||
style: "font-size: 14px",
|
||||
format: (val) => statusText(val),
|
||||
},
|
||||
{
|
||||
name: "commandNo",
|
||||
align: "left",
|
||||
label: "เลขที่คำสั่ง",
|
||||
sortable: true,
|
||||
field: "commandNo",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
format: (val) => statusText(val),
|
||||
},
|
||||
]);
|
||||
const visibleColumns = ref<string[]>([
|
||||
"no",
|
||||
|
|
@ -166,6 +176,7 @@ const visibleColumns = ref<string[]>([
|
|||
"dateEnd",
|
||||
"createdAt",
|
||||
"status",
|
||||
"commandNo",
|
||||
]);
|
||||
|
||||
const statusText = (val: string) => {
|
||||
|
|
@ -195,7 +206,7 @@ function close() {
|
|||
function getData() {
|
||||
showLoader();
|
||||
http
|
||||
.get(config.API.placementKeycloak + `/${store.dataProfile.profileId}`)
|
||||
.get(config.API.placementKeycloak + `/${store.dataEvaluation.profileId}`)
|
||||
.then((res) => {
|
||||
const data = res.data.result;
|
||||
rows.value = data;
|
||||
|
|
|
|||
|
|
@ -13,10 +13,10 @@ import DialogHeader from "@/components/DialogHeader.vue";
|
|||
import type { FormProfile } from "@/modules/08_KPI/interface/request/index";
|
||||
import type { DataOptions } from "@/modules/08_KPI/interface/index/Main";
|
||||
import DialogGovernment from "@/modules/08_KPI/components/Tab/Dialog/DialogGovernment.vue";
|
||||
import DialogStatus from "@/modules/08_KPI/components/Tab/Dialog/DialogStatus.vue";
|
||||
// import DialogStatus from "@/modules/08_KPI/components/Tab/Dialog/DialogStatus.vue";
|
||||
|
||||
const modalGovernment = ref<boolean>(false);
|
||||
const modalStatus = ref<boolean>(false);
|
||||
// const modalStatus = ref<boolean>(false);
|
||||
// const modalScore = ref<boolean>(false);
|
||||
const modalEdit = ref<boolean>(false);
|
||||
const route = useRoute();
|
||||
|
|
@ -132,6 +132,11 @@ async function fetchProfile(id: string) {
|
|||
});
|
||||
}
|
||||
|
||||
function openEvaluator() {
|
||||
modalEdit.value = true;
|
||||
getOrgOp();
|
||||
}
|
||||
|
||||
function close() {
|
||||
modalEdit.value = false;
|
||||
evaluatorId.value = null;
|
||||
|
|
@ -384,7 +389,9 @@ function openGovernment() {
|
|||
modalGovernment.value = true;
|
||||
}
|
||||
function openStatus() {
|
||||
modalStatus.value = true;
|
||||
// router.push(`/probation/${store.dataEvaluation.profileId}`);
|
||||
router.push(`/probation`);
|
||||
// modalStatus.value = true;
|
||||
}
|
||||
|
||||
function sendToEvauator() {
|
||||
|
|
@ -462,6 +469,49 @@ async function goToSummary() {
|
|||
);
|
||||
}
|
||||
|
||||
const modalEvaluatorDetail = ref<boolean>(false);
|
||||
const topic = ref<string>("");
|
||||
function viewEvaluatorDetail(profileId: string, type: string) {
|
||||
modalEvaluatorDetail.value = true;
|
||||
topic.value =
|
||||
type == "evaluator"
|
||||
? "ข้อมูลของผู้ประเมิน"
|
||||
: type == "commander"
|
||||
? "ข้อมูลของผู้บังคับบัญชาเหนือขึ้นไป"
|
||||
: "ข้อมูลของผู้บังคับบัญชาเหนือขึ้นไปอีกชั้นหนึ่ง";
|
||||
fetchProfileEvaluator(profileId);
|
||||
}
|
||||
|
||||
const evaluator = ref<any>({
|
||||
fullName: "",
|
||||
position: "",
|
||||
avartar: "",
|
||||
posTypeName: "",
|
||||
posLevelName: "",
|
||||
org: "",
|
||||
});
|
||||
async function fetchProfileEvaluator(id: string) {
|
||||
showLoader();
|
||||
http
|
||||
.get(config.API.orgPosition + `/${id}`)
|
||||
.then((res) => {
|
||||
console.log(res.data.result);
|
||||
const data = res.data.result;
|
||||
evaluator.value.fullName =
|
||||
data.prefix + data.firstName + " " + data.lastName;
|
||||
evaluator.value.position = data.position;
|
||||
evaluator.value.posTypeName = data.posTypeName;
|
||||
evaluator.value.posLevelName = data.posLevelName;
|
||||
evaluator.value.org = findOrgName(data);
|
||||
})
|
||||
.catch((e) => {
|
||||
messageError($q, e);
|
||||
})
|
||||
.finally(() => {
|
||||
hideLoader();
|
||||
});
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
showLoader();
|
||||
store.isUpdate = await false;
|
||||
|
|
@ -685,7 +735,7 @@ onMounted(async () => {
|
|||
color="grey-2"
|
||||
text-color="edit"
|
||||
size="md"
|
||||
@click="modalEdit = true"
|
||||
@click="openEvaluator()"
|
||||
>
|
||||
<q-tooltip>{{
|
||||
store.dataEvaluation.evaluationStatus === "NEW" &&
|
||||
|
|
@ -820,103 +870,155 @@ onMounted(async () => {
|
|||
<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 ||
|
||||
<div class="row">
|
||||
<div class="col-10">
|
||||
<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,
|
||||
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,
|
||||
/>
|
||||
</div>
|
||||
<div class="col-2 q-pa-sm text-right">
|
||||
<q-icon
|
||||
v-if="evaluatorId"
|
||||
name="mdi-eye"
|
||||
size="sm"
|
||||
color="info"
|
||||
class="cursor-pointer"
|
||||
@click="viewEvaluatorDetail(evaluatorId.id, 'evaluator')"
|
||||
>
|
||||
<q-tooltip>ดูข้อมูลผู้ประเมิน</q-tooltip>
|
||||
</q-icon>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-10">
|
||||
<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
|
||||
>
|
||||
>
|
||||
<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>
|
||||
</div>
|
||||
<div class="col-2 q-pa-sm text-right">
|
||||
<q-icon
|
||||
name="cancel"
|
||||
@click.stop.prevent="commanderId = null"
|
||||
v-if="commanderId"
|
||||
name="mdi-eye"
|
||||
size="sm"
|
||||
color="info"
|
||||
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,
|
||||
@click="viewEvaluatorDetail(commanderId.id, 'commander')"
|
||||
>
|
||||
<q-tooltip>ดูข้อมูลผู้บังคับบัญชาเหนือขึ้นไป</q-tooltip>
|
||||
</q-icon>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-10">
|
||||
<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
|
||||
>
|
||||
>
|
||||
<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>
|
||||
<div class="col-2 q-pa-sm text-right">
|
||||
<q-icon
|
||||
name="cancel"
|
||||
@click.stop.prevent="commanderHighId = null"
|
||||
v-if="commanderHighId"
|
||||
name="mdi-eye"
|
||||
size="sm"
|
||||
color="info"
|
||||
class="cursor-pointer"
|
||||
/>
|
||||
</template>
|
||||
</q-select>
|
||||
@click="
|
||||
viewEvaluatorDetail(commanderHighId.id, 'commanderHigh')
|
||||
"
|
||||
>
|
||||
<q-tooltip
|
||||
>ดูข้อมูลผู้บังคับบัญชาเหนือขึ้นไปอีกชั้นหนึ่ง</q-tooltip
|
||||
>
|
||||
</q-icon>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</q-card-section>
|
||||
<q-separator />
|
||||
|
|
@ -936,6 +1038,66 @@ onMounted(async () => {
|
|||
</q-card>
|
||||
</q-dialog>
|
||||
|
||||
<q-dialog v-model="modalEvaluatorDetail" persistent>
|
||||
<q-card style="width: 700px; max-width: 80vw; min-height: 40vh">
|
||||
<DialogHeader
|
||||
:tittle="topic"
|
||||
:close="() => (modalEvaluatorDetail = false)"
|
||||
/>
|
||||
<q-separator />
|
||||
|
||||
<q-card>
|
||||
<div class="q-pa-md">
|
||||
<span class="text-teal text-weight-bold text-body2">{{
|
||||
evaluator.fullName
|
||||
}}</span>
|
||||
</div>
|
||||
|
||||
<q-card-section class="q-pa-md">
|
||||
<div class="row">
|
||||
<div class="col-12 column justify-center no-wrap">
|
||||
<div class="row text-grey-6">
|
||||
<div class="col-3">ตำแหน่งในสายงาน</div>
|
||||
<div class="col-3">ตำแหน่งประเภท</div>
|
||||
<div class="col-3">ตำแหน่งทางการบริหาร</div>
|
||||
<div class="col-3">สังกัด</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-3">
|
||||
{{ evaluator.position ? evaluator.position : "-" }}
|
||||
</div>
|
||||
<div class="col-3">
|
||||
{{ evaluator.posTypeName ? evaluator.posTypeName : "-" }}
|
||||
{{
|
||||
evaluator.posLevelName
|
||||
? ` (${evaluator.posLevelName})`
|
||||
: "-"
|
||||
}}
|
||||
</div>
|
||||
<div class="col-3">
|
||||
{{
|
||||
evaluator.posExecutiveName
|
||||
? evaluator.posExecutiveName
|
||||
: "-"
|
||||
}}
|
||||
</div>
|
||||
<div class="col-3">
|
||||
{{ evaluator.org ? evaluator.org : "-" }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row q-mt-md text-grey-6">
|
||||
<div class="col-12">รักษาการในตำแหน่ง/การรักษาราชการแทน</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-12">-</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</q-card-section>
|
||||
</q-card>
|
||||
</q-card>
|
||||
</q-dialog>
|
||||
<!-- <q-dialog v-model="modalScore" persistent>
|
||||
<q-card bordered style="width: 50vh">
|
||||
<q-form greedy @submit.prevent @validation-success="onSubmitScore">
|
||||
|
|
@ -1014,10 +1176,10 @@ onMounted(async () => {
|
|||
</q-dialog> -->
|
||||
|
||||
<DialogGovernment v-model:modal="modalGovernment" />
|
||||
<DialogStatus
|
||||
<!-- <DialogStatus
|
||||
v-model:modal="modalStatus"
|
||||
v-model:is-probation="store.dataProfile.isProbation"
|
||||
/>
|
||||
/> -->
|
||||
</template>
|
||||
<style>
|
||||
.bg-toolbar {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue