<script setup lang="ts">
</script>
<template>
    <q-card class="row col-12">
        <div class="col-12 q-px-md q-py-sm text-subtitle1 text-white bg-primary text-weight-medium">
            พ้นราชการ
        </div>


        <div class="q-pa-md col-12">
        <q-list bordered class="rounded-borders">
        <q-expansion-item class="text-weight-medium"
            expand-separator
            label="วัตถุประสงค์ของการพัฒนา"
            
      >
        <q-card>
          <q-card-section>
            <q-card  class="card1 q-pa-md text-weight-regular">
                    <div class="col-12">
                        <div class="text-weight-medium">เพิ่มประสิทธิภาพและประสิทธิผล</div>
                        <ul>
                            <li>
                                การพัฒนาระบบพ้นราชการช่วยให้กระบวนการพ้นราชการเป็นไปอย่างมีประสิทธิภาพ
                            </li>
                            <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>
                </q-card>
          </q-card-section>
        </q-card>
      </q-expansion-item>



      <q-expansion-item
            class="text-weight-medium"
            expand-separator
            label="ขอบเขตการดูแลระบบ"
            
      >
        <q-card>
          <q-card-section>
            <q-card  class="card1 q-pa-md text-weight-regular">
                <div class="col-12">
                        <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>
                </q-card>
          </q-card-section>
        </q-card>
      </q-expansion-item>




      <q-expansion-item
            class="text-weight-medium"
            expand-separator
            label="รายละเอียดและขั้นตอนการดูแลระบบ"
            
      >
        <q-card>
          <q-card-section>
            <q-card  class="card1 q-pa-md text-weight-regular">
                    <div class="col-12">
                        <div class="text-weight-medium">1.) วางแผนและการวิเคราะห์ความต้องการ</div>
                        <ul>
                            <li>
                                การทำการวิเคราะห์ความต้องการทรัพยากรบุคคลทั้งในปัจจุบันและในอนาคต
                            </li>
                            <li>
                                การวางแผนเพื่อให้มีการตอบสนองต่อความต้องการขององค์กร
                            </li>
                        </ul>

                        <div class="text-weight-medium">2.) การสนับสนุนการพัฒนาและฝึกอบรม</div>
                        <ul>
                            <li>
                                การให้คำปรึกษาเกี่ยวกับตัวเลือกทางอาชีพและการพัฒนาทักษะที่มีประสิทธิภาพ
                            </li>
                            <li>
                                การเสนอโอกาสในการฝึกอบรมและพัฒนาทักษะที่จำเป็น
                            </li>
                        </ul>

                        <div class="text-weight-medium">3.) การตรวจสอบเอกสารและกระบวนการบริหารจัดการ</div>
                        <ul>
                            <li>
                                การเตรียมเอกสารที่เกี่ยวข้องกับการพ้นราชการ เช่น สัญญาการพ้นราชการ
                            </li>
                        </ul>

                        <div class="text-weight-medium">4.) การสนับสนุนในการสร้างทำนองเรียนรู้และปรับปรุง</div>
                        <ul>
                            <li>
                                การสนับสนุนการสร้างและเก็บข้อมูลที่เกี่ยวข้องกับการพ้นราชการ
                            </li>
                        </ul>

                        <div class="text-weight-medium">5.) การส่งเสริมอนาคตอาชีพ</div>
                        <ul>
                            <li>
                                การให้คำปรึกษาเกี่ยวกับตัวเลือกทางอาชีพหลังจากการพ้นราชการ
                            </li>
                        </ul>
                    </div>
                    
                </q-card>
          </q-card-section>
        </q-card>
      </q-expansion-item>



      <q-expansion-item
            class="text-weight-medium"
            expand-separator
            label="คำถามที่พบบ่อย"
            
      >
        <q-card>
          <q-card-section>
            <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: #016987;">หากต้องการเพิ่มรายชื่อผู้เกษียณอายุราชการ ต้องอย่างไร ? </div>
                        <br>
                        <ul>
                            <li>
                                กดไอคอน 
                        
                                    <q-icon
                                    name="mdi-plus"
                                    style="margin: 0 5px; color: #02a998"
                                    size="xs"
                                    />
                                เพื่อเพิ่มข้อมูล เลือกรายชื่อคลิกปุ่ม
                                <span
                                            style="
                                            background-color: #ffffff;
                                            border: 1px solid #02a998;
                                            color: #02a998;
                                            font-size: 12px;
                                            text-align: center;
                                            display: inline-block;
                                            padding: 2px 10px;
                                            border-radius: 3px;
                                            margin: 0px 5px 0px 5px;

                                            "
                                        >
                                     
                                           เพิ่ม
                                        </span>
                                ที่ต้องการเพิ่มไปยังรายชื่อผู้เกษียณอายุราชการ 
                               
                              
                            </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>
                        <br>
                        <ul>
                            <li>
                                คลิกไอคอน 
                        
                                    <q-icon
                                    name="mdi-dots-vertical"
                                    style="margin: 0 5px; color: #02a998"
                                    size="xs"
                                    />
                                เลือก 
                                <span
                                            style="
                                            background-color: #ffffff;
                                            border: 1px solid #3535351c;
                                            color: #000000;
                                            font-size: 12px;
                                            text-align: center;
                                            display: inline-block;
                                            padding: 2px 10px;
                                            border-radius: 4px;
                                            margin: 0px 5px 0px 5px;

                                            "
                                        >
                                        <q-icon
                                    name="mdi-paperclip"
                                    style="margin: 0px; color: #27b1cd"
                                    size="xs"
                                    />
                                           อัปโหลดไฟล์
                                        </span> 
                                เพื่อทำการอัปโหลดไฟล์รายชื่อผู้เกษียณอายุราชการ 
                              
                            </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>
                        <br>
                        <ul>
                            <li>
                                คลิกไอคอน 
                        
                                    <q-icon
                                    name="mdi-dots-vertical"
                                    style="margin: 0 5px; color: #02a998"
                                    size="xs"
                                    />
                                เลือก 
                                <span
                                            style="
                                            background-color: #ffffff;
                                            border: 1px solid #3535351c;
                                            color: #000000;
                                            font-size: 12px;
                                            text-align: center;
                                            display: inline-block;
                                            padding: 2px 10px;
                                            border-radius: 4px;
                                            margin: 0px 5px 0px 5px;

                                            "
                                        >
                                        <q-icon
                                    name="mdi-pencil"
                                    style="margin: 0px; color: #02a998"
                                    size="xs"
                                    />
                                    แก้ไข มติ อ.ก.ก.
                                        </span> 
                                เพื่อทำการแก้ไข มติ อ.ก.ก. ได้ตามต้องการกดบันทึกเพื่อบันทึกข้อมูลที่แก้ไข
                              
                            </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>
                        <br>
                        <ul>
                            <li>
                                คลิกไอคอน 
                        
                                    <q-icon
                                    name="mdi-dots-vertical"
                                    style="margin: 0 5px; color: #02a998"
                                    size="xs"
                                    />
                                เลือก 
                                <span
                                            style="
                                            background-color: #ffffff;
                                            border: 1px solid #3535351c;
                                            color: #000000;
                                            font-size: 12px;
                                            text-align: center;
                                            display: inline-block;
                                            padding: 2px 10px;
                                            border-radius: 4px;
                                            margin: 0px 5px 0px 5px;

                                            "
                                        >
                                        <q-icon
                                    name="mdi-file-pdf"
                                    style="margin: 0px; color: red "
                                    size="xs"
                                    />
                                    ไฟล์ .PDF
                                        </span> 
                                เพื่อทำการดาวน์โหลด "รายชื่อผู้เกษียณอายุราชการ .PDF"

                                หรือต้องการดาวน์โหลดไฟล์ .docx

                                <span
                                            style="
                                            background-color: #ffffff;
                                            border: 1px solid #3535351c;
                                            color: #000000;
                                            font-size: 12px;
                                            text-align: center;
                                            display: inline-block;
                                            padding: 2px 10px;
                                            border-radius: 4px;
                                            margin: 0px 5px 0px 5px;

                                            "
                                        >
                                        <q-icon
                                    name="mdi-file-word"
                                    style="margin: 0px; color: #256cb3 "
                                    size="xs"
                                    />
                                    ไฟล์ .docx
                                        </span> 
                                เพื่อทำการดาวน์โหลด "รายชื่อผู้เกษียณอายุราชการ .docx"
                              
                            </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>
                        <br>
                        <ul>
                            <li>
                                เลือกรายชื่อที่ต้องการกรอก คลิกไอคอน 
                        
                                    <q-icon
                                    name="mdi-pencil"
                                    style="margin: 0 5px; color: #02a998"
                                    size="xs"
                                    />
                            
                                เพื่อทำการกรอกเหตุผลรายชื่อผู้เกษียณอายุราชการ
                              
                            </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>
                        <br>
                        <ul>
                            <li>
                                เลือกรายชื่อที่ต้องการลบ คลิกไอคอน 
                        
                                    <q-icon
                                    name="mdi-delete"
                                    style="margin: 0 5px; color: red"
                                    size="xs"
                                    />
                            
                                เพื่อทำการลบรายชื่อผู้เกษียณอายุราชการ
                              
                            </li>
                        </ul>
                    </div>




                    




                  



                   
                </q-card>
          </q-card-section>
        </q-card>
      </q-expansion-item>

    
    </q-list>
  </div>











 

    </q-card>
</template>

<style>
.card1{
    background-color:#F8F8F8;
    border-color: #EDEDED !important;
}

.iconQA {
    color: #016987; 
    font-size: 20px;
    margin-right: 1%;
}

</style>

