UI การประเมินพฤติกรรมการปฏิบัติราชการ
This commit is contained in:
oat_dev
parent
8ccfb61c3e
commit
2b6e22a840
1 changed files with 324 additions and 1 deletions
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue