no message

src/modules/10_registry/components/DialogAddRequestEdit.vue

@@ -171,6 +171,7 @@ function fetchProfile() {
 
 /** popup รายละเอียดของ ขอปรับปรุงข้อมูลจากกรมการปกครอง */
 function onInfo(val: string) {
+  formData.document = null;
   if (val == "ขอปรับปรุงข้อมูลจากกรมการปกครอง") {
     modalInfo.value = true;
   }
@@ -238,10 +239,19 @@ watch(
               <q-file
                 :class="classInput(isReadOnly)"
                 v-model="formData.document"
-                label="อัปโหลดเอกสารหลักฐาน"
+                :label="
+                  formData.topic == 'ขอแก้ไขรูปภาพประจำตัว'
+                    ? 'อัปโหลดรูปภาพประจำตัว'
+                    : 'อัปโหลดเอกสารหลักฐาน'
+                "
                 flat
                 dense
                 outlined
+                :accept="
+                  formData.topic == 'ขอแก้ไขรูปภาพประจำตัว'
+                    ? 'image/*'
+                    : '.pdf,.xlsx,.docx'
+                "
                 hide-bottom-space
                 :rules="[(val:any) => !!val || `${'กรุณาเลือกไฟล์'}`]"
               />

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

@@ -18,6 +18,7 @@ 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>({
@@ -48,6 +49,9 @@ async function fetchData() {
         status: data.status,
         remark: data.remark,
       };
+      if (dataRequest.value.topic == "ขอแก้ไขรูปภาพประจำตัว") {
+        onDownloadFile(requestId.value);
+      }
     })
     .catch((err) => {
       messageError($q, err);
@@ -57,6 +61,63 @@ async function fetchData() {
     });
 }
 
+/**
+ * function หาชื่อไฟล์
+ * @param id รายการยื่นคำร้องขอแก้ไขข้อมูล
+ */
+function onDownloadFile(id: string) {
+  showLoader();
+  http
+    .get(
+      config.API.file(
+        "ระบบทะเบียนประวัติ",
+        "เอกสารหลักฐานคำร้องขอแก้ไขข้อมูล",
+        id
+      )
+    )
+    .then((res) => {
+      if (res.data.length !== 0) {
+        downloadUrl(id, res.data[0].fileName);
+      } else {
+        hideLoader();
+      }
+    })
+    .catch((e) => {
+      messageError($q, e);
+      hideLoader();
+    });
+}
+
+/**
+ * function  โหลดไฟล์
+ * @param id  รายการยื่นคำร้องขอแก้ไขข้อมูล
+ * @param fileName  ชื่อไฟล์
+ */
+function downloadUrl(id: string, fileName: string) {
+  http
+    .get(
+      config.API.fileByFile(
+        "ระบบทะเบียนประวัติ",
+        "เอกสารหลักฐานคำร้องขอแก้ไขข้อมูล",
+        id,
+        fileName
+      )
+    )
+    .then((res) => {
+      if (dataRequest.value.topic == "ขอแก้ไขรูปภาพประจำตัว") {
+        urlImg.value = res.data.downloadUrl;
+      } else {
+        window.open(res.data.downloadUrl, "_blank");
+      }
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
 onMounted(async () => {
   await fetchData();
 });
@@ -157,6 +218,58 @@ 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"
+                    round
+                    dense
+                    flat
+                    color="primary"
+                    @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;
+                      "
+                    >
+                    </q-img>
+                  </div>
+                </div>
               </div>
             </q-card-section>
           </q-card>