updated req edit profile

src/modules/10_registry/views/requestEditDetail.vue

@@ -18,7 +18,6 @@ const router = useRouter();
 const route = useRoute();
 const { showLoader, hideLoader, messageError, date2Thai } = useCounterMixin();
 
-const urlImg = ref<string>("");
 const requestId = ref<string>(route.params.id.toString());
 
 const dataRequest = ref<any>({
@@ -49,9 +48,7 @@ async function fetchData() {
         status: data.status,
         remark: data.remark,
       };
-      if (dataRequest.value.topic == "ขอแก้ไขรูปภาพประจำตัว") {
+      onDownloadFile(requestId.value); // เช็คว่ามีไฟล์อัปโหลดหรือไม่
-        onDownloadFile(requestId.value);
-      }
     })
     .catch((err) => {
       messageError($q, err);
@@ -61,12 +58,14 @@ async function fetchData() {
     });
 }
 
+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(
@@ -75,16 +74,15 @@ function onDownloadFile(id: string) {
         id
       )
     )
-    .then((res) => {
+    .then(async (res) => {
       if (res.data.length !== 0) {
-        downloadUrl(id, res.data[0].fileName);
+        await downloadUrl(id, res.data[0].fileName);
       } else {
-        hideLoader();
+        checkFile.value = false;
       }
     })
     .catch((e) => {
       messageError($q, e);
-      hideLoader();
     });
 }
 
@@ -104,10 +102,11 @@ 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) => {
@@ -218,54 +217,37 @@ onMounted(async () => {
                     type="textarea"
                   />
                 </div>
-                <div class="text-weight-bold text-dark col-12">
+
-                  {{
+                <div v-if="checkFile != null && checkFile != false">
-                    dataRequest.topic == "ขอแก้ไขรูปภาพประจำตัว"
+                  <div class="text-weight-bold text-dark col-12">
-                      ? "รูปภาพประจำตัว"
+                    {{
-                      : "เอกสารหลักฐาน"
+                      checkFile == "img" ? "รูปภาพประจำตัว" : "เอกสารหลักฐาน"
-                  }}
+                    }}
-                </div>
+                  </div>
-                <div class="col-12">
+                  <div class="col-12">
-                  <!-- เอกสารหลักฐาน -->
+                    <!-- เอกสารหลักฐาน -->
-                  <q-btn
+                    <q-btn
-                    v-if="dataRequest.topic !== 'ขอแก้ไขรูปภาพประจำตัว'"
+                      v-if="checkFile == 'doc'"
-                    icon="mdi-download"
+                      icon="mdi-download"
-                    dense
+                      dense
-                    flat
+                      flat
-                    label="ดาวน์โหลดเอกสารหลักฐาน"
+                      label="ดาวน์โหลดเอกสารหลักฐาน"
-                    color="blue"
+                      color="blue"
-                    @click.stop.pervent="onDownloadFile(requestId)"
+                      :href="urlDownload"
-                  />
+                      target="_blank"
-                  <div v-else>
+                    />
-                    <span v-if="urlImg == ''"
+                    <div
-                      ><div
+                      v-else-if="checkFile == 'img'"
-                        style="
+                      class="q-pa-md q-gutter-sm"
-                          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;
-                      "
                     >
-                    </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>

src/modules/10_registry/views/requestEditMain.vue

@@ -81,15 +81,15 @@ const columns = ref<QTableProps["columns"]>([
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
-  {
+  // {
-    name: "document",
+  //   name: "document",
-    align: "center",
+  //   align: "center",
-    label: "หลักฐานอ้างอิง",
+  //   label: "หลักฐานอ้างอิง",
-    sortable: false,
+  //   sortable: false,
-    field: "document",
+  //   field: "document",
-    headerStyle: "font-size: 14px",
+  //   headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
+  //   style: "font-size: 14px",
-  },
+  // },
   {
     name: "status",
     align: "left",
@@ -115,7 +115,7 @@ const visibleColumns = ref<string[]>([
   "no",
   "topic",
   "detail",
-  "document",
+  // "document",
   "status",
   "remark",
 ]);
@@ -405,7 +405,7 @@ onMounted(() => {
                   <div v-if="col.name == 'no'">
                     {{ props.rowIndex + 1 }}
                   </div>
-                  <div v-else-if="col.name === 'document'">
+                  <!-- <div v-else-if="col.name === 'document'">
                     <q-btn
                       icon="mdi-download"
                       round
@@ -417,7 +417,7 @@ onMounted(() => {
                     >
                       <q-tooltip>หลักฐานอ้างอิง</q-tooltip>
                     </q-btn>
-                  </div>
+                  </div> -->
                   <div v-else class="table_ellipsis2">
                     {{ col.value ? col.value : "-" }}
                   </div>