112 lines
2.8 KiB
Vue
112 lines
2.8 KiB
Vue
|
divdiv
|
||
|
|
<script setup lang="ts">
|
||
|
|
import { ref, watch } from "vue";
|
||
|
|
import { useQuasar } from "quasar";
|
||
|
|
import config from "@/app.config";
|
||
|
|
import http from "@/plugins/http";
|
||
|
|
|
||
|
|
import DialogHeader from "@/components/DialogHeader.vue";
|
||
|
|
|
||
|
|
import { useCounterMixin } from "@/stores/mixin";
|
||
|
|
|
||
|
|
const $q = useQuasar();
|
||
|
|
const { showLoader, hideLoader, messageError } = useCounterMixin();
|
||
|
|
|
||
|
|
const modal = defineModel<boolean>("modal", { required: true });
|
||
|
|
const numpage = defineModel<number>("numpage", { required: true });
|
||
|
|
const kpiUserPlannedId = defineModel<string>("kpiUserPlannedId", {
|
||
|
|
required: true,
|
||
|
|
});
|
||
|
|
|
||
|
|
const dataAchievement = ref<any[]>([]);
|
||
|
|
|
||
|
|
function fetchByid(id: string, type: string) {
|
||
|
|
showLoader();
|
||
|
|
http
|
||
|
|
.get(config.API.kpiAchievement(`${type}`) + `/${id}`)
|
||
|
|
.then((res) => {
|
||
|
|
const data = res.data.result;
|
||
|
|
dataAchievement.value = [
|
||
|
|
{
|
||
|
|
level: "5",
|
||
|
|
val: data.achievement5,
|
||
|
|
},
|
||
|
|
{
|
||
|
|
level: "4",
|
||
|
|
val: data.achievement4,
|
||
|
|
},
|
||
|
|
{
|
||
|
|
level: "3",
|
||
|
|
val: data.achievement3,
|
||
|
|
},
|
||
|
|
{
|
||
|
|
level: "2",
|
||
|
|
val: data.achievement2,
|
||
|
|
},
|
||
|
|
{
|
||
|
|
level: "1",
|
||
|
|
val: data.achievement1,
|
||
|
|
},
|
||
|
|
];
|
||
|
|
})
|
||
|
|
.catch((err) => {
|
||
|
|
messageError($q, err);
|
||
|
|
})
|
||
|
|
.finally(() => {
|
||
|
|
hideLoader();
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
function closeDialog() {
|
||
|
|
modal.value = false;
|
||
|
|
}
|
||
|
|
|
||
|
|
watch(
|
||
|
|
() => modal.value,
|
||
|
|
() => {
|
||
|
|
if (modal.value) {
|
||
|
|
const type =
|
||
|
|
numpage.value === 1
|
||
|
|
? "planned"
|
||
|
|
: numpage.value === 2
|
||
|
|
? "role"
|
||
|
|
: "special";
|
||
|
|
fetchByid(kpiUserPlannedId.value, type);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
);
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<template>
|
||
|
|
<q-dialog v-model="modal" persistent>
|
||
|
|
<q-card class="col-12" style="width: 45%">
|
||
|
|
<DialogHeader :tittle="'คำอธิบายผลสำเร็จของงาน'" :close="closeDialog" />
|
||
|
|
<q-separator />
|
||
|
|
<q-card-section>
|
||
|
|
<q-card bordered>
|
||
|
|
<div class="bg-grey-2 q-pa-sm">
|
||
|
|
<div
|
||
|
|
class="row text-dark text-body2 text-weight-medium text-weight-bold"
|
||
|
|
>
|
||
|
|
<div class="text-center col-6">ระดับคะแนน</div>
|
||
|
|
<div class="text-center col-6">ผลสำเร็จของงาน</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<q-separator />
|
||
|
|
<div v-for="(item, index) in dataAchievement" :key="item.id">
|
||
|
|
<div :class="`row q-pa-sm ${index % 2 !== 0 && 'bg-grey-2'}`">
|
||
|
|
<div class="col-6 text-center text-body1">{{ item.level }}</div>
|
||
|
|
<div class="col-6 text-center self-center">
|
||
|
|
<span>{{ item.val }}</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<q-separator />
|
||
|
|
</div>
|
||
|
|
</q-card>
|
||
|
|
</q-card-section>
|
||
|
|
</q-card>
|
||
|
|
</q-dialog>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<style scoped></style>
|