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

เพิ่ม dialog กรอกบัตร, ปรับ input เพิ่มเติม

Browse source
This commit is contained in:
Tanyalak 2023-10-03 17:10:00 +07:00
parent 1d5a73bb03
commit 16dd4c2fe8
4 changed files with 135 additions and 35 deletions
Download patch file Download diff file Expand all files Collapse all files

14
src/modules/01_exam/components/Form/Address.vue
View file

@ -87,10 +87,11 @@
:class="getClass(status == 'register' || status == 'rejectRegister')" :class="getClass(status == 'register' || status == 'rejectRegister')"
dense dense
lazy-rules lazy-rules
readonly :readonly="!(status == 'rejectRegister')"
borderless :borderless="!(status == 'register' || status == 'rejectRegister')"
:outlined="status == 'register' || status == 'rejectRegister'"
v-model="defaultAddress.code" v-model="defaultAddress.code"
:style="!(status == 'register' || status == 'rejectRegister') ? '' : 'padding:0 12px;'" bottom-slots
:label="`${'รหัสไปรษณีย์'}`" :label="`${'รหัสไปรษณีย์'}`"
/> />
</div> </div>
@ -198,10 +199,11 @@
:class="getClass(status == 'register' || status == 'rejectRegister')" :class="getClass(status == 'register' || status == 'rejectRegister')"
dense dense
lazy-rules lazy-rules
readonly bottom-slots
borderless :readonly="!(status == 'rejectRegister')"
:borderless="!(status == 'register' || status == 'rejectRegister')"
:outlined="status == 'register' || status == 'rejectRegister'"
v-model="defaultAddress.codeC" v-model="defaultAddress.codeC"
:style="!(status == 'register' || status == 'rejectRegister') ? '' : 'padding:0 12px;'"
:label="`${'รหัสไปรษณีย์'}`" :label="`${'รหัสไปรษณีย์'}`"
/> />
</div> </div>

41
src/modules/01_exam/components/Form/Career.vue
View file

@ -73,6 +73,22 @@
/> />
</div> </div>
<div class="col-xs-12 col-sm-6 col-md-6"> <div class="col-xs-12 col-sm-6 col-md-6">
<q-select
:class="getClass(edit)"
:outlined="edit"
dense
lazy-rules
:readonly="!edit"
:borderless="!edit"
v-model="type"
:options="opType"
:rules="[(val) => !!val || `${'กรุณาเลือกประเภท'}`]"
:label="`${'ประเภท'}`"
@update:modelValue="clickEditRow"
hide-bottom-space
/>
</div>
<!-- <div class="col-xs-12 col-sm-6 col-md-6">
<q-input <q-input
:class="getClass(edit)" :class="getClass(edit)"
:outlined="edit" :outlined="edit"
@ -116,7 +132,7 @@
@update:modelValue="clickEditRow" @update:modelValue="clickEditRow"
hide-bottom-space hide-bottom-space
/> />
</div> </div> -->
<div class="col-xs-12 col-sm-6 col-md-6"> <div class="col-xs-12 col-sm-6 col-md-6">
<datepicker <datepicker
:readonly="!edit" :readonly="!edit"
@ -264,6 +280,10 @@ const { examData, changeExamColumns } = store
const dataStore = useDataStore() const dataStore = useDataStore()
const { loaderPage } = dataStore const { loaderPage } = dataStore
const id = ref<string>('') const id = ref<string>('')
const type = ref<string | null>()
const opType = ref(['ลูกจ้างประจำ','ลูกจ้างชั่วคราว','ผู้ปฏิบัติงานอื่นในกรุงเทพมหานคร'])
const position = ref<string | null>() const position = ref<string | null>()
const group = ref<string | null>() const group = ref<string | null>()
const pile = ref<string | null>() const pile = ref<string | null>()
@ -292,9 +312,10 @@ const visibleColumns = ref<String[]>([])
examData.career.columns.length == 0 examData.career.columns.length == 0
? (visibleColumns.value = [ ? (visibleColumns.value = [
'position', 'position',
'group', /* 'group',
'pile', 'pile',
'org', 'org', */
'type',
'startDate', 'startDate',
'endDate', 'endDate',
'rangeDate' 'rangeDate'
@ -313,7 +334,19 @@ const columns = ref<any>([
sort: (a: string, b: string) => sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: 'base' }) a.localeCompare(b, undefined, { numeric: true, sensitivity: 'base' })
}, },
{ {
name: 'type',
align: 'left',
label: 'ประเภท',
sortable: true,
field: 'type',
headerStyle: 'font-size: 14px',
style: 'font-size: 14px',
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: 'base' })
},
/* {
name: 'group', name: 'group',
align: 'left', align: 'left',
label: 'กลุ่ม/ฝ่าย', label: 'กลุ่ม/ฝ่าย',
@ -345,7 +378,7 @@ const columns = ref<any>([
style: 'font-size: 14px', style: 'font-size: 14px',
sort: (a: string, b: string) => sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: 'base' }) a.localeCompare(b, undefined, { numeric: true, sensitivity: 'base' })
}, }, */
{ {
name: 'startDate', name: 'startDate',
align: 'left', align: 'left',

28
src/modules/01_exam/components/Form/Education.vue
View file

@ -10,8 +10,8 @@
/> />
<q-form ref="myform"> <q-form ref="myform">
<div class="row col-12 items-center q-col-gutter-x-sm q-col-gutter-y-xs"> <div class="row col-12 items-center q-col-gutter-x-sm q-col-gutter-y-xs">
<div class="col-12 row"> <div class="col-12 row q-col-gutter-sm">
<div class="col-3"> <div class="col-xs-12 col-sm-3">
<q-select <q-select
:class="getClass(status == 'register' || status == 'rejectRegister')" :class="getClass(status == 'register' || status == 'rejectRegister')"
:readonly="!(status == 'register' || status == 'rejectRegister')" :readonly="!(status == 'register' || status == 'rejectRegister')"
@ -29,9 +29,8 @@
:label="`${'วุฒิที่ใช้สมัครสอบ'}`" :label="`${'วุฒิที่ใช้สมัครสอบ'}`"
/> />
</div> </div>
<div class="col-3"> <div class="col-xs-12 col-sm-3">
<q-input <q-input
class="q-pl-sm"
:class="getClass(status == 'register' || status == 'rejectRegister')" :class="getClass(status == 'register' || status == 'rejectRegister')"
:outlined="status == 'register' || status == 'rejectRegister'" :outlined="status == 'register' || status == 'rejectRegister'"
dense dense
@ -44,9 +43,8 @@
:label="`${'ชื่อปริญญา'}`" :label="`${'ชื่อปริญญา'}`"
/> />
</div> </div>
<div class="col-3"> <div class="col-xs-12 col-sm-3">
<q-input <q-input
class="q-pl-sm"
:class="getClass(status == 'register' || status == 'rejectRegister')" :class="getClass(status == 'register' || status == 'rejectRegister')"
:outlined="status == 'register' || status == 'rejectRegister'" :outlined="status == 'register' || status == 'rejectRegister'"
dense dense
@ -59,9 +57,7 @@
:label="`${'สาขาวิชา/วิชาเอก'}`" :label="`${'สาขาวิชา/วิชาเอก'}`"
/> />
</div> </div>
</div> <div class="col-xs-12 col-sm-3">
<div class="col-12 row">
<div class="col-3">
<q-input <q-input
:class="getClass(status == 'register' || status == 'rejectRegister')" :class="getClass(status == 'register' || status == 'rejectRegister')"
:outlined="status == 'register' || status == 'rejectRegister'" :outlined="status == 'register' || status == 'rejectRegister'"
@ -75,9 +71,8 @@
:label="`${'ชื่อสถานศึกษา'}`" :label="`${'ชื่อสถานศึกษา'}`"
/> />
</div> </div>
<div class="col-3"> <div class="col-xs-12 col-sm-3">
<q-select <q-select
class="q-pl-sm"
:class="getClass(status == 'register' || status == 'rejectRegister')" :class="getClass(status == 'register' || status == 'rejectRegister')"
:readonly="!(status == 'register' || status == 'rejectRegister')" :readonly="!(status == 'register' || status == 'rejectRegister')"
:borderless="!(status == 'register' || status == 'rejectRegister')" :borderless="!(status == 'register' || status == 'rejectRegister')"
@ -94,7 +89,7 @@
:label="`${'ประเภทสถานศึกษา'}`" :label="`${'ประเภทสถานศึกษา'}`"
/> />
</div> </div>
<div class="col-3"> <div class="col-xs-12 col-sm-3">
<datepicker <datepicker
:readonly="!(status == 'register' || status == 'rejectRegister')" :readonly="!(status == 'register' || status == 'rejectRegister')"
v-model="defaultEducation.educationEndDate" v-model="defaultEducation.educationEndDate"
@ -113,7 +108,6 @@
</template> </template>
<template #trigger> <template #trigger>
<q-input <q-input
class="q-pl-sm"
:class="getClass(status == 'register' || status == 'rejectRegister')" :class="getClass(status == 'register' || status == 'rejectRegister')"
:outlined="status == 'register' || status == 'rejectRegister'" :outlined="status == 'register' || status == 'rejectRegister'"
dense dense
@ -122,7 +116,6 @@
:borderless="!(status == 'register' || status == 'rejectRegister')" :borderless="!(status == 'register' || status == 'rejectRegister')"
:model-value="date2Thai(defaultEducation.educationEndDate)" :model-value="date2Thai(defaultEducation.educationEndDate)"
:rules="[(val) => !!val || `${'กรุณาเลือกวันที่สำเร็จการศึกษา'}`]" :rules="[(val) => !!val || `${'กรุณาเลือกวันที่สำเร็จการศึกษา'}`]"
hide-bottom-space
:label="`${'วันที่สำเร็จการศึกษา'}`" :label="`${'วันที่สำเร็จการศึกษา'}`"
> >
<template v-slot:prepend> <template v-slot:prepend>
@ -141,9 +134,8 @@
</template> </template>
</datepicker> </datepicker>
</div> </div>
<div class="col-3"> <div class="col-xs-12 col-sm-3">
<q-input <q-input
class="q-pl-sm"
:class="getClass(status == 'register' || status == 'rejectRegister')" :class="getClass(status == 'register' || status == 'rejectRegister')"
:outlined="status == 'register' || status == 'rejectRegister'" :outlined="status == 'register' || status == 'rejectRegister'"
dense dense
@ -156,9 +148,7 @@
:label="`${'คะแนนเฉลี่ยสะสม'}`" :label="`${'คะแนนเฉลี่ยสะสม'}`"
/> />
</div> </div>
</div> <div class="col-xs-12 col-sm-3">
<div class="col-12 row">
<div class="col-3">
<q-select <q-select
:class="getClass(status == 'register' || status == 'rejectRegister')" :class="getClass(status == 'register' || status == 'rejectRegister')"
:readonly="!(status == 'register' || status == 'rejectRegister')" :readonly="!(status == 'register' || status == 'rejectRegister')"

87
src/modules/01_exam/components/Form/Information.vue
View file

@ -13,7 +13,17 @@
/> />
</div> </div>
<div class="col-xs-12 col-sm-3 col-md-4"> <div class="col-xs-12 col-sm-3 col-md-4">
<q-input <q-field outlined bottom-slots :stack-label="defaultInformation.cardid != null" label="เลขประจำตัวประชาชน" counter maxlength="12" dense>
<template v-slot:prepend>
<q-btn round flat dense size="md" @click="idDialog">
<q-icon name="mdi-pencil-outline" color="primary" />
</q-btn>
</template>
<template v-slot:control>
<div class="self-center full-width no-outline" tabindex="0">{{defaultInformation.cardid}}</div>
</template>
</q-field>
<!-- <q-input
:class="getClass(status == 'register' || status == 'rejectRegister')" :class="getClass(status == 'register' || status == 'rejectRegister')"
:outlined="status == 'register' || status == 'rejectRegister'" :outlined="status == 'register' || status == 'rejectRegister'"
dense dense
@ -30,7 +40,7 @@
(val) => /^[0-9]*$/.test(val) || `${'กรุณากรอกเลขประจำตัวประชาชนให้ถูกต้อง'}` (val) => /^[0-9]*$/.test(val) || `${'กรุณากรอกเลขประจำตัวประชาชนให้ถูกต้อง'}`
]" ]"
label="เลขบัตรประจำตัวประชาชน" label="เลขบัตรประจำตัวประชาชน"
/> /> -->
</div> </div>
<div class="col-xs-12 col-sm-3 col-md-2"> <div class="col-xs-12 col-sm-3 col-md-2">
<q-select <q-select
@ -77,14 +87,15 @@
/> />
</div> </div>
<div class="col-xs-12 col-sm-3 col-md-3"><!-- :borderless="!false" --> <div class="col-xs-12 col-sm-3 col-md-3"><!-- :borderless="!false" -->
<q-input <q-select
:class="getClass(false)" :class="getClass(false)"
dense dense
:outlined="status == 'register' || status == 'rejectRegister'" :outlined="status == 'register' || status == 'rejectRegister'"
:readonly="!(status == 'rejectRegister')" :readonly="!(status == 'register' ||status == 'rejectRegister')"
:borderless="!(status == 'register' || status == 'rejectRegister')" :borderless="!(status == 'register' || status == 'rejectRegister')"
lazy-rules lazy-rules
v-model="defaultInformation.nationality" v-model="defaultInformation.nationality"
:options="opNat"
:rules="[(val) => !!val || `${'กรุณากรอก สัญชาติ'}`]" :rules="[(val) => !!val || `${'กรุณากรอก สัญชาติ'}`]"
:label="`${'สัญชาติ'}`" :label="`${'สัญชาติ'}`"
/> />
@ -157,11 +168,12 @@
</template> </template>
</datepicker> </datepicker>
</div> </div>
<div class="col-xs-12 col-sm-3 col-md-3 q-pb-md"> <div class="col-xs-12 col-sm-3 col-md-3">
<q-input <q-input
:class="getClass(status == 'register' || status == 'rejectRegister')" :class="getClass(status == 'register' || status == 'rejectRegister')"
dense dense
lazy-rules lazy-rules
bottom-slots
:outlined="status == 'register' || status == 'rejectRegister'" :outlined="status == 'register' || status == 'rejectRegister'"
:readonly="!(status == 'rejectRegister')" :readonly="!(status == 'rejectRegister')"
:borderless="!(status == 'register' || status == 'rejectRegister')" :borderless="!(status == 'register' || status == 'rejectRegister')"
@ -211,11 +223,12 @@
:label="`${'โทรศัพท์มือถือ'}`" :label="`${'โทรศัพท์มือถือ'}`"
/> />
</div> --> </div> -->
<div class="col-xs-12 col-sm-3 col-md-3 q-pb-md"><!-- style="padding: 0 12px" --> <div class="col-xs-12 col-sm-3 col-md-3"><!-- style="padding: 0 12px" -->
<q-input <q-input
:class="getClass(status == 'register' || status == 'rejectRegister')" :class="getClass(status == 'register' || status == 'rejectRegister')"
dense dense
lazy-rules lazy-rules
bottom-slots
:outlined="status == 'register' || status == 'rejectRegister'" :outlined="status == 'register' || status == 'rejectRegister'"
:readonly="!(status == 'rejectRegister')" :readonly="!(status == 'rejectRegister')"
:borderless="!(status == 'register' || status == 'rejectRegister')" :borderless="!(status == 'register' || status == 'rejectRegister')"
@ -271,6 +284,60 @@
/> />
</div> --> </div> -->
</q-form> </q-form>
<!-- dialog กรอกเลขบัตร -->
<q-dialog v-model="idModel">
<q-card style="width: 350px">
<q-card-section class="bg-grey-2 q-py-sm">
<div class="text-subtitle1 text-weight-medium">กรอกเลขประจำตัวประชาชน</div>
</q-card-section>
<q-separator color="grey-4" />
<q-card-section>
<q-input
:class="getClass(status == 'register' || status == 'rejectRegister')"
:outlined="status == 'register' || status == 'rejectRegister'"
dense
type="tel"
mask="#############"
:counter="status == 'register' || status == 'rejectRegister' ? true : false"
lazy-rules
:readonly="!(status == 'register' || status == 'rejectRegister')"
:borderless="!(status == 'register' || status == 'rejectRegister')"
v-model="defaultInformation.cardid"
maxlength="13"
:rules="[
(val) => val.length == 13 || `${'กรุณากรอก เลขประจำตัวประชาชน'}`,
(val) => /^[0-9]*$/.test(val) || `${'กรุณากรอกเลขประจำตัวประชาชนให้ถูกต้อง'}`
]"
label="เลขบัตรประจำตัวประชาชน"
class="q-mb-sm"
/>
<q-input
:class="getClass(status == 'register' || status == 'rejectRegister')"
:outlined="status == 'register' || status == 'rejectRegister'"
dense
type="tel"
mask="#############"
:counter="status == 'register' || status == 'rejectRegister' ? true : false"
lazy-rules
:readonly="!(status == 'register' || status == 'rejectRegister')"
:borderless="!(status == 'register' || status == 'rejectRegister')"
v-model="defaultInformation.cardid"
maxlength="13"
:rules="[
(val) => val.length == 13 || `${'กรุณากรอกยืนยันเลขประจำตัวประชาชน'}`,
(val) => /^[0-9]*$/.test(val) || `${'กรุณากรอกยืนยันเลขประจำตัวประชาชนให้ถูกต้อง'}`
]"
label="ยืนยันเลขบัตรประจำตัวประชาชน"
/>
</q-card-section>
<q-separator color="grey-4" />
<q-card-actions align="right" class="bg-white text-teal">
<q-btn flat label="ยกเลิก" color="red" v-close-popup />
<q-btn flat label="ตกลง" class="bg-teal-1" v-close-popup />
</q-card-actions>
</q-card>
</q-dialog>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { ref, onMounted, watch } from 'vue' import { ref, onMounted, watch } from 'vue'
@ -324,6 +391,10 @@ const myform = ref<any>({})
const img = ref<string>('') const img = ref<string>('')
const fileProfile = ref<File[]>([]) const fileProfile = ref<File[]>([])
const opNat = ref(['ไทย'])
const idModel = ref<boolean>(false)
watch(myform, async (count: any, prevCount: any) => { watch(myform, async (count: any, prevCount: any) => {
emit('update:form', count) emit('update:form', count)
}) })
@ -445,6 +516,10 @@ const getClass = (val: boolean) => {
'full-width cursor-pointer': !val 'full-width cursor-pointer': !val
} }
} }
const idDialog = () => {
idModel.value = true
}
</script> </script>
<style> <style>