144 lines
4.6 KiB
Vue
144 lines
4.6 KiB
Vue
<!-- page:detail page รายการสอบทั้งหมด -->
|
|
<template>
|
|
<q-toolbar class="q-py-sm q-px-md bg-grey-2">
|
|
<q-toolbar-title class="toptitle text-dark col-12 row items-center">
|
|
{{ tittle }}
|
|
<q-space />
|
|
<q-btn color="primary" label="ออกจากระบบ" push size="sm" v-close-popup @click="doLogout" />
|
|
</q-toolbar-title>
|
|
</q-toolbar>
|
|
<q-card flat class="">
|
|
<div class="justify-center">
|
|
<q-stepper
|
|
class="col-2"
|
|
v-model="step"
|
|
ref="stepper"
|
|
alternative-labels
|
|
header-nav
|
|
animated
|
|
done-color="positive"
|
|
active-color="blue-7"
|
|
inactive-color="positive"
|
|
done-icon="mdi-check-bold"
|
|
:active-icon="stepRaw === step && stepRaw != 4 ? 'mdi-pencil' : 'mdi-eye-outline'"
|
|
>
|
|
<!-- <q-step
|
|
:done="step > 1"
|
|
:disable="stepRaw < 1"
|
|
:name="1"
|
|
title="อ่านคำชี้แจง"
|
|
:icon="
|
|
stepRaw >= 1 ? (stepRaw == 1 ? 'mdi-pencil' : 'mdi-check-bold') : 'mdi-pencil'
|
|
"
|
|
>
|
|
<ExamDetail :fetchStep="fetchStep" :step="stepRaw" />
|
|
</q-step> -->
|
|
<q-step
|
|
:done="step > 2"
|
|
:disable="stepRaw < 2"
|
|
:name="2"
|
|
title="ข้อมูลสมัครสอบ"
|
|
:icon="stepRaw >= 2 ? (stepRaw == 2 ? 'mdi-pencil' : 'mdi-check-bold') : 'mdi-pencil'"
|
|
>
|
|
<ExamForm :fetchStep="fetchStep" :step="stepRaw" />
|
|
</q-step>
|
|
<q-step
|
|
:done="step > 3"
|
|
:disable="stepRaw < 3"
|
|
:name="3"
|
|
title="ชำระค่าธรรมเนียมการสอบ"
|
|
:icon="stepRaw >= 3 ? (stepRaw == 3 ? 'mdi-pencil' : 'mdi-check-bold') : 'mdi-pencil'"
|
|
>
|
|
<ExamPayment :fetchStep="fetchStep" :step="stepRaw" />
|
|
</q-step>
|
|
<q-step
|
|
:done="step > 4"
|
|
:disable="stepRaw < 4"
|
|
:name="4"
|
|
title="สำเร็จ"
|
|
:icon="stepRaw >= 4 ? (stepRaw == 4 ? 'mdi-pencil' : 'mdi-check-bold') : 'mdi-pencil'"
|
|
>
|
|
<ExamFinished :fetchStep="fetchStep" :step="stepRaw" />
|
|
</q-step>
|
|
</q-stepper>
|
|
</div>
|
|
</q-card>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { onMounted, ref } from 'vue'
|
|
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 keycloak from '@/plugins/keycloak'
|
|
import { useQuasar } from 'quasar'
|
|
|
|
const $q = useQuasar()
|
|
const examId = ref<string>('zxc')
|
|
const step = ref<number>(2)
|
|
const stepRaw = ref<number>(2)
|
|
const examPost = ref<any>()
|
|
const test = ref<any>()
|
|
const loading = ref<boolean>(false)
|
|
const tittle = ref<string>('การสอบภาค ข. พิเศษ สำหรับผู้สอบผ่านของส่วนราชการแล้ว ทดสอบ')
|
|
|
|
onMounted(() => {
|
|
loadCandidate()
|
|
fetchExams()
|
|
})
|
|
|
|
const loadCandidate = () => {
|
|
// this.loader = true
|
|
// this.$http
|
|
// .get(this.$config.API.getCandidateCurrentStep(this.examId, this.$keycloak.tokenParsed.sub))
|
|
// .then((res) => {
|
|
// this.step = res.data.items
|
|
// this.stepRaw = res.data.items
|
|
// })
|
|
// .catch((e) => {
|
|
// this.step = 1
|
|
// })
|
|
// .finally(() => {
|
|
// this.loader = false
|
|
// })
|
|
}
|
|
|
|
const fetchExams = () => {
|
|
// const headers = { 'Content-Type': 'application/graphql' }
|
|
// this.loading = true
|
|
// this.$http
|
|
// .post(
|
|
// this.$config.API.getOrchardPath(),
|
|
// this.$config.API.getExamPostsForExamDetailQuery(this.$route.params.examId),
|
|
// { headers }
|
|
// )
|
|
// .then((response) => {
|
|
// this.examPost = response.data.data.examPost[0]
|
|
// this.test = this.examPost.bag.contentItems
|
|
// })
|
|
// .catch((err) => console.log(err))
|
|
// .finally(() => (this.loading = false))
|
|
}
|
|
|
|
const fetchStep = () => {
|
|
stepRaw.value += 1
|
|
step.value += 1
|
|
}
|
|
|
|
/**
|
|
* logout keycloak
|
|
* confirm ก่อนออกจากระบบ
|
|
*/
|
|
const doLogout = () => {
|
|
$q.dialog({
|
|
title: 'ยืนยันการออกจากระบบ',
|
|
message: `ต้องการออกจากระบบใช้หรือไม่?`,
|
|
cancel: 'ยกเลิก',
|
|
ok: 'ยืนยัน',
|
|
persistent: true
|
|
}).onOk(() => {
|
|
keycloak.logout()
|
|
})
|
|
}
|
|
</script>
|