API Position

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

@@ -1,32 +1,54 @@
 <script setup lang="ts">
-import { ref, onMounted, watch } from "vue";
+import { ref, reactive, onMounted, watch } from "vue";
 import { useQuasar } from "quasar";
 import http from "@/plugins/http";
 import config from "@/app.config";
 
 /** importType*/
-import type { OrgTree } from "@/modules/02_organizationalNew/interface/response/organizational";
+import type {
+  OrgTree,
+  PosMaster,
+  Position,
+  PosMaster2,
+} from "@/modules/02_organizationalNew/interface/response/organizational";
+import type { FilterMaster } from "@/modules/02_organizationalNew/interface/request/organizational";
 
+/** importComponents*/
 import TreeView from "@/modules/02_organizationalNew/components/mainTree.vue";
 import TableView from "@/modules/02_organizationalNew/components/tableTree.vue";
 
+/** importStore*/
 import { useOrganizational } from "@/modules/02_organizationalNew/store/organizational";
 import { useCounterMixin } from "@/stores/mixin";
 
+/** use*/
 const store = useOrganizational();
 const $q = useQuasar();
 const { showLoader, hideLoader, messageError } = useCounterMixin();
 
-const nodeTree = ref<OrgTree[]>();
-const historyId = defineModel<string>("historyId", { required: true });
+const nodeTree = ref<OrgTree[]>(); // ข้อมูล Tree
+const historyId = defineModel<string>("historyId", { required: true }); // id ประวัติโครงสร้าง
 const count = defineModel<number>("count", { required: true });
-const nodeId = ref<string>("");
-const orgLevel = ref<number>(0);
-const isLoad = ref<boolean>(false);
+const nodeId = ref<string>(""); // id ของ Tree
+const orgLevel = ref<number>(0); // levelTree
+const isLoad = ref<boolean>(false); // loadTable
 const nodeData = ref<any>();
+const reqMaster = reactive<FilterMaster>({
+  id: "",
+  type: 0,
+  isAll: false,
+  page: 1,
+  pageSize: 10,
+  keyword: "",
+});
+const totalPage = ref<number>(1);
+const action1 = ref<boolean>(false);
+const posMaster = ref<PosMaster2[]>([]);
 
-// defineProps<{ dataActive: DataActive }>();
-
+/**
+ * function fetch ข้อมูลของ Tree
+ * @param id id โครงสร้าง
+ */
 async function fetchDataTree(id: string) {
   showLoader();
   // const id =
@@ -47,28 +69,69 @@ async function fetchDataTree(id: string) {
   // console.log(nodeTree.value);
 }
 
-async function fetchDataTable(id: string, level: number) {
+/**
+ * function fetch ข้อรายการตำแหน่ง
+ * @param id  idTree
+ * @param level  levelTree
+ */
+async function fetchDataTable(id: string, level: number, action: boolean) {
   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;
-  //   });
+  reqMaster.id = id;
+  reqMaster.type = level;
+  action1.value = action;
+  if (action) {
+    setTimeout(() => {
+      action1.value = false;
+    }, 1000);
+    reqMaster.isAll = false;
+    reqMaster.page = 1;
+    reqMaster.pageSize = 10;
+    reqMaster.keyword = "";
+  }
+
+  if (action === true) {
+    isLoad.value = true;
+  }
+  await http
+    .post(config.API.orgPosMasterList, reqMaster)
+    .then((res) => {
+      console.log(res);
+      posMaster.value = [];
+      const dataMain: PosMaster[] = [];
+      totalPage.value = Math.ceil(res.data.result.total / reqMaster.pageSize);
+      res.data.result.data.forEach((e: PosMaster) => {
+        const p = e.positions;
+        const a = p.find((el: Position) => el.positionIsSelected === true);
+        const { id, ...rest } = a ? a : p[0];
+        const test = { ...e, ...rest };
+
+        dataMain.push(test);
+        posMaster.value = store.fetchPosMaster(dataMain);
+      });
+    })
+    .catch((err) => {
+      messageError($q, err);
+      posMaster.value = [];
+    })
+    .finally(() => {
+      setTimeout(() => {
+        isLoad.value = false;
+      }, 1500);
+    });
 }
 
+/**lifecycle Hook*/
 onMounted(async () => {
   const id =
-    store.typeOrganizational === "current" ? store.activeId : store.draftId;
+    store.typeOrganizational === "current"
+      ? store.activeId
+      : store.typeOrganizational === "draft"
+      ? store.draftId
+      : historyId.value;
   id && (await fetchDataTree(id));
 });
 
+/** callback function ทำงาน ทำการ fetch ข้อมูล Tree เมื่อมีการเลือกประวัติโครงสร้าง*/
 watch(
   () => count.value,
   () => {
@@ -76,6 +139,7 @@ watch(
   }
 );
 
+/** callblck function ทำการ fetch ข้อมูล Tree เมื่อมีการเปลี่ยนโครงสร้าง*/
 watch(
   () => store.typeOrganizational,
   () => {
@@ -85,6 +149,14 @@ watch(
     nodeId.value = "";
   }
 );
+
+watch(
+  [() => reqMaster.page, () => reqMaster.pageSize, () => reqMaster.isAll],
+  () => {
+    action1.value === false &&
+      fetchDataTable(reqMaster.id, reqMaster.type, false);
+  }
+);
 </script>
 <template>
   <div class="col-12">
@@ -122,10 +194,14 @@ watch(
               v-if="nodeId !== ''"
               v-model:orgLevel="orgLevel"
               v-model:treeId="nodeId"
+              v-model:reqMaster="reqMaster"
+              v-model:totalPage="totalPage"
+              v-model:posMaster="posMaster"
             />
 
-            <q-banner v-else class="bg-warning text-white col-12 text-center">
-              เลือกรายการ {{ nodeId }}
+            <q-banner v-else class="q-pa-lg col-12 text-center">
+              <q-icon name="mdi-hand-pointing-left" size="lg" color="primary" />
+              <p>กรุณาเลือกโครงสร้าง</p>
             </q-banner>
           </div>
         </div>