From 79d1a14ec41fe9bc88e078feab8e29ab09ab53b0 Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Tue, 3 Feb 2026 15:08:24 +0700
Subject: [PATCH] fix: form upload Attachment

---
 .../18_command/components/Step/View0_Live.vue | 443 ++++++++++++------
 1 file changed, 292 insertions(+), 151 deletions(-)

diff --git a/src/modules/18_command/components/Step/View0_Live.vue b/src/modules/18_command/components/Step/View0_Live.vue
index fd5e051f3..4d03fa36f 100644
--- a/src/modules/18_command/components/Step/View0_Live.vue
+++ b/src/modules/18_command/components/Step/View0_Live.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { onMounted, ref } from "vue";
+import { onMounted, ref, computed } from "vue";
 import { useQuasar } from "quasar";
 import axios from "axios";
 
@@ -42,12 +42,23 @@ const isAuthority = defineModel<boolean>("isAuthority", { required: true }); //
 const isCheckAuthority = ref<boolean>(false); //เช็ครอผู้มีอำนาจลงนามอนุมัติ
 const isAttachment = defineModel<boolean>("isAttachment", { required: true }); //เช็คบัญชีแนบท้าย
 const fileUploadOrder = ref<any>(null); //ไฟล์คำสั่ง
-const fileUploadTailer = ref<any>(null); //ไฟล์เอกสารแนบท้าย
+// const fileUploadTailer = ref<any>(null); //ไฟล์เอกสารแนบท้าย
 const fileOrder = ref<any>(null); //ไฟล์คำสั่ง
-const fileTailer = ref<any>(null); //ไฟล์เอกสารแนบท้าย
+// const fileTailer = ref<any>(null); //ไฟล์เอกสารแนบท้าย
 
 const isLoad = ref<boolean>(true); //แสดงโหลด
 const modalPerView = ref<boolean>(false);
+// สมมติว่ามีรายชื่อ
+const attachmentList = ref<any[]>([]);
+const attachmentFiles = ref<Record<number, any>>({});
+
+const isFileTailer = computed(() => {
+  // จำนวนไฟล์ที่อัปโหลดครบทุกคน
+  return (
+    attachmentList.value.length > 0 &&
+    attachmentList.value.every((person) => !!attachmentFiles.value[person.id])
+  );
+});
 
 /**
  * ฟังก์ชันยืนยันการส่งให้ผู้มีอำนาจลงนามอนุมัติ
@@ -88,7 +99,9 @@ async function updateCheckboxAuthority(val: boolean) {
     .put(config.API.command + `/pending-check/${commandId.value}`, {
       sign: val,
     })
-    .then(() => {})
+    .then(() => {
+      isAttachment.value && fetchLists();
+    })
     .catch((err) => {
       messageError($q, err);
     })
@@ -104,7 +117,7 @@ async function updateCheckboxAuthority(val: boolean) {
 function onUploadFile(group: string) {
   showLoader();
   let type = group === "order" ? "คำสั่ง" : "แนบท้าย";
-  let file = group === "order" ? fileUploadOrder.value : fileUploadTailer.value;
+  // let file = group === "order" ? fileUploadOrder.value : fileUploadTailer.value;
   const fileName = { fileName: type };
   http
     .post(config.API.file("ระบบออกคำสั่ง", type, commandId.value), {
@@ -118,7 +131,11 @@ function onUploadFile(group: string) {
           res.data[key]?.fileName !== ""
       );
       foundKey &&
-        (await uploadFileDoc(res.data[foundKey]?.uploadUrl, file, group));
+        (await uploadFileDoc(
+          res.data[foundKey]?.uploadUrl,
+          fileUploadOrder.value,
+          group
+        ));
     })
     .catch((err) => {
       messageError($q, err);
@@ -134,7 +151,12 @@ function onUploadFile(group: string) {
  * @param file ไฟล์ที่ต้องการอัปโหลด
  * @param group ประเภพไฟล์ "คำสั่ง","แนบท้าย"
  */
-async function uploadFileDoc(uploadUrl: string, file: any, group: string) {
+async function uploadFileDoc(
+  uploadUrl: string,
+  file: any,
+  group: string,
+  profileId?: string
+) {
   const formData = new FormData();
   formData.append("file", file);
   showLoader();
@@ -154,7 +176,11 @@ async function uploadFileDoc(uploadUrl: string, file: any, group: string) {
       if (group === "order") {
         fileUploadOrder.value = null;
       } else {
-        fileUploadTailer.value = null;
+        attachmentList.value.forEach((e) => {
+          if (e.id === profileId) {
+            e.file = null;
+          }
+        });
       }
       hideLoader();
     });
@@ -167,15 +193,40 @@ async function uploadFileDoc(uploadUrl: string, file: any, group: string) {
 async function fetchDoc(group: string) {
   showLoader();
   let type = group === "order" ? "คำสั่ง" : "แนบท้าย";
+  if (group === "order") {
+    await fetchDocOrder(type);
+  } else {
+    attachmentList.value.forEach(async (e) => {
+      await fetchDocTailer(type, e.id);
+    });
+  }
+}
+
+async function fetchDocOrder(type: string) {
   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;
-      }
+      fileOrder.value = data;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+async function fetchDocTailer(type: string, profileId: string) {
+  await http
+    .get(config.API.subFile("ระบบออกคำสั่ง", type, commandId.value, profileId))
+    .then((res) => {
+      const data = res.data[0];
+      attachmentList.value.forEach((e) => {
+        if (e.id === profileId) {
+          attachmentFiles.value[e.id] = data;
+        }
+      });
     })
     .catch((e) => {
       messageError($q, e);
@@ -190,18 +241,33 @@ const dataFile = ref<DataFileDownload>();
  * ดาวน์โหลดลิงก์ไฟล์
  * @param fileName file name
  */
-function downloadFile(file: any, group: string, isView: boolean = false) {
+function downloadFile(
+  file: any,
+  group: string,
+  isView: boolean = false,
+  profileId: string
+) {
   let type = group === "order" ? "คำสั่ง" : "แนบท้าย";
+
+  const pathApi =
+    group === "order"
+      ? config.API.fileByFile(
+          "ระบบออกคำสั่ง",
+          type,
+          commandId.value,
+          file.fileName
+        )
+      : config.API.subFileByFileName(
+          "ระบบออกคำสั่ง",
+          type,
+          commandId.value,
+          profileId,
+          file.fileName
+        );
+
   showLoader();
   http
-    .get(
-      config.API.fileByFile(
-        "ระบบออกคำสั่ง",
-        type,
-        commandId.value,
-        file.fileName
-      )
-    )
+    .get(pathApi)
     .then((res) => {
       const data = res.data;
       dataFile.value = data;
@@ -257,6 +323,49 @@ function onConfirmOrder() {
   }
 }
 
+/** ดึงข้อมูล บุคคล */
+async function fetchLists() {
+  await http
+    .get(config.API.commandAction(commandId.value, "tab2"))
+    .then(async (res) => {
+      const data = await res.data.result;
+      attachmentList.value = data.commandRecives.map((item: any) => ({
+        id: item.id,
+        name: item.prefix + item.firstName + " " + item.lastName,
+        file: null,
+      }));
+    })
+    .catch((e) => {
+      messageError($q, e);
+    });
+}
+
+function onUploadFileTailer(id: string, file: any) {
+  const type = "แนบท้าย";
+  const fileName = { fileName: type };
+
+  http
+    .post(config.API.subFile("ระบบออกคำสั่ง", type, commandId.value, id), {
+      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, type, id));
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
 onMounted(async () => {
   isCheckDraft.value = isDraft.value;
   isCheckAuthority.value = isAuthority.value;
@@ -264,6 +373,7 @@ onMounted(async () => {
     isLoad.value = false;
     let promises = [fetchDoc("order")];
     if (isAttachment.value) {
+      await fetchLists();
       promises.push(fetchDoc("tailer"));
     }
     await Promise.all(promises).finally(() => {
@@ -318,141 +428,172 @@ onMounted(async () => {
             />
           </div>
 
-          <div
-            class="row col-12 q-col-gutter-sm"
-            style="padding-left: 50px"
-            v-if="isAuthority"
-          >
+          <div class="row col-12" style="padding-left: 50px" v-if="isAuthority">
             <div class="col-12 text-header">
               อัปโหลดเอกสารสแกนกลับเข้าสู่ระบบ
             </div>
-            <div class="col-6">
-              <q-card
-                bordered
-                class="row col-12"
-                style="border: 1px solid #d6dee1"
-              >
-                <div
-                  class="row items-center col-12 text-weight-medium bg-grey-1 q-py-sm q-px-md"
+            <div class="col-6 q-col-gutter-sm">
+              <div class="col-6">
+                <q-card
+                  bordered
+                  class="row col-12"
+                  style="border: 1px solid #d6dee1"
                 >
-                  คำสั่ง
-                  <q-space />
-                  <q-btn
-                    v-if="fileOrder"
-                    rounded
-                    flat
-                    dense
-                    color="primary"
-                    icon="mdi-eye"
-                    @click.prevent="downloadFile(fileOrder, 'order', true)"
+                  <div
+                    class="row items-center col-12 text-weight-medium bg-grey-1 q-py-sm q-px-md"
                   >
-                    <q-tooltip>ดูไฟล์คำสั่ง</q-tooltip>
-                  </q-btn>
-                  <q-btn
-                    v-if="fileOrder"
-                    rounded
-                    flat
-                    dense
-                    color="red"
-                    icon="mdi-download"
-                    @click.prevent="downloadFile(fileOrder, 'order')"
-                  >
-                    <q-tooltip>ดาวน์โหลดไฟล์คำสั่ง</q-tooltip>
-                  </q-btn>
-                </div>
-                <div class="col-12"><q-separator /></div>
-                <div class="col-12 q-pa-md" v-if="step === 2">
-                  <q-file
-                    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-space />
+                    <q-btn
+                      v-if="fileOrder"
+                      rounded
+                      flat
+                      dense
+                      color="primary"
+                      icon="mdi-eye"
+                      @click.prevent="
+                        downloadFile(fileOrder, 'order', true, '')
+                      "
+                    >
+                      <q-tooltip>ดูไฟล์คำสั่ง</q-tooltip>
+                    </q-btn>
+                    <q-btn
+                      v-if="fileOrder"
+                      rounded
+                      flat
+                      dense
+                      color="red"
+                      icon="mdi-download"
+                      @click.prevent="
+                        downloadFile(fileOrder, 'order', false, '')
+                      "
+                    >
+                      <q-tooltip>ดาวน์โหลดไฟล์คำสั่ง</q-tooltip>
+                    </q-btn>
+                  </div>
+                  <div class="col-12"><q-separator /></div>
+                  <div class="col-12 q-pa-md" v-if="step === 2">
+                    <q-file
+                      outlined
+                      dense
+                      v-model="fileUploadOrder"
+                      label="เลือกไฟล์คำสั่ง"
+                      hide-bottom-space
+                      accept=".pdf"
+                      :readonly="store.readonly"
+                    >
+                      <template v-slot:prepend>
+                        <q-icon name="attach_file" />
+                      </template>
 
-                    <template v-slot:after>
-                      <q-btn
-                        @click.prevent="onUploadFile('order')"
-                        flat
-                        round
-                        icon="mdi-upload"
-                        :color="fileUploadOrder == null ? 'grey-5' : 'blue-5'"
-                        :disable="fileUploadOrder == null"
-                      />
-                    </template>
-                  </q-file>
-                </div>
-              </q-card>
-            </div>
+                      <template v-slot:after>
+                        <q-btn
+                          @click.prevent="onUploadFile('order')"
+                          flat
+                          round
+                          icon="mdi-upload"
+                          :color="fileUploadOrder == null ? 'grey-5' : 'blue-5'"
+                          :disable="fileUploadOrder == null"
+                        />
+                      </template>
+                    </q-file>
+                  </div>
+                </q-card>
+              </div>
 
-            <div class="col-6" v-if="isAttachment">
-              <q-card
-                bordered
-                class="row col-12"
-                style="border: 1px solid #d6dee1"
-              >
-                <div
-                  class="row items-center col-12 text-weight-medium bg-grey-1 q-py-sm q-px-md"
+              <div class="col-6" v-if="isAttachment">
+                <q-card
+                  bordered
+                  class="row col-12"
+                  style="border: 1px solid #d6dee1"
                 >
-                  เอกสารแนบท้าย
-                  <q-space />
-                  <q-btn
-                    v-if="fileTailer"
-                    rounded
-                    flat
-                    dense
-                    color="primary"
-                    icon="mdi-eye"
-                    @click.prevent="downloadFile(fileTailer, 'tailer', true)"
+                  <div
+                    class="row items-center col-12 text-weight-medium bg-grey-1 q-py-sm q-px-md"
                   >
-                    <q-tooltip>ดูไฟล์เอกสารแนบท้าย</q-tooltip>
-                  </q-btn>
-                  <q-btn
-                    v-if="fileTailer"
-                    rounded
-                    flat
-                    dense
-                    color="red"
-                    icon="mdi-download"
-                    @click.prevent="downloadFile(fileTailer, 'tailer')"
-                  >
-                    <q-tooltip>ดาวน์โหลดไฟล์แนบท้าย</q-tooltip>
-                  </q-btn>
-                </div>
-                <div class="col-12"><q-separator /></div>
-                <div class="col-12 q-pa-md" v-if="step === 2">
-                  <q-file
-                    outlined
-                    dense
-                    v-model="fileUploadTailer"
-                    label="เลือกไฟล์เอกสารแนบท้าย"
-                    hide-bottom-space
-                    accept=".pdf"
-                    :readonly="store.readonly"
-                  >
-                    <template v-slot:prepend>
-                      <q-icon name="attach_file" />
-                    </template>
-
-                    <template v-slot:after>
-                      <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>
-                    </template>
-                  </q-file>
-                </div>
-              </q-card>
+                    เอกสารแนบท้าย
+                  </div>
+                  <div class="col-12"><q-separator /></div>
+                  <div class="row col-12 q-pa-md q-col-gutter-sm">
+                    <div
+                      v-for="(person, idx) in attachmentList"
+                      :key="person.id"
+                      class="col-12"
+                    >
+                      <q-card flat bordered class="q-pa-sm">
+                        <div class="row items-center">
+                          <div class="text-weight-medium">
+                            {{ person.name }}
+                          </div>
+                          <q-space />
+                          <q-btn
+                            v-if="attachmentFiles[person.id]"
+                            @click.prevent="
+                              downloadFile(
+                                attachmentFiles[person.id],
+                                'tailer',
+                                true,
+                                person.id
+                              )
+                            "
+                            flat
+                            dense
+                            color="primary"
+                            icon="mdi-eye"
+                            class="q-mr-xs"
+                          >
+                            <q-tooltip>ดูไฟล์เอกสารแนบท้าย</q-tooltip>
+                          </q-btn>
+                          <q-btn
+                            v-if="attachmentFiles[person.id]"
+                            @click.prevent="
+                              downloadFile(
+                                attachmentFiles[person.id],
+                                'tailer',
+                                false,
+                                person.id
+                              )
+                            "
+                            flat
+                            dense
+                            color="red"
+                            icon="mdi-download"
+                          >
+                            <q-tooltip>ดาวน์โหลดไฟล์เอกสารแนบท้าย</q-tooltip>
+                          </q-btn>
+                        </div>
+                        <q-file
+                          v-if="step === 2"
+                          outlined
+                          dense
+                          v-model="person.file"
+                          label="เลือกไฟล์เอกสารแนบท้าย"
+                          hide-bottom-space
+                          accept=".pdf"
+                          :readonly="store.readonly"
+                          class="full-width"
+                        >
+                          <template v-slot:prepend>
+                            <q-icon name="attach_file" />
+                          </template>
+                          <template v-slot:after>
+                            <q-btn
+                              @click.prevent="
+                                onUploadFileTailer(person.id, person.file)
+                              "
+                              flat
+                              round
+                              icon="mdi-upload"
+                              :color="person.file == null ? 'grey-5' : 'blue-5'"
+                              :disable="person.file == null"
+                            />
+                            <q-tooltip>อัปโหลดไฟล์เอกสารแนบท้าย</q-tooltip>
+                          </template>
+                        </q-file>
+                      </q-card>
+                    </div>
+                  </div>
+                </q-card>
+              </div>
             </div>
           </div>
 
@@ -462,7 +603,7 @@ onMounted(async () => {
               step === 2 &&
               isAuthority &&
               fileOrder &&
-              (!isAttachment || fileTailer)
+              (!isAttachment || isFileTailer)
             "
           >
             <q-btn
@@ -472,14 +613,14 @@ onMounted(async () => {
               :color="
                 !isAuthority ||
                 fileOrder === null ||
-                (fileTailer === null && isAttachment)
+                (!isFileTailer && isAttachment)
                   ? 'grey-5'
                   : 'public'
               "
               :disable="
                 !isAuthority ||
                 fileOrder === null ||
-                (fileTailer === null && isAttachment)
+                (!isFileTailer && isAttachment)
               "
             />
           </div>