Merge branch 'NiceDev' into develop
This commit is contained in:
DESKTOP-1R2VSQH\Lenovo ThinkPad E490
commit
43bef3873b
1 changed files with 316 additions and 36 deletions
|
|
@ -5,6 +5,8 @@ import { useRoute } from "vue-router";
|
|||
import config from "@/app.config";
|
||||
import http from "@/plugins/http";
|
||||
|
||||
import type { DataOptions } from "@/modules/08_KPI/interface/index/Main";
|
||||
|
||||
import DialogHeader from "@/components/DialogHeader.vue";
|
||||
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
|
|
@ -22,6 +24,7 @@ const {
|
|||
dialogConfirm,
|
||||
dialogMessageNotify,
|
||||
success,
|
||||
date2Thai,
|
||||
} = mixin;
|
||||
|
||||
const modal = defineModel<boolean>("modal", { required: true });
|
||||
|
|
@ -35,6 +38,20 @@ const search = ref<string>("");
|
|||
const listCheckID = ref<string | null>(null);
|
||||
const listTarget = ref<any>([]);
|
||||
|
||||
const formFilter = reactive<any>({
|
||||
isAll: false,
|
||||
keyword: "",
|
||||
node: 0,
|
||||
nodeId: "",
|
||||
period: "",
|
||||
year: null,
|
||||
page: 1,
|
||||
pageSize: 20,
|
||||
});
|
||||
|
||||
const totalList = ref<number>(0); //จำนวนข้อมูลรายการ
|
||||
const maxPage = ref<number>(1);
|
||||
|
||||
const formDetail = reactive<any>({
|
||||
orgRevisionId: "",
|
||||
id: "",
|
||||
|
|
@ -60,20 +77,28 @@ const formDetail = reactive<any>({
|
|||
strategyId: "",
|
||||
strategyName: "",
|
||||
documentInfoEvidence: "",
|
||||
date: null,
|
||||
});
|
||||
|
||||
/** Option รอบการประเมิน*/
|
||||
const roundOp = ref<DataOptions[]>([
|
||||
{ id: "APR", name: "รอบเมษายน" },
|
||||
{ id: "OCT", name: "รอบตุลาคม" },
|
||||
]);
|
||||
|
||||
function fetchIndicators() {
|
||||
const nodeId = store.dataProfile.nodeId;
|
||||
const node = store.dataProfile.node;
|
||||
const kpiPeriodId = store.dataEvaluation.kpiPeriodId;
|
||||
formFilter.nodeId = store.dataProfile.nodeId;
|
||||
formFilter.node = store.dataProfile.node;
|
||||
formFilter.year = formFilter?.year ? formFilter.year.toString() : "";
|
||||
// const kpiPeriodId = store.dataEvaluation.kpiPeriodId;
|
||||
|
||||
showLoader();
|
||||
http
|
||||
.get(
|
||||
config.API.kpiPlan +
|
||||
`?page=${1}&pageSize=${50}&kpiPeriodId=${kpiPeriodId}&nodeId=${nodeId}&node=${node}&keyword=${""}`
|
||||
)
|
||||
.post(config.API.kpiPlan + `/search`, formFilter)
|
||||
.then((res) => {
|
||||
listTarget.value = res.data.result.data;
|
||||
maxPage.value = Math.ceil(res.data.result.total / formFilter.pageSize);
|
||||
totalList.value = res.data.result.total;
|
||||
})
|
||||
.catch((err) => {
|
||||
messageError($q, err);
|
||||
|
|
@ -94,6 +119,17 @@ function fetchIndicatorsByid(id: string) {
|
|||
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.documentInfoEvidence = data.documentInfoEvidence;
|
||||
if (data.startDate && data.endDate) {
|
||||
formDetail.date = [];
|
||||
formDetail.date[0] = data.startDate;
|
||||
formDetail.date[1] = data.endDate;
|
||||
}
|
||||
clickList(data.kpiPlanId, true);
|
||||
})
|
||||
.catch((err) => {
|
||||
|
|
@ -107,13 +143,19 @@ function fetchIndicatorsByid(id: string) {
|
|||
function fetchListRole() {
|
||||
const kpiPeriodId = store.dataEvaluation.kpiPeriodId;
|
||||
const position = store.dataProfile.position;
|
||||
formFilter.nodeId = store.dataProfile.nodeId;
|
||||
formFilter.node = store.dataProfile.node;
|
||||
formFilter.year = formFilter?.year ? formFilter.year.toString() : "";
|
||||
formFilter.position = store.dataProfile.position;
|
||||
|
||||
console.log(formFilter);
|
||||
|
||||
http
|
||||
.get(
|
||||
config.API.kpiRole +
|
||||
`?page=${1}&pageSize=${50}&kpiPeriodId=${kpiPeriodId}&position=${position}`
|
||||
)
|
||||
.post(config.API.kpiRole + `/search`, formFilter)
|
||||
.then((res) => {
|
||||
listTarget.value = res.data.result.data;
|
||||
maxPage.value = Math.ceil(res.data.result.total / formFilter.pageSize);
|
||||
totalList.value = res.data.result.total;
|
||||
})
|
||||
.finally(() => {
|
||||
hideLoader();
|
||||
|
|
@ -131,6 +173,17 @@ function fetchRoleByid(id: string) {
|
|||
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.documentInfoEvidence = data.documentInfoEvidence;
|
||||
if (data.startDate && data.endDate) {
|
||||
formDetail.date = [];
|
||||
formDetail.date[0] = data.startDate;
|
||||
formDetail.date[1] = data.endDate;
|
||||
}
|
||||
clickList(data.kpiRoleId, true);
|
||||
})
|
||||
.catch((err) => {
|
||||
|
|
@ -155,6 +208,11 @@ function clickList(id: string, isData: boolean = false) {
|
|||
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;
|
||||
|
|
@ -163,11 +221,6 @@ function clickList(id: string, isData: boolean = false) {
|
|||
formDetail.kpiPeriodId = data.kpiPeriodId;
|
||||
formDetail.includingName = data.includingName;
|
||||
formDetail.including = data.including;
|
||||
formDetail.achievement1 = data.achievement1;
|
||||
formDetail.achievement2 = data.achievement2;
|
||||
formDetail.achievement3 = data.achievement3;
|
||||
formDetail.achievement4 = data.achievement4;
|
||||
formDetail.achievement5 = data.achievement5;
|
||||
formDetail.node = data.node;
|
||||
formDetail.nodeId = data.nodeId;
|
||||
formDetail.nodeName = data.nodeName;
|
||||
|
|
@ -209,6 +262,17 @@ function closeDialog() {
|
|||
formDetail.nodeId = "";
|
||||
formDetail.strategy = "";
|
||||
formDetail.strategyId = "";
|
||||
formDetail.documentInfoEvidence = "";
|
||||
formDetail.date = null;
|
||||
|
||||
formFilter.isAll = false;
|
||||
formFilter.keyword = "";
|
||||
formFilter.node = 0;
|
||||
formFilter.nodeId = "";
|
||||
formFilter.period = "";
|
||||
formFilter.year = null;
|
||||
formFilter.page = 1;
|
||||
formFilter.pageSize = 20;
|
||||
}
|
||||
|
||||
function onSubmit() {
|
||||
|
|
@ -216,7 +280,7 @@ function onSubmit() {
|
|||
dialogMessageNotify($q, "กรุณาเลือกตัวชี้วัด");
|
||||
} else {
|
||||
dialogConfirm($q, async () => {
|
||||
// showLoader();
|
||||
showLoader();
|
||||
|
||||
const formBody = {
|
||||
target: formDetail.target,
|
||||
|
|
@ -227,6 +291,14 @@ function onSubmit() {
|
|||
kpiUserEvaluationId: store.dataEvaluation.id,
|
||||
kpiPlanId: numpage.value === 1 ? listCheckID.value : undefined,
|
||||
kpiRoleId: numpage.value === 2 ? listCheckID.value : undefined,
|
||||
achievement1: formDetail.achievement1,
|
||||
achievement2: formDetail.achievement2,
|
||||
achievement3: formDetail.achievement3,
|
||||
achievement4: formDetail.achievement4,
|
||||
achievement5: formDetail.achievement5,
|
||||
documentInfoEvidence: formDetail.documentInfoEvidence,
|
||||
startDate: formDetail.date ? formDetail.date[0] : undefined,
|
||||
endDate: formDetail.date ? formDetail.date[1] : undefined,
|
||||
};
|
||||
try {
|
||||
const urlPlanned = isStatusEdit.value
|
||||
|
|
@ -240,17 +312,21 @@ function onSubmit() {
|
|||
const url = numpage.value === 1 ? urlPlanned : urlRole;
|
||||
const method = isStatusEdit.value ? "put" : "post";
|
||||
await http[method](url, formBody);
|
||||
closeDialog();
|
||||
success($q, "บันทึกข้อมูลสำเร็จ");
|
||||
} catch (err) {
|
||||
messageError($q, err);
|
||||
} finally {
|
||||
hideLoader();
|
||||
closeDialog();
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function fetchNewListIndicators() {
|
||||
formFilter.page = 1;
|
||||
numpage.value === 1 ? fetchIndicators() : fetchListRole();
|
||||
}
|
||||
watch(
|
||||
() => modal.value,
|
||||
() => {
|
||||
|
|
@ -273,7 +349,11 @@ watch(
|
|||
<DialogHeader
|
||||
:tittle="
|
||||
numpage == 1
|
||||
? 'เพิ่มตัวชี้วัดตามแผนปฏิบัติราชการประจําปี'
|
||||
? isStatusEdit
|
||||
? 'แก้ไขตัวชี้วัดตามแผนปฏิบัติราชการประจําปี'
|
||||
: 'เพิ่มตัวชี้วัดตามแผนปฏิบัติราชการประจําปี'
|
||||
: isStatusEdit
|
||||
? 'แก้ไขตัวชี้วัดตามหน้าที่ความรับผิดชอบ'
|
||||
: 'เพิ่มตัวชี้วัดตามหน้าที่ความรับผิดชอบ'
|
||||
"
|
||||
:close="closeDialog"
|
||||
|
|
@ -284,21 +364,97 @@ watch(
|
|||
<div class="col-12 row">
|
||||
<div class="bg-grey-1 q-pa-md col-3 row lineRight">
|
||||
<div class="col-12 fit">
|
||||
<div class="col-12">
|
||||
<div class="row col-12">
|
||||
<q-checkbox
|
||||
v-model="formFilter.isAll"
|
||||
label="แสดงตัวชี้วัดภายใต้หน่วยงาน/ส่วนราชการทุกระดับ"
|
||||
@update:model-value="fetchNewListIndicators()"
|
||||
/>
|
||||
</div>
|
||||
<div class="row q-col-gutter-sm col-12">
|
||||
<div class="col-5">
|
||||
<datepicker
|
||||
menu-class-name="modalfix"
|
||||
v-model="formFilter.year"
|
||||
:locale="'th'"
|
||||
autoApply
|
||||
year-picker
|
||||
:enableTimePicker="false"
|
||||
@update:model-value="fetchNewListIndicators()"
|
||||
>
|
||||
<template #year="{ year }">{{ year + 543 }}</template>
|
||||
<template #year-overlay-value="{ value }">{{
|
||||
parseInt(value + 543)
|
||||
}}</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
dense
|
||||
outlined
|
||||
:model-value="
|
||||
formFilter.year === null || formFilter.year === ''
|
||||
? null
|
||||
: Number(formFilter.year) + 543
|
||||
"
|
||||
:label="`${'ปีงบประมาณ'}`"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon
|
||||
name="event"
|
||||
class="cursor-pointer"
|
||||
style="color: var(--q-primary)"
|
||||
>
|
||||
</q-icon>
|
||||
</template>
|
||||
<template v-slot:append>
|
||||
<q-icon
|
||||
v-if="formFilter.year"
|
||||
name="cancel"
|
||||
class="cursor-pointer"
|
||||
@click.stop.prevent="
|
||||
(formFilter.year = null),
|
||||
fetchNewListIndicators()
|
||||
"
|
||||
/>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
</div>
|
||||
<div class="col-7">
|
||||
<q-select
|
||||
dense
|
||||
outlined
|
||||
v-model="formFilter.period"
|
||||
:options="roundOp"
|
||||
option-label="name"
|
||||
option-value="id"
|
||||
emit-value
|
||||
map-options
|
||||
input-class="text-red"
|
||||
label="รอบการประเมิน"
|
||||
clearable
|
||||
@update:model-value="fetchNewListIndicators()"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 q-mt-sm">
|
||||
<q-input
|
||||
v-model="search"
|
||||
v-model="formFilter.keyword"
|
||||
outlined
|
||||
dense
|
||||
label="ค้นหา"
|
||||
class="inputgreen"
|
||||
@keydown.enter.prevent="fetchNewListIndicators()"
|
||||
>
|
||||
<template v-slot:append>
|
||||
<q-icon v-if="search == ''" name="search" />
|
||||
<q-icon v-if="formFilter.keyword == ''" name="search" />
|
||||
<q-icon
|
||||
v-if="search !== ''"
|
||||
v-if="formFilter.keyword !== ''"
|
||||
name="clear"
|
||||
class="cursor-pointer"
|
||||
@click="search = ''"
|
||||
@click="
|
||||
(formFilter.keyword = ''), fetchNewListIndicators()
|
||||
"
|
||||
/>
|
||||
</template>
|
||||
</q-input>
|
||||
|
|
@ -335,6 +491,26 @@ watch(
|
|||
</q-item-section>
|
||||
</q-item>
|
||||
</q-list>
|
||||
<q-separator />
|
||||
<div
|
||||
class="q-pa-lg flex justify-end"
|
||||
v-if="totalList !== 0"
|
||||
>
|
||||
ทั้งหมด {{ totalList }} รายการ
|
||||
<q-pagination
|
||||
v-model="formFilter.page"
|
||||
active-color="primary"
|
||||
color="dark"
|
||||
:max="Number(maxPage)"
|
||||
size="sm"
|
||||
boundary-links
|
||||
direction-links
|
||||
:max-pages="5"
|
||||
@update:model-value="
|
||||
numpage === 1 ? fetchIndicators() : fetchListRole()
|
||||
"
|
||||
></q-pagination>
|
||||
</div>
|
||||
</q-card-section>
|
||||
</q-card>
|
||||
</div>
|
||||
|
|
@ -380,6 +556,7 @@ watch(
|
|||
(val) => !!val || `${'กรุณากรอกค่าเป้าหมาย'}`,
|
||||
]"
|
||||
hide-bottom-space
|
||||
lazy-rules
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -395,6 +572,7 @@ watch(
|
|||
:rules="[
|
||||
(val) => !!val || `${'กรุณากรอกหน่วยนับ'}`,
|
||||
]"
|
||||
lazy-rules
|
||||
hide-bottom-space
|
||||
reverse-fill-mask
|
||||
/>
|
||||
|
|
@ -414,6 +592,7 @@ watch(
|
|||
!!val || `${'กรุณากรอกน้ำหนัก (ร้อยละ)'}`,
|
||||
]"
|
||||
hide-bottom-space
|
||||
lazy-rules
|
||||
mask="###"
|
||||
/>
|
||||
</div>
|
||||
|
|
@ -429,34 +608,84 @@ watch(
|
|||
<div class="col-6 text-center">ระดับคะแนน</div>
|
||||
<div class="col-6 text-center">ผลสำเร็จของงาน</div>
|
||||
</div>
|
||||
<div class="row col-12 items-center lineTop">
|
||||
<div
|
||||
class="row col-12 items-center lineTop q-col-gutter-sm"
|
||||
>
|
||||
<div class="col-6 text-center text-body2">5</div>
|
||||
<div class="col-6 text-center text-primary">
|
||||
{{ formDetail.achievement5 }}
|
||||
<div class="col-6">
|
||||
<q-input
|
||||
v-model="formDetail.achievement5"
|
||||
outlined
|
||||
dense
|
||||
:rules="[(val:string) => !!val || `${'กรุณากรอกผลสำเร็จของงาน'}`,]"
|
||||
hide-bottom-space
|
||||
class="inputgreen"
|
||||
lazy-rules
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row col-12 items-center lineTop">
|
||||
<div
|
||||
class="row col-12 items-center lineTop q-col-gutter-sm"
|
||||
>
|
||||
<div class="col-6 text-center text-body2">4</div>
|
||||
<div class="col-6 text-center text-primary">
|
||||
{{ formDetail.achievement4 }}
|
||||
<q-input
|
||||
v-model="formDetail.achievement4"
|
||||
outlined
|
||||
dense
|
||||
:rules="[(val:string) => !!val || `${'กรุณากรอกผลสำเร็จของงาน'}`,]"
|
||||
hide-bottom-space
|
||||
class="inputgreen"
|
||||
lazy-rules
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row col-12 items-center lineTop">
|
||||
<div
|
||||
class="row col-12 items-center lineTop q-col-gutter-sm"
|
||||
>
|
||||
<div class="col-6 text-center text-body2">3</div>
|
||||
<div class="col-6 text-center text-primary">
|
||||
{{ formDetail.achievement3 }}
|
||||
<q-input
|
||||
v-model="formDetail.achievement3"
|
||||
outlined
|
||||
dense
|
||||
:rules="[(val:string) => !!val || `${'กรุณากรอกผลสำเร็จของงาน'}`,]"
|
||||
hide-bottom-space
|
||||
class="inputgreen"
|
||||
lazy-rules
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row col-12 items-center lineTop">
|
||||
<div
|
||||
class="row col-12 items-center lineTop q-col-gutter-sm"
|
||||
>
|
||||
<div class="col-6 text-center text-body2">2</div>
|
||||
<div class="col-6 text-center text-primary">
|
||||
{{ formDetail.achievement2 }}
|
||||
<q-input
|
||||
v-model="formDetail.achievement2"
|
||||
outlined
|
||||
dense
|
||||
:rules="[(val:string) => !!val || `${'กรุณากรอกผลสำเร็จของงาน'}`,]"
|
||||
hide-bottom-space
|
||||
class="inputgreen"
|
||||
lazy-rules
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row col-12 items-center lineTop">
|
||||
<div
|
||||
class="row col-12 items-center lineTop q-col-gutter-sm"
|
||||
>
|
||||
<div class="col-6 text-center text-body2">1</div>
|
||||
<div class="col-6 text-center text-primary">
|
||||
{{ formDetail.achievement1 }}
|
||||
<q-input
|
||||
v-model="formDetail.achievement1"
|
||||
outlined
|
||||
dense
|
||||
:rules="[(val:string) => !!val || `${'กรุณากรอกผลสำเร็จของงาน'}`,]"
|
||||
hide-bottom-space
|
||||
class="inputgreen"
|
||||
lazy-rules
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -471,6 +700,7 @@ watch(
|
|||
:rules="[(val:string) => !!val || `${'กรุณากรอกตัวชี้วัด'}`,]"
|
||||
hide-bottom-space
|
||||
class="inputgreen"
|
||||
lazy-rules
|
||||
/>
|
||||
</div>
|
||||
|
||||
|
|
@ -484,6 +714,7 @@ watch(
|
|||
:rules="[(val:string) => !!val || `${'กรุณากรอกตัวชี้วัด'}`,]"
|
||||
hide-bottom-space
|
||||
class="inputgreen"
|
||||
lazy-rules
|
||||
/>
|
||||
</div>
|
||||
|
||||
|
|
@ -497,8 +728,57 @@ watch(
|
|||
:rules="[(val:string) => !!val || `${'กรุณากรอกข้อมูลเอกสารหลักฐาน'}`,]"
|
||||
hide-bottom-space
|
||||
class="inputgreen"
|
||||
lazy-rules
|
||||
/>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<datepicker
|
||||
v-model="formDetail.date"
|
||||
:locale="'th'"
|
||||
autoApply
|
||||
:enableTimePicker="false"
|
||||
week-start="0"
|
||||
range
|
||||
>
|
||||
<template #year="{ year }">{{ year + 543 }}</template>
|
||||
<template #year-overlay-value="{ value }">{{
|
||||
parseInt(value + 543)
|
||||
}}</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
dense
|
||||
outlined
|
||||
class="inputgreen"
|
||||
:model-value="
|
||||
formDetail.date
|
||||
? `${date2Thai(formDetail.date[0])} - ${date2Thai(
|
||||
formDetail.date[1]
|
||||
)}`
|
||||
: null
|
||||
"
|
||||
:label="`${'ช่วงเวลาเริ่มต้น-สิ้นสุด'}`"
|
||||
hide-bottom-space
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon
|
||||
name="event"
|
||||
class="cursor-pointer"
|
||||
style="color: var(--q-primary)"
|
||||
>
|
||||
</q-icon>
|
||||
</template>
|
||||
<template v-slot:append>
|
||||
<q-icon
|
||||
v-if="formDetail.date !== null"
|
||||
name="cancel"
|
||||
class="cursor-pointer"
|
||||
@click="formDetail.date = null"
|
||||
/>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue