622 lines
18 KiB
Vue
622 lines
18 KiB
Vue
<script setup lang="ts">
|
|
import { ref, onMounted, reactive } from "vue";
|
|
import { useQuasar } from "quasar";
|
|
import { useRoute } from "vue-router";
|
|
import http from "@/plugins/http";
|
|
import config from "@/app.config";
|
|
|
|
/**
|
|
* importType
|
|
*/
|
|
import type { QTableProps } from "quasar";
|
|
import type { DataOption } from "@/modules/15_development/interface/index/Main";
|
|
import type { FormIndicators } from "@/modules/15_development/interface/request/FollowResult";
|
|
import type { DevelopmentEvaluations } from "@/modules/15_development/interface/response/FollowResult";
|
|
|
|
/**
|
|
* importComponents
|
|
*/
|
|
import DialogHeader from "@/components/DialogHeader.vue";
|
|
|
|
/**
|
|
* importStore
|
|
*/
|
|
import { useCounterMixin } from "@/stores/mixin";
|
|
|
|
/**
|
|
* use
|
|
*/
|
|
const $q = useQuasar();
|
|
const route = useRoute();
|
|
const {
|
|
showLoader,
|
|
hideLoader,
|
|
dialogConfirm,
|
|
dialogRemove,
|
|
messageError,
|
|
success,
|
|
} = useCounterMixin();
|
|
|
|
/**
|
|
* props
|
|
*/
|
|
const status = defineModel<string>("status", { required: true });
|
|
const isChangeData = defineModel<boolean>("isChangeData", { required: true });
|
|
const props = defineProps({
|
|
prevStep: { type: Function, required: true },
|
|
nextStep: { type: Function, required: true },
|
|
onCheckChangeData: { type: Function, required: true },
|
|
});
|
|
|
|
const projectId = ref<string>(route.params.id.toLocaleString());
|
|
const checkRoutePermission = ref<boolean>(
|
|
route.name == "developmentDetailPage"
|
|
);
|
|
const step = ref<string>("");
|
|
|
|
/***** ตัวชี้วัดความสำเร็จ ******/
|
|
const modalDialog = ref<boolean>(false);
|
|
const isEdit = ref<boolean>(false);
|
|
const indicatorId = ref<string>("");
|
|
const typeAction = ref<string>("");
|
|
const formIndicators = reactive<FormIndicators>({
|
|
indicators: "",
|
|
target: null,
|
|
metricType: "",
|
|
calculation: "",
|
|
measuRement: "",
|
|
results: "",
|
|
obstacles: "",
|
|
suggestions: "",
|
|
});
|
|
/** ข้อมูล Table */
|
|
const rows = ref<DevelopmentEvaluations[]>([]); // ข้อมูลรายการ
|
|
const columns = ref<QTableProps["columns"]>([
|
|
{
|
|
name: "indicators",
|
|
align: "left",
|
|
label: "ชื่อตัวชี้วัด",
|
|
sortable: true,
|
|
field: "indicators",
|
|
headerStyle: "font-size: 14px",
|
|
style: "font-size: 14px ;",
|
|
},
|
|
{
|
|
name: "target",
|
|
align: "left",
|
|
label: "ค่าเป้าหมาย",
|
|
sortable: true,
|
|
field: "target",
|
|
headerStyle: "font-size: 14px",
|
|
style: "font-size: 14px; ",
|
|
},
|
|
|
|
{
|
|
name: "metricType",
|
|
align: "left",
|
|
label: "ประเภทตัวชี้วัด",
|
|
sortable: true,
|
|
field: "metricType",
|
|
headerStyle: "font-size: 14px",
|
|
style: "font-size: 14px ; ",
|
|
},
|
|
{
|
|
name: "calculation",
|
|
align: "left",
|
|
label: "วิธีการคำนวณ/เครื่องมือในการใช้วัด",
|
|
sortable: true,
|
|
field: "calculation",
|
|
headerStyle: "font-size: 14px",
|
|
style: "font-size: 14px ; ",
|
|
},
|
|
{
|
|
name: "measuRement",
|
|
align: "left",
|
|
label: "ระยะเวลา",
|
|
sortable: true,
|
|
field: "measuRement",
|
|
headerStyle: "font-size: 14px",
|
|
style: "font-size: 14px ; ",
|
|
},
|
|
{
|
|
name: "results",
|
|
align: "left",
|
|
label: "ผลการดำเนินการ",
|
|
sortable: true,
|
|
field: "results",
|
|
headerStyle: "font-size: 14px",
|
|
style: "font-size: 14px ; ",
|
|
},
|
|
]);
|
|
// ประเภทตัวชี้วัด
|
|
const metricTypeOp = ref<DataOption[]>([
|
|
{
|
|
id: "1",
|
|
name: "ตัวชี้วัดความสำเร็จระดับผลผลิต (เป้าหมาย)",
|
|
},
|
|
{
|
|
id: "2",
|
|
name: "ตัวชี้วัดความสำเร็จระดับผลลัพธ์ (วัตถุประสงค์)",
|
|
},
|
|
{
|
|
id: "3",
|
|
name: "ตัวชี้วัดความสำเร็จระดับผลกระทบ (ประโยชน์ที่คาดว่าจะได้รับ)",
|
|
},
|
|
]);
|
|
|
|
const progressTracking = ref<string>(""); //การติดตามความก้าวหน้า
|
|
const projectEvaluation = ref<string>(""); // การประเมินผลโครงการ
|
|
|
|
/**
|
|
* ดึงข้อมูลการติดตามผลและการประเมิน
|
|
*/
|
|
function fetchData() {
|
|
showLoader();
|
|
http
|
|
.get(config.API.developmentMainTab("tab4", projectId.value))
|
|
.then((res) => {
|
|
const data = res.data.result;
|
|
rows.value = data.developmentEvaluations;
|
|
progressTracking.value = data.progressTracking;
|
|
projectEvaluation.value = data.projectEvaluation;
|
|
})
|
|
.catch((err) => {
|
|
messageError($q, err);
|
|
})
|
|
.finally(() => {
|
|
hideLoader();
|
|
isChangeData.value = false;
|
|
});
|
|
}
|
|
|
|
/**
|
|
* บันทึก การติดตามความก้าวหน้า,การประเมินผลโครงการ
|
|
*/
|
|
function onSubmit() {
|
|
showLoader();
|
|
http
|
|
.put(config.API.developmentMainTab("tab4", projectId.value), {
|
|
progressTracking: progressTracking.value,
|
|
projectEvaluation: projectEvaluation.value,
|
|
})
|
|
.then(() => {
|
|
!modalDialog.value && success($q, "บันทึกข้อมูลแล้ว");
|
|
})
|
|
.catch((err) => {
|
|
messageError($q, err);
|
|
})
|
|
.finally(() => {
|
|
hideLoader();
|
|
isChangeData.value = false;
|
|
});
|
|
}
|
|
|
|
/**
|
|
* เปิด dialog add/edit
|
|
* @param statusEdit true/false
|
|
* @param data data => EDIT
|
|
*/
|
|
function onClickAddIndicator(
|
|
statusEdit: boolean = false,
|
|
data: DevelopmentEvaluations | null = null,
|
|
type: string = ""
|
|
) {
|
|
modalDialog.value = true;
|
|
isChangeData.value && onSubmit();
|
|
isEdit.value = statusEdit;
|
|
typeAction.value = type;
|
|
if (statusEdit) {
|
|
if (data) {
|
|
indicatorId.value = data.id;
|
|
formIndicators.indicators = data.indicators;
|
|
formIndicators.target = data.target;
|
|
formIndicators.metricType = data.metricType;
|
|
formIndicators.calculation = data.calculation;
|
|
formIndicators.measuRement = data.measuRement;
|
|
formIndicators.results = data.results;
|
|
formIndicators.obstacles = data.obstacles;
|
|
formIndicators.suggestions = data.suggestions;
|
|
}
|
|
}
|
|
}
|
|
|
|
/**
|
|
* บันทึกตัวชี้วัดความสำเร็จ
|
|
*/
|
|
function onSubmitIndicators() {
|
|
formIndicators.target = formIndicators.target
|
|
? Number(formIndicators.target)
|
|
: formIndicators.target;
|
|
|
|
const id = isEdit.value ? indicatorId.value : projectId.value;
|
|
const path = isEdit.value ? "tab4_1_edit" : "tab4_1_add";
|
|
dialogConfirm($q, () => {
|
|
showLoader();
|
|
http
|
|
.put(config.API.developmentMainTab(path, id), {
|
|
...formIndicators,
|
|
results: status.value === "FINISH" ? formIndicators.results : undefined,
|
|
})
|
|
.then(() => {
|
|
success($q, "บันทึกข้อมูลสำเร็จ");
|
|
fetchData();
|
|
closeDialog();
|
|
})
|
|
.catch((err) => {
|
|
messageError($q, err);
|
|
})
|
|
.finally(() => {
|
|
hideLoader();
|
|
});
|
|
});
|
|
}
|
|
|
|
/**
|
|
* ลบตัวชี้วัดความสำเร็จ
|
|
*/
|
|
function onClickDeleteIndicator(id: string) {
|
|
dialogRemove($q, () => {
|
|
showLoader();
|
|
http
|
|
.delete(config.API.developmentMainTab("tab4_1", id))
|
|
.then(() => {
|
|
fetchData();
|
|
success($q, "ลบข้อมูลสำเร็จ");
|
|
})
|
|
.catch((err) => {
|
|
messageError($q, err);
|
|
})
|
|
.finally(() => {
|
|
hideLoader();
|
|
});
|
|
});
|
|
}
|
|
|
|
/**
|
|
* close Dialog and Clear
|
|
*/
|
|
function closeDialog() {
|
|
modalDialog.value = false;
|
|
formIndicators.indicators = "";
|
|
formIndicators.target = null;
|
|
formIndicators.metricType = "";
|
|
formIndicators.calculation = "";
|
|
formIndicators.measuRement = "";
|
|
formIndicators.results = "";
|
|
formIndicators.obstacles = "";
|
|
formIndicators.suggestions = "";
|
|
}
|
|
|
|
/**
|
|
* function ไปยัง Tab ค่อไป
|
|
*/
|
|
function onNextTab() {
|
|
step.value == "next" ? props.nextStep() : props.prevStep();
|
|
}
|
|
|
|
/** fetchData in page */
|
|
onMounted(() => {
|
|
fetchData();
|
|
});
|
|
|
|
/**
|
|
* เรียก function ไปใช่หน้าหลัก
|
|
*/
|
|
defineExpose({
|
|
onSubmit,
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<q-form greedy @submit.prevent @validation-success="onNextTab">
|
|
<div class="q-pa-sm q-my-sm">
|
|
<q-card bordered style="border: 1px solid #d6dee1">
|
|
<div
|
|
class="col-xs-12 col-sm-12 text-weight-medium bg-grey-1 q-py-xs q-px-md"
|
|
>
|
|
ตัวชี้วัดความสำเร็จ
|
|
<q-btn
|
|
v-if="!checkRoutePermission"
|
|
dense
|
|
flat
|
|
round
|
|
color="primary"
|
|
icon="add"
|
|
@click="onClickAddIndicator()"
|
|
>
|
|
<q-tooltip>เพิ่มตัวชี้วัดความสำเร็จ</q-tooltip>
|
|
</q-btn>
|
|
</div>
|
|
<div class="col-12"><q-separator /></div>
|
|
<div class="col-12 q-pa-md">
|
|
<d-table
|
|
for="table"
|
|
ref="table"
|
|
:columns="columns"
|
|
:rows="rows"
|
|
row-key="id"
|
|
flat
|
|
bordered
|
|
dense
|
|
class="custom-header-table"
|
|
:rows-per-page-options="[10, 25, 50, 100]"
|
|
>
|
|
<template v-slot:header="props">
|
|
<q-tr :props="props">
|
|
<q-th auto-width />
|
|
<q-th v-for="col in props.cols" :key="col.name" :props="props">
|
|
<span class="text-weight-medium">{{ col.label }}</span>
|
|
</q-th>
|
|
</q-tr>
|
|
</template>
|
|
<template v-slot:body="props">
|
|
<q-tr :props="props">
|
|
<q-td>
|
|
<q-btn
|
|
v-if="!checkRoutePermission && status === 'FINISH'"
|
|
dense
|
|
flat
|
|
round
|
|
color="public"
|
|
icon="mdi-content-save-edit-outline"
|
|
@click="onClickAddIndicator(true, props.row, 'result')"
|
|
>
|
|
<q-tooltip>แก้ไขตัวชี้วัดความสำเร็จ</q-tooltip>
|
|
</q-btn>
|
|
<q-btn
|
|
v-if="!checkRoutePermission"
|
|
dense
|
|
flat
|
|
round
|
|
color="edit"
|
|
icon="edit"
|
|
@click="onClickAddIndicator(true, props.row)"
|
|
>
|
|
<q-tooltip>แก้ไขตัวชี้วัดความสำเร็จ</q-tooltip>
|
|
</q-btn>
|
|
<q-btn
|
|
v-if="!checkRoutePermission"
|
|
dense
|
|
flat
|
|
round
|
|
color="red"
|
|
icon="delete"
|
|
@click="onClickDeleteIndicator(props.row.id)"
|
|
>
|
|
<q-tooltip>ลบ</q-tooltip>
|
|
</q-btn>
|
|
</q-td>
|
|
|
|
<q-td v-for="col in props.cols" :key="col.name" :props="props">
|
|
<div>
|
|
{{ col.value ? col.value : "-" }}
|
|
</div>
|
|
</q-td>
|
|
</q-tr>
|
|
</template>
|
|
</d-table>
|
|
</div>
|
|
</q-card>
|
|
|
|
<!-- การติดตามความก้าวหน้า -->
|
|
<q-card bordered class="col-12 q-my-sm q-mt-md">
|
|
<div
|
|
class="col-xs-12 col-sm-12 text-weight-medium bg-grey-1 q-py-xs q-px-md"
|
|
>
|
|
การติดตามความก้าวหน้า
|
|
</div>
|
|
<q-separator />
|
|
<q-card-section>
|
|
<div class="row col-12 q-col-gutter-sm">
|
|
<div class="col-12">
|
|
<q-input
|
|
outlined
|
|
:readonly="checkRoutePermission"
|
|
dense
|
|
class="inputgreen"
|
|
v-model="progressTracking"
|
|
label="การติดตามความก้าวหน้า"
|
|
type="textarea"
|
|
@update:model-value="props.onCheckChangeData()"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</q-card-section>
|
|
</q-card>
|
|
|
|
<!-- การประเมินผลโครงการ -->
|
|
<q-card bordered class="col-12 q-my-sm q-mt-md">
|
|
<div
|
|
class="col-xs-12 col-sm-12 text-weight-medium bg-grey-1 q-py-xs q-px-md"
|
|
>
|
|
การประเมินผลโครงการ
|
|
</div>
|
|
<q-separator />
|
|
<q-card-section>
|
|
<div class="row col-12 q-col-gutter-sm">
|
|
<div class="col-12">
|
|
<q-input
|
|
outlined
|
|
:readonly="checkRoutePermission"
|
|
dense
|
|
class="inputgreen"
|
|
v-model="projectEvaluation"
|
|
label="การประเมินผลโครงการ"
|
|
type="textarea"
|
|
@update:model-value="props.onCheckChangeData()"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</q-card-section>
|
|
</q-card>
|
|
</div>
|
|
<!--CARD ตัวชี้วัดความสำเร็จ -->
|
|
<q-separator />
|
|
|
|
<q-card-actions align="center">
|
|
<div class="text-center q-pa-sm" v-if="!checkRoutePermission">
|
|
<q-btn
|
|
rounded
|
|
label="ก่อนหน้า"
|
|
icon="mdi-chevron-left"
|
|
id="onSubmit"
|
|
type="submit"
|
|
color="public"
|
|
class="q-mr-xs"
|
|
style="width: 120px"
|
|
@click="step = 'prev'"
|
|
>
|
|
</q-btn>
|
|
<q-btn
|
|
rounded
|
|
label="ถัดไป"
|
|
icon-right="mdi-chevron-right"
|
|
id="onSubmit"
|
|
type="submit"
|
|
color="public"
|
|
class="q-ml-xs"
|
|
style="width: 120px"
|
|
@click="step = 'next'"
|
|
>
|
|
</q-btn>
|
|
</div>
|
|
</q-card-actions>
|
|
</q-form>
|
|
|
|
<q-dialog v-model="modalDialog" persistent>
|
|
<q-card style="width: 900px; max-width: 80vw">
|
|
<q-form greedy @submit.prevent @validation-success="onSubmitIndicators">
|
|
<DialogHeader
|
|
:tittle="
|
|
isEdit && typeAction === 'result'
|
|
? 'ผลการดำเนินการ'
|
|
: isEdit
|
|
? 'แก้ไขตัวชี้วัด'
|
|
: 'เพิ่มตัวชี้วัด'
|
|
"
|
|
:close="closeDialog"
|
|
/>
|
|
<q-separator />
|
|
<q-card-section>
|
|
<div
|
|
class="row q-col-gutter-sm"
|
|
v-if="status === 'FINISH' && typeAction === 'result'"
|
|
>
|
|
<div class="col-12">
|
|
<q-input
|
|
dense
|
|
outlined
|
|
class="inputgreen"
|
|
label="ผลการดำเนิดการ"
|
|
v-model="formIndicators.results"
|
|
hide-bottom-space
|
|
lazy-rules
|
|
:rules="[
|
|
(val:string) =>
|
|
!!val || `${'กรุณากรอกผลการดำเนิดการ'}`,
|
|
|
|
]"
|
|
type="textarea"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row q-col-gutter-sm" v-else>
|
|
<div class="col-12">
|
|
<q-input
|
|
dense
|
|
outlined
|
|
class="inputgreen"
|
|
label="ชื่อตัวชี้วัด"
|
|
v-model="formIndicators.indicators"
|
|
hide-bottom-space
|
|
lazy-rules
|
|
:rules="[
|
|
(val:string) =>
|
|
!!val || `${'กรุณากรอกชื่อตัวชี้วัด'}`,
|
|
|
|
]"
|
|
/>
|
|
</div>
|
|
<div class="col-6">
|
|
<q-select
|
|
dense
|
|
outlined
|
|
label="ประเภทตัวชี้วัด"
|
|
v-model="formIndicators.metricType"
|
|
:options="metricTypeOp"
|
|
option-label="name"
|
|
option-value="name"
|
|
emit-value
|
|
map-options
|
|
class="inputgreen"
|
|
hide-bottom-space
|
|
lazy-rules
|
|
:rules="[
|
|
(val:string) =>
|
|
!!val || `${'กรุณาเลือกประเภทตัวชี้วัด'}`,
|
|
|
|
]"
|
|
/>
|
|
</div>
|
|
|
|
<div class="col-6">
|
|
<q-input
|
|
dense
|
|
outlined
|
|
class="inputgreen"
|
|
label="ค่าเป้าหมาย"
|
|
v-model="formIndicators.target"
|
|
mask="#"
|
|
reverse-fill-mask
|
|
hide-bottom-space
|
|
lazy-rules
|
|
:rules="[
|
|
(val:string) =>
|
|
!!val || `${'กรุณากรอกค่าเป้าหมาย'}`,
|
|
|
|
]"
|
|
/>
|
|
</div>
|
|
<div class="col-12">
|
|
<q-input
|
|
outlined
|
|
dense
|
|
class="inputgreen"
|
|
v-model="formIndicators.calculation"
|
|
hide-bottom-space
|
|
label="วิธีการคำนวณ/เครื่องมือ"
|
|
type="textarea"
|
|
/>
|
|
</div>
|
|
<div class="col-12">
|
|
<q-input
|
|
outlined
|
|
dense
|
|
class="inputgreen"
|
|
v-model="formIndicators.measuRement"
|
|
hide-bottom-space
|
|
label="ระยะเวลาวัดผล"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</q-card-section>
|
|
<q-separator />
|
|
<q-card-actions align="right">
|
|
<q-btn
|
|
unelevated
|
|
label="บันทึก"
|
|
id="onSubmit"
|
|
type="submit"
|
|
color="public"
|
|
class="q-px-md"
|
|
>
|
|
<q-tooltip>บันทึกข้อมูล</q-tooltip>
|
|
</q-btn>
|
|
</q-card-actions>
|
|
</q-form>
|
|
</q-card>
|
|
</q-dialog>
|
|
</template>
|
|
|
|
<style scoped></style>
|