Merge branch 'ananda' into develop

This commit is contained in:
AnandaTon 2023-03-21 12:05:44 +07:00
commit 71239f80e3
2 changed files with 55 additions and 48 deletions

View file

@ -1,16 +1,17 @@
<template>
<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) }}
</div>
<div class="text-black col-12" v-if="status === 'rejected'">
<li>{{ rejectMessage }}</li>
</div>
<!-- <q-space /> -->
</q-card-actions>
</q-card>
<div>
<q-card class="my-card q-mb-sm" bordered>
<q-card-actions class="q-pa-md text-left row justify-center" :class="getClass(status)">
<div class="text-bold col-12" :class="getFontColor(status)">
{{ message(status) }}
</div>
<div class="col-12" v-if="status === 'rejected'" :class="getFontColor(status)">
<li>{{ rejectMessage }}</li>
</div>
<!-- <q-space /> -->
</q-card-actions>
</q-card>
</div>
<div class="d-flex justify-content-center align-items-center row col-12">
<!-- <div class="text-center q-pb-lg">
<q-badge
@ -101,13 +102,13 @@ const setStatus = (val: string) => {
const getClass = (val: string) => {
switch (val) {
case 'processing':
return 'bg-lime-12'
return 'bg-yellow-3'
case 'rejected':
return 'bg-deep-orange-11'
return 'bg-red-2'
case 'success':
return 'bg-green-12'
return 'bg-light-green-3'
default:
return 'bg-blue-4'
return 'bg-light-blue-1'
}
}
const message = (val: string) => {
@ -122,6 +123,19 @@ const message = (val: string) => {
return 'รออัปโหลดหลักฐานชำระเงิน'
}
}
const getFontColor = (val: string) => {
switch (val) {
case 'processing':
return 'text-orange'
case 'rejected':
return 'text-red-12'
case 'success':
return 'text-green'
default:
return 'text-blue'
}
}
console.log(getFontColor)
</script>
<style lang="scss" scoped>

View file

@ -10,39 +10,7 @@
:cancel="cancelData"
/>
<div class="row col-12 q-gutter-sm q-pt-sm">
<q-card bordered flat class="full-width">
<q-list separator>
<q-item v-for="file in files" :key="file.key" class="q-my-xs">
<q-item-section>
<q-item-label class="full-width ellipsis">
{{ file.name }}
</q-item-label>
<q-item-label caption> สถานะ: {{ file.status }} / {{ file.sizeLabel }} </q-item-label>
</q-item-section>
<q-item-section top side>
<div class="q-gutter-sm">
<q-btn size="12px" flat dense round color="blue" icon="mdi-download-outline">
<q-tooltip>ดาวนโหลด</q-tooltip>
</q-btn>
<q-btn
size="12px"
flat
dense
round
color="red"
icon="mdi-delete-outline"
v-if="edit"
>
<q-tooltip>ลบไฟล</q-tooltip>
</q-btn>
</div>
</q-item-section>
</q-item>
</q-list>
</q-card>
<div v-if="edit" class="col-12 q-ma-none">
<q-separator class="q-mt-sm" />
<q-input
class="q-my-sm"
hide-bottom-space
@ -68,6 +36,30 @@
/>
</div>
</div>
<q-separator class="q-mt-sm" />
<q-card bordered flat class="full-width">
<q-list separator>
<q-item v-for="file in files" :key="file.key" class="q-my-xs">
<q-item-section>
<q-item-label class="full-width ellipsis">
{{ file.name }}
</q-item-label>
<q-item-label caption> สถานะ: {{ file.status }} / {{ file.sizeLabel }} </q-item-label>
</q-item-section>
<q-item-section top side>
<div class="q-gutter-sm">
<q-btn size="12px" flat dense round color="blue" icon="mdi-download-outline">
<q-tooltip>ดาวนโหลด</q-tooltip>
</q-btn>
<q-btn size="12px" flat dense round color="red" icon="mdi-delete-outline" v-if="edit">
<q-tooltip>ลบไฟล</q-tooltip>
</q-btn>
</div>
</q-item-section>
</q-item>
</q-list>
</q-card>
</q-card>
</template>
<script setup lang="ts">
@ -124,6 +116,7 @@ onMounted(async () => {
})
const fileUpload = async (file: any) => {
name.value = file[0].name
return {
url: 'http://localhost:4444/upload',
method: 'POST'