Refactoring code module 05_placement

src/modules/05_placement/views/03_receiveMain.vue

@@ -15,8 +15,8 @@ import type {
   ResponseRow,
 } from "@/modules/05_placement/interface/response/Receive";
 
-import Dialogbody from "@/modules/05_placement/components/Receive/Dialogbody.vue";
-import DialogHeader from "@/modules/05_placement/components/Receive/DialogHeader.vue";
+import Dialogbody from "@/modules/05_placement/components/Receive/DialogOrders.vue";
+import DialogHeader from "@/components/DialogHeader.vue";
 import DialogOrgSelect from "@/components/Dialogs/DialogOrgSelect.vue";
 
 const $q = useQuasar();
@@ -34,27 +34,27 @@ const {
 } = mixin;
 
 const dataRecevice = ref<ResponseData[]>([]); //ข้อมูลรายการรับโอน
+const filters = ref<ResponseRow[]>([]); //ข้อมูลรายการรับโอน
+const dataRows = ref<ResponseRow>(); //ข้อมูลที่ต้องการเลือกหน่วยงานที่รับโอน
+const modal = ref<boolean>(false); //แสดง popup ส่งไปออกคำสั่งรับโอน
+const modalupload = ref<boolean>(false); //แสดง popup อัปโหลดเอกสาร
+const modalTree = ref<boolean>(false); //แสดง popup เลือกหน่วยงานที่รับโอน
 
-const dataRows = ref<any[]>([]);
-const rows2 = ref<ResponseRow[]>([]);
-const modal = ref<boolean>(false);
-const modalupload = ref<boolean>(false);
-const modalTree = ref<boolean>(false);
-const myForm = ref<any>();
-const personal = ref<ResponseData[]>([]);
-const personalId = ref<string>("");
-const filterKeyword = ref<string>("");
-const filterKeyword2 = ref<string>("");
-const filterRef = ref<any>(null);
-const files = ref<any>();
-const filters = ref<ResponseRow[]>([]);
-const rows = ref<ResponseRow[]>([]);
-const posType = ref<string>("");
-const posLevel = ref<string>("");
-const position = ref<string>("");
+const personal = ref<ResponseData[]>([]); //ข้อมูลบุคคล
+const personalId = ref<string>(""); //บุคคล
+
+const files = ref<any>(); //ไฟล์
+
+const posType = ref<string>(""); //ประเภทตำแหน่ง
+const posLevel = ref<string>(""); //ระดับตำแหน่ง
+const position = ref<string>(""); //ตำแหน่ง
 const type = ref<string | null>(null);
 
 //Table
+const rows = ref<ResponseRow[]>([]); //รายการรับโอน
+const rows2 = ref<ResponseRow[]>([]); //รายการออกคำสั่ง
+const filterKeyword = ref<string>(""); //คำค้นหารายการรับโอน
+const filterKeyword2 = ref<string>(""); //คำค้นหารายการออกคำสั่ง
 const visibleColumns = ref<string[]>([
   "no",
   "citizenId",
@@ -143,6 +143,9 @@ const columns = ref<QTableProps["columns"]>([
   },
 ]);
 
+/**
+ * ฟังก์ชันดึงข้อมูลรายการรับโอน
+ */
 async function fecthlistRecevice() {
   showLoader();
   await http
@@ -189,45 +192,58 @@ function onSubmitDoc() {
     });
 }
 
-// รีเซ็ตค่าในฟิลเตอร์
-const resetFilter = () => {
+/**
+ * ฟังก์ชันบรีเซ็ตค่าในฟิลเตอร์
+ */
+function resetFilter() {
   filterKeyword.value = "";
   filterKeyword2.value = "";
-  filterRef.value.focus();
-};
-
-// ปิดโมเดล
-const clickClose = () => {
+}
+/**
+ * ฟังก์ชันปิด popup ออกคำสั่ง
+ */
+function clickClose() {
   modal.value = false;
   filterKeyword2.value = "";
-};
-// ปิดโมเดลอัปเดตไฟล์
-const clickCloseUpload = () => {
+}
+
+/**
+ * ฟังก์ชันปิด popup อัปเดตไฟล์
+ */
+function clickCloseUpload() {
   modalupload.value = false;
   files.value = null;
-};
-// ปิดโมเดลโครงสร้าง
-const openModalTree = (id: string, data: any) => {
+}
+
+/**
+ * ฟังก์ชันเปิด popup เลือกหน่วยงานที่รับโอน
+ */
+function openModalTree(id: string, data: any) {
   personalId.value = id;
   personal.value = dataRecevice.value.filter((e: ResponseData) => e.id === id);
   dataRows.value = data;
-
   modalTree.value = true;
   type.value = null;
   dataRows.value = data;
-  // console.log("data===>", data);
-
   posType.value = data.posTypeOldId;
   posLevel.value = data.posLevelOldId;
   position.value = data.positionOld;
-};
-// เปิดโมเดลไฟล์
-const openUpload = (id: string) => {
+}
+
+/**
+ * ฟังก์ชันเปิด popup อัปเดตไฟล์
+ * @param id รายการที่ต้องการอัปเดตไฟล์
+ */
+function openUpload(id: string) {
   personalId.value = id;
   modalupload.value = true;
-};
-// ยินยันลบข้อมูล
-const openDelete = (id: string) => {
+}
+
+/**
+ * ฟังก์ชันยืนยันการลบข้อมูล
+ * @param id  รายการที่ต้องการลบ
+ */
+function openDelete(id: string) {
   dialogRemove($q, async () => {
     showLoader();
     await http
@@ -241,16 +257,24 @@ const openDelete = (id: string) => {
         hideLoader();
       });
   });
-};
+}
 
-// ไปหน้ารายละเอียด
-const nextPage = (id: string) => {
+/**
+ * ฟังก์ชันไปหน้ารายละเอียด
+ * @param id  รายการที่ต้องการดูรายละเอียก
+ */
+function nextPage(id: string) {
   router.push({
     path: `/placement/receive/${id}`,
   });
-};
+}
 
-const popup = () => {
+/**
+ * ฟังก์ชันส่งไปออกคำสั่ง
+ *
+ * ค้นหารายชื่อออกคำสั่งตามสถานะ อนุมัติ (APPROVE)
+ */
+function openModalOrder() {
   const row = filters.value.filter(
     (r: any) =>
       (r.status == "WAITTING" ||
@@ -267,10 +291,9 @@ const popup = () => {
 
   rows2.value = row;
   modal.value = true;
-};
+}
 
 function onSave(data: any) {
-  console.log("not save", data);
   const dataAppoint = {
     node: data.node,
     nodeId: data.nodeId,
@@ -303,6 +326,9 @@ function onSave(data: any) {
     });
 }
 
+/**
+ * ทำงานเมื่อมีการเรียกใช้ Components
+ */
 onMounted(() => {
   fecthlistRecevice();
 });
@@ -331,7 +357,7 @@ onMounted(() => {
             round
             color="add"
             icon="mdi-account-arrow-right"
-            @click="popup()"
+            @click="openModalOrder()"
           >
             <q-tooltip>ส่งไปออกคำสั่งรับโอน</q-tooltip>
           </q-btn>
@@ -550,34 +576,23 @@ onMounted(() => {
     </div>
   </q-card>
 
-  <!-- ออกคำสั่ง -->
-  <Dialogbody
-    v-model:Modal="modal"
-    :clickClose="clickClose"
-    :rows2="rows2"
-    v-model:filterKeyword2="filterKeyword2"
-    :fecthlistRecevice="fecthlistRecevice"
-    :nextPage="nextPage"
-  />
-
   <!-- อัปโหลดเอกสาร -->
   <q-dialog v-model="modalupload">
     <q-card style="width: 600px">
       <q-form greedy @submit.prevent @validation-success="onSubmitDoc">
-        <DialogHeader title="อัปโหลดเอกสาร" :close="clickCloseUpload" />
+        <DialogHeader tittle="อัปโหลดเอกสาร" :close="clickCloseUpload" />
         <q-separator />
         <q-card-section class="q-py-sm">
           <div class="col-12 row items-center q-col-gutter-sm">
             <div class="col-12">
               <q-file
-                ref="myForm"
                 outlined
                 dense
                 v-model="files"
                 label="อัปโหลดเอกสาร"
                 lazy-rules
                 :rules="[
-                  (val) => val || 'กรุณาเลือกไฟล์หนังสือถึงหน่วยงานที่รับโอน',
+                  (val:string) => val || 'กรุณาเลือกไฟล์หนังสือถึงหน่วยงานที่รับโอน',
                 ]"
                 hide-bottom-space
               >
@@ -599,6 +614,16 @@ onMounted(() => {
     </q-card>
   </q-dialog>
 
+  <!-- ออกคำสั่ง -->
+  <Dialogbody
+    v-model:modal="modal"
+    v-model:filter-keyword2="filterKeyword2"
+    :click-close="clickClose"
+    :rows2="rows2"
+    :fecthlist-recevice="fecthlistRecevice"
+    :next-page="nextPage"
+  />
+
   <!-- เลือกหน่วยงานที่รับโอน -->
   <DialogOrgSelect
     :title="`เลือกหน่วยงานที่รับโอน`"