updated req edit profile

src/modules/04_registryPerson/components/requestEdit/01_TabInformation.vue

@@ -73,15 +73,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",
@@ -108,7 +108,7 @@ const visibleColumns = ref<string[]>([
   "fullname",
   "topic",
   "detail",
-  "document",
+  // "document",
   "status",
   "remark",
 ]);
@@ -354,7 +354,7 @@ onMounted(() => {
               </q-btn>
             </q-td>
             <q-td v-for="col in props.cols" :key="col.name" :props="props">
-              <div v-if="col.name === 'document'">
+              <!-- <div v-if="col.name === 'document'">
                 <q-btn
                   icon="mdi-download"
                   round
@@ -365,10 +365,10 @@ onMounted(() => {
                 >
                   <q-tooltip>ดาวน์โหลดเอกสารหลักฐาน</q-tooltip>
                 </q-btn>
-              </div>
+              </div> -->
-              <div v-else class="table_ellipsis2">
+              <!-- <div v-else class="table_ellipsis2"> -->
-                {{ col.value ? col.value : "-" }}
+              {{ col.value ? col.value : "-" }}
-              </div>
+              <!-- </div> -->
             </q-td>
           </q-tr>
         </template>
@@ -395,8 +395,6 @@ onMounted(() => {
     :fetch-data="fetchListRequset"
     :request-id="requestId"
   />
-
-
 </template>
 
 <style scoped></style>

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">
+
-                  {{
+                <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"
-                    <q-tooltip>หลักฐานอ้างอิง</q-tooltip>
+                    />
-                  </q-btn>
+                    <div
-                  <div v-else>
+                      v-else-if="checkFile == 'img'"
-                    <span v-if="urlImg == ''"
+                      class="q-pa-md q-gutter-sm"
-                      ><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;
-                      "
                     >
-                    </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>