เงินเดือน ==> เลื่อน ปรับ ui

src/modules/13_salary/components/SalaryEmployeeLists/ProcessStep.vue

@@ -244,35 +244,90 @@ onMounted(() => {
 </script>
 
 <template>
-  <div class="row col-12 q-pa-md">
-    <q-toolbar style="padding: 0px">
-      <q-file
+  <q-card class="col-12">
+    <q-card-section>
+      <q-toolbar
+        class="q-pa-none"
         v-if="
           store.statusQuota == 'PENDING' &&
           checkPermission($route)?.attrIsUpdate
         "
-        bg-color="white"
-        clearable
-        outlined
-        dense
-        v-model="fileUpload"
-        label="อัปโหลดไฟล์"
       >
-        <template v-slot:prepend>
-          <q-icon color="light-blue" name="attach_file" />
+        <q-file
+          bg-color="white"
+          clearable
+          outlined
+          dense
+          v-model="fileUpload"
+          label="อัปโหลดไฟล์"
+        >
+          <template v-slot:prepend>
+            <q-icon color="light-blue" name="attach_file" />
+            <q-tooltip>อัปโหลดไฟล์</q-tooltip>
+          </template>
+        </q-file>
+
+        <q-btn
+          dense
+          flat
+          round
+          color="light-blue"
+          icon="upload"
+          @click="uploadFile(fileUpload)"
+          v-if="fileUpload !== null"
+        >
           <q-tooltip>อัปโหลดไฟล์</q-tooltip>
-        </template>
-      </q-file>
+        </q-btn>
 
-      <q-btn
-        flat
-        color="light-blue"
-        icon="upload"
-        @click="uploadFile(fileUpload)"
-        v-if="fileUpload !== null"
-      />
+        <q-space />
+      </q-toolbar>
+      <div class="row">
+        <div class="col-6" v-if="listFile.length !== 0">
+          <q-card bordered style="border: 1px solid #d6dee1">
+            <div class="text-weight-medium bg-grey-1 q-py-sm q-px-md">
+              รายการเอกสาร
+            </div>
+            <q-list bordered separator>
+              <q-item clickable v-ripple v-for="item in listFile">
+                <q-item-section>{{ item.fileName }}</q-item-section>
+                <q-item-section avatar>
+                  <div class="row">
+                    <div>
+                      <q-btn
+                        v-if="checkPermission($route)?.attrIsGet"
+                        dense
+                        flat
+                        round
+                        color="blue"
+                        icon="mdi-download"
+                        @click="downloadFile(item.fileName)"
+                      >
+                        <q-tooltip>ดาวน์โหลดเอกสาร</q-tooltip>
+                      </q-btn>
+                    </div>
+                    <div>
+                      <q-btn
+                        v-if="checkPermission($route)?.attrIsDelete"
+                        dense
+                        flat
+                        round
+                        color="red"
+                        icon="mdi-delete"
+                        @click="onDeleteFile(item.fileName)"
+                        ><q-tooltip>ลบเอกสาร</q-tooltip></q-btn
+                      >
+                    </div>
+                  </div>
+                </q-item-section>
+              </q-item>
+            </q-list>
+          </q-card>
+        </div>
+      </div>
+    </q-card-section>
 
-      <q-space />
+    <q-separator />
+    <q-card-actions align="right">
       <div>
         <!-- การเจ้าหน้าที่ของหน่วยงานส่งเอกสารให้ ผอ. หน่วยงานตรวจสอบ -->
         <q-btn
@@ -357,50 +412,8 @@ onMounted(() => {
           label="รอออกคำสั่ง"
         />
       </div>
-    </q-toolbar>
-
-    <div class="col-6" v-if="listFile.length !== 0">
-      <q-card bordered style="border: 1px solid #d6dee1">
-        <div class="text-weight-medium bg-grey-1 q-py-sm q-px-md">
-          รายการเอกสาร
-        </div>
-        <q-list bordered separator>
-          <q-item clickable v-ripple v-for="item in listFile">
-            <q-item-section>{{ item.fileName }}</q-item-section>
-            <q-item-section avatar>
-              <div class="row">
-                <div>
-                  <q-btn
-                    v-if="checkPermission($route)?.attrIsGet"
-                    dense
-                    flat
-                    round
-                    color="blue"
-                    icon="mdi-download"
-                    @click="downloadFile(item.fileName)"
-                  >
-                    <q-tooltip>ดาวน์โหลดเอกสาร</q-tooltip>
-                  </q-btn>
-                </div>
-                <div>
-                  <q-btn
-                    v-if="checkPermission($route)?.attrIsDelete"
-                    dense
-                    flat
-                    round
-                    color="red"
-                    icon="mdi-delete"
-                    @click="onDeleteFile(item.fileName)"
-                    ><q-tooltip>ลบเอกสาร</q-tooltip></q-btn
-                  >
-                </div>
-              </div>
-            </q-item-section>
-          </q-item>
-        </q-list>
-      </q-card>
-    </div>
-  </div>
+    </q-card-actions>
+  </q-card>
 
   <DialogPopupReason
     v-model:modal="modalRecommend"