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

เช็คค่าก่อนเปลี่ยน tab

Browse source
This commit is contained in:
Kittapath 2023-03-19 00:43:28 +07:00
parent 3f020c73fc
commit 6ab1a862d6
18 changed files with 547 additions and 243 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,5 +1,5 @@
<template>
<q-card class="my-card" style="max-width: 1000px; width: 100%" bordered>
<q-card class="my-card q-mb-sm" bordered>
<q-card-actions class="q-pa-md text-left row" :class="getClass(status)">
<div class="text-black text-bold col-12" style="font-size: 16px">
{{ message(status) }}
@ -11,63 +11,91 @@
</q-card-actions>
</q-card>
<div class="d-flex justify-content-center align-items-center min-vh-100">
<div>
<div class="text-center q-pb-lg">
<!-- <q-badge
<div class="d-flex justify-content-center align-items-center row col-12">
<!-- <div class="text-center q-pb-lg">
<q-badge
:outline="badgeOutline"
:color="badgeColor"
:label="badgeLabel"
class="q-pa-nond text-center"
style="font-size: 16px"
/> -->
</div>
<div class="row q-pa-nond text-center">
<q-img :src="img" :ratio="1" style="max-width: 300px; height: 300px" />
<q-uploader
ref="uploader"
type="file"
:factory="uploadImg"
class="q-mx-auto col-6"
label="กรุณาอัปโหลดหลักฐานการชำระเงิน"
flat
color="blue"
bordered
/>
</div>
<div class="q-pa-md text-center">
<q-btn color="primary" @click="setStatus('processing')" label="ส่งหลักฐานการชำระเงิน" />
</div>
<div class="text-black text-center q-pb-lg">
***ถ้าต้องการเเก้ไขหลักฐานการโอนเงินกรุณาอัพโหลดซ้ำ***
</div>
</div> -->
<!-- <div class="row q-pa-nond text-center col-6"> -->
<!-- <q-img :src="img" fit="contain" style="max-height: 300px" class="col-6">
<div class="absolute-bottom text-center">หลักฐานชำระเงิน</div>
</q-img> -->
<q-file
borderless
v-model="fileData"
stack-label
@update:model-value="uploadImg"
class="col-12"
>
<!-- <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-img :src="img" fit="contain" style="max-height: 300px" class="col-12">
<div class="absolute-bottom text-center">หลักฐานชำระเงิน</div>
</q-img>
</q-file>
<!-- <q-uploader
ref="uploader"
type="file"
:factory="uploadImg"
class="col-6"
label="กรุณาอัปโหลดหลักฐานการชำระเงิน"
flat
color="blue"
bordered
/> -->
<!-- </div> -->
<div class="q-pa-md text-center col-12">
<q-btn color="primary" @click="setStatus('processing')" label="ส่งหลักฐานการชำระเงิน" />
</div>
<q-btn color="negative" @click="setStatus('rejected')">Rejected</q-btn>
<q-btn color="positive" @click="setStatus('success')">Success</q-btn>
<div class="text-black text-center q-pb-lg col-12">
***ถ้าต้องการเเก้ไขหลักฐานการโอนเงินกรุณาอัพโหลดซ้ำ***
</div>
<q-btn color="negative" @click="setStatus('rejected')">Re</q-btn>
<q-btn color="positive" @click="setStatus('success')">Su</q-btn>
<q-btn color="positive" @click="setStatus('next')">Ne</q-btn>
</div>
</template>
<script setup lang="ts">
import { file } from '@babel/types'
import { log } from 'console'
import { defineComponent, ref, Ref } from 'vue'
import { onMounted } from 'vue'
import { ComponentRef } from '@vue/runtime-core'
import { ref } from 'vue'
const props = defineProps({
fetchStep: {
type: Function,
default: () => console.log('not function')
},
step: {
type: Number,
required: true
}
})
const status = ref<string>('')
const rejectMessage = ref<string>('กรุณาจ่ายเงินให้ครบตามจำนวน')
const img = ref<string>('https://cdn-icons-png.flaticon.com/512/2496/2496846.png')
const fileData = ref<any>()
const uploadImg = (file: any) => {
fileData.value = null
// img.value =
// 'https://s359.kapook.com/r/600/auto/pagebuilder/ba154685-db18-4ac7-b318-a4a2b15b9d4c.jpg'
img.value =
'https://www.bangkokbank.com/-/media/feature/page-content/bbl-corporate/image-carousel-slides/digital-banking/bualuang-mbanking/how-to-use/payment/others/7_en.png'
}
const slide = ref(1)
const setStatus = (val: string) => {
status.value = val
if (val == 'next') props.fetchStep()
}
const getClass = (val: string) => {