โครงสร้างอัตรากำลัง

src/modules/02_organizationalNew/components/listView.vue

@@ -17,10 +17,13 @@ const store = useOrganizational();
 const $q = useQuasar();
 const { showLoader, hideLoader, messageError } = useCounterMixin();
 
-const showData = ref<boolean>(false);
 const nodeTree = ref<OrgTree[]>();
 const historyId = defineModel<string>("historyId", { required: true });
 const count = defineModel<number>("count", { required: true });
+const nodeId = ref<string>("");
+const orgLevel = ref<number>(0);
+const isLoad = ref<boolean>(false);
+const nodeData = ref<any>();
 
 // defineProps<{ dataActive: DataActive }>();
 
@@ -44,6 +47,22 @@ async function fetchDataTree(id: string) {
   // console.log(nodeTree.value);
 }
 
+async function fetchDataTable(id: string, level: namber) {
+  orgLevel.value = level;
+  // isLoad.value = true;
+  // await http
+  //   .get(config.API.orgPosPositionById(id))
+  //   .then((res) => {
+  //     console.log(res);
+  //   })
+  //   .catch((err) => {
+  //     messageError($q, err);
+  //   })
+  //   .finally(() => {
+  //     isLoad.value = false;
+  //   });
+}
+
 onMounted(async () => {
   const id =
     store.typeOrganizational === "current" ? store.activeId : store.draftId;
@@ -63,6 +82,7 @@ watch(
     const id =
       store.typeOrganizational === "current" ? store.activeId : store.draftId;
     id && store.typeOrganizational !== "old" && fetchDataTree(id);
+    nodeId.value = "";
   }
 );
 </script>
@@ -73,7 +93,10 @@ watch(
         <div class="col-12 row no-wrap bg-grey-1">
           <TreeView
             v-model:nodeTree="nodeTree"
+            v-model:nodeId="nodeId"
+            v-model:isLoad="isLoad"
             :fetchDataTree="fetchDataTree"
+            :fetchDataTable="fetchDataTable"
           />
 
           <div class="col-12 row">
@@ -84,7 +107,27 @@ watch(
 
       <div class="col-xs-12 col-sm-9 q-pa-md">
         <div class="col-12 row items-center">
-          <TableView v-model:showData="showData" />
+          <div
+            class="row col-12 justify-center items-center"
+            v-if="isLoad"
+            style="height: 550px"
+          >
+            <div class="col-2">
+              <q-spinner color="primary" size="3em" />
+            </div>
+          </div>
+
+          <div v-else class="col-12 row items-center">
+            <TableView
+              v-if="nodeId !== ''"
+              v-model:orgLevel="orgLevel"
+              v-model:treeId="nodeId"
+            />
+
+            <q-banner v-else class="bg-warning text-white col-12 text-center">
+              เลือกรายการ {{ nodeId }}
+            </q-banner>
+          </div>
         </div>
       </div>
     </q-card>