259 lines
16 KiB
Vue
259 lines
16 KiB
Vue
|
<template>
|
||
|
|
<div class="toptitle text-dark col-12 row items-center">
|
||
|
|
<q-btn
|
||
|
|
icon="mdi-arrow-left"
|
||
|
|
unelevated
|
||
|
|
round
|
||
|
|
dense
|
||
|
|
flat
|
||
|
|
color="primary"
|
||
|
|
class="q-mr-sm"
|
||
|
|
@click="router.go(-1)"
|
||
|
|
/>
|
||
|
|
แบบมอบหมายงานการทดลองปฏิบัติหน้าที่ราชการ
|
||
|
|
</div>
|
||
|
|
<q-card bordered class="row text-dark q-pa-lg">
|
||
|
|
<div class="row col-12 q-gutter-lg">
|
||
|
|
<div class="col-12 row">
|
||
|
|
<div class="col-12 text-top2">
|
||
|
|
<q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
|
||
|
|
ผู้ทดลองปฏิบัติหน้าที่ราชการ
|
||
|
|
</div>
|
||
|
|
<div class="col-12 row q-col-gutter-md">
|
||
|
|
<div class="col-xs-12 col-sm-6">
|
||
|
|
<q-input dense outlined v-model="name" label="ชื่อ-สกุล" />
|
||
|
|
</div>
|
||
|
|
<div class="col-xs-12 col-sm-6">
|
||
|
|
<q-input dense outlined v-model="position" label="ตำแหน่ง" />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="col-12 row">
|
||
|
|
<div class="col-12 text-top2 row items-center">
|
||
|
|
<q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
|
||
|
|
ผู้ดูแลการทดลองปฏิบัติหน้าที่ราชการ (อาจมีได้มากกว่า 1 คน)
|
||
|
|
<q-btn round color="primary" dense icon="mdi-plus" flat class="q-ml-sm" />
|
||
|
|
</div>
|
||
|
|
<div class="col-12 row q-col-gutter-md">
|
||
|
|
<q-select :options="OPcaretaker1" class="col-xs-12 col-sm-6" dense outlined v-model="caretaker" label="ผู้ดูแลคนที่ 1" />
|
||
|
|
<q-select :options="OPcaretaker2" class="col-xs-12 col-sm-6" dense outlined v-model="caretaker2" label="ผู้ดูแลคนที่ 2" />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="col-12">
|
||
|
|
<q-separator />
|
||
|
|
</div>
|
||
|
|
<div class="col-12 row">
|
||
|
|
<div class="col-12 text-Hd">ผลการปฏิบัติงาน</div>
|
||
|
|
<div class="col-12 text-top2 row items-center">
|
||
|
|
<q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
|
||
|
|
ชื่องาน / ภารกิจงานที่มอบหมาย (ควรมีมากกว่า 1 ภารกิจงาน)
|
||
|
|
<q-btn round color="primary" dense icon="mdi-plus" flat class="q-ml-sm" />
|
||
|
|
</div>
|
||
|
|
<div class="col-12 row q-gutter-md">
|
||
|
|
<q-card flat bordered class="col-12 q-pa-sm bg-grey-1">
|
||
|
|
<div class="col-12 row q-col-gutter-sm">
|
||
|
|
<div class="col-xs-12 col-sm-6">
|
||
|
|
<q-input class="bg-white" type="textarea" dense outlined v-model="activity1" label="กิจกรรมของงาน/ขั้นตอนการปฏิบัติงาน(ไม่เกิน10บรรทัด )" />
|
||
|
|
</div>
|
||
|
|
<div class="col-xs-12 col-sm-6">
|
||
|
|
<q-input class="bg-white" type="textarea" dense outlined v-model="goal1" label="เป้าหมายในการปฏิบัติงาน(ไม่เกิน10บรรทัด )" />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</q-card>
|
||
|
|
<q-card flat bordered class="col-12 q-pa-sm bg-grey-1">
|
||
|
|
<div class="col-12 row q-col-gutter-sm">
|
||
|
|
<div class="col-xs-12 col-sm-6">
|
||
|
|
<q-input class="bg-white" type="textarea" dense outlined v-model="activity2" label="กิจกรรมของงาน/ขั้นตอนการปฏิบัติงาน(ไม่เกิน10บรรทัด )" />
|
||
|
|
</div>
|
||
|
|
<div class="col-xs-12 col-sm-6">
|
||
|
|
<q-input class="bg-white" type="textarea" dense outlined v-model="goal2" label="เป้าหมายในการปฏิบัติงาน(ไม่เกิน10บรรทัด )" />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</q-card>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="col-12 row">
|
||
|
|
<div class="col-12 text-top2 row items-center">
|
||
|
|
<q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
|
||
|
|
ความรู้ความสามารถและทักษะ(ตามที่ก.ก.กําหนด)
|
||
|
|
<q-btn round color="primary" dense icon="mdi-plus" flat class="q-ml-sm" />
|
||
|
|
</div>
|
||
|
|
<div class="col-12 row q-col-gutter-md">
|
||
|
|
<q-select :options="OPknowledge" class="col-12" dense outlined v-model="knowledge" label="ความรู้ความสามารถในการปฏิบัติงาน 1" />
|
||
|
|
<q-select :options="OPknowledge" class="col-12" dense outlined v-model="knowledge2" label="ความรู้ความสามารถในการปฏิบัติงาน 2" />
|
||
|
|
<q-select :options="OPknowledge" class="col-12" dense outlined v-model="knowledge3" label="ความรู้ความสามารถในการปฏิบัติงาน 2" />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="col-12 row">
|
||
|
|
<div class="col-12 text-top2 row items-center">
|
||
|
|
<q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
|
||
|
|
ความรู้เรื่องกฎหมายและกฎระเบียบ (ไม่เกิน 20 หัวข้อ)
|
||
|
|
<q-btn round color="primary" dense icon="mdi-plus" flat class="q-ml-sm" />
|
||
|
|
</div>
|
||
|
|
<q-card flat bordered class="col-12 q-pa-md" style="max-height: 500px; overflow-y: scroll">
|
||
|
|
<div class="col-12 row q-pb-sm" v-for="(lawl, index) in listlaw" :key="index" >
|
||
|
|
<q-checkbox :val="lawl.id" dense v-model="law" :label="lawl.label" />
|
||
|
|
</div>
|
||
|
|
</q-card>
|
||
|
|
</div>
|
||
|
|
<div class="col-12 row">
|
||
|
|
<div class="col-12 text-top2">
|
||
|
|
<q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
|
||
|
|
กฎหมายอื่น ๆ ที่เกี่ยวข้องกับการปฏิบัติงาน
|
||
|
|
</div>
|
||
|
|
<div class="col-12 row q-col-gutter-md">
|
||
|
|
<div class="col-12">
|
||
|
|
<q-input dense outlined v-model="OtherLaw" />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="col-12 row">
|
||
|
|
<div class="col-12 text-top2">
|
||
|
|
<q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
|
||
|
|
ทักษะ
|
||
|
|
</div>
|
||
|
|
<div class="col-12 row q-col-gutter-md">
|
||
|
|
<q-select :options="OPskill" class="col-xs-12 col-sm-6" dense outlined v-model="skill" label="ด้านที่ 1" />
|
||
|
|
<q-select :options="OPskill" class="col-xs-12 col-sm-6" dense outlined v-model="skill2" label="ด้านที่ 2" />
|
||
|
|
<q-select :options="OPskill" class="col-xs-12 col-sm-6" dense outlined v-model="skill3" label="ด้านที่ 3" />
|
||
|
|
<q-select :options="OPskill" class="col-xs-12 col-sm-6" dense outlined v-model="skill4" label="ด้านที่ 4" />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="col-12 row">
|
||
|
|
<div class="col-12 text-top2 ">
|
||
|
|
<q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
|
||
|
|
สมรรถนะหลัก
|
||
|
|
</div>
|
||
|
|
<div class="col-12 row q-col-gutter-md">
|
||
|
|
<q-select :options="OPmain" class="col-xs-12 col-sm-6" dense outlined v-model="main" label="ตัวที่ 1" />
|
||
|
|
<q-select :options="OPmain" class="col-xs-12 col-sm-6" dense outlined v-model="main2" label="ตัวที่ 2" />
|
||
|
|
<q-select :options="OPmain" class="col-xs-12 col-sm-6" dense outlined v-model="main3" label="ตัวที่ 3" />
|
||
|
|
<q-select :options="OPmain" class="col-xs-12 col-sm-6" dense outlined v-model="main4" label="ตัวที่ 4" />
|
||
|
|
<q-select :options="OPmain" class="col-xs-12 col-sm-6" dense outlined v-model="main5" label="ตัวที่ 4" />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="col-12 row">
|
||
|
|
<div class="col-12 text-top2 ">
|
||
|
|
<q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
|
||
|
|
สมรรถนะประจํากลุ่มงาน
|
||
|
|
</div>
|
||
|
|
<div class="col-12 row q-col-gutter-md">
|
||
|
|
<q-select :options="OPgroup" class="col-xs-12 col-sm-6" dense outlined v-model="group" label="ตัวที่ 1" />
|
||
|
|
<q-select :options="OPgroup" class="col-xs-12 col-sm-6" dense outlined v-model="group2" label="ตัวที่ 2" />
|
||
|
|
<q-select :options="OPgroup" class="col-xs-12 col-sm-6" dense outlined v-model="group3" label="ตัวที่ 3" />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="col-12 row">
|
||
|
|
<div class="col-12 text-top2">พฤติกรรมที่จําเป็นสําหรับการปฏิบัติงาน</div>
|
||
|
|
(ได้แก่ ความประพฤติ ความมีคุณธรรมจริยธรรม การรักษาวินัย )
|
||
|
|
</div>
|
||
|
|
<div class="col-12 row">
|
||
|
|
<div class="col-12 text-top2 ">
|
||
|
|
<q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
|
||
|
|
ความประพฤติ ได้แก่
|
||
|
|
</div>
|
||
|
|
<div class="col-12 row q-col-gutter-md">
|
||
|
|
<div class="col-12 column q-ml-lg">
|
||
|
|
<li>ให้บริการประชาชนหรือผู้รับบริการด้วยอธัยาศัยดี</li>
|
||
|
|
<li>มีความรับผิดชอบในการปฏิบัติงาน</li>
|
||
|
|
<li>ให้บริการประชาชนหรือผู้รับบริการด้วยความรวดเร็ว เอาใจใส่เป็นมาตรฐานเดียวกัน</li>
|
||
|
|
<li>ตั้งใจปฏิบัติหน้าที่ราชการด้วยความอุตสาหะ ขยันหมั่นเพียร</li>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="col-12 row">
|
||
|
|
<div class="col-12 text-top2 ">
|
||
|
|
<q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
|
||
|
|
ความมีคุณธรรมจริยธรรม ได้แก่
|
||
|
|
</div>
|
||
|
|
<div class="col-12 row q-col-gutter-md">
|
||
|
|
<div class="col-12 column q-ml-lg">
|
||
|
|
<li>อุทิศตนและเสียสละเวลาในการปฏิบัติงานอย่างเต็มกำลังความสามารถ</li>
|
||
|
|
<li>มีจิตสำนึกที่ดี ปฏิบัติงานด้วยความซื่อสัตย์ สุจริต</li>
|
||
|
|
<li>ยึดมั่นในสถาบันพระมหากษัตริย์ และไม่กระทำการใด ๆ อันจะก่อให้เกิดความเสียหายต่อประเทศชาติ ศาสนา และพระมหากษัตริย์</li>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="col-12 row">
|
||
|
|
<div class="col-12 text-top2 ">
|
||
|
|
<q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
|
||
|
|
การรักษาวินัย ได้แก่
|
||
|
|
</div>
|
||
|
|
<div class="col-12 row q-col-gutter-md">
|
||
|
|
<div class="col-12 column q-ml-lg">
|
||
|
|
<li>มีความรับผิดชอบในการรักษาเวลาทำงาน</li>
|
||
|
|
<li>แต่งกายในการปฏิบัติงานได้อย่างเหมาะสมกับการเป็นข้าราชการ</li>
|
||
|
|
<li>ไม่กระทำการใด ๆ อันเป็นการเสื่อมเกียรติและศักดิ์ศรีของความเป็นข้าราชการ</li>
|
||
|
|
<li>ไม่กระทำการใด ๆ อันอาจก่อให้เกิดความเสียหายแก่ชื่อเสียงของหน่วยงาน</li>
|
||
|
|
<li>ปฏิบัติหน้าที่อย่างตรงไปตรงมาโดยยึกหลักจรรยาบรรณวิชาชีพ</li>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</q-card>
|
||
|
|
</template>
|
||
|
|
<script setup lang="ts">
|
||
|
|
import { useRouter } from "vue-router";
|
||
|
|
const router = useRouter();
|
||
|
|
import { ref } from "vue";
|
||
|
|
import type OtherVue from "@/modules/04_registry/components/Other.vue";
|
||
|
|
|
||
|
|
const name = ref<string>('นายสมคิด ยอดใจ');
|
||
|
|
const position = ref<string>('นักจัดการงานทั่วไป');
|
||
|
|
|
||
|
|
const caretaker = ref<string>('นางสาวรัชภรณ์ ภักดี');
|
||
|
|
const caretaker2 = ref<string>('');
|
||
|
|
const OPcaretaker1 = ['นางสาวรัชภรณ์ ภักดี','นางสาวทวิดา กมลเวชชี'];
|
||
|
|
const OPcaretaker2 = ['นางสาวรัชภรณ์ ภักดี','นางสาวทวิดา กมลเวชชี'];
|
||
|
|
|
||
|
|
const activity1 = ref<string>('');
|
||
|
|
const goal1 = ref<string>('');
|
||
|
|
const activity2 = ref<string>('');
|
||
|
|
const goal2 = ref<string>('');
|
||
|
|
|
||
|
|
const knowledge = ref<string>('');
|
||
|
|
const knowledge2 = ref<string>('');
|
||
|
|
const knowledge3 = ref<string>('');
|
||
|
|
const OPknowledge = ['',''];
|
||
|
|
|
||
|
|
const law = ref([]);
|
||
|
|
const listlaw = [
|
||
|
|
{ id: 1, label: 'ความรู้เรื่องกฎหมายและกฎระเบียบ 1' },
|
||
|
|
{ id: 2, label: 'ความรู้เรื่องกฎหมายและกฎระเบียบ 2' },
|
||
|
|
{ id: 3, label: 'ความรู้เรื่องกฎหมายและกฎระเบียบ 3' },
|
||
|
|
{ id: 4, label: 'ความรู้เรื่องกฎหมายและกฎระเบียบ 4' },
|
||
|
|
{ id: 5, label: 'ความรู้เรื่องกฎหมายและกฎระเบียบ 5' }
|
||
|
|
];
|
||
|
|
const OtherLaw = ref<string>('');
|
||
|
|
|
||
|
|
const skill = ref<string>('ความรู้ความสามารถด้าน 1');
|
||
|
|
const skill2 = ref<string>('ความรู้ความสามารถด้าน 2');
|
||
|
|
const skill3 = ref<string>('ความรู้ความสามารถด้าน 3');
|
||
|
|
const skill4 = ref<string>('ความรู้ความสามารถด้าน 4');
|
||
|
|
const OPskill = [''];
|
||
|
|
|
||
|
|
const main = ref<string>('คุณธรรมจริยธรรม')
|
||
|
|
const main2 = ref<string>('การให้บริการที่ดี')
|
||
|
|
const main3 = ref<string>('การมุ่งผลสัมฤทธิ์')
|
||
|
|
const main4 = ref<string>('ทํางานเป็นทีม')
|
||
|
|
const main5 = ref<string>('การส่ังสมความเชี่ยวชาญในอาชีพ')
|
||
|
|
const OPmain = [''];
|
||
|
|
|
||
|
|
const group = ref<string>('')
|
||
|
|
const group2 = ref<string>('')
|
||
|
|
const group3 = ref<string>('')
|
||
|
|
const OPgroup = [''];
|
||
|
|
</script>
|
||
|
|
<style lang="scss" scope>
|
||
|
|
.text-top2{
|
||
|
|
font-weight: 600;
|
||
|
|
padding-bottom: 8px;
|
||
|
|
color: rgb(70, 68, 68);
|
||
|
|
}
|
||
|
|
.text-Hd{
|
||
|
|
font-weight: 600;
|
||
|
|
font-size: 1rem;
|
||
|
|
padding-bottom: 5px;
|
||
|
|
color: #02A998;
|
||
|
|
}
|
||
|
|
</style>
|