no message

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

@@ -34,6 +34,10 @@ const props = defineProps({
     type: Object,
     require: true,
   },
+  edit: {
+    type: Function,
+    require: true,
+  },
 });
 
 const $q = useQuasar();
@@ -134,8 +138,6 @@ function onSubmit() {
       ["org" + type + "Rank"]: formData.orgLevel,
       [nameId]: rootId,
     };
-    console.log(body);
-
     if (actionType.value === "ADD") {
       await http
         .post(config.API.createOrgLevel(type.toLocaleLowerCase()), body)
@@ -164,6 +166,7 @@ function onSubmit() {
           )
           .then((res) => {
             console.log(res);
+            props.edit?.(props.dataNode?.orgTreeId, type, body);
             success($q, "บันทึกข้อมูลสำเร็จ");
           })
           .catch((err) => {
@@ -171,7 +174,7 @@ function onSubmit() {
             messageError($q, err);
           })
           .finally(async () => {
-            await props.fetchDataTree?.();
+            // await props.fetchDataTree?.();
             await closeClear();
             await hideLoader();
           }));
@@ -211,7 +214,10 @@ watch(
           formData.orgPhoneIn = props.dataNode.orgTreePhoneIn;
           formData.orgFax = props.dataNode.orgTreeFax;
           formData.orgLevel = props.dataNode.orgTreeRank;
-          orgLevelOption.value = orgLevelOptionMain.value.slice(1, 4);
+          orgLevelOption.value =
+            props.dataNode.orgTreeRank === "DEPARTMENT"
+              ? orgLevelOptionMain.value
+              : orgLevelOptionMain.value.slice(1, 4);
         }
       }
     }
@@ -221,18 +227,14 @@ watch(
 const tittleName = computed(() => {
   let name = "";
   if (actionType.value === "ADD") {
-    if (level.value === 1) {
+    name =
-      name = "เพิ่มหน่วยงาน";
+      level.value === 0 || level.value === 1
-    } else {
+        ? "เพิ่มหน่วยงาน"
-      name = "เพิ่มส่วนราชการ";
+        : "เพิ่มส่วนราชการ";
-    }
   } else {
-    if (level.value === 0) {
+    name = level.value === 0 ? "แก้ไขหน่วยงาน" : "แก้ไขเพิ่มส่วนราชการ";
-      name = "แก้ไขหน่วยงาน";
-    } else {
-      name = "แก้ไขเพิ่มส่วนราชการ";
-    }
   }
+
   return name;
 });
 </script>

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

@@ -33,6 +33,7 @@ const formData = reactive<any>({
 });
 
 async function fetchDetailTree(id: string, type: string) {
+  showLoader();
   await http
     .get(config.API.orgLevelByid(type.toLocaleLowerCase(), id))
     .then((res) => {
@@ -40,8 +41,9 @@ async function fetchDetailTree(id: string, type: string) {
       formData.orgName = data[`org${type}Name`];
       formData.agencyName = data[`org${type}Name`];
       formData.orgType = data[`org${type}Name`];
-      formData.orgLevel = data[`org${type}Rank`];
+      formData.orgLevel = store.convertType(data[`org${type}Rank`]);
-      formData.status = data[`org${type}Name`];
+      formData.status =
+        store.typeOrganizational === "current" ? "ปัจจุบัน" : "แบบร่าง";
       formData.orgPhoneEx = data[`org${type}PhoneEx`];
       formData.orgPhoneIn = data[`org${type}PhoneIn`];
       formData.orgFax = data[`org${type}Fax`];
@@ -61,10 +63,10 @@ function close() {
 
 watch(
   () => modal.value,
-  () => {
+  async () => {
     if (modal.value == true) {
-      const type = store.checkLevel(orgLevel.value);
+      const type = await store.checkLevel(orgLevel.value);
-      fetchDetailTree(treeId.value, type);
+      await fetchDetailTree(treeId.value, type);
     }
   }
 );

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

@@ -5,7 +5,7 @@ import http from "@/plugins/http";
 import config from "@/app.config";
 
 /** importType*/
-import type { DataActive } from "@/modules/02_organizationalNew/interface/response/organizational";
+import type { OrgTree } from "@/modules/02_organizationalNew/interface/response/organizational";
 
 import TreeView from "@/modules/02_organizationalNew/components/mainTree.vue";
 import TableView from "@/modules/02_organizationalNew/components/tableTree.vue";
@@ -18,7 +18,7 @@ const $q = useQuasar();
 const { showLoader, hideLoader, messageError } = useCounterMixin();
 
 const showData = ref<boolean>(false);
-const nodeTree = ref<any>();
+const nodeTree = ref<OrgTree[]>();
 
 // defineProps<{ dataActive: DataActive }>();
 

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

@@ -5,6 +5,7 @@ import http from "@/plugins/http";
 import config from "@/app.config";
 
 import type { ListMenu } from "@/modules/02_organizationalNew/interface/index/Main";
+import type { OrgTree } from "@/modules/02_organizationalNew/interface/response/organizational";
 
 /** importComponents*/
 import DialogAgency from "@/modules/02_organizationalNew/components/DialogFormAgency.vue";
@@ -77,9 +78,9 @@ const listAdd = ref<ListMenu[]>([
   },
 ]);
 
-const nodeTEST = defineModel<any>("nodeTree", { required: true });
+const nodeTEST = defineModel<OrgTree[]>("nodeTree", { default: [] });
 const filter = ref<string>("");
-const nodes = ref<Array<any>>([]);
+const nodes = ref<Array<OrgTree>>([]);
 const lazy = ref(nodes);
 const expanded = ref<Array<any>>([]);
 const notFound = ref<string>("ไม่พบข้อมูลที่ค้นหา");
@@ -87,137 +88,42 @@ const noData = ref<string>("ไม่มีข้อมูล");
 const selected = ref("");
 const orgLevel = ref<number>(0);
 
-const filterData = (node: any, filter: string) => {
-  // ให้ทาง API ค้นหาให้
-  nodes.value = [
-    {
-      organizationName: "สำนักงานคณะกรรมการข้าราชการกรุงเทพมหานคร",
-      organizationId: "3b86d275-8259-427c-8da7-12813fe482eb",
-      organizationLevel: 0,
-      lazy: true,
-      children: [
-        {
-          organizationName: "กองบริหารทั่วไป",
-          organizationId: "3486d275-8159-427c-8da7-12813fe482eb",
-          organizationLevel: 1,
-        },
-        {
-          organizationName: "กองสรรหาบุคคล",
-          organizationId: "3486d275-8259-427c-8da7-12813fe400eb",
-          organizationLevel: 1,
-        },
-        {
-          organizationName: "สถาบันพัฒนาทรัพยากรบุคคลกรุงเทพมหานคร",
-          organizationId: "3486d275-8259-437c-8da7-12813fe482eb",
-          organizationLevel: 1,
-          children: [
-            {
-              organizationName: "ฝ่ายบริหารงานทั่วไป",
-              organizationId: "3486d275-8259-427c-8da7-12813ff482eb",
-              organizationLevel: 2,
-            },
-            {
-              organizationName: "ส่วนส่งเสริมการพัฒนาทรัพยากรบุคคล",
-              organizationId: "3486d275-8259-427c-8da7-12833fe482eb",
-              organizationLevel: 2,
-            },
-          ],
-        },
-      ],
-    },
-    {
-      organizationName: "สำนักปลัดกรุงเทพมหานคร",
-      organizationId: "3b86d275-8259-427c-8da7-12813fe482ec",
-      organizationLevel: 0,
-    },
-  ];
-
-  // expanded จาก id ได้
-  expanded.value = [
-    "3b86d275-8259-427c-8da7-12813fe482eb",
-    "3486d275-8259-437c-8da7-12813fe482eb",
-  ];
-
-  return node.organizationName && node.organizationName.indexOf(filter) > -1;
-};
-
 const updateSelected = (target: any) => {
   console.log("updateSelected===>", target);
 };
 
-const onLazyLoad = (details: { node: any; key: any; done: any; fail: any }) => {
-  // console.log(details.node);
-  // details.node = nodes.value.filter((e:any) => e.orgRootId === )
-  // if (details.node.orgRootId == "00000000-0000-0000-0000-000000000000") {
-  //   details.done([
-  //     {
-  //       organizationName: "กองบริหารทั่วไป",
-  //       organizationId: "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxx11",
-  //       organizationLevel: 1,
-  //       organizationNo: "00011",
-  //     },
-  //     {
-  //       organizationName: "กองสรรหาบุคคล",
-  //       organizationId: "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxx12",
-  //       organizationLevel: 1,
-  //       organizationNo: "00011",
-  //     },
-  //     {
-  //       organizationName: "สถาบันพัฒนาทรัพยากรบุคคลกรุงเทพมหานคร",
-  //       organizationId: "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxx13",
-  //       organizationLevel: 1,
-  //       organizationNo: "00011",
-  //       children: [
-  //         {
-  //           organizationName: "ฝ่ายบริหารงานทั่วไป",
-  //           organizationId: "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxx131",
-  //           organizationLevel: 2,
-  //           organizationNo: "00011",
-  //           children: [
-  //             {
-  //               organizationName: "กลุ่มงานวิเคราะห์การพัฒนาทรัพยากรบุคคล",
-  //               organizationId: "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxx1311",
-  //               organizationLevel: 3,
-  //             },
-  //           ],
-  //         },
-  //         {
-  //           organizationName: "ส่วนส่งเสริมการพัฒนาทรัพยากรบุคคล",
-  //           organizationId: "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxx14",
-  //           organizationLevel: 2,
-  //         },
-  //       ],
-  //     },
-  //   ]);
-  // } else if (
-  //   details.node.organizationId == "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxx02"
-  // ) {
-  //   details.done([
-  //     {
-  //       organizationName: "สำนักงานการเจ้าหน้าที่",
-  //       organizationId: "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxx21",
-  //       organizationLevel: 1,
-  //     },
-  //   ]);
-  // }
-  // }, 500);
-};
-
 const breakLoop = ref<boolean>(false);
-async function edit(selected: string) {
+async function edit(id: string, type: string, data: any) {
-  console.log("edit node tree id: " + selected);
+  const data2 = {
+    orgName: data[`org${type}Name`],
+    orgShortName: data[`org${type}ShortName`],
+    orgCode: data[`org${type}Code`],
+    orgPhoneEx: data[`org${type}PhoneEx`],
+    orgPhoneIn: data[`org${type}PhoneIn`],
+    orgFax: data[`org${type}Fax`],
+    orgLevel: data[`org${type}Rank`],
+  };
+
   breakLoop.value = false;
 
   // Usage
-  const targetNodeId = selected;
+  const targetNodeId = id;
   const replacementNode = {
-    organizationName: `ชื่อใหม่ ${selected}`,
+    orgTreeName: data2.orgName,
-    organizationId: selected,
+    orgTreeShortName: data2.orgShortName,
+    orgCode: data2.orgCode,
+    orgTreePhoneEx: data2.orgPhoneEx,
+    orgTreePhoneIn: data2.orgPhoneIn,
+    orgTreeFax: data2.orgFax,
+    orgTreeRank: data2.orgLevel,
   };
 
   for (let index = 0; index < nodes.value.length; index++) {
     const element = nodes.value[index];
-    searchAndReplace(element, targetNodeId, replacementNode);
+    if (type !== "edit") {
+      searchAndReplace(element, targetNodeId, replacementNode);
+    } else deleteNode(element, targetNodeId);
+
     console.log("index===>", index);
     console.log("breakLoop===>", breakLoop.value);
     if (breakLoop.value) break;
@@ -226,10 +132,10 @@ async function edit(selected: string) {
 
 function searchAndReplace(
   treeNode: any,
-  organizationId: any,
+  organizationId: string,
   replacementObject: any
 ) {
-  if (treeNode.organizationId === organizationId) {
+  if (treeNode.orgTreeId === organizationId) {
     Object.assign(treeNode, replacementObject);
     breakLoop.value = true;
   } else if (treeNode.children) {
@@ -239,12 +145,35 @@ function searchAndReplace(
   }
 }
 
+function deleteNode(treeNode: any, organizationId: any): boolean {
+  // console.log("tttttttttttttt", treeNode.orgTreeId, organizationId);
+
+  if (treeNode.orgTreeId === organizationId) {
+    console.log(treeNode);
+
+    // ลบ Node โดยการไม่ส่งผลลบ Node ทั้งหมดภายใต้
+    treeNode.children = [];
+
+    breakLoop.value = true;
+  } else if (treeNode.children) {
+    for (let i = 0; i < treeNode.children.length; i++) {
+      const child = treeNode.children[i];
+      if (deleteNode(child, organizationId)) {
+        treeNode.children.splice(i, 1);
+        i--; // ลดค่า i เพราะที่ลบข้อมูล
+      }
+    }
+  }
+
+  return false;
+}
+
 const dialogAgency = ref<boolean>(false);
 const actionType = ref<string>("");
 const dataNode = ref<any>();
 const treeId = ref<string>("");
 
-function onClickAgency(level: number, node: any) {
+function onClickAgency(level: number, node: OrgTree | {}) {
   dialogAgency.value = !dialogAgency.value;
   orgLevel.value = level;
   dataNode.value = node;
@@ -253,12 +182,13 @@ function onClickAgency(level: number, node: any) {
 
 const dialogDetail = ref<boolean>(false);
 function onClickDetail(id: string, level: number) {
+  showLoader();
   treeId.value = id;
   dialogDetail.value = !dialogDetail.value;
   orgLevel.value = level;
 }
 
-async function onClickEdit(node: any) {
+async function onClickEdit(node: OrgTree) {
   dialogAgency.value = !dialogAgency.value;
   actionType.value = "EDIT";
   orgLevel.value = node.orgLevel;
@@ -267,12 +197,15 @@ async function onClickEdit(node: any) {
 
 async function onClickDel(type: number, id: string) {
   const level = store.checkLevel(type);
+
   dialogRemove($q, async () => {
+    // edit(id, "edit", {});
     showLoader();
     await http
       .delete(config.API.orgLevelByid(level.toLocaleLowerCase(), id))
       .then(() => {
         success($q, "ลบข้อมูลสำเร็จ");
+        // edit(id, "edit", {});
       })
       .catch((err) => {
         messageError($q, err);
@@ -291,34 +224,7 @@ watch(
   }
 );
 
-onMounted(async () => {
+onMounted(async () => {});
-  // setTimeout(() => {
-  //   console.log(nodessd.value);
-  // }, 200);
-  // nodes.value = [
-  //   {
-  //     organizationName: "สำนักงานคณะกรรมการข้าราชการกรุงเทพมหานคร",
-  //     organizationId: "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxx01",
-  //     organizationLevel: 0,
-  //     lazy: true,
-  //   },
-  //   {
-  //     organizationName: "สำนักปลัดกรุงเทพมหานคร",
-  //     organizationId: "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxx02",
-  //     organizationLevel: 0,
-  //     lazy: true,
-  //   },
-  //   // {
-  //   //   organizationName: "data empty",
-  //   //   lazy: true,
-  //   // },
-  //   // {
-  //   //   organizationName: "Node is not expandable",
-  //   //   expandable: false,
-  //   //   children: [{ organizationName: "Some node" }],
-  //   // },
-  // ];
-});
 </script>
 
 <template>
@@ -368,11 +274,10 @@ onMounted(async () => {
           selected-color="primary"
           :nodes="lazy"
           node-key="orgTreeId"
-          label-key="orgTreeId"
+          label-key="orgTreeName"
           :filter="filter"
           :no-results-label="notFound"
           :no-nodes-label="noData"
-          :filter-method="filterData"
           v-model:expanded="expanded"
           v-model:selected="selected"
           @update:selected="updateSelected"
@@ -417,13 +322,12 @@ onMounted(async () => {
                     </q-item-section>
                     <div v-if="prop.node.orgLevel === 0">
                       <q-item-section
-                        v-if="
+                        v-if="item.type === 'EDIT' || item.type === 'DEL'"
-                          item.type === 'ADD' ||
-                          item.type === 'EDIT' ||
-                          item.type === 'DEL'
-                        "
                         >{{ item.label }}หน่วยงาน</q-item-section
                       >
+                      <q-item-section v-else-if="item.type === 'ADD'"
+                        >{{ item.label }}ส่วนราชการ</q-item-section
+                      >
                       <q-item-section v-else>{{ item.label }}</q-item-section>
                     </div>
 
@@ -478,6 +382,7 @@ onMounted(async () => {
     :fetchDataTree="props.fetchDataTree"
     v-model:actionType="actionType"
     :dataNode="dataNode"
+    :edit="edit"
   />
 
   <!-- รายละเอียดโครงสร้าง -->

src/modules/02_organizationalNew/interface/response/organizational.ts

@@ -5,4 +5,22 @@ interface DataActive {
   draftName: string;
 }
 
-export type { DataActive };
+interface nodes {
+  orgTreeId: string;
+  orgRootId: string;
+  orgLevel: number;
+  orgTreeName: string;
+  orgTreeShortName: string;
+  orgTreeCode: string;
+  orgCode: string;
+  orgTreeRank: string;
+  orgTreeOrder: number | null;
+  orgRootCode: string;
+  orgTreePhoneEx: string;
+  orgTreePhoneIn: string;
+  orgTreeFax: string;
+  orgRevisionId: string;
+  children: OrgTree[];
+}
+
+export type { DataActive, OrgTree };

src/modules/02_organizationalNew/store/organizational.ts

@@ -32,6 +32,21 @@ export const useOrganizational = defineStore("organizationalStore", () => {
     }
   }
 
+  function convertType(type: string) {
+    switch (type) {
+      case "DEPARTMENT":
+        return "ระดับสำนัก";
+      case "OFFICE":
+        return "ระดับกอง/สำนักงาน/ส่วนราชการ/โรงพยาบาล/เทียบเท่ากอง";
+      case "DIVISION":
+        return "ระดับส่วน/กลุ่มภารกิจ";
+      case "SECTION":
+        return "ระดับฝ่าย/กลุ่มงาน";
+      default:
+        return "-";
+    }
+  }
+
   return {
     typeOrganizational,
     statusView,
@@ -39,6 +54,7 @@ export const useOrganizational = defineStore("organizationalStore", () => {
     //
     fetchDataActive,
     checkLevel,
+    convertType,
     draftId,
     activeId,
   };