tab ที่ผ่านมาแล้วเปลี่ยนเป็นสีเขียว
This commit is contained in:
Kittapath
parent
8266e11d11
commit
3f4a0704d3
16 changed files with 407 additions and 166 deletions
86
src/components/NotifyConfirm.vue
Normal file
86
src/components/NotifyConfirm.vue
Normal file
|
|
@ -0,0 +1,86 @@
|
|||
<template>
|
||||
<q-dialog :model-value="modal" persistent>
|
||||
<q-card class="q-pa-sm">
|
||||
<q-card-section class="row items-center">
|
||||
<div class="q-pr-md">
|
||||
<q-avatar
|
||||
icon="mdi-alert-circle-outline"
|
||||
font-size="25px"
|
||||
size="lg"
|
||||
color="primary-1"
|
||||
text-color="primary"
|
||||
/>
|
||||
</div>
|
||||
<div class="col text-dark">
|
||||
<span class="text-bold">{{ modalTittle }}</span>
|
||||
<br />
|
||||
<span>{{ modalDetail }}</span>
|
||||
</div>
|
||||
</q-card-section>
|
||||
|
||||
<q-card-actions align="right" class="bg-white text-teal">
|
||||
<q-btn label="ยกเลิก" color="primary" @click="cancel" />
|
||||
<q-btn label="ตกลง" color="primary" @click="ok" />
|
||||
</q-card-actions>
|
||||
</q-card>
|
||||
</q-dialog>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { ref, useAttrs } from 'vue'
|
||||
|
||||
const props = defineProps({
|
||||
modal: Boolean,
|
||||
modalTittle: String,
|
||||
modalDetail: String,
|
||||
ok: {
|
||||
type: Function,
|
||||
default: () => console.log('not function')
|
||||
},
|
||||
cancel: {
|
||||
type: Function,
|
||||
default: () => console.log('not function')
|
||||
}
|
||||
})
|
||||
|
||||
const emit = defineEmits(['update:modal'])
|
||||
|
||||
const cancel = () => {
|
||||
emit('update:modal', false)
|
||||
props.cancel()
|
||||
}
|
||||
const ok = () => {
|
||||
emit('update:modal', false)
|
||||
props.ok()
|
||||
}
|
||||
</script>
|
||||
<style lang="scss">
|
||||
.icon-color {
|
||||
color: #4154b3;
|
||||
}
|
||||
.custom-header-table {
|
||||
max-height: 64vh;
|
||||
.q-table tr:nth-child(odd) td {
|
||||
background: white;
|
||||
}
|
||||
.q-table tr:nth-child(even) td {
|
||||
background: #f6f6f6ae;
|
||||
}
|
||||
|
||||
.q-table thead tr {
|
||||
background: #ecebeb;
|
||||
}
|
||||
|
||||
.q-table thead tr th {
|
||||
position: sticky;
|
||||
z-index: 1;
|
||||
}
|
||||
/* this will be the loading indicator */
|
||||
.q-table thead tr:last-child th {
|
||||
/* height of all previous header rows */
|
||||
top: 48px;
|
||||
}
|
||||
.q-table thead tr:first-child th {
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -14,6 +14,7 @@
|
|||
:save="saveData"
|
||||
:history="true"
|
||||
:addData="addData"
|
||||
:cancel="cancelData"
|
||||
/>
|
||||
<q-form ref="myform">
|
||||
<div class="row col-12 items-center q-col-gutter-x-xs q-col-gutter-y-xs">
|
||||
|
|
@ -224,7 +225,7 @@
|
|||
</q-card>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted } from 'vue'
|
||||
import { ref, onMounted, watch } from 'vue'
|
||||
import { useCounterMixin } from '@/stores/mixin'
|
||||
|
||||
import http from '@/plugins/http'
|
||||
|
|
@ -237,7 +238,7 @@ const mixin = useCounterMixin()
|
|||
const { date2Thai, calAge } = mixin
|
||||
|
||||
const edit = ref<boolean>(false)
|
||||
const addData = ref<boolean>(false)
|
||||
const addData = ref<boolean>(true)
|
||||
const addressData = ref<Address>(defaultAddress)
|
||||
const myform = ref<any>()
|
||||
const codep = ref<string>('')
|
||||
|
|
@ -249,17 +250,26 @@ const districtCOptions = ref<DataOption[]>([])
|
|||
const subdistrictOptions = ref<zipCodeOption[]>([])
|
||||
const subdistrictCOptions = ref<zipCodeOption[]>([])
|
||||
|
||||
const getClass = (val: boolean) => {
|
||||
return {
|
||||
'full-width inputgreen cursor-pointer': val,
|
||||
'full-width cursor-pointer': !val
|
||||
const props = defineProps({
|
||||
statusEdit: {
|
||||
type: Boolean,
|
||||
required: true
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
const emit = defineEmits(['update:statusEdit'])
|
||||
|
||||
watch(edit, (count: boolean, prevCount: boolean) => {
|
||||
if (props.statusEdit == true) {
|
||||
edit.value = false
|
||||
emit('update:statusEdit', count)
|
||||
}
|
||||
})
|
||||
|
||||
onMounted(() => {
|
||||
fetchProvince()
|
||||
fetchDistrict(addressData.value.provinceId, '1')
|
||||
fetchDistrict(addressData.value.provinceIdC, '2')
|
||||
// fetchProvince()
|
||||
// fetchDistrict(addressData.value.provinceId, '1')
|
||||
// fetchDistrict(addressData.value.provinceIdC, '2')
|
||||
})
|
||||
|
||||
const saveData = async () => {
|
||||
|
|
@ -381,4 +391,13 @@ const fetchSubDistrict = async (id: string, position: string) => {
|
|||
// loader.value = false;
|
||||
})
|
||||
}
|
||||
|
||||
const cancelData = () => {}
|
||||
|
||||
const getClass = (val: boolean) => {
|
||||
return {
|
||||
'full-width inputgreen cursor-pointer': val,
|
||||
'full-width cursor-pointer': !val
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,10 +1,10 @@
|
|||
<!-- tab เอกสาร -->
|
||||
<template>
|
||||
<Image />
|
||||
<!-- <Image /> -->
|
||||
<OtherFile />
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import Image from './Image.vue'
|
||||
// import Image from './Image.vue'
|
||||
import OtherFile from './OtherFile.vue'
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
<q-card class="my-card" style="max-width: 600px; width: 100%" bordered>
|
||||
<q-card-actions class="q-pa-md" :class="getClass(status)">
|
||||
<div v-if="status == false" class="text-black text-bold">
|
||||
เจ้าหน้าที่กำลังตรวจเอกสารชำระเงิน
|
||||
เจ้าหน้าที่กำลังตรวจสถานที่สอบ
|
||||
</div>
|
||||
<div v-else class="text-black text-bold">สมัครสอบสำเร็จ</div>
|
||||
<q-space />
|
||||
|
|
|
|||
|
|
@ -7,6 +7,7 @@
|
|||
icon="mdi-account-group"
|
||||
:save="saveData"
|
||||
:addData="addData"
|
||||
:cancel="cancelData"
|
||||
/>
|
||||
<q-form ref="myform" class="col-12">
|
||||
<div class="row col-12 items-center q-col-gutter-x-xs q-col-gutter-y-xs">
|
||||
|
|
@ -269,7 +270,7 @@
|
|||
</q-card>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import { ref, watch } from 'vue'
|
||||
import type { PropType } from 'vue'
|
||||
import { useCounterMixin } from '@/stores/mixin'
|
||||
import type { Family, DataOption } from '@/modules/01_exam/interface/index/Main'
|
||||
|
|
@ -280,7 +281,7 @@ const mixin = useCounterMixin()
|
|||
const { date2Thai, calAge } = mixin
|
||||
|
||||
const edit = ref<boolean>(false)
|
||||
const addData = ref<boolean>(false)
|
||||
const addData = ref<boolean>(true)
|
||||
const myform = ref<any>()
|
||||
const familyData = ref<Family>(defaultFamily)
|
||||
const statusOptions = ref<DataOption[]>([])
|
||||
|
|
@ -295,15 +296,21 @@ const props = defineProps({
|
|||
prefixOptions: {
|
||||
type: Array as PropType<DataOption[]>,
|
||||
required: true
|
||||
},
|
||||
statusEdit: {
|
||||
type: Boolean,
|
||||
required: true
|
||||
}
|
||||
})
|
||||
|
||||
const getClass = (val: boolean) => {
|
||||
return {
|
||||
'full-width inputgreen cursor-pointer': val,
|
||||
'full-width cursor-pointer': !val
|
||||
const emit = defineEmits(['update:statusEdit'])
|
||||
|
||||
watch(edit, (count: boolean, prevCount: boolean) => {
|
||||
if (props.statusEdit == true) {
|
||||
edit.value = false
|
||||
emit('update:statusEdit', count)
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
const saveData = async () => {
|
||||
await myform.value.validate().then(async (success: boolean) => {
|
||||
|
|
@ -321,4 +328,13 @@ const selectRadio = (e: boolean, i: any) => {
|
|||
familyData.value.occupationC = ''
|
||||
}
|
||||
}
|
||||
|
||||
const cancelData = () => {}
|
||||
|
||||
const getClass = (val: boolean) => {
|
||||
return {
|
||||
'full-width inputgreen cursor-pointer': val,
|
||||
'full-width cursor-pointer': !val
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,45 +0,0 @@
|
|||
<!-- card รูปถ่าย -->
|
||||
<template>
|
||||
<q-card flat bordered class="col-12 row q-px-lg q-py-md">
|
||||
<HeaderTop
|
||||
v-model:edit="edit"
|
||||
header="รูปถ่าย"
|
||||
icon="mdi-image-area"
|
||||
:history="false"
|
||||
:addData="addData"
|
||||
/>
|
||||
<div class="row col-12 q-gutter-sm q-pt-sm">
|
||||
<q-img
|
||||
class="items-center"
|
||||
src="https://picsum.photos/500/300"
|
||||
style="max-width: 150px; height: 150px"
|
||||
fit="contain"
|
||||
>
|
||||
</q-img>
|
||||
<q-uploader
|
||||
v-show="edit"
|
||||
color="blue"
|
||||
type="file"
|
||||
flat
|
||||
auto-upload
|
||||
:factory="fileUpload"
|
||||
class="full-width"
|
||||
accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"
|
||||
bordered
|
||||
/>
|
||||
</div>
|
||||
</q-card>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import HeaderTop from '@/components/top.vue'
|
||||
|
||||
const edit = ref<boolean>(false)
|
||||
const addData = ref<boolean>(false)
|
||||
const fileUpload = async (file: any) => {
|
||||
return {
|
||||
url: 'http://localhost:4444/upload',
|
||||
method: 'POST'
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -7,9 +7,10 @@
|
|||
icon="mdi-account"
|
||||
:save="saveData"
|
||||
:addData="addData"
|
||||
:cancel="cancelData"
|
||||
/>
|
||||
<q-form ref="myform" class="col-12">
|
||||
<div class="row col-12 items-center q-col-gutter-x-sm q-col-gutter-y-sm">
|
||||
<q-form ref="myform" class="col-12 row">
|
||||
<div class="row col-10 items-center q-col-gutter-x-sm q-col-gutter-y-sm">
|
||||
<div class="col-xs-6 col-sm-3 col-md-3">
|
||||
<q-select
|
||||
hide-bottom-space
|
||||
|
|
@ -295,11 +296,34 @@
|
|||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row col-2 justify-center q-pt-md">
|
||||
<div class="containerimage row justify-center">
|
||||
<q-file
|
||||
borderless
|
||||
v-model="fileData"
|
||||
stack-label
|
||||
:readonly="!edit"
|
||||
@update:model-value="pickFile"
|
||||
>
|
||||
<q-img src="@/assets/avatar_user.jpg" class="col-12">
|
||||
<div class="overlay" v-if="edit">
|
||||
<q-icon name="mdi-camera" />
|
||||
<br />อัปเดต
|
||||
</div>
|
||||
</q-img>
|
||||
</q-file>
|
||||
</div>
|
||||
<div class="col-12 text-center" v-show="disabledPic">
|
||||
<q-btn outline dense color="black" icon="mdi-content-save-outline" @click="savePic">
|
||||
<q-tooltip content-class="bg-grey-2 text-black">บันทึกรูป</q-tooltip>
|
||||
</q-btn>
|
||||
</div>
|
||||
</div>
|
||||
</q-form>
|
||||
</q-card>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted } from 'vue'
|
||||
import { ref, onMounted, watch } from 'vue'
|
||||
import { useCounterMixin } from '@/stores/mixin'
|
||||
import type { PropType } from 'vue'
|
||||
import type { Information, DataOption } from '@/modules/01_exam/interface/index/Main'
|
||||
|
|
@ -307,16 +331,19 @@ import { defaultInformation } from '@/modules/01_exam/interface/index/Main'
|
|||
import HeaderTop from '@/components/top.vue'
|
||||
import http from '@/plugins/http'
|
||||
import config from '@/app.config'
|
||||
import type { file } from '@babel/types'
|
||||
|
||||
const mixin = useCounterMixin()
|
||||
const { date2Thai, calAge } = mixin
|
||||
|
||||
const edit = ref<boolean>(false)
|
||||
const addData = ref<boolean>(false)
|
||||
const addData = ref<boolean>(true)
|
||||
const informaData = ref<Information>(defaultInformation)
|
||||
const provinceOptions = ref<DataOption[]>([])
|
||||
const myform = ref<any>()
|
||||
|
||||
const imageUrl = ref<string | null>(null)
|
||||
const disabledPic = ref<boolean>(false)
|
||||
const fileData = ref<File | null>()
|
||||
const props = defineProps({
|
||||
prefixOptions: {
|
||||
type: Array as PropType<DataOption[]>,
|
||||
|
|
@ -341,12 +368,25 @@ const props = defineProps({
|
|||
provinceOptions: {
|
||||
type: Array as PropType<DataOption[]>,
|
||||
required: true
|
||||
},
|
||||
statusEdit: {
|
||||
type: Boolean,
|
||||
required: true
|
||||
}
|
||||
})
|
||||
|
||||
const emit = defineEmits(['update:statusEdit'])
|
||||
|
||||
watch(edit, (count: boolean, prevCount: boolean) => {
|
||||
if (props.statusEdit == true) {
|
||||
edit.value = false
|
||||
emit('update:statusEdit', count)
|
||||
}
|
||||
})
|
||||
|
||||
onMounted(() => {
|
||||
// console.log(props);
|
||||
fetchProvince()
|
||||
// fetchProvince()
|
||||
})
|
||||
|
||||
const saveData = async () => {
|
||||
|
|
@ -376,6 +416,21 @@ const fetchProvince = async () => {
|
|||
})
|
||||
}
|
||||
|
||||
const savePic = () => {
|
||||
disabledPic.value = false
|
||||
}
|
||||
|
||||
const onFilePicked = () => {}
|
||||
|
||||
const pickFile = () => {
|
||||
disabledPic.value = true
|
||||
}
|
||||
|
||||
const cancelData = () => {
|
||||
fileData.value = null
|
||||
disabledPic.value = false
|
||||
}
|
||||
|
||||
const getClass = (val: boolean) => {
|
||||
return {
|
||||
'full-width inputgreen cursor-pointer': val,
|
||||
|
|
@ -383,3 +438,40 @@ const getClass = (val: boolean) => {
|
|||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.containerimage {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.q-img {
|
||||
display: block;
|
||||
width: 160px;
|
||||
height: 170px;
|
||||
padding: 1%;
|
||||
border-radius: 3px;
|
||||
border: solid 2px rgba(168, 168, 168, 0.055) !important;
|
||||
box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.048), 0 3px 6px 0 rgba(0, 0, 0, 0.19);
|
||||
}
|
||||
|
||||
.overlay {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
background: rgb(0, 0, 0);
|
||||
background: rgba(0, 0, 0, 0.7);
|
||||
color: #f1f1f1;
|
||||
transition: 0.5s ease;
|
||||
width: 160px;
|
||||
height: 70px;
|
||||
opacity: 0;
|
||||
color: white;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
padding: 5% 0 5% 0;
|
||||
}
|
||||
|
||||
.containerimage:hover .overlay {
|
||||
opacity: 1;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -7,6 +7,7 @@
|
|||
icon="mdi-briefcase"
|
||||
:save="saveData"
|
||||
:addData="addData"
|
||||
:cancel="cancelData"
|
||||
/>
|
||||
<q-form ref="myform">
|
||||
<div class="row col-12 items-center q-col-gutter-x-xs q-col-gutter-y-xs">
|
||||
|
|
@ -33,7 +34,7 @@
|
|||
label="ข้าราชการกรุงเทพมหานคร ตำแหน่ง"
|
||||
dense
|
||||
:disable="!edit"
|
||||
size="xs"
|
||||
size="md"
|
||||
style="font-size: 14px; color: black"
|
||||
/>
|
||||
</template>
|
||||
|
|
@ -60,7 +61,7 @@
|
|||
label="บุคลากรกรุงเทพมหานคร ตำแหน่ง"
|
||||
dense
|
||||
:disable="!edit"
|
||||
size="xs"
|
||||
size="md"
|
||||
style="font-size: 14px; color: black"
|
||||
/>
|
||||
</template>
|
||||
|
|
@ -87,7 +88,7 @@
|
|||
label="ข้าราชการประเภทอื่น ตำแหน่ง"
|
||||
dense
|
||||
:disable="!edit"
|
||||
size="xs"
|
||||
size="md"
|
||||
style="font-size: 14px; color: black"
|
||||
/>
|
||||
</template>
|
||||
|
|
@ -114,7 +115,7 @@
|
|||
label="ลูกจ้าง/พนักงานราชการของส่วนราชการอื่น ตำแหน่ง"
|
||||
dense
|
||||
:disable="!edit"
|
||||
size="xs"
|
||||
size="md"
|
||||
style="font-size: 14px; color: black"
|
||||
/>
|
||||
</template>
|
||||
|
|
@ -127,7 +128,7 @@
|
|||
label="กำลังศึกษาต่อ"
|
||||
dense
|
||||
:disable="!edit"
|
||||
size="xs"
|
||||
size="md"
|
||||
style="font-size: 14px; color: black"
|
||||
/>
|
||||
<q-input
|
||||
|
|
@ -152,7 +153,7 @@
|
|||
label="อื่นๆ"
|
||||
dense
|
||||
:disable="!edit"
|
||||
size="xs"
|
||||
size="md"
|
||||
style="font-size: 14px; color: black"
|
||||
/>
|
||||
</template>
|
||||
|
|
@ -227,7 +228,7 @@
|
|||
</q-card>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted } from 'vue'
|
||||
import { ref, onMounted, watch } from 'vue'
|
||||
|
||||
import http from '@/plugins/http'
|
||||
import config from '@/app.config'
|
||||
|
|
@ -236,16 +237,25 @@ import { defaultOccupation } from '@/modules/01_exam/interface/index/Main'
|
|||
import HeaderTop from '@/components/top.vue'
|
||||
|
||||
const edit = ref<boolean>(false)
|
||||
const addData = ref<boolean>(false)
|
||||
const addData = ref<boolean>(true)
|
||||
const occupationData = ref<Occupation>(defaultOccupation)
|
||||
const myform = ref<any>()
|
||||
|
||||
const getClass = (val: boolean) => {
|
||||
return {
|
||||
'full-width inputgreen cursor-pointer': val,
|
||||
'full-width cursor-pointer': !val
|
||||
const props = defineProps({
|
||||
statusEdit: {
|
||||
type: Boolean,
|
||||
required: true
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
const emit = defineEmits(['update:statusEdit'])
|
||||
|
||||
watch(edit, (count: boolean, prevCount: boolean) => {
|
||||
if (props.statusEdit == true) {
|
||||
edit.value = false
|
||||
emit('update:statusEdit', count)
|
||||
}
|
||||
})
|
||||
|
||||
onMounted(() => {})
|
||||
|
||||
|
|
@ -256,4 +266,13 @@ const saveData = async () => {
|
|||
}
|
||||
})
|
||||
}
|
||||
|
||||
const cancelData = () => {}
|
||||
|
||||
const getClass = (val: boolean) => {
|
||||
return {
|
||||
'full-width inputgreen cursor-pointer': val,
|
||||
'full-width cursor-pointer': !val
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -7,6 +7,7 @@
|
|||
icon="mdi-file-document"
|
||||
:history="false"
|
||||
:addData="addData"
|
||||
:cancel="cancelData"
|
||||
/>
|
||||
<div class="row col-12 q-gutter-sm q-pt-sm">
|
||||
<q-card bordered flat class="full-width">
|
||||
|
|
@ -63,7 +64,7 @@ import { ref } from 'vue'
|
|||
import HeaderTop from '@/components/top.vue'
|
||||
|
||||
const edit = ref<boolean>(false)
|
||||
const addData = ref<boolean>(false)
|
||||
const addData = ref<boolean>(true)
|
||||
const files = ref<any>([
|
||||
{
|
||||
key: 1,
|
||||
|
|
@ -84,4 +85,6 @@ const fileUpload = async (file: any) => {
|
|||
method: 'POST'
|
||||
}
|
||||
}
|
||||
|
||||
const cancelData = () => {}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
<!-- tab ข้อมูลส่วนบุคคล -->
|
||||
<template>
|
||||
<!-- xxxxxxxx{{ statusEdit }}xxxxxxxx{{ statusEditx }} -->
|
||||
<Information
|
||||
:prefixOptions="prefixOptions"
|
||||
:genderOptions="genderOptions"
|
||||
|
|
@ -7,10 +8,18 @@
|
|||
:statusOptions="statusOptions"
|
||||
:religionOptions="religionOptions"
|
||||
:provinceOptions="provinceOptions"
|
||||
v-model:statusEdit="statusEdit"
|
||||
/>
|
||||
<Address v-model:statusEdit="statusEdit" />
|
||||
<Family :prefixOptions="prefixOptions" v-model:statusEdit="statusEdit" />
|
||||
<Occupation v-model:statusEdit="statusEdit" />
|
||||
<notifyConfirm
|
||||
:modal="modalNoEdit"
|
||||
:modalTittle="modalNoEditTittle"
|
||||
:modalDetail="modalNoEditDetail"
|
||||
:ok="closeModalNoEdit"
|
||||
:cancel="closeModalCancel"
|
||||
/>
|
||||
<Address />
|
||||
<Family :prefixOptions="prefixOptions" />
|
||||
<Occupation />
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted } from 'vue'
|
||||
|
|
@ -19,14 +28,30 @@ import Information from './Information.vue'
|
|||
import Address from './Address.vue'
|
||||
import Family from './Family.vue'
|
||||
import Occupation from './Occupation.vue'
|
||||
import NotifyConfirm from '@/components/NotifyConfirm.vue'
|
||||
import http from '@/plugins/http'
|
||||
import config from '@/app.config'
|
||||
|
||||
const loader = ref<boolean>(true)
|
||||
const statusEdit = ref<boolean>(false)
|
||||
const statusEditx = ref<boolean>(false)
|
||||
const modalNoEdit = ref<boolean>(false)
|
||||
const modalNoEditTittle = ref<string>('ยืนยันการเปลี่ยนแท็ปใช่หรือไม่?')
|
||||
const modalNoEditDetail = ref<string>(
|
||||
'ยังมีข้อมูลที่ยังไม่ถูกบันทึก ถ้าตกลงเปลี่ยนแท็ปข้อมูลที่ยังไม่ถูกบันทึกจะหาย'
|
||||
)
|
||||
|
||||
const prefixOptions = ref<DataOption[]>([])
|
||||
const bloodOptions = ref<DataOption[]>([])
|
||||
const genderOptions = ref<DataOption[]>([])
|
||||
const statusOptions = ref<DataOption[]>([])
|
||||
const religionOptions = ref<DataOption[]>([])
|
||||
const provinceOptions = ref<DataOption[]>([])
|
||||
|
||||
const closeModalNoEdit = () => {
|
||||
modalNoEdit.value = false
|
||||
}
|
||||
const closeModalCancel = () => {
|
||||
modalNoEdit.value = false
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -2,15 +2,15 @@ const Main = () => import('@/modules/01_exam/views/ExamMain.vue')
|
|||
const Detail = () => import('@/modules/01_exam/views/ExamDetail.vue')
|
||||
|
||||
export default [
|
||||
{
|
||||
path: '/exam',
|
||||
name: 'exam',
|
||||
component: Main,
|
||||
meta: {
|
||||
Auth: true
|
||||
// Key: [7]
|
||||
}
|
||||
},
|
||||
// {
|
||||
// path: '/exam',
|
||||
// name: 'exam',
|
||||
// component: Main,
|
||||
// meta: {
|
||||
// Auth: true
|
||||
// // Key: [7]
|
||||
// }
|
||||
// },
|
||||
{
|
||||
path: '/exam/:id',
|
||||
name: 'examDetail',
|
||||
|
|
|
|||
|
|
@ -1,10 +1,9 @@
|
|||
<!-- 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-title class="toptitle text-dark col-12 row items-center">{{
|
||||
tittle
|
||||
}}</q-toolbar-title>
|
||||
</q-toolbar>
|
||||
<q-card flat class="">
|
||||
<div class="justify-center">
|
||||
|
|
@ -16,21 +15,34 @@
|
|||
color="primary"
|
||||
animated
|
||||
>
|
||||
<q-step :name="1" title="อ่านคำชี้แจง" icon="edit" done-color="positive">
|
||||
<q-step :done="step > 1" :name="1" title="อ่านคำชี้แจง" icon="edit" done-color="positive">
|
||||
<ExamDetail />
|
||||
</q-step>
|
||||
<q-step :name="2" title="กรอกข้อมูล" icon="edit" done-color="positive">
|
||||
<q-step :done="step > 2" :name="2" title="กรอกข้อมูล" icon="edit" done-color="positive">
|
||||
<ExamForm />
|
||||
</q-step>
|
||||
<q-step :name="3" title="ชำระค่าธรรมเนียมการสอบ" icon="edit" done-color="positive">
|
||||
<q-step
|
||||
:done="step > 3"
|
||||
:name="3"
|
||||
title="ชำระค่าธรรมเนียมการสอบ"
|
||||
icon="edit"
|
||||
done-color="positive"
|
||||
>
|
||||
<ExamPayment />
|
||||
</q-step>
|
||||
<q-step :name="4" title="สำเร็จ" icon="edit" done-color="positive">
|
||||
<q-step :done="step > 4" :name="4" title="สำเร็จ" icon="edit" done-color="positive">
|
||||
<ExamFinished />
|
||||
</q-step>
|
||||
</q-stepper>
|
||||
</div>
|
||||
</q-card>
|
||||
<notifyConfirm
|
||||
:modal="modalConfirm"
|
||||
:modalTittle="modalConfirmTittle"
|
||||
:modalDetail="modalConfirmDetail"
|
||||
:ok="closeModalConfirm"
|
||||
:cancel="closeModalCancel"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
|
|
@ -39,6 +51,7 @@ 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 NotifyConfirm from '@/components/NotifyConfirm.vue'
|
||||
|
||||
const examId = ref<string>('zxc')
|
||||
const step = ref<number>(1)
|
||||
|
|
@ -46,6 +59,12 @@ const stepRaw = ref<number>(1)
|
|||
const examPost = ref<any>()
|
||||
const test = ref<any>()
|
||||
const loading = ref<boolean>(false)
|
||||
const tittle = ref<string>('การสอบภาค ข. พิเศษ สำหรับผู้สอบผ่านของส่วนราชการแล้ว')
|
||||
const modalConfirm = ref<boolean>(true)
|
||||
const modalConfirmTittle = ref<string>('ยืนยันการเปลี่ยนแท็ปใช่หรือไม่?')
|
||||
const modalConfirmDetail = ref<string>(
|
||||
'ยังมีข้อมูลที่ยังไม่ถูกบันทึก ถ้าตกลงเปลี่ยนแท็ปข้อมูลที่ยังไม่ถูกบันทึกจะหาย'
|
||||
)
|
||||
|
||||
onMounted(() => {
|
||||
loadCandidate()
|
||||
|
|
@ -84,4 +103,11 @@ const fetchExams = () => {
|
|||
// .catch((err) => console.log(err))
|
||||
// .finally(() => (this.loading = false))
|
||||
}
|
||||
|
||||
const closeModalConfirm = () => {
|
||||
modalConfirm.value = false
|
||||
}
|
||||
const closeModalCancel = () => {
|
||||
modalConfirm.value = false
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -3,31 +3,32 @@ import HomeView from '../views/HomeView.vue'
|
|||
import Exam from '@/modules/01_exam/router'
|
||||
import Meta02 from '@/modules/02_meta/router'
|
||||
|
||||
import keycloak from "@/plugins/keycloak";
|
||||
import keycloak from '@/plugins/keycloak'
|
||||
|
||||
const MainLayout = () => import('@/views/MainLayout.vue')
|
||||
const Error404NotFound = () => import('@/views/Error404NotFound.vue')
|
||||
|
||||
const router = createRouter({
|
||||
history: createWebHistory(import.meta.env.BASE_URL),
|
||||
routes: [
|
||||
{
|
||||
path: '/',
|
||||
name: 'home',
|
||||
path: '/exam/:id',
|
||||
// name: 'home',
|
||||
component: MainLayout,
|
||||
children: [
|
||||
{
|
||||
path: '/',
|
||||
name: 'dashboard',
|
||||
component: HomeView,
|
||||
meta: {
|
||||
Auth: true,
|
||||
Key: [7]
|
||||
}
|
||||
},
|
||||
...Exam,
|
||||
...Meta02
|
||||
// {
|
||||
// path: '/',
|
||||
// name: 'dashboard',
|
||||
// component: HomeView,
|
||||
// meta: {
|
||||
// Auth: true,
|
||||
// Key: [7]
|
||||
// }
|
||||
// },
|
||||
...Exam
|
||||
// ...Meta02
|
||||
]
|
||||
}
|
||||
},
|
||||
/**
|
||||
* 404 Not Found
|
||||
* ref: https://router.vuejs.org/guide/essentials/dynamic-matching.html#catch-all-404-not-found-route
|
||||
|
|
@ -37,6 +38,11 @@ const router = createRouter({
|
|||
// path: "/:pathMatch(.*)*",
|
||||
// component: Error404NotFound,
|
||||
// },
|
||||
{
|
||||
// path: "/:catchAll(.*)*", // TODO: ใช้ pathMatch แทนตามในเอกสารแนะนำ คงไว้เผื่อจำเป็น
|
||||
path: '/:pathMatch(.*)*',
|
||||
component: Error404NotFound
|
||||
}
|
||||
]
|
||||
})
|
||||
|
||||
|
|
@ -59,20 +65,20 @@ const router = createRouter({
|
|||
// ]
|
||||
// })
|
||||
router.beforeEach((to, from, next) => {
|
||||
if (to.meta.Auth) {
|
||||
if (!keycloak.authenticated) {
|
||||
keycloak.login({
|
||||
redirectUri: `${window.location.protocol}//${window.location.host}${to.path}`,
|
||||
locale: "th",
|
||||
});
|
||||
} else {
|
||||
// keycloak.updateToken(60);
|
||||
next();
|
||||
}
|
||||
if (to.meta.Auth) {
|
||||
if (!keycloak.authenticated) {
|
||||
keycloak.login({
|
||||
redirectUri: `${window.location.protocol}//${window.location.host}${to.path}`,
|
||||
locale: 'th'
|
||||
})
|
||||
} else {
|
||||
next();
|
||||
// keycloak.updateToken(60);
|
||||
next()
|
||||
}
|
||||
// next();
|
||||
});
|
||||
} else {
|
||||
next()
|
||||
}
|
||||
// next();
|
||||
})
|
||||
|
||||
export default router
|
||||
|
|
|
|||
17
src/views/Error404NotFound.vue
Normal file
17
src/views/Error404NotFound.vue
Normal file
|
|
@ -0,0 +1,17 @@
|
|||
<script lang="ts">
|
||||
import { defineComponent } from 'vue'
|
||||
|
||||
export default defineComponent({
|
||||
name: 'Error404NotFound'
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="fullscreen bg-blue-10 text-white text-center q-pa-md flex flex-center">
|
||||
<div>
|
||||
<div class="text-h1">ไม่พบหน้าที่ต้องการ</div>
|
||||
<div class="text-h2">(404 Not Found)</div>
|
||||
<!-- <q-btn class="q-mt-xl" color="white" text-color="blue" unelevated to="/" label="กลับไปหน้าหลัก" no-caps /> -->
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -68,7 +68,7 @@ const doLogout = () => {
|
|||
<!-- header -->
|
||||
<q-header flat class="bg-grey-2 text-dark" height-hint="7">
|
||||
<q-toolbar style="padding: 0 2%">
|
||||
<q-btn
|
||||
<!-- <q-btn
|
||||
size="13px"
|
||||
class="bg-grey-3"
|
||||
flat
|
||||
|
|
@ -82,7 +82,7 @@ const doLogout = () => {
|
|||
size="20px"
|
||||
color="grey-7"
|
||||
/>
|
||||
</q-btn>
|
||||
</q-btn> -->
|
||||
|
||||
<q-space />
|
||||
|
||||
|
|
@ -208,7 +208,7 @@ const doLogout = () => {
|
|||
<!-- end header -->
|
||||
|
||||
<!-- drawer -->
|
||||
<q-drawer
|
||||
<!-- <q-drawer
|
||||
side="left"
|
||||
bordered
|
||||
class="text-white"
|
||||
|
|
@ -248,33 +248,6 @@ const doLogout = () => {
|
|||
<q-separator inset color="grey-9" />
|
||||
<q-list padding>
|
||||
<div v-for="(menuItem, index) in menuList" :key="index">
|
||||
<!-- <q-expansion-item
|
||||
group="somegroup"
|
||||
class="menuSub"
|
||||
expand-icon="mdi-menu-right"
|
||||
expanded-icon="mdi-menu-down"
|
||||
v-if="menuItem.key == 3 || menuItem.key == 5"
|
||||
>
|
||||
<template v-slot:header>
|
||||
<q-item-section avatar>
|
||||
<q-avatar :icon="menuItem.icon" size="md" font-size="20px" />
|
||||
</q-item-section>
|
||||
<q-item-section>{{ menuItem.label }}</q-item-section>
|
||||
</template>
|
||||
<q-item
|
||||
dense
|
||||
class="menuSubHover"
|
||||
active-class="text-primary active-item text-weight-bold menuSubAct"
|
||||
clickable
|
||||
v-for="subMenu in menuItem.children"
|
||||
:key="subMenu.key"
|
||||
:to="{ name: `${subMenu.path}` }"
|
||||
>
|
||||
<q-item-section>
|
||||
<q-item-label>{{ subMenu.label }}</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</q-expansion-item> -->
|
||||
<q-item
|
||||
class="text-weight-medium menu"
|
||||
active-class="text-primary active-item text-weight-bold menuActive"
|
||||
|
|
@ -285,7 +258,6 @@ const doLogout = () => {
|
|||
dense
|
||||
exact
|
||||
>
|
||||
<!-- v-else -->
|
||||
<q-item-section avatar>
|
||||
<q-avatar size="md" font-size="20px">
|
||||
<q-icon :name="menuItem.key === active ? menuItem.activeIcon : menuItem.icon" />
|
||||
|
|
@ -299,7 +271,7 @@ const doLogout = () => {
|
|||
</div>
|
||||
</q-list>
|
||||
</q-scroll-area>
|
||||
</q-drawer>
|
||||
</q-drawer> -->
|
||||
|
||||
<q-page-container class="bg-grey-2">
|
||||
<q-page style="padding: 0 2%">
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue