hrms-manual/src/modules/01_manual/components/2_data/24_Officer.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">
          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>