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-08-24 16:55:24 +07:00
parent 41cb1f814e
commit 8e00b77f4c
13 changed files with 6498 additions and 5006 deletions
Download patch file Download diff file Expand all files Collapse all files

155
src/modules/05_placement/components/probation/FormAssign.vue
View file

@ -753,33 +753,33 @@ watch(knowledge.value, () => {
<template>
<q-form ref="myForm">
<div class="q-pb-md">
<div class="q-pa-sm">
<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)"
v-if="routeName == 'probationWorkAdd'" />
<div v-if="routeName == 'probationWorkAdd'">
เพิ่มแบบมอบหมายงานการทดลองปฏิบัติหน้าที่ราชการ
</div>
<div v-else class="col-12 row">
<div v-else class="col-12 row q-gutter-md">
<div>แบบมอบหมายงานการทดลองปฏิบัติหน้าที่ราชการ</div>
<q-space />
<!-- <q-space /> -->
<div v-if="status == false">
<q-btn flat round color="primary" @click="edit()" icon="mdi-pencil-outline">
<q-btn dense flat round color="primary" @click="edit()" icon="mdi-pencil-outline">
<q-tooltip>แก้ไขข้อมูล</q-tooltip>
</q-btn>
</div>
<div v-else>
<q-btn flat round color="red" @click="cancel()" icon="mdi-undo">
<q-btn dense flat round color="red" @click="cancel()" icon="mdi-undo">
<q-tooltip>ยกเลิก</q-tooltip>
</q-btn>
<q-btn flat round color="public" @click="saveEdit(assignId)" icon="mdi-content-save-outline">
<q-btn dense flat class="q-ml-md" round color="public" @click="saveEdit(assignId)" icon="mdi-content-save-outline">
<q-tooltip>บันทึกข้อมูล</q-tooltip>
</q-btn>
</div>
</div>
</div>
<q-card :bordered="routeName == 'probationWorkAdd'" class="col-12 text-dark">
<div class="row col-12 q-pa-lg">
<div class="col-12 text-dark">
<div class="row col-12">
<div class="row col-12 q-gutter-lg">
<div class="col-12 row">
<div class="col-12 text-top0 items-center">
@ -795,50 +795,54 @@ watch(knowledge.value, () => {
<q-input :rules="[(val) => !!val || 'กรุณากรอกตำเเหน่ง']" hide-bottom-space :readonly="status != true"
dense borderless :outlined="status == true" v-model="position" label="ตำแหน่ง" />
</div>
<div class="col-12 text-top0 items-center">
ระยะเวลาการทดลองปฎิบัติหน้าที่ราชการ
</div>
<div class="col-xs-12 col-sm-4">
<q-select :rules="[(val) => !!val || 'กรุณาเลือกระยะเวลา']" hide-bottom-space :options="monthOp"
class="col-xs-12 col-sm-6" :readonly="status != true" dense borderless option-label="label"
option-value="value" :outlined="status == true" v-model="monthSelect" :label="`ระยะเวลากี่เดือน`" />
</div>
<div class="col-xs-12 col-sm-4">
<datepicker menu-class-name="modalfix" v-model="date_start" :locale="'th'" autoApply borderless
:enableTimePicker="false" week-start="0" :readonly="status != true">
<template #year="{ year }">
{{ year + 543 }}
</template>
<template #year-overlay-value="{ value }">
{{ parseInt(value + 543) }}
</template>
<template #trigger>
<q-input dense borderless :readonly="status != true" :outlined="status == true"
:rules="[(val) => !!val || 'กรุณาเลือกวันที่']" hide-bottom-space
class="full-width datepicker q-mb-md" :model-value="date_start != null ? date2Thai(date_start) : undefined
" :label="`${'ตั้งเเต่วันที่'}`" clearable @clear="clearDateExam">
</q-input>
</template>
</datepicker>
</div>
<div class="col-xs-12 col-sm-4">
<datepicker menu-class-name="modalfix" v-model="date_finish" :locale="'th'" autoApply borderless
:readonly="isDatePicker2Readonly || status != true" :enableTimePicker="false" week-start="0">
<template #year="{ year }">
{{ year + 543 }}
</template>
<template #year-overlay-value="{ value }">
{{ parseInt(value + 543) }}
</template>
<template #trigger>
<q-input dense borderless :outlined="status == true" readonly class="full-width datepicker q-mb-md"
:model-value="date_finish != null
? date2Thai(date_finish)
: undefined
" :label="`${'ถึงวันที่'}`" clearable @clear="clearDateExam2">
</q-input>
</template>
</datepicker>
<div class="col-12 row">
<div class="col-12 text-top0 items-center">
ระยะเวลาการทดลองปฎิบัติหน้าที่ราชการ
</div>
<div class="col-12 row q-col-gutter-md">
<div class="col-xs-12 col-sm-4">
<q-select :rules="[(val) => !!val || 'กรุณาเลือกระยะเวลา']" hide-bottom-space :options="monthOp"
class="col-xs-12 col-sm-6" :readonly="status != true" dense borderless option-label="label"
option-value="value" :outlined="status == true" v-model="monthSelect" :label="`ระยะเวลากี่เดือน`" />
</div>
<div class="col-xs-12 col-sm-4">
<datepicker menu-class-name="modalfix" v-model="date_start" :locale="'th'" autoApply borderless
:enableTimePicker="false" week-start="0" :readonly="status != true">
<template #year="{ year }">
{{ year + 543 }}
</template>
<template #year-overlay-value="{ value }">
{{ parseInt(value + 543) }}
</template>
<template #trigger>
<q-input dense borderless :readonly="status != true" :outlined="status == true"
:rules="[(val) => !!val || 'กรุณาเลือกวันที่']" hide-bottom-space
class="full-width datepicker" :model-value="date_start != null ? date2Thai(date_start) : undefined
" :label="`${'ตั้งเเต่วันที่'}`" clearable @clear="clearDateExam">
</q-input>
</template>
</datepicker>
</div>
<div class="col-xs-12 col-sm-4">
<datepicker menu-class-name="modalfix" v-model="date_finish" :locale="'th'" autoApply borderless
:readonly="isDatePicker2Readonly || status != true" :enableTimePicker="false" week-start="0">
<template #year="{ year }">
{{ year + 543 }}
</template>
<template #year-overlay-value="{ value }">
{{ parseInt(value + 543) }}
</template>
<template #trigger>
<q-input hide-bottom-space dense borderless :outlined="status == true" readonly class="full-width datepicker"
:model-value="date_finish != null
? date2Thai(date_finish)
: undefined
" :label="`${'ถึงวันที่'}`" clearable @clear="clearDateExam2">
</q-input>
</template>
</datepicker>
</div>
</div>
</div>
</div>
</div>
@ -929,10 +933,8 @@ watch(knowledge.value, () => {
<div v-for="(item, index) in knowledgeArray" :key="index" class="col-12 row q-col-gutter-sm">
<div class="col-11 q-my-xs">
<q-select :option-label="(item) => `${item.title}-${item.description}`
" option-value="id" map-options :rules="index < 3
? [(val) => !!val || 'กรุณาเลือกความสามารถ']
: []
" hide-bottom-space :options="OPknowledge" class="bg-white" :readonly="status != true" dense
" option-value="id" map-options :rules="index < 3? [(val) => !!val || 'กรุณาเลือกความสามารถ']: []"
hide-bottom-space :options="OPknowledge" class="bg-white" :readonly="status != true" dense
borderless :outlined="status == true" v-model="knowledge[index]" :label="`ความรู้ความสามารถในการปฏิบัติงาน ${index + 1
}`" />
</div>
@ -1085,9 +1087,8 @@ watch(knowledge.value, () => {
<div class="col-xs-12 col-sm-6">
<q-select :option-label="(item) =>
`${item.title} - ${item.level_description}`
" option-value="id" hide-bottom-space :rules="[
(val) => !!val || 'กรุณาเลือกความรู้ความสามารถ',
]" :options="OPcomputer" class="bg-white" :readonly="status != true" dense borderless
" option-value="id" hide-bottom-space :rules="[(val) => !!val || 'กรุณาเลือกความรู้ความสามารถ',]"
:options="OPcomputer" class="bg-white" :readonly="status != true" dense borderless
map-options :outlined="status == true" v-model="skill" label="ด้านที่ 1">
<template v-slot:selected-item="scope">
<div class="ellipsis-2-lines">
@ -1099,9 +1100,8 @@ watch(knowledge.value, () => {
<div class="col-xs-12 col-sm-6">
<q-select ellipsis-2-lines :option-label="(item) =>
`${item.title} - ${item.level_description}`
" option-value="id" map-options hide-bottom-space :rules="[
(val) => !!val || 'กรุณาเลือกความรู้ความสามารถ',
]" :options="OPenglish" class="bg-white" :readonly="status != true" dense borderless
" option-value="id" map-options hide-bottom-space :rules="[(val) => !!val || 'กรุณาเลือกความรู้ความสามารถ',]"
:options="OPenglish" class="bg-white" :readonly="status != true" dense borderless
:outlined="status == true" v-model="skill2" label="ด้านที่ 2">
<template v-slot:selected-item="scope">
<div class="ellipsis-2-lines">
@ -1113,9 +1113,8 @@ watch(knowledge.value, () => {
<div class="col-xs-12 col-sm-6">
<q-select :option-label="(item) =>
`${item.title} - ${item.level_description}`
" option-value="id" hide-bottom-space :rules="[
(val) => !!val || 'กรุณาเลือกความรู้ความสามารถ',
]" :options="OPinfomation" class="bg-white" :readonly="status != true" dense map-options
" option-value="id" hide-bottom-space :rules="[(val) => !!val || 'กรุณาเลือกความรู้ความสามารถ',]"
:options="OPinfomation" class="bg-white" :readonly="status != true" dense map-options
borderless :outlined="status == true" v-model="skill3" label="ด้านที่ 3">
<template v-slot:selected-item="scope">
<div class="ellipsis-2-lines">
@ -1127,9 +1126,8 @@ watch(knowledge.value, () => {
<div class="col-xs-12 col-sm-6">
<q-select :option-label="(item) =>
`${item.title} - ${item.level_description}`
" option-value="id" hide-bottom-space :rules="[
(val) => !!val || 'กรุณาเลือกความรู้ความสามารถ',
]" :options="OPresourse" class="bg-white" :readonly="status != true" dense map-options
" option-value="id" hide-bottom-space :rules="[(val) => !!val || 'กรุณาเลือกความรู้ความสามารถ',]"
:options="OPresourse" class="bg-white" :readonly="status != true" dense map-options
borderless :outlined="status == true" v-model="skill4" label="ด้านที่ 4">
<template v-slot:selected-item="scope">
<div class="ellipsis-2-lines">
@ -1209,8 +1207,8 @@ watch(knowledge.value, () => {
<div class="col-xs-12 col-sm-6">
<q-select hide-bottom-space :rules="[(val) => !!val || 'กรุณาเลือกสมรรถนะ']" :options="filterMain(OPmain, [main, main2, main3, main4])
" :option-label="(item) => `${item.title} - ${item.description}`
" option-value="id" class="bg-white" :readonly="status != true" dense map-options borderless
" :option-label="(item) => `${item.title} - ${item.description}`"
option-value="id" class="bg-white" :readonly="status != true" dense map-options borderless
:outlined="status == true" v-model="main5" label="ตัวที่ 5">
<template v-slot:selected-item="scope">
<div class="ellipsis-2-lines">
@ -1226,9 +1224,8 @@ watch(knowledge.value, () => {
<div class="col-12 row q-col-gutter-sm">
<div class="col-xs-12 col-sm-6">
<q-select :option-label="(item) => `${item.title} - ${item.description}`
" option-value="id" hide-bottom-space :rules="[
(val) => !!val || 'กรุณาเลือกสมรรถนะประจํากลุ่มงาน',
]" :options="filterData(OPgroup, [group2, group3])" class="bg-white"
" option-value="id" hide-bottom-space :rules="[(val) => !!val || 'กรุณาเลือกสมรรถนะประจํากลุ่มงาน',]"
:options="filterData(OPgroup, [group2, group3])" class="bg-white"
:readonly="status != true" dense borderless map-options :outlined="status == true"
v-model="group" label="ตัวที่ 1">
<template v-slot:selected-item="scope">
@ -1240,9 +1237,8 @@ watch(knowledge.value, () => {
</div>
<div class="col-xs-12 col-sm-6">
<q-select :option-label="(item) => `${item.title} - ${item.description}`
" option-value="id" hide-bottom-space :rules="[
(val) => !!val || 'กรุณาเลือกสมรรถนะประจํากลุ่มงาน',
]" :options="filterData(OPgroup, [group, group3])" class="bg-white"
" option-value="id" hide-bottom-space :rules="[(val) => !!val || 'กรุณาเลือกสมรรถนะประจํากลุ่มงาน',]"
:options="filterData(OPgroup, [group, group3])" class="bg-white"
:readonly="status != true" dense borderless map-options :outlined="status == true"
v-model="group2" label="ตัวที่ 2">
<template v-slot:selected-item="scope">
@ -1254,9 +1250,8 @@ watch(knowledge.value, () => {
</div>
<div class="col-xs-12 col-sm-6">
<q-select :option-label="(item) => `${item.title} - ${item.description}`
" option-value="id" map-options hide-bottom-space :rules="[
(val) => !!val || 'กรุณาเลือกสมรรถนะประจํากลุ่มงาน',
]" :options="filterData(OPgroup, [group, group2])" class="bg-white"
" option-value="id" map-options hide-bottom-space :rules="[(val) => !!val || 'กรุณาเลือกสมรรถนะประจํากลุ่มงาน',]"
:options="filterData(OPgroup, [group, group2])" class="bg-white"
:readonly="status != true" dense borderless :outlined="status == true" v-model="group3"
label="ตัวที่ 3">
<template v-slot:selected-item="scope">
@ -1684,7 +1679,7 @@ watch(knowledge.value, () => {
<div v-show="routeName == 'probationWorkAdd'" class="flex justify-end q-pa-sm q-gutter-sm">
<q-btn unelevated label="บันทึก" color="public" @click="saveData(personalId)" />
</div>
</q-card>
</div>
</div>
</q-form>
</template>