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-21 12:06:30 +07:00
parent 302354b3de
commit cc6a672000
13 changed files with 205 additions and 218 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,46 +1,51 @@
<!-- step กรอกข้อมูล -->
<template>
<div>
<q-tabs
v-model="tab"
dense
class=""
active-color="primary"
indicator-color="primary"
align="justify"
@update:model-value="changeTab"
>
<q-tab name="profile" label="ข้อมูลส่วนบุคคล" />
<q-tab name="education" label="ประวัติการศีกษา" />
<q-tab name="career" label="ประวัติการทำงาน/ฝึกงาน" />
<q-tab name="document" label="เอกสาร" />
</q-tabs>
<q-tab-panels v-model="tab" animated class="bg-white">
<!-- ข้อมูลส่วนบุคคล -->
<q-tab-panel name="profile">
<Profile :loader="loader" v-model:statusEdit="statusEdit" :step="step" />
</q-tab-panel>
<q-splitter v-model="splitterModel" style="height: 500px">
<template v-slot:before>
<q-tab-panels
v-model="tab"
animated
swipeable
vertical
transition-prev="jump-up"
transition-next="jump-up"
>
<!-- ข้อมูลส่วนบุคคล -->
<q-tab-panel name="profile">
<Profile :loader="loader" v-model:statusEdit="statusEdit" :step="step" />
</q-tab-panel>
<!-- ประวัติการศีกษา -->
<q-tab-panel name="education"
><Education :loader="loader" v-model:statusEdit="statusEdit" :step="step"
/></q-tab-panel>
<!-- ประวัติการศีกษา -->
<q-tab-panel name="education"
><Education :loader="loader" v-model:statusEdit="statusEdit" :step="step"
/></q-tab-panel>
<!-- ประวัติการทำงาน/ฝึกงาน -->
<q-tab-panel name="career"
><Career :loader="loader" v-model:statusEdit="statusEdit" :step="step"
/></q-tab-panel>
<!-- ประวัติการทำงาน/ฝึกงาน -->
<q-tab-panel name="career"
><Career :loader="loader" v-model:statusEdit="statusEdit" :step="step"
/></q-tab-panel>
<!-- ไฟล์ -->
<q-tab-panel name="document">
<Document :loader="loader" v-model:statusEdit="statusEdit" :step="step" />
</q-tab-panel>
</q-tab-panels>
<!-- ไฟล์ -->
<q-tab-panel name="document">
<Document :loader="loader" v-model:statusEdit="statusEdit" :step="step" />
</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>
<div>
<q-checkbox
v-model="acceptTermOfUse"
:disable="step !== 2"
:disable="step !== 2 || statusEdit"
v-if="step !== 2 || tab == 'document'"
label="ข้าพเจ้ารับรองว่า ข้าพเจ้ามีคุณสมบัติครบถ้วนตามประกาศรับสมัคร ข้อความข้างต้นตรงตามความจริงทุกประการ"
/>
@ -54,6 +59,7 @@
@click="clickPreview(tab)"
v-if="step === 2 && (tab == 'education' || tab == 'career' || tab == 'document')"
icon="mdi-chevron-left"
:disable="statusEdit"
/>
<q-btn
color="primary"
@ -62,6 +68,7 @@
@click="clickNext(tab)"
v-if="step === 2 && (tab == 'profile' || tab == 'education' || tab == 'career')"
icon-right="mdi-chevron-right"
:disable="statusEdit"
/>
<q-btn
color="primary"
@ -69,7 +76,7 @@
label="สมัครสอบ"
@click="okModalComfirm"
v-if="step === 2 && tab == 'document'"
:disable="!acceptTermOfUse"
:disable="!acceptTermOfUse || statusEdit"
/>
</div>
</div>
@ -109,6 +116,7 @@ const props = defineProps({
})
const tab = ref<string>('profile')
const splitterModel = ref<number>(90)
const tabRaw = ref<string>('profile')
const loader = ref<boolean>(false)
const statusEdit = ref<boolean>(false)

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

@ -13,8 +13,10 @@
:add="clickAdd"
:edit="clickEdit"
:cancel="clickCancel"
:nameHeader="false"
:addData="addData"
:addData="false"
:editData="step == 2"
name="ประวัติการทำงาน/ฝึกงาน"
icon="mdi-briefcase"
>
<template #columns="props">
<q-tr :props="props">
@ -166,7 +168,7 @@
:validate="validateData"
:clickNext="clickNext"
:clickPrevious="clickPrevious"
:editBtn="addData"
:editData="step == 2"
v-model:editvisible="edit"
v-model:next="next"
v-model:previous="previous"
@ -236,8 +238,6 @@ 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
const modalErrorDetail = ref<string>('') // detail modal error
@ -341,10 +341,6 @@ watch(edit, (count: boolean, prevCount: boolean) => {
onMounted(async () => {
// await fetchData()
rawHistory.value = rows.value
if (props.step !== 2) {
addData.value = false
}
})
const fetchData = async () => {}
@ -437,6 +433,7 @@ const clickDeleteRow = (row: RequestItemsObject) => {
})
.onOk(() => {
rows.value = rows.value.filter((val: any) => val.id != row.id)
edit.value = false
})
.onCancel(() => {})
.onDismiss(() => {})

16
src/modules/01_exam/components/Form/Document.vue
View file

@ -1,13 +1,14 @@
<!-- card เอกสารหลักฐาน -->
<!-- card อัปโหลดเอกสาร -->
<template>
<q-card flat bordered class="col-12 q-px-lg q-py-md">
<HeaderTop
v-model:edit="edit"
header="เอกสารหลักฐาน(เช่น สำเนาบัตรประชาชน ทะเบียนบ้าน วุฒิการศึกษา)"
header="อัปโหลดเอกสาร(เช่น สำเนาบัตรประชาชน ทะเบียนบ้าน วุฒิการศึกษา)"
icon="mdi-file-document"
:history="false"
:addData="addData"
:addData="true"
:editOnly="true"
:cancel="cancelData"
:editData="step == 2"
/>
<div class="row col-12 q-gutter-sm q-pt-sm">
<q-card bordered flat class="full-width">
@ -95,7 +96,6 @@ const props = defineProps({
})
const edit = ref<boolean>(false)
const addData = ref<boolean>(true)
const name = ref<string>('')
const files = ref<any>([
{
@ -117,11 +117,7 @@ watch(edit, (count: boolean, prevCount: boolean) => {
emit('update:statusEdit', count)
})
onMounted(async () => {
if (props.step !== 2) {
addData.value = false
}
})
onMounted(async () => {})
const fileUpload = async (file: any) => {
return {

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

@ -13,8 +13,10 @@
:add="clickAdd"
:edit="clickEdit"
:cancel="clickCancel"
:nameHeader="false"
:addData="addData"
:addData="false"
:editData="step == 2"
name="ประวัติการศีกษา"
icon="mdi-school"
>
<template #columns="props">
<q-tr :props="props">
@ -167,7 +169,7 @@
:validate="validateData"
:clickNext="clickNext"
:clickPrevious="clickPrevious"
:editBtn="addData"
:editData="step == 2"
v-model:editvisible="edit"
v-model:next="next"
v-model:previous="previous"
@ -240,8 +242,6 @@ 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
const modalErrorDetail = ref<string>('') // detail modal error
@ -347,10 +347,6 @@ watch(edit, (count: boolean, prevCount: boolean) => {
onMounted(async () => {
// await fetchData()
// await fetchQualification()
rawHistory.value = rows.value
if (props.step !== 2) {
addData.value = false
}
})
const fetchQualification = async () => {
@ -464,6 +460,7 @@ const clickDeleteRow = (row: RequestItemsObject) => {
})
.onOk(() => {
rows.value = rows.value.filter((val: any) => val.id != row.id)
edit.value = false
})
.onCancel(() => {})
.onDismiss(() => {})

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

@ -1,21 +1,17 @@
<!-- 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"
:addData="true"
:editOnly="false"
:cancel="cancelData"
:changeBtn="changeBtn"
:editData="step == 2"
:disable="statusEdit"
/>
<q-form ref="myform">
<div class="row col-12 items-center q-col-gutter-x-xs q-col-gutter-y-xs">
@ -239,7 +235,6 @@ 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>('')
@ -269,9 +264,6 @@ const props = defineProps({
const emit = defineEmits(['update:statusEdit'])
onMounted(() => {
if (props.step !== 2) {
addData.value = false
}
// fetchProvince()
// fetchDistrict(addressData.value.provinceId, '1')
// fetchDistrict(addressData.value.provinceIdC, '2')

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

@ -6,9 +6,12 @@
header="ข้อมูลครอบครัว"
icon="mdi-account-group"
:save="saveData"
:addData="addData"
:addData="true"
:editOnly="false"
:cancel="cancelData"
:changeBtn="changeBtn"
:editData="step == 2"
:disable="statusEdit"
/>
<q-form ref="myform" class="col-12">
<div class="row col-12 items-center q-col-gutter-x-xs q-col-gutter-y-xs">
@ -282,7 +285,6 @@ 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[]>([])
@ -314,11 +316,7 @@ const props = defineProps({
const emit = defineEmits(['update:statusEdit'])
onMounted(() => {
if (props.step !== 2) {
addData.value = false
}
})
onMounted(() => {})
const saveData = async () => {
await myform.value.validate().then(async (success: boolean) => {

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

@ -6,9 +6,12 @@
header="ข้อมูลส่วนตัว"
icon="mdi-account"
:save="saveData"
:addData="addData"
:addData="true"
:editOnly="false"
:cancel="cancelData"
:changeBtn="changeBtn"
:editData="step == 2"
:disable="statusEdit"
/>
<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">
@ -303,11 +306,11 @@
borderless
v-model="fileData"
stack-label
:readonly="!edit"
:readonly="statusEdit"
@update:model-value="pickFile"
>
<q-img src="@/assets/avatar_user.jpg" class="col-12">
<div class="overlay" v-if="edit">
<div class="overlay" v-if="!statusEdit">
<q-icon name="mdi-camera" />
<br />อัปเดต
</div>
@ -338,7 +341,6 @@ 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>()
@ -387,9 +389,6 @@ const props = defineProps({
const emit = defineEmits(['update:statusEdit'])
onMounted(() => {
if (props.step !== 2) {
addData.value = false
}
// fetchProvince()
})

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

@ -6,9 +6,12 @@
header="อาชีพ"
icon="mdi-briefcase"
:save="saveData"
:addData="addData"
:addData="true"
:editOnly="false"
:cancel="cancelData"
:changeBtn="changeBtn"
:editData="step == 2"
:disable="statusEdit"
/>
<q-form ref="myform">
<div class="row col-12 items-center q-col-gutter-x-xs q-col-gutter-y-xs">
@ -238,7 +241,6 @@ 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>()
@ -259,11 +261,7 @@ const props = defineProps({
const emit = defineEmits(['update:statusEdit'])
onMounted(() => {
if (props.step !== 2) {
addData.value = false
}
})
onMounted(() => {})
const saveData = async () => {
await myform.value.validate().then(async (success: boolean) => {

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

@ -9,10 +9,8 @@
</q-toolbar>
<q-card flat class="">
<div class="justify-center">
<!-- done-color="deep-orange"
active-color="purple"
inactive-color="secondary" -->
<q-stepper
class="col-2"
v-model="step"
ref="stepper"
alternative-labels
@ -21,28 +19,26 @@
done-color="positive"
active-color="blue-7"
inactive-color="positive"
done-icon="check"
:active-icon="stepRaw === step && stepRaw != 4 ? 'mdi-pencil-outline' : 'mdi-eye-outline'"
done-icon="mdi-check-bold"
:active-icon="stepRaw === step && stepRaw != 4 ? 'mdi-pencil' : 'mdi-eye-outline'"
>
<q-step
<!-- <q-step
:done="step > 1"
:disable="stepRaw < 1"
:name="1"
title="อ่านคำชี้แจง"
:icon="
stepRaw >= 1 ? (stepRaw == 1 ? 'mdi-pencil-outline' : 'check') : 'mdi-pencil-outline'
stepRaw >= 1 ? (stepRaw == 1 ? 'mdi-pencil' : 'mdi-check-bold') : 'mdi-pencil'
"
>
<ExamDetail :fetchStep="fetchStep" :step="stepRaw" />
</q-step>
</q-step> -->
<q-step
:done="step > 2"
:disable="stepRaw < 2"
:name="2"
title="ข้อมูลสมัครสอบ"
:icon="
stepRaw >= 2 ? (stepRaw == 2 ? 'mdi-pencil-outline' : 'check') : 'mdi-pencil-outline'
"
:icon="stepRaw >= 2 ? (stepRaw == 2 ? 'mdi-pencil' : 'mdi-check-bold') : 'mdi-pencil'"
>
<ExamForm :fetchStep="fetchStep" :step="stepRaw" />
</q-step>
@ -51,9 +47,7 @@
:disable="stepRaw < 3"
:name="3"
title="ชำระค่าธรรมเนียมการสอบ"
:icon="
stepRaw >= 3 ? (stepRaw == 3 ? 'mdi-pencil-outline' : 'check') : 'mdi-pencil-outline'
"
:icon="stepRaw >= 3 ? (stepRaw == 3 ? 'mdi-pencil' : 'mdi-check-bold') : 'mdi-pencil'"
>
<ExamPayment :fetchStep="fetchStep" :step="stepRaw" />
</q-step>
@ -62,9 +56,7 @@
:disable="stepRaw < 4"
:name="4"
title="สำเร็จ"
:icon="
stepRaw >= 4 ? (stepRaw == 4 ? 'mdi-pencil-outline' : 'check') : 'mdi-pencil-outline'
"
:icon="stepRaw >= 4 ? (stepRaw == 4 ? 'mdi-pencil' : 'mdi-check-bold') : 'mdi-pencil'"
>
<ExamFinished :fetchStep="fetchStep" :step="stepRaw" />
</q-step>
@ -84,8 +76,8 @@ import { useQuasar } from 'quasar'
const $q = useQuasar()
const examId = ref<string>('zxc')
const step = ref<number>(1)
const stepRaw = ref<number>(1)
const step = ref<number>(2)
const stepRaw = ref<number>(2)
const examPost = ref<any>()
const test = ref<any>()
const loading = ref<boolean>(false)