hrms-bangkok/hrms-recruit
7
0
Fork 0
Code Issues Pull requests Projects Releases Packages 1 Wiki Activity Actions

ปรับ css กรอกข้อมูล และปรับรูปแบบ step การชำระเงิน

Browse source
This commit is contained in:
Tanyalak 2023-03-31 17:49:36 +07:00
parent 98738aa814
commit 6c7e57d9e3
11 changed files with 214 additions and 69 deletions
Download patch file Download diff file Expand all files Collapse all files

4
src/api/index.ts
View file

@ -8,8 +8,8 @@ const env = ref<string>(process.env.NODE_ENV || 'development')
const config = ref<any>({ const config = ref<any>({
development: { development: {
API_URI: 'https://localhost:7007/api/v1', /* API_URI: 'https://localhost:7007/api/v1', */
// API_URI: "https://wsh.frappet.com", API_URI: "https://bma-ehr-exam.frappet.synology.me/api/v1",
MEET_URI: 'meet.frappet.com' MEET_URI: 'meet.frappet.com'
}, },
test: { test: {

BIN
src/assets/ex_slip.jpeg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 56 KiB

BIN
src/assets/krungthai.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 156 KiB

4
src/components/Table.vue
View file

@ -19,7 +19,7 @@
</q-btn> </q-btn>
</div> --> </div> -->
<q-space /> <q-space />
<div class="items-center" style="display: flex"> <div class="items-center q-col-gutter-x-sm" style="display: flex">
<!-- ค้นหาข้อความใน table --> <!-- ค้นหาข้อความใน table -->
<q-input <q-input
standout standout
@ -31,7 +31,6 @@
debounce="300" debounce="300"
placeholder="ค้นหา" placeholder="ค้นหา"
style="max-width: 200px" style="max-width: 200px"
class="q-ml-sm"
> >
<template v-slot:append> <template v-slot:append>
<q-icon v-if="inputfilter == ''" name="search" /> <q-icon v-if="inputfilter == ''" name="search" />
@ -57,7 +56,6 @@
map-options map-options
emit-value emit-value
style="min-width: 150px" style="min-width: 150px"
class="gt-xs q-ml-sm"
/> />
</div> </div>
</div> </div>

32
src/modules/01_exam/components/Conference.vue
View file

@ -1,18 +1,18 @@
<template> <template>
<q-card-section class="row items-center col-12 q-py-sm"> <q-card-section class="row items-center col-12 q-py-sm bg-grey-2">
<div class="row col-11"> <div class="row col-11 justify-center">
<div class="text-bold">ข้อกำหนดและเงื่อนไข</div> <div class="text-bold text-subtitle1">ข้อกำหนดและเงื่อนไข</div>
</div> </div>
<q-space /> <q-space />
</q-card-section> </q-card-section>
<q-separator /> <q-separator />
<q-card-section style="max-height: 50vh" class="scroll"> <q-card-section style="max-height: 70vh" class="scroll q-pb-sm">
<div class="text-center"> <div class="text-center row justify-center">
<div class="col-12 text-subtitle1 text-weight-bold text-negative q-pt-sm"> <div class="col-12 text-subtitle1 text-weight-bold text-negative q-pt-sm">
ข้อกำหนดและเงื่อนไขฉบับนี้ ถือเป็นข้อตกลงในการเก็บข้อมูล ข้อกำหนดและเงื่อนไขฉบับนี้ ถือเป็นข้อตกลงในการเก็บข้อมูล
</div> </div>
<q-card class="col-12 q-pa-md" flat> <q-card class="col-xs-12 col-sm-11 row text-left q-py-sm" flat>
<q-card-section class="text-black text-left"> <div class="col-12">
<p> <p>
&nbsp;&nbsp;&nbsp;&nbsp;หนังสือยินยอมให้เก็บ ใช้หรือเปิดเผยข้อมูลส่วนบุคคลของผู้สมัคร &nbsp;&nbsp;&nbsp;&nbsp;หนังสือยินยอมให้เก็บ ใช้หรือเปิดเผยข้อมูลส่วนบุคคลของผู้สมัคร
เพื่อสมัครงานกับกรุงเทพมหานครฯ 1. คำยินยอมจากผู้ให้ข้อมูลกับกรุงเทพมหานครฯ ข้าพเจ้า เพื่อสมัครงานกับกรุงเทพมหานครฯ 1. คำยินยอมจากผู้ให้ข้อมูลกับกรุงเทพมหานครฯ ข้าพเจ้า
@ -48,14 +48,12 @@
จะใช้วิธีการที่ชอบด้วยกฏหมายและเป็นธรรมในการเก็บรวบรวมข้อมูลส่วนบุคคลอย่างจำกัดเพียงเท่าที่จำเป็นภายใต้วัตถุประสงค์การทำงานของกรุงเทพมหานครฯ จะใช้วิธีการที่ชอบด้วยกฏหมายและเป็นธรรมในการเก็บรวบรวมข้อมูลส่วนบุคคลอย่างจำกัดเพียงเท่าที่จำเป็นภายใต้วัตถุประสงค์การทำงานของกรุงเทพมหานครฯ
เพื่อใช้เป็นข้อมูลประกอบการพิจารณาคัดเลือกตามตำแหน่งที่ผู้ให้ข้อมูลประสงค์จะสมัครรับการคัดเลือกโดยกรุงเทพมหานครฯ เพื่อใช้เป็นข้อมูลประกอบการพิจารณาคัดเลือกตามตำแหน่งที่ผู้ให้ข้อมูลประสงค์จะสมัครรับการคัดเลือกโดยกรุงเทพมหานครฯ
จะเก็บรวบรวมข้อมูลส่วนบุคคลของท่าน ดังนี้ จะเก็บรวบรวมข้อมูลส่วนบุคคลของท่าน ดังนี้
<ul> <ul style="list-style-type: circle;">
<ul>
<li>ชื่อ-นามสกุล เพื่อติดต่อกับทางกรุงเทพมหานครฯ</li> <li>ชื่อ-นามสกุล เพื่อติดต่อกับทางกรุงเทพมหานครฯ</li>
<li>อีเมล์ เพื่อใช้ในการติดต่อกับกรุงเทพมหานครฯ</li> <li>อีเมล์ เพื่อใช้ในการติดต่อกับกรุงเทพมหานครฯ</li>
<li>เบอร์โทร เพื่อใช้สมัครงานกับทางกรุงเทพมหานครฯ</li> <li>เบอร์โทร เพื่อใช้สมัครงานกับทางกรุงเทพมหานครฯ</li>
<li>ที่อยู่ เพื่อใช้สมัครงานกับทางกรุงเทพมหานครฯ</li> <li>ที่อยู่ เพื่อใช้สมัครงานกับทางกรุงเทพมหานครฯ</li>
<li>ประวัติการทำงาน, ประวัติการศึกษา, ประวัติการฝึกอบรม ตามข้อมูลข้างต้น</li> <li>ประวัติการทำงาน, ประวัติการศึกษา, ประวัติการฝึกอบรม ตามข้อมูลข้างต้น</li>
</ul>
</ul> </ul>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ท้้งนี้ข้อมูลส่วนบุคคลดังกล่าวเป็นข้อมูลที่จำเป็นสำหรับการทำงานของกรุงเทพมหานครฯ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ท้้งนี้ข้อมูลส่วนบุคคลดังกล่าวเป็นข้อมูลที่จำเป็นสำหรับการทำงานของกรุงเทพมหานครฯ
หากไม่มีข้อมูลดังกล่าว อาจส่งผลต่อกระบวนการพิจารณาคุณสมบัติของผู้สมัคร หากไม่มีข้อมูลดังกล่าว อาจส่งผลต่อกระบวนการพิจารณาคุณสมบัติของผู้สมัคร
@ -70,17 +68,19 @@
จะไม่ดำเนินการอื่นใดแตกต่างจากที่ระบุในวัตถุประสงค์เว้นแต่มีกฏหมายบัญญัติให้กระทำหรือมีหนังสือร้องขอที่สามารถปฏิบัติได้ตามกฏหมาย จะไม่ดำเนินการอื่นใดแตกต่างจากที่ระบุในวัตถุประสงค์เว้นแต่มีกฏหมายบัญญัติให้กระทำหรือมีหนังสือร้องขอที่สามารถปฏิบัติได้ตามกฏหมาย
เช่น เพื่อความจำเป็นในการป้องกันด้านสุขภาพและโรคติดต่ออันตราย เช่น เพื่อความจำเป็นในการป้องกันด้านสุขภาพและโรคติดต่ออันตราย
</p> </p>
<q-checkbox <div class="row col-12 justify-center">
v-model="acceptTermOfUse" <q-checkbox
label="ข้าพเจ้ารับรองว่า ข้าพเจ้ามีคุณสมบัติครบถ้วนตามประกาศรับสมัคร ข้อความข้างต้นตรงตามความจริงทุกประการ" v-model="acceptTermOfUse"
/> label="ข้าพเจ้ารับรองว่า ข้าพเจ้ามีคุณสมบัติครบถ้วนตามประกาศรับสมัคร ข้อความข้างต้นตรงตามความจริงทุกประการ"
</q-card-section> />
</div>
</div>
</q-card> </q-card>
</div> </div>
</q-card-section> </q-card-section>
<q-separator /> <q-separator />
<q-card-actions align="right" class="bg-white text-teal justify-center"> <q-card-actions align="right" class="bg-white text-teal justify-center">
<q-btn label="ตกลง" color="primary" @click="ok" :disable="!acceptTermOfUse" /> <q-btn label="ยอมรับ" style="width: 150px;" :color="!acceptTermOfUse ? 'grey':'primary'" @click="ok" :disable="!acceptTermOfUse" />
</q-card-actions> </q-card-actions>
</template> </template>

157
src/modules/01_exam/components/ExamPayment.vue
View file

@ -1,16 +1,147 @@
<template> <template>
<div class="col-12"> <div class="col-12">
<div class="row justify-center q-pa-md"> <div class="row q-px-sm">
<div class="col-4"> <div class="text-bold text-subtitle1 q-pb-md">เลือกวีธีการชำระเงิน</div>
<q-card flat class="q-pa-md text-left row q-mb-md" :class="getClass(status)"> <div class="row col-12 q-gutter-y-md q-mb-lg">
<q-list bordered class="col-12 rounded-borders">
<q-item tag="label" v-ripple class="q-pa-md">
<q-item-section avatar>
<q-icon name="mdi-cellphone-settings" color="positive" size="30px" />
</q-item-section>
<q-item-section>
<q-item-label class="text-weight-medium text-subtitle1">โอนเงินผ่านมือถือ</q-item-label>
<q-item-label caption class="gt-xs">อนุมัติหลังแจ้งการโอนภายใน 24 ชั่วโมง</q-item-label>
</q-item-section>
<q-item-section avatar class="gt-xs">
<q-avatar size="32px">
<q-img src="@/assets/krungthai.png" class="col-12"/>
</q-avatar>
</q-item-section>
<q-item-section side>
<q-radio v-model="pay" val="teal" color="blue" />
</q-item-section>
</q-item>
<q-separator v-show="pay == 'teal'" />
<q-slide-transition :duration="100" class="">
<div v-show="pay == 'teal'" class="q-pa-md bg-grey-1">
<div class="row q-col-gutter-sm">
<div class=" col-xs-12 col-sm-7">
<q-card bordered class="items-start q-pa-md row q-mb-sm" style="height: 300px">
<div class="row col-12">
<div class="col-12 row no-wrap items-center">
<q-avatar size="50px">
<q-img src="@/assets/krungthai.png"/>
</q-avatar>
<div class="column q-pl-md">
<strong>ธนาคารกรุงไทย</strong>
สำนักงานทรัพยากรบุคคล
<div>387-3-94793-0</div>
</div>
</div>
<div class="col-12">
<q-separator class="q-my-md"/>
<div class="q-pb-sm">
<span class="text-weight-medium">ชื่อบัญชี :</span>
<span class="text-blue q-pl-sm">สำนักงานทรัพยากรบุคคล</span>
</div>
<div class="q-pb-sm">
<span class="text-weight-medium">ธนาคารกรุงไทย :</span>
<span class="text-blue q-pl-sm"> 387-3-94793-0</span>
</div>
<div class="q-pb-sm">
<span class="text-weight-medium">รหัสใบสั่งซื้อ :</span>
<span class="text-blue q-pl-sm">12837495985900</span>
</div>
<div>
<span class="text-weight-medium">ยอดสุทธิ (บาท) :</span>
<span class="text-blue q-pl-sm text-bold">200.00</span>
</div>
</div>
<div class="col-12 text-grey-6 q-mt-xl">
** ถ้าต้องการเเก้ไขหลักฐานการโอนเงิน กรุณาอัปโหลดซ้ำ
</div>
</div>
</q-card>
</div>
<div class=" col-xs-12 col-sm-5">
<label for="file-upload" class="col-12 row"><!-- :src="img" -->
<q-img src="@/assets/ex_slip.jpeg" fit="contain" style="min-height: 300px; max-height: 300px;" class="col-12 bg-white">
<div class="absolute-bottom text-center">หลักฐานชำระเงิน</div>
</q-img>
</label>
<input id="file-upload" type="file" />
</div>
</div>
</div>
</q-slide-transition>
</q-list>
<q-list bordered class="col-12 rounded-borders">
<q-item tag="label" v-ripple class="q-pa-md">
<q-item-section avatar>
<q-icon name="mdi-cash" color="positive" size="30px" />
</q-item-section>
<q-item-section>
<q-item-label class="text-weight-medium text-subtitle1">โอนเงินผ่านทางเครื่อง ATM / เคาน์เตอร์ธนาคาร</q-item-label>
<q-item-label caption class="gt-xs">อนุมัติทันทีหลังชำระ</q-item-label>
</q-item-section>
<q-item-section avatar class="gt-xs">
<q-avatar size="32px">
<q-img src="@/assets/krungthai.png" class="col-12"/>
</q-avatar>
</q-item-section>
<q-item-section side>
<q-radio v-model="pay" val="orange" color="blue" />
</q-item-section>
</q-item>
<q-separator v-show="pay == 'orange'" />
<q-slide-transition :duration="100">
<div v-show="pay == 'orange'" class="q-pa-md bg-grey-1">
<q-card bordered class="q-pa-md">
<div class="q-pb-sm">
<span class="text-weight-medium">รหัสใบสั่งซื้อ :</span>
<span class="text-blue q-pl-sm">12837495985900</span>
</div>
<div>
<span class="text-weight-medium">ยอดสุทธิ (บาท) :</span>
<span class="text-blue q-pl-sm text-bold">200.00</span>
</div>
<q-btn
color="blue"
icon="print"
class="q-px-md q-mt-md"
outline
dense
label="พิมพ์ใบแจ้งการชำระเงิน"
/>
</q-card>
<div class="q-pt-md q-pb-xs text-bold">ธนาคารกรุงไทย</div>
<div class="q-pb-md">สอดบัตร ATM กดรหัสและเลือกรายการ</div>
<ul class="q-gutter-y-sm">
<li>ขั้นที่ 1 บริการอื่นๆ</li>
<li>ขั้นที่ 2 ชำระค่าบริการ</li>
<li>ขั้นที่ 3 ระบุรหัสบริษัท</li>
<li>ขั้นที่ 4 เลือกบัญชีผู้ชำระเงิน คือ บัญชีของตัวท่านว่าเป็นบัญชีออมทรัพย์ หรือ กระแสรายวัน</li>
<li>ขั้นที่ 5 ใส่รหัสบริษัทฯ คือ <span class="text-blue text-bold">2111</span> และ ใส่ Ref No.1 ขั้นด้วยเครื่องหมายจุด ( . ) แล้วตามด้วย Ref No.2 (ดูใน "ใบแจ้งการชำระเงิน")</li>
<li>ยกตัวอย่างเช่น ถ้า Ref No.1 คือ 012345 และ Ref No.2 คือ 308833ต้องใส่ เป็น 012345.308833</li>
<li>ขั้นที่ 6 ใส่จำนวนเงินที่ชำระรวมหน่วยสตางค์</li>
<li>ขั้นที่ 7 ตรวจสอบรายการ</li>
</ul>
</div>
</q-slide-transition>
</q-list>
</div>
<!-- <q-card flat class="q-pa-md text-left row q-mb-md" :class="getClass(status)">
<div class="text-bold col-12" :class="getFontColor(status)"> <div class="text-bold col-12" :class="getFontColor(status)">
{{ message(status) }} {{ message(status) }}
</div> </div>
<div class="col-12" v-if="status === 'rejectPayment'" :class="getFontColor(status)"> <div class="col-12" v-if="status === 'rejectPayment'" :class="getFontColor(status)">
<li>{{ rejectMessage }}</li> <li>{{ rejectMessage }}</li>
</div> </div>
</q-card> </q-card> -->
<q-file
<!-- <q-file
borderless borderless
v-model="fileData" v-model="fileData"
stack-label stack-label
@ -20,10 +151,10 @@
<q-img :src="img" fit="contain" style="max-height: 300px" class="col-12"> <q-img :src="img" fit="contain" style="max-height: 300px" class="col-12">
<div class="absolute-bottom text-center">หลักฐานชำระเงิน</div> <div class="absolute-bottom text-center">หลักฐานชำระเงิน</div>
</q-img> </q-img>
</q-file> </q-file> -->
</div> </div>
</div> </div>
<div class="q-pa-md text-center col-12" v-if="status == 'payment' || status == 'rejectPayment'"> <!-- <div class="q-pa-md text-center col-12" v-if="status == 'payment' || status == 'rejectPayment'">
<q-btn <q-btn
color="primary" color="primary"
@ -33,7 +164,14 @@
</div> </div>
<div class="text-black text-center q-pb-lg q-pt-sm col-12 text-deep-orange"> <div class="text-black text-center q-pb-lg q-pt-sm col-12 text-deep-orange">
<q-icon name="mdi-alert" size="18px" color="deep-orange" class="q-mr-sm" />ถ้าต้องการเเก้ไขหลักฐานการโอนเงินกรุณาอัปโหลดซ้ำ <q-icon name="mdi-alert" size="18px" color="deep-orange" class="q-mr-sm" />ถ้าต้องการเเก้ไขหลักฐานการโอนเงินกรุณาอัปโหลดซ้ำ
</div> </div> -->
<div class="row col-12 justify-center">
<q-btn
:color="pay === null ? 'grey': 'primary'"
:disable="pay === null"
style="width: 200px;"
label="แจ้งการชำระเงิน"
/>
</div> </div>
</template> </template>
@ -60,9 +198,10 @@ const $q = useQuasar()
const mixin = useCounterMixin() //เรียกฟังก์ชันกลาง const mixin = useCounterMixin() //เรียกฟังก์ชันกลาง
const { success } = mixin const { success } = mixin
const rejectMessage = ref<string>('กรุณาจ่ายเงินให้ครบตามจำนวน') const rejectMessage = ref<string>('กรุณาจ่ายเงินให้ครบตามจำนวน')
const img = ref<string>('https://cdn-icons-png.flaticon.com/512/2496/2496846.png') const img = ref<string>('@/assets/krungthai.png')
const fileData = ref<any>() const fileData = ref<any>()
const loader = ref<boolean>(false) const loader = ref<boolean>(false)
const pay = ref(null)
const route = useRoute() const route = useRoute()
const examId = ref<string>(route.params.id.toString()) const examId = ref<string>(route.params.id.toString())

5
src/modules/01_exam/components/Form/Address.vue
View file

@ -96,8 +96,9 @@
:label="`${'รหัสไปรษณีย์'}`" :label="`${'รหัสไปรษณีย์'}`"
/> />
</div> </div>
<div class="col-xs-12 q-gutter-sm items-center flex q-mb-sm"> <div class="col-xs-12 q-gutter-sm items-center flex q-mb-sm row">
<label class="text-bold">ที่อยู่ปัจจุบันตรงกับที่อยู่ตามทะเบียนบ้าน</label> <div class="text-bold" v-if="$q.screen.gt.xs">ที่อยู่ปัจจุบันตรงกับที่อยู่ตามทะเบียนบ้าน</div>
<div class="text-bold col-12 q-pt-sm" v-else>ที่อยู่ปัจจุบันตรงกับที่อยู่ตามทะเบียนบ้าน</div>
<q-radio <q-radio
v-model="defaultAddress.same" v-model="defaultAddress.same"
checked-icon="task_alt" checked-icon="task_alt"

8
src/modules/01_exam/components/Form/Document.vue
View file

@ -2,7 +2,7 @@
<template> <template>
<HeaderTop <HeaderTop
v-model:edit="edit" v-model:edit="edit"
header="อัปโหลดเอกสาร(เช่น สำเนาบัตรประชาชน ทะเบียนบ้าน วุฒิการศึกษา)" :header="$q.screen.gt.xs ? 'อัปโหลดเอกสาร(เช่น สำเนาบัตรประชาชน ทะเบียนบ้าน วุฒิการศึกษา)':'อัปโหลดเอกสาร'"
icon="mdi-file-document" icon="mdi-file-document"
:addData="true" :addData="true"
:editOnly="true" :editOnly="true"
@ -11,23 +11,25 @@
<div v-if="edit" class="row justify-center row col-12"> <div v-if="edit" class="row justify-center row col-12">
<q-input <q-input
class="q-mt-sm col-12" class="q-mt-sm col-12 q-pb-xs"
:outlined="edit" :outlined="edit"
dense dense
lazy-rules lazy-rules
:readonly="!edit" :readonly="!edit"
:borderless="!edit" :borderless="!edit"
v-model="name" v-model="name"
hide-bottom-space
:rules="[(val) => !!val || `${'กรุณากรอกชื่อเอกสาร'}`]" :rules="[(val) => !!val || `${'กรุณากรอกชื่อเอกสาร'}`]"
:label="`${'ชื่อเอกสาร'}`" :label="`${'ชื่อเอกสาร'}`"
/> />
<q-uploader <q-uploader
color="blue" color="gray"
type="file" type="file"
flat flat
auto-upload auto-upload
:factory="fileUpload" :factory="fileUpload"
class="full-width" class="full-width"
text-color="dark"
:max-size="10000000" :max-size="10000000"
accept=".jpg,.png,.pdf,.csv,.doc" accept=".jpg,.png,.pdf,.csv,.doc"
bordered bordered

4
src/modules/01_exam/components/Form/Family.vue
View file

@ -106,7 +106,7 @@
/> />
</div> </div>
<div class="col-xs-12 text-weight-bold">• บิดา</div> <div class="col-xs-12 text-weight-bold q-pb-sm">• บิดา</div>
<div class="col-xs-12 col-sm-2 col-md-2"> <div class="col-xs-12 col-sm-2 col-md-2">
<q-select <q-select
:class="getClass(status == 'register' || status == 'rejectRegister')" :class="getClass(status == 'register' || status == 'rejectRegister')"
@ -179,7 +179,7 @@
/> />
</div> </div>
<div class="col-xs-12 text-weight-bold">• มารดา</div> <div class="col-xs-12 text-weight-bold q-pb-sm">• มารดา</div>
<div class="col-xs-12 col-sm-2 col-md-2"> <div class="col-xs-12 col-sm-2 col-md-2">
<q-select <q-select
:class="getClass(status == 'register' || status == 'rejectRegister')" :class="getClass(status == 'register' || status == 'rejectRegister')"

57
src/modules/01_exam/components/Form/Information.vue
View file

@ -9,8 +9,8 @@
:editData="false" :editData="false"
/> />
<!-- :changeBtn="changeBtn" --> <!-- :changeBtn="changeBtn" -->
<q-form ref="myform" class="col-12 row q-col-gutter-x-sm"> <q-form ref="myform" class="col-12 row q-col-gutter-x-sm justify-center q-col-gutter-sm">
<div class="row col-xs-12 col-sm-10 items-center q-col-gutter-x-sm q-col-gutter-y-xs"> <div class="row col-xs-12 col-sm-12 col-md-10 items-center q-col-gutter-x-sm q-col-gutter-y-xs">
<div class="col-xs-12 col-sm-2 col-md-2"> <div class="col-xs-12 col-sm-2 col-md-2">
<q-select <q-select
:class="getClass(status == 'register' || status == 'rejectRegister')" :class="getClass(status == 'register' || status == 'rejectRegister')"
@ -294,33 +294,28 @@
</div> </div>
<div class="col-xs-12 col-sm-3 col-md-3 q-pb-md"> <div class="col-xs-12 col-sm-3 col-md-3 q-pb-md">
<q-input <q-input
:class="getClass(false)" :class="getClass(status == 'register' || status == 'rejectRegister')"
:outlined="false"
dense dense
lazy-rules lazy-rules
:readonly="true" readonly
:borderless="true" borderless
style="padding:0 12px;"
v-model="defaultInformation.email" v-model="defaultInformation.email"
label="E-mail address" label="E-mail address"
/> />
</div> </div>
</div> </div>
<div class="row col-xs-12 col-sm-2 justify-center"> <div class="row col-xs-12 col-sm-3 col-md-2 justify-center">
<div class="containerimage row justify-center"> <div class="containerimage row justify-center col-xs-6 col-sm-10 col-md-12">
<q-file <label for="file-upload" class="col-12 row">
borderless <q-img src="@/assets/avatar_user.jpg" class="col-12">
v-model="fileData" <div class="overlay" v-if="status == 'register' || status == 'rejectRegister'">
stack-label <q-icon name="mdi-camera" />
:readonly="!(status == 'register' || status == 'rejectRegister')" <br />อัปเดต
@update:model-value="pickFile" </div>
> </q-img>
<q-img src="@/assets/avatar_user.jpg" class="col-12"> </label>
<div class="overlay" v-if="status == 'register' || status == 'rejectRegister'"> <input id="file-upload" type="file" />
<q-icon name="mdi-camera" />
<br />อัปเดต
</div>
</q-img>
</q-file>
</div> </div>
<div class="col-12 text-center" v-if="disabledPic"> <div class="col-12 text-center" v-if="disabledPic">
<q-btn outline dense color="black" icon="mdi-content-save-outline" @click="savePic"> <q-btn outline dense color="black" icon="mdi-content-save-outline" @click="savePic">
@ -328,7 +323,7 @@
</q-btn> </q-btn>
</div> </div>
</div> </div>
<div class="col-xs-12 col-sm-12"> <div class="col-xs-12 col-sm-9 col-md-12">
<q-input <q-input
:class="getClass(status == 'register' || status == 'rejectRegister')" :class="getClass(status == 'register' || status == 'rejectRegister')"
:outlined="status == 'register' || status == 'rejectRegister'" :outlined="status == 'register' || status == 'rejectRegister'"
@ -489,8 +484,8 @@ const getClass = (val: boolean) => {
.q-img { .q-img {
display: block; display: block;
width: 160px; width: 100%;
height: 170px; max-height: 170px;
padding: 1%; padding: 1%;
border-radius: 8px; border-radius: 8px;
border: solid 2px rgba(168, 168, 168, 0.055) !important; border: solid 2px rgba(168, 168, 168, 0.055) !important;
@ -504,7 +499,7 @@ const getClass = (val: boolean) => {
background: rgba(0, 0, 0, 0.7); background: rgba(0, 0, 0, 0.7);
color: #f1f1f1; color: #f1f1f1;
transition: 0.5s ease; transition: 0.5s ease;
width: 160px; width: 100%;
height: 70px; height: 70px;
opacity: 0; opacity: 0;
color: white; color: white;
@ -520,4 +515,14 @@ const getClass = (val: boolean) => {
.q-field__bottom { .q-field__bottom {
padding: 5px 10px 0px 0px; padding: 5px 10px 0px 0px;
} }
input[type="file"] {
display: none;
}
.custom-file-upload {
border: 1px solid #ccc;
display: inline-block;
padding: 6px 12px;
cursor: pointer;
}
</style> </style>

12
src/modules/01_exam/views/ExamDetail.vue
View file

@ -1,7 +1,7 @@
<!-- page:detail page รายการสอบทั้งหมด --> <!-- page:detail page รายการสอบทั้งหมด -->
<template> <template>
<q-toolbar class="q-pa-sm text-center"> <q-toolbar class="q-pa-sm text-center">
<q-toolbar-title class="text-dark text-weight-medium"> <q-toolbar-title class="text-dark">
{{ tittle }} {{ tittle }}
</q-toolbar-title> </q-toolbar-title>
</q-toolbar> </q-toolbar>
@ -49,7 +49,7 @@
</q-step> </q-step>
</q-stepper> </q-stepper>
<q-dialog :model-value="modalConsend" persistent> <q-dialog :model-value="modalConsend" persistent>
<q-card style="min-width: 800px"> <q-card :style="$q.screen.gt.xs ? 'min-width: 55vw':'min-width: 80vw'">
<Conference :ok="consendOk" :close="consenClose" /> <Conference :ok="consendOk" :close="consenClose" />
</q-card> </q-card>
</q-dialog> </q-dialog>
@ -77,10 +77,10 @@ const status = ref<string>('register')
const modalConsend = ref<boolean>(false) const modalConsend = ref<boolean>(false)
onMounted(async () => { onMounted(async () => {
// stepRaw.value = 4 stepRaw.value = 3
// step.value = 4 step.value = 3
await fetchPeriodExam() /* await fetchPeriodExam()
await candidateCheck() await candidateCheck() */
}) })
const candidateCheck = async () => { const candidateCheck = async () => {