refactor(placement): DialogSelectOrg LoadPosition

src/modules/05_placement/components/PersonalList/CardPosition.vue

@@ -2,7 +2,7 @@
 import { ref, onMounted, watch } from "vue";
 
 /** importType*/
-import type { QTableProps } from "quasar";
+import { type QTableProps } from "quasar";
 import type {
   Positions,
   FormPosType,
@@ -23,13 +23,13 @@ const store = useSelectOrgStore();
 const selected = defineModel("selectedPos", { required: true }); //ตำแหน่งที่เลือก
 const positionId = defineModel<string>("positionId", { required: true }); //id ตำแหน่งที่เลือก
 const seletcId = defineModel<string>("seletcId", { required: true }); // ตำแหน่งที่เลือก
-const date = defineModel<Date>("datePos", { required: true }); //วันยที่รายงานคัว
+const date = defineModel<Date | null>("datePos", { required: true }); //วันยที่รายงานคัว
 const positionData = defineModel<any[]>("position", { required: true }); //ข้อมูลรายการเลขที่ตำแหน่ง
 const isAll = defineModel<boolean>("isAll", { required: true }); //แสดงตำแหน่งทั้งหมด
 const isBlank = defineModel<boolean>("isBlank", { required: true }); //แสดงเฉพาะตำแหน่งว่าง
 const isPosition = defineModel<string>("isPosition", { required: true });
 // const isPositionOld = defineModel<boolean>("isPositionOld", { required: true }); //แสดงตำแหน่งที่ตรงกับประเภทและระดับเดิม
-const posType = defineModel<FormPosType>("posType", { required: true }); //ตำแหน่งประเภท
+const posType = defineModel<FormPosType | null>("posType", { required: true }); //ตำแหน่งประเภท
 const posLevel = defineModel<string>("posLevel", { required: true }); //ระดับตำแหน่ง
 const optionPosType = defineModel<FormPosType[]>("optionPosType", {
   required: true,
@@ -47,6 +47,7 @@ const props = defineProps({
   onPosType: Function,
   nodeId: String,
   nodeLevel: Number,
+  isLoadPosition: Boolean,
 });
 
 //Table
@@ -248,15 +249,20 @@ watch(positionData, (newVal, oldVal) => {
   }
 });
 
+watch(
+  () => props.isLoadPosition,
+  (newVal) => {
+    if (newVal && positionId.value) {
+      onClickSelectPos(positionId.value);
+    }
+  }
+);
+
 /**
  * ทำงานเมื่อ Components ถูกเรียกใช้งาน
  */
 onMounted(async () => {
-  if (positionId.value) {
-    setTimeout(async () => {
-      await onClickSelectPos(positionId.value);
-    }, 1000);
-  } else {
+  if (!positionId.value) {
     positionRows.value = positionData.value;
     positionRowsData.value = positionData.value;
   }

src/modules/05_placement/components/PersonalList/DialogSelectOrg.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { onMounted, ref, watch, reactive } from "vue";
+import { onMounted, ref, watch } from "vue";
 import { useQuasar } from "quasar";
 
 import { useRoute } from "vue-router";
@@ -69,11 +69,12 @@ const seletcId = ref<string>("");
 const posType = ref<FormPosType | null>(null);
 const posLevel = ref<string>("");
 const selectedPos = ref<any[]>([]);
-const datePos = ref<Date>(new Date());
+const datePos = ref<Date | null>(new Date());
 const posMasterMain = ref<any[]>([]);
 const orgRevisionId = ref<string>("");
 const optionPosType = ref<FormPosType[]>([]);
 const optionPosLevel = ref<FormPosLevel[]>([]);
+const isLoadPosition = ref<boolean>(false);
 
 /** function เรียกข้อมูลโครงสร้าง แบบปัจุบันและ แบบร่าง*/
 async function fetchStructure() {
@@ -93,7 +94,9 @@ function updateSelected(data: TreeMain) {
   if (props?.dataRow?.nodeId === data.orgTreeId) {
     positionId.value = props?.dataRow?.posmasterId;
     seletcId.value = props?.dataRow?.positionId;
-    datePos.value = props?.dataRow?.reportingDate;
+    datePos.value = props?.dataRow?.reportingDate
+      ? new Date(props.dataRow.reportingDate)
+      : new Date();
   } else {
     positionId.value = "";
     seletcId.value = "";
@@ -117,6 +120,8 @@ const isPosition = ref<string>("exam");
 // const isPositionOld = ref<boolean>(false);
 async function fetchDataTable(id: string, level: number = 0) {
   showLoader();
+  isLoadPosition.value = false;
+  positionNo.value = [];
   const body = {
     node: level,
     nodeId: id,
@@ -168,15 +173,14 @@ async function fetchDataTable(id: string, level: number = 0) {
           (e: any) => !positionUse.value.includes(e.id)
         );
       }
+
+      isLoadPosition.value = true;
     })
     .catch((err) => {
       messageError($q, err);
-      hideLoader();
     })
     .finally(() => {
-      setTimeout(() => {
-        hideLoader();
-      }, 1000);
+      hideLoader();
     });
 }
 
@@ -200,7 +204,9 @@ async function fetchPosFind(level: number, id: string) {
       nodeId.value = id;
       positionId.value = props?.dataRow?.posmasterId;
       seletcId.value = props?.dataRow?.positionId;
-      datePos.value = props?.dataRow?.reportingDate;
+      datePos.value = props?.dataRow?.reportingDate
+        ? new Date(props.dataRow.reportingDate)
+        : new Date();
 
       fetchDataTable(nodeId.value, level);
     })
@@ -272,6 +278,9 @@ function clearData() {
   posLevel.value = "";
   isPosition.value = "exam";
   filterTree.value = "";
+  datePos.value = new Date();
+  isLoadPosition.value = false;
+  positionNo.value = [];
 }
 
 /** callback function เมื่อมีการเปิด popup*/
@@ -280,7 +289,6 @@ watch(
   async () => {
     if (modal.value) {
       await fetchPositionUes();
-
       if (props?.dataRow?.node !== null && props?.dataRow?.nodeId !== null) {
         await fetchPosFind(props?.dataRow?.node, props?.dataRow?.nodeId);
       } else {
@@ -323,8 +331,7 @@ async function getOrgPosType() {
     })
     .catch((e) => {
       messageError($q, e);
-    })
-    .finally(() => {});
+    });
 }
 
 function onPosType() {
@@ -466,7 +473,7 @@ onMounted(() => {
                   v-model:is-all="isAll"
                   v-model:is-blank="isBlank"
                   v-model:is-position="isPosition"
-                  v-model:pos-type="posType as FormPosType"
+                  v-model:pos-type="posType as FormPosType | null"
                   v-model:pos-level="posLevel"
                   v-model:option-pos-type="optionPosType"
                   v-model:option-pos-level="optionPosLevel"
@@ -475,6 +482,7 @@ onMounted(() => {
                   :node-id="nodeId"
                   :node-level="nodeLevel"
                   :bma-officer="props.dataRow?.bmaOfficer"
+                  :is-load-position="isLoadPosition"
                 />
               </q-tab-panel>
             </q-tab-panels>