From fa663dd4424ae13610ce4e72059cebd2908e4752 Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Tue, 23 Apr 2024 13:40:54 +0700
Subject: [PATCH] =?UTF-8?q?=E0=B8=A2=E0=B8=B8=E0=B8=97=E0=B8=98=E0=B8=A8?=
 =?UTF-8?q?=E0=B8=B2=E0=B8=AA=E0=B8=95=E0=B8=A3=E0=B9=8C=20=3D>=20?=
 =?UTF-8?q?=E0=B9=80=E0=B8=9E=E0=B8=B4=E0=B9=88=E0=B8=A1=20scroll?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../15_development/views/Strategic.vue        | 179 ++++++++++--------
 1 file changed, 95 insertions(+), 84 deletions(-)

diff --git a/src/modules/15_development/views/Strategic.vue b/src/modules/15_development/views/Strategic.vue
index 2d81f48fe..7a7325863 100644
--- a/src/modules/15_development/views/Strategic.vue
+++ b/src/modules/15_development/views/Strategic.vue
@@ -209,94 +209,100 @@ onMounted(() => {
         </q-input>
       </q-toolbar>
     </div>
-    <q-tree
-      class="q-pa-sm q-gutter-sm"
-      dense
-      :nodes="nodes"
-      node-key="id"
-      label-key="id"
-      :filter="filter"
-      no-results-label="ไม่พบข้อมูลที่ค้นหา"
-      no-nodes-label="ไม่มีข้อมูล"
-      v-model:expanded="expanded"
-    >
-      <template v-slot:default-header="prop">
-        <q-item
-          clickable
-          @click.stop
-          :active="nodeId == prop.node.name"
-          active-class="my-list-link text-primary text-weight-medium"
-          class="row col-12 items-center text-dark q-py-xs q-pl-sm rounded-borders my-list"
-        >
-          <div>
-            <div class="text-weight-medium">
-              {{ prop.node.name }}
-            </div>
-          </div>
-          <q-btn
-            flat
-            dense
-            icon="mdi-dots-vertical"
-            class="q-ml-xs"
-            color="grey-13"
-            size="12px"
-            round
+    <div class="bg-white tree-container q-pa-xs">
+      <q-tree
+        class="q-pa-sm q-gutter-sm"
+        dense
+        :nodes="nodes"
+        node-key="id"
+        label-key="id"
+        :filter="filter"
+        no-results-label="ไม่พบข้อมูลที่ค้นหา"
+        no-nodes-label="ไม่มีข้อมูล"
+        v-model:expanded="expanded"
+      >
+        <template v-slot:default-header="prop">
+          <q-item
+            clickable
+            @click.stop
+            :active="nodeId == prop.node.name"
+            active-class="my-list-link text-primary text-weight-medium"
+            class="row col-12 items-center text-dark q-py-xs q-pl-sm rounded-borders my-list"
           >
-            <q-menu>
-              <q-list
-                dense
-                v-for="(item, index) in prop.node.level !== 4
-                  ? ListMenu
-                  : ListMenu.slice(1, 4)"
-                :key="index"
-                style="min-width: 100px"
-              >
-                <q-item
-                  clickable
-                  v-close-popup
-                  @click.stop="onClickAction(item.value, prop.node)"
+            <div>
+              <div class="text-weight-medium">
+                {{ prop.node.name }}
+              </div>
+            </div>
+            <q-btn
+              flat
+              dense
+              icon="mdi-dots-vertical"
+              class="q-ml-xs"
+              color="grey-13"
+              size="12px"
+              round
+            >
+              <q-menu>
+                <q-list
+                  dense
+                  v-for="(item, index) in prop.node.level !== 4
+                    ? ListMenu
+                    : ListMenu.slice(1, 4)"
+                  :key="index"
+                  style="min-width: 100px"
                 >
-                  <q-item-section avatar style="min-width: 20px">
-                    <q-icon size="17px" :color="item.color" :name="item.icon" />
-                  </q-item-section>
+                  <q-item
+                    clickable
+                    v-close-popup
+                    @click.stop="onClickAction(item.value, prop.node)"
+                  >
+                    <q-item-section avatar style="min-width: 20px">
+                      <q-icon
+                        size="17px"
+                        :color="item.color"
+                        :name="item.icon"
+                      />
+                    </q-item-section>
 
-                  <div v-if="item.value === 'ADD'">
-                    <q-item-section v-if="prop.node.level === 1">
-                      {{ `${item.label}ยุทธศาสตร์ที่` }}
-                    </q-item-section>
-                    <q-item-section v-if="prop.node.level === 2">
-                      {{ `${item.label}ยุทธศาสตร์ย่อย` }}
-                    </q-item-section>
-                    <q-item-section v-if="prop.node.level === 3">
-                      {{ `${item.label}กลยุทธ์ที่/เป้าประสงค์` }}
-                    </q-item-section>
-                  </div>
+                    <div v-if="item.value === 'ADD'">
+                      <q-item-section v-if="prop.node.level === 1">
+                        {{ `${item.label}ยุทธศาสตร์ที่ 1` }}
+                      </q-item-section>
+                      <q-item-section v-if="prop.node.level === 2">
+                        {{ `${item.label}ยุทธศาสตร์ย่อย` }}
+                      </q-item-section>
+                      <q-item-section v-if="prop.node.level === 3">
+                        {{ `${item.label}กลยุทธ์ที่/เป้าประสงค์` }}
+                      </q-item-section>
+                    </div>
 
-                  <div v-else-if="item.value === 'EDIT'">
-                    <q-item-section v-if="prop.node.level === 1">
-                      {{ `${item.label}ยุทธศาสตร์/แผน` }}
-                    </q-item-section>
-                    <q-item-section v-if="prop.node.level === 2">
-                      {{ `${item.label}ยุทธศาสตร์ที่` }}
-                    </q-item-section>
-                    <q-item-section v-if="prop.node.level === 3">
-                      {{ `${item.label}ยุทธศาสตร์ย่อย` }}
-                    </q-item-section>
-                    <q-item-section v-if="prop.node.level === 4">
-                      {{ `${item.label}กลยุทธ์ที่/เป้าประสงค์` }}
-                    </q-item-section>
-                  </div>
+                    <div v-else-if="item.value === 'EDIT'">
+                      <q-item-section v-if="prop.node.level === 1">
+                        {{ `${item.label}ยุทธศาสตร์/แผน` }}
+                      </q-item-section>
+                      <q-item-section v-if="prop.node.level === 2">
+                        {{ `${item.label}ยุทธศาสตร์ที่` }}
+                      </q-item-section>
+                      <q-item-section v-if="prop.node.level === 3">
+                        {{ `${item.label}ยุทธศาสตร์ย่อย` }}
+                      </q-item-section>
+                      <q-item-section v-if="prop.node.level === 4">
+                        {{ `${item.label}กลยุทธ์ที่/เป้าประสงค์` }}
+                      </q-item-section>
+                    </div>
 
-                  <div v-else>
-                    <q-item-section>{{ item.label }}</q-item-section>
-                  </div>
-                </q-item>
-              </q-list>
-            </q-menu>
-          </q-btn>
-        </q-item>
-      </template>
-    </q-tree>
+                    <div v-else>
+                      <q-item-section>{{ item.label }}</q-item-section>
+                    </div>
+                  </q-item>
+                </q-list>
+              </q-menu>
+            </q-btn>
+          </q-item>
+        </template>
+      </q-tree>
+    </div>
   </q-card>
 
   <q-dialog v-model="modalDialog" persistent>
@@ -349,4 +355,9 @@ onMounted(() => {
   </q-dialog>
 </template>
 
-<style scoped></style>
+<style lang="scss" scoped>
+.tree-container {
+  overflow: auto;
+  height: 75vh;
+}
+</style>