415 lines
15 KiB
Vue
415 lines
15 KiB
Vue
<script setup lang="ts">
|
|
import { ref, reactive, 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";
|
|
import { useKpiDataStore } from "@/modules/08_KPI/store";
|
|
|
|
const $q = useQuasar();
|
|
const mixin = useCounterMixin();
|
|
const store = useKpiDataStore();
|
|
|
|
const { showLoader, hideLoader, messageError, dialogConfirm } = mixin;
|
|
|
|
const modal = defineModel<boolean>("modal", { required: true });
|
|
const numpage = defineModel<number>("numpage", { required: true });
|
|
|
|
const search = ref<string>("");
|
|
const listCheck = ref<number | null>(null);
|
|
const listTarget = ref<any>([]);
|
|
|
|
const formDetail = reactive<any>({
|
|
orgRevisionId: "",
|
|
id: "",
|
|
year: null,
|
|
round: "",
|
|
kpiPeriodId: "",
|
|
includingName: "",
|
|
including: "",
|
|
target: "",
|
|
unit: null,
|
|
weight: null,
|
|
achievement1: "",
|
|
achievement2: "",
|
|
achievement3: "",
|
|
achievement4: "",
|
|
achievement5: "",
|
|
meaning: "",
|
|
formula: "",
|
|
node: null,
|
|
nodeId: "",
|
|
strategy: null,
|
|
strategyId: "",
|
|
});
|
|
|
|
function fetchIndicators() {
|
|
const nodeId = store.dataProfile.nodeId;
|
|
const node = store.dataProfile.node;
|
|
const kpiPeriodId = store.dataEvaluation.kpiPeriodId;
|
|
|
|
showLoader();
|
|
http
|
|
.get(
|
|
config.API.kpiPlan +
|
|
`?page=${1}&pageSize=${50}&kpiPeriodId=${kpiPeriodId}&nodeId=${nodeId}&node=${node}&keyword=${""}`
|
|
)
|
|
.then((res) => {
|
|
listTarget.value = res.data.result.data;
|
|
})
|
|
.catch((err) => {
|
|
messageError($q, err);
|
|
})
|
|
.finally(() => {
|
|
hideLoader();
|
|
});
|
|
}
|
|
|
|
function clickList(index: number, id: string) {
|
|
showLoader();
|
|
http
|
|
.get(config.API.kpiPlan + `/${id}`)
|
|
.then((res) => {
|
|
listCheck.value = index;
|
|
const data = res.data.result;
|
|
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.target = data.target;
|
|
formDetail.unit = data.unit;
|
|
formDetail.weight = data.weight;
|
|
formDetail.achievement1 = data.achievement1;
|
|
formDetail.achievement2 = data.achievement2;
|
|
formDetail.achievement3 = data.achievement3;
|
|
formDetail.achievement4 = data.achievement4;
|
|
formDetail.achievement5 = data.achievement5;
|
|
formDetail.meaning = data.meaning;
|
|
formDetail.formula = data.formula;
|
|
formDetail.node = data.node;
|
|
formDetail.nodeId = data.nodeId;
|
|
formDetail.strategy = data.strategy;
|
|
formDetail.strategyId = data.strategyId;
|
|
})
|
|
.catch((err) => {
|
|
messageError($q, err);
|
|
})
|
|
.finally(() => {
|
|
hideLoader();
|
|
});
|
|
}
|
|
|
|
/** ปิด dialog */
|
|
function closeDialog() {
|
|
modal.value = false;
|
|
search.value = "";
|
|
listCheck.value = null;
|
|
formDetail.orgRevisionId = "";
|
|
formDetail.id = "";
|
|
formDetail.year = "";
|
|
formDetail.round = "";
|
|
formDetail.kpiPeriodId = "";
|
|
formDetail.includingName = "";
|
|
formDetail.including = "";
|
|
formDetail.target = "";
|
|
formDetail.unit = "";
|
|
formDetail.weight = "";
|
|
formDetail.achievement1 = "";
|
|
formDetail.achievement2 = "";
|
|
formDetail.achievement3 = "";
|
|
formDetail.achievement4 = "";
|
|
formDetail.achievement5 = "";
|
|
formDetail.meaning = "";
|
|
formDetail.formula = "";
|
|
formDetail.node = "";
|
|
formDetail.nodeId = "";
|
|
formDetail.strategy = "";
|
|
formDetail.strategyId = "";
|
|
}
|
|
|
|
/** เรียกใช้ class */
|
|
function getclass() {
|
|
return "inputgreen";
|
|
}
|
|
|
|
function onSubmit() {
|
|
dialogConfirm($q, () => {});
|
|
}
|
|
|
|
watch(
|
|
() => modal.value,
|
|
() => {
|
|
if (modal.value) {
|
|
fetchIndicators();
|
|
}
|
|
}
|
|
);
|
|
</script>
|
|
<template>
|
|
<q-dialog v-model="modal" persistent>
|
|
<q-card class="col-12" style="width: 70%">
|
|
<q-form greedy @submit.prevent @validation-success="onSubmit">
|
|
<DialogHeader
|
|
:tittle="
|
|
numpage == 1
|
|
? 'เพิ่มตัวชี้วัดตามแผนปฏิบัติราชการประจําปี'
|
|
: 'เพิ่มตัวชี้วัดตามหน้าที่ความรับผิดชอบ'
|
|
"
|
|
:close="closeDialog"
|
|
/>
|
|
<q-separator />
|
|
|
|
<q-card-section class="q-pa-none scroll" style="max-height: 75vh">
|
|
<div class="col-12 row">
|
|
<div
|
|
class="bg-grey-1 q-pa-md col-xs-12 col-sm-4 col-md-3 row lineRight"
|
|
>
|
|
<div class="col-12 fit">
|
|
<div class="col-12">
|
|
<q-input
|
|
v-model="search"
|
|
outlined
|
|
dense
|
|
label="ค้นหา"
|
|
:class="getclass()"
|
|
>
|
|
<template v-slot:append>
|
|
<q-icon v-if="search == ''" name="search" />
|
|
<q-icon
|
|
v-if="search !== ''"
|
|
name="clear"
|
|
class="cursor-pointer"
|
|
@click="search = ''"
|
|
/>
|
|
</template>
|
|
</q-input>
|
|
</div>
|
|
<q-card bordered flat class="q-mt-sm no-shadow bg-white col-12">
|
|
<div class="row q-px-md q-py-sm items-center bg-grey-1">
|
|
<div class="col-4">
|
|
<span>รหัสตัวชี้วัด</span>
|
|
</div>
|
|
<div class="col-4">
|
|
<span>ชื่อตัวชี้วัด</span>
|
|
</div>
|
|
</div>
|
|
<q-separator />
|
|
|
|
<q-card-section class="q-pa-none">
|
|
<q-list separator dense>
|
|
<q-item
|
|
v-for="(item, index) in listTarget"
|
|
:key="index"
|
|
clickable
|
|
v-ripple
|
|
:active="listCheck === index"
|
|
active-class="my-menu-link"
|
|
@click="clickList(index, item.id)"
|
|
>
|
|
<q-item-section class="q-pa-none">
|
|
<div class="row items-center" style="height: 20px">
|
|
<div class="col-4">
|
|
<span>{{ item.including }}</span>
|
|
</div>
|
|
<div class="col-4">
|
|
<span>{{ item.includingName }}</span>
|
|
</div>
|
|
</div>
|
|
</q-item-section>
|
|
</q-item>
|
|
</q-list>
|
|
</q-card-section>
|
|
</q-card>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-xs-12 col-sm-8 col-md-9 row">
|
|
<div class="row q-pa-md q-col-gutter-sm">
|
|
<div class="col-12">
|
|
<span class="text-body2 text-weight-medium"
|
|
>รายละเอียดตัวชี้วัด</span
|
|
>
|
|
</div>
|
|
<div class="col-8">
|
|
<q-card bordered class="full-height q-pa-sm">
|
|
<div class="q-pa-sm q-col-gutter-lg">
|
|
<div class="col-12 row">
|
|
<div class="col-4 text-grey-6">หน่วยงาน/ส่วนราชการ</div>
|
|
<div class="col-8">{{ formDetail.nodeId }}</div>
|
|
</div>
|
|
<div class="col-12 row">
|
|
<div class="col-4 text-grey-6">ยุทธศาสตร์ / แผน</div>
|
|
<div class="col-8">{{ formDetail.strategyId }}</div>
|
|
</div>
|
|
|
|
<div class="col-12 row">
|
|
<div class="col-4 text-grey-6">รหัสตัวชี้วัด</div>
|
|
<div class="col-8">{{ formDetail.including }}</div>
|
|
</div>
|
|
<div class="col-12 row">
|
|
<div class="col-4 text-grey-6">ชื่อตัวชี้วัด</div>
|
|
<div class="col-8">{{ formDetail.includingName }}</div>
|
|
</div>
|
|
<div class="col-12 row">
|
|
<div class="col-4 text-grey-6">ค่าเป้าหมาย</div>
|
|
<div class="col-8">
|
|
<q-input
|
|
outlined
|
|
v-model="formDetail.target"
|
|
bg-color="white"
|
|
dense
|
|
class="inputgreen"
|
|
:rules="[
|
|
(val) => !!val || `${'กรุณากรอกค่าเป้าหมาย'}`,
|
|
]"
|
|
hide-bottom-space
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div class="col-12 row">
|
|
<div class="col-4 text-grey-6">หน่วยนับ</div>
|
|
<div class="col-8">
|
|
<q-input
|
|
outlined
|
|
v-model="formDetail.unit"
|
|
bg-color="white"
|
|
dense
|
|
class="inputgreen"
|
|
:rules="[
|
|
(val) => !!val || `${'กรุณากรอกหน่วยนับ'}`,
|
|
]"
|
|
hide-bottom-space
|
|
mask="#"
|
|
reverse-fill-mask
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div class="col-12 row">
|
|
<div class="col-4 text-grey-6">น้ำหนัก (ร้อยละ)</div>
|
|
<div class="col-8">
|
|
<q-input
|
|
outlined
|
|
v-model="formDetail.weight"
|
|
bg-color="white"
|
|
dense
|
|
class="inputgreen"
|
|
:rules="[
|
|
(val) =>
|
|
!!val || `${'กรุณากรอกน้ำหนัก (ร้อยละ)'}`,
|
|
]"
|
|
hide-bottom-space
|
|
mask="#"
|
|
reverse-fill-mask
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</q-card>
|
|
</div>
|
|
<div class="col-4 row">
|
|
<div class="row col-12 card-box">
|
|
<div
|
|
class="col-12 bg-grey-2 row items-center text-weight-medium"
|
|
>
|
|
<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="col-6 text-center text-body2">5</div>
|
|
<div class="col-6 text-center text-primary">
|
|
{{ formDetail.achievement5 }}
|
|
</div>
|
|
</div>
|
|
<div class="row col-12 items-center lineTop">
|
|
<div class="col-6 text-center text-body2">4</div>
|
|
<div class="col-6 text-center text-primary">
|
|
{{ formDetail.achievement4 }}
|
|
</div>
|
|
</div>
|
|
<div class="row col-12 items-center lineTop">
|
|
<div class="col-6 text-center text-body2">3</div>
|
|
<div class="col-6 text-center text-primary">
|
|
{{ formDetail.achievement3 }}
|
|
</div>
|
|
</div>
|
|
<div class="row col-12 items-center lineTop">
|
|
<div class="col-6 text-center text-body2">2</div>
|
|
<div class="col-6 text-center text-primary">
|
|
{{ formDetail.achievement2 }}
|
|
</div>
|
|
</div>
|
|
<div class="row col-12 items-center lineTop">
|
|
<div class="col-6 text-center text-body2">1</div>
|
|
<div class="col-6 text-center text-primary">
|
|
{{ formDetail.achievement1 }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-12">
|
|
<q-input
|
|
v-model="formDetail.meaning"
|
|
label="นิยามหรือความหมายของตัวชี้วัด"
|
|
type="textarea"
|
|
outlined
|
|
autogrow
|
|
dense
|
|
:rules="[(val:string) => !!val || `${'กรุณากรอกตัวชี้วัด'}`,]"
|
|
hide-bottom-space
|
|
:class="getclass()"
|
|
/>
|
|
</div>
|
|
<div class="col-12">
|
|
<q-input
|
|
v-model="formDetail.formula"
|
|
label="สูตรคำนวณ"
|
|
type="textarea"
|
|
outlined
|
|
autogrow
|
|
dense
|
|
:rules="[(val:string) => !!val || `${'กรุณากรอกตัวชี้วัด'}`,]"
|
|
hide-bottom-space
|
|
:class="getclass()"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</q-card-section>
|
|
<q-separator />
|
|
|
|
<q-card-actions align="right" class="bg-white text-teal">
|
|
<q-btn label="บันทึก" color="secondary" type="submit"
|
|
><q-tooltip>บันทึกข้อมูล</q-tooltip></q-btn
|
|
>
|
|
</q-card-actions>
|
|
</q-form>
|
|
</q-card>
|
|
</q-dialog>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.my-menu-link {
|
|
background: #ebf9f7 !important;
|
|
color: #1bb19ab8 !important;
|
|
}
|
|
.no-shadow {
|
|
box-shadow: none !important;
|
|
}
|
|
.lineRight {
|
|
border-right: 1px solid #ededed !important;
|
|
}
|
|
.lineTop {
|
|
border-top: 1px solid #ededed !important;
|
|
}
|
|
.card-box {
|
|
border: 1px solid #ededed !important;
|
|
border-radius: 8px;
|
|
}
|
|
</style>
|