add mainlayout

src/modules/01_metadata/views/Main.vue

@@ -7,10 +7,12 @@
 
     <div class="q-pa-md col-12">
         <div class="text-weight-medium">วัตถุประสงค์ของการพัฒนา
-            <q-card  class="card1 q-pa-md text-weight-regular">
+            <q-card  class="card1 text-weight-regular">
-                <li>
+                <ul>
-                    ระบบที่มีวัตถุประสงค์เพื่อจัดการข้อมูลทรัพยากรบุคคล ช่วยให้สามารถจัดเก็บข้อมูลของพนักงานทั้งหมดได้อย่างมีระบบเกี่ยวข้องกับข้อมูลเกี่ยวกับบุคคล, ข้อมูลโครงสร้างหน่วยงาน ข้อมูลข้าราชการ ข้อมูลลูกจ้าง วันลา และข้อมูลอื่นๆ ที่เกี่ยวข้องกับการจัดการทรัพยากรบุคคล
+                    <li>
-                </li>
+                        ระบบที่มีวัตถุประสงค์เพื่อจัดการข้อมูลทรัพยากรบุคคล ช่วยให้สามารถจัดเก็บข้อมูลของพนักงานทั้งหมดได้อย่างมีระบบเกี่ยวข้องกับข้อมูลเกี่ยวกับบุคคล, ข้อมูลโครงสร้างหน่วยงาน ข้อมูลข้าราชการ ข้อมูลลูกจ้าง วันลา และข้อมูลอื่นๆ ที่เกี่ยวข้องกับการจัดการทรัพยากรบุคคล
+                    </li>
+                </ul>
             </q-card>
         </div>
         <div class="col-12" style="margin-top: 30px;"><q-separator color="grey-3" /></div>
@@ -19,11 +21,14 @@
 
     <div class="q-pa-md col-12" style="padding-top: 0px;">
         <div class="text-weight-medium">ขอบเขตการดูแลระบบ
-            <q-card  class="card1 q-pa-md text-weight-regular">
+            <q-card  class="card1 text-weight-regular">
-                <li>
+                <ul>
-                    เจ้าหน้าที่ทรัพยากรบุคคลต้องรับผิดชอบในการเก็บรวบรวม บันทึก และบริหารจัดการข้อมูลทรัพยากรบุคคลของพนักงานนอกจากนี้พวกเขาต้องรักษา
+                    <li>
-     ความถูกต้องและปลอดภัยของข้อมูลทรัพยากรบุคคลและปฏิบัติตามนโยบายความเป็นส่วนตัว
+                        เจ้าหน้าที่ทรัพยากรบุคคลต้องรับผิดชอบในการเก็บรวบรวม บันทึก และบริหารจัดการข้อมูลทรัพยากรบุคคลของพนักงานนอกจากนี้พวกเขาต้องรักษา
-                </li>
+        ความถูกต้องและปลอดภัยของข้อมูลทรัพยากรบุคคลและปฏิบัติตามนโยบายความเป็นส่วนตัว
+                    </li>  
+                </ul>
+
             </q-card>
         </div>
         <div class="col-12" style="margin-top: 30px;"><q-separator color="grey-3" /></div>
@@ -67,33 +72,69 @@
         <div class="text-weight-medium">คำถามที่พบบ่อย
             <q-card  class="card1 q-pa-md text-weight-regular">
                 <div class="col-12 row">
-                    
+                    <q-icon class="iconQA" name="mdi-cloud-question"/>
-                    <div class="text-weight-medium" style="color: #02A998;">ข้อมูลส่วนบุคคลถูกปกปิดหรือปล่อยไว้หรือไม่?</div>
+                    <div class="text-weight-medium" style="color: #016987;">ข้อมูลส่วนบุคคลถูกปกปิดหรือปล่อยไว้หรือไม่ ?</div>
                     <ul>
                         <li>
-                            มีมาตรการที่เข้มงวดเพื่อรักษาความปลอดภัยของข้อมูลที่เกี่ยวข้องกับทรัพยากรบุคคล รวมถึงการใช้เทคโนโลยีการรักษาความปลอดภัย  การให้สิทธิ์การ
+                            ในระบบข้อมูลทรัพยากรบุคคลของเราข้อมูลส่วนบุคคลถูกควบคุมอย่างเข้มงวดการเข้าถึงถูกจำกัดด้วยสิทธิ์และมีการตรวจสอบเพื่อให้มั่นใจว่าเฉพาะบุคคลที่มีความจำเป็นในการเข้าถึงข้อมูลได้
-                        เข้าถึงข้อมูล, และการป้องกันการใช้ข้อมูลที่ไม่ถูกต้อง
-                        </li>
-                    </ul>
-
-                    <div class="text-weight-medium">2.) การจัดการสิทธิ์การเข้าถึง</div>
-                    <ul>
-                        <li>
-                            กำหนดสิทธิ์การเข้าถึงข้อมูลทรัพยากรบุคคลให้แต่ละบุคคลในองค์กรการควบคุมสิทธิ์จะช่วยลดความเสี่ยงที่เกี่ยวข้องกับการเข้าถึงข้อมูลโดยไม่ได้รับอนุญาต
-                        </li>
-                    </ul>
-
-                    <div class="text-weight-medium">3.) การตรวจสอบและการพัฒนาระบบ</div>
-                    <ul>
-                        <li>
-                            ตรวจสอบและบำรุงรักษาข้อมูลเพื่อให้มั่นใจว่าข้อมูลทรัพยากรบุคคลมีความถูกต้อง,ครบถ้วน และอับเดต ทำการตรวจสอบการป้องกันข้อมูลไม่ถูกส่ง
-หลายครั้ง และดูแลให้มีการบันทึกข้อมูลทรัพยากรบุคคลตลอดเวลา
                         </li>
                     </ul>
                 </div>
+
+                <div class="col-12 row">
+                    <q-icon class="iconQA" name="mdi-cloud-question"/>
+                    <div class="text-weight-medium" style="color: #016987;">มีการสำรองข้อมูลที่มีประสิทธิภาพหรือไม่ ?</div>
+                    <div class="col-12 row">
+                        <ul>
+                            <li>
+                                เรามีกระบวนการสำรองข้อมูลที่ทันสมัยและทดสอบเพื่อให้มั่นใจว่าข้อมูลสามารถกู้คืนได้ทุกครั้งที่จำเป็น
+                            </li>
+                        </ul>
+                    </div>
+                </div>
+
+
+                <div class="col-12 row">
+                    <q-icon class="iconQA" name="mdi-cloud-question"/>
+                    <div class="text-weight-medium" style="color: #016987;">มีปัญหาเกี่ยวกับความเสถียรของระบบหรือไม่ ?</div>
+                    <div class="col-12 row">
+                        <ul>
+                            <li>
+                                เราติดตามและตรวจสอบกิจกรรมที่เกี่ยวข้องกับความปลอดภัยและมีการป้องกันปัญหาที่เป็นไปได้ทั้งจากภัยคุกคามภายนอกและภายใน
+                            </li>
+                        </ul>
+                    </div>
+                </div>
+
+
+                <div class="col-12 row">
+                    <q-icon class="iconQA" name="mdi-cloud-question"/>
+                    <div class="text-weight-medium" style="color: #016987;">มีการโจมตีหรือความเสี่ยงด้านความปลอดภัยที่ต้องระวังหรือไม่ ?</div>
+                    <div class="col-12 row">
+                        <ul>
+                            <li>
+                                เรามีการตรวจสอบความเสถียรของระบบอย่างสม่ำเสมอ และมีแผนการที่จะดำเนินการแก้ไขทันทีหากมีปัญหา
+                            </li>
+                        </ul>
+                    </div>
+                </div>
+
+
+                <div class="col-12 row">
+                    <q-icon class="iconQA" name="mdi-cloud-question"/>
+                    <div class="text-weight-medium" style="color: #016987;">เมื่อพบข้อผิดพลาดที่เกี่ยวข้องกับระบบทำงาน เช่น ระบบค้างหรือข้อมูลไม่อัพเดต ต้องทำยังไง ?</div>
+                    <div class="col-12 row">
+                        <ul>
+                            <li>
+                                ลองรีเซ็ตระบบหรือแอปพลิเคชันที่มีปัญหาเพื่อดูว่าปัญหาจะถูกแก้ไขหรือไม่ หากการรีเซ็ตระบบไม่ช่วยแก้ไขปัญหาควรติดต่อฝ่ายสนับสนุนเทคนิค
+     หรือทีม IT ขององค์กรเพื่อขอความช่วยเหลือ
+                            </li>
+                        </ul>
+                    </div>
+                </div>
+
             </q-card>
         </div>
-        <div class="col-12" style="margin-top: 30px;"><q-separator color="grey-3" /></div>
 
     </div>
 
@@ -106,5 +147,12 @@
     background-color:#F8F8F8;
     border-color: #EDEDED !important;
 }
+
+.iconQA {
+    color: #016987; 
+    font-size: 20px;
+    margin-right: 1%;
+}
+
 </style>
 

src/modules/02_organizational/views/Main.vue

@@ -2,33 +2,108 @@
 </script>
 <template>
     <div class="q-px-md q-py-sm text-subtitle1 text-white bg-primary text-weight-medium">
-        ข้อมูลหลัก
+        โครงสร้างอัตรากำลัง
     </div>
 
+
     <div class="q-pa-md col-12">
         <div class="text-weight-medium">วัตถุประสงค์ของการพัฒนา
             <q-card  class="card1 q-pa-md text-weight-regular">
-                <li>
+                <div class="col-12">
-                    ระบบที่มีวัตถุประสงค์เพื่อจัดการข้อมูลทรัพยากรบุคคล ช่วยให้สามารถจัดเก็บข้อมูลของพนักงานทั้งหมดได้อย่างมีระบบเกี่ยวข้องกับข้อมูลเกี่ยวกับบุคคล, ข้อมูลโครงสร้างหน่วยงาน ข้อมูลข้าราชการ ข้อมูลลูกจ้าง วันลา และข้อมูลอื่นๆ ที่เกี่ยวข้องกับการจัดการทรัพยากรบุคคล
+                    <div class="text-weight-medium">จัดการตำแหน่ง </div>
-                </li>
+                    <ul>
+                        <li>
+                            การจัดการตำแหน่งมีเป้าหมายที่จะสร้างความชัดเจนในหน้าที่และความรับ ผิดชอบของแต่ละตำแหน่งในองค์กร นอกจากนี้ยังเพื่อช่วย
+          ในการเตรียมความพร้อมสำหรับการเติบโตขององค์กรและพัฒนาทักษะของบุคลากรในตำแหน่งนั้น ๆ
+                        </li>
+                    </ul>
+
+                    <div class="text-weight-medium">แผนภูมิโครงสร้าง</div>
+                    <ul>
+                        <li>
+                            การพัฒนาแผนภูมิโครงสร้างมีเป้าหมายที่จะสร้างความชัดเจนในโครงสร้างและลำดับชั้นขององค์กร เพื่อสนับสนุนกระบวนการการทำงาน
+          และเตรียมความพร้อมในการเผยแพร่ตำแหน่งงานและการพัฒนาองค์กรในระยะยาว
+                        </li>
+                    </ul>
+
+                    <div class="text-weight-medium">แผนภูมิองค์กร</div>
+                    <ul>
+                        <li>
+                            การพัฒนาแผนภูมิองค์กรมีเป้าหมายที่จะสร้างความชัดเจนในโครงสร้างและลำดับชั้นขององค์กร เพื่อสนับสนุนกระบวนการการทำงาน
+          และเตรียมความพร้อมในการเผยแพร่ตำแหน่งงานและการพัฒนาองค์กร
+                        </li>
+                    </ul>
+
+                    <div class="text-weight-medium">ผังโครงสร้าง</div>
+                    <ul>
+                        <li>
+                            การพัฒนาแผนภูมิองค์กรมีเป้าหมายที่จะสร้างความชัดเจนในโครงสร้างและลำดับชั้นขององค์กร เพื่อสนับสนุนกระบวนการการทำงาน
+          และเตรียมความพร้อมในการเผยแพร่ตำแหน่งงานและการพัฒนาองค์กร
+                        </li>
+                    </ul>
+
+                    <div class="text-weight-medium">ผังโครงสร้างลูกจ้าง</div>
+                    <ul>
+                        <li>
+                            การพัฒนาผังโครงสร้างลูกจ้างมีเป้าหมายที่จะช่วยให้มีความยืดหยุ่นในการทำงานและจัดการลูกจ้างในองค์กร เพื่อให้มีการเปลี่ยนแปลง
+          ที่ต้องการตามสภาพการทำงานและตลาด
+                        </li>
+                    </ul>
+
+
+                    <div class="text-weight-medium">จัดการบัญชี 2</div>
+                    <ul>
+                        <li>
+                            การพัฒนาผังโครงสร้างลูกจ้างมีเป้าหมายที่จะช่วยให้มีความยืดหยุ่นในการทำงานและจัดการลูกจ้างในองค์กร เพื่อให้มีการเปลี่ยนแปลง
+          ที่ต้องการตามสภาพการทำงานและตลาด
+                        </li>
+                    </ul>
+
+
+                </div>
             </q-card>
         </div>
         <div class="col-12" style="margin-top: 30px;"><q-separator color="grey-3" /></div>
     </div>
-    
 
-    <div class="q-pa-md col-12" style="padding-top: 0px;">
+
+
+
+    <div class="q-pa-md col-12">
         <div class="text-weight-medium">ขอบเขตการดูแลระบบ
             <q-card  class="card1 q-pa-md text-weight-regular">
-                <li>
+                <div class="col-12">
-                    เจ้าหน้าที่ทรัพยากรบุคคลต้องรับผิดชอบในการเก็บรวบรวม บันทึก และบริหารจัดการข้อมูลทรัพยากรบุคคลของพนักงานนอกจากนี้พวกเขาต้องรักษา
+                    <div class="text-weight-medium">1.) การกำหนดบทบาทและความรับผิดชอบ </div>
-     ความถูกต้องและปลอดภัยของข้อมูลทรัพยากรบุคคลและปฏิบัติตามนโยบายความเป็นส่วนตัว
+                    <ul>
-                </li>
+                        <li>
+                            ระบบทรัพยากรบุคคลควรกำหนดบทบาทและความรับผิดชอบของแต่ละตำแหน่งในองค์กรอย่างชัดเจนเพื่อให้ทุกคนในองค์กรทราบหน้าที่และการรับผิดชอบของตนเอง และสามารถปฏิบัติตามนโยบายและขั้นตอนการทำงานได้อย่างถูกต้อง
+                        </li>
+                    </ul>
+
+                    <div class="text-weight-medium">2.) การจัดการข้อมูลทรัพยากรบุคคล</div>
+                    <ul>
+                        <li>
+                            การสร้างระบบที่สามารถจัดการข้อมูลทรัพยากรบุคคลอย่างมีประสิทธิภาพ เพื่อให้สามารถเข้าถึงข้อมูลได้ทันทีและมีความถูกต้อง
+                        </li>
+                    </ul>
+
+                    <div class="text-weight-medium">3.) การติดตามและประเมินประสิทธิภาพ</div>
+                    <ul>
+                        <li>
+                            การสร้างระบบติดตามและประเมินประสิทธิภาพของพนักงาน ซึ่งทำให้สามารถปรับปรุงและปรับให้เหมาะสมตามความต้องการขององค์กร
+                        </li>
+                    </ul>
+
+ 
+
+
+                </div>
             </q-card>
         </div>
         <div class="col-12" style="margin-top: 30px;"><q-separator color="grey-3" /></div>
     </div>
 
+
     <div class="q-pa-md col-12" style="padding-top: 0px;">
         <div class="text-weight-medium">รายละเอียดและขั้นตอนการดูแลระบบ
             <q-card  class="card1 q-pa-md text-weight-regular">
@@ -40,60 +115,28 @@
                         เข้าถึงข้อมูล, และการป้องกันการใช้ข้อมูลที่ไม่ถูกต้อง
                         </li>
                     </ul>
-
-                    <div class="text-weight-medium">2.) การจัดการสิทธิ์การเข้าถึง</div>
-                    <ul>
-                        <li>
-                            กำหนดสิทธิ์การเข้าถึงข้อมูลทรัพยากรบุคคลให้แต่ละบุคคลในองค์กรการควบคุมสิทธิ์จะช่วยลดความเสี่ยงที่เกี่ยวข้องกับการเข้าถึงข้อมูลโดยไม่ได้รับอนุญาต
-                        </li>
-                    </ul>
-
-                    <div class="text-weight-medium">3.) การตรวจสอบและการพัฒนาระบบ</div>
-                    <ul>
-                        <li>
-                            ตรวจสอบและบำรุงรักษาข้อมูลเพื่อให้มั่นใจว่าข้อมูลทรัพยากรบุคคลมีความถูกต้อง,ครบถ้วน และอับเดต ทำการตรวจสอบการป้องกันข้อมูลไม่ถูกส่ง
-หลายครั้ง และดูแลให้มีการบันทึกข้อมูลทรัพยากรบุคคลตลอดเวลา
-                        </li>
-                    </ul>
                 </div>
             </q-card>
         </div>
         <div class="col-12" style="margin-top: 30px;"><q-separator color="grey-3" /></div>
     </div>
 
-
+    
-
     <div class="q-pa-md col-12" style="padding-top: 0px;">
         <div class="text-weight-medium">คำถามที่พบบ่อย
             <q-card  class="card1 q-pa-md text-weight-regular">
                 <div class="col-12 row">
-                    
+                    <q-icon class="iconQA" name="mdi-cloud-question"/>
-                    <div class="text-weight-medium" style="color: #02A998;">ข้อมูลส่วนบุคคลถูกปกปิดหรือปล่อยไว้หรือไม่?</div>
+                    <div class="text-weight-medium" style="color: #016987;">ข้อมูลส่วนบุคคลถูกปกปิดหรือปล่อยไว้หรือไม่ ?</div>
                     <ul>
                         <li>
-                            มีมาตรการที่เข้มงวดเพื่อรักษาความปลอดภัยของข้อมูลที่เกี่ยวข้องกับทรัพยากรบุคคล รวมถึงการใช้เทคโนโลยีการรักษาความปลอดภัย  การให้สิทธิ์การ
+                            ในระบบข้อมูลทรัพยากรบุคคลของเราข้อมูลส่วนบุคคลถูกควบคุมอย่างเข้มงวดการเข้าถึงถูกจำกัดด้วยสิทธิ์และมีการตรวจสอบเพื่อให้มั่นใจว่าเฉพาะบุคคลที่มีความจำเป็นในการเข้าถึงข้อมูลได้
-                        เข้าถึงข้อมูล, และการป้องกันการใช้ข้อมูลที่ไม่ถูกต้อง
-                        </li>
-                    </ul>
-
-                    <div class="text-weight-medium">2.) การจัดการสิทธิ์การเข้าถึง</div>
-                    <ul>
-                        <li>
-                            กำหนดสิทธิ์การเข้าถึงข้อมูลทรัพยากรบุคคลให้แต่ละบุคคลในองค์กรการควบคุมสิทธิ์จะช่วยลดความเสี่ยงที่เกี่ยวข้องกับการเข้าถึงข้อมูลโดยไม่ได้รับอนุญาต
-                        </li>
-                    </ul>
-
-                    <div class="text-weight-medium">3.) การตรวจสอบและการพัฒนาระบบ</div>
-                    <ul>
-                        <li>
-                            ตรวจสอบและบำรุงรักษาข้อมูลเพื่อให้มั่นใจว่าข้อมูลทรัพยากรบุคคลมีความถูกต้อง,ครบถ้วน และอับเดต ทำการตรวจสอบการป้องกันข้อมูลไม่ถูกส่ง
-หลายครั้ง และดูแลให้มีการบันทึกข้อมูลทรัพยากรบุคคลตลอดเวลา
                         </li>
                     </ul>
                 </div>
+
             </q-card>
         </div>
-        <div class="col-12" style="margin-top: 30px;"><q-separator color="grey-3" /></div>
 
     </div>
 
@@ -106,5 +149,12 @@
     background-color:#F8F8F8;
     border-color: #EDEDED !important;
 }
+
+.iconQA {
+    color: #016987; 
+    font-size: 20px;
+    margin-right: 1%;
+}
+
 </style>
 

src/views/MainLayout.vue

@@ -12,14 +12,21 @@ const text = ref('');
 const menuList = [
 	{text:'ข้อมูลหลัก',path: 'metadata'},
 	{text:'โครงสร้างอัตรากำลัง',path: 'organizational'},
+
 ];
 
 const mainmenu = [
 	{text: 'ข้อมูลหลัก', icon:'mdi-account-outline', path: 'metadata'},
-	{text: 'โครงสร้างอัตรากำลัง', icon:'mdi-account-outline',path: 'organizational'},
+	{text: 'โครงสร้างอัตรากำลัง', icon:'mdi-account-group-outline',path: 'organizational'},
-	{text: 'โครงสร้างอัตรากำลัง', icon:'mdi-account-outline',path: 'organizational'},
+	{text: 'ทะเบียนประวัติ', icon:'mdi-file-account-outline',path: 'organizational'},
-	{text: 'โครงสร้างอัตรากำลัง', icon:'mdi-account-outline',path: 'organizational'},
+	{text: 'ทะเบียนประวัติลูกจ้าง', icon:'mdi-file-account-outline',path: 'organizational'},
-	{text: 'โครงสร้างอัตรากำลัง', icon:'mdi-account-outline',path: 'organizational'},
+	{text: 'ออกคำสั่ง', icon:'mdi-file-certificate-outline',path: 'organizational'},
+	{text: 'สรรหา', icon:'mdi-magnify',path: 'organizational'},
+	{text: 'บรรจุ แต่งตั้ง ย้าย โอน', icon:'mdi-account-check',path: 'organizational'},
+	{text: 'พ้นราชการ', icon:'mdi-account-cancel-outline',path: 'organizational'},
+	{text: 'เครื่องราชฯ', icon:'mdi-medal-outline',path: 'organizational'},
+	{text: 'การลา', icon:'mdi-calendar',path: 'organizational'},
+	{text: 'วินัย', icon:'mdi-scale-balance',path: 'organizational'}
 ];
 
 const clickMain = (val: string) => {
@@ -106,8 +113,8 @@ const goHome = () => {
 								</q-list>
 							</q-card>
 						</div>
-						<div class="col-9 row">
+						<div class="col-9 row ">
-							<q-card class="col-12">
+							<q-card class="col-12 content-heigt">
 								<router-view :key="$route.fullPath" />
 							</q-card>
 						</div>
@@ -176,4 +183,9 @@ const goHome = () => {
    color: #02A998 !important;
    box-shadow: 3px 3px 10px 1px rgba(95, 95, 95, 0.15) !important;
 }
+
+.content-heigt{
+	height: 57vh !important;
+	overflow-y:auto;
+}
 </style>