API file

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

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref } from "vue";
+import { ref, onMounted } from "vue";
 import { useQuasar } from "quasar";
 
 import http from "@/plugins/http";
@@ -40,7 +40,7 @@ async function uploadFile(event: any) {
       formdata.append("Document", selectedFile);
       http
         .post(
-          config.API.salaryUploadFile(
+          config.API.subFile(
             "ระบบเงินเดือน",
             "เลื่อนค่าจ้าง",
             props.periodId ? props.periodId : "",
@@ -141,11 +141,30 @@ function sendAndRecommend(title: string, typeOrder: string) {
   titleRecommend.value = title;
   type.value = typeOrder;
 }
+
+function fetchListFile() {
+  http
+    .get(
+      config.API.subFile(
+        "ระบบเงินเดือน",
+        "เลื่อนค่าจ้าง",
+        props.periodId ? props.periodId : "",
+        props.rootId ? props.rootId : ""
+      )
+    )
+    .then(async () => {})
+    .catch((err) => {
+      messageError($q, err);
+    });
+}
+onMounted(() => {
+  fetchListFile();
+});
 </script>
 
 <template>
   <div class="row col-12 q-pa-md">
-    <q-toolbar>
+    <q-toolbar style="padding: 0px">
       <q-file
         v-if="sendStep == 1"
         bg-color="white"
@@ -153,7 +172,6 @@ function sendAndRecommend(title: string, typeOrder: string) {
         outlined
         dense
         v-model="fileUpload"
-        accept=".pdf"
         label="อัปโหลดไฟล์"
         multiple
       >
@@ -184,9 +202,7 @@ function sendAndRecommend(title: string, typeOrder: string) {
         >
       </div>
 
-      <q-toolbar-title>
-        <!-- Toolbar -->
-      </q-toolbar-title>
+      <q-space />
       <div>
         <!-- การเจ้าหน้าที่ของหน่วยงานส่งเอกสารให้ ผอ. หน่วยงานตรวจสอบ -->
         <q-btn
@@ -251,15 +267,51 @@ function sendAndRecommend(title: string, typeOrder: string) {
         />
       </div>
     </q-toolbar>
+    <div class="col-6">
+      <q-list bordered>
+        <q-item clickable v-ripple>
+          <q-item-section>Icon as avatar</q-item-section>
+          <q-item-section avatar>
+            <q-icon color="primary" name="bluetooth" />
+          </q-item-section>
+        </q-item>
 
-    <DialogPopupReason
-      v-model:modal="modalRecommend"
-      :title="titleRecommend"
-      label="คำแนะนำ"
-      :savaForm="saveReccommend"
-      textReport=""
-    />
+        <q-item clickable v-ripple>
+          <q-item-section>Avatar-type icon</q-item-section>
+          <q-item-section avatar>
+            <q-avatar color="teal" text-color="white" icon="bluetooth" />
+          </q-item-section>
+        </q-item>
+
+        <q-item clickable v-ripple>
+          <q-item-section>Rounded avatar-type icon</q-item-section>
+          <q-item-section avatar>
+            <q-avatar
+              rounded
+              color="purple"
+              text-color="white"
+              icon="bluetooth"
+            />
+          </q-item-section>
+        </q-item>
+
+        <q-item clickable v-ripple>
+          <q-item-section>Letter avatar-type</q-item-section>
+          <q-item-section avatar>
+            <q-avatar color="primary" text-color="white"> R </q-avatar>
+          </q-item-section>
+        </q-item>
+      </q-list>
+    </div>
   </div>
+
+  <DialogPopupReason
+    v-model:modal="modalRecommend"
+    :title="titleRecommend"
+    label="คำแนะนำ"
+    :savaForm="saveReccommend"
+    textReport=""
+  />
 </template>
 
 <style lang="scss" scoped></style>