เพิม่ปุ่มลบ ประวัติการศึกษา

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

@@ -1,6 +1,6 @@
 <!-- card เอกสารหลักฐาน -->
 <template>
-  <q-card flat bordered class="col-12 row q-px-lg q-py-md q-mt-md">
+  <q-card flat bordered class="col-12 q-px-lg q-py-md">
     <HeaderTop
       v-model:edit="edit"
       header="เอกสารหลักฐาน(เช่น สำเนาบัตรประชาชน ทะเบียนบ้าน วุฒิการศึกษา)"
@@ -21,42 +21,52 @@
               <q-item-label caption> สถานะ: {{ file.status }} / {{ file.sizeLabel }} </q-item-label>
             </q-item-section>
             <q-item-section top side>
-              <div class="row col-12">
+              <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
-                  class="gt-xs"
-                  size="12px"
-                  flat
-                  dense
-                  round
-                  color="blue"
-                  icon="mdi-download-outline"
-                />
-                <q-btn
-                  class="gt-xs"
                   size="12px"
                   flat
                   dense
                   round
+                  color="red"
                   icon="mdi-delete-outline"
-                  v-show="edit"
-                />
+                  v-if="edit"
+                >
+                  <q-tooltip>ลบไฟล์</q-tooltip>
+                </q-btn>
               </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 v-if="edit" class="col-12 q-ma-none">
+        <q-separator class="q-mt-sm" />
+        <q-input
+          class="q-my-sm"
+          hide-bottom-space
+          :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"
+          accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"
+          bordered
+          label="[ไฟล์ jpg,png,pdf,csv,doc]"
+        />
+      </div>
     </div>
   </q-card>
 </template>
@@ -86,6 +96,7 @@ const props = defineProps({
 
 const edit = ref<boolean>(false)
 const addData = ref<boolean>(true)
+const name = ref<string>('')
 const files = ref<any>([
   {
     key: 1,