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

เช็คค่าก่อนเปลี่ยน tab

Browse source
This commit is contained in:
Kittapath 2023-03-19 00:43:28 +07:00
parent 3f020c73fc
commit 6ab1a862d6
18 changed files with 547 additions and 243 deletions
Download patch file Download diff file Expand all files Collapse all files

421
src/modules/01_exam/components/Form/Profile/Address.vue Normal file
View file

@ -0,0 +1,421 @@
<!-- 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-map-marker"
:save="saveData"
/> -->
<HeaderTop
v-model:edit="edit"
header="ข้อมูลที่อยู่"
icon="mdi-map-marker"
:save="saveData"
:history="true"
:addData="addData"
:cancel="cancelData"
: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-xs-12">
<q-input
:class="getClass(edit)"
hide-bottom-space
:outlined="edit"
dense
lazy-rules
type="textarea"
autogrow
:readonly="!edit"
:borderless="!edit"
v-model="addressData.address"
:rules="[(val) => !!val || `${'กรุณากรอก ที่อยู่ตามทะเบียนบ้าน'}`]"
:label="`${'ที่อยู่ตามทะเบียนบ้าน'}`"
/>
<!-- :filled="edit" -->
</div>
<div class="col-xs-6 col-sm-3 col-md-3">
<q-select
hide-bottom-space
:class="getClass(edit)"
:readonly="!edit"
:borderless="!edit"
:rules="[(val) => !!val || `${'กรุณาเลือก จังหวัด'}`]"
:outlined="edit"
dense
lazy-rules
v-model="addressData.provinceId"
emit-value
map-options
option-label="name"
:options="provinceOptions"
option-value="id"
:label="`${'จังหวัด'}`"
@update:model-value="(value) => selectProvince(value, '1')"
/>
</div>
<div class="col-xs-6 col-sm-3 col-md-3">
<q-select
hide-bottom-space
:class="getClass(edit)"
:readonly="!edit"
:borderless="!edit"
:rules="[(val) => !!val || `${'กรุณาเลือก เขต / อำเภอ'}`]"
:outlined="edit"
dense
lazy-rules
v-model="addressData.districtId"
emit-value
map-options
option-label="name"
:options="districtOptions"
option-value="id"
:label="`${'เขต / อำเภอ'}`"
@update:model-value="(value) => selectDistrict(value, '1')"
/>
</div>
<div class="col-xs-6 col-sm-3 col-md-3">
<q-select
hide-bottom-space
:class="getClass(edit)"
:readonly="!edit"
:borderless="!edit"
:rules="[(val) => !!val || `${'กรุณาเลือก ตำบล / แขวง'}`]"
:outlined="edit"
dense
lazy-rules
v-model="addressData.subdistrictId"
emit-value
map-options
option-label="name"
:options="subdistrictOptions"
option-value="id"
:label="`${'ตำบล / แขวง'}`"
@update:model-value="(value) => selectSubDistrict(value, '1')"
/>
</div>
<div class="col-xs-6 col-sm-3 col-md-3">
<q-input
:class="getClass(edit)"
hide-bottom-space
dense
lazy-rules
readonly
borderless
v-model="addressData.code"
:style="!edit ? '' : 'padding:0 12px;'"
:label="`${'รหัสไปรษณีย์'}`"
/>
</div>
<div class="col-12 q-pt-lg"><q-separator /></div>
<div class="col-xs-12 q-gutter-sm items-center flex q-my-sm">
<label class="text-bold">ที่อยู่ปัจจุบันตรงกับที่อยู่ตามทะเบียนบ้าน</label>
<q-radio
v-model="addressData.same"
checked-icon="task_alt"
unchecked-icon="panorama_fish_eye"
val="1"
label="ใช่"
dense
:disable="!edit"
/>
<q-radio
v-model="addressData.same"
checked-icon="task_alt"
unchecked-icon="panorama_fish_eye"
val="0"
label="ไม่"
dense
:disable="!edit"
/>
</div>
<div class="col-xs-12" v-if="addressData.same == '0'">
<q-input
:class="getClass(edit)"
hide-bottom-space
:outlined="edit"
dense
lazy-rules
type="textarea"
autogrow
:readonly="!edit"
:borderless="!edit"
v-model="addressData.addressC"
:rules="[(val) => !!val || `${'กรุณากรอก ที่อยู่ปัจจุบัน'}`]"
:label="`${'ที่อยู่ปัจจุบัน'}`"
/>
</div>
<div class="col-xs-6 col-sm-3 col-md-3" v-if="addressData.same == '0'">
<q-select
hide-bottom-space
:class="getClass(edit)"
:readonly="!edit"
:borderless="!edit"
:rules="[(val) => !!val || `${'กรุณาเลือก จังหวัด'}`]"
:outlined="edit"
dense
lazy-rules
v-model="addressData.provinceIdC"
emit-value
map-options
option-label="name"
:options="provinceOptions"
option-value="id"
:label="`${'จังหวัด'}`"
@update:model-value="(value) => selectProvince(value, '2')"
/>
</div>
<div class="col-xs-6 col-sm-3 col-md-3" v-if="addressData.same == '0'">
<q-select
hide-bottom-space
:class="getClass(edit)"
:readonly="!edit"
:borderless="!edit"
:rules="[(val) => !!val || `${'กรุณาเลือก เขต / อำเภอ'}`]"
:outlined="edit"
dense
lazy-rules
v-model="addressData.districtIdC"
emit-value
map-options
option-label="name"
:options="districtCOptions"
option-value="id"
:label="`${'เขต / อำเภอ'}`"
@update:model-value="(value) => selectDistrict(value, '2')"
/>
</div>
<div class="col-xs-6 col-sm-3 col-md-3" v-if="addressData.same == '0'">
<q-select
hide-bottom-space
:class="getClass(edit)"
:readonly="!edit"
:borderless="!edit"
:rules="[(val) => !!val || `${'กรุณาเลือก ตำบล / แขวง'}`]"
:outlined="edit"
dense
lazy-rules
v-model="addressData.subdistrictIdC"
emit-value
map-options
option-label="name"
:options="subdistrictCOptions"
option-value="id"
:label="`${'ตำบล / แขวง'}`"
@update:model-value="(value) => selectSubDistrict(value, '2')"
/>
</div>
<div class="col-xs-6 col-sm-3 col-md-3" v-if="addressData.same == '0'">
<q-input
:class="getClass(edit)"
hide-bottom-space
dense
lazy-rules
readonly
borderless
v-model="addressData.codeC"
:style="!edit ? '' : 'padding:0 12px;'"
:label="`${'รหัสไปรษณีย์'}`"
/>
</div>
</div>
</q-form>
</q-card>
</template>
<script setup lang="ts">
import { ref, onMounted, watch } from 'vue'
import { useCounterMixin } from '@/stores/mixin'
import http from '@/plugins/http'
import config from '@/app.config'
import type { Address, DataOption, zipCodeOption } from '@/modules/01_exam/interface/index/Main'
import { defaultAddress } from '@/modules/01_exam/interface/index/Main'
import HeaderTop from '@/components/top.vue'
const mixin = useCounterMixin()
const { date2Thai, calAge } = mixin
const edit = ref<boolean>(false)
const addData = ref<boolean>(true)
const addressData = ref<Address>(defaultAddress)
const myform = ref<any>()
const codep = ref<string>('')
const codec = ref<string>('')
const provinceOptions = ref<DataOption[]>([])
const districtOptions = ref<DataOption[]>([])
const districtCOptions = ref<DataOption[]>([])
const subdistrictOptions = ref<zipCodeOption[]>([])
const subdistrictCOptions = ref<zipCodeOption[]>([])
const props = defineProps({
statusEdit: {
type: Boolean,
required: true
},
notiNoEdit: {
type: Function,
default: () => console.log('not function')
},
step: {
type: Number,
required: true
}
})
const emit = defineEmits(['update:statusEdit'])
onMounted(() => {
if (props.step !== 2) {
addData.value = false
}
// fetchProvince()
// fetchDistrict(addressData.value.provinceId, '1')
// fetchDistrict(addressData.value.provinceIdC, '2')
})
const saveData = async () => {
await myform.value.validate().then(async (success: boolean) => {
if (success) {
} else {
}
})
}
const changeBtn = async () => {
if (edit.value == true) {
if (props.statusEdit === true) {
edit.value = false
props.notiNoEdit()
} else {
emit('update:statusEdit', true)
}
} else {
emit('update:statusEdit', false)
}
}
const selectProvince = (e: string, name: string) => {
if (name == '1') {
addressData.value.districtId = ''
addressData.value.subdistrictId = ''
codep.value = ''
} else {
addressData.value.districtIdC = ''
addressData.value.subdistrictIdC = ''
codec.value = ''
}
myform.value.resetValidation()
fetchDistrict(e, name)
}
const selectDistrict = (e: string, name: string) => {
if (name == '1') {
addressData.value.subdistrictId = ''
codep.value = ''
} else {
addressData.value.subdistrictIdC = ''
codec.value = ''
}
myform.value.resetValidation()
fetchSubDistrict(e, name)
}
const selectSubDistrict = (e: string, name: string) => {
if (name == '1') {
const findcode = subdistrictOptions.value.filter((r) => r.id == e)
const namecode = findcode.length > 0 ? findcode[0].zipCode : ''
codep.value = namecode
} else {
const findcode = subdistrictCOptions.value.filter((r) => r.id == e)
const namecode = findcode.length > 0 ? findcode[0].zipCode : ''
codec.value = namecode
}
// myform.value.resetValidation();
// fetchSubDistrict(e, name);
}
const fetchProvince = async () => {
// loader.value = true;
await http
.get(config.API.province)
.then((res) => {
const data = res.data.result
let option: DataOption[] = []
// console.log(data);
data.map((r: any) => {
option.push({ id: r.id.toString(), name: r.name.toString() })
})
provinceOptions.value = option
})
.catch((e: any) => {})
.finally(() => {
// loader.value = false;
})
}
const fetchDistrict = async (id: string, position: string) => {
// loader.value = true;
await http
.get(config.API.listDistrict(id))
.then((res) => {
const data = res.data.result
let option: DataOption[] = []
// console.log(data);
data.map((r: any) => {
option.push({ id: r.id.toString(), name: r.name.toString() })
})
if (position == '1') {
districtOptions.value = option
} else {
districtCOptions.value = option
}
})
.catch((e: any) => {})
.finally(() => {
// loader.value = false;
})
}
const fetchSubDistrict = async (id: string, position: string) => {
// loader.value = true;
await http
.get(config.API.listSubDistrict(id))
.then((res) => {
const data = res.data.result
let option: zipCodeOption[] = []
// console.log(res);
data.map((r: any) => {
option.push({
id: r.id.toString(),
name: r.name.toString(),
zipCode: r.zipCode.toString()
})
})
if (position == '1') {
subdistrictOptions.value = option
} else {
subdistrictCOptions.value = option
}
})
.catch((e: any) => {})
.finally(() => {
// loader.value = false;
})
}
const cancelData = () => {}
const getClass = (val: boolean) => {
return {
'full-width inputgreen cursor-pointer': val,
'full-width cursor-pointer': !val
}
}
</script>

361
src/modules/01_exam/components/Form/Profile/Family.vue Normal file
View file

@ -0,0 +1,361 @@
<!-- card ข้อมูลครอบครัว -->
<template>
<q-card flat bordered class="col-12 q-px-lg q-py-md q-mt-md text-dark">
<HeaderTop
v-model:edit="edit"
header="ข้อมูลครอบครัว"
icon="mdi-account-group"
:save="saveData"
:addData="addData"
:cancel="cancelData"
:changeBtn="changeBtn"
/>
<q-form ref="myform" class="col-12">
<div class="row col-12 items-center q-col-gutter-x-xs q-col-gutter-y-xs">
<div class="col-xs-12 q-gutter-sm items-center flex q-my-sm">
<label class="text-weight-bold">• คู่สมรส</label>
<q-radio
v-model="familyData.same"
checked-icon="task_alt"
unchecked-icon="panorama_fish_eye"
val="1"
label="มี"
dense
:disable="!edit"
@update:model-value="selectRadio"
/>
<q-radio
v-model="familyData.same"
checked-icon="task_alt"
unchecked-icon="panorama_fish_eye"
val="0"
label="ไม่มี"
dense
:disable="!edit"
@update:model-value="selectRadio"
/>
</div>
<div class="col-xs-12 col-sm-2 col-md-2" v-if="familyData.same == '1'">
<q-select
hide-bottom-space
:class="getClass(edit)"
:readonly="!edit"
:borderless="!edit"
:rules="[(val) => !!val || `${'กรุณาเลือก คำนำหน้า'}`]"
:outlined="edit"
dense
lazy-rules
v-model="familyData.prefixIdC"
emit-value
map-options
option-label="name"
:options="prefixOptions"
option-value="id"
:label="`${'คำนำหน้า'}`"
/>
</div>
<div class="col-xs-6 col-sm-3 col-md-3" v-if="familyData.same == '1'">
<q-input
:class="getClass(edit)"
hide-bottom-space
:outlined="edit"
dense
lazy-rules
:readonly="!edit"
:borderless="!edit"
v-model="familyData.firstnameC"
:rules="[(val) => !!val || `${'กรุณากรอก ชื่อ'}`]"
:label="`${'ชื่อ'}`"
/>
</div>
<div class="col-xs-6 col-sm-3 col-md-3" v-if="familyData.same == '1'">
<q-input
:class="getClass(edit)"
hide-bottom-space
:outlined="edit"
dense
lazy-rules
:readonly="!edit"
:borderless="!edit"
v-model="familyData.lastnameC"
:rules="[(val) => !!val || `${'กรุณากรอก นามสกุล'}`]"
:label="`${'นามสกุล'}`"
/>
</div>
<div class="col-xs-12 col-sm-2 col-md-2" v-if="familyData.same == '1'">
<q-input
:class="getClass(edit)"
hide-bottom-space
:outlined="edit"
dense
lazy-rules
:readonly="!edit"
:borderless="!edit"
v-model="familyData.occupationC"
:rules="[(val) => !!val || `${'กรุณากรอก อาชีพ'}`]"
:label="`${'อาชีพ'}`"
/>
</div>
<div class="col-xs-12 col-sm-2 col-md-2" v-if="familyData.same == '1'">
<q-input
:class="getClass(edit)"
hide-bottom-space
:outlined="edit"
dense
lazy-rules
:readonly="!edit"
:borderless="!edit"
v-model="familyData.nationalityC"
:rules="[(val) => !!val || `${'กรุณากรอก สัญชาติ'}`]"
:label="`${'สัญชาติ'}`"
/>
</div>
<div class="col-xs-12 text-weight-bold">• บิดา</div>
<div class="col-xs-12 col-sm-2 col-md-2">
<q-select
hide-bottom-space
:class="getClass(edit)"
:readonly="!edit"
:borderless="!edit"
:rules="[(val) => !!val || `${'กรุณาเลือก คำนำหน้า'}`]"
:outlined="edit"
dense
lazy-rules
v-model="familyData.prefixIdM"
emit-value
map-options
option-label="name"
:options="prefixOptions"
option-value="id"
:label="`${'คำนำหน้า'}`"
/>
</div>
<div class="col-xs-6 col-sm-3 col-md-3">
<q-input
:class="getClass(edit)"
hide-bottom-space
:outlined="edit"
dense
lazy-rules
:readonly="!edit"
:borderless="!edit"
v-model="familyData.firstnameM"
:rules="[(val) => !!val || `${'กรุณากรอก ชื่อ'}`]"
:label="`${'ชื่อ'}`"
/>
</div>
<div class="col-xs-6 col-sm-3 col-md-3">
<q-input
:class="getClass(edit)"
hide-bottom-space
:outlined="edit"
dense
lazy-rules
:readonly="!edit"
:borderless="!edit"
v-model="familyData.lastnameM"
:rules="[(val) => !!val || `${'กรุณากรอก นามสกุล'}`]"
:label="`${'นามสกุล'}`"
/>
</div>
<div class="col-xs-12 col-sm-2 col-md-2">
<q-input
:class="getClass(edit)"
hide-bottom-space
:outlined="edit"
dense
lazy-rules
:readonly="!edit"
:borderless="!edit"
v-model="familyData.occupationM"
:rules="[(val) => !!val || `${'กรุณากรอก อาชีพ'}`]"
:label="`${'อาชีพ'}`"
/>
</div>
<div class="col-xs-12 col-sm-2 col-md-2">
<q-input
:class="getClass(edit)"
hide-bottom-space
:outlined="edit"
dense
lazy-rules
:readonly="!edit"
:borderless="!edit"
v-model="familyData.nationalityM"
:rules="[(val) => !!val || `${'กรุณากรอก สัญชาติ'}`]"
:label="`${'สัญชาติ'}`"
/>
</div>
<div class="col-xs-12 text-weight-bold">• มารดา</div>
<div class="col-xs-12 col-sm-2 col-md-2">
<q-select
hide-bottom-space
:class="getClass(edit)"
:readonly="!edit"
:borderless="!edit"
:rules="[(val) => !!val || `${'กรุณาเลือก คำนำหน้า'}`]"
:outlined="edit"
dense
lazy-rules
v-model="familyData.prefixIdF"
emit-value
map-options
option-label="name"
:options="prefixOptions"
option-value="id"
:label="`${'คำนำหน้า'}`"
/>
</div>
<div class="col-xs-6 col-sm-3 col-md-3">
<q-input
:class="getClass(edit)"
hide-bottom-space
:outlined="edit"
dense
lazy-rules
:readonly="!edit"
:borderless="!edit"
v-model="familyData.firstnameF"
:rules="[(val) => !!val || `${'กรุณากรอก ชื่อ'}`]"
:label="`${'ชื่อ'}`"
/>
</div>
<div class="col-xs-6 col-sm-3 col-md-3">
<q-input
:class="getClass(edit)"
hide-bottom-space
:outlined="edit"
dense
lazy-rules
:readonly="!edit"
:borderless="!edit"
v-model="familyData.lastnameF"
:rules="[(val) => !!val || `${'กรุณากรอก นามสกุล'}`]"
:label="`${'นามสกุล'}`"
/>
</div>
<div class="col-xs-12 col-sm-2 col-md-2">
<q-input
:class="getClass(edit)"
hide-bottom-space
:outlined="edit"
dense
lazy-rules
:readonly="!edit"
:borderless="!edit"
v-model="familyData.occupationF"
:rules="[(val) => !!val || `${'กรุณากรอก อาชีพ'}`]"
:label="`${'อาชีพ'}`"
/>
</div>
<div class="col-xs-12 col-sm-2 col-md-2">
<q-input
:class="getClass(edit)"
hide-bottom-space
:outlined="edit"
dense
lazy-rules
:readonly="!edit"
:borderless="!edit"
v-model="familyData.nationalityF"
:rules="[(val) => !!val || `${'กรุณากรอก สัญชาติ'}`]"
:label="`${'สัญชาติ'}`"
/>
</div>
</div>
</q-form>
</q-card>
</template>
<script setup lang="ts">
import { onMounted, ref, watch } from 'vue'
import type { PropType } from 'vue'
import { useCounterMixin } from '@/stores/mixin'
import type { Family, DataOption } from '@/modules/01_exam/interface/index/Main'
import { defaultFamily } from '@/modules/01_exam/interface/index/Main'
import HeaderTop from '@/components/top.vue'
const mixin = useCounterMixin()
const { date2Thai, calAge } = mixin
const edit = ref<boolean>(false)
const addData = ref<boolean>(true)
const myform = ref<any>()
const familyData = ref<Family>(defaultFamily)
const statusOptions = ref<DataOption[]>([])
// const prefixOptions = ref<any>([
// { id: "1", name: "นาย" },
// { id: "2", name: "นาง" },
// { id: "3", name: "นางสาว" },
// ]);
const props = defineProps({
prefixOptions: {
type: Array as PropType<DataOption[]>,
required: true
},
statusEdit: {
type: Boolean,
required: true
},
notiNoEdit: {
type: Function,
default: () => console.log('not function')
},
step: {
type: Number,
required: true
}
})
const emit = defineEmits(['update:statusEdit'])
onMounted(() => {
if (props.step !== 2) {
addData.value = false
}
})
const saveData = async () => {
await myform.value.validate().then(async (success: boolean) => {
if (success) {
} else {
}
})
}
const changeBtn = async () => {
if (edit.value == true) {
if (props.statusEdit === true) {
edit.value = false
props.notiNoEdit()
} else {
emit('update:statusEdit', true)
}
} else {
emit('update:statusEdit', false)
}
}
const selectRadio = (e: boolean, i: any) => {
if (!e) {
familyData.value.prefixIdC = ''
familyData.value.firstnameC = ''
familyData.value.lastnameC = ''
familyData.value.occupationC = ''
}
}
const cancelData = () => {}
const getClass = (val: boolean) => {
return {
'full-width inputgreen cursor-pointer': val,
'full-width cursor-pointer': !val
}
}
</script>

494
src/modules/01_exam/components/Form/Profile/Information.vue Normal file
View file

@ -0,0 +1,494 @@
<!-- card ข้อมูลส่วนตัว -->
<template>
<q-card flat bordered class="col-12 q-px-lg q-py-md">
<HeaderTop
v-model:edit="edit"
header="ข้อมูลส่วนตัว"
icon="mdi-account"
:save="saveData"
:addData="addData"
:cancel="cancelData"
:changeBtn="changeBtn"
/>
<q-form ref="myform" class="col-12 row">
<div class="row col-10 items-center q-col-gutter-x-sm q-col-gutter-y-sm">
<div class="col-xs-6 col-sm-3 col-md-3">
<q-select
hide-bottom-space
:class="getClass(edit)"
:readonly="!edit"
:borderless="!edit"
:rules="[(val) => !!val || `${'กรุณาเลือก คำนำหน้า'}`]"
:outlined="edit"
dense
lazy-rules
v-model="informaData.prefixId"
emit-value
map-options
option-label="name"
:options="prefixOptions"
option-value="id"
:label="`${'คำนำหน้า'}`"
/>
</div>
<div class="col-xs-6 col-sm-3 col-md-3">
<q-input
:class="getClass(edit)"
hide-bottom-space
:outlined="edit"
dense
lazy-rules
:readonly="!edit"
:borderless="!edit"
v-model="informaData.firstname"
:rules="[(val) => !!val || `${'กรุณากรอก ชื่อ'}`]"
:label="`${'ชื่อ'}`"
/>
</div>
<div class="col-xs-6 col-sm-3 col-md-3">
<q-input
:class="getClass(edit)"
hide-bottom-space
:outlined="edit"
dense
lazy-rules
:readonly="!edit"
:borderless="!edit"
v-model="informaData.lastname"
:rules="[(val) => !!val || `${'กรุณากรอก นามสกุล'}`]"
:label="`${'นามสกุล'}`"
/>
</div>
<div class="col-xs-6 col-sm-3 col-md-3">
<q-input
:class="getClass(edit)"
hide-bottom-space
:outlined="edit"
dense
lazy-rules
:readonly="!edit"
:borderless="!edit"
v-model="informaData.nationality"
:rules="[(val) => !!val || `${'กรุณากรอก สัญชาติ'}`]"
:label="`${'สัญชาติ'}`"
/>
</div>
<div class="col-xs-6 col-sm-3 col-md-3">
<datepicker
v-model="informaData.birthDate"
:locale="'th'"
autoApply
:enableTimePicker="false"
week-start="0"
:max-date="new Date()"
>
<template #year="{ year }">
{{ year + 543 }}
</template>
<template #year-overlay-value="{ value }">
{{ parseInt(value + 543) }}
</template>
<template #trigger>
<q-input
:class="getClass(edit)"
hide-bottom-space
:outlined="edit"
dense
lazy-rules
:readonly="!edit"
:borderless="!edit"
:model-value="date2Thai(informaData.birthDate)"
:rules="[(val) => !!val || `${'กรุณาเลือก วัน/เดือน/ปี เกิด'}`]"
:label="`${'วัน/เดือน/ปี เกิด'}`"
>
<template v-slot:prepend>
<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)">
</q-icon>
</template>
</q-input>
</template>
</datepicker>
</div>
<div class="col-xs-6 col-sm-3 col-md-3">
<q-input
:class="getClass(edit)"
hide-bottom-space
dense
lazy-rules
readonly
borderless
:style="!edit ? '' : 'padding:0 12px;'"
:model-value="calAge(informaData.birthDate)"
:label="`${'อายุ'}`"
/>
</div>
<div class="col-xs-6 col-sm-3 col-md-3">
<q-select
hide-bottom-space
:class="getClass(edit)"
:readonly="!edit"
:borderless="!edit"
:rules="[(val) => !!val || `${'กรุณาเลือก สถานภาพ'}`]"
:outlined="edit"
dense
lazy-rules
v-model="informaData.statusId"
emit-value
map-options
option-label="name"
:options="statusOptions"
option-value="id"
:label="`${'สถานภาพ'}`"
/>
</div>
<div class="col-xs-6 col-sm-3 col-md-3">
<q-input
:class="getClass(edit)"
hide-bottom-space
:outlined="edit"
dense
lazy-rules
:readonly="!edit"
:borderless="!edit"
v-model="informaData.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(edit)"
hide-bottom-space
:outlined="edit"
dense
lazy-rules
:readonly="!edit"
:borderless="!edit"
v-model="informaData.cardid"
maxlength="13"
:rules="[
(val) => !!val || `${'กรุณากรอก เลขบัตรประจำตัวประชาชน'}`,
(val) => val.length >= 13 || `${'กรุณากรอกเลขบัตรประจำตัวประชาชนให้ครบ'}`
]"
label="เลขบัตรประจำตัวประชาชน"
mask="#############"
/>
</div>
<div class="col-xs-6 col-sm-3 col-md-3">
<q-input
:class="getClass(edit)"
hide-bottom-space
:outlined="edit"
dense
lazy-rules
:readonly="!edit"
:borderless="!edit"
v-model="informaData.cardid"
:rules="[(val) => !!val || `${'กรุณากรอก ออกให้ ณ อำเภอ'}`]"
label="ออกให้ ณ อำเภอ"
/>
</div>
<div class="col-xs-6 col-sm-3 col-md-3">
<q-select
hide-bottom-space
:class="getClass(edit)"
:readonly="!edit"
:borderless="!edit"
:rules="[(val) => !!val || `${'กรุณาเลือก จังหวัด'}`]"
:outlined="edit"
dense
lazy-rules
v-model="informaData.provinceId"
emit-value
map-options
option-label="name"
:options="provinceOptions"
option-value="id"
:label="`${'จังหวัด'}`"
/>
</div>
<div class="col-xs-6 col-sm-3 col-md-3">
<datepicker
v-model="informaData.cardIdDate"
:locale="'th'"
autoApply
:enableTimePicker="false"
week-start="0"
:max-date="new Date()"
>
<template #year="{ year }">
{{ year + 543 }}
</template>
<template #year-overlay-value="{ value }">
{{ parseInt(value + 543) }}
</template>
<template #trigger>
<q-input
:class="getClass(edit)"
hide-bottom-space
:outlined="edit"
dense
lazy-rules
:readonly="!edit"
:borderless="!edit"
:model-value="date2Thai(informaData.cardIdDate)"
:rules="[(val) => !!val || `${'กรุณาเลือก วัน/เดือน/ปี'}`]"
:label="`${'วัน/เดือน/ปี'}`"
>
<template v-slot:prepend>
<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)">
</q-icon>
</template>
</q-input>
</template>
</datepicker>
</div>
<div class="col-xs-6 col-sm-3 col-md-3">
<q-input
hide-bottom-space
:outlined="edit"
dense
lazy-rules
type="tel"
:class="getClass(edit)"
:readonly="!edit"
:borderless="!edit"
v-model="informaData.tel"
:rules="[
(val) => !!val || `${'กรุณากรอก โทรศัพท์'}`,
(val) => val.length >= 9 || `${'กรุณากรอกข้อมูลโทรศัพท์ให้ครบ'}`
]"
:label="`${'โทรศัพท์'}`"
mask="#########"
/>
</div>
<div class="col-xs-6 col-sm-3 col-md-3">
<q-input
hide-bottom-space
:outlined="edit"
dense
lazy-rules
type="tel"
:class="getClass(edit)"
:readonly="!edit"
:borderless="!edit"
v-model="informaData.phone"
:rules="[
(val) => !!val || `${'กรุณากรอก โทรศัพท์มือถือ'}`,
(val) => val.length >= 10 || `${'กรุณากรอกข้อมูลโทรศัพท์มือถือให้ครบ'}`
]"
:label="`${'โทรศัพท์มือถือ'}`"
mask="##########"
/>
</div>
<div class="col-xs-12 col-sm-12 col-md-12">
<q-input
:class="getClass(edit)"
hide-bottom-space
:outlined="edit"
dense
lazy-rules
:readonly="!edit"
:borderless="!edit"
v-model="informaData.knowledge"
:rules="[(val) => !!val || `${'กรุณากรอก ความรู้ความสามารถพิเศษ'}`]"
label="ความรู้ความสามารถพิเศษ"
type="textarea"
/>
</div>
</div>
<div class="row col-2 justify-center q-pt-md">
<div class="containerimage row justify-center">
<q-file
borderless
v-model="fileData"
stack-label
:readonly="!edit"
@update:model-value="pickFile"
>
<q-img src="@/assets/avatar_user.jpg" class="col-12">
<div class="overlay" v-if="edit">
<q-icon name="mdi-camera" />
<br />อัปเดต
</div>
</q-img>
</q-file>
</div>
<div class="col-12 text-center" v-show="disabledPic">
<q-btn outline dense color="black" icon="mdi-content-save-outline" @click="savePic">
<q-tooltip content-class="bg-grey-2 text-black">บันทึกรูป</q-tooltip>
</q-btn>
</div>
</div>
</q-form>
</q-card>
</template>
<script setup lang="ts">
import { ref, onMounted, watch } from 'vue'
import { useCounterMixin } from '@/stores/mixin'
import type { PropType } from 'vue'
import type { Information, DataOption } from '@/modules/01_exam/interface/index/Main'
import { defaultInformation } from '@/modules/01_exam/interface/index/Main'
import HeaderTop from '@/components/top.vue'
import http from '@/plugins/http'
import config from '@/app.config'
import type { file } from '@babel/types'
const mixin = useCounterMixin()
const { date2Thai, calAge } = mixin
const edit = ref<boolean>(false)
const addData = ref<boolean>(true)
const informaData = ref<Information>(defaultInformation)
const provinceOptions = ref<DataOption[]>([])
const myform = ref<any>()
const imageUrl = ref<string | null>(null)
const disabledPic = ref<boolean>(false)
const fileData = ref<File | null>()
const props = defineProps({
prefixOptions: {
type: Array as PropType<DataOption[]>,
required: true
},
genderOptions: {
type: Array as PropType<DataOption[]>,
required: true
},
bloodOptions: {
type: Array as PropType<DataOption[]>,
required: true
},
statusOptions: {
type: Array as PropType<DataOption[]>,
required: true
},
religionOptions: {
type: Array as PropType<DataOption[]>,
required: true
},
provinceOptions: {
type: Array as PropType<DataOption[]>,
required: true
},
statusEdit: {
type: Boolean,
required: true
},
notiNoEdit: {
type: Function,
default: () => console.log('not function')
},
step: {
type: Number,
required: true
}
})
const emit = defineEmits(['update:statusEdit'])
onMounted(() => {
if (props.step !== 2) {
addData.value = false
}
// fetchProvince()
})
const saveData = async () => {
await myform.value.validate().then(async (success: boolean) => {
if (success) {
} else {
}
})
}
const changeBtn = async () => {
if (edit.value == true) {
if (props.statusEdit === true) {
edit.value = false
props.notiNoEdit()
} else {
emit('update:statusEdit', true)
}
} else {
emit('update:statusEdit', false)
}
}
const fetchProvince = async () => {
// loader.value = true;
await http
.get(config.API.province)
.then((res) => {
const data = res.data.result
let option: DataOption[] = []
// console.log(data);
data.map((r: any) => {
option.push({ id: r.id.toString(), name: r.name.toString() })
})
provinceOptions.value = option
})
.catch((e: any) => {})
.finally(() => {
// loader.value = false;
})
}
const savePic = () => {
disabledPic.value = false
}
const onFilePicked = () => {}
const pickFile = () => {
disabledPic.value = true
}
const cancelData = () => {
fileData.value = null
disabledPic.value = false
}
const getClass = (val: boolean) => {
return {
'full-width inputgreen cursor-pointer': val,
'full-width cursor-pointer': !val
}
}
</script>
<style>
.containerimage {
position: relative;
width: 100%;
}
.q-img {
display: block;
width: 160px;
height: 170px;
padding: 1%;
border-radius: 3px;
border: solid 2px rgba(168, 168, 168, 0.055) !important;
box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.048), 0 3px 6px 0 rgba(0, 0, 0, 0.19);
}
.overlay {
position: absolute;
bottom: 0;
background: rgb(0, 0, 0);
background: rgba(0, 0, 0, 0.7);
color: #f1f1f1;
transition: 0.5s ease;
width: 160px;
height: 70px;
opacity: 0;
color: white;
text-align: center;
cursor: pointer;
padding: 5% 0 5% 0;
}
.containerimage:hover .overlay {
opacity: 1;
}
</style>

297
src/modules/01_exam/components/Form/Profile/Occupation.vue Normal file
View file

@ -0,0 +1,297 @@
<!-- 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="addData"
:cancel="cancelData"
: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(edit)"
hide-bottom-space
dense
lazy-rules
type="textarea"
autogrow
:readonly="!edit"
:borderless="!edit"
v-model="occupationData.official"
:rules="[(val) => !!val || `${'กรุณากรอก สำนัก/บริษัท'}`]"
:disable="occupationData.status !== 'official' || !edit"
>
<template v-slot:before>
<q-radio
v-model="occupationData.status"
checked-icon="task_alt"
unchecked-icon="panorama_fish_eye"
val="official"
label="ข้าราชการกรุงเทพมหานคร ตำแหน่ง"
dense
:disable="!edit"
size="md"
style="font-size: 14px; color: black"
/>
</template>
</q-input>
<q-input
:class="getClass(edit)"
hide-bottom-space
dense
lazy-rules
type="textarea"
autogrow
:readonly="!edit"
:borderless="!edit"
v-model="occupationData.personnel"
:rules="[(val) => !!val || `${'กรุณากรอก สำนัก/บริษัท'}`]"
:disable="occupationData.status !== 'personnel' || !edit"
>
<template v-slot:before>
<q-radio
v-model="occupationData.status"
checked-icon="task_alt"
unchecked-icon="panorama_fish_eye"
val="personnel"
label="บุคลากรกรุงเทพมหานคร ตำแหน่ง"
dense
:disable="!edit"
size="md"
style="font-size: 14px; color: black"
/>
</template>
</q-input>
<q-input
:class="getClass(edit)"
hide-bottom-space
dense
lazy-rules
type="textarea"
autogrow
:readonly="!edit"
:borderless="!edit"
v-model="occupationData.officialsOther"
:rules="[(val) => !!val || `${'กรุณากรอก สำนัก/บริษัท'}`]"
:disable="occupationData.status !== 'officialsOther' || !edit"
>
<template v-slot:before>
<q-radio
v-model="occupationData.status"
checked-icon="task_alt"
unchecked-icon="panorama_fish_eye"
val="officialsOther"
label="ข้าราชการประเภทอื่น ตำแหน่ง"
dense
:disable="!edit"
size="md"
style="font-size: 14px; color: black"
/>
</template>
</q-input>
<q-input
:class="getClass(edit)"
hide-bottom-space
dense
lazy-rules
type="textarea"
autogrow
:readonly="!edit"
:borderless="!edit"
v-model="occupationData.employee"
:rules="[(val) => !!val || `${'กรุณากรอก สำนัก/บริษัท'}`]"
:disable="occupationData.status !== 'employee' || !edit"
>
<template v-slot:before>
<q-radio
v-model="occupationData.status"
checked-icon="task_alt"
unchecked-icon="panorama_fish_eye"
val="employee"
label="ลูกจ้าง/พนักงานราชการของส่วนราชการอื่น ตำแหน่ง"
dense
:disable="!edit"
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="!edit"
size="md"
style="font-size: 14px; color: black"
/>
<q-input
:class="getClass(edit)"
hide-bottom-space
dense
lazy-rules
type="textarea"
autogrow
:readonly="!edit"
:borderless="!edit"
v-model="occupationData.other"
:rules="[(val) => !!val || `${'กรุณากรอก สำนัก/บริษัท'}`]"
:disable="occupationData.status !== 'other' || !edit"
>
<template v-slot:before>
<q-radio
v-model="occupationData.status"
checked-icon="task_alt"
unchecked-icon="panorama_fish_eye"
val="other"
label="อื่นๆ"
dense
:disable="!edit"
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(edit)"
hide-bottom-space
:outlined="edit"
dense
lazy-rules
type="textarea"
autogrow
:readonly="!edit"
:borderless="!edit"
v-model="occupationData.company"
:rules="[(val) => !!val || `${'กรุณากรอก สำนัก/บริษัท'}`]"
:label="`${'สำนัก/บริษัท'}`"
/>
</div>
<div class="col-xs-6 col-sm-3 col-md-3">
<q-input
:class="getClass(edit)"
hide-bottom-space
:outlined="edit"
dense
lazy-rules
type="textarea"
autogrow
:readonly="!edit"
:borderless="!edit"
v-model="occupationData.department"
:rules="[(val) => !!val || `${'กรุณากรอก กอง/ฝ่าย'}`]"
:label="`${'กอง/ฝ่าย'}`"
/>
</div>
<div class="col-xs-6 col-sm-3 col-md-3">
<q-input
:class="getClass(edit)"
hide-bottom-space
:outlined="edit"
dense
lazy-rules
type="textarea"
autogrow
:readonly="!edit"
:borderless="!edit"
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(edit)"
hide-bottom-space
:outlined="edit"
dense
lazy-rules
type="textarea"
autogrow
:readonly="!edit"
:borderless="!edit"
v-model="occupationData.tel"
:rules="[(val) => !!val || `${'กรุณากรอก โทรศัพท์'}`]"
:label="`${'โทรศัพท์'}`"
/>
</div>
</div>
</q-form>
</q-card>
</template>
<script setup lang="ts">
import { ref, onMounted, watch } from 'vue'
import http from '@/plugins/http'
import config from '@/app.config'
import type { Occupation } from '@/modules/01_exam/interface/index/Main'
import { defaultOccupation } from '@/modules/01_exam/interface/index/Main'
import HeaderTop from '@/components/top.vue'
const edit = ref<boolean>(false)
const addData = ref<boolean>(true)
const occupationData = ref<Occupation>(defaultOccupation)
const myform = ref<any>()
const props = defineProps({
statusEdit: {
type: Boolean,
required: true
},
notiNoEdit: {
type: Function,
default: () => console.log('not function')
},
step: {
type: Number,
required: true
}
})
const emit = defineEmits(['update:statusEdit'])
onMounted(() => {
if (props.step !== 2) {
addData.value = false
}
})
const saveData = async () => {
await myform.value.validate().then(async (success: boolean) => {
if (success) {
} else {
}
})
}
const changeBtn = async () => {
if (edit.value == true) {
if (props.statusEdit === true) {
edit.value = false
props.notiNoEdit()
} else {
emit('update:statusEdit', true)
}
} else {
emit('update:statusEdit', false)
}
}
const cancelData = () => {}
const getClass = (val: boolean) => {
return {
'full-width inputgreen cursor-pointer': val,
'full-width cursor-pointer': !val
}
}
</script>