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

ปรับ ui สรรหาสอบคัดเลือก

Browse source
This commit is contained in:
Kittapath 2023-10-02 00:22:43 +07:00
parent e3aa1d8221
commit 5fbf1bd8bd
11 changed files with 836 additions and 1200 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,8 +1,8 @@
<!-- card อาชีพ -->
<!-- card ตำแหน่งปัจจุบัน -->
<template>
<HeaderTop
v-model:edit="edit"
header="อาชีพ"
header="ตำแหน่งปัจจุบัน"
icon="mdi-briefcase"
:addData="true"
:editOnly="false"
@ -10,231 +10,128 @@
/>
<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="defaultOccupation.official"
:disable="
defaultOccupation.status !== 'official' ||
!(status == 'register' || status == 'rejectRegister')
"
>
<template v-slot:before>
<q-radio
v-model="defaultOccupation.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="defaultOccupation.personnel"
:disable="
defaultOccupation.status !== 'personnel' ||
!(status == 'register' || status == 'rejectRegister')
"
>
<template v-slot:before>
<q-radio
v-model="defaultOccupation.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="defaultOccupation.officialsOther"
:disable="
defaultOccupation.status !== 'officialsOther' ||
!(status == 'register' || status == 'rejectRegister')
"
>
<template v-slot:before>
<q-radio
v-model="defaultOccupation.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="defaultOccupation.employee"
:disable="
defaultOccupation.status !== 'employee' ||
!(status == 'register' || status == 'rejectRegister')
"
>
<template v-slot:before>
<q-radio
v-model="defaultOccupation.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>
<div class="col-12">
<q-radio
v-model="defaultOccupation.status"
checked-icon="task_alt"
unchecked-icon="panorama_fish_eye"
val="studying"
label="กำลังศึกษาต่อ"
dense
v-model="defaultOccupation.positionType"
label="ลูกจ้างประจำ"
color="teal"
val="prem"
: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="defaultOccupation.other"
:disable="
defaultOccupation.status !== 'other' ||
!(status == 'register' || status == 'rejectRegister')
"
>
<template v-slot:before>
<q-radio
v-model="defaultOccupation.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-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="defaultOccupation.company"
:label="`${'สำนัก/บริษัท'}`"
hide-bottom-space
<q-radio
v-model="defaultOccupation.positionType"
label="ลูกจ้างชั่วคราว"
color="teal"
val="temp"
:disable="!(status == 'register' || status == 'rejectRegister')"
/>
<q-radio
v-model="defaultOccupation.positionType"
label="ผู้ปฏิบัติงานอื่นในกรุงเทพมหานคร"
color="teal"
val="other"
:disable="!(status == 'register' || status == 'rejectRegister')"
/>
</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="defaultOccupation.department"
:label="`${'กอง/ฝ่าย'}`"
hide-bottom-space
/>
<div class="col-12 row">
<div class="col-3">
<q-input
:class="getClass(status == 'register' || status == 'rejectRegister')"
:outlined="status == 'register' || status == 'rejectRegister'"
dense
lazy-rules
autogrow
:readonly="!(status == 'register' || status == 'rejectRegister')"
:borderless="!(status == 'register' || status == 'rejectRegister')"
v-model="defaultOccupation.position"
:rules="[(val) => !!val || `${'กรุณากรอก ชื่อตำแหน่ง'}`]"
:label="`${'ชื่อตำแหน่ง'}`"
/>
</div>
<div class="col-3">
<q-input
class="q-pl-sm"
:class="getClass(status == 'register' || status == 'rejectRegister')"
:outlined="status == 'register' || status == 'rejectRegister'"
dense
lazy-rules
type="number"
autogrow
:readonly="!(status == 'register' || status == 'rejectRegister')"
:borderless="!(status == 'register' || status == 'rejectRegister')"
v-model="defaultOccupation.salary"
:rules="[(val) => !!val || `${'กรุณากรอก เงินเดือน'}`]"
:label="`${'เงินเดือน'}`"
/>
</div>
</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="defaultOccupation.email"
:label="`${'E-mail address'}`"
hide-bottom-space
/>
<!-- :rules="[
(val) =>
/^([a-zA-Z0-9._%-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,})$/.test(val) ||
'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="status == 'register' || status == 'rejectRegister' ? true : false"
maxlength="10"
lazy-rules
type="tel"
mask="##########"
autogrow
:readonly="!(status == 'register' || status == 'rejectRegister')"
:borderless="!(status == 'register' || status == 'rejectRegister')"
v-model="defaultOccupation.tel"
:label="`${'โทรศัพท์'}`"
hide-bottom-space
/>
<div class="col-12 row">
<div class="col-3">
<q-input
:class="getClass(status == 'register' || status == 'rejectRegister')"
:outlined="status == 'register' || status == 'rejectRegister'"
dense
lazy-rules
autogrow
:readonly="!(status == 'register' || status == 'rejectRegister')"
:borderless="!(status == 'register' || status == 'rejectRegister')"
v-model="defaultOccupation.group"
:rules="[(val) => !!val || `${'กรุณากรอก กลุ่ม/ฝ่าย'}`]"
:label="`${'กลุ่ม/ฝ่าย'}`"
/>
</div>
<div class="col-3">
<q-input
class="q-pl-sm"
:class="getClass(status == 'register' || status == 'rejectRegister')"
:outlined="status == 'register' || status == 'rejectRegister'"
dense
lazy-rules
autogrow
:readonly="!(status == 'register' || status == 'rejectRegister')"
:borderless="!(status == 'register' || status == 'rejectRegister')"
v-model="defaultOccupation.pile"
:rules="[(val) => !!val || `${'กรุณากรอก กอง'}`]"
:label="`${'กอง'}`"
/>
</div>
<div class="col-3">
<q-input
class="q-pl-sm"
:class="getClass(status == 'register' || status == 'rejectRegister')"
:outlined="status == 'register' || status == 'rejectRegister'"
dense
lazy-rules
autogrow
:readonly="!(status == 'register' || status == 'rejectRegister')"
:borderless="!(status == 'register' || status == 'rejectRegister')"
v-model="defaultOccupation.org"
:rules="[(val) => !!val || `${'กรุณากรอก สังกัด'}`]"
:label="`${'สังกัด'}`"
/>
</div>
<div class="col-3">
<q-input
class="q-pl-sm"
:class="getClass(status == 'register' || status == 'rejectRegister')"
:outlined="status == 'register' || status == 'rejectRegister'"
dense
:counter="status == 'register' || status == 'rejectRegister' ? true : false"
maxlength="10"
lazy-rules
type="tel"
mask="##########"
autogrow
:readonly="!(status == 'register' || status == 'rejectRegister')"
:borderless="!(status == 'register' || status == 'rejectRegister')"
v-model="defaultOccupation.tel"
:rules="[
(val) => val.length == 10 || `${'กรุณากรอก เบอร์โทรที่ทำงาน'}`,
(val) => /^[0-9]*$/.test(val) || 'กรุณากรอก เบอร์โทรที่ทำงานให้ถูกต้อง'
]"
:label="`${'เบอร์โทรที่ทำงาน'}`"
/>
</div>
</div>
</div>
</q-form>
@ -293,21 +190,13 @@ const fetchData = async () => {
.then((res) => {
const data = res.data.result
if (data != null) {
defaultOccupation.value.status = data.occupationType
defaultOccupation.value.company = data.occupationCompany
defaultOccupation.value.department = data.occupationDepartment
defaultOccupation.value.email = data.occupationEmail
defaultOccupation.value.org = data.occupationOrg
defaultOccupation.value.pile = data.occupationPile
defaultOccupation.value.group = data.occupationGroup
defaultOccupation.value.salary = data.occupationSalary
defaultOccupation.value.position = data.occupationPosition
defaultOccupation.value.positionType = data.occupationPositionType
defaultOccupation.value.tel = data.occupationTelephone
defaultOccupation.value.official =
data.occupationType == 'official' ? data.occupationPosition : null
defaultOccupation.value.personnel =
data.occupationType == 'personnel' ? data.occupationPosition : null
defaultOccupation.value.officialsOther =
data.occupationType == 'officialsOther' ? data.occupationPosition : null
defaultOccupation.value.employee =
data.occupationType == 'employee' ? data.occupationPosition : null
defaultOccupation.value.other =
data.occupationType == 'other' ? data.occupationPosition : null
}
})
.catch((e) => {