123 lines
3.3 KiB
Vue
123 lines
3.3 KiB
Vue
<!-- card เอกสารหลักฐาน -->
|
|
<template>
|
|
<q-card flat bordered class="col-12 row q-px-lg q-py-md q-mt-md">
|
|
<HeaderTop
|
|
v-model:edit="edit"
|
|
header="เอกสารหลักฐาน(เช่น สำเนาบัตรประชาชน ทะเบียนบ้าน วุฒิการศึกษา)"
|
|
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">
|
|
<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="row col-12">
|
|
<q-btn
|
|
class="gt-xs"
|
|
size="12px"
|
|
flat
|
|
dense
|
|
round
|
|
color="blue"
|
|
icon="mdi-download-outline"
|
|
/>
|
|
<q-btn
|
|
class="gt-xs"
|
|
size="12px"
|
|
flat
|
|
dense
|
|
round
|
|
icon="mdi-delete-outline"
|
|
v-show="edit"
|
|
/>
|
|
</div>
|
|
</q-item-section>
|
|
</q-item>
|
|
</q-list>
|
|
</q-card>
|
|
<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
|
|
label="[ไฟล์ jpg,png,pdf,csv,doc]"
|
|
/>
|
|
</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')
|
|
},
|
|
step: {
|
|
type: Number,
|
|
required: true
|
|
}
|
|
})
|
|
|
|
const edit = ref<boolean>(false)
|
|
const addData = ref<boolean>(true)
|
|
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 () => {
|
|
if (props.step !== 2) {
|
|
addData.value = false
|
|
}
|
|
})
|
|
|
|
const fileUpload = async (file: any) => {
|
|
return {
|
|
url: 'http://localhost:4444/upload',
|
|
method: 'POST'
|
|
}
|
|
}
|
|
|
|
const cancelData = () => {}
|
|
</script>
|