hrms-manual/src/modules/01_manual/components/3_Structure/36_account2.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.5 จัดการบัญชี 2
    </div>

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

    <div class="col-12">
      <q-img
        src="@/assets/manual/03_structure/6_account2/3-46.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 - 46 หน้าผังโครงสร้าง
      </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 ข้อมูลรายละเอียดจัดการบัญชี2 กรณีไม่มี ชื่อ-นามสกุล คือ
        เลขที่ตำแหน่งนั้นยังไม่มีการถือครองหรือว่าง <br />
        หมายเลข 6 ช่องค้นหา เพื่อสืบค้นข้อมูลที่ต้องการ <br />
        หมายเลข 7 คอลัมน์ กดเลือกรายการเพื่อให้ข้อมูลที่เลือกถูกซ่อน
      </div>
    </div>

    <div class="col-12">
      <div class="col-12">
        <p style="margin-top: 50px; margin-left: 10px">
          - สามารถกดเลือกแถบเมนูหน่วยงานหรือสำนักงาน
          ระบบจะแสดงรายละเอียดเฉพาะที่เลือกดังรูปภาพ
        </p>
      </div>
    </div>

    <div class="col-12">
      <q-img
        src="@/assets/manual/03_structure/6_account2/3-47.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 - 47 รายละเอียดที่ได้ทำการเลือก
      </div>
    </div>

    <div class="col-12">
      <div class="col-12">
        <p style="margin-top: 50px; margin-left: 10px">
          - สามารถกดเลือกไอคอน
          <span class="circle-icon" style="margin-left: 10px">
            <span
              style="
                font-weight: bold;
                font-size: 10px;
                display: inline-flex; /* เพื่อให้สามารถใช้ transform ได้ */
                transform: rotate(180deg); /* หมุน 90 องศาทางขวา */
              "
            >
              >
            </span>
          </span>
          แถบเมนูหน่วยงานหรือสำนักงานจะถูกซ่อน ดังรูปภาพ
          และเมื่อต้องการให้แสดงเหมือนเดิมให้กดไอคอน
          <span class="circle-icon" style="margin-left: 10px">
            <span
              style="
                font-weight: bold;
                font-size: 10px;
                display: inline-flex; /* เพื่อให้สามารถใช้ transform ได้ */
                transform: rotate(0deg); /* หมุน 90 องศาทางขวา */
              "
            >
              >
            </span>
          </span>
        </p>
      </div>
    </div>

    <div class="col-12">
      <q-img
        src="@/assets/manual/03_structure/6_account2/3-48.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 - 48 ซ่อนแถบเมนูหน่วยงานหรือสำนักงาน
      </div>
    </div>

    <div class="col-12">
      <p style="margin-top: 50px; margin-left: 10px; display: flex">
        - สามารถคลิกไอคอน
        <span
          class="q-btn__content text-center col items-center q-anchor--skip justify-center row"
        >
          <i
            class="q-icon notranslate material-icons"
            aria-hidden="true"
            role="img"
            >assignment_turned_in</i
          >
        </span>
        เพื่อเพิ่มข้อมูลหน่วยงานและตำแหน่ง ดังรูปภาพ
      </p>

      <q-img
        class="col-12"
        src="@/assets/manual/03_structure/6_account2/3-49.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 - 49 ออกคำสั่ง
      </div>
    </div>

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

    <div class="col-12">
      <q-img
        src="@/assets/manual/03_structure/6_account2/3-50.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 - 50 ป้าย “ยืนยันเพื่อเอาไปออกคำสั่ง”
      </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 ข้อมูลรายละเอียดจัดการบัญชี2 กรณีไม่มี ชื่อ-นามสกุล คือ
        เลขที่ตำแหน่งนั้นยังไม่มีการถือครองหรือว่าง <br />
        หมายเลข 6 ช่องค้นหา เพื่อสืบค้นข้อมูลที่ต้องการ <br />
        หมายเลข 7 คอลัมน์ กดเลือกรายการเพื่อให้ข้อมูลที่เลือกถูกซ่อน
      </div>
    </div>

    <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-plus"
          style="margin: 0 5px; color: #00aa86"
          size="xs"
        />
        เพื่อดูประวัติบัญชีจัดการข้าราชการกรุงเทพฯ ดังรูปภาพ
      </p>
      <q-img
        class="col-12"
        src="@/assets/manual/03_structure/6_account2/3-51.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 - 51 ซ่อนแถบเมนูหน่วยงานหรือสำนักงาน
      </div>
    </div>

    <div class="col-12">
      <p
        style="
          margin-top: 50px;
          margin-left: 10px;
          display: flex;
          justify-content: flex-start;
          align-items: center;
        "
      >
        - สามารถสืบค้นข้อมูลที่ช่องค้นหา
        และทีช่องคอลัมน์สามารถเลือกรายการที่ต้องการซ่อนได้ดังรูปภาพ
      </p>
      <q-img
        class="col-12"
        src="@/assets/manual/03_structure/6_account2/3-52.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 - 52 รายละเอียดที่ได้ทำการเลือก
      </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>

<style scoped>
.circle-icon {
  width: 20px;
  height: 20px;
  background-color: hwb(0 100% 0%);
  border: 1px solid hwb(0 86% 14% / 0.611);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-right: 10px;
  vertical-align: middle;
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3); /* เพิ่มเงา */
}

.col,
.col-xs {
  flex: 0 0 5%;
  color: #00aa86;
  font-size: 20px;
}
</style>