hrms-manual/src/modules/01_manual/components/3_Structure/32_Position.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.1 จัดการตำแหน่ง
    </div>

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

    <div class="col-12">
      <q-img
        src="@/assets/manual/03_structure/2_position/3-3.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 - 3 หน้าจัดการตำแหน่ง
      </div>

      <div
        style="
          margin-top: 20px;
          padding: 10px;
          background-color: #f3f3f3;
          font-size: 14px;
          color: #000000;
          border-radius: 5px;
        "
      >
        จากรูปที่ 3 - 3 แต่ละหมายเลขมีรายละเอียด ดังนี้ <br />
        <div style="margin-left: 50px">
          หมายเลข 3 ช่องค้นหา เพื่อสืบค้นข้อมูลที่ต้องการ <br />
          หมายเลข 4 คอลัมน์ กดเลือกรายการเพื่อให้ข้อมูลที่เลือกถูกซ่อน
        </div>
      </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/03_structure/2_position/3-4.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 - 4 แก้ไขข้อมูลจัดการตำแหน่ง
      </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/03_structure/2_position/3-5.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 - 5 แก้ไขข้อมูลที่มีอยู่
      </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 ปุ่มบันทึก
      </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>
    </div>

    <div class="col-12">
      <q-img
        src="@/assets/manual/03_structure/2_position/3-6.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 - 6 ป้าย “บันทึกข้อมูลร่างสำเร็จ”
      </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" 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/03_structure/2_position/3-7.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 - 7 ป้าย “ต้องการลบข้อมูลบันทึกร่างนี้หรือไม่?”
      </div>
    </div>

    <div class="col-12" style="margin-top: 50px; margin-left: 10px">
      - เมื่อกดปุ่ม “ลบบันทึก” ระบบปรากฏป้าย “ลบข้อมูลร่างสำเร็จ” ดังรูปภาพ
      และเมื่อกดปุ่ม“ยกเลิก” ระบบจะไม่ทำการลบข้อมูลร่าง

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

    <div class="col-12" style="margin-top: 50px; margin-left: 10px">
      - เมื่อกดปุ่ม “เผยแพร่” ระบบปรากฏป้าย “เผยแพร่ข้อมูลสำเร็จ” ดังรูปภาพ
      และเมื่อกดปุ่ม“ยกเลิก” ระบบจะไม่ทำการเผยแพร่ข้อมูล
      <q-img
        class="col-12"
        src="@/assets/manual/03_structure/2_position/3-10.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 - 10 ป้าย “เผยแพร่ข้อมูลสำเร็จ”
      </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" 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"
      />
      เพื่อบันทึกร่าง(ข้อมูลยังไม่มีการเผยแพร่)
      เมื่อกดบันทึกร่างระบบจะแสดงดังรูปภาพที่ 3 – 6
      โดยการบันทึกเฉพาะข้อมูลร่างนั้นจะมีเพียงผู้ดูแลระบบเท่านั้นที่เห็นได้
      สามารถกดไอคอน
      <q-icon
        name="mdi-file-remove-outline"
        style="margin: 0 5px; color: hsl(0, 100%, 50%)"
        size="xs"
      />
      เพื่อลบบันทึกร่างเมื่อกดลบบันทึกร่างระบบจะแสดงดังรูปภาพที่ 3 – 7 และ 3 – 8
      และสามารถกดไอคอน
      <q-icon
        name="mdi-cloud-upload-outline"
        style="margin: 0 5px; color: #01435f"
        size="xs"
      />
      เพื่อเผยแพร่ข้อมูลระบบจะแสดงดังรูปภาพที่ 3 – 9 และ 3 – 10
      โดยในส่วนการเผยแพร่ข้อมูลนั้นผู้ดูแลระบบ
      มีการตรวจสอบความถูกต้องเรียบร้อยแล้ว
      และได้ทำการเผยแพร่ให้เจ้าหน้าที่ทุกคนเห็นข้อมูล เมื่อกดเลือกที่ “หัวหน้า”
      ระบบปรากฏไอคอน
      <q-icon
        name="mdi-bookmark"
        style="margin: 0 5px; color: #00aa86"
        size="xs"
      />
      กำกับ

      <q-img
        class="col-12"
        src="@/assets/manual/03_structure/2_position/3-11.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 - 11 ฟอร์มสร้างโครงสร้างและกรอบอัตรากำลัง
      </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 ปุ่มสำหรับคลิกบันทึกข้อมูล
      </div>
    </div>
  </q-card>
  <!-- </div>
  </div> -->
</template>