465 lines
17 KiB
Vue
465 lines
17 KiB
Vue
<script setup lang="ts">
|
|
import { onMounted, reactive, ref, computed } from "vue";
|
|
import { useQuasar } from "quasar";
|
|
import { useRouter, useRoute } from "vue-router";
|
|
|
|
import { useCounterMixin } from "@/stores/mixin";
|
|
import { useRequestEditStore } from "@/modules/04_registryPerson/stores/RequestEdit";
|
|
import { uselistDevelopmentDataStore } from "@/modules/15_development/store/listDevelopment";
|
|
import config from "@/app.config";
|
|
import http from "@/plugins/http";
|
|
|
|
import type { DataOption } from "@/modules/04_registryPerson/interface/index/Main";
|
|
import type { FormDataIDP } from "@/modules/04_registryPerson/interface/request/Main";
|
|
import type { DataItemsDevelopment } from "@/modules/15_development/interface/index/Main";
|
|
|
|
import Workflow from "@/components/Workflow/Main.vue";
|
|
|
|
const $q = useQuasar();
|
|
const router = useRouter();
|
|
const route = useRoute();
|
|
const routerName = ref<string>(route.name as string);
|
|
const store = useRequestEditStore();
|
|
const itemsDevelopment = uselistDevelopmentDataStore();
|
|
const {
|
|
dialogConfirm,
|
|
showLoader,
|
|
hideLoader,
|
|
messageError,
|
|
success,
|
|
date2Thai,
|
|
} = useCounterMixin();
|
|
|
|
const requestId = ref<string>(route.params.id as string);
|
|
|
|
const isReadOnly = ref<boolean>(false); //อ่านอย่างเดียว
|
|
const workflowRef = ref<any>(null);
|
|
const isDone = ref<string>("");
|
|
//ฟอร์มข้อมูลการพัฒนารายบุคคล
|
|
const formData = reactive<FormDataIDP>({
|
|
topic: "", //ชื่อเรื่อง/เนื้อเรื่อง/หัวข้อการพัฒนา
|
|
developmentProjects: [], //วิธีการพัฒนา
|
|
reasonDevelopment70: "", //อื่นๆ 70 การลงมือปฏิบัติ
|
|
reasonDevelopment20: "", //อื่นๆ 20 การเรียนรู้จากผู้อื่น
|
|
reasonDevelopment10: "", //อื่นๆ 10 การฝึกอบรมอื่นๆ
|
|
developmentTarget: "", //เป้าหมายการนำไปพัฒนางาน
|
|
developmentResults: "", //วิธีการวัดผลการพัฒนา
|
|
developmentReport: "", //รายงานผลการพัฒนา
|
|
status: "", //สถานะ
|
|
reason: "", //หมายเหตุ
|
|
createdFullName: "", //ผู้ขอแก้ไข
|
|
createdAt: null, //เวลาที่แก้ไข
|
|
});
|
|
|
|
const isCheckData = computed(() => {
|
|
if (isReadOnly.value === true) {
|
|
return true;
|
|
} else return false;
|
|
});
|
|
|
|
//70 การลงมือปฏิบัติ (โดยผู้บังคับบัญชามอบหมาย)
|
|
const itemsDevelopment70 = ref<DataItemsDevelopment[]>(
|
|
itemsDevelopment.dataDevelopment70
|
|
);
|
|
//20 การเรียนรู้จากผู้อื่น (Coach/Mentor/Consulting)
|
|
const itemsDevelopment20 = ref<DataItemsDevelopment[]>(
|
|
itemsDevelopment.dataDevelopment20
|
|
);
|
|
//10 การฝึกอบรมอื่นๆ
|
|
const itemsDevelopment10 = ref<DataItemsDevelopment[]>(
|
|
itemsDevelopment.dataDevelopment10
|
|
);
|
|
//ข้อมูลรายการสถานะ
|
|
const statusOptionMain = ref<DataOption[]>(
|
|
store.optionStatusIDP.filter((e: DataOption) => e.id !== "")
|
|
);
|
|
const statusOption = ref<DataOption[]>(statusOptionMain.value); //ตัวเลือกรายการสถานะ
|
|
|
|
/**
|
|
* function fetch ข้อมูลการพัฒนารายบุคคลตาม ID ที่ค้องการ
|
|
* @param id ID ที่ต้องการดูรายละเอียด
|
|
*/
|
|
async function fetchDataByid(id: string) {
|
|
showLoader();
|
|
await http
|
|
.get(
|
|
config.API.requestDevelopmentEditByType(
|
|
routerName.value == "registryNewRequestEditPageEMP" ? "-employee" : ""
|
|
) + `admin/${id}`
|
|
)
|
|
.then((res) => {
|
|
const data = res.data.result;
|
|
formData.topic = data.name;
|
|
formData.developmentProjects = data.developmentProjects;
|
|
formData.developmentTarget = data.developmentTarget;
|
|
formData.developmentResults = data.developmentResults;
|
|
formData.developmentReport = data.developmentReport;
|
|
formData.reasonDevelopment70 = data.reasonDevelopment70;
|
|
formData.reasonDevelopment20 = data.reasonDevelopment20;
|
|
formData.reasonDevelopment10 = data.reasonDevelopment10;
|
|
formData.status = data.status;
|
|
formData.reason = data.reason;
|
|
formData.createdFullName = data.createdFullName;
|
|
formData.createdAt = data.createdAt;
|
|
|
|
isDone.value = data.status;
|
|
|
|
if (data.status !== "PENDING") {
|
|
isReadOnly.value = true;
|
|
} else {
|
|
isReadOnly.value = false;
|
|
}
|
|
})
|
|
.catch((err) => {
|
|
messageError($q, err);
|
|
})
|
|
.finally(() => {
|
|
hideLoader();
|
|
});
|
|
}
|
|
|
|
/**
|
|
* function ค้นหาคำใน select สถานะคำร้อง
|
|
* @param val คำค้น
|
|
* @param update Function
|
|
*/
|
|
function filterOption(val: string, update: Function) {
|
|
update(() => {
|
|
statusOption.value = statusOptionMain.value.filter(
|
|
(v: DataOption) => v.name.indexOf(val) > -1
|
|
);
|
|
});
|
|
}
|
|
|
|
/** function บันทึกข้อมูลการพัฒนารายบุคคล */
|
|
function onSubmit() {
|
|
dialogConfirm($q, async () => {
|
|
showLoader();
|
|
await http
|
|
.patch(
|
|
config.API.requestDevelopmentEditByType(
|
|
routerName.value == "registryNewRequestEditPageEMP" ? "-employee" : ""
|
|
) + `admin/${requestId.value}`,
|
|
{
|
|
status: formData.status,
|
|
reason: formData.reason,
|
|
}
|
|
)
|
|
.then(async () => {
|
|
await fetchDataByid(requestId.value);
|
|
success($q, "บันทึกข้อมูลสำเร็จ");
|
|
})
|
|
.catch((err) => {
|
|
messageError($q, err);
|
|
})
|
|
.finally(() => {
|
|
hideLoader();
|
|
});
|
|
});
|
|
}
|
|
|
|
/**
|
|
* class inpui
|
|
* @param val ค่าสถานะ
|
|
*/
|
|
function classInput(val: boolean) {
|
|
return {
|
|
"full-width cursor-pointer ": val,
|
|
"full-width cursor-pointer inputgreen": !val,
|
|
};
|
|
}
|
|
|
|
/**
|
|
* ดูการเปลี่ยนแปลงของ modal เมื่อ modal เป็น True
|
|
* fetch ข้อมูลการพัฒนารายบุคคลตาม ID ที่ค้องการ
|
|
*/
|
|
onMounted(() => {
|
|
fetchDataByid(requestId.value);
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<div class="q-gutter-sm q-pa-sm">
|
|
<div class="toptitle text-dark row items-center q-py-xs">
|
|
<q-btn
|
|
icon="mdi-arrow-left"
|
|
unelevated
|
|
round
|
|
dense
|
|
flat
|
|
color="primary"
|
|
class="q-mr-sm"
|
|
@click="router.go(-1)"
|
|
/>
|
|
{{
|
|
`${formData.createdFullName}
|
|
(ขอแก้ไขเมื่อ ${
|
|
formData.createdAt ? date2Thai(formData.createdAt, true, true) : ""
|
|
})`
|
|
}}
|
|
</div>
|
|
|
|
<q-card>
|
|
<q-card-section>
|
|
<div class="row q-col-gutter-sm">
|
|
<!-- สถานะ -->
|
|
<q-form
|
|
class="col-12"
|
|
greedy
|
|
@submit.prevent
|
|
@validation-success="onSubmit"
|
|
>
|
|
<q-card bordered class="col-12">
|
|
<div class="row q-pa-md q-col-gutter-sm">
|
|
<!-- สถานะ -->
|
|
|
|
<div class="col-4">
|
|
<q-select
|
|
:class="
|
|
classInput(
|
|
isReadOnly || !workflowRef?.permission.isUpdate
|
|
)
|
|
"
|
|
:readonly="isReadOnly || !workflowRef?.permission.isUpdate"
|
|
v-model="formData.status"
|
|
label="สถานะ"
|
|
dense
|
|
outlined
|
|
emit-value
|
|
map-options
|
|
hide-selected
|
|
fill-input
|
|
:options="statusOption"
|
|
:rules="[(val:string) => !!val || `${'กรุณาเลือกสถานะ'}`]"
|
|
lazy-rules
|
|
hide-bottom-space
|
|
use-input
|
|
option-label="name"
|
|
option-value="id"
|
|
@filter="(inputValue:string,
|
|
doneFn:Function) => filterOption(inputValue, doneFn
|
|
) "
|
|
>
|
|
<template v-slot:no-option>
|
|
<q-item>
|
|
<q-item-section class="text-grey">
|
|
ไม่มีข้อมูล
|
|
</q-item-section>
|
|
</q-item>
|
|
</template>
|
|
</q-select>
|
|
</div>
|
|
|
|
<!-- หมายเหตุ -->
|
|
<div class="col-8">
|
|
<q-input
|
|
:class="
|
|
classInput(
|
|
isReadOnly || !workflowRef?.permission.isUpdate
|
|
)
|
|
"
|
|
:readonly="isReadOnly || !workflowRef?.permission.isUpdate"
|
|
v-model="formData.reason"
|
|
label="หมายเหตุ"
|
|
dense
|
|
outlined
|
|
type="textarea"
|
|
hide-bottom-space
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<q-separator
|
|
v-if="!isReadOnly && workflowRef?.permission.isUpdate"
|
|
/>
|
|
|
|
<q-card-actions
|
|
align="right"
|
|
v-if="!isReadOnly && workflowRef?.permission.isUpdate"
|
|
>
|
|
<q-btn label="บันทึก" color="secondary" type="submit"
|
|
><q-tooltip>บันทึก</q-tooltip></q-btn
|
|
>
|
|
</q-card-actions>
|
|
</q-card>
|
|
</q-form>
|
|
|
|
<!-- รายละเอียด -->
|
|
<div class="col-12">
|
|
<q-card bordered class="col-12">
|
|
<div class="col-12 text-weight-medium bg-grey-1 q-py-xs q-px-md">
|
|
รายละเอียด
|
|
</div>
|
|
<q-separator />
|
|
<div class="row q-col-gutter-sm q-pa-md">
|
|
<div class="col-12">
|
|
<q-input
|
|
readonly
|
|
outlined
|
|
v-model="formData.topic"
|
|
label="ชื่อเรื่อง/เนื้อเรื่อง/หัวข้อการพัฒนา"
|
|
dense
|
|
/>
|
|
</div>
|
|
|
|
<div class="col-12">
|
|
<div class="q-mb-sm text-weight-medium text-body2">
|
|
วิธีการพัฒนา
|
|
</div>
|
|
<div class="row col-12 q-ml-md q-col-gutter-sm">
|
|
<!-- 70 การลงมือปฏิบัติ (โดยผู้บังคับบัญชามอบหมาย) -->
|
|
<div class="col-4">
|
|
<div class="q-mb-sm text-weight-medium text-body2">
|
|
70 การลงมือปฏิบัติ (โดยผู้บังคับบัญชามอบหมาย)
|
|
</div>
|
|
<q-option-group
|
|
disable
|
|
class="check_box q-mt-sm"
|
|
keep-color
|
|
color="primary"
|
|
dense
|
|
v-model="formData.developmentProjects"
|
|
:options="itemsDevelopment70"
|
|
type="checkbox"
|
|
/>
|
|
|
|
<div
|
|
class="row"
|
|
v-if="formData.developmentProjects.includes('other1')"
|
|
>
|
|
<div class="col-8 q-mt-sm relative-position">
|
|
<div class="other_custom_input">
|
|
<q-input
|
|
readonly
|
|
v-model="formData.reasonDevelopment70"
|
|
dense
|
|
outlined
|
|
label="กรุณาระบุ"
|
|
></q-input>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 20 การเรียนรู้จากผู้อื่น (Coach/Mentor/Consulting) -->
|
|
<div class="col-4">
|
|
<div class="q-mb-sm text-weight-medium text-body2">
|
|
20 การเรียนรู้จากผู้อื่น (Coach/Mentor/Consulting)
|
|
</div>
|
|
<q-option-group
|
|
disable
|
|
class="check_box q-mt-sm"
|
|
keep-color
|
|
color="primary"
|
|
dense
|
|
v-model="formData.developmentProjects"
|
|
:options="itemsDevelopment20"
|
|
type="checkbox"
|
|
/>
|
|
<div
|
|
class="row"
|
|
v-if="formData.developmentProjects.includes('other2')"
|
|
>
|
|
<div class="col-8 q-mt-sm relative-position">
|
|
<div class="other_custom_input">
|
|
<q-input
|
|
readonly
|
|
v-model="formData.reasonDevelopment20"
|
|
dense
|
|
outlined
|
|
label="กรุณาระบุ"
|
|
></q-input>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 10 การฝึกอบรมอื่นๆ -->
|
|
<div class="col-4">
|
|
<div class="q-mb-sm text-weight-medium text-body2">
|
|
10 การฝึกอบรมอื่นๆ
|
|
</div>
|
|
<q-option-group
|
|
disable
|
|
class="check_box q-mt-sm"
|
|
keep-color
|
|
color="primary"
|
|
dense
|
|
v-model="formData.developmentProjects"
|
|
:options="itemsDevelopment10"
|
|
type="checkbox"
|
|
/>
|
|
<div
|
|
class="row"
|
|
v-if="formData.developmentProjects.includes('other3')"
|
|
>
|
|
<div class="offset-4 col-8 q-mt-sm relative-position">
|
|
<div class="other_custom_input">
|
|
<q-input
|
|
readonly
|
|
v-model="formData.reasonDevelopment10"
|
|
dense
|
|
outlined
|
|
label="กรุณาระบุ"
|
|
></q-input>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- เป้าหมายการนำไปพัฒนางาน -->
|
|
<div class="col-12">
|
|
<q-input
|
|
readonly
|
|
outlined
|
|
v-model="formData.developmentTarget"
|
|
label="เป้าหมายการนำไปพัฒนางาน"
|
|
dense
|
|
type="textarea"
|
|
/>
|
|
</div>
|
|
|
|
<!-- วิธีการวัดผลการพัฒนา -->
|
|
<div class="col-12">
|
|
<q-input
|
|
readonly
|
|
outlined
|
|
v-model="formData.developmentResults"
|
|
label="วิธีการวัดผลการพัฒนา"
|
|
dense
|
|
type="textarea"
|
|
/>
|
|
</div>
|
|
|
|
<!-- รายงานผลการพัฒนา -->
|
|
<div class="col-12">
|
|
<q-input
|
|
readonly
|
|
outlined
|
|
v-model="formData.developmentReport"
|
|
label="รายงานผลการพัฒนา"
|
|
dense
|
|
type="textarea"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</q-card>
|
|
</div>
|
|
|
|
<div class="col-12">
|
|
<Workflow
|
|
v-model:is-check-data="isCheckData"
|
|
ref="workflowRef"
|
|
:id="requestId"
|
|
sys-name="REGISTRY_IDP"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</q-card-section>
|
|
</q-card>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped></style>
|