ui หน้าสมัครสอบ
This commit is contained in:
Kittapath
parent
03b6076835
commit
792f30d606
48 changed files with 2845 additions and 43 deletions
87
src/modules/01_exam/views/ExamDetail.vue
Normal file
87
src/modules/01_exam/views/ExamDetail.vue
Normal file
|
|
@ -0,0 +1,87 @@
|
|||
<!-- page:detail page รายการสอบทั้งหมด -->
|
||||
<template>
|
||||
<q-toolbar class="q-py-sm q-px-md bg-grey-2">
|
||||
<q-btn icon="chevron_left" color="grey" flat dense>
|
||||
<q-tooltip>กลับ</q-tooltip>
|
||||
</q-btn>
|
||||
<q-toolbar-title class="toptitle text-dark col-12 row items-center">สมัครสอบ</q-toolbar-title>
|
||||
</q-toolbar>
|
||||
<q-card flat class="">
|
||||
<div class="justify-center">
|
||||
<q-stepper
|
||||
v-model="step"
|
||||
ref="stepper"
|
||||
alternative-labels
|
||||
header-nav
|
||||
color="primary"
|
||||
animated
|
||||
>
|
||||
<q-step :name="1" title="อ่านคำชี้แจง" icon="edit" done-color="positive">
|
||||
<ExamDetail />
|
||||
</q-step>
|
||||
<q-step :name="2" title="กรอกข้อมูล" icon="edit" done-color="positive">
|
||||
<ExamForm />
|
||||
</q-step>
|
||||
<q-step :name="3" title="ชำระค่าธรรมเนียมการสอบ" icon="edit" done-color="positive">
|
||||
<ExamPayment />
|
||||
</q-step>
|
||||
<q-step :name="4" title="สำเร็จ" icon="edit" done-color="positive">
|
||||
<ExamFinished />
|
||||
</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'
|
||||
|
||||
const examId = ref<string>('zxc')
|
||||
const step = ref<number>(1)
|
||||
const stepRaw = ref<number>(1)
|
||||
const examPost = ref<any>()
|
||||
const test = ref<any>()
|
||||
const loading = ref<boolean>(false)
|
||||
|
||||
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))
|
||||
}
|
||||
</script>
|
||||
231
src/modules/01_exam/views/ExamMain.vue
Normal file
231
src/modules/01_exam/views/ExamMain.vue
Normal file
|
|
@ -0,0 +1,231 @@
|
|||
<!-- page:main 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"
|
||||
>รายการสอบทั้งหมด</q-toolbar-title
|
||||
>
|
||||
</q-toolbar>
|
||||
|
||||
<q-card flat class="">
|
||||
<data-table
|
||||
style="height: 80vh"
|
||||
:rows="rows"
|
||||
:columns="columns"
|
||||
:filter="filter"
|
||||
:visible-columns="visibleColumns"
|
||||
v-model:inputfilter="filter"
|
||||
v-model:inputvisible="visibleColumns"
|
||||
:pagination="initialPagination"
|
||||
:nornmalData="true"
|
||||
:paging="true"
|
||||
>
|
||||
<template #columns="props">
|
||||
<q-tr :props="props" @click="next(props.row.id)" class="cursor-pointer">
|
||||
<q-td v-for="col in props.cols" :key="col.name" :props="props">
|
||||
<div v-if="col.name == 'no'" class="table_ellipsis">
|
||||
{{ props.rowIndex + 1 }}
|
||||
</div>
|
||||
<div v-else-if="col.name == 'fullname'">
|
||||
<div class="row col-12 items-center">
|
||||
<img
|
||||
:src="props.row.avatar"
|
||||
class="q-mr-sm col-4"
|
||||
style="width: 28px; height: 28px; border-radius: 50%"
|
||||
/>
|
||||
<div class="col-4">
|
||||
<div class="text-weight-medium">
|
||||
{{ props.row.fullname }}
|
||||
</div>
|
||||
<div class="text-weight-light">
|
||||
{{ props.row.citizenId }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else class="table_ellipsis">
|
||||
{{ col.value }}
|
||||
</div>
|
||||
</q-td>
|
||||
</q-tr>
|
||||
</template>
|
||||
</data-table>
|
||||
</q-card>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { ref, watch } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { useExamDataStore } from '@/modules/01_exam/store'
|
||||
import type { RequestItemsObject, Columns } from '@/modules/01_exam/interface/request/Main'
|
||||
import type { ResponseObject } from '@/modules/01_exam/interface/response/Main'
|
||||
import type { Pagination } from '@/modules/01_exam/interface/index/Main'
|
||||
|
||||
const router = useRouter()
|
||||
const store = useExamDataStore()
|
||||
const { examData, changeExamColumns } = store
|
||||
const filter = ref<string>('') //search data table
|
||||
const initialPagination = ref<Pagination>({
|
||||
rowsPerPage: 0
|
||||
})
|
||||
|
||||
const visibleColumns = ref<String[]>([])
|
||||
examData.main.columns.length == 0
|
||||
? (visibleColumns.value = [
|
||||
'no',
|
||||
'fullname',
|
||||
'position',
|
||||
'line',
|
||||
'linePosition',
|
||||
'level',
|
||||
'positionFormalManage',
|
||||
'positionManage',
|
||||
'numberPosition',
|
||||
'government'
|
||||
])
|
||||
: (visibleColumns.value = examData.main.columns)
|
||||
const columns = ref<Columns>([
|
||||
{
|
||||
name: 'no',
|
||||
align: 'left',
|
||||
label: 'ลำดับ',
|
||||
sortable: true,
|
||||
field: 'no',
|
||||
headerStyle: 'font-size: 14px',
|
||||
style: 'font-size: 14px'
|
||||
},
|
||||
{
|
||||
name: 'fullname',
|
||||
align: 'left',
|
||||
label: 'ชื่อ-สกุล',
|
||||
sortable: true,
|
||||
field: 'fullname',
|
||||
headerStyle: 'font-size: 14px; min-width: 200px',
|
||||
style: 'font-size: 14px; '
|
||||
},
|
||||
{
|
||||
name: 'position',
|
||||
align: 'left',
|
||||
label: 'ตำแหน่ง',
|
||||
sortable: true,
|
||||
field: 'position',
|
||||
headerStyle: 'font-size: 14px',
|
||||
style: 'font-size: 14px'
|
||||
},
|
||||
{
|
||||
name: 'line',
|
||||
align: 'left',
|
||||
label: 'สายงาน',
|
||||
sortable: true,
|
||||
field: 'line',
|
||||
headerStyle: 'font-size: 14px',
|
||||
style: 'font-size: 14px'
|
||||
},
|
||||
{
|
||||
name: 'linePosition',
|
||||
align: 'left',
|
||||
label: 'ตำแหน่งในสายงาน',
|
||||
sortable: true,
|
||||
field: 'linePosition',
|
||||
headerStyle: 'font-size: 14px',
|
||||
style: 'font-size: 14px'
|
||||
},
|
||||
{
|
||||
name: 'level',
|
||||
align: 'left',
|
||||
label: 'ระดับ',
|
||||
sortable: true,
|
||||
field: 'level',
|
||||
headerStyle: 'font-size: 14px',
|
||||
style: 'font-size: 14px'
|
||||
},
|
||||
{
|
||||
name: 'positionFormalManage',
|
||||
align: 'left',
|
||||
label: 'ตำแหน่งทางการบริหาร',
|
||||
sortable: true,
|
||||
field: 'positionFormalManage',
|
||||
headerStyle: 'font-size: 14px',
|
||||
style: 'font-size: 14px'
|
||||
},
|
||||
{
|
||||
name: 'positionManage',
|
||||
align: 'left',
|
||||
label: 'ตำแหน่งการบริหาร',
|
||||
sortable: true,
|
||||
field: 'positionManage',
|
||||
headerStyle: 'font-size: 14px',
|
||||
style: 'font-size: 14px'
|
||||
},
|
||||
{
|
||||
name: 'numberPosition',
|
||||
align: 'left',
|
||||
label: 'เลขที่ตำแหน่ง',
|
||||
sortable: true,
|
||||
field: 'numberPosition',
|
||||
headerStyle: 'font-size: 14px',
|
||||
style: 'font-size: 14px'
|
||||
},
|
||||
{
|
||||
name: 'government',
|
||||
align: 'left',
|
||||
label: 'หน่วยงาน/ส่วนราชการ',
|
||||
sortable: true,
|
||||
field: 'government',
|
||||
headerStyle: 'font-size: 14px',
|
||||
style: 'font-size: 14px'
|
||||
}
|
||||
])
|
||||
const rows = ref<RequestItemsObject[]>([
|
||||
{
|
||||
id: 1,
|
||||
fullname: 'นางสาวณัฐกา ชมสิน',
|
||||
avatar: 'https://cdn.quasar.dev/img/boy-avatar.png',
|
||||
citizenId: '4016500103241',
|
||||
position: 'นักจัดการงานทั่วไป',
|
||||
line: 'จัดการทั่วไป',
|
||||
linePosition: 'ทั่วไป ',
|
||||
level: 'ต้น',
|
||||
positionFormalManage: 'นักจัดการทั่วไป',
|
||||
positionManage: 'นักจัดการทั่วไป',
|
||||
numberPosition: 'กทข.1',
|
||||
government: 'กองบริหารทั่วไป'
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
fullname: 'นางสาวรัชภรณ์ ภักดี',
|
||||
avatar: 'https://cdn.quasar.dev/img/boy-avatar.png',
|
||||
citizenId: '4016500092355',
|
||||
position: 'นักจัดการงานทั่วไป',
|
||||
line: 'จัดการทั่วไป',
|
||||
linePosition: 'ทั่วไป ',
|
||||
level: 'ต้น',
|
||||
positionFormalManage: 'นักจัดการทั่วไป',
|
||||
positionManage: 'นักจัดการทั่วไป',
|
||||
numberPosition: 'กทข.1',
|
||||
government: 'กองบริหารทั่วไป'
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
fullname: 'นางสาวภาพรรณ ลออ',
|
||||
avatar: 'https://cdn.quasar.dev/img/boy-avatar.png',
|
||||
citizenId: '4016500086436',
|
||||
position: 'นักจัดการงานทั่วไป',
|
||||
line: 'จัดการทั่วไป',
|
||||
linePosition: 'ทั่วไป ',
|
||||
level: 'ต้น',
|
||||
positionFormalManage: 'นักจัดการทั่วไป',
|
||||
positionManage: 'นักจัดการทั่วไป',
|
||||
numberPosition: 'กทข.1',
|
||||
government: 'กองบริหารทั่วไป'
|
||||
}
|
||||
])
|
||||
|
||||
watch(visibleColumns, async (count: String[], prevCount: String[]) => {
|
||||
await changeExamColumns('main', count)
|
||||
})
|
||||
|
||||
const next = (id: string) => {
|
||||
router.push(`/exam/${id}`)
|
||||
}
|
||||
</script>
|
||||
|
||||
<style></style>
|
||||
Loading…
Add table
Add a link
Reference in a new issue