fix Code ทดลองปฏิบัติหน้าที่ราชการ

src/modules/05_placement/components/probation/MainProbation.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { ref, useAttrs, onMounted, reactive, watch } from "vue";
 import { useQuasar } from "quasar";
-import { useRoute, useRouter } from "vue-router";
+import { useRouter } from "vue-router";
 
 import http from "@/plugins/http";
 import config from "@/app.config";
@@ -10,11 +10,12 @@ import { useCounterMixin } from "@/stores/mixin";
 import { useTransferDataStore } from "@/modules/05_placement/store";
 
 import type { QTableProps } from "quasar";
+import type { Pagination } from "@/modules/05_placement/interface/index/Main";
+import type { OpfillterTypeSt } from "@/modules/05_placement/interface/request/Main";
 import type {
-  FormMainProbation,
+  ResListProbation,
-  FormMainProbation2,
+  ResProfileProbation,
-  OpfillterTypeSt,
+} from "@/modules/05_placement/interface/response/Probation";
-} from "@/modules/05_placement/interface/request/Main";
 
 import DialogHeader from "@/components/DialogHeader.vue";
 import DialogOrder from "@/modules/05_placement/components/probation/DialogOrder.vue";
@@ -22,67 +23,34 @@ import DialogOrder from "@/modules/05_placement/components/probation/DialogOrder
 const $q = useQuasar(); //ใช้ noti quasar
 const storeFn = useTransferDataStore();
 const mixin = useCounterMixin();
-const route = useRoute();
 const router = useRouter();
 const { statusProbationMain } = storeFn;
 const { messageError, success, showLoader, hideLoader, dialogConfirm } = mixin;
 
 const modalCommand = ref<boolean>(false); // ตัวแปร popup ออกคำสั่ง
-const filterRef = ref<any>(null);
 const modal = ref<boolean>(false);
-const paging = ref<boolean>(true);
-const filterRef2 = ref<any>(null);
-const attrs = ref<any>(useAttrs());
 const paging2 = ref<boolean>(true);
-const fillterStatus = ref<any>([]);
+const fillterStatus = ref<ResListProbation[]>([]);
-const fillter = ref<any>("");
+const fillter = ref<string>("");
 const filterKeyword = ref<string>("");
 const filterKeyword2 = ref<string>("");
-const rows = ref<FormMainProbation[]>([]);
+const rows = ref<ResListProbation[]>([]);
-const rows2 = ref<FormMainProbation2[]>([]);
+const rows2 = ref<ResProfileProbation[]>([]);
-const dataUpdate = ref<FormMainProbation[]>([]);
+const dataUpdate = ref<ResListProbation[]>([]);
 const Opfillter = ref<OpfillterTypeSt[]>([]);
 const Opfillter2 = ref<OpfillterTypeSt[]>([]);
 const formProbation = reactive({ keyword: "", pageSize: 10, page: 1 });
-const formMain = reactive({ keyword: "", pageSize: 10, page: 1 });
 const maxPage = ref<number>(1);
 
-const modalAdd = ref<boolean>(false);
+const modalAdd = ref<boolean>(false); //เพิ่มผู้ทดลองปฏิบัติหน้าที่ราชการ
 const personId = ref<string>(""); //เก็บ id คน ตาม row
 const topic = ref<string>(
   "แต่งตั้งคณะกรรมการประเมินผลการทดลองปฏิบัติหน้าที่ราชการ"
 );
 
-const pagination = ref({
-  sortBy: "desc",
-  descending: false,
-  page: 1,
-  rowsPerPage: 10,
-});
-
 const total = ref<number>(0);
 const totalList = ref<number>(1);
-
+/** columns ฟังก์ชันดดึงข้อมูลรายการผู้ทดลองปฏิบัติหน้าที่ราชการ */
-const pagination2 = ref({
-  sortBy: "desc",
-  descending: false,
-  page: 1,
-  rowsPerPage: 10,
-});
-
-/** ข้อมูลที่เเสดง */
-const visibleColumns = ref<string[]>([
-  "no",
-  "name",
-  "position_line",
-  "position_level",
-  "organization",
-  "probation_no",
-  "order_number",
-  "probation_status",
-]);
-
-/** หัวตาราง */
 const columns = ref<QTableProps["columns"]>([
   {
     name: "no",
@@ -164,8 +132,24 @@ const columns = ref<QTableProps["columns"]>([
     style: "font-size: 14px",
   },
 ]);
+const visibleColumns = ref<string[]>([
+  "no",
+  "name",
+  "position_line",
+  "position_level",
+  "organization",
+  "probation_no",
+  "order_number",
+  "probation_status",
+]);
+const pagination = ref({
+  sortBy: "desc",
+  descending: false,
+  page: 1,
+  rowsPerPage: 10,
+});
 
-/** หัวตาราง2 */
+/** columns หัวตารางเพิ่มผู้ทดลองปฏิบัติหน้าที่ราชการ */
 const columns2 = ref<QTableProps["columns"]>([
   {
     name: "no",
@@ -237,9 +221,16 @@ const columns2 = ref<QTableProps["columns"]>([
     style: "font-size: 14px",
   },
 ]);
+const pagination2 = ref({
+  sortBy: "desc",
+  descending: false,
+  page: 1,
+  rowsPerPage: 10,
+});
 
-/** get ข้อมูล */
+/** ฟังก์ชันดดึงข้อมูลรายการผู้ทดลองปฏิบัติหน้าที่ราชการ*/
-async function getpersonalList() {
+async function fetchProbationPersonalList() {
+  rows.value = [];
   showLoader();
   await http
     .get(
@@ -253,23 +244,28 @@ async function getpersonalList() {
     .then(async (res) => {
       const data = await res.data.result.data;
       const resTotal = await res.data.result.total;
+
       rows.value = data;
       fillterStatus.value = data;
-      dataUpdate.value = rows.value;
+      dataUpdate.value = data;
-      Opfillter.value = storeFn.optionStatusProbation;
-      Opfillter2.value = storeFn.optionStatusProbation;
       totalList.value = Math.ceil(resTotal / pagination.value.rowsPerPage);
       total.value = resTotal;
-      hideLoader();
+
+      // option  filter
+      Opfillter.value = storeFn.optionStatusProbation;
+      Opfillter2.value = storeFn.optionStatusProbation;
     })
     .catch((e) => {
       messageError($q, e);
-      hideLoader();
     })
-    .finally(() => {});
+    .finally(() => {
+      hideLoader();
+    });
 }
 
+/* ฟังก์ชันดึงข้อมูลเพิ่มผู้ทดลองปฏิบัติหน้าที่ราชการ*/
 async function onclickAddProbation() {
+  rows2.value = [];
   modal.value = true;
   modal.value && showLoader();
   await http
@@ -290,7 +286,7 @@ async function onclickAddProbation() {
  * function updatePagination
  * @param newPagination ข้อมูล Pagination ใหม่
  */
-function updatePagination(newPagination: any) {
+function updatePagination(newPagination: Pagination) {
   formProbation.page = 1;
   formProbation.pageSize = newPagination.rowsPerPage;
 }
@@ -299,103 +295,79 @@ function updatePagination(newPagination: any) {
  * function updatePagination
  * @param newPagination ข้อมูล Pagination ใหม่
  */
-function updatePaginationMain(newPagination: any) {
+function updatePaginationMain(newPagination: Pagination) {
   pagination.value.page = 1;
   pagination.value.rowsPerPage = newPagination.rowsPerPage;
 }
 
-async function filterKeyword2Fn(page: number) {
+function filterKeyword2Fn(page: number) {
-  page !== 1 ? (formProbation.page = 1) : await onclickAddProbation();
+  page !== 1 ? (formProbation.page = 1) : onclickAddProbation();
 }
 
 /**
  * เพิ่มข้อมูล ผู้ทดลองปฏิบัติหน้าที่ราชการ
  * @param data personal data
  */
-function clickAdd(data: any) {
+function addPersonalData(data: ResProfileProbation) {
-  const body = {
-    id: data.id,
-    prefix: data.prefix,
-    rank: data.rank,
-    firstName: data.firstName,
-    lastName: data.lastName,
-    position: data.position,
-    idcard: data.idcard,
-    order_number: data.refCommandNo ? data.refCommandNo : "",
-    posLevelName: data.posLevelName,
-    posTypeName: data.posTypeName,
-    posNo: data.posNo,
-    positionField: data.positionField,
-    positionArea: data.positionArea,
-    posExecutiveName: data.posExecutiveName,
-    positionExecutiveField: data.positionExecutiveField,
-    isProbation: data.isProbation,
-    orgRootName: data.orgRootName,
-    orgChild1Name: data.orgChild1Name,
-    orgChild2Name: data.orgChild2Name,
-    orgChild3Name: data.orgChild3Name,
-    orgChild4Name: data.orgChild4Name,
-
-    root: data.root,
-    child1: data.orgChild1,
-    child2: data.orgChild2,
-    child3: data.orgChild3,
-    child4: data.orgChild4,
-  };
   dialogConfirm(
     $q,
     async () => {
-      showLoader();
+      try {
+        showLoader();
+        // ส่งข้อมูลด้วย POST
+        await http.post(config.API.personalAdd(), {
+          id: data.id,
+          prefix: data.prefix,
+          rank: data.rank,
+          firstName: data.firstName,
+          lastName: data.lastName,
+          position: data.position,
+          idcard: data.idcard,
+          order_number: data.refCommandNo ? data.refCommandNo : "",
+          posLevelName: data.posLevelName,
+          posTypeName: data.posTypeName,
+          posNo: data.posNo,
+          positionField: data.positionField,
+          positionArea: data.positionArea,
+          posExecutiveName: data.posExecutiveName,
+          positionExecutiveField: data.positionExecutiveField,
+          isProbation: data.isProbation,
+          orgRootName: data.orgRootName,
+          orgChild1Name: data.orgChild1Name,
+          orgChild2Name: data.orgChild2Name,
+          orgChild3Name: data.orgChild3Name,
+          orgChild4Name: data.orgChild4Name,
+          root: data.root,
+          child1: data.orgChild1,
+          child2: data.orgChild2,
+          child3: data.orgChild3,
+          child4: data.orgChild4,
+        });
 
-      await http
+        // ถ้าการเพิ่มข้อมูลสำเร็จ, อัปเดตสถานะของข้อมูล
-        .post(config.API.personalAdd(), body)
+        await http.get(config.API.orgProfileStatus(data.id));
-        .then(async () => {
+
-          await http
+        // รีเฟรชข้อมูล
-            .get(config.API.orgProfileStatus(data.id))
+        await fetchProbationPersonalList();
-            .then(async (res) => {
+        await onCloseDialog();
-              await getpersonalList();
+
-              success($q, "เพิ่มข้อมูลสำเร็จ");
+        success($q, "เพิ่มข้อมูลสำเร็จ");
-              clickClose();
+      } catch (err) {
-              hideLoader();
+        messageError($q, err);
-            })
+      } finally {
-            .catch((e) => {
+        hideLoader();
-              messageError($q, e);
+      }
-              hideLoader();
-            });
-        })
-        .catch((e) => {
-          messageError($q, e);
-          hideLoader();
-        })
-        .finally(() => {});
     },
     "ยืนยันการเพิ่มข้อมูล",
     "ต้องการเพิ่มข้อมูลนี้หรือไม่ ?"
   );
 }
+
 /** ปิด dialog */
-async function clickClose() {
+async function onCloseDialog() {
   modal.value = false;
 }
 
-/** reset ฟิลเตอร์ */
-function resetFilter() {
-  filterKeyword.value = "";
-  filterRef.value.focus();
-  getSearchMain();
-}
-
-/** reset ฟิลเตอร์ ใน dialog */
-function resetFilter2() {
-  filterKeyword2.value = "";
-  filterRef2.value.focus();
-}
-
-function paginationLabel(start: string, end: string, total: string) {
-  if (paging.value == true) return " " + start + "-" + end + " ใน " + total;
-  else return start + "-" + end + " ใน " + total;
-}
-
 function paginationLabel2(start: string, end: string, total: string) {
   if (paging2.value == true) return " " + start + "-" + end + " ใน " + total;
   else return start + "-" + end + " ใน " + total;
@@ -414,7 +386,7 @@ function filterFn(val: string, update: Function) {
   } else {
     update(() => {
       Opfillter2.value = Opfillter.value.filter(
-        (e: any) => e.value.search(val) !== -1
+        (e: OpfillterTypeSt) => e.value.search(val) !== -1
       );
     });
   }
@@ -425,27 +397,27 @@ function onCommand() {
   modalCommand.value = true;
 }
 
+/** ฟังก์ชันยืนยันการเพิ่มการแต่งตั้งคณะกรรมการประเมินผลการทดลองปฏิบัติหน้าที่ราชการ*/
 function onSubmitAdd() {
-  dialogConfirm($q, () => {
+  dialogConfirm($q, async () => {
-    const body = {
-      profileId: personId.value,
-      topic: topic.value,
-    };
     showLoader();
-    http
+    await http
-      .post(config.API.appointMain, body)
+      .post(config.API.appointMain, {
+        profileId: personId.value,
+        topic: topic.value,
+      })
       .then((res) => {
         if (res) {
           closeAdd();
-          hideLoader();
           router.push(`/probation/assign/${res.data.result}`);
         }
       })
       .catch((e) => {
         messageError($q, e);
-        hideLoader();
       })
-      .finally(() => {});
+      .finally(() => {
+        hideLoader();
+      });
   });
 }
 
@@ -465,7 +437,7 @@ function closeAdd() {
 function getSearchMain() {
   rows.value = [];
   pagination.value.page = 1;
-  getpersonalList();
+  fetchProbationPersonalList();
 }
 
 watch([() => formProbation.page, () => formProbation.pageSize], () => {
@@ -480,8 +452,8 @@ watch(
 );
 
 /** get ค่า เมื่อโหลดหน้า */
-onMounted(async () => {
+onMounted(() => {
-  getpersonalList();
+  fetchProbationPersonalList();
 });
 </script>
 
@@ -557,7 +529,6 @@ onMounted(async () => {
           standout
           dense
           v-model="filterKeyword"
-          ref="filterRef"
           outlined
           placeholder="ค้นหา"
           @keydown.enter.prevent="getSearchMain()"
@@ -675,7 +646,7 @@ onMounted(async () => {
               boundary-links
               direction-links
               :max-pages="5"
-              @update:model-value="getpersonalList"
+              @update:model-value="fetchProbationPersonalList"
             ></q-pagination>
           </template>
         </d-table>
@@ -688,7 +659,7 @@ onMounted(async () => {
       <q-form ref="myForm">
         <DialogHeader
           tittle="เพิ่มผู้ทดลองปฏิบัติหน้าที่ราชการ "
-          :close="clickClose"
+          :close="onCloseDialog"
         />
         <q-separator />
         <q-card-section class="q-pa-md q-col-gutter-sm">
@@ -697,7 +668,6 @@ onMounted(async () => {
             standout
             dense
             v-model="formProbation.keyword"
-            ref="filterRef2"
             outlined
             placeholder="ค้นหา"
             @keydown.enter.prevent="filterKeyword2Fn(formProbation.page)"
@@ -708,7 +678,6 @@ onMounted(async () => {
                 v-if="filterKeyword2 !== ''"
                 name="clear"
                 class="cursor-pointer"
-                @click="resetFilter2"
               />
             </template>
           </q-input>
@@ -723,7 +692,6 @@ onMounted(async () => {
               :paging="true"
               dense
               class="custom-header-table"
-              v-bind="attrs"
               :pagination-label="paginationLabel2"
               v-model:pagination="pagination2"
               @update:pagination="updatePagination"
@@ -750,7 +718,7 @@ onMounted(async () => {
                       outline
                       color="primary"
                       label="เพิ่ม"
-                      @click="clickAdd(props.row)"
+                      @click="addPersonalData(props.row)"
                     >
                     </q-btn>
                   </q-td>

src/modules/05_placement/interface/response/Probation.ts

@@ -0,0 +1,47 @@
+interface ResListProbation {
+  firstName: string;
+  idcard: string;
+  lastName: string;
+  name: string;
+  order_number: string;
+  ordering: number;
+  organization: string;
+  personal_id: string;
+  position_level: string;
+  position_line: string;
+  position_type: string;
+  prefixName: string;
+  probation_no: number;
+  probation_status: number;
+}
+
+interface ResProfileProbation {
+  firstName: string;
+  id: string;
+  idcard: string;
+  isProbation: boolean;
+  lastName: string;
+  orgChild1: string;
+  orgChild1Name: string;
+  orgChild2: string;
+  orgChild2Name: string;
+  orgChild3: string;
+  orgChild3Name: string;
+  orgChild4: string;
+  orgChild4Name: string;
+  orgRootName: string;
+  posExecutiveName: string;
+  posLevelName: string;
+  posNo: string;
+  posTypeName: string;
+  position: string;
+  positionArea: string;
+  positionExecutiveField: string;
+  positionField: string;
+  prefix: string;
+  rank: string;
+  refCommandNo: string;
+  root: string;
+}
+
+export type { ResListProbation, ResProfileProbation };