AIP == > IDP

This commit is contained in:
DESKTOP-1R2VSQH\Lenovo ThinkPad E490 2024-10-01 10:43:52 +07:00
parent b5829ec905
commit b059e3a770
9 changed files with 333 additions and 144 deletions

View file

@ -418,7 +418,7 @@ async function getDevelop() {
/**
* นทกขอมลผลการประเมนการปฏราชการ
* @param editStatus แกไข,เพ
* @param editStatus แกไข,เพ
*/
async function addEditData(editStatus: boolean = false) {
if (!profileId.value) return;
@ -706,7 +706,9 @@ onMounted(async () => {
icon="mdi-history"
@click="clickHistory(props.row)"
>
<q-tooltip>ประวแกไขเครองราชอสรยาภรณ</q-tooltip>
<q-tooltip
>ประวแกไขผลการประเมนการปฏราชการ</q-tooltip
>
</q-btn>
<q-btn
v-if="checkPermission($route)?.attrIsUpdate"
@ -716,7 +718,7 @@ onMounted(async () => {
icon="edit"
@click.stop.prevent="onClickOpenDialog(true, props.row)"
>
<q-tooltip>แกไขขอม</q-tooltip>
<q-tooltip>แกไขขอม</q-tooltip>
</q-btn>
</q-card-actions>
<q-separator />

View file

@ -2,15 +2,12 @@
import { ref, onMounted, watch } from "vue";
import { useQuasar } from "quasar";
import { useRouter } from "vue-router";
import config from "@/app.config";
import http from "@/plugins/http";
import { useRequestEditStore } from "@/modules/04_registryPerson/stores/RequestEdit";
import { useCounterMixin } from "@/stores/mixin";
import config from "@/app.config";
import http from "@/plugins/http";
/**
* importType
*/
/** importType*/
import type { QTableProps } from "quasar";
import type {
DataOption,
@ -18,22 +15,14 @@ import type {
} from "@/modules/04_registryPerson/interface/index/Main";
import type { DateRequest } from "@/modules/04_registryPerson/interface/response/Main";
/**
* importComponents
*/
/** importComponents*/
import DialogStatus from "@/modules/04_registryPerson/components/requestEdit/Dialog01_EditStatus.vue";
/**
* use
*/
const $q = useQuasar();
const router = useRouter();
const store = useRequestEditStore();
const { showLoader, hideLoader, messageError, date2Thai } = useCounterMixin();
/**
* Table
*/
//Table
const rows = ref<DateRequest[]>([]); //
const page = ref<number>(1); //
const pageSize = ref<number>(10); //
@ -119,18 +108,14 @@ const visibleColumns = ref<string[]>([
"remark",
]);
/**
* วแปร
*/
//
const status = ref<string>("PENDING"); //
const keyword = ref<string>(""); //
const statusOption = ref<DataOption[]>(store.optionStatus); //
const modalStatus = ref<boolean>(false); //
const requestId = ref<string>(""); //id
/**
* function fetch รายการคำรองขอแกไขทะเบยนประว
*/
/** function fetch รายการคำร้องขอแก้ไขทะเบียนประวัติ*/
function fetchListRequset() {
showLoader();
http
@ -156,18 +141,14 @@ function fetchListRequset() {
});
}
/**
* function เลอกสถานะคำรอง
*/
/** function เลือกสถานะคำร้อง*/
function updateStatusValue() {
page.value = 1;
// fetch
fetchListRequset();
}
/**
* function เคลยร สถานะคำรอง
*/
/** function เคลียร์ สถานะคำร้อง*/
function clearStatus() {
status.value = "";
statusOption.value = store.optionStatus;
@ -260,7 +241,6 @@ async function downloadUrl(id: string, fileName: string) {
/**
* การเปลยนแปลงของ pageSize
*
* เมอมการเปลยนแปลงจำทำการ งชอมลรายการคำรองขอแกไขทะเบยนประวตามจำนวน pageSize
*/
watch(

View file

@ -1,18 +1,22 @@
<script setup lang="ts">
import { ref, onMounted, watch } from "vue";
import { useQuasar } from "quasar";
import { useCounterMixin } from "@/stores/mixin";
import { useRequestEditStore } from "@/modules/04_registryPerson/stores/RequestEdit";
import config from "@/app.config";
import http from "@/plugins/http";
import type { QTableProps } from "quasar";
import type {
DataOption,
Pagination,
} from "@/modules/04_registryPerson/interface/index/Main";
import type { DataListsIDP } from "@/modules/04_registryPerson/interface/response/Main";
import DialogEditIDP from "@/modules/04_registryPerson/components/requestEdit/Dialog02_EditIDP.vue";
const $q = useQuasar();
const store = useRequestEditStore();
const { showLoader, hideLoader, messageError, date2Thai } = useCounterMixin();
/**
@ -20,14 +24,14 @@ const { showLoader, hideLoader, messageError, date2Thai } = useCounterMixin();
*/
const status = ref<string>("PENDING"); //
const keyword = ref<string>(""); //
const statusOption = ref<DataOption[]>(store.optionStatus); //
const statusOption = ref<DataOption[]>(store.optionStatusIDP); //
const modalEdit = ref<boolean>(false); //
const requestId = ref<string>(""); //id
/**
* Table
*/
const rows = ref<any[]>([]); //
const rows = ref<DataListsIDP[]>([]); //
const page = ref<number>(1); //
const pageSize = ref<number>(10); //
const rowsTotal = ref<number>(0); //
@ -44,11 +48,11 @@ const columns = ref<QTableProps["columns"]>([
style: "font-size: 14px",
},
{
name: "knowledgeSkills",
name: "name",
align: "left",
label: "ความรู้ / ทักษะ / สมรรถนะที่ต้องได้รับการพัฒนา",
sortable: true,
field: "knowledgeSkills",
field: "name",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
@ -103,16 +107,16 @@ const columns = ref<QTableProps["columns"]>([
label: "สถานะคำร้อง",
sortable: true,
field: "status",
format: (v) => store.convertStatus(v),
format: (v) => store.convertStatusIDP(v),
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "remark",
name: "reason",
align: "left",
label: "หมายเหตุ",
sortable: true,
field: "remark",
field: "reason",
format: (v) => (v ? v : "-"),
headerStyle: "font-size: 14px",
style: "font-size: 14px",
@ -120,47 +124,53 @@ const columns = ref<QTableProps["columns"]>([
]);
const visibleColumns = ref<string[]>([
"createdAt",
"knowledgeSkills",
"name",
"developmentProjects",
"developmentTarget",
"developmentResults",
"developmentReport",
"document",
"status",
"remark",
"reason",
]);
function fetchData() {
const data = [
{
id: "1",
createdAt: "2024-09-17T08:21:21.600Z",
status: "PENDING",
knowledgeSkills: "ความรู้",
developmentProjects: "การพัฒนา",
developmentTarget: "เป้าหมาย",
developmentResults: "ผล",
developmentReport: "รายงาน",
},
];
rows.value = data;
/** function fetch ข้อมูลรายการการพัฒนารายบุคคล*/
async function fetchData() {
showLoader();
await http
.get(config.API.requestDevelopmentEdit + `admin`, {
params: {
page: page.value,
pageSize: pageSize.value,
status: status.value ? status.value : "",
keyword: keyword.value,
},
})
.then(async (res) => {
const data = await res.data.result;
maxPage.value = Math.ceil(data.total / pageSize.value);
rowsTotal.value = data.total;
rows.value = data.data;
})
.catch((err) => {
messageError($q, err);
})
.finally(() => {
hideLoader();
});
}
/**
* function เลอกสถานะคำรอง
*/
/** function เลือกสถานะคำร้อง */
function updateStatusValue() {
page.value = 1;
// fetch
// function fetchData() {
fetchData();
}
/**
* function เคลยร สถานะคำรอง
*/
/** function เคลียร์ สถานะคำร้อง */
function clearStatus() {
status.value = "";
statusOption.value = store.optionStatus;
statusOption.value = store.optionStatusIDP;
}
/**
@ -171,7 +181,7 @@ function clearStatus() {
function filterOption(val: string, update: Function) {
update(() => {
status.value = val ? "" : status.value;
statusOption.value = store.optionStatus.filter(
statusOption.value = store.optionStatusIDP.filter(
(v: DataOption) => v.name.indexOf(val) > -1
);
});
@ -195,6 +205,70 @@ function onclickEdit(id: string) {
requestId.value = id;
}
/**
* function หาชอไฟล
* @param id รายการยนคำรองขอแกไขขอม
*/
function onDownloadFile(id: string) {
showLoader();
http
.get(
config.API.file(
"ระบบทะเบียนประวัติ",
"เอกสารหลักฐานคำร้องขอแก้ไขข้อมูล",
id
)
)
.then(async (res) => {
if (res.data.length !== 0) {
await downloadUrl(id, res.data[0].fileName);
} else {
hideLoader();
}
})
.catch((e) => {
messageError($q, e);
hideLoader();
});
}
/**
* function โหลดไฟล
* @param id รายการยนคำรองขอแกไขขอม
* @param fileName อไฟล
*/
async function downloadUrl(id: string, fileName: string) {
await http
.get(
config.API.fileByFile(
"ระบบทะเบียนประวัติ",
"เอกสารหลักฐานคำร้องขอแก้ไขข้อมูล",
id,
fileName
)
)
.then((res) => {
window.open(res.data.downloadUrl, "_blank");
})
.catch((e) => {
messageError($q, e);
})
.finally(() => {
hideLoader();
});
}
/**
* การเปลยนแปลงของ pageSize
* เมอมการเปลยนแปลงจำทำการ งชอมลรายการคำรองขอแกไขทะเบยนประวตามจำนวน pageSize
*/
watch(
() => pageSize.value,
() => {
fetchData();
}
);
onMounted(() => {
fetchData();
});
@ -291,12 +365,38 @@ onMounted(() => {
</q-btn>
</q-td>
<q-td v-for="col in props.cols" :key="col.name" :props="props">
<div v-if="col.name === 'document'">
<q-btn icon="mdi-download" round dense flat color="primary">
<div v-if="col.name == 'developmentProjects'">
<div class="column">
<q-checkbox
size="xs"
:model-value="props.row.isDevelopment70"
label="70 การลงมือปฏิบัติ (โดยผู้บังคับบัญชามอบหมาย)"
/>
<q-checkbox
size="xs"
:model-value="props.row.isDevelopment20"
label="20 การเรียนรู้จากผู้อื่น (Coach/Mentor/Consulting)"
/>
<q-checkbox
size="xs"
:model-value="props.row.isDevelopment10"
label="10 การฝึกอบรมอื่นๆ"
/>
</div>
</div>
<div v-else-if="col.name === 'document'">
<q-btn
icon="mdi-download"
round
dense
flat
color="primary"
@click.pervent="onDownloadFile(props.row.id)"
>
<q-tooltip>หลกฐานอางอ</q-tooltip>
</q-btn>
</div>
<div v-else class="table_ellipsis2">
<div v-else>
{{ col.value ? col.value : "-" }}
</div>
</q-td>
@ -320,7 +420,11 @@ onMounted(() => {
</div>
</q-card>
<DialogEditIDP v-model:modal="modalEdit" v-model:request-id="requestId" />
<DialogEditIDP
v-model:modal="modalEdit"
v-model:request-id="requestId"
:fetch-data-list="fetchData"
/>
</template>
<style scoped></style>

View file

@ -9,22 +9,14 @@ import { useCounterMixin } from "@/stores/mixin";
import type { DataOption } from "@/modules/04_registryPerson/interface/index/Main";
/**
* importComponents
*/
import DialogHeader from "@/components/DialogHeader.vue";
/**
* use
*/
const $q = useQuasar();
const store = useRequestEditStore();
const { dialogConfirm, showLoader, hideLoader, messageError, success } =
useCounterMixin();
/**
* props
*/
/** props*/
const modal = defineModel<boolean>("modal", { required: true }); //, popup
const requestId = defineModel<string>("requestId", { required: true }); // id
const props = defineProps({
@ -42,9 +34,7 @@ const statusOptionMain = ref<DataOption[]>(
);
const statusOption = ref<DataOption[]>(statusOptionMain.value); //
/**
* function นทกรายการคำรอง
*/
/** function บันทึกรายการคำร้อง*/
function onSubmit() {
dialogConfirm($q, async () => {
showLoader();
@ -67,9 +57,7 @@ function onSubmit() {
});
}
/**
* function popup
*/
/** function ปิด popup*/
function closeDialog() {
modal.value = false;
formData.status = "";
@ -89,9 +77,7 @@ function filterOption(val: string, update: Function) {
});
}
/**
* function fetch อมลคำรองแกไข
*/
/** function fetch ข้อมูลคำร้องแก้ไข*/
function fetchDataRequest() {
showLoader();
http
@ -127,7 +113,6 @@ function classInput(val: boolean) {
/**
* การเปลยนแปลงของ modal
*
* เม modal เป true ทำการดงขอมลคำรองแกไข
*/
watch(

View file

@ -1,9 +1,11 @@
<script setup lang="ts">
import { reactive, ref } from "vue";
import { reactive, ref, watch } from "vue";
import { useQuasar } from "quasar";
import { useCounterMixin } from "@/stores/mixin";
import { useRequestEditStore } from "@/modules/04_registryPerson/stores/RequestEdit";
import config from "@/app.config";
import http from "@/plugins/http";
import type {
DataOption,
@ -20,24 +22,28 @@ const { dialogConfirm, showLoader, hideLoader, messageError, success } =
const modal = defineModel<boolean>("modal", { required: true }); //, popup
const requestId = defineModel<string>("requestId", { required: true }); // id
const { fetchDataList } = defineProps({
fetchDataList: { type: Function, require: true },
});
const isReadOnly = ref<boolean>(false);
const isReadOnly = ref<boolean>(false); //
//
const formData = reactive<FormDataIDP>({
topic: "",
development: [],
otherAction: "",
otherPerson: "",
otherTraining: "",
developmentTarget: "",
developmentResults: "",
developmentReport: "",
status: "",
remark: "",
topic: "", ////
developmentProjects: [], //
reasonDevelopment70: "", // 70
reasonDevelopment20: "", // 20
reasonDevelopment10: "", // 10
developmentTarget: "", //
developmentResults: "", //
developmentReport: "", //
status: "", //
reason: "", //
});
//70 ()
const itemsDevelopmentAction = ref<DataItemsDevelopment[]>([
const itemsDevelopment70 = ref<DataItemsDevelopment[]>([
{
value: "on_the_job_training",
label: "การฝึกปฏิบัติในงาน (On the job training)",
@ -88,7 +94,7 @@ const itemsDevelopmentAction = ref<DataItemsDevelopment[]>([
},
]);
//20 (Coach/Mentor/Consulting)
const itemsDevelopmentPerson = ref<DataItemsDevelopment[]>([
const itemsDevelopment20 = ref<DataItemsDevelopment[]>([
{ value: "coaching", label: "การสอนงาน (Coaching)" },
{ value: "mentoring", label: "การเป็นพี่เลี้ยง (Mentoring)" },
{ value: "team_meeting", label: "การประชุมทีม (Team meeting)" },
@ -97,7 +103,7 @@ const itemsDevelopmentPerson = ref<DataItemsDevelopment[]>([
{ value: "other2", label: "อื่น ๆ (ระบุ)" },
]);
//10
const itemsDevelopmentTraining = ref<DataItemsDevelopment[]>([
const itemsDevelopment10 = ref<DataItemsDevelopment[]>([
{
value: "self_learning",
label: "การเรียนรู้ด้วยตนเอง แบบ online/offline (Self learning)",
@ -121,10 +127,39 @@ const itemsDevelopmentTraining = ref<DataItemsDevelopment[]>([
]);
//
const statusOptionMain = ref<DataOption[]>(
store.optionStatus.filter((e: DataOption) => e.id !== "")
store.optionStatusIDP.filter((e: DataOption) => e.id !== "")
);
const statusOption = ref<DataOption[]>(statusOptionMain.value); //
/**
* function fetch อมลการพฒนารายบคคลตาม ID องการ
* @param id ID องการดรายละเอยด
*/
function fetchDataByid(id: string) {
showLoader();
http
.get(config.API.requestDevelopmentEdit + `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;
})
.catch((err) => {
messageError($q, err);
})
.finally(() => {
hideLoader();
});
}
/**
* function นหาคำใน select สถานะคำรอง
* @param val คำค
@ -139,25 +174,45 @@ function filterOption(val: string, update: Function) {
});
}
/** function บันทึกข้อมูลการพัฒนารายบุคคล */
function onSubmit() {
dialogConfirm($q, () => {});
dialogConfirm($q, async () => {
showLoader();
await http
.patch(config.API.requestDevelopmentEdit + `admin/${requestId.value}`, {
status: formData.status,
reason: formData.reason,
})
.then(async () => {
await fetchDataList?.();
success($q, "บันทึกข้อมูลสำเร็จ");
closeDialog();
})
.catch((err) => {
messageError($q, err);
})
.finally(() => {
hideLoader();
});
});
}
/**
* function popup
* และกำหนด formData เปนค Defult
*/
function closeDialog() {
modal.value = false;
formData.topic = "";
formData.development = [];
formData.otherAction = "";
formData.otherPerson = "";
formData.otherTraining = "";
formData.developmentProjects = [];
formData.reasonDevelopment70 = "";
formData.reasonDevelopment20 = "";
formData.reasonDevelopment10 = "";
formData.developmentTarget = "";
formData.developmentResults = "";
formData.developmentReport = "";
formData.status = "";
formData.remark = "";
formData.reason = "";
}
/**
@ -170,6 +225,16 @@ function classInput(val: boolean) {
"full-width cursor-pointer inputgreen": !val,
};
}
/**
* การเปลยนแปลงของ modal เม modal เป True
* fetch อมลการพฒนารายบคคลตาม ID องการ
*/
watch(modal, (val) => {
if (val) {
fetchDataByid(requestId.value);
}
});
</script>
<template>
@ -218,7 +283,7 @@ function classInput(val: boolean) {
<div class="col-12">
<q-input
:class="classInput(isReadOnly)"
v-model="formData.remark"
v-model="formData.reason"
label="หมายเหตุ"
dense
outlined
@ -233,7 +298,6 @@ function classInput(val: boolean) {
<div class="row q-col-gutter-sm">
<div class="col-12">
<q-input
:class="classInput(isReadOnly)"
readonly
outlined
v-model="formData.topic"
@ -243,38 +307,37 @@ function classInput(val: boolean) {
</div>
<div class="col-12">
<q-label class="q-mb-sm text-weight-medium text-body2"
>การพฒนา
</q-label>
<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">
<q-label class="q-mb-sm text-weight-medium text-body2"
>70 การลงมอปฏ (โดยผงคบบญชามอบหมาย)</q-label
>
<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.development"
:options="itemsDevelopmentAction"
v-model="formData.developmentProjects"
:options="itemsDevelopment70"
type="checkbox"
/>
<div
class="row"
v-if="formData.development.includes('other1')"
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.otherAction"
v-model="formData.reasonDevelopment70"
dense
outlined
class="inputgreen"
label="กรุณาระบุ"
></q-input>
</div>
@ -284,29 +347,28 @@ function classInput(val: boolean) {
<!-- 20 การเรยนรจากผ (Coach/Mentor/Consulting) -->
<div class="col-4">
<q-label class="q-mb-sm text-weight-medium text-body2"
>20 การเรยนรจากผ
(Coach/Mentor/Consulting)</q-label
>
<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.development"
:options="itemsDevelopmentPerson"
v-model="formData.developmentProjects"
:options="itemsDevelopment20"
type="checkbox"
/>
<div
class="row"
v-if="formData.development.includes('other2')"
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.otherPerson"
v-model="formData.reasonDevelopment20"
dense
outlined
label="กรุณาระบุ"
@ -318,28 +380,28 @@ function classInput(val: boolean) {
<!-- 10 การฝกอบรมอนๆ -->
<div class="col-4">
<q-label class="q-mb-sm text-weight-medium text-body2"
>10 การฝกอบรมอนๆ</q-label
>
<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.development"
:options="itemsDevelopmentTraining"
v-model="formData.developmentProjects"
:options="itemsDevelopment10"
type="checkbox"
/>
<div
class="row"
v-if="formData.development.includes('other3')"
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.otherTraining"
v-model="formData.reasonDevelopment10"
dense
outlined
label="กรุณาระบุ"

View file

@ -68,15 +68,15 @@ interface FormChangeName {
interface FormDataIDP {
topic: string;
development: string[];
otherAction: string;
otherPerson: string;
otherTraining: string;
developmentProjects: string[];
reasonDevelopment70: string;
reasonDevelopment20: string;
reasonDevelopment10: string;
developmentTarget: string;
developmentResults: string;
developmentReport: string;
status: string;
remark: string;
reason: string;
}
export type {

View file

@ -152,6 +152,30 @@ interface DataLeaveType {
refCommandDate: string;
}
interface DataListsIDP {
createdAt: string;
createdFullName: string;
createdUserId: string;
developmentReport: string;
developmentResults: string;
developmentTarget: string;
id: string;
isDevelopment10: boolean;
isDevelopment20: boolean;
isDevelopment70: boolean;
lastUpdateFullName: string;
lastUpdateUserId: string;
lastUpdatedAt: string;
name: string;
profileEmployeeId: string;
profileId: string;
reason: string;
reasonDevelopment10: string;
reasonDevelopment20: string;
reasonDevelopment70: string;
status: string;
}
export type {
DataType,
DataLevel,
@ -160,4 +184,5 @@ export type {
DataProfile,
DataLeave,
DataLeaveType,
DataListsIDP,
};

View file

@ -20,6 +20,13 @@ export const useRequestEditStore = defineStore("requestEditStore", () => {
{ id: "REJECT", name: "ไม่อนุมัตการแก้ไข" },
]);
const optionStatusIDP = ref<DataOption[]>([
{ id: "", name: "ทั้งหมด" },
{ id: "PENDING", name: "รอดำเนินการ" },
{ id: "APPROVE", name: "อนุมัติ" },
{ id: "REJECT", name: "ไม่อนุมัติ" },
]);
function convertStatus(val: string) {
switch (val) {
case "PENDING":
@ -32,5 +39,24 @@ export const useRequestEditStore = defineStore("requestEditStore", () => {
return "-";
}
}
return { convertStatus, optionTopic, optionStatus };
function convertStatusIDP(val: string) {
switch (val) {
case "PENDING":
return "รอดำเนินการ";
case "APPROVE":
return "อนุมัติ";
case "REJECT":
return "ไม่อนุมัติ";
default:
return "-";
}
}
return {
convertStatus,
optionTopic,
optionStatus,
optionStatusIDP,
convertStatusIDP,
};
});