ลบ 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

@ -19,7 +19,7 @@
:color="!next ? 'grey-7' : 'public'"
/>
<q-space />
<div v-if="editBtn">
<div v-if="editData">
<q-btn
v-if="!editvisible"
flat
@ -66,7 +66,7 @@ const props = defineProps({
next: Boolean,
previous: Boolean,
modalEdit: Boolean,
editBtn: {
editData: {
type: Boolean,
default: true
},

View file

@ -1,9 +1,5 @@
<template>
<q-dialog
:model-value="modalError"
persistent
@update:model-value="updateClose"
>
<q-dialog :model-value="modalError" persistent @update:model-value="updateClose">
<q-card class="q-pa-sm">
<q-card-section class="row items-center">
<div class="q-pr-md">
@ -16,25 +12,20 @@
/>
</div>
<div class="col text-dark">
<span class="text-bold">{{ modalErrorTittle }}</span>
<span class="text-bold text-red">{{ modalErrorTittle }}</span>
<br />
<span>{{ modalErrorDetail }}</span>
</div>
</q-card-section>
<q-card-actions align="right" class="bg-white text-teal">
<q-btn
label="ตกลง"
color="primary"
@click="updateClose"
v-close-popup
/>
<q-btn label="ตกลง" color="primary" @click="updateClose" v-close-popup />
</q-card-actions>
</q-card>
</q-dialog>
</template>
<script setup lang="ts">
import { ref, useAttrs } from "vue";
import { ref, useAttrs } from 'vue'
const props = defineProps({
modalError: Boolean,
@ -42,22 +33,22 @@ const props = defineProps({
modalErrorDetail: String,
close: {
type: Function,
default: () => console.log("not function"),
},
});
default: () => console.log('not function')
}
})
const emit = defineEmits([
"update:modalError",
"update:modalErrorTittle",
"update:modalErrorDetail",
]);
'update:modalError',
'update:modalErrorTittle',
'update:modalErrorDetail'
])
const updateClose = () => {
emit("update:modalError", false);
emit("update:modalErrorTittle", "");
emit("update:modalErrorDetail", "");
props.close();
};
emit('update:modalError', false)
emit('update:modalErrorTittle', '')
emit('update:modalErrorDetail', '')
props.close()
}
</script>
<style lang="scss">
.icon-color {

View file

@ -8,8 +8,9 @@
:add="clickAdd"
:editBtn="clickEdit"
:cancel="clickCancel"
:history="false"
:addData="false"
:editOnly="false"
:editData="editData"
/>
<!-- v-if="nameHeader" -->
<!-- <div class="q-pl-sm">
@ -126,6 +127,11 @@ const props = defineProps({
validate: {
type: Function,
default: () => console.log('not function')
},
editData: {
type: Boolean,
defualt: true,
required: true
}
})

View file

@ -6,81 +6,79 @@
{{ header }}
</div>
</div>
<div class="q-gutter-sm q-mx-sm" v-if="addData == true">
<q-btn
size="12px"
v-if="!edit"
flat
round
:disabled="edit"
:color="edit ? 'grey-7' : 'primary'"
@click="ClickEdit"
icon="mdi-pencil-outline"
>
<q-tooltip>แกไขขอม</q-tooltip>
</q-btn>
<q-btn
size="12px"
flat
round
v-if="edit"
:disabled="!edit"
:color="!edit ? 'grey-7' : 'public'"
@click="save"
icon="mdi-content-save-outline"
>
<q-tooltip>นทกขอม</q-tooltip>
</q-btn>
<q-btn
size="12px"
flat
round
v-if="edit"
:disabled="!edit"
:color="!edit ? 'grey-7' : 'red'"
@click="ClickCancel"
icon="mdi-undo"
>
<q-tooltip>ยกเล</q-tooltip>
</q-btn>
</div>
<div class="q-pl-sm" v-else>
<q-btn
size="12px"
v-if="!edit"
flat
round
:disabled="edit"
:color="edit ? 'grey-7' : 'primary'"
@click="ClickEdit"
icon="mdi-pencil-outline"
>
<q-tooltip>แกไขขอม</q-tooltip>
</q-btn>
<q-btn
size="12px"
flat
round
v-if="edit"
:disabled="!edit"
:color="!edit ? 'grey-7' : 'add'"
@click="add"
icon="mdi-plus"
>
<q-tooltip>เพมขอม</q-tooltip>
</q-btn>
<q-btn
size="12px"
flat
round
v-if="edit"
:disabled="!edit"
:color="!edit ? 'grey-7' : 'red'"
@click="ClickCancel"
icon="mdi-undo"
>
<q-tooltip>ยกเล</q-tooltip>
</q-btn>
<div v-if="editData == true">
<div class="q-gutter-sm q-mx-sm" v-if="addData == true">
<q-btn
size="12px"
v-if="!edit"
flat
round
:disabled="disable"
:color="edit ? 'grey-7' : 'primary'"
@click="ClickEdit"
icon="mdi-pencil-outline"
>
<q-tooltip>แกไขขอม</q-tooltip>
</q-btn>
<q-btn
size="12px"
flat
round
v-if="edit && !editOnly"
:color="!edit ? 'grey-7' : 'public'"
@click="save"
icon="mdi-content-save-outline"
>
<q-tooltip>นทกขอม</q-tooltip>
</q-btn>
<q-btn
size="12px"
flat
round
v-if="edit"
:color="!edit ? 'grey-7' : 'red'"
@click="ClickCancel"
icon="mdi-undo"
>
<q-tooltip>ยกเล</q-tooltip>
</q-btn>
</div>
<div class="q-pl-sm" v-else>
<q-btn
size="12px"
v-if="!edit"
flat
round
:disabled="disable"
:color="edit ? 'grey-7' : 'primary'"
@click="ClickEdit"
icon="mdi-pencil-outline"
>
<q-tooltip>แกไขขอม</q-tooltip>
</q-btn>
<q-btn
size="12px"
flat
round
v-if="edit && !editOnly"
:color="!edit ? 'grey-7' : 'add'"
@click="add"
icon="mdi-plus"
>
<q-tooltip>เพมขอม</q-tooltip>
</q-btn>
<q-btn
size="12px"
flat
round
v-if="edit"
:color="!edit ? 'grey-7' : 'red'"
@click="ClickCancel"
icon="mdi-undo"
>
<q-tooltip>ยกเล</q-tooltip>
</q-btn>
</div>
</div>
<q-space />
</div>
@ -104,7 +102,22 @@ const props = defineProps({
},
addData: {
type: Boolean,
defualt: true
defualt: true,
required: true
},
editData: {
type: Boolean,
defualt: true,
required: true
},
editOnly: {
type: Boolean,
defualt: false,
required: true
},
disable: {
type: Boolean,
defualt: false
},
add: {
type: Function,

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)

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(() => {})

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 {

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(() => {})

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')

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) => {

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()
})

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) => {

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)