102 lines
4.1 KiB
Vue
102 lines
4.1 KiB
Vue
<template>
|
|
<div class="q-px-md">
|
|
<q-card flat bordered class="col-12 q-px-lg q-py-md q-mt-md">
|
|
<q-card-section>
|
|
<div class="text-h6 q-py-sm">{{ exam.displayText }} ({{ exam.description }})</div>
|
|
<div class="text-subtitle2 q-py-sm">ประกาศวันที่ {{ date2Thai(exam.createdUtc) }}</div>
|
|
<div class="text-subtitle2 q-py-sm">ประจำปีงบประมาณ {{ exam.budgetYear }}</div>
|
|
<div class="text-subtitle2 q-py-sm">
|
|
เปิดรับสมัครวันที่ {{ date2Thai(exam.startDate) }} - {{ date2Thai(exam.endDate) }}
|
|
</div>
|
|
<div class="text-subtitle2 q-py-sm">ค่าธรรมเนียมการสมัคร {{ exam.fee }} บาท</div>
|
|
<!-- <div v-html="exam.htmlBody.html"></div> -->
|
|
</q-card-section>
|
|
|
|
<div class="text-subtitle1 text-center text-primary">เอกสารเกี่ยวกับการสอบนี้</div>
|
|
<div class="row justify-start q-pa-md q-col-gutter-md">
|
|
<div
|
|
v-for="file in exam.document"
|
|
:key="file.contentItemId"
|
|
class="col-12"
|
|
:href="`https://localhost:5001${file.file}`"
|
|
>
|
|
<p>
|
|
<a :href="`https://localhost:5001${file.file}`" target="_blank">{{
|
|
file.displayText
|
|
}}</a
|
|
><br />
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<!-- <template v-slot:body-cell-name="props">
|
|
<q-td :props="props">
|
|
<div>
|
|
<a href="https://quasar.dev/vue-components/table#QTable-API" />
|
|
</div>
|
|
</q-td>
|
|
</template> -->
|
|
</q-card>
|
|
<div class="col-12">
|
|
<div class="text-h6 q-py-sm">ข้อควรระวัง</div>
|
|
<div class="text-warning q-pb-md">1. ผู้สมัครสามารถสมัครได้เพียงครั้งเดียว</div>
|
|
<div class="text-grey-7 q-pb-md">
|
|
2. ชื่อ และนามสกุล ที่ท่านกรอกลงใน "ใบสมัครออนไลน์"
|
|
จะต้องเป็นชื่อที่ตรงกับบัตรประจำตัวประชาชน
|
|
</div>
|
|
<div class="text-grey-7 q-pb-md">
|
|
3. กรุณาตรวจสอบเลขประจำตัวประชาชนของท่านให้ถูกต้อง
|
|
เนื่องจากเลขประจำตัวประชาชนของท่านจะใช้อ้างอิงตลอดการสอบ
|
|
</div>
|
|
<div class="text-grey-7 q-pb-md">
|
|
4. ชื่อ และนามสกุล ที่ท่านกรอกลงใน "ใบสมัครออนไลน์"
|
|
จะต้องเป็นชื่อที่ตรงกับบัตรประจำตัวประชาชน
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row justify-center q-pa-md">
|
|
<q-btn color="primary" class="q-ml-md" label="ต่อไป" @click="applyCandidate" />
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref } from 'vue'
|
|
import { useCounterMixin } from '@/stores/mixin'
|
|
|
|
const props = defineProps({
|
|
fetchStep: {
|
|
type: Function,
|
|
default: () => console.log('not function')
|
|
},
|
|
step: {
|
|
type: Number,
|
|
required: true
|
|
}
|
|
})
|
|
|
|
const mixin = useCounterMixin()
|
|
const { date2Thai } = mixin
|
|
const exam = ref<any>({
|
|
contentItemId: null,
|
|
displayText: 'การสอบภาค ข.พิเศษ สำหรับผู้สอบผ่านของ่วนราชการแล้ว',
|
|
description: 'ครั้งที่2',
|
|
createdUtc: new Date(),
|
|
budgetYear: 2566,
|
|
startDate: new Date(),
|
|
endDate: new Date(),
|
|
fee: 200,
|
|
document: [
|
|
{
|
|
contentItemId: 111,
|
|
file: '111',
|
|
displayText: 'เอกสารเพิ่มเติมเกี่ยวกับการสอบ'
|
|
}
|
|
]
|
|
})
|
|
|
|
const applyCandidate = () => {
|
|
props.fetchStep()
|
|
}
|
|
</script>
|
|
|
|
<style scoped></style>
|