From ad8cf4553aa69148afa854d74cf00b989f29b4e1 Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Wed, 31 Jan 2024 12:02:11 +0700
Subject: [PATCH 1/2] load

---
 .../components/DialogFormAgency.vue           |   8 +-
 .../components/DialogFormPosition.vue         |  22 +++-
 .../components/mainTree.vue                   |   4 +-
 .../components/tableTree.vue                  | 110 +++++++++++++++++-
 4 files changed, 136 insertions(+), 8 deletions(-)

diff --git a/src/modules/02_organizationalNew/components/DialogFormAgency.vue b/src/modules/02_organizationalNew/components/DialogFormAgency.vue
index 5392d33fc..f6ecc0d64 100644
--- a/src/modules/02_organizationalNew/components/DialogFormAgency.vue
+++ b/src/modules/02_organizationalNew/components/DialogFormAgency.vue
@@ -151,8 +151,8 @@ function onSubmit() {
         })
         .finally(async () => {
           await props.fetchDataTree?.();
-          await closeClear();
-          await hideLoader();
+          closeClear();
+          hideLoader();
         });
     } else {
       props.dataNode &&
@@ -175,8 +175,8 @@ function onSubmit() {
           })
           .finally(async () => {
             // await props.fetchDataTree?.();
-            await closeClear();
-            await hideLoader();
+             closeClear();
+             hideLoader();
           }));
     }
   });
diff --git a/src/modules/02_organizationalNew/components/DialogFormPosition.vue b/src/modules/02_organizationalNew/components/DialogFormPosition.vue
index c4c58b053..46dc3330a 100644
--- a/src/modules/02_organizationalNew/components/DialogFormPosition.vue
+++ b/src/modules/02_organizationalNew/components/DialogFormPosition.vue
@@ -211,7 +211,27 @@ function validateFormPositionEdit() {
 /** ฟังชั่น บันทึก */
 function onSubmit() {
   dialogConfirm($q, () => {
-    console.log(formData);
+    const positionsData = rows.value.map((e) => ({
+      posDictName: e.positionName, //ชื่อตำแหน่งในสายงาน (ชื่อตำแหน่ง)
+      posDictField: e.positionField, //สายงาน
+      posTypeId: e.positionName, //*ประเภทตำแหน่ง
+      posLevelId: e.positionName, //*ระดับตำแหน่ง
+      posExecutiveId: e.positionName, //ตำแหน่งทางการบริหาร
+      posDictExecutiveField: e.positionName, //ด้านทางการบริหาร
+      posDictArea: e.positionArea, //ด้าน/สาขา
+    }));
+    const body = {
+      posMasterNoPrefix: formData.prefixNo, //*Prefix นำหน้าเลขที่ตำแหน่ง เป็น Optional (ไม่ใช่อักษรย่อของหน่วยงาน/ส่วนราชการ)
+      posMasterNo: Number(formData.positionNo), //*เลขที่ตำแหน่ง เป็นตัวเลข
+      posMasterNoSuffix: formData.suffixNo, //Suffix หลังเลขที่ตำแหน่ง เช่น ช.
+      // orgRootId: Guid, //Id สำนัก
+      // orgChild1Id: Guid, //Id โครงสร้างระดับ1
+      // orgChild2Id: Guid, //Id โครงสร้างระดับ2
+      // orgChild3Id: Guid, //Id โครงสร้างระดับ3
+      // orgChild4Id: Guid, //Id โครงสร้างระดับ4
+      positions: [positionsData],
+    };
+    console.log(body);
   });
 }
 /** ฟังชั่น บันทึก */
diff --git a/src/modules/02_organizationalNew/components/mainTree.vue b/src/modules/02_organizationalNew/components/mainTree.vue
index 84afe164a..cbb1e22d7 100644
--- a/src/modules/02_organizationalNew/components/mainTree.vue
+++ b/src/modules/02_organizationalNew/components/mainTree.vue
@@ -208,8 +208,8 @@ async function onClickDel(type: number, id: string) {
         messageError($q, err);
       })
       .finally(async () => {
-        await props.fetchDataTree?.();
-        await hideLoader();
+         props.fetchDataTree?.();
+         hideLoader();
       });
   });
 }
diff --git a/src/modules/02_organizationalNew/components/tableTree.vue b/src/modules/02_organizationalNew/components/tableTree.vue
index 24d23e211..e433ede5a 100644
--- a/src/modules/02_organizationalNew/components/tableTree.vue
+++ b/src/modules/02_organizationalNew/components/tableTree.vue
@@ -101,6 +101,13 @@ const rows = ref<any>([
     levelPositoion: "ชำนาญการ / ?",
     isStatus: "ไม่มี",
   },
+  {
+    noPosition: "สกง.2",
+    namePosition: "นักทรัพยากรบุคคล",
+    typePosition: "ทั่วไป",
+    levelPositoion: "ชำนาญการ / ?",
+    isStatus: "ไม่มี",
+  },
 ]);
 
 const dialogPosition = ref<boolean>(false);
@@ -173,7 +180,7 @@ function onClickViewDetail() {
       ref="table"
       :columns="columns"
       :rows="rows"
-      row-key="id"
+      row-key="noPosition"
       flat
       bordered
       :paging="true"
@@ -184,6 +191,7 @@ function onClickViewDetail() {
     >
       <template v-slot:header="props">
         <q-tr :props="props">
+          <q-th auto-width></q-th>
           <q-th v-for="col in props.cols" :key="col.name" :props="props">
             <span class="text-weight-medium">{{ col.label }}</span>
           </q-th>
@@ -192,6 +200,16 @@ function onClickViewDetail() {
       </template>
       <template v-slot:body="props">
         <q-tr :props="props" class="cursor-pointer">
+          <q-td>
+            <q-btn
+              size="sm"
+              color="primary"
+              round
+              dense
+              @click="props.expand = !props.expand"
+              :icon="props.expand ? 'remove' : 'add'"
+            />
+          </q-td>
           <q-td v-for="col in props.cols" :key="col.name" :props="props">
             <div v-if="col.name == 'no'">
               {{ props.rowIndex + 1 }}
@@ -233,6 +251,96 @@ function onClickViewDetail() {
             </q-btn>
           </q-td>
         </q-tr>
+
+        <q-tr v-show="props.expand" :props="props" >
+          <q-td colspan="100%">
+            <div class="text-left q-pa-md">
+              <div class="col-12">
+                <d-table
+                  ref="table"
+                  :columns="columns"
+                  :rows="rows"
+                  row-key="noPosition"
+                  flat
+                  bordered
+                  :paging="true"
+                  dense
+                  class="custom-header-table"
+                  :rows-per-page-options="[10, 25, 50, 100]"
+                  :filter="filter"
+                >
+                  <template v-slot:header="props">
+                    <q-tr :props="props">
+                      <q-th
+                        v-for="col in props.cols"
+                        :key="col.name"
+                        :props="props"
+                      >
+                        <span class="text-weight-medium">{{ col.label }}</span>
+                      </q-th>
+                      <q-th auto-width></q-th>
+                    </q-tr>
+                  </template>
+                  <template v-slot:body="props">
+                    <q-tr :props="props" class="cursor-pointer">
+                      <q-td
+                        v-for="col in props.cols"
+                        :key="col.name"
+                        :props="props"
+                      >
+                        <div v-if="col.name == 'no'">
+                          {{ props.rowIndex + 1 }}
+                        </div>
+
+                        <div v-else>
+                          {{ col.value }}
+                        </div>
+                      </q-td>
+                      <q-td>
+                        <q-btn
+                          flat
+                          dense
+                          icon="mdi-dots-vertical"
+                          class="q-pa-none q-ml-xs"
+                          color="grey-13"
+                        >
+                          <q-menu>
+                            <q-list
+                              dense
+                              style="min-width: 200px"
+                              v-for="(item, index) in listMenu"
+                              :key="index"
+                            >
+                              <q-item
+                                clickable
+                                v-close-popup
+                                @click="
+                                  item.type === 'VIEWDETIAL'
+                                    ? onClickViewDetail()
+                                    : null
+                                "
+                              >
+                                <q-item-section avatar>
+                                  <q-icon
+                                    :color="item.color"
+                                    :name="item.icon"
+                                  />
+                                </q-item-section>
+                                <q-item-section>{{
+                                  item.label
+                                }}</q-item-section>
+                              </q-item>
+                            </q-list>
+                          </q-menu>
+                        </q-btn>
+                      </q-td>
+                    </q-tr>
+                  </template>
+                </d-table>
+              </div>
+            </div>
+          </q-td>
+        </q-tr>
       </template>
       <!-- <template v-slot:pagination="scope">
       <q-pagination

From 5fc78f8090d2d6727aba4597cc2d55e8e9d86205 Mon Sep 17 00:00:00 2001
From: waruneeta <warunee.auy@gmail.com>
Date: Wed, 31 Jan 2024 15:32:35 +0700
Subject: [PATCH 2/2] example search tree

---
 src/modules/02_organizationalNew/router.ts    |  12 ++
 .../views/ExampleSearchTree.vue               | 165 ++++++++++++++++++
 2 files changed, 177 insertions(+)
 create mode 100644 src/modules/02_organizationalNew/views/ExampleSearchTree.vue

diff --git a/src/modules/02_organizationalNew/router.ts b/src/modules/02_organizationalNew/router.ts
index 32b16995e..22793bd7f 100644
--- a/src/modules/02_organizationalNew/router.ts
+++ b/src/modules/02_organizationalNew/router.ts
@@ -1,4 +1,5 @@
 const mainPage = () => import("@/modules/02_organizationalNew/views/main.vue");
+const testPage = () => import("@/modules/02_organizationalNew/views/ExampleSearchTree.vue");
 
 export default [
   {
@@ -11,4 +12,15 @@ export default [
       Role: "organization",
     },
   },
+  {
+    path: "/organization-new/test",
+    name: "organizationalNewTest",
+    component: testPage,
+    meta: {
+      Auth: true,
+      Key: [7],
+      Role: "organization",
+    },
+  },
+
 ];
diff --git a/src/modules/02_organizationalNew/views/ExampleSearchTree.vue b/src/modules/02_organizationalNew/views/ExampleSearchTree.vue
new file mode 100644
index 000000000..49bebd881
--- /dev/null
+++ b/src/modules/02_organizationalNew/views/ExampleSearchTree.vue
@@ -0,0 +1,165 @@
+<script setup lang="ts">
+import { ref, onMounted, watch } from "vue";
+import { useQuasar } from "quasar";
+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";
+
+/** importStore*/
+import { useOrganizational } from "@/modules/02_organizationalNew/store/organizational";
+import { useCounterMixin } from "@/stores/mixin";
+
+const store = useOrganizational();
+const { dialogRemove, showLoader, hideLoader, messageError, success } =
+  useCounterMixin();
+const $q = useQuasar();
+
+const filter = ref<string>("");
+const nodes = ref<Array<any>>([]);
+const lazy = ref(nodes);
+const expanded = ref<Array<any>>([]);
+const notFound = ref<string>("ไม่พบข้อมูลที่ค้นหา");
+const noData = ref<string>("ไม่มีข้อมูล");
+const selected = ref("");
+
+const idVal = ref("");
+async function fetchDataTree(id: string) {
+  showLoader();
+  await http
+    .get(config.API.orgByid(id.toString()))
+    .then((res) => {
+      const data = res.data.result;
+      nodes.value = data;
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+const breakLoop = ref<boolean>(false);
+const dataObject = ref([]);
+async function onSort(orgRootId: string) {
+  if (orgRootId) {
+    idVal.value = 'children => '+orgRootId;
+    breakLoop.value = false;
+
+    const targetNodeId = orgRootId;
+
+    for (let index = 0; index < nodes.value.length; index++) {
+      const element = nodes.value[index];
+      searchAndReplace(element, targetNodeId);
+      if (breakLoop.value) break;
+    }
+  } else {
+    idVal.value = 'root';
+  }
+}
+
+function searchAndReplace(treeNode: any, organizationId: string) {
+  if (treeNode.orgTreeId === organizationId) {
+    dataObject.value = treeNode.children;
+    breakLoop.value = true;
+  } else if (treeNode.children) {
+    for (const child of treeNode.children) {
+      searchAndReplace(child, organizationId);
+    }
+  }
+}
+
+const listAdd = ref<ListMenu[]>([
+  {
+    label: "จัดลำดับ",
+    icon: "filter_list",
+    type: "SORT",
+    color: "green-7",
+  },
+]);
+
+onMounted(async () => {
+  await fetchDataTree("a449eac0-93a5-4ccc-8fbc-2974ca8ee61b");
+});
+</script>
+
+<template>
+  <div class="col-12 q-py-md q-px-lg">
+    <q-tree
+      class="q-pa-md q-gutter-sm"
+      dense
+      default-expand-all
+      selected-color="primary"
+      :nodes="lazy"
+      node-key="orgTreeId"
+      label-key="orgTreeName"
+      :filter="filter"
+      :no-results-label="notFound"
+      :no-nodes-label="noData"
+      v-model:expanded="expanded"
+      v-model:selected="selected"
+    >
+      <template v-slot:default-header="prop">
+        <!-- {{ prop.node.orgTreeName }} -->
+
+        <div class="row items-center q-px-xs q-pt-xs q-gutter-sm">
+          <!--แสดงชื่อแผนก พิมพ์ตัวหนา คลิกแล้วกาง/หุบ Tree-->
+          <div>
+            <div class="text-weight-medium">
+              {{ prop.node.orgTreeName }}
+            </div>
+            <div class="text-weight-light">
+              {{ prop.node.orgCode == null ? null : prop.node.orgCode }}
+              {{
+                prop.node.orgTreeShortName == null
+                  ? null
+                  : prop.node.orgTreeShortName
+              }}
+            </div>
+          </div>
+        </div>
+
+        <q-btn
+          flat
+          dense
+          icon="mdi-dots-vertical"
+          class="q-pa-none q-ml-xs"
+          color="grey-13"
+        >
+          <q-menu>
+            <q-list
+              dense
+              v-for="(item, index) in prop.node.orgLevel === 4
+                ? listAdd.slice(1, 6)
+                : listAdd"
+              :key="index"
+              style="min-width: 100px"
+            >
+              <q-item
+                clickable
+                v-close-popup
+                @click="onSort(prop.node.orgRootId)"
+              >
+                <q-item-section avatar>
+                  <q-icon :color="item.color" :name="item.icon" />
+                </q-item-section>
+                <div>
+                  <q-item-section> {{ item.label }}หน่วยงาน </q-item-section>
+                </div>
+              </q-item>
+            </q-list>
+          </q-menu>
+        </q-btn>
+      </template>
+    </q-tree>
+
+    <h5>orgRootId = {{ idVal }}</h5>
+    <div>
+      {{ dataObject }}
+    </div>
+  </div>
+</template>
+
+<style scoped></style>