From 45b2c93768ddcaf4484c5ed3d8648ef70ee371c0 Mon Sep 17 00:00:00 2001
From: setthawutttty <trx.setthawut@gmail.com>
Date: Thu, 3 Jul 2025 11:31:50 +0700
Subject: [PATCH] =?UTF-8?q?=E0=B9=81=E0=B8=81=E0=B9=89=E0=B8=95=E0=B8=B2?=
 =?UTF-8?q?=E0=B8=A1=20=E0=B9=80=E0=B8=97=E0=B8=AA=20=E0=B9=80=E0=B9=80?=
 =?UTF-8?q?=E0=B8=88=E0=B9=89=E0=B8=87?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/competency/Summary.vue         |  11 +-
 src/modules/01_masterdata/views/Strategic.vue | 212 +++++++++---------
 2 files changed, 115 insertions(+), 108 deletions(-)

diff --git a/src/modules/01_masterdata/components/competency/Summary.vue b/src/modules/01_masterdata/components/competency/Summary.vue
index 8cb31d8cf..290d2f790 100644
--- a/src/modules/01_masterdata/components/competency/Summary.vue
+++ b/src/modules/01_masterdata/components/competency/Summary.vue
@@ -11,6 +11,11 @@ const $q = useQuasar();
 const { messageError } = useCounterMixin();
 
 const competencyTotal = ref<CompetencySumary[]>([
+  {
+    value: "total",
+    label: "ทั้งหมด",
+    color: "red",
+  },
   {
     value: "HEAD",
     label: "สมรรถนะหลัก",
@@ -26,11 +31,7 @@ const competencyTotal = ref<CompetencySumary[]>([
     label: "สมรรถนะประจำผู้บริหารกรุงเทพมหานคร",
     color: "blue",
   },
-  {
-    value: "total",
-    label: "ทั้งหมด",
-    color: "red",
-  },
+
   {
     value: "DIRECTOR",
     label:
diff --git a/src/modules/01_masterdata/views/Strategic.vue b/src/modules/01_masterdata/views/Strategic.vue
index c5e393ed0..4bea10cf8 100644
--- a/src/modules/01_masterdata/views/Strategic.vue
+++ b/src/modules/01_masterdata/views/Strategic.vue
@@ -178,38 +178,43 @@ onMounted(() => {
 </script>
 <template>
   <div class="toptitle text-dark col-12 row items-center">ยุทธศาสตร์</div>
-  <q-card flat bordered class="q-pa-md">
-    <div class="row q-col-gutter-sm q-pl-sm">
-      <q-toolbar class="text-primary q-gutter-x-sm">
-        <q-btn
-          v-if="checkPermission($route)?.attrIsCreate"
-          dense
-          flat
-          round
-          color="primary"
-          icon="add"
-          @click.stop="onClickAction('ADD')"
-        >
-          <q-tooltip>เพิ่มยุทธศาสตร์</q-tooltip>
-        </q-btn>
-        <q-btn
-          round
-          flat
-          dense
-          color="blue"
-          icon="mdi-sort"
-          @click="modalSort = true,idSort = '',dataSort = nodes"
-        >
-          <q-tooltip>จัดลำดับข้อมูล</q-tooltip></q-btn
-        >
+  <q-card flat bordered>
+    <q-card-section class="text-primary q-pa-sm">
+      <div class="q-gutter-x-sm row items-center">
+        <div>
+          <q-btn
+            v-if="checkPermission($route)?.attrIsCreate"
+            dense
+            flat
+            round
+            color="primary"
+            icon="add"
+            @click.stop="onClickAction('ADD')"
+          >
+            <q-tooltip>เพิ่มยุทธศาสตร์</q-tooltip>
+          </q-btn>
+        </div>
+        <div>
+          <q-btn
+            round
+            flat
+            dense
+            color="blue"
+            icon="mdi-sort"
+            @click="(modalSort = true), (idSort = ''), (dataSort = nodes)"
+          >
+            <q-tooltip>จัดลำดับข้อมูล</q-tooltip></q-btn
+          >
+        </div>
         <q-input dense outlined v-model="filter" label="ค้นหา">
           <template v-slot:append>
             <q-icon name="search" />
           </template>
         </q-input>
-      </q-toolbar>
-    </div>
-    <div class="bg-white tree-container q-pa-xs">
+      </div>
+    </q-card-section>
+    <q-separator inset />
+    <q-card-section class="scroll q-py-none" style="height: 75vh">
       <q-tree
         class="q-pa-sm q-gutter-sm"
         dense
@@ -247,89 +252,90 @@ onMounted(() => {
               icon="mdi-dots-vertical"
               round
             >
-              <q-menu>
+              <q-menu
+                >
                 <q-list dense style="min-width: 100px">
-                  <q-item
-                    v-if="
-                      prop.node.level !== 4 &&
-                      checkPermission($route)?.attrIsCreate
-                    "
-                    clickable
-                    v-close-popup
-                    @click.stop="onClickAction('ADD', prop.node)"
-                  >
-                    <q-item-section avatar style="min-width: 20px">
-                      <q-icon size="17px" :color="'primary'" :name="'add'" />
-                    </q-item-section>
+              <q-item
+                v-if="
+                  prop.node.level !== 4 &&
+                  checkPermission($route)?.attrIsCreate
+                "
+                clickable
+                v-close-popup
+                @click.stop="onClickAction('ADD', prop.node)"
+              >
+                <q-item-section avatar style="min-width: 20px">
+                  <q-icon size="17px" :color="'primary'" :name="'add'" />
+                </q-item-section>
 
-                    <q-item-section v-if="prop.node.level === 1">
-                      {{ `เพิ่มยุทธศาสตร์ 1` }}
-                    </q-item-section>
-                    <q-item-section v-if="prop.node.level === 2">
-                      {{ `เพิ่มยุทธศาสตร์ย่อย` }}
-                    </q-item-section>
-                    <q-item-section v-if="prop.node.level === 3">
-                      {{ `เพิ่มกลยุทธ์ที่/เป้าประสงค์` }}
-                    </q-item-section>
-                  </q-item>
-                  <q-item
-                    v-if="
-                      checkPermission($route)?.attrIsUpdate &&
-                      checkPermission($route)?.attrIsGet
-                    "
-                    clickable
-                    v-close-popup
-                    @click.stop="onClickAction('EDIT', prop.node)"
-                  >
-                    <q-item-section avatar style="min-width: 20px">
-                      <q-icon size="17px" :color="'edit'" :name="'edit'" />
-                    </q-item-section>
-                    <q-item-section v-if="prop.node.level === 1">
-                      {{ `แก้ไขยุทธศาสตร์/แผน` }}
-                    </q-item-section>
-                    <q-item-section v-if="prop.node.level === 2">
-                      {{ `แก้ไขยุทธศาสตร์ 1` }}
-                    </q-item-section>
-                    <q-item-section v-if="prop.node.level === 3">
-                      {{ `แก้ไขยุทธศาสตร์ย่อย` }}
-                    </q-item-section>
-                    <q-item-section v-if="prop.node.level === 4">
-                      {{ `แก้ไขกลยุทธ์ที่/เป้าประสงค์` }}
-                    </q-item-section>
-                  </q-item>
-                  <q-item
-                    v-if="prop.node.children.length !== 0"
-                    clickable
-                    v-close-popup
-                    @click="
-                      (modalSort = true),
-                        (idSort = prop.node.id),
-                        (dataSort = prop.node.children)
-                    "
-                  >
-                    <q-item-section avatar style="min-width: 20px">
-                      <q-icon size="17px" :color="'blue'" :name="'mdi-sort'" />
-                    </q-item-section>
-                    <q-item-section> จัดลำดับข้อมูล </q-item-section>
-                  </q-item>
-                  <q-item
-                    v-if="checkPermission($route)?.attrIsDelete"
-                    clickable
-                    v-close-popup
-                    @click.stop="onClickAction('DEL', prop.node)"
-                  >
-                    <q-item-section avatar style="min-width: 20px">
-                      <q-icon size="17px" :color="'red'" :name="'delete'" />
-                    </q-item-section>
-                    <q-item-section> ลบข้อมูล </q-item-section>
-                  </q-item>
-                </q-list>
+                <q-item-section v-if="prop.node.level === 1">
+                  {{ `เพิ่มยุทธศาสตร์ 1` }}
+                </q-item-section>
+                <q-item-section v-if="prop.node.level === 2">
+                  {{ `เพิ่มยุทธศาสตร์ย่อย` }}
+                </q-item-section>
+                <q-item-section v-if="prop.node.level === 3">
+                  {{ `เพิ่มกลยุทธ์ที่/เป้าประสงค์` }}
+                </q-item-section>
+              </q-item>
+              <q-item
+                v-if="
+                  checkPermission($route)?.attrIsUpdate &&
+                  checkPermission($route)?.attrIsGet
+                "
+                clickable
+                v-close-popup
+                @click.stop="onClickAction('EDIT', prop.node)"
+              >
+                <q-item-section avatar style="min-width: 20px">
+                  <q-icon size="17px" :color="'edit'" :name="'edit'" />
+                </q-item-section>
+                <q-item-section v-if="prop.node.level === 1">
+                  {{ `แก้ไขยุทธศาสตร์/แผน` }}
+                </q-item-section>
+                <q-item-section v-if="prop.node.level === 2">
+                  {{ `แก้ไขยุทธศาสตร์ 1` }}
+                </q-item-section>
+                <q-item-section v-if="prop.node.level === 3">
+                  {{ `แก้ไขยุทธศาสตร์ย่อย` }}
+                </q-item-section>
+                <q-item-section v-if="prop.node.level === 4">
+                  {{ `แก้ไขกลยุทธ์ที่/เป้าประสงค์` }}
+                </q-item-section>
+              </q-item>
+              <q-item
+                v-if="prop.node.children.length !== 0"
+                clickable
+                v-close-popup
+                @click="
+                  (modalSort = true),
+                    (idSort = prop.node.id),
+                    (dataSort = prop.node.children)
+                "
+              >
+                <q-item-section avatar style="min-width: 20px">
+                  <q-icon size="17px" :color="'blue'" :name="'mdi-sort'" />
+                </q-item-section>
+                <q-item-section> จัดลำดับข้อมูล </q-item-section>
+              </q-item>
+              <q-item
+                v-if="checkPermission($route)?.attrIsDelete"
+                clickable
+                v-close-popup
+                @click.stop="onClickAction('DEL', prop.node)"
+              >
+                <q-item-section avatar style="min-width: 20px">
+                  <q-icon size="17px" :color="'red'" :name="'delete'" />
+                </q-item-section>
+                <q-item-section> ลบข้อมูล </q-item-section>
+              </q-item>
+            </q-list>
               </q-menu>
             </q-btn>
           </q-item>
         </template>
       </q-tree>
-    </div>
+    </q-card-section>
   </q-card>
 
   <q-dialog v-model="modalDialog" persistent>