From 2b6e22a840744d77f76aba030ec028f73229fb7f Mon Sep 17 00:00:00 2001
From: oat_dev <nattapon@frappet.com>
Date: Thu, 18 Apr 2024 16:20:43 +0700
Subject: [PATCH] =?UTF-8?q?UI=20=E0=B8=81=E0=B8=B2=E0=B8=A3=E0=B8=9B?=
 =?UTF-8?q?=E0=B8=A3=E0=B8=B0=E0=B9=80=E0=B8=A1=E0=B8=B4=E0=B8=99=E0=B8=9E?=
 =?UTF-8?q?=E0=B8=A4=E0=B8=95=E0=B8=B4=E0=B8=81=E0=B8=A3=E0=B8=A3=E0=B8=A1?=
 =?UTF-8?q?=E0=B8=81=E0=B8=B2=E0=B8=A3=E0=B8=9B=E0=B8=8F=E0=B8=B4=E0=B8=9A?=
 =?UTF-8?q?=E0=B8=B1=E0=B8=95=E0=B8=B4=E0=B8=A3=E0=B8=B2=E0=B8=8A=E0=B8=81?=
 =?UTF-8?q?=E0=B8=B2=E0=B8=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/competency/05ListDetail.vue    | 325 +++++++++++++++++-
 1 file changed, 324 insertions(+), 1 deletion(-)

diff --git a/src/modules/14_KPI/components/competency/05ListDetail.vue b/src/modules/14_KPI/components/competency/05ListDetail.vue
index 5ce164831..14a260f3c 100644
--- a/src/modules/14_KPI/components/competency/05ListDetail.vue
+++ b/src/modules/14_KPI/components/competency/05ListDetail.vue
@@ -1,5 +1,328 @@
 <script setup lang="ts"></script>
 
 <template>
-  <div>การประเมิน</div>
+  <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>(๕ สมรรถนะ)</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>(๓ สมรรถนะ ตามกลุ่มงาน)</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>(๗ สมรรถนะ)</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>(ู๔ สมรรถนะ)</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>(ู๒ สมรรถนะ)</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">๘</div>
+              <div class="col-3 flex justify-center items-center">๘</div>
+              <div class="col-3 flex justify-center items-center">๑๒</div>
+              <div class="col-3 flex justify-center items-center">๑๒</div>
+            </div>
+          </div>
+          <div class="col-4 column">
+            <div class="row col-grow">
+              <div class="col-6 flex justify-center items-center">๗</div>
+              <div class="col-6 flex justify-center items-center">๙</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">๕</div>
+            </div>
+            <div class="row">
+              <div class="col-6">ต้น</div>
+              <div class="col-6">๔</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">๔</div>
+            </div>
+            <div class="row">
+              <div class="col-6">ต้น</div>
+              <div class="col-6">๓</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">๕</div>
+              <div class="col-4">๕</div>
+            </div>
+            <div class="row">
+              <div class="col-4">เชี่ยวชาญ</div>
+              <div class="col-4">๔</div>
+              <div class="col-4">๔</div>
+            </div>
+            <div class="row">
+              <div class="col-4">ชำนาญการพิเศษ</div>
+              <div class="col-4">๓</div>
+              <div class="col-4">๔</div>
+            </div>
+            <div class="row">
+              <div class="col-4">ชำนาญการ</div>
+              <div class="col-4">๒</div>
+              <div class="col-4">๓</div>
+            </div>
+            <div class="row">
+              <div class="col-4">ปฏิบัติการ</div>
+              <div class="col-4">๑</div>
+              <div class="col-4">๒</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">๔</div>
+              <div class="col-4">๔</div>
+            </div>
+            <div class="row">
+              <div class="col-4">อาวุโส</div>
+              <div class="col-4">๓</div>
+              <div class="col-4">๓</div>
+            </div>
+            <div class="row">
+              <div class="col-4">ชำนาญงาน</div>
+              <div class="col-4">๒</div>
+              <div class="col-4">๒</div>
+            </div>
+            <div class="row">
+              <div class="col-4">ปฏิบัติงาน</div>
+              <div class="col-4">๑</div>
+              <div class="col-4">๑</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>