ปรับ css ทะเบียนประวัติใหม่แท็บที่เหลือ

This commit is contained in:
Tanyalak 2024-04-24 17:26:12 +07:00
parent 15d174a98c
commit 0fa8d6ace1
15 changed files with 2153 additions and 2366 deletions

View file

@ -171,96 +171,88 @@ onMounted(() => {
});
</script>
<template>
<div class="col-sm-12 col-md-3">
<div flat class="q-pa-none">
<div class="col-12 row q-col-gutter-md">
<div class="row col-12">
<q-card bordered class="row col-12" style="border: 1px solid #d6dee1">
<div class="col-12 text-weight-medium bg-grey-1 q-py-sm q-px-md">
ปโหลดไฟลเอกสารหลกฐาน
<q-card bordered class="row col-12" style="border: 1px solid #d6dee1">
<div class="col-12 text-weight-medium bg-grey-1 q-py-sm q-px-md">
ปโหลดไฟลเอกสารหลกฐาน
</div>
<div class="col-12"><q-separator /></div>
<div class="row col-12 q-col-gutter-y-sm q-pa-sm">
<div class="col-12 row">
<q-file
for="inputFiles"
class="col-12"
outlined
dense
v-model="documentFile"
label="ไฟล์เอกสารหลักฐาน"
hide-bottom-space
accept=".pdf,.xlsx,.docx,.png,.jpg"
clearable
>
<template v-slot:prepend>
<q-icon name="attach_file" color="primary" />
</template>
<template v-slot:after>
<q-btn
size="14px"
v-if="documentFile"
flat
round
dense
color="add"
icon="mdi-upload"
@click="clickUpload(documentFile)"
><q-tooltip>ปโหลดไฟล</q-tooltip></q-btn
>
</template>
</q-file>
<!-- <div class="col-1 self-center" v-if="formData.documentFile"></div> -->
</div>
<div v-if="fileList.length > 0" class="col-xs-12 row">
<q-list class="full-width rounded-borders" bordered separator>
<q-item
clickable
v-ripple
v-for="data in fileList"
:key="data.id"
class="items-center"
>
<q-item-section>{{ data.fileName }}</q-item-section>
<q-space />
<div>
<q-btn
size="12px"
flat
round
dense
color="blue"
icon="mdi-download"
@click="downloadFile(data.fileName)"
><q-tooltip>ดาวนโหลดไฟล</q-tooltip></q-btn
>
<q-btn
size="12px"
flat
round
dense
color="red"
class="q-ml-sm"
icon="mdi-delete-outline"
@click="deleteFile(data.fileName)"
><q-tooltip>ลบไฟล</q-tooltip></q-btn
>
</div>
<div class="col-12"><q-separator /></div>
<div class="row col-12 q-col-gutter-y-sm q-pa-sm">
<div class="col-12 row">
<q-file
for="inputFiles"
class="col-12"
outlined
dense
v-model="documentFile"
label="ไฟล์เอกสารหลักฐาน"
hide-bottom-space
accept=".pdf,.xlsx,.docx,.png,.jpg"
clearable
>
<template v-slot:prepend>
<q-icon name="attach_file" color="primary" />
</template>
<template v-slot:after>
<q-btn
size="14px"
v-if="documentFile"
flat
round
dense
color="add"
icon="mdi-upload"
@click="clickUpload(documentFile)"
><q-tooltip>ปโหลดไฟล</q-tooltip></q-btn
>
</template>
</q-file>
</q-item>
</q-list>
</div>
<!-- <div class="col-1 self-center" v-if="formData.documentFile"></div> -->
</div>
<div v-if="fileList.length > 0" class="col-xs-12 row">
<q-list class="full-width rounded-borders" bordered separator>
<q-item
clickable
v-ripple
v-for="data in fileList"
:key="data.id"
class="items-center"
>
<q-item-section>{{ data.fileName }}</q-item-section>
<q-space />
<div>
<q-btn
size="12px"
flat
round
dense
color="blue"
icon="mdi-download"
@click="downloadFile(data.fileName)"
><q-tooltip>ดาวนโหลดไฟล</q-tooltip></q-btn
>
<q-btn
size="12px"
flat
round
dense
color="red"
class="q-ml-sm"
icon="mdi-delete-outline"
@click="deleteFile(data.fileName)"
><q-tooltip>ลบไฟล</q-tooltip></q-btn
>
</div>
</q-item>
</q-list>
</div>
<div class="col-12" v-else>
<q-card class="q-pa-md" bordered> ไมรายการเอกสาร </q-card>
</div>
</div>
</q-card>
</div>
<div class="col-12" v-else>
<q-card class="q-pa-md" bordered> ไมรายการเอกสาร </q-card>
</div>
</div>
</div>
</q-card>
</template>
<style scoped></style>