hrms-manual/src/modules/01_manual/components/3_Structure/35_chartstru.vue

<script setup lang="ts">
import { ref } from "vue";
const rightDrawerOpen = ref(false);
const text = ref("");
</script>

<template>
  <div class="row col-12">
    <div class="col-9">
      <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="border-radius: 0px 0px 8px 8px"
      >
      <div style="font-weight: bold; font-size: 15px; color: #00aa86">
        3.4 ผังโครงสร้าง
        </div>


        <div class="col-12" style="margin-top: 20px; margin-left: 10px">
            - กดเลือกแถบเมนูย่อยของโครงสร้างอัตรากำลัง “แผนภูมิองค์กร” ระบบแสดงหน้าจอดังรูปภาพ        
        </div>

        <div class="col-12">
          <q-img
          src="@/assets/manual/03_structure /5_chartstru/3-30.png"
            style="
              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">
                รูปภาพที่ 3 - 30 หน้าผังโครงสร้าง        
            </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 ช่องค้นหาข้อมูลผังโครงสร้าง

            </div>
        </div>


        <div class="col-12">
            <div class="col-12">
                <p 
                            style="margin-top: 50px;
            margin-left: 10px;display: flex;
            justify-content: flex-start;
            align-items: center;">
                    - กดไอคอน 
                    <q-icon name="mdi-pencil-outline" style="margin: 0 5px; color: #02A998;" size="xs"/>
                    เพื่อเพิ่ม ลบหรือแก้ไขข้อมูล ระบบแสดงดังรูปภาพ
                </p>
            </div>
        </div>

        <div class="col-12">
          <q-img
          src="@/assets/manual/03_structure /5_chartstru/3-31.png"
            style="
              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">
                รูปภาพที่ 3 - 31 เพิ่ม ลบหรือแก้ไขข้อมูล
            </div>

            <div
            style="
                margin-top: 20px;
                padding: 10px;
                background-color: #f3f3f3;
                font-size: 14px;
                color: #000000;
                border-radius: 5px;
                "
                >
                หมายเลข 1 ไอคอนดินสอสำหรับคลิกเพื่อแก้ไขข้อมูลหน่วยงาน
            </div>
        </div>



        <div class="col-12">
            <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-plus" style="margin: 0 5px; color: #00aa86;" size="xs"/>
                         เพื่อเพิ่มหน่วยงานภายใต้หน่วยงานกรุงเทพมหานคร

                </p>
            </div>
        </div>

        <div class="col-12">
          <q-img
          src="@/assets/manual/03_structure /5_chartstru/3-33.png"
            style="
              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">
                รูปภาพที่ 3 - 33 เพิ่มหน่วยงาน           
            </div>

            <div
            style="
                margin-top: 20px;
                padding: 10px;
                background-color: #f3f3f3;
                font-size: 14px;
                color: #000000;
                border-radius: 5px;
                "
                >

                หมายเลข 1 ปุ่มสำหรับคลิกเพื่อเพิ่มข้อมูลของหน่วยงานภายใต้หน่วยงานกรุงเทพมหานคร
            </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 class="col-12"
            src="@/assets/manual/03_structure /5_chartstru/3-34.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">
                รูปภาพที่ 3 - 34 เพิ่มข้อมูลหน่วยงาน           
            </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>
                หมายเลข 7 ช่องสำหรับกรอกเลขที่ฝ่าย/ส่วน <br>
                หมายเลข 8 ช่องสำหรับกรอกเลขที่กอง <br>
                หมายเลข 9 ช่องสำหรับคลิกเลือกประเภทหน่วยงาน <br>
                หมายเลข 10 ช่องสำหรับคลิกเลือกระดับหน่วยงาน <br>
                หมายเลข 11 ช่องสำหรับคลิกเลือกหน่วยงานต้นสังกัด <br>
                หมายเลข 12 ช่องสำหรับคลิกเลือกส่วนราชการต้นสังกัด <br>
                หมายเลข 13 ช่องสำหรับกรอกข้อมูลลำดับผังโครงสร้าง <br>
                หมายเลข 14 ช่องสำหรับคลิกเลือกหมายเลขโทรศัพท์ติดต่อจากภายนอก <br>
                หมายเลข 15 ช่องสำหรับคลิกเลือกหมายเลขโทรศัพท์ติดต่อจากภายใน <br>
                หมายเลข 16 ช่องสำหรับคลิกเลือกหมายเลขโทรสาร <br>
                หมายเลข 17 ช่องสำหรับกรอกข้อมูลรายละเอียดหน้าที่รับผิดชอบ <br>
                หมายเลข 18 ปุ่มสำหรับคลิกเพื่อบันทึกข้อมูล       
                </div>
        </div>




        <div class="col-12">
            <p
            style="margin-top:50px;
            margin-left: 10px">
                    - เมื่อกรอกข้อมูลเรียบร้อยแล้วให้กดไอคอน
                    <q-icon name="mdi-content-save-outline" style="margin: 0 5px; color: #01435F;" size="xs"/>
                    เพื่อบันทึกร่าง(ข้อมูลยังไม่มีการเผยแพร่)ระบบแสดงป้าย “บันทึกข้อมูลร่างสำเร็จ” ดังรูปภาพ
  
            </p>
            <q-img class="col-12"
            src="@/assets/manual/03_structure /5_chartstru/3-35.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">
                รูปภาพที่ 3 - 35 ป้าย “บันทึกข้อมูลร่างสำเร็จ”         
            </div>


            <div
            style="
                margin-top: 20px;
                padding: 10px;
                background-color: #f3f3f3;
                font-size: 14px;
                color: #000000;
                border-radius: 5px;
                "
                >
                หมายเลข 1 ระบบแสดงสถานะ “บันทึกข้อมูลร่างสำเร็จ” หลังจากที่กดบันทึกข้อมูลเพิ่มหน่วยงานภายใต้หน่วยงานกรุงเทพมหานคร

                </div>
        </div>



        <div class="col-12">
            <p
            style="margin-top:50px;
            margin-left: 10px">
             - กดไอคอน  
             <q-icon name="mdi-cloud-upload-outline" style="margin: 0 5px; color: #01435F;" size="xs"/>
        เพื่อเผยแพร่ข้อมูลระบบปรากฏป้าย “ต้องการเผยแพร่ข้อมูลนี้หรือไม่?” ดังรูปภาพ        </p>
            <q-img class="col-12"
            src="@/assets/manual/03_structure /5_chartstru/3-36.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">
                รูปภาพที่ 3 - 36 ป้าย “ต้องการเผยแพร่ข้อมูลนี้หรือไม่?”        
            </div>
        </div>



        <div class="col-12">
            <p
            style="margin-top:50px;
            margin-left: 10px">
                 - เมื่อกดปุ่ม “เผยแพร่” ระบบปรากฏป้าย“เผยแพร่ข้อมูลสำเร็จ” ดังรูปภาพ และเมื่อกดปุ่ม“ยกเลิก” ระบบจะไม่ทำการเผยแพร่ข้อมูล โดยมีป้ายต้องการโหลดข้อมูลใหม่ขึ้นมาเพื่อสอบถามความต้องการ ให้กดปุ่ม “ตกลง” เมื่อต้องการอัปโหลดข้อมูลใหม่ และปุ่ม “ยกเลิก” เมื่อไม่ต้องการอัปโหลดข้อมูล 
            </p>
            <q-img class="col-12"
            src="@/assets/manual/03_structure /5_chartstru/3-37.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">
                รูปภาพที่ 3 - 37 ป้าย “เผยแพร่ข้อมูลสำเร็จ”          
            </div>
        </div>



        <div class="col-12">
            <p
            style="margin-top:50px;
            margin-left: 10px">
            - เมื่อต้องการลบหน่วยงานให้กดไอคอน 
            <q-icon name="mdi-trash-can-outline" style="margin: 0 5px; color: hsl(0, 100%, 50%);" size="xs"/>
            ระบบปรากฏป้าย “ยืนยันลบหน่วยงาน” ดังรูป
           
            </p>
            <q-img class="col-12"
            src="@/assets/manual/03_structure /5_chartstru/3-38.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">
                รูปภาพที่ 3 - 38 ป้าย “ยืนยันลบหน่วยงาน”         
            </div>
        </div>




        <div class="col-12">
            <p
            style="margin-top:50px;
            margin-left: 10px">
                 - เมื่อกดปุ่ม “ตกลง” ระบบปรากฏป้าย “ลบข้อมูลสำเร็จ” ดังรูปภาพ และเมื่อกดปุ่ม“ยกเลิก” ระบบจะไม่ทำการเผยแพร่ข้อมูลและให้กดไอคอน 
                 <q-icon name="mdi-cloud-upload-outline" style="margin: 0 5px; color: #01435F;" size="xs"/>
                เพื่อเผยแพร่ข้อมูลอีกครั้ง
           
            </p>
            <q-img class="col-12"
            src="@/assets/manual/03_structure /5_chartstru/3-39.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">
                รูปภาพที่ 3 - 39 ป้าย “ลบข้อมูลสำเร็จ”        
            </div>

            <div
            style="
                margin-top: 20px;
                padding: 10px;
                background-color: #f3f3f3;
                font-size: 14px;
                color: #000000;
                border-radius: 5px;
                "
                >
                หมายเลข 1 ระบบแจ้งเตือนสถานะ “ลบข้อมูลสำเร็จ” หลังจากที่ทำการกดคลิกยืนยันเพื่อลบข้อมูลหน่วยงานภายใต้หน่วยงานกรุงเทพมหานคร
                </div>
        </div>


        <div class="col-12">
            <p
            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"/>
            เพื่อลบบันทึกร่างข้อมูลที่มีการเพิ่มหรือแก้-ไขได้ดังรูปภาพ หากกดปุ่ม “ลบบันทึก” จะปรากฏป้ายเตือนบริเวณมุมขวาล่าง “ลบข้อมูลร่างสำเร็จ” และเมื่อกดปุ่ม “ยกเลิก” ระบบจะไม่ทำการลบข้อมูลร่าง           
            </p>
            <q-img class="col-12"
            src="@/assets/manual/03_structure /5_chartstru/3-40.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">
                รูปภาพที่ 3 - 40 ป้าย “ต้องการลบข้อมูลบันทึกร่างนี้หรือไม่?”         
            </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"/>
            เพื่อเพิ่มข้อมูลหน่วยงานและตำแหน่ง ดังรูปภาพ            </p>
            <q-img class="col-12"
            src="@/assets/manual/03_structure /5_chartstru/3-41.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">
                รูปภาพที่ 3 - 41 เพิ่มหน่วยงานและตำแหน่ง         
            </div>

            <div
            style="
                margin-top: 20px;
                padding: 10px;
                background-color: #f3f3f3;
                font-size: 14px;
                color: #000000;
                border-radius: 5px;
                "
                >
                หมายเลข 1 ปุ่มสำหรับเพิ่มข้อมูลหน่วยงานหรือตำแหน่งภายใต้สำนักงานการคลัง <br>
                หมายเลข 2 ปุ่มสำหรับเพิ่มข้อมูลหน่วยงานหรือตำแหน่งภายใต้กองคลัง                
                </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"/>
            เพื่อเพิ่มข้อมูลหน่วยงานและตำแหน่ง โดยจะมีข้อมูลกำกับว่าเพิ่มโครงสร้างอัตรากำลังภายใต้หน่วยงานใด ดังรูปภาพ           
            </p>
            <q-img class="col-12"
            src="@/assets/manual/03_structure /5_chartstru/3-42.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">
                รูปภาพที่ 3 - 42 เพิ่มข้อมูลหน่วยงานและตำแหน่ง        
            </div>

            <div
            style="
                margin-top: 20px;
                padding: 10px;
                background-color: #f3f3f3;
                font-size: 14px;
                color: #000000;
                border-radius: 5px;
                "
                >
                หมายเลข 1 ช่องสำหรับแสดงชื่อสำนักงานที่ทำงานเพิ่มข้อมูลหน่วยงานและตำแหน่ง <br>
                หมายเลข 2 ปุ่มสำหรับคลิกเพื่อเพิ่มข้อมูลหน่วยงาน <br>
                หมายเลข 3 ปุ่มสำหรับคลิกเพื่อเพิ่มข้อมูลตำแหน่ง             
                </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"/>
            ที่เพิ่มหน่วยงานและตำแหน่ง ระบบปรากฎดังรูปภาพ เพื่อกรอกข้อมูลหน่วย งานสำหรับการกรอกข้อมูลหน่วยงานสามารถดูได้ตามรายละเอียดในรูปภาพ ที่ 3 –34 และกรอกข้อมูลตำแหน่งในรูปภาพที่ 3 – 44 เมื่อกรอกเรียบร้อยแล้วให้กดไอคอน
            <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"/>
            เพื่อเผยแพร่ไปหน้าอื่น ในส่วนการเผยแพร่ข้อมูลนั้นผู้ดูแลระบบมีการตรวจสอบความถูกต้องเรียบร้อยแล้ว และได้ทำการเผยแพร่ให้เจ้าหน้าที่ทุกคนเห็นข้อมูล และเมื่อไม่ต้องการเพิ่มหน่วยงานหรือตำแหน่งสามารถกดไอคอน       
            <q-icon name="mdi-trash-can-outline" style="margin: 0 5px; color: hsl(0, 100%, 50%);" size="xs"/>      
            เพื่อลบช่องที่ปรากฏให้เพิ่มหน่วยงานหรือตำแหน่ง
            </p>

            <q-img class="col-12"
            src="@/assets/manual/03_structure /5_chartstru/3-43.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">
                รูปภาพที่ 3 - 43 เพิ่มข้อมูลหน่วยงาน      
            </div>
        </div>



        <div class="col-12">
            <p
            style="margin-top:50px;
            margin-left: 10px">
            </p>
            
            <q-img class="col-12"
            src="@/assets/manual/03_structure /5_chartstru/3-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">
                รูปภาพที่ 3 - 44 เพิ่มข้อมูลตำแหน่ง     
            </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>
                หมายเลข 7 ปุ่มสำหรับคลิกเพื่อลบข้อมูลร่างการเพิ่มตำแหน่ง           
                </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"/>
            เพื่อแก้ไขข้อมูล และสามารถเลือกกดไอคอน
            <q-icon name="mdi-trash-can-outline" style="margin: 0 5px; color: hsl(0, 100%, 50%);" size="xs"/>
            เพื่อลบข้อมูลดังรูปภาพ

            </p>

            <q-img class="col-12"
            src="@/assets/manual/03_structure /5_chartstru/3-45.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">
                รูปภาพที่ 3 - 45 แก้ไขและลบข้อมูล    
            </div>

            <div
            style="
                margin-top: 20px;
                padding: 10px;
                background-color: #f3f3f3;
                font-size: 14px;
                color: #000000;
                border-radius: 5px;
                "
                >
                หมายเลข 1 ไอคอนสำหรับคลิกเพื่อทำการแก้ไขรายละเอียดข้อมูลหน่วยงาน  <br>
                หมายเลข 2 ไอคอนสำหรับคลิกเพื่อทำการลบข้อมูลหน่วยงาน         
                </div>
        </div>

        


      
 
      </q-card>
    </div>
  </div>
</template>