99 lines
4.1 KiB
Vue
99 lines
4.1 KiB
Vue
<template>
|
|
<div class="q-pa-md row items-center justify-center">
|
|
<div class="col-xs-12 col-sm-8 col-md-6">
|
|
<q-card flat class="q-pa-md q-mb-sm" :class="getClass(status)">
|
|
<div v-if="status != 'done'" class="text-orange-6 text-bold">
|
|
<q-icon name="mdi-timer-sand" size="22px" color="orange-5" class="q-mr-sm" />เจ้าหน้าที่กำลังตรวจสถานที่สอบ
|
|
</div>
|
|
<div v-else class="text-green-6 text-bold">
|
|
<q-icon name="mdi-checkbox-marked-circle-outline" size="22px" color="green" class="q-mr-sm" />สมัครสอบสำเร็จ
|
|
</div>
|
|
</q-card>
|
|
|
|
<q-card bordered flat class="col-12 row">
|
|
<div class="text-bold col-12 row q-px-md q-py-sm items-center bg-grey-2">
|
|
บัตรประจำตัวผู้สอบ
|
|
<q-space />
|
|
<q-btn dense size="12px" flat color="primary" @click="download" icon="mdi-download">
|
|
<q-tooltip>พิมพ์บัตรประจำตัวผู้สอบ</q-tooltip>
|
|
</q-btn>
|
|
</div>
|
|
<div class="col-8 q-pa-md">
|
|
<div class="q-pt-xs row">
|
|
<div class="">ชื่อ :</div>
|
|
<div class="text-black text-bold q-pl-sm">{{ fullName }}</div>
|
|
</div>
|
|
<div class="q-pt-xs row">
|
|
<div class="">เลขประจำตัวสอบ :</div>
|
|
<div class="text-black text-bold q-pl-sm">{{ examNumber }}</div>
|
|
</div>
|
|
<div class="q-pt-xs row">
|
|
<div class="">เลขประจำตัวประชาชน :</div>
|
|
<div class="text-black q-pl-sm">{{ citizenId }}</div>
|
|
</div>
|
|
<div class="q-pt-xs row">
|
|
<div class="">เวลาสอบ :</div>
|
|
<div class="text-black q-pl-sm">{{ examTime }}</div>
|
|
</div>
|
|
<div class="q-pt-xs row">
|
|
<div class="">สถานที่สอบ :</div>
|
|
<div class="text-black q-pl-sm">{{ examLocation }}</div>
|
|
</div>
|
|
<div class="q-pt-xs row">
|
|
<div class="">ชั้นที่ :</div>
|
|
<div class="text-black q-pl-sm">{{ floor }}</div>
|
|
</div>
|
|
<div class="q-pt-xs row">
|
|
<div class="">ห้องสอบ :</div>
|
|
<div class="text-black q-pl-sm">{{ examRoom }}</div>
|
|
</div>
|
|
<div class="q-pt-xs row">
|
|
<div class="">เลขที่นั่ง :</div>
|
|
<div class="text-black q-pl-sm">{{ seatNumber }}</div>
|
|
</div>
|
|
</div>
|
|
|
|
<q-card-section class="col-4 flex flex-center">
|
|
<q-img
|
|
class="rounded-borders"
|
|
src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8cGVyc29ufGVufDB8fDB8fA%3D%3D&w=1000&q=80"
|
|
:ratio="1"
|
|
style="max-width: 300px; max-height: 300px"
|
|
/>
|
|
</q-card-section>
|
|
</q-card>
|
|
</div>
|
|
<!-- <q-btn color="positive" @click="testChangeStatus">จัดที่นั่ง</q-btn> -->
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { onMounted, ref } from 'vue'
|
|
|
|
const props = defineProps({
|
|
fetchStep: {
|
|
type: Function,
|
|
default: () => console.log('not function')
|
|
},
|
|
status: {
|
|
type: String,
|
|
required: true
|
|
}
|
|
})
|
|
|
|
const fullName = ref<string>('นางพิมพ์ภา วงศ์สวัสดิ์')
|
|
const examNumber = ref<string>('CDE-004')
|
|
const citizenId = ref<string>('1100700954521')
|
|
const examTime = ref<string>('09:00-12:00')
|
|
const examLocation = ref<string>('ศูนย์สอบ 01 กรุงเทพฯและนนทบุรี')
|
|
const floor = ref<string>('4')
|
|
const examRoom = ref<string>('CB-706')
|
|
const seatNumber = ref<string>('75')
|
|
|
|
const download = () => {}
|
|
const getClass = (val: string) => {
|
|
return val == 'done' ? 'bg-green-1' : 'bg-yellow-2'
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped></style>
|