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

ทะเบียนประวัติ: ผลการประเมินการปฏิบัติราชการ

Browse source
This commit is contained in:
puriphatt 2024-03-19 17:13:44 +07:00
parent 4479e4e06b
commit b49adf1aaa
3 changed files with 228 additions and 188 deletions
Download patch file Download diff file Expand all files Collapse all files

350
src/modules/04_registryNew/components/detail/Achievement/05_ResultsPerformance.vue
View file

@ -1,81 +1,62 @@
<script setup lang="ts">
import { onMounted, ref, watch, useAttrs } from "vue";
import { onMounted, ref, watch, reactive } from "vue";
import { useRoute } from "vue-router";
import { useQuasar } from "quasar";
import type { QTableProps } from "quasar";
import http from "@/plugins/http";
import config from "@/app.config";
import type { QTableProps, QForm } from "quasar";
import { useCounterMixin } from "@/stores/mixin";
import HistoryTable from "@/components/TableHistory.vue";
import DialogHeader from "@/components/DialogHeader.vue";
import type {
RequestItemsObject,
DataProps,
FormData,
} from "@/modules/04_registryNew/interface/request/ResultsPerformance";
import type { ResponseObject } from "@/modules/04_registry/interface/response/Assessment";
const $q = useQuasar();
const attrs = ref<any>(useAttrs());
const route = useRoute();
const mixin = useCounterMixin();
const {
date2Thai,
success,
dateToISO,
messageError,
showLoader,
hideLoader,
convertDate,
convertDateDisplay,
dialogConfirm,
dialogRemove,
} = mixin;
const profileId = ref<string>(
route.params.id ? route.params.id.toString() : ""
);
const id = ref<string>("");
const name = ref<string>();
const point1Total = ref<number>(0);
const point1 = ref<number>(0);
const point2Total = ref<number>(0);
const point2 = ref<number>(0);
const pointSumTotal = ref<number>(0);
const pointSum = ref<number>(0);
const date = ref<Date>();
const resPerformData = reactive<FormData>({
id: "",
isActive: true,
name: "",
point1Total: 0,
point1: 0,
point2Total: 0,
point2: 0,
pointSumTotal: 0,
pointSum: 0,
date: null,
});
const isEdit = ref<boolean>(false);
const editRow = ref<boolean>(false);
const myForm = ref<any>();
const edit = ref<boolean>(false);
const myForm = ref<QForm>();
const modal = ref<boolean>(false);
const modelView = ref<string>("table");
const filterSearch = ref("");
const filterHistory = ref<string>("");
const modalHistory = ref<boolean>(false);
const rowsHistory = ref<RequestItemsObject[]>([]);
const rowsHistory = ref<ResponseObject[]>([]);
const tittleHistory = ref<string>("ประวัติแก้ไขผลการประเมินการปฏิบัติราชการ");
const rows = ref<RequestItemsObject[]>([
{
id: "08dc2c84-7afa-4bee-80f0-7f225dd261b3",
point1Total: 100.0,
point1: 100.0,
point2Total: 100.0,
point2: 100.0,
pointSumTotal: 100.0,
pointSum: 100.0,
name: "",
date: new Date("2022-05-18T00:00:00"),
createdFullName: "สาวิตรี ศรีสมัย",
createdAt: new Date("2024-02-13T18:11:09.032485"),
},
{
id: "08dc2c84-7afa-4bee-80f0-7f225dd261b3",
point1Total: 100.0,
point1: 100.0,
point2Total: 100.0,
point2: 100.0,
pointSumTotal: 100.0,
pointSum: 100.0,
name: "",
date: new Date("2021-09-25T00:00:00"),
createdFullName: "สาวิตรี ศรีสมัย",
createdAt: new Date("2024-02-13T18:11:35.602659"),
},
]);
const rows = ref<ResponseObject[]>([]);
const columns = ref<QTableProps["columns"]>([
{
@ -86,8 +67,7 @@ const columns = ref<QTableProps["columns"]>([
field: "date",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
format: (v) => date2Thai(v),
},
{
name: "point1Total",
@ -160,7 +140,7 @@ const columns = ref<QTableProps["columns"]>([
align: "left",
label: "ผลประเมิน",
sortable: true,
field: "name",
field: (v) => `${textPoint(v.pointSum)} ${textRangePoint(v.pointSum)}`,
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
@ -176,8 +156,6 @@ const columnsHistory = ref<QTableProps["columns"]>([
field: "point1Total",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "point1",
@ -239,7 +217,7 @@ const columnsHistory = ref<QTableProps["columns"]>([
align: "left",
label: "ผลประเมิน",
sortable: true,
field: "name",
field: (v) => `${textPoint(v.pointSum)} ${textRangePoint(v.pointSum)}`,
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
@ -264,6 +242,7 @@ const columnsHistory = ref<QTableProps["columns"]>([
field: "createdAt",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
format: (v) => date2Thai(v),
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
@ -292,77 +271,135 @@ const visibleColumns = ref<String[]>([
"date",
]);
function onClickOpenDialog(StatusEdit: boolean = false, data: any = []) {
modal.value = true;
async function fetchData() {
if (!profileId.value) return;
showLoader();
try {
const res = await http.get(
config.API.profileNewAssessmentsByProfileId(profileId.value)
);
rows.value = res.data.result;
} catch (error) {
messageError($q, error);
} finally {
hideLoader();
}
}
const clickClose = async () => {
async function addEditData(editStatus: boolean = false) {
if (!profileId.value) return;
const url = editStatus
? config.API.profileNewAssessmentsById(resPerformData.id)
: config.API.profileNewAssessments;
const method = editStatus ? "patch" : "post";
const reqBody: RequestItemsObject = {
profileId: profileId.value,
isActive: resPerformData.isActive,
name: resPerformData.name,
date: resPerformData.date,
point1: resPerformData.point1,
point1Total: resPerformData.point1Total,
point2: resPerformData.point2,
point2Total: resPerformData.point2Total,
pointSum: resPerformData.pointSum,
pointSumTotal: resPerformData.pointSumTotal,
};
try {
await http[method](url, reqBody);
success($q, "บันทึกข้อมูลสำเร็จ");
await fetchData();
} catch (e) {
messageError($q, e);
} finally {
hideLoader();
}
}
async function clickDelete(dataId: string) {
try {
await http.delete(config.API.profileNewAssessmentsById(dataId));
success($q, "ลบข้อมูลสำเร็จ");
await fetchData();
modal.value = false;
} catch (error) {
messageError($q, error);
} finally {
hideLoader();
}
}
function onClickOpenDialog(editStatus: boolean = false, row?: ResponseObject) {
modal.value = true;
editRow.value = false;
isEdit.value = editStatus;
if (editStatus && row) {
console.log(row.id);
Object.assign(resPerformData, row);
} else {
(resPerformData.id = ""),
(resPerformData.isActive = true),
(resPerformData.name = ""),
(resPerformData.point1Total = 0),
(resPerformData.point1 = 0),
(resPerformData.point2Total = 0),
(resPerformData.point2 = 0),
(resPerformData.pointSumTotal = 0),
(resPerformData.pointSum = 0),
(resPerformData.date = null);
}
}
async function clickClose() {
if (editRow.value == true) {
$q.dialog({
title: `ข้อมูลมีการแก้ไข`,
message: `ยืนยันที่จะปิดโดยไม่บันทึกใช่หรือไม่?`,
cancel: "ยกเลิก",
ok: "ยืนยัน",
persistent: true,
}).onOk(async () => {
modal.value = false;
// next.value = false;
// previous.value = false;
});
dialogConfirm(
$q,
async () => {
modal.value = false;
editRow.value = false;
},
"ข้อมูลมีการแก้ไข",
"ยืนยันที่จะปิดโดยไม่บันทึกใช่หรือไม่?"
);
} else {
modal.value = false;
// next.value = false;
// previous.value = false;
}
};
}
async function clickHistory(row: ResponseObject) {
modalHistory.value = true;
filterSearch.value = "";
showLoader();
try {
const res = await http.get(config.API.profileAssessmentHisId(row.id));
rowsHistory.value = res.data.result;
} catch (e) {
messageError($q, e);
} finally {
hideLoader();
}
}
function onSubmit() {
myForm.value.validate().then(async (result: boolean) => {
if (result) {
// await saveData();
modal.value = false;
}
});
dialogConfirm(
$q,
async () => {
myForm.value?.validate().then(async (result: boolean) => {
if (result) {
addEditData(isEdit.value);
modal.value = false;
}
});
},
"ยืนยันการบันทึกข้อมูล",
"ต้องการยืนยันการบันทึกข้อมูลนี้หรือไม่ ?"
);
}
function selectData(props: any) {
modal.value = true;
}
const clickHistory = async (row: RequestItemsObject) => {
modalHistory.value = true;
// tittleHistory.value = "ประวัติแก้ไขผลการประเมินการปฏิบัติราชการ";
// filterHistory.value = "";
// showLoader();
// await http
// .get(config.API.profileAssessmentHisId(row.id))
// .then((res) => {
// let data = res.data.result;
// rowsHistory.value = [];
// data.map((e: ResponseObject) => {
// rowsHistory.value.push({
// id: e.id,
// name: e.name,
// point1Total: e.point1Total,
// point1: e.point1,
// point2Total: e.point2Total,
// point2: e.point2,
// pointSumTotal: e.pointSumTotal,
// pointSum: e.pointSum,
// date: new Date(e.date),
// createdAt: new Date(e.createdAt),
// createdFullName: e.createdFullName,
// });
// });
// })
// .catch((e) => {
// messageError($q, e);
// })
// .finally(() => {
// hideLoader();
// });
};
function textRangePoint(val: number | undefined) {
if (val == undefined) val = -1;
if (val >= 0 && val <= 60) return "(ต่ำกว่าร้อยละ 60)";
@ -383,6 +420,9 @@ function textPoint(val: number | undefined) {
else return "-";
}
onMounted(async () => {
await fetchData();
});
</script>
<template>
<q-toolbar style="padding: 0px" class="text-primary">
@ -456,7 +496,7 @@ function textPoint(val: number | undefined) {
bordered
virtual-scroll
ref="table"
v-bind="attrs"
class="custom-header-table"
:rows="rows"
:columns="columns"
:filter="filterSearch"
@ -479,21 +519,26 @@ function textPoint(val: number | undefined) {
v-for="col in props.cols"
:key="col.name"
:props="props"
@click="selectData(props)"
@click="onClickOpenDialog(true, props.row)"
class="cursor-pointer"
>
<div v-if="col.name == 'date'" class="table_ellipsis">
{{ col.value ? date2Thai(col.value) : "-" }}
</div>
<div v-else-if="col.name == 'name'" class="table_ellipsis">
{{ textPoint(props.row.pointSum) }}
{{ textRangePoint(props.row.pointSum) }}
</div>
<div v-else class="table_ellipsis">
<div class="table_ellipsis">
{{ col.value ? col.value : "-" }}
</div>
</q-td>
<q-td auto-width>
<q-btn
flat
dense
round
class="q-mr-xs"
size="14px"
color="primary"
icon="mdi-pencil-outline"
@click="onClickOpenDialog(true, props.row)"
>
<q-tooltip>แก้ไขข้อมูล</q-tooltip>
</q-btn>
<q-btn
color="info"
flat
@ -505,6 +550,19 @@ function textPoint(val: number | undefined) {
>
<q-tooltip>ประวัติแก้ไขผลการประเมินการปฏิบัติราชการ</q-tooltip>
</q-btn>
<!-- <q-btn
flat
dense
round
size="14px"
color="red"
icon="mdi-delete"
@click="
dialogRemove($q, async () => await clickDelete(props.row.id))
"
>
<q-tooltip>ลบข้อมูล</q-tooltip>
</q-btn> -->
</q-td>
</q-tr>
</template>
@ -520,7 +578,7 @@ function textPoint(val: number | undefined) {
round
color="primary"
icon="mdi-pencil-outline"
@click.stop.prevent="onClickOpenDialog()"
@click.stop.prevent="onClickOpenDialog(true, props.row)"
>
<q-tooltip>แก่ไขข้อมุล</q-tooltip>
</q-btn>
@ -548,14 +606,7 @@ function textPoint(val: number | undefined) {
</q-item-section>
<q-item-section class="text-dark">
<q-item-label v-if="col.name == 'date'">
{{ col.value ? date2Thai(col.value) : "-" }}
</q-item-label>
<q-item-label v-else-if="col.name == 'name'">
{{ textPoint(props.row.pointSum) }}
{{ textRangePoint(props.row.pointSum) }}
</q-item-label>
<q-item-label v-else>
<q-item-label>
{{ col.value ? col.value : "-" }}
</q-item-label>
</q-item-section>
@ -579,7 +630,7 @@ function textPoint(val: number | undefined) {
borderless
week-start="0"
menu-class-name="modalfix"
v-model="date"
v-model="resPerformData.date"
:locale="'th'"
:enableTimePicker="false"
>
@ -595,8 +646,9 @@ function textPoint(val: number | undefined) {
outlined
for="inputDatereceive"
ref="dateReceivedRef"
class="inputgreen"
hide-bottom-space
:model-value="date2Thai(date as Date)"
:model-value="date2Thai(resPerformData.date as Date)"
:label="`${'วันที่ได้รับ'}`"
:rules="[(val) => !!val || `${'กรุณาเลือกวันที่ได้รับ'}`]"
@update:modelValue="() => (editRow = true)"
@ -620,7 +672,7 @@ function textPoint(val: number | undefined) {
hide-bottom-space
type="number"
class="inputgreen"
v-model="point1Total"
v-model="resPerformData.point1Total"
input-class="text-right "
:label="`${'ส่วนที่1 (คะแนน)'}`"
:rules="[(val) => !!val || `${'กรุณากรอกส่วนที่1 (คะแนน)'}`]"
@ -635,7 +687,7 @@ function textPoint(val: number | undefined) {
hide-bottom-space
type="number"
class="inputgreen"
v-model="point1"
v-model="resPerformData.point1"
input-class="text-right"
:label="`${'ผลประเมินส่วนที่1 (คะแนน)'}`"
:rules="[
@ -652,7 +704,7 @@ function textPoint(val: number | undefined) {
hide-bottom-space
type="number"
class="inputgreen"
v-model="point2Total"
v-model="resPerformData.point2Total"
input-class="text-right"
:label="`${'ส่วนที่2 (คะแนน)'}`"
:rules="[(val) => !!val || `${'กรุณากรอกส่วนที่2 (คะแนน)'}`]"
@ -667,7 +719,7 @@ function textPoint(val: number | undefined) {
hide-bottom-space
type="number"
class="inputgreen"
v-model="point2"
v-model="resPerformData.point2"
input-class="text-right"
:label="`${'ผลประเมินส่วนที่2 (คะแนน)'}`"
:rules="[
@ -684,7 +736,7 @@ function textPoint(val: number | undefined) {
hide-bottom-space
type="number"
class="inputgreen"
v-model="pointSumTotal"
v-model="resPerformData.pointSumTotal"
input-class="text-right"
:label="`${'ผลรวม (คะแนน)'}`"
:rules="[(val) => !!val || `${'กรุณากรอกผลรวม (คะแนน)'}`]"
@ -698,7 +750,7 @@ function textPoint(val: number | undefined) {
lazy-rules
hide-bottom-space
type="number"
v-model="pointSum"
v-model="resPerformData.pointSum"
class="inputgreen"
input-class="text-right"
:label="`${'ผลประเมินรวม (คะแนน)'}`"
@ -712,9 +764,9 @@ function textPoint(val: number | undefined) {
<q-space></q-space>
ผลการประเมิน:
<div class="text-bold items-center q-px-sm">
{{ textPoint(pointSum) }}
{{ textPoint(resPerformData.pointSum) }}
</div>
{{ textRangePoint(pointSum) }}
{{ textRangePoint(resPerformData.pointSum) }}
</div>
</div>
</q-card-section>
@ -749,17 +801,7 @@ function textPoint(val: number | undefined) {
<template #columns="props">
<q-tr :props="props">
<q-td v-for="col in props.cols" :key="col.name" :props="props">
<div
v-if="col.name == 'date' || col.name == 'createdAt'"
class="table_ellipsis"
>
{{ date2Thai(col.value) }}
</div>
<div v-else-if="col.name == 'name'" class="table_ellipsis">
{{ textPoint(props.row.pointSum) }}
{{ textRangePoint(props.row.pointSum) }}
</div>
<div v-else class="table_ellipsis">
<div class="table_ellipsis">
{{ col.value }}
</div>
</q-td>

39
src/modules/04_registryNew/interface/request/ResultsPerformance.ts
View file

@ -1,34 +1,27 @@
interface DataProps {
row: RequestItemsObject;
rowIndex: number;
interface RequestItemsObject {
profileId: string;
isActive: boolean;
name: string;
date: Date | null;
point1: number;
point1Total: number;
point2: number;
point2Total: number;
pointSum: number;
pointSumTotal: number;
}
//ข้อมูล
interface RequestItemsObject {
interface FormData {
id: string;
isActive: boolean;
name: string;
point1Total: number;
point1: number;
point2Total: number;
point2: number;
pointSumTotal: number;
pointSum: number;
name: string;
date: Date;
createdFullName: string;
createdAt: Date;
date: Date | null;
}
//columns
interface Columns {
[index: number]: {
name: String;
align: String;
label: String;
sortable: Boolean;
field: String;
headerStyle: String;
style: String;
};
}
export type { RequestItemsObject, Columns, DataProps };
export type { RequestItemsObject, FormData };

27
src/modules/04_registryNew/interface/response/ResultsPerformance.ts
View file

@ -1,16 +1,21 @@
//ข้อมูล
interface ResponseObject {
id: string;
point1Total: number;
point1: number;
point2Total: number;
point2: number;
pointSumTotal: number;
pointSum: number;
name: string;
date: Date;
createdFullName: string;
createdAt: Date;
createdFullName: string;
createdUserId: string;
date: Date;
id: string;
isActive: boolean;
lastUpdateFullName: string;
lastUpdateUserId: string;
lastUpdatedAt: Date;
name: string;
point1: number;
point1Total: number;
point2: number;
point2Total: number;
pointSum: number;
pointSumTotal: number;
profileId: string;
}
export type { ResponseObject };