แยกปุ่มอัพโหลด
This commit is contained in:
Kittapath
parent
ccc5efa421
commit
abe8e9186c
11 changed files with 809 additions and 585 deletions
|
|
@ -1,87 +1,32 @@
|
|||
<!-- step กรอกข้อมูล -->
|
||||
<template>
|
||||
<div>
|
||||
<Profile :loader="loader" v-model:statusEdit="statusEdit" :status="status" />
|
||||
<!-- <q-splitter v-model="splitterModel" style="height: 450px">
|
||||
<template v-slot:before>
|
||||
<q-tab-panels
|
||||
v-model="tab"
|
||||
animated
|
||||
vertical
|
||||
transition-prev="jump-up"
|
||||
transition-next="jump-up"
|
||||
>
|
||||
ข้อมูลส่วนบุคคล
|
||||
<q-tab-panel name="profile">
|
||||
<Profile :loader="loader" v-model:statusEdit="statusEdit" :status="status" />
|
||||
</q-tab-panel>
|
||||
|
||||
ประวัติการศีกษา
|
||||
<q-tab-panel name="education">
|
||||
<Education :loader="loader" v-model:statusEdit="statusEdit" :status="status" />
|
||||
</q-tab-panel>
|
||||
|
||||
ประวัติการทำงาน/ฝึกงาน
|
||||
<q-tab-panel name="career">
|
||||
<Career :loader="loader" v-model:statusEdit="statusEdit" :status="status" />
|
||||
</q-tab-panel>
|
||||
|
||||
ไฟล์
|
||||
<q-tab-panel name="document">
|
||||
<Document :loader="loader" v-model:statusEdit="statusEdit" :status="status" />
|
||||
</q-tab-panel>
|
||||
</q-tab-panels>
|
||||
</template>
|
||||
<template v-slot:after>
|
||||
<q-tabs v-model="tab" vertical class="text-teal">
|
||||
<q-tab name="profile" label="ข้อมูลส่วนบุคคล" :disable="statusEdit" />
|
||||
<q-tab name="education" label="ประวัติการศีกษา" :disable="statusEdit" />
|
||||
<q-tab name="career" label="ประวัติการทำงาน/ฝึกงาน" :disable="statusEdit" />
|
||||
<q-tab name="document" label="อัปโหลดเอกสาร" :disable="statusEdit" />
|
||||
</q-tabs>
|
||||
</template>
|
||||
</q-splitter> -->
|
||||
<Profile
|
||||
:loader="loader"
|
||||
v-model:statusEdit="statusEdit"
|
||||
:status="status"
|
||||
:btnSave="btnSave"
|
||||
v-model:formInformation="formInformation"
|
||||
v-model:formAddress="formAddress"
|
||||
v-model:formFamily="formFamily"
|
||||
v-model:formOccupation="formOccupation"
|
||||
/>
|
||||
<div class="text-center q-pt-sm">
|
||||
<q-checkbox
|
||||
v-model="acceptTermOfUse"
|
||||
:disable="(status !== 'register' && status !== 'rejectRegister') || statusEdit"
|
||||
label="ข้าพเจ้ารับรองว่า ข้าพเจ้ามีคุณสมบัติครบถ้วนตามประกาศรับสมัคร ข้อความข้างต้นตรงตามความจริงทุกประการ"
|
||||
/>
|
||||
<!-- v-if="tab == 'document'" -->
|
||||
</div>
|
||||
|
||||
<div class="row justify-center q-pa-md">
|
||||
<!-- <q-btn
|
||||
color="primary"
|
||||
class="q-ml-md"
|
||||
label="กลับ"
|
||||
@click="clickPreview(tab)"
|
||||
v-if="
|
||||
(status === 'register' || status === 'rejectRegister') &&
|
||||
(tab == 'education' || tab == 'career' || tab == 'document')
|
||||
"
|
||||
icon="mdi-chevron-left"
|
||||
:disable="statusEdit"
|
||||
/>
|
||||
<q-btn
|
||||
color="primary"
|
||||
class="q-ml-md"
|
||||
label="ต่อไป"
|
||||
@click="clickNext(tab)"
|
||||
v-if="
|
||||
(status === 'register' || status === 'rejectRegister') &&
|
||||
(tab == 'profile' || tab == 'education' || tab == 'career')
|
||||
"
|
||||
icon-right="mdi-chevron-right"
|
||||
:disable="statusEdit"
|
||||
/> -->
|
||||
<q-btn
|
||||
color="blue"
|
||||
class="q-ml-md"
|
||||
label="บันทึกข้อมูล"
|
||||
outline
|
||||
icon="mdi-content-save"
|
||||
@click="okModalConfirm"
|
||||
@click="saveData"
|
||||
v-if="status === 'register' || status === 'rejectRegister'"
|
||||
:disable="!acceptTermOfUse || statusEdit"
|
||||
/>
|
||||
|
|
@ -105,10 +50,13 @@ import { useCounterMixin } from '@/stores/mixin'
|
|||
import http from '@/plugins/http'
|
||||
import config from '@/app.config'
|
||||
import Profile from '@/modules/01_exam/components/Form/Profile.vue'
|
||||
import Education from '@/modules/01_exam/components/Form/Education.vue'
|
||||
import Career from '@/modules/01_exam/components/Form/Career.vue'
|
||||
import Document from '@/modules/01_exam/components/Form/Document.vue'
|
||||
import { useRoute } from 'vue-router'
|
||||
import {
|
||||
defaultInformation,
|
||||
defaultOccupation,
|
||||
defaultAddress,
|
||||
defaultFamily
|
||||
} from '@/modules/01_exam/interface/index/Main'
|
||||
|
||||
const props = defineProps({
|
||||
fetchStep: {
|
||||
|
|
@ -123,14 +71,17 @@ const props = defineProps({
|
|||
|
||||
const $q = useQuasar()
|
||||
const mixin = useCounterMixin() //เรียกฟังก์ชันกลาง
|
||||
const { modalConfirm, modalError, success } = mixin
|
||||
// const tab = ref<string>('profile')
|
||||
// const splitterModel = ref<number>(90)
|
||||
const { modalConfirm, modalError, success, dateToISO } = mixin
|
||||
const loader = ref<boolean>(false)
|
||||
const statusEdit = ref<boolean>(false)
|
||||
const acceptTermOfUse = ref<boolean>(false)
|
||||
const route = useRoute()
|
||||
const examId = ref<string>(route.params.id.toString())
|
||||
const btnSave = ref<boolean>(false)
|
||||
const formInformation = ref<any>({})
|
||||
const formAddress = ref<any>({})
|
||||
const formFamily = ref<any>({})
|
||||
const formOccupation = ref<any>({})
|
||||
|
||||
onMounted(async () => {
|
||||
if (props.status !== 'register') {
|
||||
|
|
@ -166,35 +117,115 @@ const saveForm = async () => {
|
|||
})
|
||||
}
|
||||
|
||||
// const clickPreview = (val: string) => {
|
||||
// switch (val) {
|
||||
// case 'profile':
|
||||
// return (tab.value = 'profile')
|
||||
// case 'education':
|
||||
// return (tab.value = 'profile')
|
||||
// case 'career':
|
||||
// return (tab.value = 'education')
|
||||
// case 'document':
|
||||
// return (tab.value = 'career')
|
||||
// default:
|
||||
// return (tab.value = 'profile')
|
||||
// }
|
||||
// }
|
||||
|
||||
// const clickNext = (val: string) => {
|
||||
// switch (val) {
|
||||
// case 'profile':
|
||||
// return (tab.value = 'education')
|
||||
// case 'education':
|
||||
// return (tab.value = 'career')
|
||||
// case 'career':
|
||||
// return (tab.value = 'document')
|
||||
// case 'document':
|
||||
// return (tab.value = 'profile')
|
||||
// default:
|
||||
// return (tab.value = 'profile')
|
||||
// }
|
||||
// }
|
||||
const saveData = async () => {
|
||||
await formInformation.value.validate().then(async (suc: boolean) => {
|
||||
if (suc) {
|
||||
await formAddress.value.validate().then(async (suc: boolean) => {
|
||||
if (suc) {
|
||||
await formFamily.value.validate().then(async (suc: boolean) => {
|
||||
if (suc) {
|
||||
await formOccupation.value.validate().then(async (suc: boolean) => {
|
||||
if (suc) {
|
||||
const type = ref<string | null>('')
|
||||
if (defaultOccupation.value.status == 'official')
|
||||
type.value = defaultOccupation.value.official
|
||||
if (defaultOccupation.value.status == 'personnel')
|
||||
type.value = defaultOccupation.value.personnel
|
||||
if (defaultOccupation.value.status == 'officialsOther')
|
||||
type.value = defaultOccupation.value.officialsOther
|
||||
if (defaultOccupation.value.status == 'employee')
|
||||
type.value = defaultOccupation.value.employee
|
||||
if (defaultOccupation.value.status == 'other')
|
||||
type.value = defaultOccupation.value.other
|
||||
loader.value = true
|
||||
await http
|
||||
.post(config.API.candidateId(examId.value), {
|
||||
prefixId: defaultInformation.value.prefixId,
|
||||
lastName: defaultInformation.value.lastname,
|
||||
citizenProvinceId: defaultInformation.value.provinceId,
|
||||
citizenDistrictId: defaultInformation.value.districtId,
|
||||
dateOfBirth:
|
||||
defaultInformation.value.birthDate == null
|
||||
? null
|
||||
: dateToISO(defaultInformation.value.birthDate),
|
||||
citizenDate:
|
||||
defaultInformation.value.cardIdDate == null
|
||||
? null
|
||||
: dateToISO(defaultInformation.value.cardIdDate),
|
||||
citizenId: defaultInformation.value.cardid,
|
||||
firstName: defaultInformation.value.firstname,
|
||||
relationshipId: defaultInformation.value.relationship,
|
||||
nationality: defaultInformation.value.nationality,
|
||||
email: defaultInformation.value.email,
|
||||
mobilePhone: defaultInformation.value.phone,
|
||||
telephone: defaultInformation.value.tel,
|
||||
knowledge: defaultInformation.value.knowledge,
|
||||
occupationType: defaultOccupation.value.status,
|
||||
occupationCompany: defaultOccupation.value.company,
|
||||
occupationDepartment: defaultOccupation.value.department,
|
||||
occupationEmail: defaultOccupation.value.email,
|
||||
occupationTelephone: defaultOccupation.value.tel,
|
||||
occupationPosition: type.value,
|
||||
registAddress: defaultAddress.value.address,
|
||||
currentAddress: defaultAddress.value.addressC,
|
||||
registProvinceId: defaultAddress.value.provinceId,
|
||||
currentProvinceId: defaultAddress.value.provinceIdC,
|
||||
registDistrictId: defaultAddress.value.districtId,
|
||||
currentDistrictId: defaultAddress.value.districtIdC,
|
||||
registSubDistrictId: defaultAddress.value.subdistrictId,
|
||||
currentSubDistrictId: defaultAddress.value.subdistrictIdC,
|
||||
registZipCode: defaultAddress.value.code,
|
||||
currentZipCode: defaultAddress.value.codeC,
|
||||
registSame:
|
||||
defaultAddress.value.same == '1'
|
||||
? true
|
||||
: defaultAddress.value.same == '0'
|
||||
? false
|
||||
: null,
|
||||
marryPrefixId: defaultFamily.value.prefixIdC,
|
||||
marryFirstName: defaultFamily.value.firstnameC,
|
||||
marryLastName: defaultFamily.value.lastnameC,
|
||||
marryOccupation: defaultFamily.value.occupationC,
|
||||
marryNationality: defaultFamily.value.nationalityC,
|
||||
fatherPrefixId: defaultFamily.value.prefixIdM,
|
||||
fatherFirstName: defaultFamily.value.firstnameM,
|
||||
fatherLastName: defaultFamily.value.lastnameM,
|
||||
fatherOccupation: defaultFamily.value.occupationM,
|
||||
fatherNationality: defaultFamily.value.nationalityM,
|
||||
motherPrefixId: defaultFamily.value.prefixIdF,
|
||||
motherFirstName: defaultFamily.value.firstnameF,
|
||||
motherLastName: defaultFamily.value.lastnameF,
|
||||
motherOccupation: defaultFamily.value.occupationF,
|
||||
motherNationality: defaultFamily.value.nationalityF,
|
||||
marry:
|
||||
defaultFamily.value.same == '1'
|
||||
? true
|
||||
: defaultFamily.value.same == '0'
|
||||
? false
|
||||
: null
|
||||
})
|
||||
.then(() => {
|
||||
success($q, 'บันทึกข้อมูลส่วนตัวสำเร็จ')
|
||||
})
|
||||
.catch(() => {
|
||||
// modalError.value = true
|
||||
// modalErrorTittle.value = 'ไม่สามารถบันทึกข้อมูลร่างได้'
|
||||
// modalErrorDetail.value = e.response.data.message
|
||||
// statusCode.value = e.response.data.status
|
||||
})
|
||||
.finally(async () => {
|
||||
loader.value = false
|
||||
await props.fetchStep()
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue