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

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

@@ -7,17 +7,17 @@ import config from "@/app.config";
 import type { QTableProps, QForm } from "quasar";
 
 import { useCounterMixin } from "@/stores/mixin";
+import { useResultsPerformDataStore } from "@/modules/04_registryNew/stores/ResultsPerformance";
 import HistoryTable from "@/components/TableHistory.vue";
 import DialogHeader from "@/components/DialogHeader.vue";
 
-import type {
+import type { RequestItemsObject } from "@/modules/04_registryNew/interface/request/ResultsPerformance";
-  RequestItemsObject,
+import type { ResponseObject } from "@/modules/04_registryNew/interface/response/ResultsPerformance";
-  FormData,
-} from "@/modules/04_registryNew/interface/request/ResultsPerformance";
-import type { ResponseObject } from "@/modules/04_registry/interface/response/Assessment";
 
 const $q = useQuasar();
 const route = useRoute();
+const store = useResultsPerformDataStore();
+const { textRangePoint, textPoint } = store;
 const mixin = useCounterMixin();
 const {
   date2Thai,
@@ -32,9 +32,8 @@ const profileId = ref<string>(
   route.params.id ? route.params.id.toString() : ""
 );
 
-const resPerformData = reactive<FormData>({
+const id = ref<string>("");
-  id: "",
+const resPerformForm = reactive<RequestItemsObject>({
-  isActive: true,
   name: "",
   point1Total: 0,
   point1: 0,
@@ -46,7 +45,6 @@ const resPerformData = reactive<FormData>({
 });
 
 const isEdit = ref<boolean>(false);
-const editRow = ref<boolean>(false);
 const myForm = ref<QForm>();
 const modal = ref<boolean>(false);
 const modelView = ref<string>("table");
@@ -291,20 +289,12 @@ async function addEditData(editStatus: boolean = false) {
   if (!profileId.value) return;
 
   const url = editStatus
-    ? config.API.profileNewAssessmentsById(resPerformData.id)
+    ? config.API.profileNewAssessmentsById(id.value)
     : config.API.profileNewAssessments;
   const method = editStatus ? "patch" : "post";
   const reqBody: RequestItemsObject = {
+    ...resPerformForm,
     profileId: editStatus ? undefined : 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 {
@@ -318,54 +308,41 @@ async function addEditData(editStatus: boolean = false) {
   }
 }
 
-async function clickDelete(dataId: string) {
+// async function clickDelete(dataId: string) {
-  try {
+//   try {
-    await http.delete(config.API.profileNewAssessmentsById(dataId));
+//     await http.delete(config.API.profileNewAssessmentsById(dataId));
-    success($q, "ลบข้อมูลสำเร็จ");
+//     success($q, "ลบข้อมูลสำเร็จ");
-    await fetchData();
+//     await fetchData();
-    modal.value = false;
+//     modal.value = false;
-  } catch (error) {
+//   } catch (error) {
-    messageError($q, error);
+//     messageError($q, error);
-  } finally {
+//   } finally {
-    hideLoader();
+//     hideLoader();
-  }
+//   }
-}
+// }
 
 function onClickOpenDialog(editStatus: boolean = false, row?: ResponseObject) {
   modal.value = true;
-  editRow.value = false;
   isEdit.value = editStatus;
 
   if (editStatus && row) {
-    Object.assign(resPerformData, row);
+    id.value = row.id;
+    resPerformForm.name = row.name;
+    resPerformForm.point1Total = row.point1Total;
+    resPerformForm.point1 = row.point1;
+    resPerformForm.point2Total = row.point2Total;
+    resPerformForm.point2 = row.point2;
+    resPerformForm.pointSumTotal = row.pointSumTotal;
+    resPerformForm.pointSum = row.pointSum;
+    resPerformForm.date = row.date;
   } else {
-    (resPerformData.id = ""),
+    clearData();
-      (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) {
+  clearData();
-    dialogConfirm(
+  modal.value = false;
-      $q,
-      async () => {
-        modal.value = false;
-        editRow.value = false;
-      },
-      "ข้อมูลมีการแก้ไข",
-      "ยืนยันที่จะปิดโดยไม่บันทึกใช่หรือไม่?"
-    );
-  } else {
-    modal.value = false;
-  }
 }
 
 async function clickHistory(row: ResponseObject) {
@@ -375,8 +352,7 @@ async function clickHistory(row: ResponseObject) {
   showLoader();
   try {
     const res = await http.get(config.API.profileNewAssessmentsHisById(row.id));
-    console.log(res.data);
+
-    
     rowsHistory.value = res.data.result;
   } catch (e) {
     messageError($q, e);
@@ -401,24 +377,16 @@ function onSubmit() {
   );
 }
 
-function textRangePoint(val: number | undefined) {
+function clearData() {
-  if (val == undefined) val = -1;
+  (id.value = ""),
-  if (val >= 0 && val <= 60) return "(ต่ำกว่าร้อยละ 60)";
+    (resPerformForm.name = ""),
-  if (val >= 60 && val <= 69) return "(ร้อยละ 60 – 69)";
+    (resPerformForm.point1Total = 0),
-  if (val >= 70 && val <= 79) return "(ร้อยละ 70 – 79)";
+    (resPerformForm.point1 = 0),
-  if (val >= 80 && val <= 89) return "(ร้อยละ 80 – 89)";
+    (resPerformForm.point2Total = 0),
-  if (val >= 90 && val <= 100) return "(ร้อยละ 90 - 100)";
+    (resPerformForm.point2 = 0),
-  else return "";
+    (resPerformForm.pointSumTotal = 0),
-}
+    (resPerformForm.pointSum = 0),
-
+    (resPerformForm.date = null);
-function textPoint(val: number | undefined) {
-  if (val == undefined) val = -1;
-  if (val >= 0 && val <= 60) return "ต้องปรับปรุง";
-  if (val >= 60 && val <= 69) return "พอใช้";
-  if (val >= 70 && val <= 79) return "ดี";
-  if (val >= 80 && val <= 89) return "ดีมาก";
-  if (val >= 90 && val <= 100) return "ดีเด่น";
-  else return "-";
 }
 
 onMounted(async () => {
@@ -621,7 +589,10 @@ onMounted(async () => {
   <q-dialog v-model="modal" persistent>
     <q-card style="width: 600px">
       <q-form greedy ref="myForm" @submit="onSubmit">
-        <DialogHeader tittle="ประกาศเกียรติคุณ" :close="clickClose" />
+        <DialogHeader
+          tittle="ผลการประเมินการปฏิบัติราชการ"
+          :close="clickClose"
+        />
         <q-separator />
         <q-card-section class="q-p-sm">
           <div class="row col-12 q-col-gutter-x-xs q-col-gutter-y-xs">
@@ -631,7 +602,7 @@ onMounted(async () => {
                 borderless
                 week-start="0"
                 menu-class-name="modalfix"
-                v-model="resPerformData.date"
+                v-model="resPerformForm.date"
                 :locale="'th'"
                 :enableTimePicker="false"
               >
@@ -649,10 +620,9 @@ onMounted(async () => {
                     ref="dateReceivedRef"
                     class="inputgreen"
                     hide-bottom-space
-                    :model-value="date2Thai(resPerformData.date as Date)"
+                    :model-value="date2Thai(resPerformForm.date as Date)"
                     :label="`${'วันที่ได้รับ'}`"
                     :rules="[(val) => !!val || `${'กรุณาเลือกวันที่ได้รับ'}`]"
-                    @update:modelValue="() => (editRow = true)"
                   >
                     <template v-slot:prepend>
                       <q-icon
@@ -671,13 +641,12 @@ onMounted(async () => {
                 outlined
                 lazy-rules
                 hide-bottom-space
-                type="number"
+                mask="###"
                 class="inputgreen"
-                v-model="resPerformData.point1Total"
+                v-model="resPerformForm.point1Total"
                 input-class="text-right "
                 :label="`${'ส่วนที่1 (คะแนน)'}`"
                 :rules="[(val) => !!val || `${'กรุณากรอกส่วนที่1 (คะแนน)'}`]"
-                @update:modelValue="() => (editRow = true)"
               />
             </div>
             <div class="col-xs-6 col-sm-6 col-md-6">
@@ -686,15 +655,14 @@ onMounted(async () => {
                 outlined
                 lazy-rules
                 hide-bottom-space
-                type="number"
+                mask="###"
                 class="inputgreen"
-                v-model="resPerformData.point1"
+                v-model="resPerformForm.point1"
                 input-class="text-right"
                 :label="`${'ผลประเมินส่วนที่1 (คะแนน)'}`"
                 :rules="[
                   (val) => !!val || `${'กรุณากรอกผลประเมินส่วนที่1 (คะแนน)'}`,
                 ]"
-                @update:modelValue="() => (editRow = true)"
               />
             </div>
             <div class="col-xs-6 col-sm-6 col-md-6">
@@ -703,13 +671,12 @@ onMounted(async () => {
                 outlined
                 lazy-rules
                 hide-bottom-space
-                type="number"
+                mask="###"
                 class="inputgreen"
-                v-model="resPerformData.point2Total"
+                v-model="resPerformForm.point2Total"
                 input-class="text-right"
                 :label="`${'ส่วนที่2 (คะแนน)'}`"
                 :rules="[(val) => !!val || `${'กรุณากรอกส่วนที่2 (คะแนน)'}`]"
-                @update:modelValue="() => (editRow = true)"
               />
             </div>
             <div class="col-xs-6 col-sm-6 col-md-6">
@@ -718,15 +685,14 @@ onMounted(async () => {
                 outlined
                 lazy-rules
                 hide-bottom-space
-                type="number"
+                mask="###"
                 class="inputgreen"
-                v-model="resPerformData.point2"
+                v-model="resPerformForm.point2"
                 input-class="text-right"
                 :label="`${'ผลประเมินส่วนที่2 (คะแนน)'}`"
                 :rules="[
                   (val) => !!val || `${'กรุณากรอกผลประเมินส่วนที่2 (คะแนน)'}`,
                 ]"
-                @update:modelValue="() => (editRow = true)"
               />
             </div>
             <div class="col-xs-6 col-sm-6 col-md-6">
@@ -735,13 +701,12 @@ onMounted(async () => {
                 outlined
                 lazy-rules
                 hide-bottom-space
-                type="number"
+                mask="###"
                 class="inputgreen"
-                v-model="resPerformData.pointSumTotal"
+                v-model="resPerformForm.pointSumTotal"
                 input-class="text-right"
                 :label="`${'ผลรวม (คะแนน)'}`"
                 :rules="[(val) => !!val || `${'กรุณากรอกผลรวม (คะแนน)'}`]"
-                @update:modelValue="() => (editRow = true)"
               />
             </div>
             <div class="col-xs-6 col-sm-6 col-md-6">
@@ -750,24 +715,23 @@ onMounted(async () => {
                 outlined
                 lazy-rules
                 hide-bottom-space
-                type="number"
+                mask="###"
-                v-model="resPerformData.pointSum"
+                v-model="resPerformForm.pointSum"
                 class="inputgreen"
                 input-class="text-right"
                 :label="`${'ผลประเมินรวม (คะแนน)'}`"
                 :rules="[
                   (val) => !!val || `${'กรุณากรอกผลประเมินรวม (คะแนน)'}`,
                 ]"
-                @update:modelValue="() => (editRow = true)"
               />
             </div>
             <div class="text-subtitle2 col-12 row items-center">
               <q-space></q-space>
               ผลการประเมิน:
               <div class="text-bold items-center q-px-sm">
-                {{ textPoint(resPerformData.pointSum) }}
+                {{ textPoint(resPerformForm.pointSum) }}
               </div>
-              {{ textRangePoint(resPerformData.pointSum) }}
+              {{ textRangePoint(resPerformForm.pointSum) }}
             </div>
           </div>
         </q-card-section>

src/modules/04_registryNew/interface/request/ResultsPerformance.ts

@@ -1,6 +1,5 @@
 interface RequestItemsObject {
   profileId?: string;
-  isActive: boolean;
   name: string;
   date: Date | null;
   point1: number;
@@ -11,17 +10,4 @@ interface RequestItemsObject {
   pointSumTotal: number;
 }
 
-interface FormData {
+export type { RequestItemsObject };
-  id: string;
-  isActive: boolean;
-  name: string;
-  point1Total: number;
-  point1: number;
-  point2Total: number;
-  point2: number;
-  pointSumTotal: number;
-  pointSum: number;
-  date: Date | null;
-}
-
-export type { RequestItemsObject, FormData };

src/modules/04_registryNew/stores/ResultsPerformance.ts

@@ -0,0 +1,27 @@
+import { ref } from "vue";
+import { defineStore } from "pinia";
+
+export const useResultsPerformDataStore = defineStore("resultPerformDataStore", () => {
+
+  function textRangePoint(val: number | undefined) {
+    if (val == undefined) val = -1;
+    if (val >= 0 && val <= 60) return "(ต่ำกว่าร้อยละ 60)";
+    if (val >= 60 && val <= 69) return "(ร้อยละ 60 – 69)";
+    if (val >= 70 && val <= 79) return "(ร้อยละ 70 – 79)";
+    if (val >= 80 && val <= 89) return "(ร้อยละ 80 – 89)";
+    if (val >= 90 && val <= 100) return "(ร้อยละ 90 - 100)";
+    else return "";
+  }
+  
+  function textPoint(val: number | undefined) {
+    if (val == undefined) val = -1;
+    if (val >= 0 && val <= 60) return "ต้องปรับปรุง";
+    if (val >= 60 && val <= 69) return "พอใช้";
+    if (val >= 70 && val <= 79) return "ดี";
+    if (val >= 80 && val <= 89) return "ดีมาก";
+    if (val >= 90 && val <= 100) return "ดีเด่น";
+    else return "-";
+  }
+
+  return { textRangePoint, textPoint };
+});