341 lines
10 KiB
Vue
341 lines
10 KiB
Vue
<!-- page:detail page รายการสอบทั้งหมด -->
|
|
<template>
|
|
<q-toolbar class="q-pa-sm text-center">
|
|
<div class="text-dark row col-12 text-h6 q-px-md">
|
|
<div class="col-12">
|
|
{{ tittle }}
|
|
{{ `ครั้งที่${round}/${yearly == null ? '' : yearly + 543}` }}
|
|
</div>
|
|
<div class="col-12">{{ position }} ระดับ{{ positionLevel }}</div>
|
|
</div>
|
|
</q-toolbar>
|
|
<!-- <q-toolbar class="q-pa-sm text-center">
|
|
<q-toolbar-title class="text-dark">
|
|
{{ tittle }}
|
|
{{ `ครั้งที่${round}/${yearly == null ? '' : yearly + 543}` }}
|
|
</q-toolbar-title>
|
|
</q-toolbar> -->
|
|
<q-stepper
|
|
v-model="step"
|
|
ref="stepper"
|
|
alternative-labels
|
|
header-nav
|
|
animated
|
|
done-icon="check"
|
|
:active-icon="stepRaw === step && stepRaw != 4 ? 'mdi-pencil' : 'mdi-eye'"
|
|
>
|
|
<q-step
|
|
:done="step > 2"
|
|
:disable="stepRaw < 2"
|
|
:name="2"
|
|
title="ข้อมูลสมัครสอบ"
|
|
:icon="stepRaw >= 2 ? (stepRaw == 2 ? 'mdi-pencil' : 'mdi-check-bold') : 'mdi-account'"
|
|
>
|
|
<q-card bordered class="q-pa-lg">
|
|
<q-card-actions
|
|
v-if="status === 'rejectRegister'"
|
|
class="q-pa-md q-mb-md text-left row bg-red-2"
|
|
>
|
|
<div class="col-12 text-red-12">
|
|
<li>{{ rejectMessage }}</li>
|
|
</div>
|
|
</q-card-actions>
|
|
<ExamForm
|
|
:fetchStep="fetchStep"
|
|
:status="status"
|
|
:editorConfirm="editorConfirm"
|
|
:position="position"
|
|
:positionLevel="positionLevel"
|
|
/>
|
|
</q-card>
|
|
</q-step>
|
|
<q-step
|
|
:done="step > 3"
|
|
:disable="stepRaw < 3"
|
|
:name="3"
|
|
title="ชำระค่าธรรมเนียม"
|
|
:icon="stepRaw >= 3 ? (stepRaw == 3 ? 'mdi-pencil' : 'mdi-check-bold') : 'mdi-receipt'"
|
|
v-if="stepPayment"
|
|
>
|
|
<q-card bordered class="q-pa-lg">
|
|
<ExamPayment :fetchStep="fetchStep" :status="status" />
|
|
</q-card>
|
|
</q-step>
|
|
<q-step
|
|
:done="step > 4"
|
|
:disable="stepRaw < 4"
|
|
:name="4"
|
|
title="สำเร็จ"
|
|
:icon="stepRaw >= 4 ? 'mdi-check-bold' : 'mdi-flag-variant'"
|
|
>
|
|
<q-card bordered class="q-pa-lg">
|
|
<ExamFinished :fetchStep="fetchStep" :status="status" />
|
|
</q-card>
|
|
</q-step>
|
|
</q-stepper>
|
|
<q-dialog :model-value="modalConsend" persistent>
|
|
<q-card :style="$q.screen.gt.xs ? 'min-width: 50vw' : 'min-width: 80vw'">
|
|
<Consendform :ok="consendOk" :editorCondition="editorCondition" />
|
|
</q-card>
|
|
</q-dialog>
|
|
<q-dialog :model-value="timeout" persistent>
|
|
<q-card :style="$q.screen.gt.xs ? 'min-width: 30vw' : 'min-width: 80vw'" class="q-pa-sm">
|
|
<q-card-section class="row items-center col-12">
|
|
<div class="column col-12 text-center">
|
|
<div><q-icon name="mdi-alert-outline" size="50px" :color="isBeforeToday && timeout ? 'amber-7':'pink'" /></div>
|
|
|
|
<div :class="isBeforeToday && timeout ? 'text-bold text-amber-7 text-subtitle1 q-mb-md':'text-bold text-pink text-subtitle1 q-mb-md'">{{isBeforeToday && timeout ? 'ยังไม่ถึงรอบรับสมัครสอบ':'หมดเขตรับสมัครสอบ'}} !</div>
|
|
{{`ไม่สามารถทำรายการได้ ${isBeforeToday && timeout ? 'เนื่องจากยังไม่ถึงรอบรับสมัครสอบ':'เนื่องจากหมดเขตรับสมัครแล้ว'}`}}
|
|
<!-- {{ dateThaiRange([registerEndDate, registerStartDate]) }} -->
|
|
</div>
|
|
</q-card-section>
|
|
<q-card-actions align="right" class="bg-white text-teal justify-center">
|
|
<q-btn label="ตกลง" unelevated color="primary" style="width: 200px" @click="logout" />
|
|
</q-card-actions>
|
|
</q-card>
|
|
</q-dialog>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { onMounted, ref } from 'vue'
|
|
import { useRoute } from 'vue-router'
|
|
import { useCounterMixin } from '@/stores/mixin'
|
|
import { useDataStore } from '@/stores/data'
|
|
import { useQuasar } from 'quasar'
|
|
import { useExamDataStore } from '@/modules/01_exam/store'
|
|
import http from '@/plugins/http'
|
|
import config from '@/app.config'
|
|
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 Consendform from '@/modules/01_exam/components/Consendform.vue'
|
|
import keycloak from '@/plugins/keycloak'
|
|
|
|
const $q = useQuasar()
|
|
const storeExam = useExamDataStore()
|
|
const mixin = useCounterMixin()
|
|
const { modalError, messageError, dateThaiRange, dateToISO } = mixin
|
|
const dataStore = useDataStore()
|
|
const { loaderPage } = dataStore
|
|
const step = ref<number>(1)
|
|
const stepRaw = ref<number>(1)
|
|
const isBeforeToday = ref<boolean>(false)
|
|
const tittle = ref<string>('')
|
|
const position = ref<string>('')
|
|
const positionLevel = ref<string>('')
|
|
const route = useRoute()
|
|
const examId = ref<string>(route.params.id.toString())
|
|
const positionId = ref<string>(route.params.positionId.toString())
|
|
const status = ref<string>('register')
|
|
const modalConsend = ref<boolean>(false)
|
|
const stepPayment = ref<boolean>(true)
|
|
const timeout = ref<boolean>(false)
|
|
const rejectMessage = ref<string>('')
|
|
const round = ref<number | null>(null)
|
|
const yearly = ref<number | null>(null)
|
|
const editorCondition = ref<string>(``)
|
|
const editorConfirm = ref<string>(``)
|
|
const registerStartDate = ref<Date>(new Date())
|
|
const registerEndDate = ref<Date>(new Date())
|
|
|
|
onMounted(async () => {
|
|
await fetchPeriodExam()
|
|
await candidateCheck()
|
|
})
|
|
|
|
const candidateCheck = async () => {
|
|
loaderPage(true)
|
|
await http
|
|
.get(config.API.candidateCheckCreate(examId.value, positionId.value))
|
|
.then(async (res) => {
|
|
const data = res.data.result
|
|
storeExam.consend = data.consend
|
|
editorCondition.value = data.editorCondition
|
|
editorConfirm.value = data.editorConfirm
|
|
const positionExam = data.positionExam
|
|
stepPayment.value = data.payment
|
|
if (
|
|
positionId.value != '00000000-0000-0000-0000-000000000000' &&
|
|
positionExam != null &&
|
|
positionExam.id != positionId.value &&
|
|
data.status != 'register' &&
|
|
data.status != 'rejectRegister'
|
|
) {
|
|
modalError(
|
|
$q,
|
|
'คุณได้สมัครสอบตำแหน่งอื่นในรอบนี้แล้ว',
|
|
'คุณได้สมัครสอบตำแหน่งอื่นในรอบนี้แล้ว',
|
|
logout
|
|
)
|
|
} else {
|
|
if (storeExam.consend == true) {
|
|
await fetchStep()
|
|
} else {
|
|
if (data.canRegister == true) {
|
|
modalConsend.value = true
|
|
stepRaw.value = 2
|
|
step.value = 2
|
|
isBeforeToday.value = false
|
|
} else {
|
|
isBeforeToday.value = dateToISO(data.registerEndDate) > dateToISO(new Date())
|
|
registerStartDate.value = new Date(data.registerStartDate)
|
|
registerEndDate.value = new Date(data.registerEndDate)
|
|
timeout.value = true
|
|
}
|
|
}
|
|
}
|
|
})
|
|
.catch((e) => {
|
|
messageError($q, e)
|
|
})
|
|
.finally(() => {
|
|
loaderPage(false)
|
|
})
|
|
}
|
|
|
|
const closeWindow = async () => {
|
|
// window.close()
|
|
}
|
|
|
|
const fetchStep = async () => {
|
|
loaderPage(true)
|
|
await http
|
|
.get(config.API.candidateStatus(examId.value, positionId.value))
|
|
.then((res) => {
|
|
const data = res.data.result
|
|
rejectMessage.value = data.rejectDetail
|
|
status.value = data.status
|
|
if (status.value == 'register') {
|
|
stepRaw.value = 2
|
|
step.value = 2
|
|
} else if (status.value == 'checkRegister') {
|
|
stepRaw.value = 3
|
|
step.value = 3
|
|
} else if (status.value == 'payment') {
|
|
stepRaw.value = 3
|
|
step.value = 3
|
|
} else if (status.value == 'rejectRegister') {
|
|
stepRaw.value = 2
|
|
step.value = 2
|
|
} else if (status.value == 'checkPayment') {
|
|
stepRaw.value = 4
|
|
step.value = 4
|
|
} else if (status.value == 'rejectPayment') {
|
|
stepRaw.value = 3
|
|
step.value = 3
|
|
} else if (status.value == 'checkSeat') {
|
|
stepRaw.value = 4
|
|
step.value = 4
|
|
} else if (status.value == 'checkPoint') {
|
|
stepRaw.value = 4
|
|
step.value = 4
|
|
} else if (status.value == 'done') {
|
|
stepRaw.value = 4
|
|
step.value = 4
|
|
}
|
|
if (
|
|
stepPayment.value == false &&
|
|
status.value != 'register' &&
|
|
status.value != 'rejectRegister'
|
|
) {
|
|
stepRaw.value = 4
|
|
step.value = 4
|
|
}
|
|
})
|
|
.catch((e) => {
|
|
messageError($q, e)
|
|
})
|
|
.finally(() => {
|
|
loaderPage(false)
|
|
storeExam.changeStatus(status.value)
|
|
})
|
|
}
|
|
|
|
const fetchPeriodExam = async () => {
|
|
loaderPage(true)
|
|
await http
|
|
.get(config.API.periodExamPosition(examId.value, positionId.value))
|
|
.then((res) => {
|
|
const data = res.data.result
|
|
tittle.value = data.name
|
|
round.value = data.round
|
|
yearly.value = data.year
|
|
position.value = data.position
|
|
positionLevel.value = data.positionLevel
|
|
})
|
|
.catch((e) => {
|
|
messageError($q, e)
|
|
})
|
|
.finally(() => {
|
|
loaderPage(false)
|
|
})
|
|
}
|
|
|
|
const consenClose = () => {
|
|
modalConsend.value = false
|
|
}
|
|
|
|
const consendOk = () => {
|
|
modalConsend.value = false
|
|
}
|
|
|
|
const logout = () => {
|
|
keycloak.logout()
|
|
}
|
|
</script>
|
|
<style>
|
|
.q-stepper {
|
|
box-shadow: none;
|
|
background: transparent !important;
|
|
}
|
|
.q-stepper--horizontal .q-stepper__step-inner {
|
|
padding: 0px;
|
|
}
|
|
.q-stepper__header--alternative-labels .q-stepper__tab {
|
|
min-height: 0px;
|
|
padding: 1.5% 0% 1.5% 0%;
|
|
}
|
|
.q-stepper__header--border {
|
|
border-bottom: none;
|
|
}
|
|
.q-stepper__dot {
|
|
min-width: 35px;
|
|
height: 35px;
|
|
width: 35px;
|
|
font-size: 20px;
|
|
}
|
|
.q-stepper__title {
|
|
width: 100px;
|
|
}
|
|
.q-stepper__tab--done .q-stepper__title {
|
|
color: #62a00b;
|
|
}
|
|
.q-stepper__tab--done .q-stepper__dot {
|
|
color: #95d710;
|
|
border: 1px solid #62a00b;
|
|
}
|
|
|
|
.q-stepper__tab--active .q-stepper__title {
|
|
color: #318bae;
|
|
}
|
|
.q-stepper__tab--active .q-stepper__dot {
|
|
color: #1cb4ea;
|
|
border: 1px solid #218ab393;
|
|
}
|
|
|
|
.q-stepper__tab--disabled .q-stepper__title {
|
|
color: #92b4c8;
|
|
}
|
|
.q-stepper__tab--disabled .q-stepper__dot {
|
|
background: #def2fc !important;
|
|
border: 1px solid #92b4c876;
|
|
}
|
|
|
|
.q-stepper__tab--disabled .q-stepper__dot .q-icon {
|
|
color: #7692a3d0;
|
|
}
|
|
.q-stepper--horizontal .q-stepper__line:before,
|
|
.q-stepper--horizontal .q-stepper__line:after {
|
|
background: #92b4c847;
|
|
}
|
|
</style>
|