fixing
This commit is contained in:
parent
73d45a3d24
commit
0e87c63641
123 changed files with 310 additions and 10280 deletions
328
src/modules/01_masterdata/components/competency/05ListDetail.vue
Normal file
328
src/modules/01_masterdata/components/competency/05ListDetail.vue
Normal file
|
|
@ -0,0 +1,328 @@
|
|||
<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>
|
||||
Loading…
Add table
Add a link
Reference in a new issue