refactor(placement): PersonalList DialogSelectOrg

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

@@ -22,7 +22,7 @@ const store = useSelectOrgStore();
 /** props*/
 const selected = defineModel("selectedPos", { required: true }); //ตำแหน่งที่เลือก
 const positionId = defineModel<string>("positionId", { required: true }); //id ตำแหน่งที่เลือก
-const seletcId = defineModel<string>("seletcId", { required: true }); // ตำแหน่งที่เลือก
+const selectId = defineModel<string>("selectId", { required: true }); // ตำแหน่งที่เลือก
 const date = defineModel<Date | null>("datePos", { required: true }); //วันยที่รายงานคัว
 const positionData = defineModel<any[]>("position", { required: true }); //ข้อมูลรายการเลขที่ตำแหน่ง
 const isAll = defineModel<boolean>("isAll", { required: true }); //แสดงตำแหน่งทั้งหมด
@@ -214,9 +214,9 @@ async function onClickSelectPos(id: string) {
   // หาตำแหน่ง
   if (position) {
     rowsPosition.value = position.positions;
-    if (seletcId.value) {
+    if (selectId.value) {
       selected.value = rowsPosition.value.filter(
-        (e) => e.id === seletcId.value
+        (e) => e.id === selectId.value
       );
     }
   }

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

@@ -11,6 +11,7 @@ import { useStructureTree } from "@/stores/structureTree";
 
 /** importType*/
 import type {
+  DataList,
   PositionMaim,
   PositionNo,
   Positions,
@@ -41,17 +42,14 @@ const {
 
 /**props*/
 const modal = defineModel<boolean>("modal", { required: true });
-const props = defineProps({
-  dataRow: {
-    type: Object,
-    require: true,
-  },
-  fetchTable: {
-    type: Function,
-    require: true,
-  },
-  fetchStatCard: { type: Function, require: true },
-});
+
+interface Props {
+  dataRow?: DataList;
+  fetchTable?: () => Promise<void>;
+  fetchStatCard?: () => Promise<void>;
+}
+
+const props = defineProps<Props>();
 
 /** Tree*/
 const nodeId = ref<string>("");
@@ -65,12 +63,12 @@ const expanded = ref<string[]>([]);
 const positionUse = ref<string[]>([]);
 const positionNo = ref<DataPositionNo[]>([]);
 const positionId = ref<string>("");
-const seletcId = ref<string>("");
+const selectId = ref<string>("");
 const posType = ref<FormPosType | null>(null);
 const posLevel = ref<string>("");
-const selectedPos = ref<any[]>([]);
+const selectedPos = ref<Positions[]>([]);
 const datePos = ref<Date | null>(new Date());
-const posMasterMain = ref<any[]>([]);
+const posMasterMain = ref<PositionMaim[]>([]);
 const orgRevisionId = ref<string>("");
 const optionPosType = ref<FormPosType[]>([]);
 const optionPosLevel = ref<FormPosLevel[]>([]);
@@ -92,14 +90,14 @@ async function fetchStructure() {
  */
 function updateSelected(data: TreeMain) {
   if (props?.dataRow?.nodeId === data.orgTreeId) {
-    positionId.value = props?.dataRow?.posmasterId;
-    seletcId.value = props?.dataRow?.positionId;
+    positionId.value = props?.dataRow?.posmasterId ?? "";
+    selectId.value = props?.dataRow?.positionId ?? "";
     datePos.value = props?.dataRow?.reportingDate
       ? new Date(props.dataRow.reportingDate)
       : new Date();
   } else {
     positionId.value = "";
-    seletcId.value = "";
+    selectId.value = "";
     selectedPos.value = [];
     datePos.value = new Date();
   }
@@ -155,7 +153,7 @@ async function fetchDataTable(id: string, level: number = 0) {
         if (p.length !== 0) {
           const a = p.find((el: Positions) => el.positionIsSelected === true);
           const { id, ...rest } = a ? a : p[0];
-          const data: any = { ...e, ...rest };
+          const data: PositionMaim = { ...e, ...rest } as PositionMaim;
           dataMain.push(data);
         }
       });
@@ -167,10 +165,10 @@ async function fetchDataTable(id: string, level: number = 0) {
           (e) => e !== props.dataRow?.posmasterId
         );
 
-        positionNo.value = posMain.filter((e: any) => !newUse.includes(e.id));
+        positionNo.value = posMain.filter((e: DataPositionNo) => !newUse.includes(e.id));
       } else {
         positionNo.value = posMain.filter(
-          (e: any) => !positionUse.value.includes(e.id)
+          (e: DataPositionNo) => !positionUse.value.includes(e.id)
         );
       }
 
@@ -202,8 +200,8 @@ async function fetchPosFind(level: number, id: string) {
 
       expanded.value = data;
       nodeId.value = id;
-      positionId.value = props?.dataRow?.posmasterId;
-      seletcId.value = props?.dataRow?.positionId;
+      positionId.value = props?.dataRow?.posmasterId ?? "";
+      selectId.value = props?.dataRow?.positionId ?? "";
       datePos.value = props?.dataRow?.reportingDate
         ? new Date(props.dataRow.reportingDate)
         : new Date();
@@ -218,12 +216,14 @@ async function fetchPosFind(level: number, id: string) {
 
 /** function บันทึกข้อมูลตำแหน่ง*/
 async function onClickSubmit() {
-  const dataPosMaster = await posMasterMain.value?.find(
-    (e: any) => e.id === positionId.value
+  const dataPosMaster = posMasterMain.value?.find(
+    (e) => e.id === positionId.value
   );
 
   if (selectedPos.value.length === 0) {
     dialogMessageNotify($q, "กรุณาเลือกตำแหน่ง");
+  } else if (!dataPosMaster) {
+    dialogMessageNotify($q, "ไม่พบข้อมูลตำแหน่ง");
   } else {
     dialogConfirm($q, async () => {
       showLoader();
@@ -290,7 +290,7 @@ watch(
     if (modal.value) {
       await fetchPositionUes();
       if (props?.dataRow?.node !== null && props?.dataRow?.nodeId !== null) {
-        await fetchPosFind(props?.dataRow?.node, props?.dataRow?.nodeId);
+        await fetchPosFind(props?.dataRow?.node ?? 0, props?.dataRow?.nodeId ?? "");
       } else {
         expanded.value = [];
       }
@@ -343,28 +343,15 @@ function onPosType() {
 }
 
 watch(
-  () => isAll.value,
-  (value, oldVal) => {
-    if (value !== oldVal) {
+  [isAll, isBlank, () => isPosition.value],
+  ([newAll, newBlank, newPos], [oldAll, oldBlank, oldPos]) => {
+    const shouldFetch = (newAll !== oldAll) || (newBlank !== oldBlank);
+    const isSelectMode = newPos === "select" && oldPos !== "select";
+
+    if (shouldFetch || isSelectMode) {
       fetchDataTable(nodeId.value, nodeLevel.value);
     }
-  }
-);
-
-watch(
-  () => isBlank.value,
-  (value, oldVal) => {
-    if (value !== oldVal) {
-      fetchDataTable(nodeId.value, nodeLevel.value);
-    }
-  }
-);
-
-watch(
-  () => isPosition.value === "select",
-  (value, oldVal) => {
-    if (value !== oldVal) {
-      fetchDataTable(nodeId.value, nodeLevel.value);
+    if (isSelectMode) {
       getOrgPosType();
     }
   }
@@ -465,15 +452,15 @@ onMounted(() => {
                 :name="item"
               >
                 <CardPosition
-                  v-model:position="positionNo as []"
+                  v-model:position="positionNo"
                   v-model:selectedPos="selectedPos"
                   v-model:datePos="datePos"
                   v-model:positionId="positionId"
-                  v-model:seletcId="seletcId"
+                  v-model:selectId="selectId"
                   v-model:is-all="isAll"
                   v-model:is-blank="isBlank"
                   v-model:is-position="isPosition"
-                  v-model:pos-type="posType as FormPosType | null"
+                  v-model:pos-type="posType"
                   v-model:pos-level="posLevel"
                   v-model:option-pos-type="optionPosType"
                   v-model:option-pos-level="optionPosLevel"
@@ -481,7 +468,7 @@ onMounted(() => {
                   :on-pos-type="onPosType"
                   :node-id="nodeId"
                   :node-level="nodeLevel"
-                  :bma-officer="props.dataRow?.bmaOfficer"
+                  :bma-officer="props.dataRow?.bmaOfficer ?? ''"
                   :is-load-position="isLoadPosition"
                 />
               </q-tab-panel>