updated req edit profile

src/modules/04_registryPerson/components/requestEdit/Page01_Detail.vue

@@ -30,7 +30,6 @@ const {
   success,
 } = useCounterMixin();
 
-const urlImg = ref<string>("");
 const modalUpdate = ref<boolean>(false);
 const modalFather = ref<boolean>(false);
 const modalMother = ref<boolean>(false);
@@ -85,9 +84,8 @@ async function fetchDataRequest() {
       } else {
         isReadOnly.value = false;
       }
-      if (dataRequest.value.topic == "ขอแก้ไขรูปภาพประจำตัว") {
-        onDownloadFile(requestId.value);
-      }
+
+      onDownloadFile(requestId.value);
     })
     .catch((err) => {
       messageError($q, err);
@@ -143,12 +141,13 @@ function classInput(val: boolean) {
   };
 }
 
+const checkFile = ref<null | false | "img" | "doc">(null); // เช็คไฟล์อัปโหลด null ค่าเริ่มต้น, false ไม่มีไฟล์, "img" รูปภาพ, "doc" เอกสาร
+const urlDownload = ref<string>(""); // url ไฟล์อัปโหลด
 /**
  * function หาชื่อไฟล์
  * @param id รายการยื่นคำร้องขอแก้ไขข้อมูล
  */
 function onDownloadFile(id: string) {
-  showLoader();
   http
     .get(
       config.API.file(
@@ -161,12 +160,11 @@ function onDownloadFile(id: string) {
       if (res.data.length !== 0) {
         await downloadUrl(id, res.data[0].fileName);
       } else {
-        hideLoader();
+        checkFile.value = false;
       }
     })
     .catch((e) => {
       messageError($q, e);
-      hideLoader();
     });
 }
 
@@ -186,10 +184,11 @@ async function downloadUrl(id: string, fileName: string) {
       )
     )
     .then((res) => {
+      urlDownload.value = res.data.downloadUrl;
       if (dataRequest.value.topic == "ขอแก้ไขรูปภาพประจำตัว") {
-        urlImg.value = res.data.downloadUrl;
+        checkFile.value = "img";
       } else {
-        window.open(res.data.downloadUrl, "_blank");
+        checkFile.value = "doc";
       }
     })
     .catch((e) => {
@@ -341,56 +340,37 @@ onMounted(async () => {
                     type="textarea"
                   />
                 </div>
-                <div class="text-weight-bold text-dark col-12">
-                  {{
-                    dataRequest.topic == "ขอแก้ไขรูปภาพประจำตัว"
-                      ? "รูปภาพประจำตัว"
-                      : "เอกสารหลักฐาน"
-                  }}
-                </div>
-                <div class="col-12">
-                  <!-- เอกสารหลักฐาน -->
-                  <q-btn
-                    v-if="dataRequest.topic !== 'ขอแก้ไขรูปภาพประจำตัว'"
-                    icon="mdi-download"
-                    dense
-                    flat
-                    label="ดาวน์โหลดเอกสารหลักฐาน"
-                    color="blue"
-                    @click.stop.pervent="onDownloadFile(requestId)"
-                  >
-                    <q-tooltip>หลักฐานอ้างอิง</q-tooltip>
-                  </q-btn>
-                  <div v-else>
-                    <span v-if="urlImg == ''"
-                      ><div
-                        style="
-                          height: 200px;
-                          max-width: 200px;
-                          display: flex;
-                          flex-direction: column;
-                          justify-content: center;
-                          align-items: center;
-                        "
-                        class="text-grey-5"
-                      >
-                        <q-spinner color="primary" size="3em" :thickness="10" />
-                      </div>
-                    </span>
-                    <q-img
-                      v-else
-                      :src="urlImg"
-                      :ratio="1"
-                      spinner-color="primary"
-                      spinner-size="82px"
-                      fit="cover"
-                      style="
-                        height: 200px;
-                        max-width: 200px;
-                        border-radius: 20px;
-                      "
+
+                <div v-if="checkFile != null && checkFile != false">
+                  <div class="text-weight-bold text-dark col-12">
+                    {{
+                      checkFile == "img" ? "รูปภาพประจำตัว" : "เอกสารหลักฐาน"
+                    }}
+                  </div>
+                  <div class="col-12">
+                    <!-- เอกสารหลักฐาน -->
+                    <q-btn
+                      v-if="checkFile == 'doc'"
+                      icon="mdi-download"
+                      dense
+                      flat
+                      label="ดาวน์โหลดเอกสารหลักฐาน"
+                      color="blue"
+                      :href="urlDownload"
+                      target="_blank"
+                    />
+                    <div
+                      v-else-if="checkFile == 'img'"
+                      class="q-pa-md q-gutter-sm"
                     >
-                    </q-img>
+                      <q-avatar size="120px" color="grey-4">
+                        <img
+                          :src="urlDownload"
+                          class="bg-grey-3"
+                          style="object-fit: cover"
+                        />
+                      </q-avatar>
+                    </div>
                   </div>
                 </div>
               </div>