135 lines
4 KiB
Vue
135 lines
4 KiB
Vue
<!-- card อัปโหลดเอกสาร -->
|
|
<template>
|
|
<q-card flat bordered class="col-12 q-px-lg q-py-md q-mt-md">
|
|
<div class="col-12">
|
|
<HeaderTop
|
|
v-model:edit="edit"
|
|
header="อัปโหลดเอกสาร(เช่น สำเนาบัตรประชาชน ทะเบียนบ้าน วุฒิการศึกษา)"
|
|
icon="mdi-file-document"
|
|
:addData="true"
|
|
:editOnly="true"
|
|
:cancel="cancelData"
|
|
:editData="status == 'register' || status == 'rejectRegister'"
|
|
/>
|
|
</div>
|
|
<div class="col-12">
|
|
<div v-if="edit" class="row justify-center q-pa-md">
|
|
<div class="col-4">
|
|
<q-input
|
|
class="q-my-sm"
|
|
:outlined="edit"
|
|
dense
|
|
lazy-rules
|
|
:readonly="!edit"
|
|
:borderless="!edit"
|
|
v-model="name"
|
|
:rules="[(val) => !!val || `${'กรุณากรอกชื่อเอกสาร'}`]"
|
|
:label="`${'ชื่อเอกสาร'}`"
|
|
/>
|
|
<q-uploader
|
|
color="blue"
|
|
type="file"
|
|
flat
|
|
auto-upload
|
|
:factory="fileUpload"
|
|
class="full-width"
|
|
:max-size="30000000"
|
|
accept=".jpg,.png,.pdf,.csv,.doc"
|
|
bordered
|
|
label="[ไฟล์ jpg,png,pdf,csv,doc ขนาดไม่เกิน 30MB]"
|
|
/>
|
|
</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>
|
|
</div>
|
|
</q-card>
|
|
</template>
|
|
<script setup lang="ts">
|
|
import { onMounted, ref, watch } from 'vue'
|
|
import HeaderTop from '@/components/top.vue'
|
|
|
|
const props = defineProps({
|
|
loader: {
|
|
//หน้า main มีการอัพเดทค่าให้ refresh data
|
|
type: Boolean,
|
|
required: true
|
|
},
|
|
statusEdit: {
|
|
type: Boolean,
|
|
required: true
|
|
},
|
|
notiNoEdit: {
|
|
type: Function,
|
|
default: () => console.log('not function')
|
|
},
|
|
status: {
|
|
type: String,
|
|
required: true
|
|
}
|
|
})
|
|
|
|
const edit = ref<boolean>(props.status == 'register' || props.status == 'rejectRegister')
|
|
const name = ref<string>('')
|
|
const files = ref<any>([
|
|
{
|
|
key: 1,
|
|
name: 'เอกสารข้อมูลการเปลี่ยนชื่อ',
|
|
status: 'อัปโหลดเสร็จสิ้น',
|
|
sizeLabel: '176MB'
|
|
},
|
|
{
|
|
key: 2,
|
|
name: 'เอกสารข้อมูลการสมรส',
|
|
status: 'อัปโหลดเสร็จสิ้น',
|
|
sizeLabel: '89MB'
|
|
}
|
|
])
|
|
const emit = defineEmits(['update:loader', 'update:statusEdit'])
|
|
|
|
watch(edit, (count: boolean, prevCount: boolean) => {
|
|
emit('update:statusEdit', count)
|
|
})
|
|
|
|
onMounted(async () => {})
|
|
|
|
const fileUpload = async (file: any) => {
|
|
name.value = file[0].name
|
|
return {
|
|
url: 'http://localhost:4444/upload',
|
|
method: 'POST'
|
|
}
|
|
}
|
|
|
|
const cancelData = () => {}
|
|
</script>
|