Refactoring code module 02_organization

src/modules/02_organization/components/DialogSuccession.vue

@@ -3,6 +3,8 @@ import { ref, watch, reactive } from "vue";
 import { useQuasar } from "quasar";
 import http from "@/plugins/http";
 import config from "@/app.config";
+import { useCounterMixin } from "@/stores/mixin";
+import { useOrganizational } from "@/modules/02_organization/store/organizational";
 
 /** importType*/
 import type { QTableProps } from "quasar";
@@ -20,10 +22,6 @@ import type {
 /** importComponents*/
 import Header from "@/components/DialogHeader.vue";
 
-/** importStore*/
-import { useCounterMixin } from "@/stores/mixin";
-import { useOrganizational } from "@/modules/02_organization/store/organizational";
-
 /** use*/
 const $q = useQuasar();
 const store = useOrganizational();
@@ -49,7 +47,9 @@ const selectedTree = ref<string>("");
 const filterRef = ref();
 const levelTree = ref<number>(0);
 
-/** function เรียกข้อมูล Tree แบบ ปัจจุบัน*/
+/**
+ * function เรียกข้อมูล Tree แบบ ปัจจุบัน
+ */
 async function fetchTree() {
   showLoader();
   const id: string = store.activeId ? store.activeId?.toString() : "";
@@ -66,23 +66,28 @@ async function fetchTree() {
     });
 }
 
-/** resetFilterTree*/
+/**
+ * resetFilterTree
+ */
 function resetFilter() {
   filterTree.value = "";
   filterRef.value.focus();
 }
 
-/** function เลือกหน่วยงาน*/
+/**
+ * function เลือกหน่วยงาน
+ *
+ * และโหลดช้อมูลตำแหน่ง
+ */
 async function updateSelected(data: DataTree) {
   levelTree.value = data.orgLevel;
   selectedTree.value = data.orgTreeId;
-  reqMaster.id = await data.orgTreeId;
-  reqMaster.type = await data.orgLevel;
+  reqMaster.id = data.orgTreeId;
+  reqMaster.type = data.orgLevel;
   await fetchTable();
 }
 
 /*************************** TABLE ***********************************/
-/** columns*/
 const columns = ref<QTableProps["columns"]>([
   {
     name: "no",
@@ -103,7 +108,7 @@ const columns = ref<QTableProps["columns"]>([
     style: "font-size: 14px",
   },
 ]);
-const rows = ref<PosMaster[]>([]);
+const rows = ref<PosMaster[]>([]); //รายการตำแหน่ง
 const reqMaster = reactive<FilterMaster>({
   id: "",
   type: 0,
@@ -116,7 +121,9 @@ const reqMaster = reactive<FilterMaster>({
 const totalRow = ref<number>(0);
 const selectedPos = ref<PosMaster[]>([]);
 
-/** function เรียกข้อมูล Table Position*/
+/**
+ * function เรียกข้อมูลรายการตำแหน่ง
+ */
 async function fetchTable() {
   selectedPos.value = [];
   await http
@@ -149,13 +156,17 @@ function updatePagination(newPagination: NewPagination) {
   reqMaster.page = 1;
 }
 
-/** funcion ค้นหาข้อมูลใน Table*/
+/**
+ * funcion ค้นหาข้อมูลใน Table
+ */
 async function filterKeyword() {
   reqMaster.page = 1;
   fetchTable();
 }
 
-/** function ยืนยันกาสืบทอดตำแหน่ง */
+/**
+ * function ยืนยันกาสืบทอดตำแหน่ง
+ */
 function onClickConfirm() {
   if (selectedPos.value.length === 0) {
     dialogMessageNotify($q, "กรุณาเลือกตำแหน่งสืบทอด");
@@ -187,20 +198,9 @@ function onClickConfirm() {
   }
 }
 
-/** callblck function ทำการ fetch ข้อมูล tree เมื่อเปิด popup*/
-watch(
-  () => modal.value,
-  async () => {
-    modal.value ? await fetchTree() : clearForm();
-  }
-);
-
-/** callblck function ทำการ fetch ข้อมูล Table เมื่อมีการเปลี่ยนหน้า*/
-watch([() => reqMaster.page, () => reqMaster.pageSize], async () => {
-  await fetchTable();
-});
-
-/** function clear ข้อมูล*/
+/**
+ * function clear ข้อมูล
+ */
 function clearForm() {
   nodeTree.value = [];
   rows.value = [];
@@ -212,6 +212,23 @@ function clearForm() {
   reqMaster.pageSize = 10;
   reqMaster.keyword = "";
 }
+
+/**
+ * callblck function ทำการ fetch ข้อมูล tree เมื่อเปิด popup*
+ */
+watch(
+  () => modal.value,
+  async () => {
+    modal.value ? await fetchTree() : clearForm();
+  }
+);
+
+/**
+ * callblck function ทำการ fetch ข้อมูล Table เมื่อมีการเปลี่ยนหน้า
+ */
+watch([() => reqMaster.page, () => reqMaster.pageSize], async () => {
+  await fetchTable();
+});
 </script>
 
 <template>