hrms-mgt/src/modules/14_KPI/components/competency/05ListDetail.vue

<script setup lang="ts"></script>

<template>
  <div class="display-table">
    <q-card flat bordered class="q-mb-lg">
      <q-card-section>
        <div class="text-h6 text-bold">ประเภทสมรรถนะ</div>
      </q-card-section>

      <q-card-section class="q-pt-none">
        ให้ประเมินจากสมรรถนะที่เกี่ยวข้องกับการปฏิบัติราชการตามที่ ก.ก. กำหนด
        มีรายละเอียดดังนี้
      </q-card-section>

      <q-separator inset />
      <div style="border: 1px solid black">
        <div class="row text-center" style="background-color: #e0e4f4">
          <div class="col-3 text-bold flex justify-center items-center">
            ประเภทสมรรถนะ
          </div>
          <div class="col-5">
            <div class="row text-bold flex justify-center">
              ประเภทและระดับตำแหน่ง
            </div>
            <div class="row">
              <div class="col-3">
                <div class="text-bold">ทั่วไป</div>
                <div>ปฏิบัติงาน</div>
                <div>ชำนาญงาน</div>
                <div>อาวุโส</div>
              </div>
              <div class="col-3">
                <div class="text-bold">วิชาการ</div>
                <div>ปฏิบัติการ</div>
                <div>ชำนาญการ</div>
                <div>ชำนาญการพิเศษ</div>
                <div>เชี่ยวชาญ</div>
                <div>ทรงคุณวุฒิ</div>
              </div>
              <div class="col-3">
                <div class="text-bold">อำนวยการ</div>
                <div>ต้น สูง</div>
              </div>
              <div class="col-3">
                <div class="text-bold">บริหาร</div>
                <div>ต้น สูง</div>
              </div>
            </div>
          </div>
          <div class="col-4 column">
            <div class="row text-bold flex justify-center">ผู้ดำรงตำแหน่ง</div>
            <div class="row" style="flex-grow: 1">
              <div class="col-6">
                ผู้ตรวจราชการกรุงเทพมหานครและผู้ตรวจราชการ
              </div>
              <div class="col-6 flex justify-center">ผู้อำนวยการเขต</div>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col-3 q-pa-sm">
            <div class="text-bold">สมรรถนะหลัก</div>
            <div>(5 สมรรถนะ)</div>
          </div>
          <div class="col-5 column">
            <div class="row col-grow">
              <div class="col-3 flex items-center justify-center">
                <q-icon name="check" size="32px" />
              </div>
              <div class="col-3 flex items-center justify-center">
                <q-icon name="check" size="32px" />
              </div>
              <div class="col-3 flex items-center justify-center">
                <q-icon name="check" size="32px" />
              </div>
              <div class="col-3 flex items-center justify-center">
                <q-icon name="check" size="32px" />
              </div>
            </div>
          </div>
          <div class="col-4 column">
            <div class="row col-grow">
              <div class="col-6 flex items-center justify-center">
                <q-icon name="check" size="32px" />
              </div>
              <div class="col-6 flex items-center justify-center">
                <q-icon name="check" size="32px" />
              </div>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col-3 q-pa-sm">
            <div class="text-bold">สมรรถนะประจำกลุ่มงาน</div>
            <div>(3 สมรรถนะ ตามกลุ่มงาน)</div>
          </div>
          <div class="col-5 column">
            <div class="row col-grow">
              <div class="col-3 flex items-center justify-center">
                <q-icon name="check" size="32px" />
              </div>
              <div class="col-3 flex items-center justify-center">
                <q-icon name="check" size="32px" />
              </div>
              <div class="col-3"></div>
              <div class="col-3"></div>
            </div>
          </div>
          <div class="col-4 column">
            <div class="row col-grow">
              <div class="col-6"></div>
              <div class="col-6"></div>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col-3 q-pa-sm">
            <div class="text-bold">สมรรถนะประจำผู้บริหารกรุงเทพมหานคร</div>
            <div>(7 สมรรถนะ)</div>
          </div>
          <div class="col-5 column">
            <div class="row col-grow">
              <div class="col-3"></div>
              <div class="col-3"></div>
              <div class="col-3 flex items-center justify-center">
                <q-icon name="check" size="32px" />
              </div>
              <div class="col-3 flex items-center justify-center">
                <q-icon name="check" size="32px" />
              </div>
            </div>
          </div>
          <div class="col-4 column">
            <div class="row col-grow">
              <div class="col-6"></div>
              <div class="col-6"></div>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col-3 q-pa-sm">
            <div class="text-bold">สมรรถนะเฉพาะสำหรับตำแหน่งผู้อำนวยการเขต</div>
            <div>(4 สมรรถนะ)</div>
          </div>
          <div class="col-5 column">
            <div class="row col-grow">
              <div class="col-3"></div>
              <div class="col-3"></div>
              <div class="col-3"></div>
              <div class="col-3"></div>
            </div>
          </div>
          <div class="col-4 column">
            <div class="row col-grow">
              <div class="col-6"></div>
              <div class="col-6 flex items-center justify-center">
                <q-icon name="check" size="32px" />
              </div>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col-3 q-pa-sm">
            <div class="text-bold">
              สมรรถนะเฉพาะสำหรับตำแหน่งผู้ตรวจราชการกรุงเทพมหานครและผู้ตรวจราชการ
            </div>
            <div>(2 สมรรถนะ)</div>
          </div>
          <div class="col-5 column">
            <div class="row col-grow">
              <div class="col-3"></div>
              <div class="col-3"></div>
              <div class="col-3"></div>
              <div class="col-3"></div>
            </div>
          </div>
          <div class="col-4 column">
            <div class="row col-grow">
              <div class="col-6 flex items-center justify-center">
                <q-icon name="check" size="32px" />
              </div>
              <div class="col-6"></div>
            </div>
          </div>
        </div>
        <div class="row text-bold">
          <div class="col-3 q-pa-sm">
            <div class="text-bold flex justify-end">รวมสมรรถนะ</div>
          </div>
          <div class="col-5 column">
            <div class="row col-grow">
              <div class="col-3 flex justify-center items-center">8</div>
              <div class="col-3 flex justify-center items-center">8</div>
              <div class="col-3 flex justify-center items-center">12</div>
              <div class="col-3 flex justify-center items-center">12</div>
            </div>
          </div>
          <div class="col-4 column">
            <div class="row col-grow">
              <div class="col-6 flex justify-center items-center">7</div>
              <div class="col-6 flex justify-center items-center">9</div>
            </div>
          </div>
        </div>
      </div>
    </q-card>

    <q-card flat bordered>
      <q-card-section>
        <div class="text-h6 text-bold">ระดับสมรรถนะ</div>
      </q-card-section>

      <q-card-section class="q-pt-none">
        สมรรถนะหลักและสมรรถนะประจำกลุ่มงาน
        กำหนดระดับสมรรถนะที่คาดหวังจำแนกตามประเภทและระดับตำแหน่งของข้าราชการกรุงเทพมหานครสามัญ
        มีรายละเอียดดังนี้
      </q-card-section>

      <q-separator inset />
      <div style="border: 1px solid black">
        <div
          class="row text-bold text-center"
          style="background-color: #c0d4ec"
        >
          <div class="col-3">ประเภทตำแหน่ง</div>
          <div class="col-3">ระดับตำแหน่ง</div>
          <div class="col-3">สมรรถนะหลัก</div>
          <div class="col-3">สมรรถนะประจำกลุ่มงาน</div>
        </div>
        <div class="row text-center">
          <div class="col-3 flex justify-center items-center">บริหาร</div>
          <div class="col-6">
            <div class="row">
              <div class="col-6">สูง</div>
              <div class="col-6">5</div>
            </div>
            <div class="row">
              <div class="col-6">ต้น</div>
              <div class="col-6">4</div>
            </div>
          </div>
          <div class="col-3" style="background-color: #bcbcc4"></div>
        </div>
        <div class="row text-center">
          <div class="col-3 flex justify-center items-center">อำนวยการ</div>
          <div class="col-6">
            <div class="row">
              <div class="col-6">สูง</div>
              <div class="col-6">4</div>
            </div>
            <div class="row">
              <div class="col-6">ต้น</div>
              <div class="col-6">3</div>
            </div>
          </div>
          <div class="col-3" style="background-color: #bcbcc4"></div>
        </div>
        <div class="row text-center">
          <div class="col-3 flex justify-center items-center">วิชาการ</div>
          <div class="col-9">
            <div class="row">
              <div class="col-4">ทรงคุณวุฒิ</div>
              <div class="col-4">5</div>
              <div class="col-4">5</div>
            </div>
            <div class="row">
              <div class="col-4">เชี่ยวชาญ</div>
              <div class="col-4">4</div>
              <div class="col-4">4</div>
            </div>
            <div class="row">
              <div class="col-4">ชำนาญการพิเศษ</div>
              <div class="col-4">3</div>
              <div class="col-4">4</div>
            </div>
            <div class="row">
              <div class="col-4">ชำนาญการ</div>
              <div class="col-4">2</div>
              <div class="col-4">3</div>
            </div>
            <div class="row">
              <div class="col-4">ปฏิบัติการ</div>
              <div class="col-4">1</div>
              <div class="col-4">2</div>
            </div>
          </div>
        </div>
        <div class="row text-center">
          <div class="col-3 flex justify-center items-center">ทั่วไป</div>
          <div class="col-9">
            <div class="row">
              <div class="col-4">ทักษะพิเศษ</div>
              <div class="col-4">4</div>
              <div class="col-4">4</div>
            </div>
            <div class="row">
              <div class="col-4">อาวุโส</div>
              <div class="col-4">3</div>
              <div class="col-4">3</div>
            </div>
            <div class="row">
              <div class="col-4">ชำนาญงาน</div>
              <div class="col-4">2</div>
              <div class="col-4">2</div>
            </div>
            <div class="row">
              <div class="col-4">ปฏิบัติงาน</div>
              <div class="col-4">1</div>
              <div class="col-4">1</div>
            </div>
          </div>
        </div>
      </div>
    </q-card>
  </div>
</template>

<style scoped lang="scss">
.display-table {
  & .row:not(:last-child) {
    border-bottom: 1px solid black;
  }

  & [class^="col-"]:not(:last-child) {
    border-right: 1px solid black;
  }
}
</style>