hrms-bangkok/hrms-mgt
7
0
Fork 0
Code Issues Pull requests Projects Releases Packages 1 Wiki Activity Actions

AIP == > IDP

Browse source
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
Download patch file Download diff file Expand all files Collapse all files

5
src/api/02_organizational/api.organization.ts
View file

@ -122,6 +122,11 @@ export default {
*/ */
requestEdit: `${orgProfile}/edit/`, requestEdit: `${orgProfile}/edit/`,
/**
* ข้อมูลการพัฒนารายบุคคล IDP
*/
requestDevelopmentEdit: `${orgProfile}/development-request/`,
/** /**
* รายการเมนู * รายการเมนู
*/ */

8
src/modules/04_registryPerson/components/detail/Achievement/05_ResultsPerformance.vue
View file

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

38
src/modules/04_registryPerson/components/requestEdit/01_TabInformation.vue
View file

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

178
src/modules/04_registryPerson/components/requestEdit/02_TabIDP.vue
View file

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

23
src/modules/04_registryPerson/components/requestEdit/Dialog01_EditStatus.vue
View file

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

162
src/modules/04_registryPerson/components/requestEdit/Dialog02_EditIDP.vue
View file

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

10
src/modules/04_registryPerson/interface/request/Main.ts
View file

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

25
src/modules/04_registryPerson/interface/response/Main.ts
View file

@ -152,6 +152,30 @@ interface DataLeaveType {
refCommandDate: string; 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 { export type {
DataType, DataType,
DataLevel, DataLevel,
@ -160,4 +184,5 @@ export type {
DataProfile, DataProfile,
DataLeave, DataLeave,
DataLeaveType, DataLeaveType,
DataListsIDP,
}; };

28
src/modules/04_registryPerson/stores/RequestEdit.ts
View file

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