แก้อัพไฟล์

src/modules/04_registryPerson/components/detail/GovernmentInformation/04_PerformSpecialWork.vue

@@ -10,6 +10,7 @@ import http from "@/plugins/http";
 import config from "@/app.config";
 
 import type { RequestItemsObject } from "@/modules/04_registryPerson/interface/index/performSpecialWork";
+import type { ResFileData } from "@/modules/04_registryPerson/interface/index/Main";
 
 import DialogHeader from "@/components/DialogHeader.vue";
 import DialogHistory from "@/modules/04_registryPerson/components/detail/GovernmentInformation/04_PerformSpecialWorkHistory.vue";
@@ -33,8 +34,13 @@ const profileId = ref<string>(
   route.params.id ? route.params.id.toString() : ""
 );
 const empType = ref<string>(pathRegistryEmp(route.name?.toString() ?? ""));
-const fileUpload = ref<File>();
+
 const uploadUrl = ref<string>("");
+
+const isUpload = ref<boolean>(false);
+const fileUpload = ref<File | null>(null);
+const fileData = ref<ResFileData | null>(null);
+
 /** props*/
 const isLeave = defineModel<boolean>("isLeave", {
   required: true,
@@ -51,7 +57,8 @@ const dutyData = reactive<RequestItemsObject>({
   detail: "", //รายละเอียด
   reference: "", //เอกสารอ้างอิง
   refCommandNo: "", //เลขที่คำสั่ง
-  refCommandDate: null, //'เอกสารอ้างอิง (ลงวันที่)'
+  refCommandDate: null, //'เอกสารอ้างอิง (ลงวันที่)',
+  isUpload: false,
 });
 
 const mode = ref<string>("table"); //การแสดงผล Table card
@@ -158,6 +165,12 @@ function openDialogEdit(props: RequestItemsObject) {
   dutyData.reference = props.reference;
   dutyData.refCommandNo = props.refCommandNo;
   dutyData.refCommandDate = props.refCommandDate;
+
+  isUpload.value = props.isUpload;
+
+  if (isUpload.value && props.id) {
+    onDownloadFile(props.id, false);
+  }
 }
 
 /**
@@ -179,7 +192,11 @@ function closeDialog() {
   dutyData.reference = "";
   dutyData.refCommandNo = "";
   dutyData.refCommandDate = null;
-  fileUpload.value = undefined;
+  fileUpload.value = null;
+
+  fileUpload.value = null;
+  isUpload.value = false;
+  fileData.value = null;
 }
 
 /** fetch ข้อมูลรายการพิเศษ*/
@@ -211,6 +228,7 @@ function addData() {
     reference: dutyData.reference,
     refCommandNo: dutyData.refCommandNo,
     refCommandDate: dutyData.refCommandDate,
+    isUpload: !edit.value ? undefined : isUpload.value,
   };
   http
     .post(config.API.profileNewDuty(empType.value), body)
@@ -239,8 +257,8 @@ function editData(idData: string) {
       profileId: undefined,
     })
     .then(async (res) => {
-      if (fileUpload.value && res.data.result) {
-        await uploadProfile(res.data.result);
+      if (fileUpload.value && id.value) {
+        await uploadProfile(id.value);
       }
       await fetchData(profileId.value);
       await success($q, "บันทึกข้อมูลสำเร็จ");
@@ -297,19 +315,37 @@ async function uploadFileURL(uploadUrl: string, file: any) {
         "Content-Type": file.type,
       },
     })
-    .then(() => {
-      fileUpload.value = undefined;
+    .then(async (res) => {
+      if (res.status == 200) {
+        await isUploadFn();
+      }
+      fileUpload.value = null;
     })
     .catch((err) => {
       messageError($q, err);
     });
 }
 
+async function isUploadFn() {
+  await http
+    .patch(config.API.profileNewDutyByDutyId(id.value, empType.value), {
+      isUpload: fileUpload.value ? true : false,
+    })
+    .then(async (res) => {})
+
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
 /**
  * ฟังก์ชันโหลไฟลเอกสารหลักฐาน
  * @param id รายการที่ต้องการโหลด
  */
-async function onDownloadFile(id: string) {
+async function onDownloadFile(id: string, isLoad: boolean = true) {
   showLoader();
   await http
     .get(
@@ -322,8 +358,11 @@ async function onDownloadFile(id: string) {
       )
     )
     .then(async (res) => {
-      const data = res.data.downloadUrl;
-      window.open(data, "_blank");
+      const data = res.data;
+      fileData.value = data;
+      if (isLoad) {
+        window.open(data.downloadUrl, "_blank");
+      }
     })
     .catch((err) => {
       messageError($q, err);
@@ -756,6 +795,7 @@ onMounted(() => {
             <div class="col-xs-12 col-sm-12 col-md-12">
               <div class="row">
                 <q-uploader
+                  v-if="!isUpload"
                   color="gray"
                   type="file"
                   flat
@@ -828,6 +868,31 @@ onMounted(() => {
                     </div>
                   </template>
                 </q-uploader>
+
+                <q-list bordered dense separator v-else class="full-width">
+                  <q-item>
+                    <q-item-section> {{ fileData?.fileName }}</q-item-section>
+                    <q-item-section avatar>
+                      <div class="row">
+                        <q-btn
+                          flat
+                          round
+                          color="primary"
+                          icon="mdi-download"
+                          @click="onDownloadFile(id)"
+                        />
+
+                        <q-btn
+                          flat
+                          round
+                          color="grey"
+                          icon="close"
+                          @click="isUpload = false"
+                        />
+                      </div>
+                    </q-item-section>
+                  </q-item>
+                </q-list>
               </div>
             </div>
           </div>