Refactoring code module 08_KPI
This commit is contained in:
STW_TTTY\stwtt
parent
3636f380fb
commit
67d117dcfc
48 changed files with 989 additions and 1140 deletions
|
|
@ -1,28 +1,26 @@
|
|||
<script setup lang="ts">
|
||||
import { ref, onMounted, reactive } from "vue";
|
||||
import { useRoute, useRouter } from "vue-router";
|
||||
import { useQuasar } from "quasar";
|
||||
|
||||
import http from "@/plugins/http";
|
||||
import config from "@/app.config";
|
||||
import { useQuasar } from "quasar";
|
||||
import TabMain from "@/modules/08_KPI/components/Tab/TabMain.vue";
|
||||
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
import { useKpiDataStore } from "@/modules/08_KPI/store";
|
||||
|
||||
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 type {
|
||||
DataOptions,
|
||||
EvaluatorType,
|
||||
} from "@/modules/08_KPI/interface/index/Main";
|
||||
import type { EvaOptionType } from "@/modules/08_KPI/interface/response/index";
|
||||
|
||||
import TabMain from "@/modules/08_KPI/components/Tab/TabMain.vue";
|
||||
import DialogHeader from "@/components/DialogHeader.vue";
|
||||
import DialogGovernment from "@/modules/08_KPI/components/Tab/Dialog/DialogGovernment.vue";
|
||||
|
||||
const modalGovernment = ref<boolean>(false);
|
||||
|
||||
const modalEdit = ref<boolean>(false);
|
||||
const route = useRoute();
|
||||
const id = ref<string>(route.params.id as string);
|
||||
const isReadonly = <boolean>(route.name === "KPIEditEvaluator" ? true : false);
|
||||
|
||||
const store = useKpiDataStore();
|
||||
const $q = useQuasar();
|
||||
const store = useKpiDataStore();
|
||||
const mixin = useCounterMixin();
|
||||
const {
|
||||
showLoader,
|
||||
|
|
@ -32,18 +30,25 @@ const {
|
|||
success,
|
||||
findOrgName,
|
||||
} = mixin;
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
const id = ref<string>(route.params.id as string);
|
||||
|
||||
const evaluatorIdOp = ref<DataOptions[]>([]);
|
||||
const commanderIdOp = ref<DataOptions[]>([]);
|
||||
const commanderHighOp = ref<DataOptions[]>([]);
|
||||
const modalGovernment = ref<boolean>(false); // ตัวแปร dialog ช่วยราชการ
|
||||
const modalEdit = ref<boolean>(false); // ตัวแปร dialog แก้ไขผู้ประเมิน
|
||||
const isReadonly = <boolean>(route.name === "KPIEditEvaluator" ? true : false);
|
||||
|
||||
const evaluatorIdMainOp = ref<DataOptions[]>([]);
|
||||
const commanderIdMainOp = ref<DataOptions[]>([]);
|
||||
const commanderHighMainOp = ref<DataOptions[]>([]);
|
||||
const evaluatorIdOp = ref<DataOptions[]>([]); // ตัวแปรเก็บ option ผู้ประเมิน
|
||||
const commanderIdOp = ref<DataOptions[]>([]); // ตัวแปรเก็บ option ผู้บังคับบัญชา
|
||||
const commanderHighOp = ref<DataOptions[]>([]); // ตัวแปรเก็บ option ผู้บังคับบัญชาเหนือไปอีกขั้น
|
||||
|
||||
const evaluatorId = ref<any>(null);
|
||||
const commanderId = ref<any>(null);
|
||||
const commanderHighId = ref<any>(null);
|
||||
const evaluatorIdMainOp = ref<DataOptions[]>([]); // ตัวแปรเก็บ option ผู้ประเมิน
|
||||
const commanderIdMainOp = ref<DataOptions[]>([]); // ตัวแปรเก็บ option ผู้บังคับบัญชา
|
||||
const commanderHighMainOp = ref<DataOptions[]>([]); // ตัวแปรเก็บ option ผู้บังคับบัญชาเหนือไปอีกขั้น
|
||||
|
||||
const evaluatorId = ref<any>(null); // ตัวแปรเก็บ id ผู้ประเมิน
|
||||
const commanderId = ref<any>(null); // ตัวแปรเก็บ id ผู้บังคับบัญชา
|
||||
const commanderHighId = ref<any>(null); // ตัวแปรเก็บ id ผู้บังคับบัญชาเหนือไปอีกขั้น
|
||||
|
||||
const formProfile = reactive<FormProfile>({
|
||||
fullName: "",
|
||||
|
|
@ -56,8 +61,7 @@ const formProfile = reactive<FormProfile>({
|
|||
avartar: "",
|
||||
});
|
||||
|
||||
const router = useRouter();
|
||||
|
||||
/** ฟังชั่นดึงข้อมูล ผู้ประเมิน */
|
||||
async function fetchEvaluation() {
|
||||
await http
|
||||
.get(config.API.kpiEvaluation + `/${id.value}`)
|
||||
|
|
@ -66,7 +70,6 @@ async function fetchEvaluation() {
|
|||
store.dataEvaluation = res.data.result;
|
||||
formProfile.status = await store.convertStatus(data.evaluationStatus);
|
||||
formProfile.result = await store.convertResults(data.evaluationResults);
|
||||
// store.checkCompetency();
|
||||
store.checkCompetencyDefaultCompetencyLevel();
|
||||
})
|
||||
.catch((e) => {
|
||||
|
|
@ -74,6 +77,7 @@ async function fetchEvaluation() {
|
|||
});
|
||||
}
|
||||
|
||||
/** ดึงข้อมูลโปรไฟล์ */
|
||||
async function getProfile() {
|
||||
await http
|
||||
.get(config.API.profilePosition())
|
||||
|
|
@ -92,6 +96,7 @@ async function getProfile() {
|
|||
});
|
||||
}
|
||||
|
||||
/** ดึงข้อมูล เพื่อเก็บรูปโปรไฟล์ */
|
||||
async function fetchProfile(id: string, avatarName: string) {
|
||||
http
|
||||
.get(config.API.fileByFile("ทะเบียนประวัติ", "โปรไฟล์", id, avatarName))
|
||||
|
|
@ -100,11 +105,13 @@ async function fetchProfile(id: string, avatarName: string) {
|
|||
});
|
||||
}
|
||||
|
||||
/** เปิด dialog แก้ไขผู้ประเมิน */
|
||||
function openEvaluator() {
|
||||
modalEdit.value = true;
|
||||
getOrgOp();
|
||||
}
|
||||
|
||||
/** ปิด dialog */
|
||||
function close() {
|
||||
modalEdit.value = false;
|
||||
evaluatorId.value = null;
|
||||
|
|
@ -112,6 +119,7 @@ function close() {
|
|||
commanderHighId.value = null;
|
||||
}
|
||||
|
||||
/** บันทึกข้อมูล */
|
||||
function onSubmit() {
|
||||
dialogConfirm($q, () => {
|
||||
if (id.value) {
|
||||
|
|
@ -139,42 +147,45 @@ function onSubmit() {
|
|||
});
|
||||
}
|
||||
|
||||
/** ดึงข้อมูล ผู้ประเมิน */
|
||||
async function getOrgOp() {
|
||||
http
|
||||
.get(config.API.Kpiorg)
|
||||
.then((res) => {
|
||||
const data = res.data.result;
|
||||
evaluatorIdMainOp.value = data.caregiver.map((i: any) => ({
|
||||
evaluatorIdMainOp.value = data.caregiver.map((i: EvaOptionType) => ({
|
||||
id: i.id,
|
||||
name: `${i.prefix}${i.firstName} ${i.lastName}`,
|
||||
}));
|
||||
commanderIdMainOp.value = data.commander.map((i: any) => ({
|
||||
commanderIdMainOp.value = data.commander.map((i: EvaOptionType) => ({
|
||||
id: i.id,
|
||||
name: `${i.prefix}${i.firstName} ${i.lastName}`,
|
||||
}));
|
||||
commanderHighMainOp.value = data.chairman.map((i: any) => ({
|
||||
commanderHighMainOp.value = data.chairman.map((i: EvaOptionType) => ({
|
||||
id: i.id,
|
||||
name: `${i.prefix}${i.firstName} ${i.lastName}`,
|
||||
}));
|
||||
|
||||
evaluatorId.value = data.caregiver
|
||||
.map((i: any) => ({
|
||||
.map((i: EvaOptionType) => ({
|
||||
id: i.id,
|
||||
name: `${i.prefix}${i.firstName} ${i.lastName}`,
|
||||
}))
|
||||
.find((i: any) => i.id == store.dataEvaluation.evaluatorId);
|
||||
.find((i: EvaOptionType) => i.id == store.dataEvaluation.evaluatorId);
|
||||
commanderId.value = data.commander
|
||||
.map((i: any) => ({
|
||||
.map((i: EvaOptionType) => ({
|
||||
id: i.id,
|
||||
name: `${i.prefix}${i.firstName} ${i.lastName}`,
|
||||
}))
|
||||
.find((i: any) => i.id == store.dataEvaluation.commanderId);
|
||||
.find((i: EvaOptionType) => i.id == store.dataEvaluation.commanderId);
|
||||
commanderHighId.value = data.chairman
|
||||
.map((i: any) => ({
|
||||
.map((i: EvaOptionType) => ({
|
||||
id: i.id,
|
||||
name: `${i.prefix}${i.firstName} ${i.lastName}`,
|
||||
}))
|
||||
.find((i: any) => i.id == store.dataEvaluation.commanderHighId);
|
||||
.find(
|
||||
(i: EvaOptionType) => i.id == store.dataEvaluation.commanderHighId
|
||||
);
|
||||
})
|
||||
.catch((e) => {
|
||||
messageError($q, e);
|
||||
|
|
@ -182,26 +193,27 @@ async function getOrgOp() {
|
|||
.finally(() => {});
|
||||
}
|
||||
|
||||
function filterOption(val: any, update: Function, refData: string) {
|
||||
/** ฟิลเตอร์ input */
|
||||
function filterOption(val: string, update: Function, refData: string) {
|
||||
switch (refData) {
|
||||
case "evaluatorIdOp":
|
||||
update(() => {
|
||||
evaluatorIdOp.value = evaluatorIdMainOp.value.filter(
|
||||
(v: any) => v.name.indexOf(val) > -1
|
||||
(v: DataOptions) => v.name.indexOf(val) > -1
|
||||
);
|
||||
});
|
||||
break;
|
||||
case "commanderIdOp":
|
||||
update(() => {
|
||||
commanderIdOp.value = commanderIdMainOp.value.filter(
|
||||
(v: any) => v.name.indexOf(val) > -1
|
||||
(v: DataOptions) => v.name.indexOf(val) > -1
|
||||
);
|
||||
});
|
||||
break;
|
||||
case "commanderHighOp":
|
||||
update(() => {
|
||||
commanderHighOp.value = commanderHighMainOp.value.filter(
|
||||
(v: any) => v.name.indexOf(val) > -1
|
||||
(v: DataOptions) => v.name.indexOf(val) > -1
|
||||
);
|
||||
});
|
||||
break;
|
||||
|
|
@ -210,10 +222,12 @@ function filterOption(val: any, update: Function, refData: string) {
|
|||
}
|
||||
}
|
||||
|
||||
/** ดึงข้อมูลทั้งหมดในหน้า */
|
||||
async function getAll() {
|
||||
await Promise.all([fetchEvaluation(), getProfile(), getOrgOp()]);
|
||||
}
|
||||
|
||||
/** ส่งให้ผู้ประเมิน */
|
||||
function sendToEvaluatore() {
|
||||
dialogConfirm(
|
||||
$q,
|
||||
|
|
@ -301,14 +315,17 @@ function requireEdit() {
|
|||
);
|
||||
}
|
||||
|
||||
/** เปิด dialog ช่วยราชการ */
|
||||
function openGovernment() {
|
||||
modalGovernment.value = true;
|
||||
}
|
||||
|
||||
/** เช็ค สถานะการทดลองงาน */
|
||||
function openStatus() {
|
||||
router.push(`/probation-detail/${store.dataEvaluation.profileId}`);
|
||||
}
|
||||
|
||||
/** ส่งให้ผู้ประเมิน */
|
||||
function sendToEvauator() {
|
||||
dialogConfirm($q, () => {
|
||||
showLoader();
|
||||
|
|
@ -387,8 +404,14 @@ async function goToSummary() {
|
|||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* เปิด dialog ข้อมูลผู้ประเมิน
|
||||
* @param profileId id ผู้ประเมิน
|
||||
* @param type ประเภท
|
||||
*/
|
||||
const modalEvaluatorDetail = ref<boolean>(false);
|
||||
const topic = ref<string>("");
|
||||
|
||||
function viewEvaluatorDetail(profileId: string, type: string) {
|
||||
modalEvaluatorDetail.value = true;
|
||||
topic.value =
|
||||
|
|
@ -400,17 +423,22 @@ function viewEvaluatorDetail(profileId: string, type: string) {
|
|||
fetchProfileEvaluator(profileId);
|
||||
}
|
||||
|
||||
const evaluator = ref<any>({
|
||||
const evaluator = ref<EvaluatorType>({
|
||||
fullName: "",
|
||||
position: "",
|
||||
avartar: "",
|
||||
posTypeName: "",
|
||||
posLevelName: "",
|
||||
org: "",
|
||||
posExecutiveName: "",
|
||||
isPosmasterAct: false,
|
||||
posmasterAct: [],
|
||||
});
|
||||
|
||||
/**
|
||||
* ข้อมูลของผู้ประเมิน
|
||||
* @param id ข้อมูลของผู้ประเมิน
|
||||
*/
|
||||
async function fetchProfileEvaluator(id: string) {
|
||||
showLoader();
|
||||
http
|
||||
|
|
@ -796,7 +824,7 @@ onMounted(async () => {
|
|||
:rules="[ (val:string) => !!val ||
|
||||
`${'กรุณาเลือกผู้ประเมิน'}`, ]"
|
||||
use-input
|
||||
@filter="(inputValue:any,
|
||||
@filter="(inputValue:string,
|
||||
doneFn:Function) => filterOption(inputValue, doneFn,'evaluatorIdOp'
|
||||
) "
|
||||
/>
|
||||
|
|
@ -833,7 +861,7 @@ onMounted(async () => {
|
|||
map-options
|
||||
class="inputgreen"
|
||||
use-input
|
||||
@filter="(inputValue:any,
|
||||
@filter="(inputValue:string,
|
||||
doneFn:Function) => filterOption(inputValue, doneFn,'commanderIdOp'
|
||||
) "
|
||||
>
|
||||
|
|
@ -885,7 +913,7 @@ onMounted(async () => {
|
|||
map-options
|
||||
use-input
|
||||
class="inputgreen"
|
||||
@filter="(inputValue:any,
|
||||
@filter="(inputValue:string,
|
||||
doneFn:Function) => filterOption(inputValue, doneFn,'commanderHighOp'
|
||||
) "
|
||||
>
|
||||
|
|
@ -989,7 +1017,7 @@ onMounted(async () => {
|
|||
<div class="row">
|
||||
<div class="col-12" v-if="evaluator.isPosmasterAct">
|
||||
{{
|
||||
`${evaluator.posmasterAct.prefix}${evaluator.posmasterAct.firstName} ${evaluator.posmasterAct.lastName} (${evaluator.posmasterAct.posNo})`
|
||||
`${evaluator.posmasterAct[0].prefix}${evaluator.posmasterAct[0].firstName} ${evaluator.posmasterAct[0].lastName} (${evaluator.posmasterAct[0].posNo})`
|
||||
}}
|
||||
</div>
|
||||
<div class="col-12" v-else>-</div>
|
||||
|
|
@ -999,88 +1027,8 @@ onMounted(async () => {
|
|||
</q-card-section>
|
||||
</q-card>
|
||||
</q-dialog>
|
||||
<!-- <q-dialog v-model="modalScore" persistent>
|
||||
<q-card bordered style="width: 50vh">
|
||||
<q-form greedy @submit.prevent @validation-success="onSubmitScore">
|
||||
<DialogHeader tittle="แก้ไขคะแนนเต็ม" :close="clearScore" />
|
||||
<q-separator />
|
||||
<q-card-section>
|
||||
<div class="column q-gutter-sm">
|
||||
<q-input
|
||||
v-model="plannedPoint"
|
||||
label="งานตามแผนปฏิบัติราชการประจำปี"
|
||||
dense
|
||||
outlined
|
||||
class="inputgreen"
|
||||
mask="###"
|
||||
:rules="[
|
||||
(val) =>
|
||||
!!val ||
|
||||
val == '0' ||
|
||||
'กรุณากรอกคะเเนนงานตามแผนปฏิบัติราชการประจำปี หรือ 0',
|
||||
]"
|
||||
hide-bottom-space
|
||||
lazy-rules
|
||||
/>
|
||||
<q-input
|
||||
v-model="rolePoint"
|
||||
label="งานตามหน้าที่ความรับผิดชอบหลัก"
|
||||
dense
|
||||
outlined
|
||||
class="inputgreen"
|
||||
mask="###"
|
||||
:rules="[(val:string) => !!val || val == '0' || `${'กรุณากรอกคะเเนนงานตามหน้าที่ความรับผิดชอบหลัก หรือ 0'}`,]"
|
||||
hide-bottom-space
|
||||
lazy-rules
|
||||
/>
|
||||
<q-input
|
||||
v-model="specialPoint"
|
||||
label="งานที่ได้รับมอบหมายพิเศษ"
|
||||
dense
|
||||
outlined
|
||||
class="inputgreen"
|
||||
mask="###"
|
||||
:rules="[(val:string) => !!val || val == '0' ||`${'กรุณากรอกคะเเนนงานที่ได้รับมอบหมายพิเศษ หรือ 0'}`,]"
|
||||
hide-bottom-space
|
||||
lazy-rules
|
||||
/>
|
||||
<q-input
|
||||
v-model="capacityPoint"
|
||||
label="สมรรถนะ"
|
||||
dense
|
||||
outlined
|
||||
class="inputgreen"
|
||||
mask="###"
|
||||
:rules="[(val:string) => !!val || val == '0' ||`${'กรุณากรอกคะเเนนสมรรถนะ หรือ 0'}`,]"
|
||||
hide-bottom-space
|
||||
lazy-rules
|
||||
/>
|
||||
</div>
|
||||
</q-card-section>
|
||||
<q-separator />
|
||||
<q-card-actions class="bg-white row justify-between">
|
||||
<div class="col-8 text-red q-px-sm">
|
||||
<span v-if="scoreTotal == true"
|
||||
>คะแนนเต็มรวมกันต้องเท่ากับ 100 คะแนน</span
|
||||
>
|
||||
</div>
|
||||
<q-btn
|
||||
label="บันทึก"
|
||||
color="secondary"
|
||||
type="submit"
|
||||
:disable="totalScore !== 100"
|
||||
><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"
|
||||
v-model:is-probation="store.dataProfile.isProbation"
|
||||
/> -->
|
||||
</template>
|
||||
<style>
|
||||
.bg-toolbar {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue