From 9c3e759176808a2bca1165d6189dcba242b76d59 Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Wed, 25 Sep 2024 13:57:10 +0700
Subject: [PATCH] =?UTF-8?q?=E0=B8=AD=E0=B8=AD=E0=B8=81=E0=B8=84=E0=B8=B3?=
 =?UTF-8?q?=E0=B8=AA=E0=B8=B1=E0=B9=88=E0=B8=87=20=3D>=20API?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../18_command/components/Main/TableMain.vue  |   8 +-
 .../18_command/components/Step/0_Main.vue     |   4 +-
 .../18_command/components/Step/View0_Live.vue | 277 +++++++++++++-----
 3 files changed, 206 insertions(+), 83 deletions(-)

diff --git a/src/modules/18_command/components/Main/TableMain.vue b/src/modules/18_command/components/Main/TableMain.vue
index 59a126a13..73c684a40 100644
--- a/src/modules/18_command/components/Main/TableMain.vue
+++ b/src/modules/18_command/components/Main/TableMain.vue
@@ -57,11 +57,11 @@ const columns = ref<QTableProps["columns"]>([
     style: "font-size: 14px",
   },
   {
-    name: "commandExcecuteDate",
+    name: "commandAffectDate",
     align: "left",
     label: "วันที่ลงนาม",
     sortable: false,
-    field: "commandExcecuteDate",
+    field: "commandAffectDate",
     format(val) {
       return val ? date2Thai(val) : "-";
     },
@@ -69,11 +69,11 @@ const columns = ref<QTableProps["columns"]>([
     style: "font-size: 14px",
   },
   {
-    name: "commandAffectDate",
+    name: "commandExcecuteDate",
     align: "left",
     label: "วันที่คำสั่งมีผล",
     sortable: false,
-    field: "commandAffectDate",
+    field: "commandExcecuteDate",
     format(val) {
       return val ? date2Thai(val) : "-";
     },
diff --git a/src/modules/18_command/components/Step/0_Main.vue b/src/modules/18_command/components/Step/0_Main.vue
index f45c19ae3..d5fa07909 100644
--- a/src/modules/18_command/components/Step/0_Main.vue
+++ b/src/modules/18_command/components/Step/0_Main.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { onMounted, ref } from "vue";
+import { onBeforeMount, ref } from "vue";
 import { useQuasar } from "quasar";
 
 import { useRoute } from "vue-router";
@@ -79,7 +79,7 @@ function onConfirmSignature() {
   );
 }
 
-onMounted(async () => {
+onBeforeMount(async () => {
   await fetchData();
 });
 </script>
diff --git a/src/modules/18_command/components/Step/View0_Live.vue b/src/modules/18_command/components/Step/View0_Live.vue
index f6bb0d648..f1a308560 100644
--- a/src/modules/18_command/components/Step/View0_Live.vue
+++ b/src/modules/18_command/components/Step/View0_Live.vue
@@ -1,12 +1,14 @@
 <script setup lang="ts">
 import { onBeforeMount, onMounted, ref } from "vue";
 import { useQuasar } from "quasar";
+import axios from "axios";
 
 import { useRoute } from "vue-router";
 import { useCounterMixin } from "@/stores/mixin";
 import { useCommandDetail } from "@/modules/18_command/store/DetailStore";
 import http from "@/plugins/http";
 import config from "@/app.config";
+import { log } from "console";
 
 const $q = useQuasar();
 const route = useRoute();
@@ -86,6 +88,111 @@ async function updateCheckboxAuthority(val: boolean) {
     });
 }
 
+function onUploadFile(group: string) {
+  showLoader();
+  let type = group === "order" ? "คำสั่ง" : "แนบท้าย";
+  let file = group === "order" ? fileUploadOrder.value : fileUploadTailer.value;
+  const fileName = { fileName: type };
+  http
+    .post(config.API.file("ระบบออกคำสั่ง", type, commandId.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 &&
+        (await uploadFileDoc(res.data[foundKey]?.uploadUrl, file, group));
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+/**
+ * ฟังก์ชั่นสำหรับอัพโหลดไฟล์เอกสารหลักฐาน
+ */
+async function uploadFileDoc(uploadUrl: string, file: any, group: string) {
+  const formData = new FormData();
+  formData.append("file", file);
+  showLoader();
+  await axios
+    .put(uploadUrl, file, {
+      headers: {
+        "Content-Type": file.type,
+      },
+    })
+    .then(async () => {
+      await fetchDoc(group);
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      if (group === "order") {
+        fileUploadOrder.value = null;
+      } else {
+        fileUploadTailer.value = null;
+      }
+      hideLoader();
+    });
+}
+
+async function fetchDoc(group: string) {
+  showLoader();
+  let type = group === "order" ? "คำสั่ง" : "แนบท้าย";
+  await http
+    .get(config.API.file("ระบบออกคำสั่ง", type, commandId.value))
+    .then((res) => {
+      const data = res.data[0];
+      if (group === "order") {
+        fileOrder.value = data;
+      } else {
+        fileTailer.value = data;
+      }
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+/**
+ * ดาวน์โหลดลิงก์ไฟล์
+ * @param fileName file name
+ */
+function downloadFile(file: any, group: string) {
+  let type = group === "order" ? "คำสั่ง" : "แนบท้าย";
+  showLoader();
+  http
+    .get(
+      config.API.fileByFile(
+        "ระบบออกคำสั่ง",
+        type,
+        commandId.value,
+        file.fileName
+      )
+    )
+    .then((res) => {
+      const data = res.data.downloadUrl;
+      window.open(data, "_blank");
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      hideLoader();
+    });
+}
+
 /**
  * ฟังก์ชันยืนยันการส่งออกคำสั่ง
  */
@@ -125,9 +232,20 @@ function onConfirmOrder() {
   }
 }
 
-onMounted(() => {
+onMounted(async () => {
   isCheckDraft.value = isDraft.value;
   isCheckAuthority.value = isAuthority.value;
+
+  if (step.value > 1) {
+    showLoader();
+    let promises = [fetchDoc("order")];
+    if (isAttachment.value) {
+      promises.push(fetchDoc("tailer"));
+    }
+    await Promise.all(promises).finally(() => {
+      hideLoader();
+    });
+  }
 });
 </script>
 
@@ -176,108 +294,113 @@ onMounted(() => {
             />
           </div>
 
-          <div
-            :class="isAttachment ? 'col-12' : 'col-6'"
-            style="padding-left: 50px"
-            v-if="isAuthority"
-          >
+          <div class="col-6" style="padding-left: 50px" v-if="isAuthority">
             <fieldset class="border q-px-lg q-py-sm">
               <legend class="text-header q-px-sm">
                 อัปโหลดเอกสารสแกนกลับเข้าสู่ระบบ
               </legend>
               <div class="row q-col-gutter-md q-mb-md">
                 <!-- คำสั่ง -->
-                <div :class="isAttachment ? 'col-6' : 'col-12'">
+                <div class="col-12">
                   <label class="text-file">คำสั่ง</label>
-                  <div class="text-right" v-if="fileOrder">
-                    <q-btn flat dense color="primary" icon="mdi-eye" rounded>
-                      <q-tooltip>ดูไฟล์คำสั่ง</q-tooltip>
-                    </q-btn>
-                    <!-- :href="OrderPDFUpload" -->
+                  <div v-if="fileOrder">
                     <q-btn
-                      rounded
-                      type="a"
                       flat
                       dense
-                      color="red"
-                      icon="mdi-download"
-                      target="_blank"
+                      color="primary"
+                      icon="mdi-eye"
+                      rounded
+                      @click.prevent="downloadFile(fileOrder, 'order')"
                     >
+                      <q-tooltip>ดูไฟล์คำสั่ง</q-tooltip>
+                    </q-btn>
+
+                    <q-btn rounded flat dense color="red" icon="mdi-download">
                       <q-tooltip>ดาวน์โหลดไฟล์คำสั่ง</q-tooltip>
                     </q-btn>
                   </div>
-                  <q-file
-                    v-if="step === 2"
-                    outlined
-                    dense
-                    v-model="fileUploadOrder"
-                    label="เลือกไฟล์คำสั่ง"
-                    hide-bottom-space
-                    :rules="[(val:string) => val || 'กรุณาเลือกไฟล์ไฟล์คำสั่ง']"
-                    accept=".pdf"
-                    :readonly="store.readonly"
-                  >
-                    <template v-slot:prepend>
-                      <q-icon name="attach_file" />
-                    </template>
-                  </q-file>
+
+                  <div class="row q-col-gutter-sm">
+                    <div class="col-11">
+                      <q-file
+                        v-if="step === 2 && !store.readonly"
+                        outlined
+                        dense
+                        v-model="fileUploadOrder"
+                        label="เลือกไฟล์คำสั่ง"
+                        hide-bottom-space
+                        accept=".pdf"
+                        :readonly="store.readonly"
+                      >
+                        <template v-slot:prepend>
+                          <q-icon name="attach_file" />
+                        </template>
+                      </q-file>
+                    </div>
+
+                    <div class="col-1" v-if="!store.readonly && step === 2">
+                      <q-btn
+                        @click.prevent="onUploadFile('order')"
+                        flat
+                        round
+                        icon="mdi-upload"
+                        :color="fileUploadOrder == null ? 'grey-5' : 'blue-5'"
+                        :disable="fileUploadOrder == null"
+                      />
+                      <q-tooltip>อัปโหลดไฟล์คำสั่ง</q-tooltip>
+                    </div>
+                  </div>
                 </div>
 
                 <!-- เอกสารแนบท้าย -->
-                <div v-if="isAttachment" class="col-6">
+                <div v-if="isAttachment" class="col-12">
                   <label class="text-file">เอกสารแนบท้าย</label>
-                  <div class="text-right" v-if="fileTailer">
-                    <q-btn flat dense color="primary" icon="mdi-eye" rounded>
-                      <q-tooltip>ดูเอกสารแนบท้าย</q-tooltip>
-                    </q-btn>
-                    <!-- :href="TailerPDFUpload" -->
+                  <div v-if="fileTailer">
                     <q-btn
-                      type="a"
-                      rounded
                       flat
                       dense
-                      color="red"
-                      icon="mdi-download"
-                      target="_blank"
+                      color="primary"
+                      icon="mdi-eye"
+                      rounded
+                      @click.prevent="downloadFile(fileTailer, 'tailer')"
                     >
+                      <q-tooltip>ดูเอกสารแนบท้าย</q-tooltip>
+                    </q-btn>
+                    <q-btn rounded flat dense color="red" icon="mdi-download">
                       <q-tooltip>ดาวน์โหลดเอกสารแนบท้าย</q-tooltip>
                     </q-btn>
                   </div>
 
-                  <q-file
-                    v-if="step === 2"
-                    outlined
-                    dense
-                    v-model="fileUploadTailer"
-                    label="เลือกไฟล์เอกสารแนบท้าย"
-                    hide-bottom-space
-                    :rules="[(val:string) => val || 'กรุณาเลือกไฟล์เอกสารแนบท้าย']"
-                    accept=".pdf"
-                    :readonly="store.readonly"
-                  >
-                    <template v-slot:prepend>
-                      <q-icon name="attach_file" />
-                    </template>
-                  </q-file>
-                </div>
+                  <div class="row q-col-gutter-sm">
+                    <div class="col-11">
+                      <q-file
+                        v-if="step === 2 && !store.readonly"
+                        outlined
+                        dense
+                        v-model="fileUploadTailer"
+                        label="เลือกไฟล์เอกสารแนบท้าย"
+                        hide-bottom-space
+                        accept=".pdf"
+                        :readonly="store.readonly"
+                      >
+                        <template v-slot:prepend>
+                          <q-icon name="attach_file" />
+                        </template>
+                      </q-file>
+                    </div>
 
-                <div class="row col-12" v-if="!store.readonly">
-                  <q-space />
-                  <q-btn
-                    icon="mdi-upload"
-                    label="อัปโหลดเอกสารส"
-                    :color="
-                      fileUploadOrder == null ||
-                      (isAttachment && fileUploadTailer === null)
-                        ? 'grey-5'
-                        : 'blue-5'
-                    "
-                    :disable="
-                      fileUploadOrder == null ||
-                      (isAttachment && fileUploadTailer === null)
-                    "
-                  >
-                  </q-btn>
+                    <div class="col-1" v-if="!store.readonly && step === 2">
+                      <q-btn
+                        @click.prevent="onUploadFile('tailer')"
+                        flat
+                        round
+                        icon="mdi-upload"
+                        :color="fileUploadTailer == null ? 'grey-5' : 'blue-5'"
+                        :disable="fileUploadTailer == null"
+                      />
+                      <q-tooltip>อัปโหลดไฟล์เอกสารแนบท้าย</q-tooltip>
+                    </div>
+                  </div>
                 </div>
               </div>
             </fieldset>
@@ -289,7 +412,7 @@ onMounted(() => {
               step === 2 &&
               isAuthority &&
               fileOrder &&
-              (isAttachment || fileTailer)
+              (!isAttachment || fileTailer)
             "
           >
             <q-btn