scrolltab

src/interface/request/main/main.ts

@@ -55,8 +55,36 @@ const menuList = readonly<any[]>([
     icon: "mdi-file-outline",
     activeIcon: "document",
     label: "คู่มือการใช้งาน",
-    path: "manual",
+    path: "",
     role: "metadata",
+    children: [
+      {
+        key: 2.1,
+        label: "การเข้าสู่ระบบ",
+        path: "/manual",
+
+      },
+      {
+        key: 2.2,
+        label: "ระบบข้อมูลหลัก",
+        path: "/datamain",
+      },
+      {
+        key: 2.3,
+        label: "ระบบโครงสร้างอัตรากำลัง",
+        path: "/structuremain",
+      },
+      {
+        key: 2.4,
+        label: "ระบบทะเบียนประวัติ",
+        path: "/registrationmain",
+      },
+      {
+        key: 2.5,
+        label: "หน้าจัดการระบบสรรหา",
+        path: "/recruitmain",
+      }
+    ]
   },
   // {
   //   key: 3,
@@ -467,6 +495,117 @@ const menuList = readonly<any[]>([
   // ],
   // },
 ]);
+const tabListLogin = readonly<any[]>([
+  {
+    no: 1,
+    label: "การเข้าสู่หน้าระบบ",
+    tag: "Mainlogin",
+  },
+  {
+    no: 2,
+    label: "การเข้าสู่ระบบโดยใช้ User name และ Password",
+    tag: "login",
+  },
+  {
+    no: 3,
+    label: "การเปลี่ยนรหัสผ่านผู้ใช้งาน",
+    tag: "Password",
+  },
+  {
+    no: 4,
+    label: "การลงทะเบียนผู้ใช้งานใหม่",
+    tag: "newuser",
+  },
+  {
+    no: 5,
+    label: "การออกจากระบบ",
+    tag: "logout",
+  },
+  {
+    no: 6,
+    label: "การแสดงแจ้งเตือน",
+    tag: "noti",
+  }
+]);
+const tabListDatamain = readonly<any[]>([
+  {
+    no: 1,
+    label: "การเข้าสู่ระบบข้อมูลหลัก",
+    tag: "MainData",
+  },
+  {
+    no: 2,
+    label: "ข้อมูลเกี่ยวกับบุคคล",
+    tag: "About",
+  },
+  {
+    no: 3,
+    label: "ข้อมูลโครงสร้างหน่วยงาน",
+    tag: "gov",
+  },
+  {
+    no: 4,
+    label: "ข้อมูลตำแหน่งของข้าราชการ",
+    tag: "officer",
+  },
+  {
+    no: 5,
+    label: "ข้อมูลตำแหน่งของลูกจ้าง",
+    tag: "employee",
+  },
+  {
+    no: 6,
+    label: "ข้อมูลปฏิทินวันหยุด",
+    tag: "calender",
+  },
+  {
+    no: 7,
+    label: "ข้อมูลเครื่องราชอิสริยาภรณ์",
+    tag: "insignia",
+  }
+]);
+const tabStructuremain = readonly<any[]>([
+  {
+    no: 1,
+    label: "การเข้าสู่ระบบโครงสร้างอัตรากำลัง",
+    tag: "structuremain",
+  },
+  {
+    no: 2,
+    label: "จัดการตำแหน่ง",
+    tag: "position",
+  },
+  {
+    no: 3,
+    label: "แผนภูมิโครงสร้าง",
+    tag: "structure",
+  },
+  {
+    no: 4,
+    label: "แผนภูมิองค์กร",
+    tag: "organchart",
+  },
+  {
+    no: 5,
+    label: "ผังโครงสร้าง",
+    tag: "chartstru",
+  },
+  {
+    no: 6,
+    label: "จัดการบัญชี 2",
+    tag: "account2",
+  },
+  {
+    no: 7,
+    label: "รายงานบัญชี",
+    tag: "report",
+  },
+  {
+    no: 8,
+    label: "ผังโครงสร้างลูกจ้าง",
+    tag: "chartemploy",
+  }
+])
 
 const tabList = readonly<any[]>([
   {
@@ -700,5 +839,5 @@ const tabList = readonly<any[]>([
 
 ]);
 
-export { menuList, tabList };
+export { menuList, tabList, tabListLogin, tabListDatamain, tabStructuremain };
 export type { ScrollType, tabType, menuType, notiType, optionType };

src/modules/01_manual/components/1_login/01_Main.vue

@@ -7,9 +7,9 @@ const text = ref("");
 <template>
   <div class="row col-12">
     <div class="col-12">
-      <div class="toptitle text-dark col-12 row items-center">
+      <!-- <div class="toptitle text-dark col-12 row items-center">
         คู่มือการใช้งานระบบบริหารทรัพยากรบุคคลของกรุงเทพมหานคร
-      </div>
+      </div> -->
 
       <q-card
         flat

src/modules/01_manual/components/1_login/02_login.vue

@@ -1,70 +1,103 @@
 <script setup lang="ts">
-import { ref } from 'vue'
+import { ref } from "vue";
-const rightDrawerOpen = ref(false)
+const rightDrawerOpen = ref(false);
-const text = ref('')
+const text = ref("");
 </script>
 
-
 <template>
-    <div class="row col-12">
+  <!-- <div class="row col-12">
-            <div class="col-9">
+    <div class="col-9"> -->
+  <!-- <div class="toptitle text-dark col-12 row items-center">
+        คู่มือการใช้งานระบบบริหารทรัพยากรบุคคลของกรุงเทพมหานคร
+      </div> -->
 
-                <div class="toptitle text-dark col-12 row items-center">คู่มือการใช้งานระบบบริหารทรัพยากรบุคคลของกรุงเทพมหานคร</div>
+  <!-- <q-card
+        flat
+        bordered
+        class="col-12 q-pa-md"
+        style="
+          background-color: #ecebeb;
+          border-radius: 8px 8px 0px 0px;
+          padding: 10px 16px 10px 16px;
+        "
+      > -->
+  <!-- <div class="custom-topic text-dark"> -->
+  <!-- <div style="font-size: 16px; font-weight: 700">
+            การเข้าสู่ระบบบริหารทรัพยากรบุคคลของกรุงเทพมหานคร
+          </div> -->
+  <!-- </div> -->
+  <!-- </q-card> -->
 
-                <q-card flat bordered class="col-12 q-pa-md" style="background-color: #ECEBEB; border-radius: 8px 8px 0px 0px; padding: 10px 16px 10px 16px; ">
+  <q-card
-                    <div class="custom-topic text-dark">
+    flat
-                        <div style="font-size: 16px; font-weight: 700;">
+    bordered
-                            การเข้าสู่ระบบบริหารทรัพยากรบุคคลของกรุงเทพมหานคร
+    class="col-12 q-pa-md"
-                        </div>
+    style="border-radius: 0px 0px 8px 8px"
-                    </div>
+  >
-                </q-card>
+    <div style="font-weight: bold; font-size: 15px; color: #00aa86">
-
+      1.1 การเข้าสู่ระบบโดยใช้ User name และ Password
-                <q-card flat bordered class="col-12 q-pa-md" style="border-radius: 0px 0px 8px 8px;">
-                    <div style="font-weight: bold; font-size: 15px; color: #00AA86;">
-                        1.1 การเข้าสู่ระบบโดยใช้ User name และ Password
-                    </div>
-
-
-
-                
-
-                    <q-img src="@/assets/manual/01_login/2_login/1-2.png" style="max-width: 100%; display: block; margin: 0 auto; border-radius: 20px; margin-top: 20px;"/>
-                    <div class="text-center text-grey-6" style="margin-top: 20px;">รูปภาพที่ 1 – 2 การเข้าสู่ระบบโดยการกรอกชื่อผู้ใช้งานและรหัสผ่าน</div>
-
-                    <div style="margin-top: 20px; padding: 10px; background-color: #F3F3F3; font-size: 14px; color: #000000; border-radius: 5px;">
-                        หมายเลข 1 ช่องสำหรับกรอกชื่อผู้ใช้งาน <br>
-                        หมายเลข 2 ช่องสำหรับกรอกรหัสผ่านใช้งาน <br>
-                        หมายเลข 3 ปุ่มสำหรับคลิกเข้าสู่ระบบใช้งาน <br>
-                        หมายเลข 4 ช่องสำหรับคลิก หากต้องการให้ระบบจดจำการเข้าสู่ระบบ <br>
-                        หมายเลข 5 ช่องสำหรับคลิกหากลืมรหัสผ่านเพื่อให้ทำระบบทำการรีเซ็ตรหัสผ่านใหม่ <br>
-                        หมายเลข 6 ช่องสำหรับคลิกเพื่อลงทะเบียนผู้ใช้งานใหม่ <br>
-                    </div>
-
-                    <div class="col-12 text16" style="margin-top: 40px; margin-left: 10px;">
-                        - เมื่อเข้าสู่ระบบบริหารทรัพยากรบุคคลกรุงเทพมหานคร ระบบแสดงหน้าจอของระบบบริหารทรัพยากรบุคคลกรุงเทพมหานครของเจ้าหน้าที่ดูแลระบบ
-                    </div>
-                    <q-img src="@/assets/manual/01_login/2_login/1-3.png"
-                    style="max-width: 100%; display: block; margin: 0 auto; border-radius: 20px; margin-top: 20px; border: 1px solid #97B2DE;"/>
-                    <div class="text-center text-grey-6" style="margin-top: 20px;">รูปภาพที่ 1 – 3 การเข้าสู่ระบบหลังจากกรอกชื่อผู้ใช้งาน</div>
-
-
-                </q-card>
-
-
-
-
-
-            </div>
-    
-     
     </div>
-    
-</template>
 
+    <q-img
+      src="@/assets/manual/01_login/2_login/1-2.png"
+      style="
+        max-width: 100%;
+        display: block;
+        margin: 0 auto;
+        border-radius: 20px;
+        margin-top: 20px;
+      "
+    />
+    <div class="text-center text-grey-6" style="margin-top: 20px">
+      รูปภาพที่ 1 – 2 การเข้าสู่ระบบโดยการกรอกชื่อผู้ใช้งานและรหัสผ่าน
+    </div>
+
+    <div
+      style="
+        margin-top: 20px;
+        padding: 10px;
+        background-color: #f3f3f3;
+        font-size: 14px;
+        color: #000000;
+        border-radius: 5px;
+      "
+    >
+      หมายเลข 1 ช่องสำหรับกรอกชื่อผู้ใช้งาน <br />
+      หมายเลข 2 ช่องสำหรับกรอกรหัสผ่านใช้งาน <br />
+      หมายเลข 3 ปุ่มสำหรับคลิกเข้าสู่ระบบใช้งาน <br />
+      หมายเลข 4 ช่องสำหรับคลิก หากต้องการให้ระบบจดจำการเข้าสู่ระบบ <br />
+      หมายเลข 5
+      ช่องสำหรับคลิกหากลืมรหัสผ่านเพื่อให้ทำระบบทำการรีเซ็ตรหัสผ่านใหม่
+      <br />
+      หมายเลข 6 ช่องสำหรับคลิกเพื่อลงทะเบียนผู้ใช้งานใหม่ <br />
+    </div>
+
+    <div class="col-12 text16" style="margin-top: 40px; margin-left: 10px">
+      - เมื่อเข้าสู่ระบบบริหารทรัพยากรบุคคลกรุงเทพมหานคร
+      ระบบแสดงหน้าจอของระบบบริหารทรัพยากรบุคคลกรุงเทพมหานครของเจ้าหน้าที่ดูแลระบบ
+    </div>
+    <q-img
+      src="@/assets/manual/01_login/2_login/1-3.png"
+      style="
+        max-width: 100%;
+        display: block;
+        margin: 0 auto;
+        border-radius: 20px;
+        margin-top: 20px;
+        border: 1px solid #97b2de;
+      "
+    />
+    <div class="text-center text-grey-6" style="margin-top: 20px">
+      รูปภาพที่ 1 – 3 การเข้าสู่ระบบหลังจากกรอกชื่อผู้ใช้งาน
+    </div>
+  </q-card>
+  <!-- </div>
+  </div> -->
+</template>
 
 <style lang="scss" scoped>
 .custom-topic {
-    font-weight: bold;
+  font-weight: bold;
-    font-size: 1.2rem;
+  font-size: 1.2rem;
 }
-</style>
+</style>

src/modules/01_manual/components/1_login/03_Password.vue

@@ -5,13 +5,13 @@ const text = ref("");
 </script>
 
 <template>
-  <div class="row col-12">
+  <!-- <div class="row col-12">
     <div class="col-9">
       <div class="toptitle text-dark col-12 row items-center">
         คู่มือการใช้งานระบบบริหารทรัพยากรบุคคลของกรุงเทพมหานคร
-      </div>
+      </div> -->
 
-      <q-card
+      <!-- <q-card
         flat
         bordered
         class="col-12 q-pa-md"
@@ -26,7 +26,7 @@ const text = ref("");
             การเข้าสู่ระบบบริหารทรัพยากรบุคคลของกรุงเทพมหานคร
           </div>
         </div>
-      </q-card>
+      </q-card> -->
 
       <q-card
         flat
@@ -112,8 +112,8 @@ const text = ref("");
           หมายเลข 3 ปุ่มสำหรับคลิกเพื่อย้อนกลับไปหน้าเข้าสู่ระบบ <br />
         </div>
       </q-card>
-    </div>
+    <!-- </div>
-  </div>
+  </div> -->
 </template>
 
 <style>

src/modules/01_manual/components/1_login/04_newuser.vue

@@ -5,13 +5,13 @@ const text = ref("");
 </script>
 
 <template>
-  <div class="row col-12">
+  <!-- <div class="row col-12">
     <div class="col-9">
       <div class="toptitle text-dark col-12 row items-center">
         คู่มือการใช้งานระบบบริหารทรัพยากรบุคคลของกรุงเทพมหานคร
-      </div>
+      </div> -->
 
-      <q-card
+      <!-- <q-card
         flat
         bordered
         class="col-12 q-pa-md"
@@ -26,7 +26,7 @@ const text = ref("");
             การเข้าสู่ระบบบริหารทรัพยากรบุคคลของกรุงเทพมหานคร
           </div>
         </div>
-      </q-card>
+      </q-card> -->
 
       <q-card
         flat
@@ -42,20 +42,24 @@ const text = ref("");
           class="col-12 q-gutter-xs"
           style="margin-top: 20px; margin-left: 10px"
         >
-        - หากเป็นผู้ใช้งานใหม่ต้องการที่จะลงทะเบียนเพื่อใช้งานระบบทรัพยากรบุคคคลกรุงเทพมหานครให้ทำการใช้เมาส์คลิก
+          -
+          หากเป็นผู้ใช้งานใหม่ต้องการที่จะลงทะเบียนเพื่อใช้งานระบบทรัพยากรบุคคคลกรุงเทพมหานครให้ทำการใช้เมาส์คลิก
           <span
-            style="color: #0082CA;
+            style="
-            background-color: #ffffff;
+              color: #0082ca;
-            border: 1px solid #0082CA;
+              background-color: #ffffff;
-            text-align: center;
+              border: 1px solid #0082ca;
-            display: inline-block;
+              text-align: center;
-            padding: 0px 5px;
+              display: inline-block;
-            font-size: 13px;  "
+              padding: 0px 5px;
+              font-size: 13px;
+            "
           >
-          ลงทะเบียน
+            ลงทะเบียน
           </span>
 
-          จากนั้นระบบแสดงหน้าลงทะเบียนผู้ใช้งาน ทำการกรอกข้อมูลให้ครบตามที่ระบบแนะนำ จากนั้นทำการใช้เมาส์คลิก
+          จากนั้นระบบแสดงหน้าลงทะเบียนผู้ใช้งาน
+          ทำการกรอกข้อมูลให้ครบตามที่ระบบแนะนำ จากนั้นทำการใช้เมาส์คลิก
           <span
             style="
               background-color: #00aa86;
@@ -67,21 +71,21 @@ const text = ref("");
               padding: 0px 5px;
             "
           >
-          ลงทะเบียน
+            ลงทะเบียน
           </span>
           หรือหากไม่ต้องการลงทะเบียนผู้ใช้งานแล้วให้ทำการคลิกที่
           <span
             style="
               background-color: #ffffff;
-              border: 1px solid #0082CA;
+              border: 1px solid #0082ca;
-              color: #0082CA;
+              color: #0082ca;
               font-size: 13px;
               text-align: center;
               display: inline-block;
               padding: 0px 5px;
             "
           >
-          « กลับหน้าเข้าสู่ระบบ
+            « กลับหน้าเข้าสู่ระบบ
           </span>
           เพื่อยกเลิกการลงทะเบียนผู้ใช้งานใหม่หรือย้อนกลับไปยังหน้าเข้าสู่ระบบ
         </div>
@@ -97,7 +101,7 @@ const text = ref("");
           "
         />
         <div class="text-center text-grey-6" style="margin-top: 20px">
-            รูปภาพที่ 1 – 5 แสดงการกรอกข้อมูลลงทะเบียนผู้ใช้งานใหม่
+          รูปภาพที่ 1 – 5 แสดงการกรอกข้อมูลลงทะเบียนผู้ใช้งานใหม่
         </div>
 
         <div
@@ -110,21 +114,16 @@ const text = ref("");
             border-radius: 5px;
           "
         >
-        หมายเลข 1 ช่องสำหรับกรอกชื่อผู้ลงทะเบียนใช้งาน <br>
+          หมายเลข 1 ช่องสำหรับกรอกชื่อผู้ลงทะเบียนใช้งาน <br />
-        หมายเลข 2 ช่องสำหรับกรอกนามสกุลผู้ลงทะเบียนใช้งาน  <br>
+          หมายเลข 2 ช่องสำหรับกรอกนามสกุลผู้ลงทะเบียนใช้งาน <br />
-        หมายเลข 3 ช่องสำหรับกรอกอีเมลผู้ลงทะเบียนใช้งาน <br>
+          หมายเลข 3 ช่องสำหรับกรอกอีเมลผู้ลงทะเบียนใช้งาน <br />
-        หมายเลข 4 ช่องสำหรับกรอกชื่อผู้ใช้งานของผู้ลงทะเบียนใช้งาน <br>
+          หมายเลข 4 ช่องสำหรับกรอกชื่อผู้ใช้งานของผู้ลงทะเบียนใช้งาน <br />
-        หมายเลข 5 ช่องสำหรับกรอกตั้งรหัสผ่านสำหรับใช้งานระบบ <br>
+          หมายเลข 5 ช่องสำหรับกรอกตั้งรหัสผ่านสำหรับใช้งานระบบ <br />
-        หมายเลข 6 ช่องสำหรับกรอกยืนยันรหัสผ่านสำหรับใช้งานระบบ <br>
+          หมายเลข 6 ช่องสำหรับกรอกยืนยันรหัสผ่านสำหรับใช้งานระบบ <br />
-        หมายเลข 7 ปุ่มสำหรับคลิกยืนยันการลงทะเบียนผู้ใช้งาน <br>
+          หมายเลข 7 ปุ่มสำหรับคลิกยืนยันการลงทะเบียนผู้ใช้งาน <br />
-        หมายเลข 8 ปุ่มสำหรับคลิกเพื่อย้อนกลับหน้าเข้าสู่ระบบ <br>
+          หมายเลข 8 ปุ่มสำหรับคลิกเพื่อย้อนกลับหน้าเข้าสู่ระบบ <br />
-
         </div>
       </q-card>
-    </div>
+    <!-- </div>
-  </div>
+  </div> -->
 </template>
-
-
-
-

src/modules/01_manual/components/1_login/05_logout.vue

@@ -5,13 +5,13 @@ const text = ref("");
 </script>
 
 <template>
-  <div class="row col-12">
+  <!-- <div class="row col-12">
     <div class="col-9">
       <div class="toptitle text-dark col-12 row items-center">
         คู่มือการใช้งานระบบบริหารทรัพยากรบุคคลของกรุงเทพมหานคร
-      </div>
+      </div> -->
 
-      <q-card
+      <!-- <q-card
         flat
         bordered
         class="col-12 q-pa-md"
@@ -26,7 +26,7 @@ const text = ref("");
             การเข้าสู่ระบบบริหารทรัพยากรบุคคลของกรุงเทพมหานคร
           </div>
         </div>
-      </q-card>
+      </q-card> -->
 
       <q-card
         flat
@@ -76,8 +76,8 @@ const text = ref("");
 
 
       </q-card>
-    </div>
+    <!-- </div>
-  </div>
+  </div> -->
 </template>
 
 <style>

src/modules/01_manual/components/1_login/06_noti.vue

@@ -5,7 +5,7 @@ const text = ref("");
 </script>
 
 <template>
-  <div class="row col-12">
+  <!-- <div class="row col-12">
     <div class="col-9">
       <div class="toptitle text-dark col-12 row items-center">
         คู่มือการใช้งานระบบบริหารทรัพยากรบุคคลของกรุงเทพมหานคร
@@ -26,7 +26,7 @@ const text = ref("");
             การเข้าสู่ระบบบริหารทรัพยากรบุคคลของกรุงเทพมหานคร
           </div>
         </div>
-      </q-card>
+      </q-card> -->
 
 
       <q-card
@@ -168,8 +168,8 @@ const text = ref("");
 
 
       </q-card>
-    </div>
+    <!-- </div>
-  </div>
+  </div> -->
 </template>
 
 

src/modules/01_manual/components/1_login/view.vue

@@ -0,0 +1,70 @@
+<script setup lang="ts">
+import Mainlogin from "../1_login/01_Main.vue";
+import login from "../1_login/02_login.vue";
+import Password from "../1_login/03_Password.vue";
+import newuser from "../1_login/04_newuser.vue";
+import logout from "../1_login/05_logout.vue";
+import noti from "../1_login/06_noti.vue";
+</script>
+<template>
+  <div class="col-12 row">
+    <div
+      class="toptitle text-dark col-12 row items-center"
+      style="padding-top: 20px"
+    >
+      คู่มือการเข้าสู่ระบบ
+    </div>
+    <div class="row col-12 q-gutter-xs">
+      <div
+        id="Mainlogin"
+        name="1"
+        class="row col-12 information"
+        style="padding-bottom: 60px"
+      >
+        <Mainlogin />
+      </div>
+      <div
+        id="login"
+        name="2"
+        class="row col-12 information"
+        style="padding-bottom: 60px"
+      >
+        <login />
+      </div>
+      <div
+        id="Password"
+        name="3"
+        class="row col-12 information"
+        style="padding-bottom: 60px"
+      >
+        <Password />
+      </div>
+      <div
+        id="newuser"
+        name="4"
+        class="row col-12 information"
+        style="padding-bottom: 60px"
+      >
+        <newuser />
+      </div>
+      <div
+        id="logout"
+        name="5"
+        class="row col-12 information"
+        style="padding-bottom: 60px"
+      >
+        <logout />
+      </div>
+      <div
+        id="noti"
+        name="6"
+        class="row col-12 information"
+        style="padding-bottom: 60px"
+      >
+        <noti />
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped></style>

src/modules/01_manual/components/2_data/21_Main.vue

@@ -5,11 +5,11 @@ const text = ref("");
 </script>
 
 <template>
-  <div class="row col-12">
+  <!-- <div class="row col-12">
     <div class="col-12">
       <div class="toptitle text-dark col-12 row items-center">
         คู่มือการใช้งานระบบบริหารทรัพยากรบุคคลของกรุงเทพมหานคร
-      </div>
+      </div> -->
 
       <q-card
         flat
@@ -135,7 +135,7 @@ const text = ref("");
 
 
       </q-card>
-    </div>
+    <!-- </div>
-  </div>
+  </div> -->
 </template>
 

src/modules/01_manual/components/2_data/22_About.vue

@@ -5,7 +5,7 @@ const text = ref("");
 </script>
 
 <template>
-  <div class="row col-12">
+  <!-- <div class="row col-12">
     <div class="col-9">
       <div class="toptitle text-dark col-12 row items-center">
         คู่มือการใช้งานระบบบริหารทรัพยากรบุคคลของกรุงเทพมหานคร
@@ -24,7 +24,7 @@ const text = ref("");
         <div class="custom-topic text-dark">
           <div style="font-size: 16px; font-weight: 700">ระบบข้อมูลหลัก</div>
         </div>
-      </q-card>
+      </q-card> -->
 
       <q-card
         flat
@@ -970,8 +970,8 @@ const text = ref("");
 
         </div>
       </q-card>
-    </div>
+    <!-- </div>
-  </div>
+  </div> -->
 </template>
 
 

src/modules/01_manual/components/2_data/23_Gov.vue

@@ -5,7 +5,7 @@ const text = ref("");
 </script>
 
 <template>
-  <div class="row col-12">
+  <!-- <div class="row col-12">
     <div class="col-9">
       <div class="toptitle text-dark col-12 row items-center">
         คู่มือการใช้งานระบบบริหารทรัพยากรบุคคลของกรุงเทพมหานคร
@@ -24,7 +24,7 @@ const text = ref("");
         <div class="custom-topic text-dark">
           <div style="font-size: 16px; font-weight: 700">ระบบข้อมูลหลัก</div>
         </div>
-      </q-card>
+      </q-card> -->
 
       <q-card
         flat
@@ -375,7 +375,7 @@ const text = ref("");
 
 
       </q-card>
-    </div>
+    <!-- </div>
-  </div>
+  </div> -->
 </template>
 

src/modules/01_manual/components/2_data/24_Officer.vue

@@ -5,7 +5,7 @@ const text = ref("");
 </script>
 
 <template>
-  <div class="row col-12">
+  <!-- <div class="row col-12">
     <div class="col-9">
       <div class="toptitle text-dark col-12 row items-center">
         คู่มือการใช้งานระบบบริหารทรัพยากรบุคคลของกรุงเทพมหานคร
@@ -24,351 +24,424 @@ const text = ref("");
         <div class="custom-topic text-dark">
           <div style="font-size: 16px; font-weight: 700">ระบบข้อมูลหลัก</div>
         </div>
-      </q-card>
+      </q-card> -->
 
-      <q-card
+  <q-card
-        flat
+    flat
-        bordered
+    bordered
-        class="col-12 q-pa-md"
+    class="col-12 q-pa-md"
-        style="border-radius: 0px 0px 8px 8px"
+    style="border-radius: 0px 0px 8px 8px"
-      >
+  >
-      <div style="font-weight: bold; font-size: 15px; color: #00aa86">
+    <div style="font-weight: bold; font-size: 15px; color: #00aa86">
-          2.3 ข้อมูลตำแหน่งของข้าราชการ
+      2.3 ข้อมูลตำแหน่งของข้าราชการ
-        </div>
-
-
-        <div class="col-12" style="margin-top: 20px; margin-left: 10px">
-            - เมื่อกดเลือกเมนู “ข้อมูลตำแหน่งของข้าราชการ” จะปรากฏรายละเอียดดังรูปภาพ        </div>
-
-        <div class="col-12">
-          <q-img
-            src="@/assets/manual/02_data/4_Officer/2-41.png"
-            style="
-              display: block;
-              margin: 0 auto;
-              border-radius: 20px;
-              margin-top: 20px;
-            "
-          />
-          <div class="text-center text-grey-6" style="margin-top: 20px">
-            รูปภาพที่ 2 - 41 รายละเอียดข้อมูลตำแหน่งของข้าราชการ          </div>
-        </div>
-
-
-        <div class="col-12" style="margin-top: 50px; margin-left: 10px">
-            <p>
-                - เลือกกดแถบเมนูย่อย “ตำแหน่งประเภท, ชื่อสายงาน, ชื่อตำแหน่งสายงาน, ด้าน/สาขาของสายงาน, ระดับตำแหน่ง, ชื่อตำแหน่งทางการบริหาร, ด้านทางการบริหารหรือ
-สถานะของตำแหน่ง” ระบบแสดงข้อมูลโดยสามารถเพิ่ม ลบหรือแก้ไขข้อมูลได้ดังรูปภาพ ซึ่งเมนูย่อยอื่นๆสามารถทำตามขั้นตอนดังต่อไปนี้ได้เนื่องจากมีวิธีการทำและการแสดง
-หน้าจอเหมือนกันและในกรอบสีแดงที่ช่องค้นหาสามารถสืบค้นข้อมูลและช่องคอลัมน์สามารถเลือกรายการเพื่อซ่อน
-            </p>
-        </div>
-
-        <div class="col-12">
-          <q-img
-          src="@/assets/manual/02_data/4_Officer/2-42.png"
-            style="
-              display: block;
-              margin: 0 auto;
-              border-radius: 20px;
-              margin-top: 20px;
-            "
-          />
-
-            <div class="text-center text-grey-6" style="margin-top: 20px">
-                รูปภาพที่ 2 - 42 แถบเมนูข้อมูลตำแหน่งของข้าราชการ            </div>
-
-            <div class="col-12"
-                    style="margin-top: -;
-                    padding: 10px;
-                    background-color: rgb(243, 243, 243);
-                    font-size: 14px;
-                    margin-top: 20px;
-                    border-radius: 5px;
-                    "
-                    >
-                    หมายเลข 1 คอลัมน์แสดงชื่อคอลัมน์แสดงข้อมูลย่อยของข้อมูลตำแหน่งของข้าราชการ <br>
-                    หมายเลข 2 ช่องสำหรับกรอกค้นหาและเลือกคอลัมน์แสดงข้อมูลตามที่ได้ได้การค้นหา
-            </div>
-        </div>
-
-
-        <div class="col-12">
-            <p 
-            style="margin-top:50px;
-            margin-left: 10px">
-                - กดไอคอน 
-                <q-icon name="mdi-pencil-outline" style="margin: 0 5px; color: #02A998;" size="xs"/>
-                เพื่อเพิ่ม ลบหรือแก้ไขข้อมูล ระบบแสดงดังรูปภาพ โดยสามารถแก้ไขรายการที่มีอยู่ได้เลย            </p>
-        </div>
-
-        <div class="col-12">
-          <q-img
-          src="@/assets/manual/02_data/4_Officer/2-43.png"
-            style="
-              display: block;
-              margin: 0 auto;
-              border-radius: 20px;
-              margin-top: 20px;
-            "
-          />
-
-            <div class="text-center text-grey-6" style="margin-top: 20px">
-                รูปภาพที่ 2 - 43 แก้ไขหรือลบข้อมูล            </div>
-        </div>
-
-
-
-        <div class="col-12" >
-            <p 
-            style="margin-top:50px;
-            margin-left: 10px">
-                 - กดไอคอน          
-                <q-icon name="mdi-plus" style="margin: 0 5px; color: #00aa86;" size="xs"/>
-                เพื่อเพิ่มข้อมูลระบบจะปรากฏช่องเพื่อให้เพิ่มข้อมูลดังรูปภาพและเมื่อกรอกเพื่อเพิ่มข้อมูลเรียบร้อยแล้วให้กดไอคอน
-                <q-icon name="mdi-content-save-outline" style="margin: 0 5px; color: #01435F;" size="xs"/>
-                เพื่อบันทึกร่าง (ข้อมูลยังไม่มีการ-เผยแพร่) โดยการบันทึกเฉพาะข้อมูลร่างนั้นจะมีเพียงผู้ดูแลระบบเท่านั้นที่เห็นได้ สามารถกดไอคอน
-                <q-icon name="mdi-file-remove-outline" style="margin: 0 5px; color: hsl(0, 100%, 50%);" size="xs"/>
-                เพื่อลบบันทึกร่างและสามารถกดไอคอน 
-                <q-icon name="mdi-cloud-upload-outline" style="margin: 0 5px; color: #01435F;" size="xs"/>
-                 เพื่อเผยแพร่ข้อมูล โดยในส่วนการเผยแพร่ข้อมูลนั้นผู้ดูแลระบบมีการตรวจสอบความถูกต้องเรียบร้อยแล้ว และได้ทำการเผยแพร่ให้เจ้าหน้าที่ทุกคนเห็นข้อมูล        
-            </p>
-
-         <q-img
-         src="@/assets/manual/02_data/4_Officer/2-44.png"
-            style="
-                max-width: 100%;
-                display: block;
-                margin: 0 auto;
-                border-radius: 20px;
-                margin-top: 20px;
-                border: 1px solid #97B2DE; ;
-            "
-            />
-            <div class="text-center text-grey-6" style="margin-top: 20px">
-                รูปภาพที่ 2 - 44 เพิ่มข้อมูลในช่องที่ปรากฏ
-            </div>
-
-            <div
-            style="
-              margin-top: 20px;
-              padding: 10px;
-              background-color: #f3f3f3;
-              font-size: 14px;
-              color: #000000;
-              border-radius: 5px;
-            "
-            >
-            หมายเลข 1 ช่องสำหรับกรอกเพิ่มข้อมูลชื่อหน่วยงาน/หน่วยงานต้นสังกัด/ส่วนรายการต้นสังกัด
-            <div style="margin-left: 50px;">
-                - เมื่อไม่ต้องการเพิ่มข้อมูลแล้วให้กดไอคอน
-                <q-icon name="mdi-trash-can-outline" style="margin: 0 5px; color: hsl(0, 100%, 50%);" size="xs"/>
-                เพื่อลบช่องเพิ่มข้อมูล <br>
-                - เมื่อต้องการปิดสถานะให้กดตรงไอคอน
-                <div class="q-toggle__inner relative-position non-selectable q-toggle__inner--truthy text-positive" aria-hidden="true"
-                          style="font-size: 24px; display: inline-block; padding: 0 0.3em !important ; height: 0.35em;">
-                              <div class="q-toggle__thumb absolute flex flex-center no-wrap" style="top: -0.08em;"></div>
-                              <div class="q-toggle__track"></div>
-                          </div> 
-                เพื่อที่จะไม่แสดงข้อมูลนั้นในหน้าอื่นจากนั้นให้กดไอคอน
-                <q-icon name="mdi-content-save-outline" style="margin: 0 5px; color: #01435F;" size="xs"/>
-                เพื่อบันทึกร่าง และกดไอคอน
-                <q-icon name="mdi-cloud-upload-outline" style="margin: 0 5px; color: #01435F;" size="xs"/>
-                เพื่อเผยแพร่ข้อมูล
-            </div>
-            </div>
-            </div>
-
-
-
-            <div class="col-12" style="margin-top: 50px; margin-left: 10px">
-            <p>
-                - เมื่อกดไอคอน
-                <q-icon name="mdi-content-save-outline" style="margin: 0 5px; color: #01435F;" size="xs"/>
-                เพื่อบันทึกร่าง (ข้อมูลยังไม่มีการเผยแพร่) ระบบปรากฏป้าย “บันทึกข้อมูลร่างสำเร็จ” ดังรูปภาพ
-            </p>
-        </div>
-        <div class="col-12">
-          <q-img
-          src="@/assets/manual/02_data/4_Officer/2-45.png"
-            style="
-              display: block;
-              margin: 0 auto;
-              border-radius: 20px;
-              margin-top: 20px;
-            "
-          />
-            <div class="text-center text-grey-6" style="margin-top: 20px">
-                รูปภาพที่ 2 - 45 ป้าย “บันทึกข้อมูลร่างสำเร็จ”            </div>
-
-            <div class="col-12"
-                    style="margin-top: -;
-                    padding: 10px;
-                    background-color: rgb(243, 243, 243);
-                    font-size: 14px;
-                    margin-top: 20px;
-                    border-radius: 5px;
-                    "
-                    >
-                    หมายเลข 1 ระบบแสดงสถานะ “บันทึกข้อมูลร่างสำเร็จ” หลังจากกดบันทึกเพิ่มข้อมูลตำแหน่งของข้าราชการ            </div>
-        </div>
-
-
-        <div class="col-12"
-        style="margin-top: 50px; margin-left: 10px; ">
-         - กดไอคอน
-         <q-icon name="mdi-file-remove-outline" style="margin: 0 5px; color: hsl(0, 100%, 50%);" size="xs"/>
-          เพื่อลบบันทึกร่าง ระบบจะขึ้นป้าย “ต้องการลบข้อมูลบันทึกร่างนี้หรือไม่?” ดังรูปภาพ
-
-
-            <q-img class="col-12"
-            src="@/assets/manual/02_data/4_Officer/2-46.png"
-            style="
-                max-width: 70%;
-                display: block;
-                margin: 0 auto;
-                border-radius: 20px;
-                margin-top: 20px;
-                border: 1px solid #97B2DE; ;
-            "
-            />
-            <div class="text-center text-grey-6" style="margin-top: 20px">
-                รูปภาพที่ 2 - 46 ป้าย “ต้องการลบข้อมูลบันทึกร่างนี้หรือไม่?”            </div>
-        </div>
-
-
-
-        <div class="col-12" style="margin-top: 50px; margin-left: 10px">
-            <p>
-                - เมื่อกดปุ่ม “ลบบันทึก” ระบบปรากฏป้าย “ลบข้อมูลร่างสำเร็จ” ดังรูปภาพ และเมื่อกดปุ่ม “ยกเลิก” ระบบจะไม่ทำการลบข้อมูลร่าง            </p>
-        </div>
-        <div class="col-12">
-          <q-img
-          src="@/assets/manual/02_data/4_Officer/2-47.png"
-            style="
-              display: block;
-              margin: 0 auto;
-              border-radius: 20px;
-              margin-top: 20px;
-            "
-          />
-            <div class="text-center text-grey-6" style="margin-top: 20px">
-                รูปภาพที่ 2 - 47 ป้าย “ลบข้อมูลร่างสำเร็จ”            </div>
-
-            <div class="col-12"
-                    style="margin-top: -;
-                    padding: 10px;
-                    background-color: rgb(243, 243, 243);
-                    font-size: 14px;
-                    margin-top: 20px;
-                    border-radius: 5px;
-                    "
-                    >
-                    หมายเลข 1 ระบบแสดงสถานะ “ลบข้อมูลสำเร็จ” หลังจากคลิกยืนยันการลบข้อมูลตำแหน่งของข้าราชการ
-                </div>
-        </div>
-
-
-
-        <div class="col-12" style="margin-top: 50px; margin-left: 10px">
-            <p>
-                - กดไอคอน 
-                <q-icon name="mdi-cloud-upload-outline" style="margin: 0 5px; color: #01435F;" size="xs"/>
-                เพื่อเผยแพร่ข้อมูลระบบปรากฏป้าย “ต้องการเผยแพร่ข้อมูลนี้หรือไม่?” ดังรูปภาพ
-            </p>
-        </div>
-        <div class="col-12">
-          <q-img
-          src="@/assets/manual/02_data/4_Officer/2-48.png"
-            style="
-                max-width: 70%;
-                display: block;
-                margin: 0 auto;
-                border-radius: 20px;
-                margin-top: 20px;
-                border: 1px solid #97B2DE; ;
-            "
-          />
-            <div class="text-center text-grey-6" style="margin-top: 20px">
-                รูปภาพที่ 2 - 48 ป้าย “ต้องการเผยแพร่ข้อมูลนี้หรือไม่?”
-            </div>
-        </div>
-
-
-        <div class="col-12" style="margin-top: 50px; margin-left: 10px">
-            <p>
-                - เมื่อกดปุ่ม “เผยแพร่” ระบบปรากฏป้าย “เผยแพร่ข้อมูลสำเร็จ” ดังรูปภาพ และเมื่อกดปุ่ม“ยกเลิก” ระบบจะไม่ทำการเผยแพร่ข้อมูล            </p>
-        </div>
-        <div class="col-12">
-          <q-img
-          src="@/assets/manual/02_data/4_Officer/2-49.png"
-            style="
-              display: block;
-              margin: 0 auto;
-              border-radius: 20px;
-              margin-top: 20px;
-            "
-          />
-            <div class="text-center text-grey-6" style="margin-top: 20px">
-รูปภาพที่ 2 - 49 ป้าย “เผยแพร่ข้อมูลสำเร็จ”            </div>
-
-            <div class="col-12"
-                    style="margin-top: -;
-                    padding: 10px;
-                    background-color: rgb(243, 243, 243);
-                    font-size: 14px;
-                    margin-top: 20px;
-                    border-radius: 5px;
-                    "
-                    >
-                    หมายเลข 1 ระบบแสดงสถานะ “เผยแพร่ข้อมูลสำเร็จ” หลังจากคลิกเผยแพร่ข้อมูลตำแหน่ง                </div>
-        </div>
-
-
-
-        <div class="col-12" style="margin-top: 50px; margin-left: 10px">
-            <p>
-                - กดไอคอน 
-                <q-icon name="mdi-history" style="margin: 0 5px; color: #31ccec;" size="xs"/>
-                เพื่อดูประวัติข้อมูลแก้ไข ดังรูปภาพ ในกรอบสีแดงสามารถกรอกที่ช่องค้นหาเพื่อสืบค้นข้อมูลหรือที่ช่องคอลัมน์สามารถเลือกรายการเพื่อซ่อน
-            </p>
-        </div>
-        <div class="col-12">
-          <q-img
-          src="@/assets/manual/02_data/4_Officer/2-50.png"
-            style="
-              display: block;
-              margin: 0 auto;
-              border-radius: 20px;
-              margin-top: 20px;
-            "
-          />
-            <div class="text-center text-grey-6" style="margin-top: 20px">
-                รูปภาพที่ 2 - 50 หน้าประวัติแก้ไขข้อมูล
-            </div>
-
-            <div class="col-12"
-                    style="margin-top: -;
-                    padding: 10px;
-                    background-color: rgb(243, 243, 243);
-                    font-size: 14px;
-                    margin-top: 20px;
-                    border-radius: 5px;
-                    "
-                    >
-                    หมายเลข 1 ช่องสำหรับกรอกข้อมูลเพื่อค้นหาและเลือกคอลัมน์แสดงข้อมูลประวัติแก้ไขชื่อตำแหน่งของข้าราชการที่ทำการกรอกค้นหา
-                </div>
-        </div>
-        
-
-
-
-
-
-    
-
-
-      </q-card>
     </div>
-  </div>
-</template>
 
+    <div class="col-12" style="margin-top: 20px; margin-left: 10px">
+      - เมื่อกดเลือกเมนู “ข้อมูลตำแหน่งของข้าราชการ” จะปรากฏรายละเอียดดังรูปภาพ
+    </div>
+
+    <div class="col-12">
+      <q-img
+        src="@/assets/manual/02_data/4_Officer/2-41.png"
+        style="
+          display: block;
+          margin: 0 auto;
+          border-radius: 20px;
+          margin-top: 20px;
+        "
+      />
+      <div class="text-center text-grey-6" style="margin-top: 20px">
+        รูปภาพที่ 2 - 41 รายละเอียดข้อมูลตำแหน่งของข้าราชการ
+      </div>
+    </div>
+
+    <div class="col-12" style="margin-top: 50px; margin-left: 10px">
+      <p>
+        - เลือกกดแถบเมนูย่อย “ตำแหน่งประเภท, ชื่อสายงาน, ชื่อตำแหน่งสายงาน,
+        ด้าน/สาขาของสายงาน, ระดับตำแหน่ง, ชื่อตำแหน่งทางการบริหาร,
+        ด้านทางการบริหารหรือ สถานะของตำแหน่ง” ระบบแสดงข้อมูลโดยสามารถเพิ่ม
+        ลบหรือแก้ไขข้อมูลได้ดังรูปภาพ
+        ซึ่งเมนูย่อยอื่นๆสามารถทำตามขั้นตอนดังต่อไปนี้ได้เนื่องจากมีวิธีการทำและการแสดง
+        หน้าจอเหมือนกันและในกรอบสีแดงที่ช่องค้นหาสามารถสืบค้นข้อมูลและช่องคอลัมน์สามารถเลือกรายการเพื่อซ่อน
+      </p>
+    </div>
+
+    <div class="col-12">
+      <q-img
+        src="@/assets/manual/02_data/4_Officer/2-42.png"
+        style="
+          display: block;
+          margin: 0 auto;
+          border-radius: 20px;
+          margin-top: 20px;
+        "
+      />
+
+      <div class="text-center text-grey-6" style="margin-top: 20px">
+        รูปภาพที่ 2 - 42 แถบเมนูข้อมูลตำแหน่งของข้าราชการ
+      </div>
+
+      <div
+        class="col-12"
+        style="
+          margin-top: -;
+          padding: 10px;
+          background-color: rgb(243, 243, 243);
+          font-size: 14px;
+          margin-top: 20px;
+          border-radius: 5px;
+        "
+      >
+        หมายเลข 1
+        คอลัมน์แสดงชื่อคอลัมน์แสดงข้อมูลย่อยของข้อมูลตำแหน่งของข้าราชการ <br />
+        หมายเลข 2
+        ช่องสำหรับกรอกค้นหาและเลือกคอลัมน์แสดงข้อมูลตามที่ได้ได้การค้นหา
+      </div>
+    </div>
+
+    <div class="col-12">
+      <p style="margin-top: 50px; margin-left: 10px">
+        - กดไอคอน
+        <q-icon
+          name="mdi-pencil-outline"
+          style="margin: 0 5px; color: #02a998"
+          size="xs"
+        />
+        เพื่อเพิ่ม ลบหรือแก้ไขข้อมูล ระบบแสดงดังรูปภาพ
+        โดยสามารถแก้ไขรายการที่มีอยู่ได้เลย
+      </p>
+    </div>
+
+    <div class="col-12">
+      <q-img
+        src="@/assets/manual/02_data/4_Officer/2-43.png"
+        style="
+          display: block;
+          margin: 0 auto;
+          border-radius: 20px;
+          margin-top: 20px;
+        "
+      />
+
+      <div class="text-center text-grey-6" style="margin-top: 20px">
+        รูปภาพที่ 2 - 43 แก้ไขหรือลบข้อมูล
+      </div>
+    </div>
+
+    <div class="col-12">
+      <p style="margin-top: 50px; margin-left: 10px">
+        - กดไอคอน
+        <q-icon
+          name="mdi-plus"
+          style="margin: 0 5px; color: #00aa86"
+          size="xs"
+        />
+        เพื่อเพิ่มข้อมูลระบบจะปรากฏช่องเพื่อให้เพิ่มข้อมูลดังรูปภาพและเมื่อกรอกเพื่อเพิ่มข้อมูลเรียบร้อยแล้วให้กดไอคอน
+        <q-icon
+          name="mdi-content-save-outline"
+          style="margin: 0 5px; color: #01435f"
+          size="xs"
+        />
+        เพื่อบันทึกร่าง (ข้อมูลยังไม่มีการ-เผยแพร่)
+        โดยการบันทึกเฉพาะข้อมูลร่างนั้นจะมีเพียงผู้ดูแลระบบเท่านั้นที่เห็นได้
+        สามารถกดไอคอน
+        <q-icon
+          name="mdi-file-remove-outline"
+          style="margin: 0 5px; color: hsl(0, 100%, 50%)"
+          size="xs"
+        />
+        เพื่อลบบันทึกร่างและสามารถกดไอคอน
+        <q-icon
+          name="mdi-cloud-upload-outline"
+          style="margin: 0 5px; color: #01435f"
+          size="xs"
+        />
+        เพื่อเผยแพร่ข้อมูล
+        โดยในส่วนการเผยแพร่ข้อมูลนั้นผู้ดูแลระบบมีการตรวจสอบความถูกต้องเรียบร้อยแล้ว
+        และได้ทำการเผยแพร่ให้เจ้าหน้าที่ทุกคนเห็นข้อมูล
+      </p>
+
+      <q-img
+        src="@/assets/manual/02_data/4_Officer/2-44.png"
+        style="
+          max-width: 100%;
+          display: block;
+          margin: 0 auto;
+          border-radius: 20px;
+          margin-top: 20px;
+          border: 1px solid #97b2de;
+        "
+      />
+      <div class="text-center text-grey-6" style="margin-top: 20px">
+        รูปภาพที่ 2 - 44 เพิ่มข้อมูลในช่องที่ปรากฏ
+      </div>
+
+      <div
+        style="
+          margin-top: 20px;
+          padding: 10px;
+          background-color: #f3f3f3;
+          font-size: 14px;
+          color: #000000;
+          border-radius: 5px;
+        "
+      >
+        หมายเลข 1
+        ช่องสำหรับกรอกเพิ่มข้อมูลชื่อหน่วยงาน/หน่วยงานต้นสังกัด/ส่วนรายการต้นสังกัด
+        <div style="margin-left: 50px">
+          - เมื่อไม่ต้องการเพิ่มข้อมูลแล้วให้กดไอคอน
+          <q-icon
+            name="mdi-trash-can-outline"
+            style="margin: 0 5px; color: hsl(0, 100%, 50%)"
+            size="xs"
+          />
+          เพื่อลบช่องเพิ่มข้อมูล <br />
+          - เมื่อต้องการปิดสถานะให้กดตรงไอคอน
+          <div
+            class="q-toggle__inner relative-position non-selectable q-toggle__inner--truthy text-positive"
+            aria-hidden="true"
+            style="
+              font-size: 24px;
+              display: inline-block;
+              padding: 0 0.3em !important ;
+              height: 0.35em;
+            "
+          >
+            <div
+              class="q-toggle__thumb absolute flex flex-center no-wrap"
+              style="top: -0.08em"
+            ></div>
+            <div class="q-toggle__track"></div>
+          </div>
+          เพื่อที่จะไม่แสดงข้อมูลนั้นในหน้าอื่นจากนั้นให้กดไอคอน
+          <q-icon
+            name="mdi-content-save-outline"
+            style="margin: 0 5px; color: #01435f"
+            size="xs"
+          />
+          เพื่อบันทึกร่าง และกดไอคอน
+          <q-icon
+            name="mdi-cloud-upload-outline"
+            style="margin: 0 5px; color: #01435f"
+            size="xs"
+          />
+          เพื่อเผยแพร่ข้อมูล
+        </div>
+      </div>
+    </div>
+
+    <div class="col-12" style="margin-top: 50px; margin-left: 10px">
+      <p>
+        - เมื่อกดไอคอน
+        <q-icon
+          name="mdi-content-save-outline"
+          style="margin: 0 5px; color: #01435f"
+          size="xs"
+        />
+        เพื่อบันทึกร่าง (ข้อมูลยังไม่มีการเผยแพร่) ระบบปรากฏป้าย
+        “บันทึกข้อมูลร่างสำเร็จ” ดังรูปภาพ
+      </p>
+    </div>
+    <div class="col-12">
+      <q-img
+        src="@/assets/manual/02_data/4_Officer/2-45.png"
+        style="
+          display: block;
+          margin: 0 auto;
+          border-radius: 20px;
+          margin-top: 20px;
+        "
+      />
+      <div class="text-center text-grey-6" style="margin-top: 20px">
+        รูปภาพที่ 2 - 45 ป้าย “บันทึกข้อมูลร่างสำเร็จ”
+      </div>
+
+      <div
+        class="col-12"
+        style="
+          margin-top: -;
+          padding: 10px;
+          background-color: rgb(243, 243, 243);
+          font-size: 14px;
+          margin-top: 20px;
+          border-radius: 5px;
+        "
+      >
+        หมายเลข 1 ระบบแสดงสถานะ “บันทึกข้อมูลร่างสำเร็จ”
+        หลังจากกดบันทึกเพิ่มข้อมูลตำแหน่งของข้าราชการ
+      </div>
+    </div>
+
+    <div class="col-12" style="margin-top: 50px; margin-left: 10px">
+      - กดไอคอน
+      <q-icon
+        name="mdi-file-remove-outline"
+        style="margin: 0 5px; color: hsl(0, 100%, 50%)"
+        size="xs"
+      />
+      เพื่อลบบันทึกร่าง ระบบจะขึ้นป้าย “ต้องการลบข้อมูลบันทึกร่างนี้หรือไม่?”
+      ดังรูปภาพ
+
+      <q-img
+        class="col-12"
+        src="@/assets/manual/02_data/4_Officer/2-46.png"
+        style="
+          max-width: 70%;
+          display: block;
+          margin: 0 auto;
+          border-radius: 20px;
+          margin-top: 20px;
+          border: 1px solid #97b2de;
+        "
+      />
+      <div class="text-center text-grey-6" style="margin-top: 20px">
+        รูปภาพที่ 2 - 46 ป้าย “ต้องการลบข้อมูลบันทึกร่างนี้หรือไม่?”
+      </div>
+    </div>
+
+    <div class="col-12" style="margin-top: 50px; margin-left: 10px">
+      <p>
+        - เมื่อกดปุ่ม “ลบบันทึก” ระบบปรากฏป้าย “ลบข้อมูลร่างสำเร็จ” ดังรูปภาพ
+        และเมื่อกดปุ่ม “ยกเลิก” ระบบจะไม่ทำการลบข้อมูลร่าง
+      </p>
+    </div>
+    <div class="col-12">
+      <q-img
+        src="@/assets/manual/02_data/4_Officer/2-47.png"
+        style="
+          display: block;
+          margin: 0 auto;
+          border-radius: 20px;
+          margin-top: 20px;
+        "
+      />
+      <div class="text-center text-grey-6" style="margin-top: 20px">
+        รูปภาพที่ 2 - 47 ป้าย “ลบข้อมูลร่างสำเร็จ”
+      </div>
+
+      <div
+        class="col-12"
+        style="
+          margin-top: -;
+          padding: 10px;
+          background-color: rgb(243, 243, 243);
+          font-size: 14px;
+          margin-top: 20px;
+          border-radius: 5px;
+        "
+      >
+        หมายเลข 1 ระบบแสดงสถานะ “ลบข้อมูลสำเร็จ”
+        หลังจากคลิกยืนยันการลบข้อมูลตำแหน่งของข้าราชการ
+      </div>
+    </div>
+
+    <div class="col-12" style="margin-top: 50px; margin-left: 10px">
+      <p>
+        - กดไอคอน
+        <q-icon
+          name="mdi-cloud-upload-outline"
+          style="margin: 0 5px; color: #01435f"
+          size="xs"
+        />
+        เพื่อเผยแพร่ข้อมูลระบบปรากฏป้าย “ต้องการเผยแพร่ข้อมูลนี้หรือไม่?”
+        ดังรูปภาพ
+      </p>
+    </div>
+    <div class="col-12">
+      <q-img
+        src="@/assets/manual/02_data/4_Officer/2-48.png"
+        style="
+          max-width: 70%;
+          display: block;
+          margin: 0 auto;
+          border-radius: 20px;
+          margin-top: 20px;
+          border: 1px solid #97b2de;
+        "
+      />
+      <div class="text-center text-grey-6" style="margin-top: 20px">
+        รูปภาพที่ 2 - 48 ป้าย “ต้องการเผยแพร่ข้อมูลนี้หรือไม่?”
+      </div>
+    </div>
+
+    <div class="col-12" style="margin-top: 50px; margin-left: 10px">
+      <p>
+        - เมื่อกดปุ่ม “เผยแพร่” ระบบปรากฏป้าย “เผยแพร่ข้อมูลสำเร็จ” ดังรูปภาพ
+        และเมื่อกดปุ่ม“ยกเลิก” ระบบจะไม่ทำการเผยแพร่ข้อมูล
+      </p>
+    </div>
+    <div class="col-12">
+      <q-img
+        src="@/assets/manual/02_data/4_Officer/2-49.png"
+        style="
+          display: block;
+          margin: 0 auto;
+          border-radius: 20px;
+          margin-top: 20px;
+        "
+      />
+      <div class="text-center text-grey-6" style="margin-top: 20px">
+        รูปภาพที่ 2 - 49 ป้าย “เผยแพร่ข้อมูลสำเร็จ”
+      </div>
+
+      <div
+        class="col-12"
+        style="
+          margin-top: -;
+          padding: 10px;
+          background-color: rgb(243, 243, 243);
+          font-size: 14px;
+          margin-top: 20px;
+          border-radius: 5px;
+        "
+      >
+        หมายเลข 1 ระบบแสดงสถานะ “เผยแพร่ข้อมูลสำเร็จ”
+        หลังจากคลิกเผยแพร่ข้อมูลตำแหน่ง
+      </div>
+    </div>
+
+    <div class="col-12" style="margin-top: 50px; margin-left: 10px">
+      <p>
+        - กดไอคอน
+        <q-icon
+          name="mdi-history"
+          style="margin: 0 5px; color: #31ccec"
+          size="xs"
+        />
+        เพื่อดูประวัติข้อมูลแก้ไข ดังรูปภาพ
+        ในกรอบสีแดงสามารถกรอกที่ช่องค้นหาเพื่อสืบค้นข้อมูลหรือที่ช่องคอลัมน์สามารถเลือกรายการเพื่อซ่อน
+      </p>
+    </div>
+    <div class="col-12">
+      <q-img
+        src="@/assets/manual/02_data/4_Officer/2-50.png"
+        style="
+          display: block;
+          margin: 0 auto;
+          border-radius: 20px;
+          margin-top: 20px;
+        "
+      />
+      <div class="text-center text-grey-6" style="margin-top: 20px">
+        รูปภาพที่ 2 - 50 หน้าประวัติแก้ไขข้อมูล
+      </div>
+
+      <div
+        class="col-12"
+        style="
+          margin-top: -;
+          padding: 10px;
+          background-color: rgb(243, 243, 243);
+          font-size: 14px;
+          margin-top: 20px;
+          border-radius: 5px;
+        "
+      >
+        หมายเลข 1
+        ช่องสำหรับกรอกข้อมูลเพื่อค้นหาและเลือกคอลัมน์แสดงข้อมูลประวัติแก้ไขชื่อตำแหน่งของข้าราชการที่ทำการกรอกค้นหา
+      </div>
+    </div>
+  </q-card>
+  <!-- </div>
+  </div> -->
+</template>

src/modules/01_manual/components/2_data/25_Employee.vue

@@ -5,7 +5,7 @@ const text = ref("");
 </script>
 
 <template>
-  <div class="row col-12">
+  <!-- <div class="row col-12">
     <div class="col-9">
       <div class="toptitle text-dark col-12 row items-center">
         คู่มือการใช้งานระบบบริหารทรัพยากรบุคคลของกรุงเทพมหานคร
@@ -24,7 +24,7 @@ const text = ref("");
         <div class="custom-topic text-dark">
           <div style="font-size: 16px; font-weight: 700">ระบบข้อมูลหลัก</div>
         </div>
-      </q-card>
+      </q-card> -->
 
       <q-card
         flat
@@ -368,7 +368,7 @@ const text = ref("");
         </div>
  
       </q-card>
-    </div>
+    <!-- </div>
-  </div>
+  </div> -->
 </template>
 

src/modules/01_manual/components/2_data/26_Calendar.vue

@@ -5,7 +5,7 @@ const text = ref("");
 </script>
 
 <template>
-  <div class="row col-12">
+  <!-- <div class="row col-12">
     <div class="col-9">
       <div class="toptitle text-dark col-12 row items-center">
         คู่มือการใช้งานระบบบริหารทรัพยากรบุคคลของกรุงเทพมหานคร
@@ -24,7 +24,7 @@ const text = ref("");
         <div class="custom-topic text-dark">
           <div style="font-size: 16px; font-weight: 700">ระบบข้อมูลหลัก</div>
         </div>
-      </q-card>
+      </q-card> -->
 
       <q-card
         flat
@@ -590,7 +590,7 @@ const text = ref("");
         </div>
  
       </q-card>
-    </div>
+    <!-- </div>
-  </div>
+  </div> -->
 </template>
 

src/modules/01_manual/components/2_data/27_Insignia.vue

@@ -5,7 +5,7 @@ const text = ref("");
 </script>
 
 <template>
-  <div class="row col-12">
+  <!-- <div class="row col-12">
     <div class="col-9">
       <div class="toptitle text-dark col-12 row items-center">
         คู่มือการใช้งานระบบบริหารทรัพยากรบุคคลของกรุงเทพมหานคร
@@ -24,372 +24,431 @@ const text = ref("");
         <div class="custom-topic text-dark">
           <div style="font-size: 16px; font-weight: 700">ระบบข้อมูลหลัก</div>
         </div>
-      </q-card>
+      </q-card> -->
 
-      <q-card
+  <q-card
-        flat
+    flat
-        bordered
+    bordered
-        class="col-12 q-pa-md"
+    class="col-12 q-pa-md"
-        style="border-radius: 0px 0px 8px 8px"
+    style="border-radius: 0px 0px 8px 8px"
-      >
+  >
-      <div style="font-weight: bold; font-size: 15px; color: #00aa86">
+    <div style="font-weight: bold; font-size: 15px; color: #00aa86">
-          2.6 ข้อมูลเครื่องราชอิสริยาภรณ์
+      2.6 ข้อมูลเครื่องราชอิสริยาภรณ์
-        </div>
-
-
-        <div class="col-12" style="margin-top: 20px; margin-left: 10px">
-            - เมื่อกดเลือกเมนู “ข้อมูลเครื่องราชอิสริยาภรณ์” จะปรากฏรายละเอียดดังรูปภาพ        </div>
-
-        <div class="col-12">
-          <q-img
-            src="@/assets/manual/02_data/7_insignia/2-76.png"
-            style="
-              display: block;
-              margin: 0 auto;
-              border-radius: 20px;
-              margin-top: 20px;
-            "
-          />
-            <div class="text-center text-grey-6" style="margin-top: 20px">
-                รูปภาพที่ 2 - 76 รายละเอียดข้อมูลเครื่องราชอิสริยาภรณ์
-            </div>
-        </div>
-
-
-        <div class="col-12" style="margin-top: 50px; margin-left: 10px">
-            <p
-            style="margin-top:50px;
-            margin-left: 10px">
-                 - เลือกกดแถบเมนูย่อย “ลำดับชั้นเครื่องราชฯหรือชื่อเครื่องราชฯ” ระบบจะแสดงข้อมูล ซึ่งจะสามารถเพิ่ม ลบหรือแก้ไขข้อมูลได้ดังรูปภาพซึ่งเมนูย่อย อื่นๆสามารถทำตามขั้นตอน ดังต่อไปนี้ได้เนื่องจากมีวิธีการทำและการแสดงหน้าจอเหมือนกันและในกรอบสีแดงที่ช่องค้นหาสามารถสืบค้นข้อมูลและช่องคอลัมน์สามารถเลือกรายการเพื่อซ่อน
-            </p>
-        </div>
-
-        <div class="col-12">
-          <q-img
-          src="@/assets/manual/02_data/7_insignia/2-77.png"
-            style="
-              display: block;
-              margin: 0 auto;
-              border-radius: 20px;
-              margin-top: 20px;
-            "
-          />
-
-            <div class="text-center text-grey-6" style="margin-top: 20px">
-                รูปภาพที่ 2 - 77 รายละเอียดข้อมูลเครื่องราชอิสริยาภรณ์            </div>
-
-            <div class="col-12"
-                    style="margin-top: -;
-                    padding: 10px;
-                    background-color: rgb(243, 243, 243);
-                    font-size: 14px;
-                    margin-top: 20px;
-                    border-radius: 5px;
-                    "
-                    >
-
-                    หมายเลข 1 คอลัมน์สำหรับคลิกเลือกเพื่อแสดงข้อมูลตามรายชื่อที่ทำการคลิก <br>
-                    หมายเลข 2 ช่องสำหรับกรอกข้อมูลเพื่อค้นหาและช่องคอลัมน์สำหรับเลือกเพื่อแสดงข้อมูลตามที่ทำการค้นหา
-
-            </div>
-        </div>
-
-
-
-        <div class="col-12">
-            <p 
-            style="margin-top:50px;
-            margin-left: 10px">
-                - กดไอคอน
-                <q-icon name="mdi-pencil-outline" style="margin: 0 5px; color: #00aa86;" size="xs"/>
-                เพื่อเพิ่ม ลบหรือแก้ไขข้อมูล ระบบแสดงดังรูปภาพ โดยสามารถเลือกแก้ไขรายการที่มีอยู่ได้เลย             
-            </p>
-        </div>
-
-        <div class="col-12">
-          <q-img
-          src="@/assets/manual/02_data/7_insignia/2-78.png"
-            style="
-              display: block;
-              margin: 0 auto;
-              border-radius: 20px;
-              margin-top: 20px;
-            "
-          />
-
-            <div class="text-center text-grey-6" style="margin-top: 20px">
-                รูปภาพที่ 2 - 78 แก้ไขข้อมูลเครื่องราชอิสริยาภรณ์
-            </div>
-        </div>
-
-
-
-        <div class="col-12" >
-            <p 
-            style="margin-top:50px;
-            margin-left: 10px">
-                 - กดไอคอน          
-                <q-icon name="mdi-plus" style="margin: 0 5px; color: #00aa86;" size="xs"/>
-                เพื่อเพิ่มข้อมูลระบบจะปรากฏช่องเพื่อให้เพิ่มข้อมูลดังรูปภาพและเมื่อกรอกเพื่อเพิ่มข้อมูลเรียบร้อยแล้วให้กดไอคอน  
-                <q-icon name="mdi-content-save-outline" style="margin: 0 5px; color: #01435F;" size="xs"/>
-                เพื่อบันทึกร่าง (ข้อมูลยังไม่มีการ-เผยแพร่) โดยการบันทึกเฉพาะข้อมูลร่างนั้นจะมีเพียงผู้ดูแลระบบเท่านั้นที่เห็นได้ สามารถกดไอคอน                
-                <q-icon name="mdi-file-remove-outline" style="margin: 0 5px; color: hsl(0, 100%, 50%);" size="xs"/>
-                เพื่อลบบันทึกร่างและสามารถกดไอคอน 
-                <q-icon name="mdi-cloud-upload-outline" style="margin: 0 5px; color: #01435F;" size="xs"/>
-                เพื่อเผยแพร่ข้อมูล เพื่อเผยแพร่ข้อมูล โดยในส่วนการเผยแพร่ข้อมูลนั้นผู้ดูแลระบบมีการตรวจสอบความถูกต้องเรียบร้อยแล้ว และได้ทำการเผยแพร่ให้เจ้าหน้าที่ทุกคนเห็นข้อมูล และได้ทำการเผยแพร่ให้เจ้าหน้าที่ทุกคนเห็นข้อมูล
-             </p>
-
-         <q-img
-         src="@/assets/manual/02_data/7_insignia/2-79.png"
-            style="
-                max-width: 100%;
-                display: block;
-                margin: 0 auto;
-                border-radius: 20px;
-                margin-top: 20px;
-                border: 1px solid #97B2DE; ;
-            "
-            />
-            <div class="text-center text-grey-6" style="margin-top: 20px">
-                รูปภาพที่ 2 - 79 เพิ่มข้อมูลในช่องที่ปรากฏ            </div>
-            <div
-            style="
-              margin-top: 20px;
-              padding: 10px;
-              background-color: #f3f3f3;
-              font-size: 14px;
-              color: #000000;
-              border-radius: 5px;
-            "
-            >
-            หมายเลข 1 ช่องสำหรับกรอกเพิ่มข้อมูลชื่อหน่วยงาน/หน่วยงานต้นสังกัด/ส่วนรายการต้นสังกัด
-            <div style="margin-left: 50px;">
-                - เมื่อไม่ต้องการเพิ่มข้อมูลแล้วให้กดไอคอน
-                <q-icon name="mdi-trash-can-outline" style="margin: 0 5px; color: hsl(0, 100%, 50%);" size="xs"/>
-                เพื่อลบช่องเพิ่มข้อมูล <br>
-                - เมื่อต้องการปิดสถานะให้กดตรงไอคอน
-                <div class="q-toggle__inner relative-position non-selectable q-toggle__inner--truthy text-positive" aria-hidden="true"
-                          style="font-size: 24px; display: inline-block; padding: 0 0.3em !important ; height: 0.35em;">
-                              <div class="q-toggle__thumb absolute flex flex-center no-wrap" style="top: -0.08em;"></div>
-                              <div class="q-toggle__track"></div>
-                          </div> 
-                เพื่อที่จะไม่แสดงข้อมูลนั้นในหน้าอื่นจากนั้นให้กดไอคอน
-                <q-icon name="mdi-content-save-outline" style="margin: 0 5px; color: #01435F;" size="xs"/>
-                เพื่อบันทึกร่าง และกดไอคอน
-                <q-icon name="mdi-cloud-upload-outline" style="margin: 0 5px; color: #01435F;" size="xs"/>
-                เพื่อเผยแพร่ข้อมูล
-            </div>
-            </div>
-        </div>
-
-
-        <div class="col-12" style="margin-top: 50px; margin-left: 10px">
-            <p
-            style="margin-top:50px;
-            margin-left: 10px">
-                - เมื่อกดไอคอน
-                <q-icon name="mdi-content-save-outline" style="margin: 0 5px; color: #01435F;" size="xs"/>
-                เพื่อบันทึกร่าง (ข้อมูลยังไม่มีการเผยแพร่) ระบบปรากฏป้าย “บันทึกข้อมูลร่างสำเร็จ” ดังรูปภาพ
-
-            </p>
-        </div>
-
-        <div class="col-12">
-          <q-img
-          src="@/assets/manual/02_data/7_insignia/2-80.png"
-            style="
-              display: block;
-              margin: 0 auto;
-              border-radius: 20px;
-              margin-top: 20px;
-            "
-          />
-
-            <div class="text-center text-grey-6" style="margin-top: 20px">
-                รูปภาพที่ 2 - 80 ป้าย “บันทึกข้อมูลร่างสำเร็จ”
-            </div>
-
-            <div class="col-12"
-                    style="margin-top: -;
-                    padding: 10px;
-                    background-color: rgb(243, 243, 243);
-                    font-size: 14px;
-                    margin-top: 20px;
-                    border-radius: 5px;
-                    "
-                    >
-                    หมายเลข 1 ระบบแสดงสถานะ “บันทึกข้อมูลร่างสำเร็จ” หลังจากคลิกบันทึกการเพิ่มข้อมูลเครื่องราชอิสริยาภรณ์
-
-            </div>
-        </div>
-
-        <div class="col-12"
-        style="margin-top: 50px; margin-left: 10px; ">
-         - กดไอคอน
-         <q-icon name="mdi-file-remove-outline" style="margin: 0 5px; color: hsl(0, 100%, 50%);" size="xs"/>
-          เพื่อลบบันทึกร่าง ระบบจะขึ้นป้าย “ต้องการลบข้อมูลบันทึกร่างนี้หรือไม่?” ดังรูปภาพ
-
-
-            <q-img class="col-12"
-            src="@/assets/manual/02_data/7_insignia/2-81.png"
-            style="
-                max-width: 70%;
-                display: block;
-                margin: 0 auto;
-                border-radius: 20px;
-                margin-top: 20px;
-                border: 1px solid #97B2DE; ;
-            "
-            />
-            <div class="text-center text-grey-6" style="margin-top: 20px">
-                รูปภาพที่ 2 - 81 ป้าย “ต้องการลบข้อมูลบันทึกร่างนี้หรือไม่?”
-            </div>
-        </div>
-
-
-        <div class="col-12" style="margin-top: 50px; margin-left: 10px">
-            <p>
-                - เมื่อกดปุ่ม “ลบบันทึก” ระบบปรากฏป้าย “ลบข้อมูลร่างสำเร็จ” ดังรูปภาพ และเมื่อกดปุ่ม “ยกเลิก” ระบบจะไม่ทำการลบข้อมูลร่าง            </p>
-        </div>
-        <div class="col-12">
-
-            <q-img class="col-12"
-            src="@/assets/manual/02_data/7_insignia/2-82.png"
-            style="
-                max-width: 100%;
-                display: block;
-                margin: 0 auto;
-                border-radius: 20px;
-                margin-top: 20px;
-                border: 1px solid #97B2DE; ;
-            "
-            />
-            <div class="text-center text-grey-6" style="margin-top: 20px">
-                รูปภาพที่ 2 - 82 ป้าย “ลบข้อมูลร่างสำเร็จ”            </div>
-
-            <div class="col-12"
-                    style="margin-top: -;
-                    padding: 10px;
-                    background-color: rgb(243, 243, 243);
-                    font-size: 14px;
-                    margin-top: 20px;
-                    border-radius: 5px;
-                    "
-                    >
-                    หมายเลข 1 ระบบแสดงสถานะ “ลบข้อมูลร่างสำเร็จ” หลังจากที่ทำการคลิกยืนยันการลบข้อมูลร่างของข้อมูลเครื่องราชอิสริยาภรณ์                </div>
-
-        </div>
-
-
-
-        <div class="col-12" style="margin-top: 50px; margin-left: 10px">
-            <p>
-                - กดไอคอน 
-                <q-icon name="mdi-cloud-upload-outline" style="margin: 0 5px; color: #01435F;" size="xs"/>
-                เพื่อเผยแพร่ข้อมูลระบบปรากฏป้าย “ต้องการเผยแพร่ข้อมูลนี้หรือไม่?” ดังรูปภาพ
-            </p>
-        </div>
-        <div class="col-12">
-          <q-img
-          src="@/assets/manual/02_data/7_insignia/2-83.png"
-            style="
-                max-width: 70%;
-                display: block;
-                margin: 0 auto;
-                border-radius: 20px;
-                margin-top: 20px;
-                border: 1px solid #97B2DE; ;
-            "
-          />
-            <div class="text-center text-grey-6" style="margin-top: 20px">
-                รูปภาพที่ 2 - 83 ป้าย “ต้องการเผยแพร่ข้อมูลนี้หรือไม่?”            </div>
-        </div>
-
-
-        <div class="col-12" style="margin-top: 50px; margin-left: 10px">
-            <p>
-                - เมื่อกดปุ่ม “เผยแพร่” ระบบปรากฏป้าย “เผยแพร่ข้อมูลสำเร็จ” ดังรูปภาพ และเมื่อกดปุ่ม“ยกเลิก” ระบบจะไม่ทำการเผยแพร่ข้อมูล        
-            </p>
-        </div>
-        <div class="col-12">
-
-            <q-img class="col-12"
-            src="@/assets/manual/02_data/7_insignia/2-84.png"
-            style="
-                max-width: 100%;
-                display: block;
-                margin: 0 auto;
-                border-radius: 20px;
-                margin-top: 20px;
-                border: 1px solid #97B2DE; ;
-            "
-            />
-            <div class="text-center text-grey-6" style="margin-top: 20px">
-                รูปภาพที่ 2 - 84 ป้าย “เผยแพร่ข้อมูลสำเร็จ”
-            </div>
-
-            <div class="col-12"
-                    style="margin-top: -;
-                    padding: 10px;
-                    background-color: rgb(243, 243, 243);
-                    font-size: 14px;
-                    margin-top: 20px;
-                    border-radius: 5px;
-                    "
-                    >
-                    หมายเลข 1 ระบบแสดงสถานะ “เผยแพร่ข้อมูลสำเร็จ” หลังจากที่ทำการคลิกยืนยันการเผยแพร่ข้อมูลเครื่องราชอิสริยาภรณ์
-            </div>
-        </div>
-
-
-
-
-
-        <div class="col-12" style="margin-top: 50px; margin-left: 10px">
-            <p>
-                - กดไอคอน 
-                <q-icon name="mdi-history" style="margin: 0 5px; color: #31ccec;" size="xs"/>
-                เพื่อดูประวัติข้อมูลแก้ไข ดังรูปภาพ ในกรอบสีแดงสามารถกรอกที่ช่องค้นหาเพื่อสืบค้นข้อมูลหรือที่ช่องคอลัมน์สามารถเลือกรายการเพื่อซ่อน            </p>
-        </div>
-        <div class="col-12">
-          <q-img
-          src="@/assets/manual/02_data/7_insignia/2-85.png"
-            style="
-              display: block;
-              margin: 0 auto;
-              border-radius: 20px;
-              margin-top: 20px;
-            "
-          />
-            <div class="text-center text-grey-6" style="margin-top: 20px">
-                รูปภาพที่ 2 - 85 หน้าประวัติแก้ไขข้อมูล            
-            </div>
-
-            <div class="col-12"
-                    style="margin-top: -;
-                    padding: 10px;
-                    background-color: rgb(243, 243, 243);
-                    font-size: 14px;
-                    margin-top: 20px;
-                    border-radius: 5px;
-                    "
-                    >
-                    หมายเลข 1 ช่องสำหรับกรอกข้อมูลเพื่อค้นหาและช่องสำหรับคลิกเลือกคอลัมน์แสดงข้อมูล
-                </div>
-        </div>
-
-
-
-
-
-
-
-
-
-
- 
-      </q-card>
     </div>
-  </div>
-</template>
 
+    <div class="col-12" style="margin-top: 20px; margin-left: 10px">
+      - เมื่อกดเลือกเมนู “ข้อมูลเครื่องราชอิสริยาภรณ์”
+      จะปรากฏรายละเอียดดังรูปภาพ
+    </div>
+
+    <div class="col-12">
+      <q-img
+        src="@/assets/manual/02_data/7_insignia/2-76.png"
+        style="
+          display: block;
+          margin: 0 auto;
+          border-radius: 20px;
+          margin-top: 20px;
+        "
+      />
+      <div class="text-center text-grey-6" style="margin-top: 20px">
+        รูปภาพที่ 2 - 76 รายละเอียดข้อมูลเครื่องราชอิสริยาภรณ์
+      </div>
+    </div>
+
+    <div class="col-12" style="margin-top: 50px; margin-left: 10px">
+      <p style="margin-top: 50px; margin-left: 10px">
+        - เลือกกดแถบเมนูย่อย “ลำดับชั้นเครื่องราชฯหรือชื่อเครื่องราชฯ”
+        ระบบจะแสดงข้อมูล ซึ่งจะสามารถเพิ่ม
+        ลบหรือแก้ไขข้อมูลได้ดังรูปภาพซึ่งเมนูย่อย อื่นๆสามารถทำตามขั้นตอน
+        ดังต่อไปนี้ได้เนื่องจากมีวิธีการทำและการแสดงหน้าจอเหมือนกันและในกรอบสีแดงที่ช่องค้นหาสามารถสืบค้นข้อมูลและช่องคอลัมน์สามารถเลือกรายการเพื่อซ่อน
+      </p>
+    </div>
+
+    <div class="col-12">
+      <q-img
+        src="@/assets/manual/02_data/7_insignia/2-77.png"
+        style="
+          display: block;
+          margin: 0 auto;
+          border-radius: 20px;
+          margin-top: 20px;
+        "
+      />
+
+      <div class="text-center text-grey-6" style="margin-top: 20px">
+        รูปภาพที่ 2 - 77 รายละเอียดข้อมูลเครื่องราชอิสริยาภรณ์
+      </div>
+
+      <div
+        class="col-12"
+        style="
+          margin-top: -;
+          padding: 10px;
+          background-color: rgb(243, 243, 243);
+          font-size: 14px;
+          margin-top: 20px;
+          border-radius: 5px;
+        "
+      >
+        หมายเลข 1 คอลัมน์สำหรับคลิกเลือกเพื่อแสดงข้อมูลตามรายชื่อที่ทำการคลิก
+        <br />
+        หมายเลข 2
+        ช่องสำหรับกรอกข้อมูลเพื่อค้นหาและช่องคอลัมน์สำหรับเลือกเพื่อแสดงข้อมูลตามที่ทำการค้นหา
+      </div>
+    </div>
+
+    <div class="col-12">
+      <p style="margin-top: 50px; margin-left: 10px">
+        - กดไอคอน
+        <q-icon
+          name="mdi-pencil-outline"
+          style="margin: 0 5px; color: #00aa86"
+          size="xs"
+        />
+        เพื่อเพิ่ม ลบหรือแก้ไขข้อมูล ระบบแสดงดังรูปภาพ
+        โดยสามารถเลือกแก้ไขรายการที่มีอยู่ได้เลย
+      </p>
+    </div>
+
+    <div class="col-12">
+      <q-img
+        src="@/assets/manual/02_data/7_insignia/2-78.png"
+        style="
+          display: block;
+          margin: 0 auto;
+          border-radius: 20px;
+          margin-top: 20px;
+        "
+      />
+
+      <div class="text-center text-grey-6" style="margin-top: 20px">
+        รูปภาพที่ 2 - 78 แก้ไขข้อมูลเครื่องราชอิสริยาภรณ์
+      </div>
+    </div>
+
+    <div class="col-12">
+      <p style="margin-top: 50px; margin-left: 10px">
+        - กดไอคอน
+        <q-icon
+          name="mdi-plus"
+          style="margin: 0 5px; color: #00aa86"
+          size="xs"
+        />
+        เพื่อเพิ่มข้อมูลระบบจะปรากฏช่องเพื่อให้เพิ่มข้อมูลดังรูปภาพและเมื่อกรอกเพื่อเพิ่มข้อมูลเรียบร้อยแล้วให้กดไอคอน
+        <q-icon
+          name="mdi-content-save-outline"
+          style="margin: 0 5px; color: #01435f"
+          size="xs"
+        />
+        เพื่อบันทึกร่าง (ข้อมูลยังไม่มีการ-เผยแพร่)
+        โดยการบันทึกเฉพาะข้อมูลร่างนั้นจะมีเพียงผู้ดูแลระบบเท่านั้นที่เห็นได้
+        สามารถกดไอคอน
+        <q-icon
+          name="mdi-file-remove-outline"
+          style="margin: 0 5px; color: hsl(0, 100%, 50%)"
+          size="xs"
+        />
+        เพื่อลบบันทึกร่างและสามารถกดไอคอน
+        <q-icon
+          name="mdi-cloud-upload-outline"
+          style="margin: 0 5px; color: #01435f"
+          size="xs"
+        />
+        เพื่อเผยแพร่ข้อมูล เพื่อเผยแพร่ข้อมูล
+        โดยในส่วนการเผยแพร่ข้อมูลนั้นผู้ดูแลระบบมีการตรวจสอบความถูกต้องเรียบร้อยแล้ว
+        และได้ทำการเผยแพร่ให้เจ้าหน้าที่ทุกคนเห็นข้อมูล
+        และได้ทำการเผยแพร่ให้เจ้าหน้าที่ทุกคนเห็นข้อมูล
+      </p>
+
+      <q-img
+        src="@/assets/manual/02_data/7_insignia/2-79.png"
+        style="
+          max-width: 100%;
+          display: block;
+          margin: 0 auto;
+          border-radius: 20px;
+          margin-top: 20px;
+          border: 1px solid #97b2de;
+        "
+      />
+      <div class="text-center text-grey-6" style="margin-top: 20px">
+        รูปภาพที่ 2 - 79 เพิ่มข้อมูลในช่องที่ปรากฏ
+      </div>
+      <div
+        style="
+          margin-top: 20px;
+          padding: 10px;
+          background-color: #f3f3f3;
+          font-size: 14px;
+          color: #000000;
+          border-radius: 5px;
+        "
+      >
+        หมายเลข 1
+        ช่องสำหรับกรอกเพิ่มข้อมูลชื่อหน่วยงาน/หน่วยงานต้นสังกัด/ส่วนรายการต้นสังกัด
+        <div style="margin-left: 50px">
+          - เมื่อไม่ต้องการเพิ่มข้อมูลแล้วให้กดไอคอน
+          <q-icon
+            name="mdi-trash-can-outline"
+            style="margin: 0 5px; color: hsl(0, 100%, 50%)"
+            size="xs"
+          />
+          เพื่อลบช่องเพิ่มข้อมูล <br />
+          - เมื่อต้องการปิดสถานะให้กดตรงไอคอน
+          <div
+            class="q-toggle__inner relative-position non-selectable q-toggle__inner--truthy text-positive"
+            aria-hidden="true"
+            style="
+              font-size: 24px;
+              display: inline-block;
+              padding: 0 0.3em !important ;
+              height: 0.35em;
+            "
+          >
+            <div
+              class="q-toggle__thumb absolute flex flex-center no-wrap"
+              style="top: -0.08em"
+            ></div>
+            <div class="q-toggle__track"></div>
+          </div>
+          เพื่อที่จะไม่แสดงข้อมูลนั้นในหน้าอื่นจากนั้นให้กดไอคอน
+          <q-icon
+            name="mdi-content-save-outline"
+            style="margin: 0 5px; color: #01435f"
+            size="xs"
+          />
+          เพื่อบันทึกร่าง และกดไอคอน
+          <q-icon
+            name="mdi-cloud-upload-outline"
+            style="margin: 0 5px; color: #01435f"
+            size="xs"
+          />
+          เพื่อเผยแพร่ข้อมูล
+        </div>
+      </div>
+    </div>
+
+    <div class="col-12" style="margin-top: 50px; margin-left: 10px">
+      <p style="margin-top: 50px; margin-left: 10px">
+        - เมื่อกดไอคอน
+        <q-icon
+          name="mdi-content-save-outline"
+          style="margin: 0 5px; color: #01435f"
+          size="xs"
+        />
+        เพื่อบันทึกร่าง (ข้อมูลยังไม่มีการเผยแพร่) ระบบปรากฏป้าย
+        “บันทึกข้อมูลร่างสำเร็จ” ดังรูปภาพ
+      </p>
+    </div>
+
+    <div class="col-12">
+      <q-img
+        src="@/assets/manual/02_data/7_insignia/2-80.png"
+        style="
+          display: block;
+          margin: 0 auto;
+          border-radius: 20px;
+          margin-top: 20px;
+        "
+      />
+
+      <div class="text-center text-grey-6" style="margin-top: 20px">
+        รูปภาพที่ 2 - 80 ป้าย “บันทึกข้อมูลร่างสำเร็จ”
+      </div>
+
+      <div
+        class="col-12"
+        style="
+          margin-top: -;
+          padding: 10px;
+          background-color: rgb(243, 243, 243);
+          font-size: 14px;
+          margin-top: 20px;
+          border-radius: 5px;
+        "
+      >
+        หมายเลข 1 ระบบแสดงสถานะ “บันทึกข้อมูลร่างสำเร็จ”
+        หลังจากคลิกบันทึกการเพิ่มข้อมูลเครื่องราชอิสริยาภรณ์
+      </div>
+    </div>
+
+    <div class="col-12" style="margin-top: 50px; margin-left: 10px">
+      - กดไอคอน
+      <q-icon
+        name="mdi-file-remove-outline"
+        style="margin: 0 5px; color: hsl(0, 100%, 50%)"
+        size="xs"
+      />
+      เพื่อลบบันทึกร่าง ระบบจะขึ้นป้าย “ต้องการลบข้อมูลบันทึกร่างนี้หรือไม่?”
+      ดังรูปภาพ
+
+      <q-img
+        class="col-12"
+        src="@/assets/manual/02_data/7_insignia/2-81.png"
+        style="
+          max-width: 70%;
+          display: block;
+          margin: 0 auto;
+          border-radius: 20px;
+          margin-top: 20px;
+          border: 1px solid #97b2de;
+        "
+      />
+      <div class="text-center text-grey-6" style="margin-top: 20px">
+        รูปภาพที่ 2 - 81 ป้าย “ต้องการลบข้อมูลบันทึกร่างนี้หรือไม่?”
+      </div>
+    </div>
+
+    <div class="col-12" style="margin-top: 50px; margin-left: 10px">
+      <p>
+        - เมื่อกดปุ่ม “ลบบันทึก” ระบบปรากฏป้าย “ลบข้อมูลร่างสำเร็จ” ดังรูปภาพ
+        และเมื่อกดปุ่ม “ยกเลิก” ระบบจะไม่ทำการลบข้อมูลร่าง
+      </p>
+    </div>
+    <div class="col-12">
+      <q-img
+        class="col-12"
+        src="@/assets/manual/02_data/7_insignia/2-82.png"
+        style="
+          max-width: 100%;
+          display: block;
+          margin: 0 auto;
+          border-radius: 20px;
+          margin-top: 20px;
+          border: 1px solid #97b2de;
+        "
+      />
+      <div class="text-center text-grey-6" style="margin-top: 20px">
+        รูปภาพที่ 2 - 82 ป้าย “ลบข้อมูลร่างสำเร็จ”
+      </div>
+
+      <div
+        class="col-12"
+        style="
+          margin-top: -;
+          padding: 10px;
+          background-color: rgb(243, 243, 243);
+          font-size: 14px;
+          margin-top: 20px;
+          border-radius: 5px;
+        "
+      >
+        หมายเลข 1 ระบบแสดงสถานะ “ลบข้อมูลร่างสำเร็จ”
+        หลังจากที่ทำการคลิกยืนยันการลบข้อมูลร่างของข้อมูลเครื่องราชอิสริยาภรณ์
+      </div>
+    </div>
+
+    <div class="col-12" style="margin-top: 50px; margin-left: 10px">
+      <p>
+        - กดไอคอน
+        <q-icon
+          name="mdi-cloud-upload-outline"
+          style="margin: 0 5px; color: #01435f"
+          size="xs"
+        />
+        เพื่อเผยแพร่ข้อมูลระบบปรากฏป้าย “ต้องการเผยแพร่ข้อมูลนี้หรือไม่?”
+        ดังรูปภาพ
+      </p>
+    </div>
+    <div class="col-12">
+      <q-img
+        src="@/assets/manual/02_data/7_insignia/2-83.png"
+        style="
+          max-width: 70%;
+          display: block;
+          margin: 0 auto;
+          border-radius: 20px;
+          margin-top: 20px;
+          border: 1px solid #97b2de;
+        "
+      />
+      <div class="text-center text-grey-6" style="margin-top: 20px">
+        รูปภาพที่ 2 - 83 ป้าย “ต้องการเผยแพร่ข้อมูลนี้หรือไม่?”
+      </div>
+    </div>
+
+    <div class="col-12" style="margin-top: 50px; margin-left: 10px">
+      <p>
+        - เมื่อกดปุ่ม “เผยแพร่” ระบบปรากฏป้าย “เผยแพร่ข้อมูลสำเร็จ” ดังรูปภาพ
+        และเมื่อกดปุ่ม“ยกเลิก” ระบบจะไม่ทำการเผยแพร่ข้อมูล
+      </p>
+    </div>
+    <div class="col-12">
+      <q-img
+        class="col-12"
+        src="@/assets/manual/02_data/7_insignia/2-84.png"
+        style="
+          max-width: 100%;
+          display: block;
+          margin: 0 auto;
+          border-radius: 20px;
+          margin-top: 20px;
+          border: 1px solid #97b2de;
+        "
+      />
+      <div class="text-center text-grey-6" style="margin-top: 20px">
+        รูปภาพที่ 2 - 84 ป้าย “เผยแพร่ข้อมูลสำเร็จ”
+      </div>
+
+      <div
+        class="col-12"
+        style="
+          margin-top: -;
+          padding: 10px;
+          background-color: rgb(243, 243, 243);
+          font-size: 14px;
+          margin-top: 20px;
+          border-radius: 5px;
+        "
+      >
+        หมายเลข 1 ระบบแสดงสถานะ “เผยแพร่ข้อมูลสำเร็จ”
+        หลังจากที่ทำการคลิกยืนยันการเผยแพร่ข้อมูลเครื่องราชอิสริยาภรณ์
+      </div>
+    </div>
+
+    <div class="col-12" style="margin-top: 50px; margin-left: 10px">
+      <p>
+        - กดไอคอน
+        <q-icon
+          name="mdi-history"
+          style="margin: 0 5px; color: #31ccec"
+          size="xs"
+        />
+        เพื่อดูประวัติข้อมูลแก้ไข ดังรูปภาพ
+        ในกรอบสีแดงสามารถกรอกที่ช่องค้นหาเพื่อสืบค้นข้อมูลหรือที่ช่องคอลัมน์สามารถเลือกรายการเพื่อซ่อน
+      </p>
+    </div>
+    <div class="col-12">
+      <q-img
+        src="@/assets/manual/02_data/7_insignia/2-85.png"
+        style="
+          display: block;
+          margin: 0 auto;
+          border-radius: 20px;
+          margin-top: 20px;
+        "
+      />
+      <div class="text-center text-grey-6" style="margin-top: 20px">
+        รูปภาพที่ 2 - 85 หน้าประวัติแก้ไขข้อมูล
+      </div>
+
+      <div
+        class="col-12"
+        style="
+          margin-top: -;
+          padding: 10px;
+          background-color: rgb(243, 243, 243);
+          font-size: 14px;
+          margin-top: 20px;
+          border-radius: 5px;
+        "
+      >
+        หมายเลข 1
+        ช่องสำหรับกรอกข้อมูลเพื่อค้นหาและช่องสำหรับคลิกเลือกคอลัมน์แสดงข้อมูล
+      </div>
+    </div>
+  </q-card>
+  <!-- </div>
+  </div> -->
+</template>

src/modules/01_manual/components/2_data/view.vue

@@ -0,0 +1,79 @@
+<script setup lang="ts">
+import MainData from "../2_data/21_Main.vue";
+import About from "../2_data/22_About.vue";
+import gov from "../2_data/23_Gov.vue";
+import officer from "../2_data/24_Officer.vue";
+import employee from "../2_data/25_Employee.vue";
+import calender from "../2_data/26_Calendar.vue";
+import insignia from "../2_data/27_Insignia.vue";
+</script>
+<template>
+  <div class="col-12 row">
+    <div
+      class="toptitle text-dark col-12 row items-center"
+      style="padding-top: 40px"
+    >
+      คู่มือการใช้งานระบบข้อมูลหลัก
+    </div>
+    <div class="row col-12 q-gutter-xs">
+      <div
+        id="MainData"
+        name="1"
+        class="row col-12 information"
+        style="padding-bottom: 60px"
+      >
+        <MainData />
+      </div>
+      <div
+        id="About"
+        name="2"
+        class="row col-12 information"
+        style="padding-bottom: 60px"
+      >
+        <About />
+      </div>
+      <div
+        id="gov"
+        name="3"
+        class="row col-12 information"
+        style="padding-bottom: 60px"
+      >
+        <gov />
+      </div>
+      <div
+        id="officer"
+        name="4"
+        class="row col-12 information"
+        style="padding-bottom: 60px"
+      >
+        <officer />
+      </div>
+      <div
+        id="employee"
+        name="5"
+        class="row col-12 information"
+        style="padding-bottom: 60px"
+      >
+        <employee />
+      </div>
+      <div
+        id="calender"
+        name="6"
+        class="row col-12 information"
+        style="padding-bottom: 60px"
+      >
+        <calender />
+      </div>
+      <div
+        id="insignia"
+        name="6"
+        class="row col-12 information"
+        style="padding-bottom: 60px"
+      >
+        <insignia />
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped></style>

src/modules/01_manual/router.ts

@@ -1,3 +1,4 @@
+const viewLogin = () => import("@/modules/01_manual/components/1_login/view.vue")
 const Mainlogin = () => import("@/modules/01_manual/components/1_login/01_Main.vue");
 const MainLog = () => import("@/modules/01_manual/components/1_login/02_login.vue");
 const Mainpass = () => import("@/modules/01_manual/components/1_login/03_Password.vue");
@@ -6,6 +7,7 @@ const Mainlogout = () => import("@/modules/01_manual/components/1_login/05_logou
 const Mainnoti = () => import("@/modules/01_manual/components/1_login/06_noti.vue");
 
 
+const viewDatamain = () => import("@/modules/01_manual/components/2_data/view.vue")
 const Datamain = () => import("@/modules/01_manual/components/2_data/21_Main.vue");
 const Dataabout = () => import("@/modules/01_manual/components/2_data/22_About.vue");
 const Datagov = () => import("@/modules/01_manual/components/2_data/23_Gov.vue");
@@ -53,13 +55,23 @@ export default [
   {
     path: "/manual",
     name: "manual",
-    component: Mainlogin,
+    component: viewLogin,
     meta: {
       Auth: true,
       Key: [10],
       Role: "order",
     },
   },
+  // {
+  //   path: "/manual",
+  //   name: "manual",
+  //   component: Mainlogin,
+  //   meta: {
+  //     Auth: true,
+  //     Key: [10],
+  //     Role: "order",
+  //   },
+  // },
 
   {
     path: "/login/log",
@@ -71,7 +83,7 @@ export default [
       Role: "order",
     },
   },
-  
+
   {
     path: "/login/password",
     name: "mainpassword",
@@ -122,9 +134,9 @@ export default [
 
 
   {
-    path: "/Datamain",
+    path: "/datamain",
-    name: "Datamain",
+    name: "datamain",
-    component: Datamain,
+    component: viewDatamain,
     meta: {
       Auth: true,
       Key: [10],
@@ -200,12 +212,12 @@ export default [
     },
   },
 
-/****** 3 ********/
+  /****** 3 ********/
 
 
   {
-    path: "/Structuremain",
+    path: "/structuremain",
-    name: "Structuremain",
+    name: "structuremain",
     component: Structuremain,
     meta: {
       Auth: true,
@@ -293,10 +305,10 @@ export default [
 
 
 
-/****** 4 ********/
+  /****** 4 ********/
 
   {
-    path: "/Registrationmain",
+    path: "/registrationmain",
     name: "registmain",
     component: registmain,
     meta: {
@@ -365,10 +377,10 @@ export default [
 
 
 
-/****** 5 ********/
+  /****** 5 ********/
 
   {
-    path: "/Recruitmain",
+    path: "/recruitmain",
     name: "recruitmain",
     component: recruitmain,
     meta: {

src/views/MainLayout.vue

@@ -17,6 +17,9 @@ import type {
 } from "../interface/request/main/main";
 import {
   menuList,
+  tabListLogin,
+  tabListDatamain,
+  tabStructuremain,
   tabList,
   // tabListPlacement,
 } from "../interface/request/main/main";
@@ -50,6 +53,8 @@ const role = ref<string[]>([]);
 const notiTrigger = ref<boolean>(false);
 const text = ref<string>("");
 
+const listTab = ref<any>([]);
+
 const notiList = ref<notiType[]>([
   {
     id: "1",
@@ -85,20 +90,13 @@ const options = ref<optionType[]>([
 const tabScroll = () => {
   return route.name == "registryDetail";
 };
+const tabLogin = async () => {
+  await setListTab();
 
-const tabScroll2 = () => {
+  let namePath = menuList[1].children.find((e: any) => e.path === route.path);
-  let pathName = "";
+  if (namePath) {
-  // let childernName: any = [];
-  // tabList.forEach((e: any) => {
-  //   childernName = e.childern;
-  // });
-  // console.log(childernName);
-
-  pathName = tabList.find((e: any) => e.path === route.path);
-  if (pathName) {
     return true;
   }
-  // return route.name == "manual";
 };
 
 /**
@@ -137,6 +135,8 @@ const onScroll = (scroll: ScrollType) => {
  * updateScroll เป็น function active แทปด้านขวา
  */
 const updateScroll = (position: number) => {
+  console.log(position);
+
   // เมื่อ position เป็น undifind ให้ position เป็น ตำแหน่ง top ที่ scroll
   if (position === void 0) {
     position = document.documentElement.scrollTop || document.body.scrollTop;
@@ -146,8 +146,8 @@ const updateScroll = (position: number) => {
   /**
    * วนหา id ของ div นั้น
    */
-  for (const i in tabList) {
+  for (const i in listTab.value) {
-    const section = tabList[i];
+    const section = listTab.value[i];
     const item = document.getElementById(section.tag);
     /**
      * วนหา id ของ div หน้านั้น
@@ -187,9 +187,8 @@ const updateScroll = (position: number) => {
  * ให้แสดง แทปด้านขวา เมื่อเข้าหน้า รายละเอียดทะเบียนประวัติ และ rightActive เท่ากับ true
  */
 const activeBtn = () => {
-  return route.name == "registryDetail" && rightActive.value;
+  return route.name == "manual" && rightActive.value;
 };
-
 /**
  * เมื่อเริ่มต้นโปรแกรมให้ฟัง event resize และ function myEventHandler
  * set function myEventHandler เพราะ state ยังไม่เซ็ท , state เซ็ทเมื่อ หน้าจอเริ่ม ขยับหน้าจอ
@@ -197,14 +196,23 @@ const activeBtn = () => {
  * ยังจับ boolean ผิด จึงต้อง set
  */
 onMounted(async () => {
-  console.log(tabList);
-
   myEventHandler(null, false);
   window.addEventListener("resize", (e: any) => {
     myEventHandler(e, true);
   });
+  await setListTab();
 });
 
+const setListTab = () => {
+  if (route.name == "manual") {
+    listTab.value = tabListLogin;
+  } else if (route.name == "datamain") {
+    listTab.value = tabListDatamain;
+  } else if (route.name == "structuremain") {
+    listTab.value = tabStructuremain;
+  }
+};
+
 /**
  * เมื่อออกจากโปรแกรม ให้ ยกเลิกการฟัง event resize
  */
@@ -271,9 +279,6 @@ const activeMenu = (path: string) => {
 const activeTab = (tag: string) => {
   return tabData.value == tag;
 };
-const activeTab2 = (tag: string) => {
-  return tabData.value == tag;
-};
 
 /**
  * คลิกเพื่อให้ router หรือ scroll ไปยังตำแหน่งนั้นๆ
@@ -343,27 +348,27 @@ const activeBtnPlacement = () => {
   return route.name == "PlacementPersonalDetail" && rightActive.value;
 };
 
-const activeTabPlacement = (tag: string) => {
+// const activeTabPlacement = (tag: string) => {
-  return tabData.value == tag;
+//   return tabData.value == tag;
-};
+// };
 
-const tagClickPlacement = (tag: string) => {
+// const tagClickPlacement = (tag: string) => {
-  const hash = `#${tag}`;
+//   const hash = `#${tag}`;
-  const items = document.getElementById(tag);
+//   const items = document.getElementById(tag);
-  const offset = Math.max(0, items == null ? 0 : items.offsetTop + 50);
+//   const offset = Math.max(0, items == null ? 0 : items.offsetTop + 50);
-  //   router.replace({ hash });
+//   //   router.replace({ hash });
-  if (route.hash !== hash) {
+//   if (route.hash !== hash) {
-    const checkPlacement = activeBtnPlacement();
+//     const checkPlacement = activeBtnPlacement();
-    if (checkPlacement) {
+//     if (checkPlacement) {
-      drawerR.value = !drawerR.value;
+//       drawerR.value = !drawerR.value;
-      setVerticalScrollPosition(window, offset, 300);
+//       setVerticalScrollPosition(window, offset, 300);
-    } else {
+//     } else {
-      setVerticalScrollPosition(window, offset, 300);
+//       setVerticalScrollPosition(window, offset, 300);
-    }
+//     }
-  } else {
+//   } else {
-    setVerticalScrollPosition(window, offset, 300);
+//     setVerticalScrollPosition(window, offset, 300);
-  }
+//   }
-};
+// };
 //**** End Tab Right หน้าจอแก้ไขข้อมูลส่วนตัวของผู้สอบผ่าน ****\\
 
 /**
@@ -704,13 +709,7 @@ const clickTag = (val: string) => {
                 class="menuSub"
                 expand-icon="mdi-chevron-down"
                 expanded-icon="mdi-chevron-up"
-                v-if="
+                v-if="menuItem.key == 2"
-                  menuItem.key == 3 ||
-                  menuItem.key == 5 ||
-                  menuItem.key == 6 ||
-                  menuItem.key == 7 ||
-                  menuItem.key == 8
-                "
               >
                 <template v-slot:header>
                   <q-item-section avatar>
@@ -773,7 +772,7 @@ const clickTag = (val: string) => {
                   clickable
                   v-for="(subMenu, j) in menuItem.children"
                   :key="j"
-                  :to="{ name: `${subMenu.path}` }"
+                  :to="subMenu.path"
                 >
                   <q-item-section>
                     <q-item-label class="font-400">{{
@@ -830,7 +829,7 @@ const clickTag = (val: string) => {
       <q-scroll-area class="fit">
         <q-list padding>
           <q-item
-            v-for="(tabItem, index) in tabList"
+            v-for="(tabItem, index) in tabListLogin"
             :key="index"
             :id="'tab--' + tabItem.tag"
             class="tabNative"
@@ -860,7 +859,7 @@ const clickTag = (val: string) => {
       side="right"
       class="bg-grey-2"
       show-if-above
-      v-if="tabScroll2()"
+      v-if="tabLogin()"
       v-model="drawerR"
       :width="250"
       :breakpoint="1023"
@@ -868,17 +867,17 @@ const clickTag = (val: string) => {
       <q-scroll-area class="fit">
         <q-list padding>
           <q-item
-            v-for="(tabItem, index) in tabList"
+            v-for="(tabItem, index) in listTab"
             :key="index"
-            :id="'tab--' + tabItem.no"
+            :id="'tab--' + tabItem.tag"
             class="tabNative"
             active-class="text-blue-7 active-item text-weight-medium tabActive"
-            :active="activeTab2(tabItem.no)"
+            :active="activeTab(tabItem.tag)"
             clickable
             v-ripple
             dense
             exact
-            @click="clickTag(tabItem.path)"
+            @click="tagClick(tabItem.tag)"
           >
             <q-item-section>
               <q-item-label
@@ -890,6 +889,7 @@ const clickTag = (val: string) => {
         </q-list>
       </q-scroll-area>
     </q-drawer>
+
     <!-- drawer page placement2/detail/:id -->
     <!-- <q-drawer
       side="right"