ปรับ kpi

This commit is contained in:
STW_TTTY\stwtt 2024-08-06 15:42:54 +07:00
parent 228a48ea77
commit 0e3e977062
4 changed files with 109 additions and 94 deletions

View file

@ -28,6 +28,7 @@ const {
const modal = defineModel<boolean>("modal", { required: true });
const numpage = defineModel<number>("numpage", { required: true });
const isStatusEdit = defineModel<boolean>("isStatusEdit", { required: true });
const checkDetail = defineModel<boolean>("checkDetail", { required: true });
const kpiUserPlannedId = defineModel<string>("kpiUserPlannedId", {
required: true,
});
@ -252,51 +253,53 @@ function fetchspecialByid(id: string) {
}
function clickList(id: string, isData: boolean = false) {
showLoader();
const url =
numpage.value === 1
? config.API.kpiPlan
: numpage.value === 2
? config.API.kpiRole
: config.API.kpiSpecial;
http
.get(`${url}/${id}`)
.then((res) => {
listCheckID.value = id;
const data = res.data.result;
if (!isData) {
formDetail.target = data.target;
formDetail.unit = data.unit;
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;
formDetail.year = data.year;
formDetail.round = data.round;
formDetail.kpiPeriodId = data.kpiPeriodId;
formDetail.includingName = data.includingName;
formDetail.including = data.including;
formDetail.node = data.node;
formDetail.nodeId = data.nodeId;
formDetail.nodeName = data.nodeName;
formDetail.strategy = data.strategy;
formDetail.strategyId = data.strategyId;
formDetail.strategyName = data.strategyName;
formDetail.documentInfoEvidence = data.documentInfoEvidence;
})
.catch((err) => {
messageError($q, err);
})
.finally(() => {
hideLoader();
});
if (!checkDetail.value) {
showLoader();
const url =
numpage.value === 1
? config.API.kpiPlan
: numpage.value === 2
? config.API.kpiRole
: config.API.kpiSpecial;
http
.get(`${url}/${id}`)
.then((res) => {
listCheckID.value = id;
const data = res.data.result;
if (!isData) {
formDetail.target = data.target;
formDetail.unit = data.unit;
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;
formDetail.year = data.year;
formDetail.round = data.round;
formDetail.kpiPeriodId = data.kpiPeriodId;
formDetail.includingName = data.includingName;
formDetail.including = data.including;
formDetail.node = data.node;
formDetail.nodeId = data.nodeId;
formDetail.nodeName = data.nodeName;
formDetail.strategy = data.strategy;
formDetail.strategyId = data.strategyId;
formDetail.strategyName = data.strategyName;
formDetail.documentInfoEvidence = data.documentInfoEvidence;
})
.catch((err) => {
messageError($q, err);
})
.finally(() => {
hideLoader();
});
}
}
/** ปิด dialog */
@ -337,6 +340,9 @@ function closeDialog() {
formFilter.year = null;
formFilter.page = 1;
formFilter.pageSize = 20;
isStatusEdit.value = false;
checkDetail.value = false;
}
function onSubmit() {
@ -420,12 +426,15 @@ watch(
if (numpage.value === 1) {
fetchListPlan();
isStatusEdit.value && fetchListPlanByid(kpiUserPlannedId.value);
checkDetail.value && fetchListPlanByid(kpiUserPlannedId.value);
} else if (numpage.value === 2) {
fetchListRole();
isStatusEdit.value && fetchRoleByid(kpiUserPlannedId.value);
checkDetail.value && fetchRoleByid(kpiUserPlannedId.value);
} else if (numpage.value === 3) {
fetchListSpecial();
isStatusEdit.value && fetchspecialByid(kpiUserPlannedId.value);
checkDetail.value && fetchspecialByid(kpiUserPlannedId.value);
}
}
}
@ -454,7 +463,14 @@ const title = computed(() => {
<q-dialog v-model="modal" persistent>
<q-card class="col-12" style="width: 100%">
<q-form greedy @submit.prevent @validation-success="onSubmit">
<DialogHeader :tittle="title" :close="closeDialog" />
<DialogHeader
:tittle="
checkDetail
? `รายละเอียดตัวชี้วัดตามแผนปฏิบัติราชการประจําปี`
: `${title}`
"
:close="closeDialog"
/>
<q-separator />
<q-card-section class="q-pa-none scroll" style="max-height: 75vh">
@ -463,6 +479,7 @@ const title = computed(() => {
<div class="col-12 fit">
<div class="row col-12" v-if="numpage !== 3">
<q-checkbox
:disable="checkDetail"
v-model="formFilter.isAll"
label="แสดงตัวชี้วัดภายใต้หน่วยงาน/ส่วนราชการทุกระดับ"
@update:model-value="fetchNewList()"
@ -471,6 +488,7 @@ const title = computed(() => {
<div class="row q-col-gutter-sm col-12">
<div class="col-5">
<datepicker
:readonly="checkDetail"
menu-class-name="modalfix"
v-model="formFilter.year"
:locale="'th'"
@ -487,6 +505,7 @@ const title = computed(() => {
<q-input
dense
outlined
:readonly="checkDetail"
:model-value="
formFilter.year === null || formFilter.year === ''
? null
@ -519,6 +538,7 @@ const title = computed(() => {
<div class="col-7">
<q-select
dense
:readonly="checkDetail"
outlined
v-model="formFilter.period"
:options="roundOp"
@ -539,6 +559,7 @@ const title = computed(() => {
v-model="formFilter.keyword"
outlined
dense
:readonly="checkDetail"
label="ค้นหา"
@keydown.enter.prevent="fetchNewList()"
>
@ -572,6 +593,7 @@ const title = computed(() => {
:active="listCheckID === item.id"
active-class="my-menu-link"
@click="clickList(item.id)"
:style="checkDetail ? 'pointer-events: none;' : ''"
>
<q-item-section class="q-pa-none">
<div
@ -599,7 +621,6 @@ const title = computed(() => {
active-color="primary"
color="dark"
:max="Number(maxPage)"
size="sm"
boundary-links
direction-links
:max-pages="5"
@ -642,6 +663,7 @@ const title = computed(() => {
<q-input
v-if="numpage === 3"
outlined
:readonly="checkDetail"
v-model="formDetail.including"
bg-color="white"
dense
@ -663,6 +685,7 @@ const title = computed(() => {
<q-input
v-if="numpage === 3"
outlined
:readonly="checkDetail"
v-model="formDetail.includingName"
bg-color="white"
dense
@ -683,6 +706,7 @@ const title = computed(() => {
outlined
v-model="formDetail.target"
bg-color="white"
:readonly="checkDetail"
dense
class="inputgreen"
:rules="[
@ -700,6 +724,7 @@ const title = computed(() => {
outlined
v-model="formDetail.unit"
bg-color="white"
:readonly="checkDetail"
dense
class="inputgreen"
:rules="[
@ -718,6 +743,7 @@ const title = computed(() => {
outlined
v-model="formDetail.weight"
bg-color="white"
:readonly="checkDetail"
dense
class="inputgreen"
:rules="[
@ -749,6 +775,7 @@ const title = computed(() => {
v-model="formDetail.achievement5"
outlined
dense
:readonly="checkDetail"
:rules="[(val:string) => !!val || `${'กรุณากรอกผลสำเร็จของงาน'}`,]"
hide-bottom-space
class="inputgreen"
@ -763,6 +790,7 @@ const title = computed(() => {
<q-input
v-model="formDetail.achievement4"
outlined
:readonly="checkDetail"
dense
:rules="[(val:string) => !!val || `${'กรุณากรอกผลสำเร็จของงาน'}`,]"
hide-bottom-space
@ -778,6 +806,7 @@ const title = computed(() => {
<q-input
v-model="formDetail.achievement3"
outlined
:readonly="checkDetail"
dense
:rules="[(val:string) => !!val || `${'กรุณากรอกผลสำเร็จของงาน'}`,]"
hide-bottom-space
@ -793,6 +822,7 @@ const title = computed(() => {
<q-input
v-model="formDetail.achievement2"
outlined
:readonly="checkDetail"
dense
:rules="[(val:string) => !!val || `${'กรุณากรอกผลสำเร็จของงาน'}`,]"
hide-bottom-space
@ -808,6 +838,7 @@ const title = computed(() => {
<q-input
v-model="formDetail.achievement1"
outlined
:readonly="checkDetail"
dense
:rules="[(val:string) => !!val || `${'กรุณากรอกผลสำเร็จของงาน'}`,]"
hide-bottom-space
@ -823,6 +854,7 @@ const title = computed(() => {
v-model="formDetail.meaning"
label="นิยามหรือความหมายของตัวชี้วัด"
type="textarea"
:readonly="checkDetail"
outlined
dense
:rules="[(val:string) => !!val || `${'กรุณากรอกตัวชี้วัด'}`,]"
@ -836,6 +868,7 @@ const title = computed(() => {
<q-input
v-model="formDetail.formula"
label="สูตรคำนวณ"
:readonly="checkDetail"
type="textarea"
outlined
dense
@ -852,6 +885,7 @@ const title = computed(() => {
label="ข้อมูลเอกสารหลักฐาน"
type="textarea"
outlined
:readonly="checkDetail"
dense
:rules="[(val:string) => !!val || `${'กรุณากรอกข้อมูลเอกสารหลักฐาน'}`,]"
hide-bottom-space
@ -863,6 +897,7 @@ const title = computed(() => {
<datepicker
v-model="formDetail.startDate"
:locale="'th'"
:readonly="checkDetail"
autoApply
:enableTimePicker="false"
week-start="0"
@ -876,6 +911,7 @@ const title = computed(() => {
<q-input
dense
outlined
:readonly="checkDetail"
class="inputgreen"
:model-value="
formDetail.startDate
@ -909,6 +945,7 @@ const title = computed(() => {
<datepicker
v-model="formDetail.endDate"
:locale="'th'"
:readonly="checkDetail"
autoApply
:enableTimePicker="false"
week-start="0"
@ -923,6 +960,7 @@ const title = computed(() => {
dense
outlined
class="inputgreen"
:readonly="checkDetail"
:model-value="
formDetail.endDate
? date2Thai(formDetail.endDate)
@ -955,9 +993,9 @@ const title = computed(() => {
</div>
</div>
</q-card-section>
<q-separator />
<q-separator v-if="!checkDetail"/>
<q-card-actions align="right" class="bg-white text-teal">
<q-card-actions v-if="!checkDetail" align="right" class="bg-white text-teal">
<q-btn label="บันทึก" color="secondary" type="submit"
><q-tooltip>นทกขอม</q-tooltip></q-btn
>

View file

@ -574,9 +574,9 @@ watch(
</div>
</div>
</q-card-section>
<q-separator />
<q-separator v-if="competencyType !== 'HEAD' && competencyType !== 'GROUP'"/>
<q-card-actions align="right" class="bg-white text-teal">
<q-card-actions v-if="competencyType !== 'HEAD' && competencyType !== 'GROUP'" align="right" class="bg-white text-teal">
<q-btn label="บันทึก" color="secondary" type="submit"
><q-tooltip>นทกขอม</q-tooltip></q-btn
>

View file

@ -16,7 +16,7 @@ import DialogProblem from "@/modules/08_KPI/components/Tab/Dialog/DialogCommentP
import { useCounterMixin } from "@/stores/mixin";
import { useKpiDataStore } from "@/modules/08_KPI/store";
const checkDetail = ref<boolean>(false);
const $q = useQuasar();
const store = useKpiDataStore();
const route = useRoute();
@ -137,8 +137,9 @@ function onAdd(edit: boolean = false, id: string = "") {
}
function onClickView(id: string) {
checkDetail.value = true;
kpiUserPlannedId.value = id;
modalViewInfo.value = true;
modal.value = true;
}
async function onEvaluate() {
@ -250,7 +251,6 @@ const isEditStep3 = computed(() => {
round
icon="mdi-plus"
color="primary"
size="12px"
dense
@click="onAdd()"
>
@ -264,7 +264,6 @@ const isEditStep3 = computed(() => {
round
icon="mdi-clipboard-check-outline"
color="blue-5"
size="12px"
dense
@click="onEvaluate"
>
@ -306,11 +305,10 @@ const isEditStep3 = computed(() => {
round
icon="mdi-eye"
color="info"
size="12px"
dense
@click="onClickView(props.row.id)"
>
<q-tooltip>คำอธบายผลสำเรจของงาน</q-tooltip>
<q-tooltip>รายละเอยด</q-tooltip>
</q-btn></q-td
>
<q-td v-for="col in props.cols" :key="col.id">
@ -334,7 +332,10 @@ const isEditStep3 = computed(() => {
<div v-else-if="col.name === 'achievement'">
{{ props.row.point ? `ระดับ ${props.row.point}` : "" }}
</div>
<div v-else-if="col.name === 'includingName'" style="width: 200px; white-space: normal;">
<div
v-else-if="col.name === 'includingName'"
style="width: 200px; white-space: normal"
>
{{ props.row.includingName ? props.row.includingName : "-" }}
</div>
<div v-else-if="col.name === 'evaluationResults'">
@ -361,7 +362,6 @@ const isEditStep3 = computed(() => {
round
icon="mdi-developer-board"
color="blue-6"
size="12px"
dense
@click="openPopupProgress(props.row.id)"
>
@ -372,7 +372,6 @@ const isEditStep3 = computed(() => {
round
icon="warning"
color="red-5"
size="12px"
dense
main="problem"
@click="openPopupProblem(props.row.id)"
@ -387,7 +386,6 @@ const isEditStep3 = computed(() => {
round
icon="edit"
color="edit"
size="12px"
dense
@click="onAdd(true, props.row.id)"
>
@ -399,7 +397,6 @@ const isEditStep3 = computed(() => {
round
icon="delete"
color="red"
size="12px"
dense
@click="onDelete(props.row.id)"
>
@ -418,7 +415,6 @@ const isEditStep3 = computed(() => {
round
icon="info"
color="info"
size="14px"
@click="onClickView(props.row.id)"
>
<q-tooltip>คำอธบายผลสำเรจของงาน</q-tooltip>
@ -451,7 +447,6 @@ const isEditStep3 = computed(() => {
round
icon="mdi-developer-board"
color="blue-6"
size="12px"
dense
@click="openPopupProgress(props.row.id)"
>
@ -462,7 +457,6 @@ const isEditStep3 = computed(() => {
round
icon="warning"
color="red-5"
size="12px"
dense
main="problem"
@click="openPopupProblem(props.row.id)"
@ -477,7 +471,6 @@ const isEditStep3 = computed(() => {
round
icon="edit"
color="edit"
size="12px"
dense
@click="onAdd(true, props.row.id)"
>
@ -489,7 +482,6 @@ const isEditStep3 = computed(() => {
round
icon="delete"
color="red"
size="12px"
dense
@click="onDelete(props.row.id)"
>
@ -506,7 +498,8 @@ const isEditStep3 = computed(() => {
<Dialog
v-model:modal="modal"
:numpage="numpage"
:isStatusEdit="isStatusEdit"
v-model:isStatusEdit="isStatusEdit"
v-model:checkDetail="checkDetail"
:kpiUserPlannedId="kpiUserPlannedId"
/>

View file

@ -310,7 +310,6 @@ onMounted(() => {
round
icon="mdi-plus"
color="primary"
size="12px"
dense
@click="onAdd(item.id)"
>
@ -325,7 +324,6 @@ onMounted(() => {
round
icon="mdi-clipboard-check-outline"
color="blue-5"
size="12px"
dense
@click="onEvaluate(item.id)"
>
@ -372,14 +370,19 @@ onMounted(() => {
<q-tr :props="props" class="cursor-pointer">
<q-td auto-width>
<q-btn
v-if="isEditStep1"
flat
icon="mdi-eye"
color="info"
round
class="q-ml-xs"
@click="onAchievement(props.row.achievement)"
:icon="
item.id == 'HEAD' || item.id == 'GROUP' ? 'mdi-eye' : 'edit'
"
color="info"
@click.stop.pervent="onEdit(props.row, item.id)"
>
<q-tooltip>พฤตกรรมทคาดหว/พฤตกรรมยอย</q-tooltip>
<q-tooltip v-if="item.id == 'HEAD' || item.id == 'GROUP'"
>รายละเอยด</q-tooltip
>
<q-tooltip v-else>แก้ไข</q-tooltip>
</q-btn>
</q-td>
<q-td v-for="col in props.cols" :key="col.id">
@ -438,7 +441,6 @@ onMounted(() => {
round
icon="mdi-account-details"
color="blue-6"
size="12px"
dense
@click="openPopupProgress(props.row.id)"
>
@ -447,22 +449,6 @@ onMounted(() => {
</div>
<div v-if="isEditStep1">
<q-btn
flat
round
:icon="
item.id == 'HEAD' || item.id == 'GROUP'
? 'mdi-eye'
: 'edit'
"
color="info"
@click.stop.pervent="onEdit(props.row, item.id)"
>
<q-tooltip v-if="item.id == 'HEAD' || item.id == 'GROUP'"
>รายละเอยด</q-tooltip
>
<q-tooltip v-else>แก้ไข</q-tooltip>
</q-btn>
<q-btn
flat
round
@ -532,7 +518,6 @@ onMounted(() => {
round
icon="mdi-developer-board"
color="blue-6"
size="12px"
dense
@click="openPopupProgress(props.row.id)"
>
@ -543,7 +528,6 @@ onMounted(() => {
round
icon="warning"
color="red-5"
size="12px"
dense
main="problem"
@click="openPopupProblem(props.row.id)"