ลบ tab คำชี้แจง

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

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)