ปรับรูปแบบฟอร์ม ปุ่ม ในระบบบริการเจ้าของข้อมูล

src/modules/02_transfer/views/AddTransfer.vue

@@ -111,6 +111,10 @@ const fileUploadDoc = async (file: any) => {
   nameFile.value = file[0].name;
   files.value = file;
 };
+
+function fileOpen(url: string) {
+  window.open(url, "_blank");
+}
 </script>
 
 <template>
@@ -147,6 +151,7 @@ const fileUploadDoc = async (file: any) => {
                   dense
                   outlined
                   v-model="tranferOrg"
+                  hide-bottom-space
                   label="หน่วยงานที่ขอโอนไป"
                   :readonly="routeName != 'addTransfer'"
                   :rules="[(val:string) => !!val || `${'กรุณากรอกหน่วยงานที่ขอโอนไป'}`]"
@@ -159,6 +164,7 @@ const fileUploadDoc = async (file: any) => {
                   outlined
                   v-model="noteReason"
                   label="เหตุผล"
+                  hide-bottom-space
                   type="textarea"
                   :readonly="routeName != 'addTransfer'"
                   :rules="[(val:string) => !!val || `${'กรุณากรอกเหตุผล'}`]"
@@ -193,26 +199,31 @@ const fileUploadDoc = async (file: any) => {
                   /> -->
                 </div>
                 <div class="col-12 row" v-if="routeName != 'addTransfer'">
-                  <div
-                    class="bg-grey-1 q-pa-sm col-12 row items-center text-primary"
-                  >
-                    <div class="q-pl-sm text-weight-bold text-dark">
-                      เอกสารเพิ่มเติม
-                    </div>
-                  </div>
                   <q-card bordered flat class="full-width">
+                    <div
+                      class="bg-grey-1 q-pa-sm col-12 row items-center text-primary"
+                    >
+                      <div class="q-pl-sm text-weight-bold text-dark">
+                        เอกสารเพิ่มเติม
+                      </div>
+                    </div>
+                    <q-separator />
                     <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.fileName }}
-                          </q-item-label>
-
-                          <q-item-label caption> </q-item-label>
+                          {{ file.fileName }}
+                        </q-item-section>
+                        <q-item-section avatar>
+                          <q-btn
+                            color="teal-5"
+                            round
+                            flat
+                            icon="mdi-download"
+                            @click="fileOpen(file.pathName)"
+                          ></q-btn>
                         </q-item-section>
                       </q-item>
                     </q-list>
@@ -222,17 +233,20 @@ const fileUploadDoc = async (file: any) => {
             </div>
           </div>
           <q-separator v-if="routeName == 'addTransfer'" />
-          <div class="row col-12 q-pa-md" v-if="routeName == 'addTransfer'">
+          <q-card-actions
+            align="right"
+            class="row col-12"
+            v-if="routeName == 'addTransfer'"
+          >
             <q-space />
             <q-btn
               unelevated
-              dense
               class="q-px-md items-center"
               color="primary"
               label="ยื่นเรื่องขอโอน"
               type="onsubmit"
             />
-          </div>
+          </q-card-actions>
         </q-card>
       </q-form>
     </div>