Merge branch 'phatt_dev' into develop

This commit is contained in:
puriphatt 2024-03-19 17:16:32 +07:00
commit 7b7fc73bb1
5 changed files with 240 additions and 201 deletions

View file

@ -561,16 +561,15 @@ function onClickOpenDialog(editStatus: boolean = false, row?: ResponseObject) {
async function clickClose() { async function clickClose() {
if (editRow.value == true) { if (editRow.value == true) {
$q.dialog({ dialogConfirm(
title: `ข้อมูลมีการแก้ไข`, $q,
message: `ยืนยันที่จะปิดโดยไม่บันทึกใช่หรือไม่?`, async () => {
cancel: "ยกเลิก", modal.value = false;
ok: "ยืนยัน", editRow.value = false;
persistent: true, },
}).onOk(async () => { "ข้อมูลมีการแก้ไข",
modal.value = false; "ยืนยันที่จะปิดโดยไม่บันทึกใช่หรือไม่?"
editRow.value = false; );
});
} else { } else {
modal.value = false; modal.value = false;
} }
@ -750,10 +749,10 @@ onMounted(async () => {
class="q-mr-xs" class="q-mr-xs"
size="14px" size="14px"
color="primary" color="primary"
icon="edit" icon="mdi-pencil-outline"
@click="onClickOpenDialog(true, props.row)" @click="onClickOpenDialog(true, props.row)"
> >
<q-tooltip>ลบอม</q-tooltip> <q-tooltip>แกไขอม</q-tooltip>
</q-btn> </q-btn>
<q-btn <q-btn
flat flat

View file

@ -515,7 +515,7 @@ watch(
round round
color="primary" color="primary"
icon="mdi-pencil-outline" icon="mdi-pencil-outline"
@click="onClickOpenDialog(true, props)" @click="onClickOpenDialog(true, props.row)"
> >
<q-tooltip>แกไขขอม</q-tooltip> <q-tooltip>แกไขขอม</q-tooltip>
</q-btn> </q-btn>

View file

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

View file

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

View file

@ -1,16 +1,21 @@
//ข้อมูล
interface ResponseObject { interface ResponseObject {
id: string;
point1Total: number;
point1: number;
point2Total: number;
point2: number;
pointSumTotal: number;
pointSum: number;
name: string;
date: Date;
createdFullName: string;
createdAt: Date; 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 }; export type { ResponseObject };