no message

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

@@ -23,29 +23,16 @@ const { dialogConfirm, showLoader, success, hideLoader, messageError } =
   useCounterMixin();
 
 const modal = defineModel<boolean>("sortAgency", { required: true });
+const modalSort = defineModel<Array<any>>("data", { required: true });
+const modalType = defineModel<number>("type", { required: true });
 const rows = ref<any>([]);
 const columns = ref<QTableProps["columns"]>([
   {
-    name: "id",
+    name: "name",
     required: true,
-    label: "ชื่อเครื่องราชฯ",
+    label: "ชื่อ",
     align: "left",
-    field: "id",
-    sortable: true,
-  },
-  {
-    name: "shortName",
-    align: "center",
-    label: "ชื่อย่อ",
-    field: "shortName",
-  },
-  {
-    name: "insigniaType",
-    align: "left",
-    label: "ลำดับชั้นเครื่องราชฯ",
-    field: "insigniaType",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
+    field: "name",
     sortable: true,
   },
 ]);
@@ -61,7 +48,7 @@ function onDropRow(from: any, to: any) {
 function save() {
   dialogConfirm($q, () => {
     const data = rows.value;
-    const dataId = data.map((item: any) => item.id);
+    const dataId = data.map((item: any) => item.orgTreeId);
     console.log(dataId);
   });
 }
@@ -69,20 +56,32 @@ watch(
   () => modal.value,
   () => {
     if (modal.value == true) {
-      const dataList = [
-        {
-          id: "x1",
-          shortName: "test1",
-          insigniaType: "test1",
-        },
-        {
-          id: "x2",
-          shortName: "test2",
-          insigniaType: "test2",
-        },
-      ];
+      const dataStandant = modalSort.value;
+      if (modalType.value === 0) {
+        const mappedData = dataStandant.map((item: any) => ({
+          orgLevel: item.orgLevel,
+          name: `${item.orgTreeName} (${item.orgTreeShortName})`,
+          orgRevisionId: item.orgRevisionId,
+          orgTreeId: item.orgTreeId,
+          orgTreeName: item.orgTreeName,
+          orgTreeShortName: item.orgTreeShortName,
+        }));
+        rows.value = mappedData;
+        console.log("row", rows.value);
+      } else if (modalType.value === 1) {
+        const mappedData = dataStandant.map((item: any) => ({
+          name: `${item.orgTreeName} (${item.orgTreeShortName})`,
+          orgRootId: item.orgRootId,
+          orgTreeId: item.orgTreeId,
+          orgLevel: item.orgLevel,
+          orgTreeName: item.orgTreeName,
+          orgTreeShortName: item.orgTreeShortName,
+          orgRevisionId: item.orgRevisionId,
+        }));
+        rows.value = mappedData;
 
-      rows.value = dataList;
+        console.log("row", dataStandant);
+      }
     }
   }
 );
@@ -113,7 +112,7 @@ watch(
             :rows="rows"
             :columns="columns"
             :rows-per-page-options="[100]"
-            row-key="name"
+            row-key="orgTreeId"
             hide-bottom
             hide-pagination
             hide-header

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

@@ -10,6 +10,7 @@ import type { OrgTree } from "@/modules/02_organizationalNew/interface/response/
 /** importComponents*/
 import DialogAgency from "@/modules/02_organizationalNew/components/DialogFormAgency.vue";
 import DialogStructureDetail from "@/modules/02_organizationalNew/components/StructureDetail.vue";
+import DialogSortAgency from "@/modules/02_organizationalNew/components/DialogSortAgency.vue";
 
 /** importStore*/
 import { useOrganizational } from "@/modules/02_organizationalNew/store/organizational";
@@ -80,7 +81,9 @@ const listAdd = ref<ListMenu[]>([
 
 const nodeTEST = defineModel<OrgTree[]>("nodeTree", { default: [] });
 const filter = ref<string>("");
+const level = ref<number>(0);
 const nodes = ref<Array<OrgTree>>([]);
+const dataSort = ref<Array<any>>([]);
 const lazy = ref(nodes);
 const expanded = ref<Array<any>>([]);
 const notFound = ref<string>("ไม่พบข้อมูลที่ค้นหา");
@@ -165,6 +168,7 @@ function deleteNode(treeNode: any, organizationId: any): boolean {
   return false;
 }
 
+const modalSortAgency = ref<boolean>(false);
 const dialogAgency = ref<boolean>(false);
 const actionType = ref<string>("");
 const dataNode = ref<any>();
@@ -214,6 +218,54 @@ async function onClickDel(type: number, id: string) {
   });
 }
 
+function onClickSort(type: number, id: string) {
+  modalSortAgency.value = true;
+  level.value = type;
+  if (type === 0) {
+    const dataList = nodes.value;
+    const dataMap = dataList.map((item: any) => ({
+      orgTreeId: item.orgTreeId,
+      orgLevel: item.orgLevel,
+      orgTreeName: item.orgTreeName,
+      orgTreeShortName: item.orgTreeShortName,
+      orgRevisionId: item.orgRevisionId,
+    }));
+
+    dataSort.value = dataMap;
+  } else if (type === 1) {
+    const dataList = nodes.value;
+    const dataMap = dataList.map((item: any) => ({
+      orgTreeId: item.orgTreeId,
+      orgRevisionId: item.orgRevisionId,
+      children: item.children,
+    }));
+    const dataChild = dataMap
+      .filter((item: any) => item.orgTreeId === id)
+      .reduce((acc: any, item: any) => {
+        return acc.concat(
+          item.children.map((child: any) => ({
+            orgRootId: child.orgRootId,
+            orgTreeId: child.orgTreeId,
+            orgLevel: child.orgLevel,
+            orgTreeName: child.orgTreeName,
+            orgTreeShortName: child.orgTreeShortName,
+            orgRevisionId: child.orgRevisionId,
+          }))
+        );
+      }, []);
+    dataSort.value = dataChild;
+  } else if (type === 2) {
+    
+    const dataList = nodes.value;
+    const dataMap = dataList.map((item: any) => ({
+      orgTreeId: item.orgTreeId,
+      children: item.children,
+    }))
+
+    console.log(dataMap)
+
+  }
+}
 watch(
   () => nodeTEST.value,
   () => {
@@ -328,6 +380,8 @@ onMounted(async () => {});
                         ? onClickDetail(prop.node.orgTreeId, prop.node.orgLevel)
                         : item.type === 'DEL'
                         ? onClickDel(prop.node.orgLevel, prop.node.orgTreeId)
+                        : item.type === 'SORT'
+                        ? onClickSort(prop.node.orgLevel, prop.node.orgRootId)
                         : null
                     "
                   >
@@ -451,6 +505,12 @@ onMounted(async () => {});
     v-model:treeId="treeId"
     v-model:orgLevel="orgLevel"
   />
+
+  <DialogSortAgency
+    v-model:sort-agency="modalSortAgency"
+    v-model:data="dataSort"
+    v-model:type="level"
+  />
 </template>
 
 <style scoped></style>