เพิ่มอัปโหลด

src/modules/14_KPI/views/detailView.vue

@@ -3,6 +3,7 @@ import { ref, onMounted, reactive, onUnmounted } from "vue";
 import { useRoute, useRouter } from "vue-router";
 import { useQuasar } from "quasar";
 import genReport from "@/plugins/genreport";
+import axios from "axios";
 
 import http from "@/plugins/http";
 import config from "@/app.config";
@@ -18,6 +19,12 @@ import type { DataOption } from "@/modules/14_KPI/interface/index/Main";
 import { useKpiDataStore } from "@/modules/14_KPI/store";
 import { useCounterMixin } from "@/stores/mixin";
 
+interface ArrayFileList {
+  id: string;
+  pathName: string;
+  fileName: string;
+}
+
 const itemsTab = ref<any[]>([
   {
     name: "1",
@@ -60,6 +67,7 @@ const {
   dialogConfirm,
   success,
   findOrgName,
+  dialogRemove,
 } = mixin;
 
 const evaluatorIdOp = ref<DataOption[]>([]);
@@ -75,6 +83,10 @@ const commanderId = ref<any>(null);
 const commanderHighId = ref<any>(null);
 const avartar = ref<string>("");
 
+const fileUpload = ref<any>(null);
+const fileList = ref<ArrayFileList[]>([]);
+
+const modalUpload = ref<boolean>(false);
 const formProfile = reactive<any>({
   fullName: "",
   position: "",
@@ -436,7 +448,7 @@ async function downloadReport() {
       const data = res.data.result;
       await genReport(
         data,
-        "แบบรายงานผลการปฏิบัติราชการ " +
+        "แบบกำหนดข้อตกลง" +
           store.dataEvaluation.prefix +
           store.dataEvaluation.firstName +
           " " +
@@ -449,6 +461,138 @@ async function downloadReport() {
     .finally(() => {});
 }
 
+async function uploadReport() {
+  modalUpload.value = true;
+  getData();
+}
+
+function closeDialog() {
+  modalUpload.value = false;
+  fileUpload.value = null;
+}
+
+/** ฟังชั่น อัปโหลดไฟล์ */
+async function clickUpload(file: any) {
+  const fileName = { fileName: file.name };
+
+  dialogConfirm(
+    $q,
+    async () => {
+      showLoader();
+      const selectedFile = file;
+      const formdata = new FormData();
+      formdata.append("file", selectedFile);
+      await http
+        .post(config.API.file("แบบกำหนดข้อตกลง", "KPI", id.value), {
+          replace: true,
+          fileList: fileName,
+        })
+        .then(async (res) => {
+          const foundKey: string | undefined = Object.keys(res.data).find(
+            (key) =>
+              res.data[key]?.fileName !== undefined &&
+              res.data[key]?.fileName !== ""
+          );
+          foundKey &&
+            uploadFileDoc(res.data[foundKey]?.uploadUrl, fileUpload.value);
+        })
+        .catch((err) => {
+          messageError($q, err);
+        });
+    },
+    "ยืนยันการอัปโหลดไฟล์",
+    "ต้องการยืนยันการอัปโหลดไฟล์นี้หรือไม่ ?"
+  );
+}
+
+/**
+ * อัปโหลดไฟล์
+ * @param uploadUrl  url
+ * @param file ไฟล์
+ */
+async function uploadFileDoc(uploadUrl: string, file: any) {
+  const Data = new FormData();
+  Data.append("file", fileUpload.value);
+  await axios
+    .put(uploadUrl, file, {
+      headers: {
+        "Content-Type": file.type,
+      },
+    })
+    .then(async (res) => {
+      await getData();
+      success($q, "อัปโหลดไฟล์สำเร็จ");
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      fileUpload.value = null;
+      hideLoader();
+    });
+}
+
+/** ดึงข้อมูล */
+async function getData() {
+  showLoader();
+  await http
+    .get(config.API.file("แบบกำหนดข้อตกลง", "KPI", id.value))
+    .then((res) => {
+      fileList.value = res.data;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+/**
+ * ลบไฟล์
+ * @param fileName file name
+ */
+function deleteFile(fileName: string) {
+  dialogRemove($q, async () => {
+    showLoader();
+    http
+      .delete(
+        config.API.file("แบบกำหนดข้อตกลง", "KPI", id.value) + `/${fileName}`
+      )
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(async () => {
+        await getData();
+
+        setTimeout(() => {
+          success($q, `ลบไฟล์สำเร็จ`);
+          hideLoader();
+        }, 500);
+      });
+  });
+}
+
+/**
+ * ดาวน์โหลดลิงก์ไฟล์
+ * @param fileName file name
+ */
+function downloadFile(fileName: string) {
+  showLoader();
+  http
+    .get(config.API.file("แบบกำหนดข้อตกลง", "KPI", id.value) + `/${fileName}`)
+    .then((res) => {
+      const data = res.data.downloadUrl;
+      window.open(data, "_blank");
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      hideLoader();
+    });
+}
+
 onMounted(async () => {
   store.isUpdate = false;
   await fetchEvaluation();
@@ -685,12 +829,11 @@ onUnmounted(() => {
               >
                 <q-tooltip>ดูข้อมูลการทดลองปฏิบัติหน้าที่ราชการ</q-tooltip>
               </q-btn>
-
               <q-btn
                 v-if="
-                  store.dataEvaluation.evaluationStatus !== 'NEW' ||
+                  store.dataEvaluation.evaluationStatus !== 'NEW' &&
-                  store.dataEvaluation.evaluationStatus !== 'NEW_EVALUATOR' ||
+                  store.dataEvaluation.evaluationStatus !== 'NEW_EVALUATOR' &&
-                  store.dataEvaluation.evaluationStatus !== 'NEW_COMMANDER' ||
+                  store.dataEvaluation.evaluationStatus !== 'NEW_COMMANDER' &&
                   store.dataEvaluation.evaluationStatus !== 'NEW_COMMANDER_HIGH'
                 "
                 unelevated
@@ -705,6 +848,25 @@ onUnmounted(() => {
                   >ดาวน์โหลดแบบกำหนดข้อตกลงการประเมินผลสัมฤทธิ์ของงานและพฤติกรรมการปฏิบัติราชการ</q-tooltip
                 >
               </q-btn>
+              <q-btn
+                v-if="
+                  store.dataEvaluation.evaluationStatus !== 'NEW' &&
+                  store.dataEvaluation.evaluationStatus !== 'NEW_EVALUATOR' &&
+                  store.dataEvaluation.evaluationStatus !== 'NEW_COMMANDER' &&
+                  store.dataEvaluation.evaluationStatus !== 'NEW_COMMANDER_HIGH'
+                "
+                unelevated
+                round
+                color="grey-2"
+                text-color="blue"
+                icon="upload"
+                size="md"
+                @click="uploadReport()"
+              >
+                <q-tooltip
+                  >อัปโหลดแบบกำหนดข้อตกลงการประเมินผลสัมฤทธิ์ของงานและพฤติกรรมการปฏิบัติราชการ</q-tooltip
+                >
+              </q-btn>
             </div>
           </div>
         </div>
@@ -1148,6 +1310,96 @@ onUnmounted(() => {
     </q-card>
   </q-dialog>
 
+  <q-dialog v-model="modalUpload" persistent>
+    <q-card class="col-12" style="width: 60vw">
+      <DialogHeader
+        tittle="อัปโหลดแบบกำหนดข้อตกลงการประเมินผลสัมฤทธิ์ของงานและพฤติกรรมการปฏิบัติราชการ"
+        :close="closeDialog"
+      />
+      <q-separator />
+
+      <q-card-section>
+        <div class="row col-12 q-col-gutter-y-sm">
+          <div class="col-12 row" v-if="fileList.length == 0">
+            <q-file
+              :readonly="checkRoutePermisson"
+              for="inputFiles"
+              class="col-12"
+              outlined
+              dense
+              v-model="fileUpload"
+              label="ไฟล์เอกสารแบบกำหนดข้อตกลง"
+              hide-bottom-space
+              accept=".pdf"
+              clearable
+            >
+              <template v-slot:prepend>
+                <q-icon name="attach_file" color="primary" />
+              </template>
+              <template v-slot:after>
+                <q-btn
+                  size="14px"
+                  v-if="fileUpload"
+                  flat
+                  round
+                  dense
+                  color="primary"
+                  icon="mdi-upload"
+                  @click="clickUpload(fileUpload)"
+                  ><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
+                >
+              </template>
+            </q-file>
+          </div>
+
+          <div v-if="fileList.length > 0" class="col-xs-12 row">
+            <q-list class="full-width rounded-borders" bordered separator>
+              <q-item
+                clickable
+                v-ripple
+                v-for="data in fileList"
+                :key="data.id"
+                class="items-center"
+              >
+                <q-item-section>{{ data.fileName }}</q-item-section>
+                <q-space />
+                <div>
+                  <q-btn
+                    size="12px"
+                    flat
+                    round
+                    dense
+                    color="blue"
+                    icon="mdi-download"
+                    @click="downloadFile(data.fileName)"
+                    ><q-tooltip>ดาวน์โหลดไฟล์</q-tooltip></q-btn
+                  >
+
+                  <q-btn
+                    v-if="!isReadonly && !checkRoutePermisson"
+                    size="12px"
+                    flat
+                    round
+                    dense
+                    color="red"
+                    class="q-ml-sm"
+                    icon="mdi-delete-outline"
+                    @click="deleteFile(data.fileName)"
+                    ><q-tooltip>ลบไฟล์</q-tooltip></q-btn
+                  >
+                </div>
+              </q-item>
+            </q-list>
+          </div>
+
+          <div class="col-12" v-else>
+            <q-card class="q-pa-md" bordered> ไม่มีรายการเอกสาร </q-card>
+          </div>
+        </div>
+      </q-card-section>
+    </q-card>
+  </q-dialog>
+
   <DialogGovernment v-model:modal="modalGovernment" />
 </template>
 <style>