From 701355ed5705f86bfea66d7b0c705443d381add7 Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Fri, 21 Jul 2023 14:25:01 +0700
Subject: [PATCH] expanded  tree

---
 .../components/PersonalList/OrgTree.vue       | 325 +++++++++---------
 .../components/PersonalList/Table.vue         |   5 +-
 2 files changed, 173 insertions(+), 157 deletions(-)

diff --git a/src/modules/05_placement/components/PersonalList/OrgTree.vue b/src/modules/05_placement/components/PersonalList/OrgTree.vue
index 5d2f99365..a2f2055b1 100644
--- a/src/modules/05_placement/components/PersonalList/OrgTree.vue
+++ b/src/modules/05_placement/components/PersonalList/OrgTree.vue
@@ -58,6 +58,7 @@ const fetchPublishFile = async () => {
 // โหลดข้อมูลโครงสร้างจาก json
 const treeData = ref<Array<any>>([]);
 const loadTreeData = async () => {
+  expanded.value = [];
   await http
     .get(`${config.s3ClusterUrl}${selectedFile.value}`)
     .then((res: any) => {
@@ -126,20 +127,20 @@ const myFilterMethod = (node: any, filter: string) => {
     // ((node.name && node.name == null) || !node.name) &&
     (node.name && node.name.indexOf(filt) > -1) ||
     (node.organizationName && node.organizationName.indexOf(filt) > -1) ||
-      (node.positionNum && node.positionNum.indexOf(filt) > -1) ||
-      (node.positionName && node.positionName.indexOf(filt) > -1) ||
-      (node.governmentCode &&
-        node.governmentCode.toString().indexOf(filt) > -1) ||
-      (node.agency && node.agency.indexOf(filt) > -1) ||
-      (node.government && node.government.indexOf(filt) > -1) ||
-      (node.department && node.department.indexOf(filt) > -1) ||
-      (node.pile && node.pile.indexOf(filt) > -1) ||
-      (node.organizationShortName &&
-        node.organizationShortName.indexOf(filt) > -1) ||
-      (node.positionSideName && node.positionSideName.indexOf(filt) > -1) ||
-      (node.executivePosition && node.executivePosition.indexOf(filt) > -1) ||
-      (node.executivePositionSide &&
-        node.executivePositionSide.indexOf(filt) > -1) ||
+    (node.positionNum && node.positionNum.indexOf(filt) > -1) ||
+    (node.positionName && node.positionName.indexOf(filt) > -1) ||
+    (node.governmentCode &&
+      node.governmentCode.toString().indexOf(filt) > -1) ||
+    (node.agency && node.agency.indexOf(filt) > -1) ||
+    (node.government && node.government.indexOf(filt) > -1) ||
+    (node.department && node.department.indexOf(filt) > -1) ||
+    (node.pile && node.pile.indexOf(filt) > -1) ||
+    (node.organizationShortName &&
+      node.organizationShortName.indexOf(filt) > -1) ||
+    (node.positionSideName && node.positionSideName.indexOf(filt) > -1) ||
+    (node.executivePosition && node.executivePosition.indexOf(filt) > -1) ||
+    (node.executivePositionSide &&
+      node.executivePositionSide.indexOf(filt) > -1) ||
     (node.positionLevel && node.positionLevel.indexOf(filt) > -1)
   );
 };
@@ -361,8 +362,10 @@ const checkPosition = (val: string) => {
   return num;
 };
 const personal = ref<any>();
+const expanded = ref<string[]>([]);
 
 watch(props, () => {
+  expanded.value = [];
   const dataPersonal = props.personal;
   if (dataPersonal) {
     dataPersonal.map((data: any) => {
@@ -373,26 +376,37 @@ watch(props, () => {
 
   // console.log("draft===>", personal.value.draft);
 
-  if (personal.value.draft === true) {
+  if (personal.value.draft === false) {
     // const findData = dataRespone.value.find(findByPerson);
     let findData: any = null;
+    console.log(dataRespone.value);
+
     dataRespone.value.map((x: any) => {
       findData = findByPerson(x);
       if (findData != null) {
         console.log("findData===>", findData);
-        selectedPosition(findData)
+        selectedPosition(findData);
+        for (let i = 3; i <= findData.keyId.length; i += 2) {
+          expanded.value.push(findData.keyId.slice(0, i));
+        }
       }
-    })
+    });
     // loadTreeData();
     // selectedPosition(findData.children.children.children)
   }
 });
 
-function findByPerson(element: any) {
+function findByPerson(element: any): any {
   // console.log("searchTree element===>", element)
-  if (element.positionNumId && element.positionLineId === personal.value.positionLineId &&
+  if (
+    element.positionNumId &&
+    element.positionLineId === personal.value.positionLineId &&
     element.positionTypeId === personal.value.positionTypeId &&
-    element.positionNumId === personal.value.posNoId
+    element.positionNumId === personal.value.posNoId &&
+    (element.positionLevelObj === null ||
+      element.positionLevelObj[0].Id === personal.value.positionLevelId) &&
+    (element.positionSideNameObj === null ||
+      element.positionSideNameObj[0].Id === personal.value.positionPathSideId)
   ) {
     return element;
   } else if (element.children) {
@@ -408,153 +422,156 @@ function findByPerson(element: any) {
 </script>
 
 <template>
-                                                        <q-dialog v-model="props.modal" persistent>
-                                                                          <q-card style="width: 900px; max-width: 80vw">
-                                                                        <q-form ref="myFormPosition">
-                                                                          <DialogHeader title="เลือกหน่วยงานที่รับบรรจุ" :close="closeModal" />
-                                                                          <q-separator />
-                                                                          <q-card-section class="q-pa-sm bg-grey-1">
-                                                                            <div class="row col-12 q-col-gutter-sm">
-                                                                              <div class="col-xs-12 col-sm-7 row">
-                                                                                <q-card flat bordered class="fit q-pa-sm">
-                                                                                  <q-scroll-area visible style="height: 70vh">
-                                                                                    <q-input
-                                                                                      outlined
-                                                                                      dense
-                                                                                      ref="filterRef"
-                                                                                      v-model="search"
-                                                                                      placeholder="ค้นหา"
-                                                                                      class="q-mb-sm"
-                                                                                    >
-                                                                                      <template v-slot:append>
-                                                                                        <q-icon name="mdi-magnify" />
-                                                                                      </template>
-                                                                                    </q-input>
-                                                                                    <div class="q-pa-sm q-gutter-sm">
-                                                                                      <q-tree
-                                                                                        no-transition
-                                                                                        dense
-                                                                                        :nodes="treeData"
-                                                                                        node-key="keyId"
-                                                                                        :filter="search"
-                                                                                        :no-results-label="notFound"
-                                                                                        :no-nodes-label="noData"
-                                                                                        :filter-method="myFilterMethod"
-                                                                                      >
-                                                                                        <template v-slot:header-organization="prop">
-                                                                                          <div class="col">
-                                                                                            <div
-                                                                                              class="row items-center q-px-xs q-pt-xs q-gutter-sm"
-                                                                                            >
-                                                                                              <!--แสดงชื่อแผนก พิมพ์ตัวหนา คลิกแล้วกาง/หุบ Tree-->
-                                                                                              <div class="text-weight-medium">
-                                                                                                {{ prop.node.organizationName }}
-                                                                                              </div>
+  <q-dialog v-model="props.modal" persistent>
+    <q-card style="width: 900px; max-width: 80vw">
+      <q-form ref="myFormPosition">
+        <DialogHeader title="เลือกหน่วยงานที่รับบรรจุ" :close="closeModal" />
+        <q-separator />
+        <q-card-section class="q-pa-sm bg-grey-1">
+          <div class="row col-12 q-col-gutter-sm">
+            <div class="col-xs-12 col-sm-7 row">
+              <q-card flat bordered class="fit q-pa-sm">
+                <q-scroll-area visible style="height: 70vh">
+                  <q-input
+                    outlined
+                    dense
+                    ref="filterRef"
+                    v-model="search"
+                    placeholder="ค้นหา"
+                    class="q-mb-sm"
+                  >
+                    <template v-slot:append>
+                      <q-icon name="mdi-magnify" />
+                    </template>
+                  </q-input>
+                  <div class="q-pa-sm q-gutter-sm">
+                    <q-tree
+                      no-transition
+                      dense
+                      :nodes="treeData"
+                      node-key="keyId"
+                      :filter="search"
+                      :no-results-label="notFound"
+                      :no-nodes-label="noData"
+                      :filter-method="myFilterMethod"
+                      v-model:expanded="expanded"
+                    >
+                      <template v-slot:header-organization="prop">
+                        <div class="col">
+                          <div
+                            class="row items-center q-px-xs q-pt-xs q-gutter-sm"
+                          >
+                            <!--แสดงชื่อแผนก พิมพ์ตัวหนา คลิกแล้วกาง/หุบ Tree-->
+                            <div class="text-weight-medium">
+                              {{ prop.node.organizationName }}
+                            </div>
 
-                                                                                              <!--แสดง Total Count PositionNum-->
-                                                                                              <!-- <q-badge rounded color="grey-2" text-color="dark"
+                            <!--แสดง Total Count PositionNum-->
+                            <!-- <q-badge rounded color="grey-2" text-color="dark"
                                                             :label="prop.node.totalPositionCount" /> -->
-                                                                                              <q-badge
-                                                                                                v-if="prop.node.totalPositionVacant > 0"
-                                                                                                rounded
-                                                                                                color="red"
-                                                                                                outline
-                                                                                                :label="prop.node.totalPositionVacant"
-                                                                                              />
+                            <q-badge
+                              v-if="prop.node.totalPositionVacant > 0"
+                              rounded
+                              color="red"
+                              outline
+                              :label="prop.node.totalPositionVacant"
+                            />
 
-                                                                                              <q-space />
-                                                                                            </div>
-                                                                                            <div class="col items-center q-px-xs q-pt-xs">
-                                                                                              <div class="text-weight-medium text-grey-7">
-                                                                                                {{ prop.node.governmentCode }}
-                                                                                                {{ prop.node.organizationShortName }}
-                                                                                              </div>
-                                                                                            </div>
-                                                                                          </div>
-                                                                                        </template>
+                            <q-space />
+                          </div>
+                          <div class="col items-center q-px-xs q-pt-xs">
+                            <div class="text-weight-medium text-grey-7">
+                              {{ prop.node.governmentCode }}
+                              {{ prop.node.organizationShortName }}
+                            </div>
+                          </div>
+                        </div>
+                      </template>
 
-                                                                                        <template v-slot:header-person="prop">
-                                                                                          <q-item
-                                                                                            clickable
-                                                                                            :active="selected == prop.node.keyId"
-                                                                                            @click="selectedPosition(prop.node)"
-                                                                                            :disable="prop.node.name != null ||
-                                                                                              checkPosition(prop.node.positionNumId) != -1
-                                                                                              "
-                                                                                            active-class="my-list-link text-primary text-weight-medium"
-                                                                                            class="row items-center text-dark q-py-xs q-pl-sm rounded-borders my-list"
-                                                                                          >
-                                                                                            <img
-                                                                                              v-if="prop.node.avatar == '' ||
-                                                                                                prop.node.avatar ==
-                                                                                                'https://cdn.quasar.dev/img/boy-avatar.png'
-                                                                                                "
-                                                                                              src="@/assets/avatar_user.jpg"
-                                                                                              class="col-xs-1 col-sm-2"
-                                                                                              style="
+                      <template v-slot:header-person="prop">
+                        <q-item
+                          clickable
+                          :active="selected == prop.node.keyId"
+                          @click="selectedPosition(prop.node)"
+                          :disable="
+                            prop.node.name != null ||
+                            checkPosition(prop.node.positionNumId) != -1
+                          "
+                          active-class="my-list-link text-primary text-weight-medium"
+                          class="row items-center text-dark q-py-xs q-pl-sm rounded-borders my-list"
+                        >
+                          <img
+                            v-if="
+                              prop.node.avatar == '' ||
+                              prop.node.avatar ==
+                                'https://cdn.quasar.dev/img/boy-avatar.png'
+                            "
+                            src="@/assets/avatar_user.jpg"
+                            class="col-xs-1 col-sm-2"
+                            style="
                               width: 28px;
                               height: 28px;
                               border-radius: 50%;
                             "
-                                                                                            />
-                                                                                            <img
-                                                                                              v-else
-                                                                                              :src="prop.node.avatar"
-                                                                                              class="col-xs-1 col-sm-2"
-                                                                                              style="
+                          />
+                          <img
+                            v-else
+                            :src="prop.node.avatar"
+                            class="col-xs-1 col-sm-2"
+                            style="
                               width: 28px;
                               height: 28px;
                               border-radius: 50%;
                             "
-                                                                                            />
-                                                                                            <!--=====ตำแหน่งว่าง สีแดง=====-->
-                                                                                            <div
-                                                                                              v-if="prop.node.name == null"
-                                                                                              class="q-px-sm text-weight-medium text-red"
-                                                                                            >
-                                                                                              ว่าง
-                                                                                            </div>
-                                                                                            <!--=====หัวหน้า สีเขียว=====-->
-                                                                                            <div v-else-if="prop.node.positionLeaderFlag">
-                                                                                              <div
-                                                                                                class="q-px-sm text-weight-medium text-primary"
-                                                                                              >
-                                                                                                {{ prop.node.name }}
-                                                                                              </div>
-                                                                                            </div>
-                                                                                            <!--=====ลูกน้อง สีปกติ=====-->
-                                                                                            <div v-else>
-                                                                                              <div class="q-px-sm text-weight-medium">
-                                                                                                {{ prop.node.name }}
-                                                                                              </div>
-                                                                                            </div>
-                                                                                            <!--ต่อท้ายชื่อคน แสดงสีปกติ-->
-                                                                                            <div class="q-pr-sm">
-                                                                                              {{ prop.node.positionName }}
-                                                                                            </div>
-                                                                                            <div class="q-pr-sm">
-                                                                                              {{ prop.node.positionNum }}
-                                                                                            </div>
-                                                                                            <div class="q-pr-sm">
-                                                                                              {{ prop.node.positionLevel }}
-                                                                                            </div>
-                                                                                            <q-icon
-                                                                                              v-if="prop.node.positionLeaderFlag"
-                                                                                              class="q-mr-sm"
-                                                                                              size="15px"
-                                                                                              color="primary"
-                                                                                              name="mdi-bookmark"
-                                                                                            ></q-icon>
+                          />
+                          <!--=====ตำแหน่งว่าง สีแดง=====-->
+                          <div
+                            v-if="prop.node.name == null"
+                            class="q-px-sm text-weight-medium text-red"
+                          >
+                            ว่าง
+                          </div>
+                          <!--=====หัวหน้า สีเขียว=====-->
+                          <div v-else-if="prop.node.positionLeaderFlag">
+                            <div
+                              class="q-px-sm text-weight-medium text-primary"
+                            >
+                              {{ prop.node.name }}
+                            </div>
+                          </div>
+                          <!--=====ลูกน้อง สีปกติ=====-->
+                          <div v-else>
+                            <div class="q-px-sm text-weight-medium">
+                              {{ prop.node.name }}
+                            </div>
+                          </div>
+                          <!--ต่อท้ายชื่อคน แสดงสีปกติ-->
+                          <div class="q-pr-sm">
+                            {{ prop.node.positionName }}
+                          </div>
+                          <div class="q-pr-sm">
+                            {{ prop.node.positionNum }}
+                          </div>
+                          <div class="q-pr-sm">
+                            {{ prop.node.positionLevel }}
+                          </div>
+                          <q-icon
+                            v-if="prop.node.positionLeaderFlag"
+                            class="q-mr-sm"
+                            size="15px"
+                            color="primary"
+                            name="mdi-bookmark"
+                          ></q-icon>
 
-                                                                                            <q-space />
-                                                                                          </q-item>
-                                                                                        </template>
-                                                                                      </q-tree>
-                                                                                    </div>
-                                                                                  </q-scroll-area>
-                                                                                </q-card>
-                                                                              </div>
-                                                                              <div class="col-xs-12 col-sm-5">
+                          <q-space />
+                        </q-item>
+                      </template>
+                    </q-tree>
+                  </div>
+                </q-scroll-area>
+              </q-card>
+            </div>
+            <div class="col-xs-12 col-sm-5">
               <q-card flat bordered class="fit q-pa-sm">
                 <q-scroll-area visible style="height: 70vh">
                   <div class="row col-12 q-col-gutter-xs">
diff --git a/src/modules/05_placement/components/PersonalList/Table.vue b/src/modules/05_placement/components/PersonalList/Table.vue
index d85c9247e..2eae18436 100644
--- a/src/modules/05_placement/components/PersonalList/Table.vue
+++ b/src/modules/05_placement/components/PersonalList/Table.vue
@@ -195,9 +195,9 @@ const convertContainStatus = (val: string) => {
 };
 const convertDraft = (val: boolean) => {
   switch (val) {
-    case true:
-      return "รอส่งตัว";
     case false:
+      return "รอส่งตัว";
+    case true:
       return "ส่งตัวแล้ว";
     default:
       return "-";
@@ -893,7 +893,6 @@ const paginationLabel = (start: number, end: number, total: number) => {
   <q-dialog v-model="modaladdlist">
     <q-card style="width: 900px; max-width: 80vw">
       <q-card-section>
-        
         <q-toolbar class="q-py-md">
           <q-toolbar-title class="header-text text-weight-bolder"
             >ส่งรายชื่อไปยังหน่วยงาน