hrms-bangkok/hrms-mgt
7
0
Fork 0
Code Issues Pull requests Projects Releases Packages 1 Wiki Activity Actions

ปรับ css ฟอร์มแบบประเมินสำหรับผู้ดูแล

Browse source
This commit is contained in:
Tanyalak 2023-07-11 01:19:33 +07:00
parent e80330a97f
commit e4f153b654
4 changed files with 1260 additions and 700 deletions
Download patch file Download diff file Expand all files Collapse all files

427
src/modules/05_placement/components/probation/AddWork.vue
View file

@ -11,7 +11,12 @@
class="q-mr-sm"
@click="router.go(-1)"
/>
เพิ่มแบบมอบหมายงานการทดลองปฏิบัติหน้าที่ราชการ
<div v-if="routeName == 'probationWorkAdd'">
เพิ่มแบบมอบหมายงานการทดลองปฏิบัติหน้าที่ราชการ
</div>
<div v-else>
แบบมอบหมายงานการทดลองปฏิบัติหน้าที่ราชการ
</div>
</div>
<q-card bordered class="col-12 text-dark">
<div class="row col-12 q-pa-lg">
@ -23,10 +28,22 @@
</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="ชื่อ-สกุล" />
<q-input
:readonly="routeName != 'probationWorkAdd'"
dense
borderless
:outlined="routeName == 'probationWorkAdd'"
v-model="name"
label="ชื่อ-สกุล" />
</div>
<div class="col-xs-12 col-sm-6">
<q-input dense outlined v-model="position" label="ตำแหน่ง" />
<q-input
:readonly="routeName != 'probationWorkAdd'"
dense
borderless
:outlined="routeName == 'probationWorkAdd'"
v-model="position"
label="ตำแหน่ง" />
</div>
</div>
</div>
@ -40,8 +57,24 @@
<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" />
<q-select
:options="OPcaretaker1"
class="col-xs-12 col-sm-6"
:readonly="routeName != 'probationWorkAdd'"
dense
borderless
:outlined="routeName == 'probationWorkAdd'"
v-model="caretaker"
label="ผู้ดูแลคนที่ 1" />
<q-select
:options="OPcaretaker2"
class="col-xs-12 col-sm-6"
:readonly="routeName != 'probationWorkAdd'"
dense
borderless
:outlined="routeName == 'probationWorkAdd'"
v-model="caretaker2"
label="ผู้ดูแลคนที่ 2" />
</div>
</div>
<div class="col-12">
@ -59,22 +92,53 @@
<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 class="col-xs-12 col-sm-6">
<q-input
:readonly="routeName != 'probationWorkAdd'"
dense
borderless
:outlined="routeName == 'probationWorkAdd'"
class="bg-white"
type="textarea"
v-model="activity1"
label="กิจกรรมของงาน/ขั้นตอนการปฏิบัติงาน(ไม่เกิน10บรรทัด )" />
</div>
<div class="col-xs-12 col-sm-6">
<q-input
:readonly="routeName != 'probationWorkAdd'"
dense
borderless
:outlined="routeName == 'probationWorkAdd'"
class="bg-white"
type="textarea"
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 class="col-xs-12 col-sm-6">
<q-input
:readonly="routeName != 'probationWorkAdd'"
dense
borderless
:outlined="routeName == 'probationWorkAdd'"
class="bg-white"
type="textarea"
v-model="activity2"
label="กิจกรรมของงาน/ขั้นตอนการปฏิบัติงาน(ไม่เกิน10บรรทัด )" />
</div>
<div class="col-xs-12 col-sm-6">
<q-input
:readonly="routeName != 'probationWorkAdd'"
dense borderless
:outlined="routeName == 'probationWorkAdd'"
class="bg-white"
type="textarea"
v-model="goal2"
label="เป้าหมายในการปฏิบัติงาน(ไม่เกิน10บรรทัด )" />
</div>
</div>
</q-card>
</div>
@ -92,9 +156,39 @@
<q-btn round color="primary" dense icon="mdi-plus" flat class="q-ml-sm" />
</div>
<div class="col-12 row q-col-gutter-sm">
<div class="col-12 "><q-select :options="OPknowledge" class="bg-white" dense outlined v-model="knowledge" label="ความรู้ความสามารถในการปฏิบัติงาน 1" /></div>
<div class="col-12 "><q-select :options="OPknowledge" class="bg-white" dense outlined v-model="knowledge2" label="ความรู้ความสามารถในการปฏิบัติงาน 2" /></div>
<div class="col-12 "><q-select :options="OPknowledge" class="bg-white" dense outlined v-model="knowledge3" label="ความรู้ความสามารถในการปฏิบัติงาน 2" /></div>
<div class="col-12 ">
<q-select
:options="OPknowledge"
class="bg-white"
:readonly="routeName != 'probationWorkAdd'"
dense
borderless
:outlined="routeName == 'probationWorkAdd'"
v-model="knowledge"
label="ความรู้ความสามารถในการปฏิบัติงาน 1" />
</div>
<div class="col-12 ">
<q-select
:options="OPknowledge"
class="bg-white"
:readonly="routeName != 'probationWorkAdd'"
dense
borderless
:outlined="routeName == 'probationWorkAdd'"
v-model="knowledge2"
label="ความรู้ความสามารถในการปฏิบัติงาน 2" />
</div>
<div class="col-12 ">
<q-select
:options="OPknowledge"
class="bg-white"
:readonly="routeName != 'probationWorkAdd'"
dense
borderless
:outlined="routeName == 'probationWorkAdd'"
v-model="knowledge3"
label="ความรู้ความสามารถในการปฏิบัติงาน 2" />
</div>
</div>
</div>
<div class="col-12 row">
@ -104,7 +198,7 @@
</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" />
<q-checkbox :disable="routeName != 'probationWorkAdd'" :val="lawl.id" dense v-model="law" :label="lawl.label" />
</div>
</q-card>
</div>
@ -114,7 +208,14 @@
</div>
<div class="col-12 row q-col-gutter-md">
<div class="col-12">
<q-input class="bg-white" dense outlined v-model="OtherLaw" />
<q-input
class="bg-white"
:readonly="routeName != 'probationWorkAdd'"
dense
borderless
:outlined="routeName == 'probationWorkAdd'"
v-model="OtherLaw"
/>
</div>
</div>
</div>
@ -123,10 +224,50 @@
ทักษะ
</div>
<div class="col-12 row q-col-gutter-sm">
<div class="col-xs-12 col-sm-6"><q-select :options="OPskill" class="bg-white" dense outlined v-model="skill" label="ด้านที่ 1" /></div>
<div class="col-xs-12 col-sm-6"><q-select :options="OPskill" class="bg-white" dense outlined v-model="skill2" label="ด้านที่ 2" /></div>
<div class="col-xs-12 col-sm-6"><q-select :options="OPskill" class="bg-white" dense outlined v-model="skill3" label="ด้านที่ 3" /></div>
<div class="col-xs-12 col-sm-6"><q-select :options="OPskill" class="bg-white" dense outlined v-model="skill4" label="ด้านที่ 4" /></div>
<div class="col-xs-12 col-sm-6">
<q-select
:options="OPskill"
class="bg-white"
:readonly="routeName != 'probationWorkAdd'"
dense
borderless
:outlined="routeName == 'probationWorkAdd'"
v-model="skill"
label="ด้านที่ 1" />
</div>
<div class="col-xs-12 col-sm-6">
<q-select
:options="OPskill"
class="bg-white"
:readonly="routeName != 'probationWorkAdd'"
dense
borderless
:outlined="routeName == 'probationWorkAdd'"
v-model="skill2"
label="ด้านที่ 2" />
</div>
<div class="col-xs-12 col-sm-6">
<q-select
:options="OPskill"
class="bg-white"
:readonly="routeName != 'probationWorkAdd'"
dense
borderless
:outlined="routeName == 'probationWorkAdd'"
v-model="skill3"
label="ด้านที่ 3" />
</div>
<div class="col-xs-12 col-sm-6">
<q-select
:options="OPskill"
class="bg-white"
:readonly="routeName != 'probationWorkAdd'"
dense
borderless
:outlined="routeName == 'probationWorkAdd'"
v-model="skill4"
label="ด้านที่ 4" />
</div>
</div>
</div>
</div>
@ -145,11 +286,61 @@
สมรรถนะหลัก
</div>
<div class="col-12 row q-col-gutter-sm">
<div class="col-xs-12 col-sm-6"><q-select :options="OPmain" class="bg-white" dense outlined v-model="main" label="ตัวที่ 1" /></div>
<div class="col-xs-12 col-sm-6"><q-select :options="OPmain" class="bg-white" dense outlined v-model="main2" label="ตัวที่ 2" /></div>
<div class="col-xs-12 col-sm-6"><q-select :options="OPmain" class="bg-white" dense outlined v-model="main3" label="ตัวที่ 3" /></div>
<div class="col-xs-12 col-sm-6"><q-select :options="OPmain" class="bg-white" dense outlined v-model="main4" label="ตัวที่ 4" /></div>
<div class="col-xs-12 col-sm-6"><q-select :options="OPmain" class="bg-white" dense outlined v-model="main5" label="ตัวที่ 4" /></div>
<div class="col-xs-12 col-sm-6">
<q-select
:options="OPmain"
class="bg-white"
:readonly="routeName != 'probationWorkAdd'"
dense
borderless
:outlined="routeName == 'probationWorkAdd'"
v-model="main"
label="ตัวที่ 1" />
</div>
<div class="col-xs-12 col-sm-6">
<q-select
:options="OPmain"
class="bg-white"
:readonly="routeName != 'probationWorkAdd'"
dense
borderless
:outlined="routeName == 'probationWorkAdd'"
v-model="main2"
label="ตัวที่ 2" />
</div>
<div class="col-xs-12 col-sm-6">
<q-select
:options="OPmain"
class="bg-white"
:readonly="routeName != 'probationWorkAdd'"
dense
borderless
:outlined="routeName == 'probationWorkAdd'"
v-model="main3"
label="ตัวที่ 3" />
</div>
<div class="col-xs-12 col-sm-6">
<q-select
:options="OPmain"
class="bg-white"
:readonly="routeName != 'probationWorkAdd'"
dense
borderless
:outlined="routeName == 'probationWorkAdd'"
v-model="main4"
label="ตัวที่ 4" />
</div>
<div class="col-xs-12 col-sm-6">
<q-select
:options="OPmain"
class="bg-white"
:readonly="routeName != 'probationWorkAdd'"
dense
borderless
:outlined="routeName == 'probationWorkAdd'"
v-model="main5"
label="ตัวที่ 4" />
</div>
</div>
</div>
<div class="col-12 row">
@ -157,9 +348,39 @@
สมรรถนะประจํากลุ่มงาน
</div>
<div class="col-12 row q-col-gutter-sm">
<div class="col-xs-12 col-sm-6"><q-select :options="OPgroup" class="bg-white" dense outlined v-model="group" label="ตัวที่ 1" /></div>
<div class="col-xs-12 col-sm-6"><q-select :options="OPgroup" class="bg-white" dense outlined v-model="group2" label="ตัวที่ 2" /></div>
<div class="col-xs-12 col-sm-6"><q-select :options="OPgroup" class="bg-white" dense outlined v-model="group3" label="ตัวที่ 3" /></div>
<div class="col-xs-12 col-sm-6">
<q-select
:options="OPgroup"
class="bg-white"
:readonly="routeName != 'probationWorkAdd'"
dense
borderless
:outlined="routeName == 'probationWorkAdd'"
v-model="group"
label="ตัวที่ 1" />
</div>
<div class="col-xs-12 col-sm-6">
<q-select
:options="OPgroup"
class="bg-white"
:readonly="routeName != 'probationWorkAdd'"
dense
borderless
:outlined="routeName == 'probationWorkAdd'"
v-model="group2"
label="ตัวที่ 2" />
</div>
<div class="col-xs-12 col-sm-6">
<q-select
:options="OPgroup"
class="bg-white"
:readonly="routeName != 'probationWorkAdd'"
dense
borderless
:outlined="routeName == 'probationWorkAdd'"
v-model="group3"
label="ตัวที่ 3" />
</div>
</div>
</div>
</div>
@ -169,7 +390,7 @@
<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" />
3.4 พฤติกรรมที่จําเป็นสําหรับการปฏิบัติงาน <span class="text-weight-regular q-pl-sm"> ( ได้แก่ ความประพฤติ ความมีคุณธรรมจริยธรรม การรักษาวินัย )</span>
3.4 พฤติกรรมที่จําเป็นสําหรับการปฏิบัติงาน<span class="text-weight-regular q-pl-sm"> ( ได้แก่ ความประพฤติ ความมีคุณธรรมจริยธรรม การรักษาวินัย )</span>
</div>
<q-card bordered flat class="col-12 row q-pa-md bg-grey-1">
<div class="row col-12 q-gutter-lg">
@ -223,7 +444,12 @@
</div>
<div class="col-12 row q-col-gutter-md">
<div class="col-12">
<q-input dense outlined v-model="Other" />
<q-input
:readonly="routeName != 'probationWorkAdd'"
dense
borderless
:outlined="routeName == 'probationWorkAdd'"
v-model="Other" />
</div>
</div>
</div>
@ -237,10 +463,26 @@
<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 บรรทัด)" />
<q-input
class="bg-white"
type="textarea"
:readonly="routeName != 'probationWorkAdd'"
dense
borderless
:outlined="routeName == 'probationWorkAdd'"
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 บรรทัด)" />
<q-input
class="bg-white"
type="textarea"
:readonly="routeName != 'probationWorkAdd'"
dense
borderless
:outlined="routeName == 'probationWorkAdd'"
v-model="goal1"
label="ตัวชี้วัดความสําเร็จของงาน (ไม่เกิน 10 บรรทัด)" />
</div>
</div>
</q-card>
@ -294,20 +536,20 @@
</div>
<div class="col-12 row q-gutter-md">
<q-card flat bordered class="col-12 q-pa-md bg-grey-1">
<div class="col-12 text-top2 ">
การรักษาวินัย ได้แก่
</div>
<div class="col-12 row q-col-gutter-md">
<div class="col-12 column q-ml-md">
<li>ความรู้ความสามารถที่ ก.ก. กำหนด</li>
<li>ทักษะที่ ก.ก. กำหนด</li>
<li>สมรรถนะตามที่ ก.ก. กำหนด</li>
<li>ความสามารถในการเรียนรู้งานในตำแหน่ง</li>
<li>ความสามารถในการปรับใช้ความรู้กับงานในหน้าที่</li>
<li>ความสำเร็จของงานที่ได้รับมอบหมาย</li>
<li>อื่นๆ (ถ้ามี) <q-input dense outlined v-model="Other" label="กรอกอื่นๆ" /></li>
</div>
<div class="col-12 text-top2 ">
การรักษาวินัย ได้แก่
</div>
<div class="col-12 row q-col-gutter-md">
<div class="col-12 column q-ml-md">
<li>ความรู้ความสามารถที่ ก.ก. กำหนด</li>
<li>ทักษะที่ ก.ก. กำหนด</li>
<li>สมรรถนะตามที่ ก.ก. กำหนด</li>
<li>ความสามารถในการเรียนรู้งานในตำแหน่ง</li>
<li>ความสามารถในการปรับใช้ความรู้กับงานในหน้าที่</li>
<li>ความสำเร็จของงานที่ได้รับมอบหมาย</li>
<li>อื่นๆ (ถ้ามี) <q-input dense outlined v-model="Other" label="กรอกอื่นๆ" /></li>
</div>
</div>
</q-card>
</div>
</div>
@ -364,10 +606,22 @@
</div>
<div class="col-12 row q-col-gutter-md">
<div class="col-xs-12 col-sm-4">
<q-input dense outlined v-model="name" label="ชื่อ-สกุล" />
<q-input
:readonly="routeName != 'probationWorkAdd'"
dense
borderless
:outlined="routeName == 'probationWorkAdd'"
v-model="name"
label="ชื่อ-สกุล" />
</div>
<div class="col-xs-12 col-sm-4">
<q-input dense outlined v-model="position" label="ตำแหน่ง" />
<q-input
:readonly="routeName != 'probationWorkAdd'"
dense
borderless
:outlined="routeName == 'probationWorkAdd'"
v-model="position"
label="ตำแหน่ง" />
</div>
<div class="col-xs-12 col-sm-4">
<datepicker
@ -387,8 +641,10 @@
</template>
<template #trigger>
<q-input
outlined
dense
:readonly="routeName != 'probationWorkAdd'"
dense
borderless
:outlined="routeName == 'probationWorkAdd'"
class="full-width datepicker"
:model-value="
date1 != null ? date2Thai(date1) : null
@ -415,7 +671,15 @@
ผู้ดูแลการทดลองปฏิบัติหน้าที่ราชการ
</div>
<div class="col-12 row q-col-gutter-md">
<q-select :options="OPcaretaker1" class="col-xs-12 col-sm-8" dense outlined v-model="caretaker" label="ผู้ดูแลคนที่ 1" />
<q-select
:options="OPcaretaker1"
class="col-xs-12 col-sm-8"
:readonly="routeName != 'probationWorkAdd'"
dense
borderless
:outlined="routeName == 'probationWorkAdd'"
v-model="caretaker"
label="ผู้ดูแลคนที่ 1" />
<div class="col-xs-12 col-sm-4">
<datepicker
menu-class-name="modalfix"
@ -434,8 +698,10 @@
</template>
<template #trigger>
<q-input
outlined
dense
:readonly="routeName != 'probationWorkAdd'"
dense
borderless
:outlined="routeName == 'probationWorkAdd'"
class="full-width datepicker"
:model-value="
date2 != null ? date2Thai(date2) : null
@ -454,7 +720,15 @@
</template>
</datepicker>
</div>
<q-select :options="OPcaretaker2" class="col-xs-12 col-sm-8" dense outlined v-model="caretaker2" label="ผู้ดูแลคนที่ 2" />
<q-select
:options="OPcaretaker2"
class="col-xs-12 col-sm-8"
:readonly="routeName != 'probationWorkAdd'"
dense
borderless
:outlined="routeName == 'probationWorkAdd'"
v-model="caretaker2"
label="ผู้ดูแลคนที่ 2" />
<div class="col-xs-12 col-sm-4">
<datepicker
menu-class-name="modalfix"
@ -473,8 +747,10 @@
</template>
<template #trigger>
<q-input
outlined
dense
:readonly="routeName != 'probationWorkAdd'"
dense
s borderless
:outlined="routeName == 'probationWorkAdd'"
class="full-width datepicker"
:model-value="
date3 != null ? date2Thai(date3) : null
@ -501,7 +777,15 @@
ผู้บังคับบัญชาผู้มอบหมายงาน
</div>
<div class="col-12 row q-col-gutter-md">
<q-select :options="OPcaretaker1" class="col-xs-12 col-sm-8" dense outlined v-model="commander" label="ผู้บังคับบัญชา" />
<q-select
:options="OPcaretaker1"
class="col-xs-12 col-sm-8"
:readonly="routeName != 'probationWorkAdd'"
dense
borderless
:outlined="routeName == 'probationWorkAdd'"
v-model="commander"
label="ผู้บังคับบัญชา" />
<div class="col-xs-12 col-sm-4">
<datepicker
menu-class-name="modalfix"
@ -520,8 +804,10 @@
</template>
<template #trigger>
<q-input
outlined
dense
:readonly="routeName != 'probationWorkAdd'"
dense
borderless
:outlined="routeName == 'probationWorkAdd'"
class="full-width datepicker"
:model-value="
date4 != null ? date2Thai(date4) : null
@ -544,10 +830,10 @@
</div>
</div>
</div>
<q-separator />
<div class="flex justify-end q-pa-sm q-gutter-sm">
<q-btn unelevated label="บันทึก" color="public"/>
</div>
<q-separator v-show="routeName == 'probationWorkAdd'" />
<div v-show="routeName == 'probationWorkAdd'" class="flex justify-end q-pa-sm q-gutter-sm">
<q-btn unelevated label="บันทึก" color="public"/>
</div>
</q-card>
</div>
</template>
@ -561,6 +847,8 @@ import type { QForm } from "quasar";
const mixin = useCounterMixin();
const { date2Thai } = mixin;
const routeName = router.currentRoute.value.name
const name = ref<string>('นายสมคิด ยอดใจ');
const position = ref<string>('นักจัดการงานทั่วไป');
@ -616,7 +904,7 @@ const date2 = ref<Date>(new Date());
const date3 = ref<Date>(new Date());
const date4 = ref<Date>(new Date());
</script>
<style lang="scss" scope>
<style lang="scss" scoped>
.text-top2{
font-weight: 500;
padding-bottom: 8px;
@ -633,4 +921,5 @@ const date4 = ref<Date>(new Date());
padding-bottom: 5px;
color: #02A998;
}
</style>

2
src/modules/05_placement/components/probation/ProbationDetail.vue
View file

@ -129,7 +129,7 @@
</q-tr>
</template>
<template v-slot:body="props">
<q-tr :props="props" class="cursor-pointer">
<q-tr :props="props" class="cursor-pointer" @click="router.push(`/probation/work/1`)">
<q-td
v-for="col in props.cols"
:key="col.name"

1521
src/modules/05_placement/components/probation/form.vue
View file

File diff suppressed because it is too large Load diff

10
src/modules/05_placement/router.ts
View file

@ -126,6 +126,16 @@ export default [
path: "/probation/work/add",
name: "probationWorkAdd",
component: probationWorkAdd,
meta: {
Auth: true,
Key: [6.3],
Role: "placement",
}
},
{
path: "/probation/work/:id",
name: "probationWork",
component: probationWorkAdd,
meta: {
Auth: true,
Key: [6.3],