เพิ่ม ui อัพโหลดไฟล์ / detail file

src/modules/05_placement/components/Receive/receiveDetail2.vue

@@ -49,7 +49,36 @@ const status = ref<string>("");
 
 const myForm = ref<QForm | null>(null);
 const edit = ref<boolean>(false);
-
+const rows = ref<any[]>([]);
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "no",
+    align: "left",
+    label: "ลำดับ",
+    sortable: true,
+    field: "no",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "fileName",
+    align: "left",
+    label: "ชื่อไฟล์",
+    sortable: true,
+    field: "fileName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "btnMicrosoft",
+    align: "right",
+    label: "ปุ่ม",
+    sortable: true,
+    field: "btnMicrosoft",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+]);
 const profileId = ref<string>("");
 const educationOld = ref<string>("");
 const organizationPositionOld = ref<string>("");
@@ -170,7 +199,17 @@ const getData = async () => {
     .get(config.API.receiveDataId(paramsId.toString()))
     .then(async (res: any) => {
       const data = res.data.result;
-
+      //   console.log(data);
+      let list: any[] = [];
+      if (data.docs.length > 0) {
+        data.docs.map((doc: any) => {
+          list.push({
+            pathName: doc.pathName ?? "",
+            fileName: doc.fileName ?? "",
+          });
+        });
+      }
+      rows.value = list;
       profileId.value = data.profileId;
       title.value.fullname = `${data.firstname ?? "-"} ${data.lastname ?? "-"}`;
       title.value.organizationPositionOld = data.organizationPositionOld ?? "-";
@@ -1012,6 +1051,37 @@ const getClass = (val: boolean) => {
         </div>
       </div>
     </q-form>
+    <q-card bordered class="row col-12 text-dark q-mt-sm">
+    <div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
+      <div class="q-pl-sm text-weight-bold text-dark">เอกสารเพิ่มเติม</div>
+    </div>
+    <div class="col-12"><q-separator /></div>
+    <div class="col-12">
+      <d-table
+        :rows="rows"
+        :columns="columns"
+        row-key="fileName"
+        hide-header
+        hide-bottom
+      >
+        <template v-slot:body="props">
+          <q-tr :props="props" class="cursor-pointer">
+            <q-td key="no" :props="props">
+              {{ props.rowIndex + 1 }}
+            </q-td>
+            <q-td key="fileName" :props="props">
+              {{ props.row.fileName }}
+            </q-td>
+            <q-td key="btnMicrosoft" :props="props">
+              <q-btn type="a" target="_blank" :href="props.row.pathName" flat dense round color="red" icon="picture_as_pdf">
+                <q-tooltip>ไฟล์ PDF</q-tooltip>
+              </q-btn>
+            </q-td>
+          </q-tr>
+        </template>
+      </d-table>
+    </div>
+  </q-card>
   </q-card>
 </template>
 

src/modules/05_placement/components/Receive/receiveMain.vue

@@ -45,6 +45,8 @@ const popup = () => {
   modal.value = true;
 };
 
+const modalupload = ref<boolean>(false);
+
 const modalTree = ref<boolean>(false);
 const personal = ref<any[]>([]);
 const personalId = ref<string>("");
@@ -70,7 +72,8 @@ const visibleColumns2 = ref<string[]>([
 const filterKeyword = ref<string>("");
 const filterKeyword2 = ref<string>("");
 const filterRef = ref<any>(null);
-
+  const files = ref<any>();
+    const fileDocDataUpload = ref<File[]>([]);
 const listRecevice = ref<any[]>([]);
 const filters = ref<ResponseRow[]>([]);
 const rows = ref<ResponseRow[]>([
@@ -309,6 +312,32 @@ const fecthlistRecevice = async () => {
     });
 };
 
+const fileUploadDoc = async (files: any) => {
+  files.forEach((file: any) => {
+    fileDocDataUpload.value.push(file);
+  });
+};
+
+const addUpload= async () => {
+  // showLoader();
+  // await http
+  //   .post(config.API.listRoundInsignia())
+  //   .then(() => {
+  //     success($q, "บันทึกข้อมูลสำเร็จ");
+  //   })
+  //   .catch((e) => {
+  //     messageError($q, e);
+  //   })
+  //   .finally(async () => {
+  //     hideLoader();
+  //   });
+};
+
+const SaveData = async () => {
+ await  addUpload();
+ await clickCloseUpload();
+};
+
 const resetFilter = () => {
   filterKeyword.value = "";
   filterKeyword2.value = "";
@@ -328,6 +357,9 @@ const add = () => {
 const clickClose = () => {
   modal.value = false;
 };
+const clickCloseUpload = () => {
+  modalupload.value = false;
+};
 
 const openModalTree = (id: string) => {
   personalId.value = id;
@@ -337,6 +369,11 @@ const openModalTree = (id: string) => {
   modalTree.value = true;
 };
 
+const openUpload = (id: string) => {
+  personalId.value = id;
+  modalupload.value = true;
+};
+
 const openDelete = (id: string) => {
   dialogRemove($q, async () => await fetchDataDelete(id));
 };
@@ -594,6 +631,35 @@ const saveOrder = async () => {
                             >เลือกหน่วยงานที่รับโอน</q-item-section
                           >
                         </q-item>
+                        <q-item
+                          clickable
+                          v-close-popup
+                          @click="openUpload(props.row.personalId)"
+                          :disable="
+                            props.row.status == 'REPORT' ||
+                            props.row.status == 'DONE'
+                          "
+                        >
+                          <q-item-section
+                            style="min-width: 0px"
+                            avatar
+                            class="q-py-sm"
+                          >
+                            <q-icon
+                              :color="
+                                props.row.status == 'REPORT' ||
+                                props.row.status == 'DONE'
+                                  ? 'grey'
+                                  : 'blue'
+                              "
+                              size="xs"
+                              name="attach_file"
+                            />
+                          </q-item-section>
+                          <q-item-section
+                            >อัพโหลดเอกสาร</q-item-section
+                          >
+                        </q-item>
                         <q-item
                           clickable
                           v-close-popup
@@ -794,6 +860,47 @@ const saveOrder = async () => {
     </q-card>
   </q-dialog>
 
+  <q-dialog v-model="modalupload">
+    <q-card style="width: 600px">
+      <DialogHeader title="อัพโหลดเอกสาร" :close="clickCloseUpload" />
+      <q-separator />
+      <q-separator />
+      <q-card-section class="q-pt-none">
+        <div class="col-12 row items-center q-col-gutter-sm">
+            <div class="col-12">
+            <q-file
+                  outlined
+                  dense
+                  v-model="files"
+                  @added="fileUploadDoc"
+                  label="อัพโหลดเอกสาร"
+                  lazy-rules
+                >
+                  <!-- :rules="[
+                    (val) => val || 'กรุณาเลือกไฟล์หนังสือถึงหน่วยงานที่รับโอน',
+                  ]" -->
+                  <template v-slot:prepend>
+                    <q-icon name="attach_file" />
+                  </template>
+                </q-file>
+              </div>
+        </div>
+      </q-card-section>
+      <q-card-actions class="text-primary q-py-sm">
+          <q-space />
+          <q-btn
+            flat
+            round
+            color="public"
+            @click="SaveData"
+            icon="mdi-content-save-outline"
+          >
+            <q-tooltip>บันทึก</q-tooltip>
+          </q-btn>
+        </q-card-actions>
+    </q-card>
+  </q-dialog>
+
   <DialogOrgTree
     v-model:modal="modalTree"
     :close="closeModalTree"