hrms-recruit/src/modules/01_exam/components/OtherFile.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
      />
    </div>
  </q-card>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import HeaderTop from '@/components/top.vue'

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 fileUpload = async (file: any) => {
  return {
    url: 'http://localhost:4444/upload',
    method: 'POST'
  }
}

const cancelData = () => {}
</script>