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

10
src/modules/01_exam/components/Document.vue
View file

@ -1,10 +0,0 @@
<!-- tab เอกสาร -->
<template>
<!-- <Image /> -->
<OtherFile />
</template>
<script setup lang="ts">
import { ref } from 'vue'
// import Image from './Image.vue'
import OtherFile from './OtherFile.vue'
</script>

19
src/modules/01_exam/components/ExamDetail.vue
View file

@ -52,6 +52,10 @@
จะต้องเป็นชื่อที่ตรงกับบัตรประจำตัวประชาชน
</div>
</div>
<div class="row justify-center q-pa-md">
<q-btn color="primary" class="q-ml-md" label="สมัครสอบ" @click="applyCandidate" />
</div>
</div>
</template>
@ -59,6 +63,17 @@
import { ref } from 'vue'
import { useCounterMixin } from '@/stores/mixin'
const props = defineProps({
fetchStep: {
type: Function,
default: () => console.log('not function')
},
step: {
type: Number,
required: true
}
})
const mixin = useCounterMixin()
const { date2Thai } = mixin
const exam = ref<any>({
@ -78,6 +93,10 @@ const exam = ref<any>({
}
]
})
const applyCandidate = () => {
props.fetchStep()
}
</script>
<style scoped></style>

17
src/modules/01_exam/components/ExamFinished.vue
View file

@ -62,14 +62,25 @@
</q-card-section>
</q-card-section>
</q-card>
<q-btn size="12px" flat round color="primary" @click="testChangeStatus" icon="mdi-download">
</q-btn>
</div>
<!-- <q-btn color="positive" @click="testChangeStatus">จัดที่นั่ง</q-btn> -->
</div>
</template>
<script setup lang="ts">
import { onMounted, ref } from 'vue'
const props = defineProps({
fetchStep: {
type: Function,
default: () => console.log('not function')
},
step: {
type: Number,
required: true
}
})
const fullName = ref<string>('นางพิมพ์ภา วงศ์สวัสดิ์')
const examNumber = ref<string>('CDE-004')
const citizenId = ref<string>('1100700954521')
@ -78,7 +89,7 @@ const examLocation = ref<string>('ศูนย์สอบ 01 กรุงเท
const floor = ref<string>('4')
const examRoom = ref<string>('CB-706')
const seatNumber = ref<string>('75')
const status = ref<boolean>(false)
const status = ref<boolean>(true)
const download = () => {}
const testChangeStatus = () => {

113
src/modules/01_exam/components/ExamForm.vue
View file

@ -8,6 +8,7 @@
active-color="primary"
indicator-color="primary"
align="justify"
@update:model-value="changeTab"
>
<q-tab name="profile" label="ข้อมูลส่วนบุคคล" />
<q-tab name="education" label="ประวัติการศีกษา" />
@ -16,49 +17,127 @@
</q-tabs>
<q-tab-panels v-model="tab" animated class="bg-white">
<!-- ข้อมูลส่วนบุคคล -->
<q-tab-panel name="profile"><Profile /></q-tab-panel>
<q-tab-panel name="profile">
<Profile :loader="loader" v-model:statusEdit="statusEditProfile" :step="step" />
</q-tab-panel>
<!-- ประวัติการศีกษา -->
<q-tab-panel name="education"><Education :loader="loader" /> </q-tab-panel>
<q-tab-panel name="education"><Education :loader="loader" :step="step" /></q-tab-panel>
<!-- ประวัติการทำงาน/ฝึกงาน -->
<q-tab-panel name="career"><Career :loader="loader" /></q-tab-panel>
<q-tab-panel name="career"><Career :loader="loader" :step="step" /></q-tab-panel>
<!-- ไฟล์ -->
<q-tab-panel name="document"><Document :loader="loader" /> </q-tab-panel>
<q-tab-panel name="document">
<Document :loader="loader" v-model:statusEdit="statusEditDocument" :step="step" />
</q-tab-panel>
</q-tab-panels>
<!-- <div>
<div>
<q-checkbox
v-if="allowEditProp"
v-model="acceptTermOfUse"
:disable="!allowEdit"
:label="formLabel.acceptTermOfUse"
:disable="step !== 2"
label="ข้าพเจ้ารับรองว่า ข้าพเจ้ามีคุณสมบัติครบถ้วนตามประกาศรับสมัคร ข้อความข้างต้นตรงตามความจริงทุกประการ"
/>
</div>
<div class="row justify-center q-pa-md">
<q-btn color="warning" label="บันทึก" @click="saveForm" :disable="applyState === 3" />
<q-btn
color="primary"
class="q-ml-md"
label="สมัครสอบ"
@click="applyCandidate"
:disable="!acceptTermOfUse || applyState === 3"
@click="okModalComfirm"
v-if="step === 2"
:disable="!acceptTermOfUse"
/>
</div> -->
</div>
</div>
<NotifyConfirm
:modal="modalComfirm"
:modalTittle="modalComfirmTittle"
:modalDetail="modalComfirmDetail"
:ok="applyCandidate"
:cancel="cancelModalComfirm"
/>
<NotifyError
:modalError="modalNoEdit"
:modalErrorTittle="modalNoEditTittle"
:modalErrorDetail="modalNoEditDetail"
:close="closeModalError"
/>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import Profile from './Profile.vue'
import Education from './Education.vue'
import Career from './Career.vue'
import Document from './Document.vue'
import { onMounted, ref, watch } from 'vue'
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 NotifyError from '@/components/NotifyError.vue'
import NotifyConfirm from '@/components/NotifyConfirm.vue'
const props = defineProps({
fetchStep: {
type: Function,
default: () => console.log('not function')
},
step: {
type: Number,
required: true
}
})
const tab = ref<string>('profile')
const tabRaw = ref<string>('profile')
const loader = ref<boolean>(false)
const statusEditProfile = ref<boolean>(false)
const statusEditDocument = ref<boolean>(false)
const acceptTermOfUse = ref<boolean>(false)
const modalComfirm = ref<boolean>(false)
const modalComfirmTittle = ref<string>('ยืนยันการสมัครสอบ?')
const modalComfirmDetail = ref<string>('เมื่อยืนยันการสมัครสอบแล้วจะไม่สามารถแก้ไขข้อมูลได้')
const modalNoEdit = ref<boolean>(false)
const modalNoEditTittle = ref<string>('ไม่สามารถเปลี่ยนแท็ปได้?')
const modalNoEditDetail = ref<string>('มีข้อมูลที่ยังไม่ถูกบันทึกข้อมูล')
onMounted(async () => {
if (props.step > 2) {
acceptTermOfUse.value = true
}
})
const okModalComfirm = () => {
if (statusEditProfile.value == true || statusEditDocument.value == true) {
modalNoEditTittle.value = 'ไม่สามารถสมัครสอบได้?'
modalNoEditDetail.value = 'มีข้อมูลที่ยังไม่ถูกบันทึกข้อมูล'
modalNoEdit.value = true
} else {
modalComfirm.value = true
}
}
const cancelModalComfirm = () => {
modalComfirm.value = false
}
const closeModalError = () => {
modalNoEdit.value = false
}
const applyCandidate = () => {
props.fetchStep()
}
const changeTab = () => {
if (statusEditProfile.value == true || statusEditDocument.value == true) {
modalNoEditTittle.value = 'ไม่สามารถเปลี่ยนแท็ปได้?'
modalNoEditDetail.value = 'มีข้อมูลที่ยังไม่ถูกบันทึกข้อมูล'
tab.value = tabRaw.value
modalNoEdit.value = true
} else {
tabRaw.value = tab.value
}
}
</script>
<style lang="scss" scoped></style>

96
src/modules/01_exam/components/ExamPayment.vue
View file

@ -1,5 +1,5 @@
<template>
<q-card class="my-card" style="max-width: 1000px; width: 100%" bordered>
<q-card class="my-card q-mb-sm" bordered>
<q-card-actions class="q-pa-md text-left row" :class="getClass(status)">
<div class="text-black text-bold col-12" style="font-size: 16px">
{{ message(status) }}
@ -11,63 +11,91 @@
</q-card-actions>
</q-card>
<div class="d-flex justify-content-center align-items-center min-vh-100">
<div>
<div class="text-center q-pb-lg">
<!-- <q-badge
<div class="d-flex justify-content-center align-items-center row col-12">
<!-- <div class="text-center q-pb-lg">
<q-badge
:outline="badgeOutline"
:color="badgeColor"
:label="badgeLabel"
class="q-pa-nond text-center"
style="font-size: 16px"
/> -->
</div>
<div class="row q-pa-nond text-center">
<q-img :src="img" :ratio="1" style="max-width: 300px; height: 300px" />
<q-uploader
ref="uploader"
type="file"
:factory="uploadImg"
class="q-mx-auto col-6"
label="กรุณาอัปโหลดหลักฐานการชำระเงิน"
flat
color="blue"
bordered
/>
</div>
<div class="q-pa-md text-center">
<q-btn color="primary" @click="setStatus('processing')" label="ส่งหลักฐานการชำระเงิน" />
</div>
<div class="text-black text-center q-pb-lg">
***ถ้าต้องการเเก้ไขหลักฐานการโอนเงินกรุณาอัพโหลดซ้ำ***
</div>
</div> -->
<!-- <div class="row q-pa-nond text-center col-6"> -->
<!-- <q-img :src="img" fit="contain" style="max-height: 300px" class="col-6">
<div class="absolute-bottom text-center">หลักฐานชำระเงิน</div>
</q-img> -->
<q-file
borderless
v-model="fileData"
stack-label
@update:model-value="uploadImg"
class="col-12"
>
<!-- <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-img :src="img" fit="contain" style="max-height: 300px" class="col-12">
<div class="absolute-bottom text-center">หลักฐานชำระเงิน</div>
</q-img>
</q-file>
<!-- <q-uploader
ref="uploader"
type="file"
:factory="uploadImg"
class="col-6"
label="กรุณาอัปโหลดหลักฐานการชำระเงิน"
flat
color="blue"
bordered
/> -->
<!-- </div> -->
<div class="q-pa-md text-center col-12">
<q-btn color="primary" @click="setStatus('processing')" label="ส่งหลักฐานการชำระเงิน" />
</div>
<q-btn color="negative" @click="setStatus('rejected')">Rejected</q-btn>
<q-btn color="positive" @click="setStatus('success')">Success</q-btn>
<div class="text-black text-center q-pb-lg col-12">
***ถ้าต้องการเเก้ไขหลักฐานการโอนเงินกรุณาอัพโหลดซ้ำ***
</div>
<q-btn color="negative" @click="setStatus('rejected')">Re</q-btn>
<q-btn color="positive" @click="setStatus('success')">Su</q-btn>
<q-btn color="positive" @click="setStatus('next')">Ne</q-btn>
</div>
</template>
<script setup lang="ts">
import { file } from '@babel/types'
import { log } from 'console'
import { defineComponent, ref, Ref } from 'vue'
import { onMounted } from 'vue'
import { ComponentRef } from '@vue/runtime-core'
import { ref } from 'vue'
const props = defineProps({
fetchStep: {
type: Function,
default: () => console.log('not function')
},
step: {
type: Number,
required: true
}
})
const status = ref<string>('')
const rejectMessage = ref<string>('กรุณาจ่ายเงินให้ครบตามจำนวน')
const img = ref<string>('https://cdn-icons-png.flaticon.com/512/2496/2496846.png')
const fileData = ref<any>()
const uploadImg = (file: any) => {
fileData.value = null
// img.value =
// 'https://s359.kapook.com/r/600/auto/pagebuilder/ba154685-db18-4ac7-b318-a4a2b15b9d4c.jpg'
img.value =
'https://www.bangkokbank.com/-/media/feature/page-content/bbl-corporate/image-carousel-slides/digital-banking/bualuang-mbanking/how-to-use/payment/others/7_en.png'
}
const slide = ref(1)
const setStatus = (val: string) => {
status.value = val
if (val == 'next') props.fetchStep()
}
const getClass = (val: string) => {

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

@ -11,6 +11,7 @@
v-model:inputvisible="visibleColumns"
:add="clickAdd"
:nameHeader="false"
:addData="addData"
>
<template #columns="props">
<q-tr :props="props">
@ -151,6 +152,7 @@
:validate="validateData"
:clickNext="clickNext"
:clickPrevious="clickPrevious"
:editBtn="addData"
v-model:editvisible="edit"
v-model:next="next"
v-model:previous="previous"
@ -188,6 +190,10 @@ const props = defineProps({
//หน้า main มีการอัพเดทค่าให้ refresh data
type: Boolean,
required: true
},
step: {
type: Number,
required: true
}
})
@ -212,6 +218,7 @@ const rowIndex = ref<number>(0) //indexข้อมูลเดิมที่
const previous = ref<boolean>() //แสดงปุ่มดูข้อมูลก่อนหน้า
const next = ref<boolean>() //แสดงปุ่มดูข้อมูลต่อไป
const editRow = ref<boolean>(false) //เช็คมีการแก้ไขข้อมูล
const addData = ref<boolean>(true)
const rawHistory = ref<RequestItemsObject[]>([]) //raw data history
const modalError = ref<boolean>(false) // modal สำหรับแจ้งเตือนerror
const modalErrorTittle = ref<string>('') // tittle modal error
@ -313,6 +320,9 @@ watch(visibleColumns, async (count: String[], prevCount: String[]) => {
onMounted(async () => {
// await fetchData()
rawHistory.value = rows.value
if (props.step !== 2) {
addData.value = false
}
})
const fetchData = async () => {}
@ -389,7 +399,7 @@ const clickEdit = () => {
* กดปุ่มเพิ่มด้านบน table
*/
const clickAdd = () => {
addData()
addRow()
}
/**
@ -506,7 +516,7 @@ const selectData = (props: DataProps) => {
/**
* กดปุ่มเพิ่มบน table
*/
const addData = () => {
const addRow = () => {
modalEdit.value = false
modal.value = true
edit.value = true

37
src/modules/01_exam/components/OtherFile.vue → src/modules/01_exam/components/Form/Document.vue
View file

@ -3,7 +3,7 @@
<q-card flat bordered class="col-12 row q-px-lg q-py-md q-mt-md">
<HeaderTop
v-model:edit="edit"
header="เอกสารหลักฐาน"
header="เอกสารหลักฐาน(เช่น สำเนาบัตรประชาชน ทะเบียนบ้าน วุฒิการศึกษา)"
icon="mdi-file-document"
:history="false"
:addData="addData"
@ -55,14 +55,35 @@
class="full-width"
accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"
bordered
label="[ไฟล์ jpg,png,pdf,csv,doc]"
/>
</div>
</q-card>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { onMounted, ref, watch } from 'vue'
import HeaderTop from '@/components/top.vue'
const props = defineProps({
loader: {
//หน้า main มีการอัพเดทค่าให้ refresh data
type: Boolean,
required: true
},
statusEdit: {
type: Boolean,
required: true
},
notiNoEdit: {
type: Function,
default: () => console.log('not function')
},
step: {
type: Number,
required: true
}
})
const edit = ref<boolean>(false)
const addData = ref<boolean>(true)
const files = ref<any>([
@ -79,6 +100,18 @@ const files = ref<any>([
sizeLabel: '89MB'
}
])
const emit = defineEmits(['update:loader', 'update:statusEdit'])
watch(edit, (count: boolean, prevCount: boolean) => {
emit('update:statusEdit', count)
})
onMounted(async () => {
if (props.step !== 2) {
addData.value = false
}
})
const fileUpload = async (file: any) => {
return {
url: 'http://localhost:4444/upload',

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

@ -11,6 +11,7 @@
v-model:inputvisible="visibleColumns"
:add="clickAdd"
:nameHeader="false"
:addData="addData"
>
<template #columns="props">
<q-tr :props="props">
@ -152,6 +153,7 @@
:validate="validateData"
:clickNext="clickNext"
:clickPrevious="clickPrevious"
:editBtn="addData"
v-model:editvisible="edit"
v-model:next="next"
v-model:previous="previous"
@ -190,6 +192,10 @@ const props = defineProps({
//หน้า main มีการอัพเดทค่าให้ refresh data
type: Boolean,
required: true
},
step: {
type: Number,
required: true
}
})
@ -216,6 +222,7 @@ const rowIndex = ref<number>(0) //indexข้อมูลเดิมที่
const previous = ref<boolean>() //แสดงปุ่มดูข้อมูลก่อนหน้า
const next = ref<boolean>() //แสดงปุ่มดูข้อมูลต่อไป
const editRow = ref<boolean>(false) //เช็คมีการแก้ไขข้อมูล
const addData = ref<boolean>(true)
const rawHistory = ref<RequestItemsObject[]>([]) //raw data history
const modalError = ref<boolean>(false) // modal สำหรับแจ้งเตือนerror
const modalErrorTittle = ref<string>('') // tittle modal error
@ -228,7 +235,6 @@ const closeModalError = () => {
// fetchData();
}
}
const emit = defineEmits(['update:loader'])
const rows = ref<RequestItemsObject[]>([
@ -320,6 +326,9 @@ onMounted(async () => {
// await fetchData()
// await fetchQualification()
rawHistory.value = rows.value
if (props.step !== 2) {
addData.value = false
}
})
const fetchQualification = async () => {
@ -417,7 +426,7 @@ const clickEdit = () => {
* กดปุ่มเพิ่มด้านบน table
*/
const clickAdd = () => {
addData()
addRow()
}
/**
@ -535,7 +544,7 @@ const selectData = (props: DataProps) => {
/**
* กดปุ่มเพิ่มบน table
*/
const addData = () => {
const addRow = () => {
modalEdit.value = false
modal.value = true
edit.value = true

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

@ -0,0 +1,86 @@
<!-- tab ข้อมูลส่วนบุคคล -->
<template>
<Information
:prefixOptions="prefixOptions"
:genderOptions="genderOptions"
:bloodOptions="bloodOptions"
:statusOptions="statusOptions"
:religionOptions="religionOptions"
:provinceOptions="provinceOptions"
v-model:statusEdit="statusEdit"
:notiNoEdit="notiNoEdit"
:step="step"
/>
<Address v-model:statusEdit="statusEdit" :notiNoEdit="notiNoEdit" :step="step" />
<Family
:prefixOptions="prefixOptions"
v-model:statusEdit="statusEdit"
:notiNoEdit="notiNoEdit"
:step="step"
/>
<Occupation v-model:statusEdit="statusEdit" :notiNoEdit="notiNoEdit" :step="step" />
<NotifyError
:modalError="modalNoEdit"
:modalErrorTittle="modalNoEditTittle"
:modalErrorDetail="modalNoEditDetail"
:close="closeModalError"
/>
</template>
<script setup lang="ts">
import { ref, onMounted, watch } from 'vue'
import type { DataOption } from '@/modules/01_exam/interface/index/Main'
import Information from '@/modules/01_exam/components/Form/Profile/Information.vue'
import Address from '@/modules/01_exam/components/Form/Profile/Address.vue'
import Family from '@/modules/01_exam/components/Form/Profile/Family.vue'
import Occupation from '@/modules/01_exam/components/Form/Profile/Occupation.vue'
import NotifyError from '@/components/NotifyError.vue'
import http from '@/plugins/http'
import config from '@/app.config'
const props = defineProps({
loader: {
//หน้า main มีการอัพเดทค่าให้ refresh data
type: Boolean,
required: true
},
statusEdit: {
type: Boolean,
required: true
},
step: {
type: Number,
required: true
}
})
const loader = ref<boolean>(true)
const statusEdit = ref<boolean>(false)
const modalNoEdit = ref<boolean>(false)
// const modalNoEditTittle = ref<string>('ยืนยันการเปลี่ยนแท็ปใช่หรือไม่?')
// const modalNoEditDetail = ref<string>(
// 'ยังมีข้อมูลที่ยังไม่ถูกบันทึก ถ้าตกลงเปลี่ยนแท็ปข้อมูลที่ยังไม่ถูกบันทึกจะหาย'
// )
const modalNoEditTittle = ref<string>('ไม่สามารถไม่สามารถแก้ไขข้อมูลได้?')
const modalNoEditDetail = ref<string>('มีข้อมูลที่ยังไม่ถูกบันทึกข้อมูล')
const prefixOptions = ref<DataOption[]>([])
const bloodOptions = ref<DataOption[]>([])
const genderOptions = ref<DataOption[]>([])
const statusOptions = ref<DataOption[]>([])
const religionOptions = ref<DataOption[]>([])
const provinceOptions = ref<DataOption[]>([])
const emit = defineEmits(['update:loader', 'update:statusEdit'])
watch(statusEdit, (count: boolean, prevCount: boolean) => {
emit('update:statusEdit', count)
})
const closeModalError = () => {
modalNoEdit.value = false
}
const notiNoEdit = () => {
modalNoEdit.value = true
}
</script>

32
src/modules/01_exam/components/Address.vue → src/modules/01_exam/components/Form/Profile/Address.vue
View file

@ -15,6 +15,7 @@
: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">
@ -254,19 +255,23 @@ 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'])
watch(edit, (count: boolean, prevCount: boolean) => {
if (props.statusEdit == true) {
edit.value = false
emit('update:statusEdit', count)
}
})
onMounted(() => {
if (props.step !== 2) {
addData.value = false
}
// fetchProvince()
// fetchDistrict(addressData.value.provinceId, '1')
// fetchDistrict(addressData.value.provinceIdC, '2')
@ -280,6 +285,19 @@ const saveData = async () => {
})
}
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 = ''

31
src/modules/01_exam/components/Family.vue → src/modules/01_exam/components/Form/Profile/Family.vue
View file

@ -8,6 +8,7 @@
: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">
@ -270,7 +271,7 @@
</q-card>
</template>
<script setup lang="ts">
import { ref, watch } from 'vue'
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'
@ -300,15 +301,22 @@ 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'])
watch(edit, (count: boolean, prevCount: boolean) => {
if (props.statusEdit == true) {
edit.value = false
emit('update:statusEdit', count)
onMounted(() => {
if (props.step !== 2) {
addData.value = false
}
})
@ -320,6 +328,19 @@ const saveData = async () => {
})
}
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 = ''

33
src/modules/01_exam/components/Information.vue → src/modules/01_exam/components/Form/Profile/Information.vue
View file

@ -8,6 +8,7 @@
: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">
@ -372,20 +373,23 @@ 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'])
watch(edit, (count: boolean, prevCount: boolean) => {
if (props.statusEdit == true) {
edit.value = false
emit('update:statusEdit', count)
}
})
onMounted(() => {
// console.log(props);
if (props.step !== 2) {
addData.value = false
}
// fetchProvince()
})
@ -397,6 +401,19 @@ const saveData = async () => {
})
}
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

31
src/modules/01_exam/components/Occupation.vue → src/modules/01_exam/components/Form/Profile/Occupation.vue
View file

@ -8,6 +8,7 @@
: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">
@ -245,20 +246,25 @@ 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'])
watch(edit, (count: boolean, prevCount: boolean) => {
if (props.statusEdit == true) {
edit.value = false
emit('update:statusEdit', count)
onMounted(() => {
if (props.step !== 2) {
addData.value = false
}
})
onMounted(() => {})
const saveData = async () => {
await myform.value.validate().then(async (success: boolean) => {
if (success) {
@ -267,6 +273,19 @@ const saveData = async () => {
})
}
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) => {

57
src/modules/01_exam/components/Profile.vue
View file

@ -1,57 +0,0 @@
<!-- tab ข้อมูลส่วนบุคคล -->
<template>
<!-- xxxxxxxx{{ statusEdit }}xxxxxxxx{{ statusEditx }} -->
<Information
:prefixOptions="prefixOptions"
:genderOptions="genderOptions"
:bloodOptions="bloodOptions"
:statusOptions="statusOptions"
:religionOptions="religionOptions"
:provinceOptions="provinceOptions"
v-model:statusEdit="statusEdit"
/>
<Address v-model:statusEdit="statusEdit" />
<Family :prefixOptions="prefixOptions" v-model:statusEdit="statusEdit" />
<Occupation v-model:statusEdit="statusEdit" />
<notifyConfirm
:modal="modalNoEdit"
:modalTittle="modalNoEditTittle"
:modalDetail="modalNoEditDetail"
:ok="closeModalNoEdit"
:cancel="closeModalCancel"
/>
</template>
<script setup lang="ts">
import { ref, onMounted } from 'vue'
import type { DataOption } from '@/modules/01_exam/interface/index/Main'
import Information from './Information.vue'
import Address from './Address.vue'
import Family from './Family.vue'
import Occupation from './Occupation.vue'
import NotifyConfirm from '@/components/NotifyConfirm.vue'
import http from '@/plugins/http'
import config from '@/app.config'
const loader = ref<boolean>(true)
const statusEdit = ref<boolean>(false)
const statusEditx = ref<boolean>(false)
const modalNoEdit = ref<boolean>(false)
const modalNoEditTittle = ref<string>('ยืนยันการเปลี่ยนแท็ปใช่หรือไม่?')
const modalNoEditDetail = ref<string>(
'ยังมีข้อมูลที่ยังไม่ถูกบันทึก ถ้าตกลงเปลี่ยนแท็ปข้อมูลที่ยังไม่ถูกบันทึกจะหาย'
)
const prefixOptions = ref<DataOption[]>([])
const bloodOptions = ref<DataOption[]>([])
const genderOptions = ref<DataOption[]>([])
const statusOptions = ref<DataOption[]>([])
const religionOptions = ref<DataOption[]>([])
const provinceOptions = ref<DataOption[]>([])
const closeModalNoEdit = () => {
modalNoEdit.value = false
}
const closeModalCancel = () => {
modalNoEdit.value = false
}
</script>

64
src/modules/01_exam/views/ExamDetail.vue
View file

@ -7,42 +7,58 @@
</q-toolbar>
<q-card flat class="">
<div class="justify-center">
<!-- done-color="deep-orange"
active-color="purple"
inactive-color="secondary" -->
<q-stepper
v-model="step"
ref="stepper"
alternative-labels
header-nav
color="primary"
animated
done-color="positive"
active-color="amber-7"
inactive-color="positive"
>
<q-step :done="step > 1" :name="1" title="อ่านคำชี้แจง" icon="edit" done-color="positive">
<ExamDetail />
<q-step
:done="step > 1"
:disable="stepRaw < 1"
:name="1"
title="อ่านคำชี้แจง"
:icon="stepRaw >= 1 ? 'check' : 'edit'"
>
<ExamDetail :fetchStep="fetchStep" :step="stepRaw" />
</q-step>
<q-step :done="step > 2" :name="2" title="กรอกข้อมูล" icon="edit" done-color="positive">
<ExamForm />
<q-step
:done="step > 2"
:disable="stepRaw < 2"
:name="2"
title="กรอกข้อมูล"
:icon="stepRaw >= 2 ? 'check' : 'edit'"
>
<ExamForm :fetchStep="fetchStep" :step="stepRaw" />
</q-step>
<q-step
:done="step > 3"
:disable="stepRaw < 3"
:name="3"
title="ชำระค่าธรรมเนียมการสอบ"
icon="edit"
done-color="positive"
:icon="stepRaw >= 3 ? 'check' : 'edit'"
>
<ExamPayment />
<ExamPayment :fetchStep="fetchStep" :step="stepRaw" />
</q-step>
<q-step :done="step > 4" :name="4" title="สำเร็จ" icon="edit" done-color="positive">
<ExamFinished />
<q-step
:done="step > 4"
:disable="stepRaw < 4"
:name="4"
title="สำเร็จ"
:icon="stepRaw >= 4 ? 'check' : 'edit'"
>
<ExamFinished :fetchStep="fetchStep" :step="stepRaw" />
</q-step>
</q-stepper>
</div>
</q-card>
<notifyConfirm
:modal="modalConfirm"
:modalTittle="modalConfirmTittle"
:modalDetail="modalConfirmDetail"
:ok="closeModalConfirm"
:cancel="closeModalCancel"
/>
</template>
<script setup lang="ts">
@ -51,7 +67,6 @@ import ExamDetail from '@/modules/01_exam/components/ExamDetail.vue'
import ExamForm from '@/modules/01_exam/components/ExamForm.vue'
import ExamPayment from '@/modules/01_exam/components/ExamPayment.vue'
import ExamFinished from '@/modules/01_exam/components/ExamFinished.vue'
import NotifyConfirm from '@/components/NotifyConfirm.vue'
const examId = ref<string>('zxc')
const step = ref<number>(1)
@ -60,11 +75,6 @@ const examPost = ref<any>()
const test = ref<any>()
const loading = ref<boolean>(false)
const tittle = ref<string>('การสอบภาค ข. พิเศษ สำหรับผู้สอบผ่านของส่วนราชการแล้ว')
const modalConfirm = ref<boolean>(true)
const modalConfirmTittle = ref<string>('ยืนยันการเปลี่ยนแท็ปใช่หรือไม่?')
const modalConfirmDetail = ref<string>(
'ยังมีข้อมูลที่ยังไม่ถูกบันทึก ถ้าตกลงเปลี่ยนแท็ปข้อมูลที่ยังไม่ถูกบันทึกจะหาย'
)
onMounted(() => {
loadCandidate()
@ -104,10 +114,8 @@ const fetchExams = () => {
// .finally(() => (this.loading = false))
}
const closeModalConfirm = () => {
modalConfirm.value = false
}
const closeModalCancel = () => {
modalConfirm.value = false
const fetchStep = () => {
stepRaw.value += 1
step.value += 1
}
</script>