hrms-bangkok/hrms-recruit
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-03-29 16:39:45 +07:00
parent dcad2fcb07
commit c299af578f
14 changed files with 1261 additions and 1378 deletions
Download patch file Download diff file Expand all files Collapse all files

492
src/modules/01_exam/components/Form/Occupation.vue
View file

@ -1,255 +1,249 @@
<!-- card อาชีพ -->
<template>
<q-card flat bordered class="col-12 q-px-lg q-py-md q-mt-md">
<HeaderTop
v-model:edit="edit"
header="อาชีพ"
icon="mdi-briefcase"
:save="saveData"
:addData="true"
:editOnly="false"
:cancel="cancelData"
:editData="status == 'register' || status == 'rejectRegister'"
:disable="statusEdit"
/>
<!-- :changeBtn="changeBtn" -->
<q-form ref="myform">
<div class="row col-12 items-center q-col-gutter-x-xs q-col-gutter-y-xs">
<div class="col-12 row">
<q-input
:class="getClass(status == 'register' || status == 'rejectRegister')"
hide-bottom-space
dense
lazy-rules
type="textarea"
autogrow
:readonly="!(status == 'register' || status == 'rejectRegister')"
:borderless="!(status == 'register' || status == 'rejectRegister')"
v-model="occupationData.official"
:rules="[(val) => !!val || `${'กรุณากรอก สำนัก/บริษัท'}`]"
:disable="
occupationData.status !== 'official' ||
!(status == 'register' || status == 'rejectRegister')
"
>
<template v-slot:before>
<q-radio
v-model="occupationData.status"
checked-icon="task_alt"
unchecked-icon="panorama_fish_eye"
val="official"
label="ข้าราชการกรุงเทพมหานคร ตำแหน่ง"
dense
:disable="!(status == 'register' || status == 'rejectRegister')"
size="md"
style="font-size: 14px; color: black"
/>
</template>
</q-input>
<q-input
:class="getClass(status == 'register' || status == 'rejectRegister')"
hide-bottom-space
dense
lazy-rules
type="textarea"
autogrow
:readonly="!(status == 'register' || status == 'rejectRegister')"
:borderless="!(status == 'register' || status == 'rejectRegister')"
v-model="occupationData.personnel"
:rules="[(val) => !!val || `${'กรุณากรอก สำนัก/บริษัท'}`]"
:disable="
occupationData.status !== 'personnel' ||
!(status == 'register' || status == 'rejectRegister')
"
>
<template v-slot:before>
<q-radio
v-model="occupationData.status"
checked-icon="task_alt"
unchecked-icon="panorama_fish_eye"
val="personnel"
label="บุคลากรกรุงเทพมหานคร ตำแหน่ง"
dense
:disable="!(status == 'register' || status == 'rejectRegister')"
size="md"
style="font-size: 14px; color: black"
/>
</template>
</q-input>
<q-input
:class="getClass(status == 'register' || status == 'rejectRegister')"
hide-bottom-space
dense
lazy-rules
type="textarea"
autogrow
:readonly="!(status == 'register' || status == 'rejectRegister')"
:borderless="!(status == 'register' || status == 'rejectRegister')"
v-model="occupationData.officialsOther"
:rules="[(val) => !!val || `${'กรุณากรอก สำนัก/บริษัท'}`]"
:disable="
occupationData.status !== 'officialsOther' ||
!(status == 'register' || status == 'rejectRegister')
"
>
<template v-slot:before>
<q-radio
v-model="occupationData.status"
checked-icon="task_alt"
unchecked-icon="panorama_fish_eye"
val="officialsOther"
label="ข้าราชการประเภทอื่น ตำแหน่ง"
dense
:disable="!(status == 'register' || status == 'rejectRegister')"
size="md"
style="font-size: 14px; color: black"
/>
</template>
</q-input>
<q-input
:class="getClass(status == 'register' || status == 'rejectRegister')"
hide-bottom-space
dense
lazy-rules
type="textarea"
autogrow
:readonly="!(status == 'register' || status == 'rejectRegister')"
:borderless="!(status == 'register' || status == 'rejectRegister')"
v-model="occupationData.employee"
:rules="[(val) => !!val || `${'กรุณากรอก สำนัก/บริษัท'}`]"
:disable="
occupationData.status !== 'employee' ||
!(status == 'register' || status == 'rejectRegister')
"
>
<template v-slot:before>
<q-radio
v-model="occupationData.status"
checked-icon="task_alt"
unchecked-icon="panorama_fish_eye"
val="employee"
label="ลูกจ้าง/พนักงานราชการของส่วนราชการอื่น ตำแหน่ง"
dense
:disable="!(status == 'register' || status == 'rejectRegister')"
size="md"
style="font-size: 14px; color: black"
/>
</template>
</q-input>
<q-radio
v-model="occupationData.status"
checked-icon="task_alt"
unchecked-icon="panorama_fish_eye"
val="studying"
label="กำลังศึกษาต่อ"
dense
:disable="!(status == 'register' || status == 'rejectRegister')"
size="md"
style="font-size: 14px; color: black"
/>
<q-input
:class="getClass(status == 'register' || status == 'rejectRegister')"
hide-bottom-space
dense
lazy-rules
type="textarea"
autogrow
:readonly="!(status == 'register' || status == 'rejectRegister')"
:borderless="!(status == 'register' || status == 'rejectRegister')"
v-model="occupationData.other"
:rules="[(val) => !!val || `${'กรุณากรอก สำนัก/บริษัท'}`]"
:disable="
occupationData.status !== 'other' ||
!(status == 'register' || status == 'rejectRegister')
"
>
<template v-slot:before>
<q-radio
v-model="occupationData.status"
checked-icon="task_alt"
unchecked-icon="panorama_fish_eye"
val="other"
label="อื่นๆ"
dense
:disable="!(status == 'register' || status == 'rejectRegister')"
size="md"
style="font-size: 14px; color: black"
/>
</template>
</q-input>
</div>
<div class="col-xs-6 col-sm-3 col-md-3">
<q-input
:class="getClass(status == 'register' || status == 'rejectRegister')"
hide-bottom-space
:outlined="status == 'register' || status == 'rejectRegister'"
dense
lazy-rules
type="textarea"
autogrow
:readonly="!(status == 'register' || status == 'rejectRegister')"
:borderless="!(status == 'register' || status == 'rejectRegister')"
v-model="occupationData.company"
:rules="[(val) => !!val || `${'กรุณากรอก สำนัก/บริษัท'}`]"
:label="`${'สำนัก/บริษัท'}`"
/>
</div>
<div class="col-xs-6 col-sm-3 col-md-3">
<q-input
:class="getClass(status == 'register' || status == 'rejectRegister')"
hide-bottom-space
:outlined="status == 'register' || status == 'rejectRegister'"
dense
lazy-rules
type="textarea"
autogrow
:readonly="!(status == 'register' || status == 'rejectRegister')"
:borderless="!(status == 'register' || status == 'rejectRegister')"
v-model="occupationData.department"
:rules="[(val) => !!val || `${'กรุณากรอก กอง/ฝ่าย'}`]"
:label="`${'กอง/ฝ่าย'}`"
/>
</div>
<div class="col-xs-6 col-sm-3 col-md-3">
<q-input
:class="getClass(status == 'register' || status == 'rejectRegister')"
hide-bottom-space
:outlined="status == 'register' || status == 'rejectRegister'"
dense
lazy-rules
type="textarea"
autogrow
:readonly="!(status == 'register' || status == 'rejectRegister')"
:borderless="!(status == 'register' || status == 'rejectRegister')"
v-model="occupationData.email"
:rules="[(val) => !!val || `${'กรุณากรอก E-mail address'}`]"
:label="`${'E-mail address'}`"
/>
</div>
<div class="col-xs-6 col-sm-3 col-md-3">
<q-input
:class="getClass(status == 'register' || status == 'rejectRegister')"
hide-bottom-space
:outlined="status == 'register' || status == 'rejectRegister'"
dense
counter
maxlength="10"
lazy-rules
type="tel"
autogrow
:readonly="!(status == 'register' || status == 'rejectRegister')"
:borderless="!(status == 'register' || status == 'rejectRegister')"
v-model="occupationData.tel"
:rules="[
(val) => !!val || `${'กรุณากรอก โทรศัพท์'}`,
(val) => /^[0-9]*$/.test(val) || 'กรุณากรอก โทรศัพท์ให้ถูกต้อง'
]"
:label="`${'โทรศัพท์'}`"
/>
</div>
<HeaderTop
v-model:edit="edit"
header="อาชีพ"
icon="mdi-briefcase"
:save="saveData"
:addData="true"
:editOnly="false"
:cancel="cancelData"
:editData="status == 'register' || status == 'rejectRegister'"
:disable="statusEdit"
/>
<!-- :changeBtn="changeBtn" -->
<q-form ref="myform">
<div class="row col-12 items-center q-col-gutter-x-sm q-col-gutter-y-xs">
<div class="col-12 row q-pb-lg">
<q-input
:class="getClass(status == 'register' || status == 'rejectRegister')"
hide-bottom-space
dense
lazy-rules
type="textarea"
autogrow
:readonly="!(status == 'register' || status == 'rejectRegister')"
:borderless="!(status == 'register' || status == 'rejectRegister')"
v-model="occupationData.official"
:rules="[(val) => !!val || `${'กรุณากรอก สำนัก/บริษัท'}`]"
:disable="
occupationData.status !== 'official' ||
!(status == 'register' || status == 'rejectRegister')
"
>
<template v-slot:before>
<q-radio
v-model="occupationData.status"
checked-icon="task_alt"
unchecked-icon="panorama_fish_eye"
val="official"
label="ข้าราชการกรุงเทพมหานคร ตำแหน่ง"
dense
:disable="!(status == 'register' || status == 'rejectRegister')"
size="md"
style="font-size: 14px; color: black"
/>
</template>
</q-input>
<q-input
:class="getClass(status == 'register' || status == 'rejectRegister')"
hide-bottom-space
dense
lazy-rules
type="textarea"
autogrow
:readonly="!(status == 'register' || status == 'rejectRegister')"
:borderless="!(status == 'register' || status == 'rejectRegister')"
v-model="occupationData.personnel"
:rules="[(val) => !!val || `${'กรุณากรอก สำนัก/บริษัท'}`]"
:disable="
occupationData.status !== 'personnel' ||
!(status == 'register' || status == 'rejectRegister')
"
>
<template v-slot:before>
<q-radio
v-model="occupationData.status"
checked-icon="task_alt"
unchecked-icon="panorama_fish_eye"
val="personnel"
label="บุคลากรกรุงเทพมหานคร ตำแหน่ง"
dense
:disable="!(status == 'register' || status == 'rejectRegister')"
size="md"
style="font-size: 14px; color: black"
/>
</template>
</q-input>
<q-input
:class="getClass(status == 'register' || status == 'rejectRegister')"
hide-bottom-space
dense
lazy-rules
type="textarea"
autogrow
:readonly="!(status == 'register' || status == 'rejectRegister')"
:borderless="!(status == 'register' || status == 'rejectRegister')"
v-model="occupationData.officialsOther"
:rules="[(val) => !!val || `${'กรุณากรอก สำนัก/บริษัท'}`]"
:disable="
occupationData.status !== 'officialsOther' ||
!(status == 'register' || status == 'rejectRegister')
"
>
<template v-slot:before>
<q-radio
v-model="occupationData.status"
checked-icon="task_alt"
unchecked-icon="panorama_fish_eye"
val="officialsOther"
label="ข้าราชการประเภทอื่น ตำแหน่ง"
dense
:disable="!(status == 'register' || status == 'rejectRegister')"
size="md"
style="font-size: 14px; color: black"
/>
</template>
</q-input>
<q-input
:class="getClass(status == 'register' || status == 'rejectRegister')"
hide-bottom-space
dense
lazy-rules
type="textarea"
autogrow
:readonly="!(status == 'register' || status == 'rejectRegister')"
:borderless="!(status == 'register' || status == 'rejectRegister')"
v-model="occupationData.employee"
:rules="[(val) => !!val || `${'กรุณากรอก สำนัก/บริษัท'}`]"
:disable="
occupationData.status !== 'employee' ||
!(status == 'register' || status == 'rejectRegister')
"
>
<template v-slot:before>
<q-radio
v-model="occupationData.status"
checked-icon="task_alt"
unchecked-icon="panorama_fish_eye"
val="employee"
label="ลูกจ้าง/พนักงานราชการของส่วนราชการอื่น ตำแหน่ง"
dense
:disable="!(status == 'register' || status == 'rejectRegister')"
size="md"
style="font-size: 14px; color: black"
/>
</template>
</q-input>
<q-radio
v-model="occupationData.status"
checked-icon="task_alt"
unchecked-icon="panorama_fish_eye"
val="studying"
label="กำลังศึกษาต่อ"
dense
:disable="!(status == 'register' || status == 'rejectRegister')"
size="md"
style="font-size: 14px; color: black"
/>
<q-input
:class="getClass(status == 'register' || status == 'rejectRegister')"
hide-bottom-space
dense
lazy-rules
type="textarea"
autogrow
:readonly="!(status == 'register' || status == 'rejectRegister')"
:borderless="!(status == 'register' || status == 'rejectRegister')"
v-model="occupationData.other"
:rules="[(val) => !!val || `${'กรุณากรอก สำนัก/บริษัท'}`]"
:disable="
occupationData.status !== 'other' ||
!(status == 'register' || status == 'rejectRegister')
"
>
<template v-slot:before>
<q-radio
v-model="occupationData.status"
checked-icon="task_alt"
unchecked-icon="panorama_fish_eye"
val="other"
label="อื่นๆ"
dense
:disable="!(status == 'register' || status == 'rejectRegister')"
size="md"
style="font-size: 14px; color: black"
/>
</template>
</q-input>
</div>
</q-form>
</q-card>
<div class="col-xs-12 col-sm-3 col-md-3">
<q-input
:class="getClass(status == 'register' || status == 'rejectRegister')"
:outlined="status == 'register' || status == 'rejectRegister'"
dense
lazy-rules
type="textarea"
autogrow
:readonly="!(status == 'register' || status == 'rejectRegister')"
:borderless="!(status == 'register' || status == 'rejectRegister')"
v-model="occupationData.company"
:rules="[(val) => !!val || `${'กรุณากรอก สำนัก/บริษัท'}`]"
:label="`${'สำนัก/บริษัท'}`"
/>
</div>
<div class="col-xs-12 col-sm-3 col-md-3">
<q-input
:class="getClass(status == 'register' || status == 'rejectRegister')"
:outlined="status == 'register' || status == 'rejectRegister'"
dense
lazy-rules
type="textarea"
autogrow
:readonly="!(status == 'register' || status == 'rejectRegister')"
:borderless="!(status == 'register' || status == 'rejectRegister')"
v-model="occupationData.department"
:rules="[(val) => !!val || `${'กรุณากรอก กอง/ฝ่าย'}`]"
:label="`${'กอง/ฝ่าย'}`"
/>
</div>
<div class="col-xs-12 col-sm-3 col-md-3">
<q-input
:class="getClass(status == 'register' || status == 'rejectRegister')"
:outlined="status == 'register' || status == 'rejectRegister'"
dense
lazy-rules
type="textarea"
autogrow
:readonly="!(status == 'register' || status == 'rejectRegister')"
:borderless="!(status == 'register' || status == 'rejectRegister')"
v-model="occupationData.email"
:rules="[(val) => !!val || `${'กรุณากรอก E-mail address'}`]"
:label="`${'E-mail address'}`"
/>
</div>
<div class="col-xs-12 col-sm-3 col-md-3">
<q-input
:class="getClass(status == 'register' || status == 'rejectRegister')"
:outlined="status == 'register' || status == 'rejectRegister'"
dense
counter
maxlength="10"
lazy-rules
type="tel"
autogrow
:readonly="!(status == 'register' || status == 'rejectRegister')"
:borderless="!(status == 'register' || status == 'rejectRegister')"
v-model="occupationData.tel"
:rules="[
(val) => !!val || `${'กรุณากรอก โทรศัพท์'}`,
(val) => /^[0-9]*$/.test(val) || 'กรุณากรอก โทรศัพท์ให้ถูกต้อง'
]"
:label="`${'โทรศัพท์'}`"
/>
</div>
</div>
</q-form>
<!-- <q-dialog :model-value="modalConsend" persistent>
<q-card style="min-width: 800px">
<Conference :ok="consendOk" :close="consenClose" />