refactor(DialogOrgSelect): fetch data

src/components/Dialogs/DialogOrgSelect.vue

@@ -24,14 +24,14 @@ import DialogHeader from "@/components/DialogHeader.vue";
 const props = defineProps({
   dataRows: {
     type: Object,
-    require: true,
+    required: true,
   },
   onSubmit: Function,
 });
 const $q = useQuasar();
 const route = useRoute();
 const storeTree = useStructureTree();
-const { fetchStructureTree } = useStructureTree();
+const { fetchStructureTree } = storeTree;
 const mixin = useCounterMixin();
 const {
   dialogConfirm,
@@ -47,10 +47,10 @@ const {
 /** props*/
 const modal = defineModel<boolean>("modal", { required: true });
 const title = defineModel<string>("title", { required: true });
-const type = defineModel<any>("type", { required: true });
+const type = defineModel<string | null>("type", { required: true });
-const posType = defineModel<any>("posType", { required: true });
+const posType = defineModel<string | null>("posType", { required: true });
-const posLevel = defineModel<any>("posLevel", { required: true });
+const posLevel = defineModel<string | null>("posLevel", { required: true });
-const position = defineModel<any>("position", { required: true });
+const position = defineModel<string | null>("position", { required: true });
 
 // const routeName = ref<string>(route?.name);
 const orgRevisionId = ref<string>("");
@@ -64,7 +64,7 @@ const itemTaps = ref<string[]>();
 const filters = ref<string>("");
 const positionId = ref<string>("");
 const selectedPos = ref<any[]>([]);
-const seletcId = ref<string>("");
+const selectId = ref<string>("");
 const datePos = ref<Date>(new Date());
 const rowsPosition = ref<Positions[]>([]);
 const positionData = ref<any[]>([]);
@@ -79,7 +79,6 @@ const formActive = reactive<FormActive>({
 });
 /** node */
 const nodes = ref<Array<OrgTree>>([]);
-const lazy = ref(nodes);
 const expanded = ref<string[]>([]);
 const nodeLevel = ref<number>(0);
 const nodeId = ref<string>(""); // id ของ Tree
@@ -150,7 +149,7 @@ const columns = ref<QTableProps["columns"]>([
     style: "font-size: 14px",
   },
 ]);
-const columnsPostition = ref<QTableProps["columns"]>([
+const columnsPosition = ref<QTableProps["columns"]>([
   {
     name: "no",
     align: "left",
@@ -181,7 +180,7 @@ const columnsPostition = ref<QTableProps["columns"]>([
   {
     name: "posTypeName",
     align: "left",
-    label: "ประเภทตำเเหน่ง",
+    label: "ประเภทตำแหน่ง",
     sortable: true,
     field: "posTypeName",
     headerStyle: "font-size: 14px",
@@ -335,11 +334,11 @@ async function getDataTable(id: string, level: number = 0) {
 function updateSelected(data: DataTree) {
   if (props?.dataRows?.nodeId === data.orgTreeId) {
     positionId.value = props?.dataRows?.posmasterId;
-    seletcId.value = props?.dataRows?.positionId;
+    selectId.value = props?.dataRows?.positionId;
     datePos.value = props?.dataRows?.reportingDate;
   } else {
     positionId.value = "";
-    seletcId.value = "";
+    selectId.value = "";
     selectedPos.value = [];
     datePos.value = new Date();
   }
@@ -386,9 +385,9 @@ async function onClickSelectPos(id: string) {
   // หาตำแหน่ง
   if (position) {
     rowsPosition.value = position.positions;
-    if (seletcId.value) {
+    if (selectId.value) {
       selectedPos.value = rowsPosition.value.filter(
-        (e) => e.id === seletcId.value
+        (e) => e.id === selectId.value
       );
     }
   }
@@ -412,12 +411,14 @@ async function fetchPosFind(level: number, id: string) {
       expanded.value = data;
       nodeId.value = id;
       positionId.value = props?.dataRows?.posmasterId;
-      seletcId.value = props?.dataRows?.positionId;
+      selectId.value = props?.dataRows?.positionId;
       datePos.value = props?.dataRows?.reportingDate;
       await getDataTable(nodeId.value, level);
     })
     .catch((e) => {
       messageError($q, e);
+    })
+    .finally(() => {
       hideLoader();
     });
 }
@@ -461,20 +462,16 @@ function fetchPositionUes() {
 
 watch(
   () => isAll.value,
-  (value, oldVal) => {
+  () => {
-    if (value !== oldVal) {
     getDataTable(nodeId.value, nodeLevel.value);
   }
-  }
 );
 
 watch(
   () => isBlank.value,
-  (value, oldVal) => {
+  () => {
-    if (value !== oldVal) {
     getDataTable(nodeId.value, nodeLevel.value);
   }
-  }
 );
 
 watch(
@@ -489,9 +486,17 @@ function onSubmit() {
   const dataPosMaster = posMasterMain.value?.find(
     (e: any) => e.id === positionId.value
   );
+
+  if (!dataPosMaster) {
+    dialogMessageNotify($q, "ไม่พบข้อมูลตำแหน่ง");
+    return;
+  }
+
   if (selectedPos.value.length === 0) {
     dialogMessageNotify($q, "กรุณาเลือกตำแหน่ง");
-  } else {
+    return;
+  }
+
   dialogConfirm($q, async () => {
     const body = {
       personalId: props?.dataRows?.id,
@@ -518,7 +523,6 @@ function onSubmit() {
     close();
   });
 }
-}
 
 function onSearch() {
   positionNo.value = onSearchDataTable(
@@ -564,7 +568,7 @@ onMounted(async () => {
             <q-tree
               class="q-pa-sm q-gutter-sm"
               dense
-              :nodes="lazy"
+              :nodes="nodes"
               node-key="orgTreeId"
               label-key="labelName"
               :filter="filter"
@@ -830,7 +834,7 @@ onMounted(async () => {
                             </q-toolbar>
                             <d-table
                               ref="table"
-                              :columns="columnsPostition"
+                              :columns="columnsPosition"
                               :rows="rowsPosition"
                               row-key="id"
                               flat