Merge branch 'develop' into devTee

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

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { ref, onMounted } from "vue";
 import { useQuasar } from "quasar";
+import axios from "axios";
 
 import http from "@/plugins/http";
 import config from "@/app.config";
@@ -12,7 +13,14 @@ import { useSalaryEmployeeListSDataStore } from "@/modules/13_salary/store/Salar
 const $q = useQuasar(); //ใช้ noti quasar
 const mixin = useCounterMixin();
 const store = useSalaryEmployeeListSDataStore();
-const { messageError, dialogConfirm, showLoader, hideLoader, success } = mixin;
+const {
+  messageError,
+  dialogConfirm,
+  showLoader,
+  hideLoader,
+  success,
+  dialogRemove,
+} = mixin;
 
 const props = defineProps({
   rootId: String,
@@ -21,23 +29,19 @@ const props = defineProps({
 });
 
 const sendStep = ref<number>(1);
-const fileUpload = ref<any[]>([]);
+const fileUpload = ref<any>(null);
 const document = ref<string>("");
 const type = ref<string>("");
+const listFile = ref<any>([]);
 /**
  * function อัปโหลดไฟล์เจ้าหน้าที่
  * @param event file
  */
 async function uploadFile(event: any) {
-  console.log(event);
-  const fileName = event.map((e: any) => ({ fileName: e.name }));
-
   dialogConfirm(
     $q,
     async () => {
-      const selectedFile = event;
-      const formdata = new FormData();
-      formdata.append("Document", selectedFile);
+      showLoader();
       http
         .post(
           config.API.subFile(
@@ -48,21 +52,25 @@ async function uploadFile(event: any) {
           ),
           {
             replace: false, //อัพทับที่เดิมไหม
-            fileList: fileName,
+            fileList: [
+              {
+                fileName: event.name, //ชื่อไฟล์
+              },
+            ],
           }
         )
-        .then(async () => {
-          // await fecthInsigniaByOc(
-          //   round.value,
-          //   DataStore.agency,
-          //   "officer",
-          //   tab.value
-          // );
-          // success($q, "อัปโหลดไฟล์สำเร็จ");
-          // fileUpload.value = null;
+        .then(async (res) => {
+          const foundKey: any = Object.keys(res.data).find(
+            (key) =>
+              res.data[key]?.fileName !== undefined &&
+              res.data[key]?.fileName !== ""
+          );
+          const link = res.data[foundKey]?.uploadUrl;
+          fileUpLoad(link);
         })
         .catch((err) => {
           messageError($q, err);
+          hideLoader();
         });
     },
     "ยืนยันการอัปโหลดไฟล์",
@@ -70,6 +78,25 @@ async function uploadFile(event: any) {
   );
 }
 
+function fileUpLoad(url: string) {
+  axios
+    .put(url, fileUpload.value, {
+      headers: { "Content-Type": fileUpload.value?.type },
+      onUploadProgress: (e) => console.log(e),
+    })
+    .then(() => {
+      success($q, "อัปโหลดไฟล์สำเร็จ");
+      fileUpload.value = null;
+      fetchListFile();
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
 function saveReccommend(reason: string) {
   dialogConfirm(
     $q,
@@ -152,11 +179,64 @@ function fetchListFile() {
         props.rootId ? props.rootId : ""
       )
     )
-    .then(async () => {})
+    .then(async (res) => {
+      listFile.value = res.data;
+    })
     .catch((err) => {
       messageError($q, err);
     });
 }
+
+function onDeleteFile(fileName: string) {
+  dialogRemove($q, () => {
+    showLoader();
+    http
+      .delete(
+        config.API.subFileByFileName(
+          "ระบบเงินเดือน",
+          "เลื่อนค่าจ้าง",
+          props.periodId ? props.periodId : "",
+          props.rootId ? props.rootId : "",
+          fileName
+        )
+      )
+      .then(() => {
+        success($q, "ลบไฟล์สำเร็จ");
+        setTimeout(() => {
+          fetchListFile();
+          hideLoader();
+        }, 1000);
+      })
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(async () => {});
+  });
+}
+
+function downloadFile(fileName: string) {
+  showLoader();
+  http
+    .get(
+      config.API.subFileByFileName(
+        "ระบบเงินเดือน",
+        "เลื่อนค่าจ้าง",
+        props.periodId ? props.periodId : "",
+        props.rootId ? props.rootId : "",
+        fileName
+      )
+    )
+    .then((res) => {
+      const data = res.data;
+      window.open(data.downloadUrl, "_blank");
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      hideLoader();
+    });
+}
 onMounted(() => {
   fetchListFile();
 });
@@ -166,14 +246,13 @@ onMounted(() => {
   <div class="row col-12 q-pa-md">
     <q-toolbar style="padding: 0px">
       <q-file
-        v-if="sendStep == 1"
+        v-if="store.statusQuota == 'PENDING'"
         bg-color="white"
         clearable
         outlined
         dense
         v-model="fileUpload"
         label="อัปโหลดไฟล์"
-        multiple
       >
         <template v-slot:prepend>
           <q-icon color="light-blue" name="attach_file" />
@@ -188,19 +267,6 @@ onMounted(() => {
         @click="uploadFile(fileUpload)"
         v-if="fileUpload !== null"
       />
-      <div v-if="document">
-        <q-btn
-          dense
-          color="primary"
-          icon-right="mdi-download"
-          label="ดาวน์โหลดไฟล์"
-          outline
-          :href="document"
-          target="_blank"
-        >
-          <q-tooltip>ดาวน์โหลด</q-tooltip></q-btn
-        >
-      </div>
 
       <q-space />
       <div>
@@ -267,41 +333,47 @@ onMounted(() => {
         />
       </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>
 
-        <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 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
+                    dense
+                    flat
+                    round
+                    size="12px"
+                    color="blue"
+                    icon="mdi-download-outline"
+                    @click="downloadFile(item.fileName)"
+                  >
+                    <q-tooltip>ดาวน์โหลดเอกสาร</q-tooltip>
+                  </q-btn>
+                </div>
+                <div>
+                  <q-btn
+                    dense
+                    flat
+                    round
+                    size="12px"
+                    color="red"
+                    icon="mdi-delete-outline"
+                    @click="onDeleteFile(item.fileName)"
+                    ><q-tooltip>ลบเอกสาร</q-tooltip></q-btn
+                  >
+                </div>
+              </div>
+            </q-item-section>
+          </q-item>
+        </q-list>
+      </q-card>
     </div>
   </div>