เช็คค่าก่อนเปลี่ยน tab

src/modules/01_exam/components/Form/Document.vue

@@ -0,0 +1,123 @@
+<!-- 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>