no message

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

@@ -19,7 +19,6 @@ import type { DataRequest } from "@/modules/04_registryPerson/interface/response
 
 /** importComponents*/
 import DialogStatus from "@/modules/04_registryPerson/components/requestEdit/Dialog01_EditStatus.vue";
-import DialogUpdate from "@/modules/04_registryPerson/components/Dialog/DialogUpdate.vue";
 
 const $q = useQuasar();
 const router = useRouter();
@@ -181,14 +180,7 @@ function filterOption(val: string, update: Function) {
  */
 function onclickEdit(data: Request) {
   requestId.value = data.id;
-  if (data.topic == "ขอปรับปรุงข้อมูลจากกรมการปกครอง") {
+  router.push(`/registry-officer/request-edit/personal/${data.id}`);
-    modalUpdate.value = true;
-    idCard.value = data.idcard as string;
-    profileId.value = data.profileId;
-  } else {
-    // modalStatus.value = true;
-    router.push(`/registry-officer/request-edit/personal/${data.id}`);
-  }
 }
 
 /**
@@ -350,26 +342,15 @@ onMounted(() => {
           <q-tr :props="props">
             <q-td auto-width>
               <q-btn
-                :icon="
+                icon="edit"
-                  props.row.topic == 'ขอปรับปรุงข้อมูลจากกรมการปกครอง'
-                    ? 'mdi-sync-circle'
-                    : 'edit'
-                "
                 round
                 dense
                 flat
-                :color="
+                color="edit
-                  props.row.topic == 'ขอปรับปรุงข้อมูลจากกรมการปกครอง'
-                    ? 'info'
-                    : 'edit'
                 "
                 @click.pervent="onclickEdit(props.row)"
               >
-                <q-tooltip>{{
+                <q-tooltip>แก้ไขสถานะคำร้อง</q-tooltip>
-                  props.row.topic == "ขอปรับปรุงข้อมูลจากกรมการปกครอง"
-                    ? "ขอปรับปรุงข้อมูลจากกรมการปกครอง"
-                    : "แก้ไขสถานะคำร้อง"
-                }}</q-tooltip>
               </q-btn>
             </q-td>
             <q-td v-for="col in props.cols" :key="col.name" :props="props">
@@ -415,13 +396,7 @@ onMounted(() => {
     :request-id="requestId"
   />
 
-  <DialogUpdate
+
-    v-model:modal="modalUpdate"
-    v-model:id-card="idCard"
-    v-model:profile-id="profileId"
-    :fetch-data="fetchListRequset"
-    :request-id="requestId"
-  />
 </template>
 
 <style scoped></style>

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

@@ -12,6 +12,7 @@ import type { DataOption } from "@/modules/04_registryPerson/interface/index/Mai
 import type { DataRequest } from "@/modules/04_registryPerson/interface/response/Main";
 
 import Workflow from "@/components/Workflow/Main.vue";
+import DialogUpdate from "@/modules/04_registryPerson/components/Dialog/DialogUpdate.vue";
 
 const $q = useQuasar();
 const router = useRouter();
@@ -26,6 +27,10 @@ const {
   success,
 } = useCounterMixin();
 
+const urlImg = ref<string>("");
+const modalUpdate = ref<boolean>(false);
+const profileId = ref<string>("");
+const idCard = ref<string>("");
 const requestId = ref<string>(route.params.id.toString());
 const dataRequest = ref<any>({
   fullname: "",
@@ -69,6 +74,9 @@ async function fetchDataRequest() {
       } else {
         isReadOnly.value = false;
       }
+      if (dataRequest.value.topic == "ขอแก้ไขรูปภาพประจำตัว") {
+        onDownloadFile(requestId.value);
+      }
     })
     .catch((err) => {
       messageError($q, err);
@@ -124,6 +132,67 @@ function classInput(val: boolean) {
   };
 }
 
+/**
+ * function หาชื่อไฟล์
+ * @param id รายการยื่นคำร้องขอแก้ไขข้อมูล
+ */
+function onDownloadFile(id: string) {
+  showLoader();
+  http
+    .get(
+      config.API.file(
+        "ระบบทะเบียนประวัติ",
+        "เอกสารหลักฐานคำร้องขอแก้ไขข้อมูล",
+        id
+      )
+    )
+    .then(async (res) => {
+      if (res.data.length !== 0) {
+        await downloadUrl(id, res.data[0].fileName);
+      } else {
+        hideLoader();
+      }
+    })
+    .catch((e) => {
+      messageError($q, e);
+      hideLoader();
+    });
+}
+
+/**
+ * function  โหลดไฟล์
+ * @param id  รายการยื่นคำร้องขอแก้ไขข้อมูล
+ * @param fileName  ชื่อไฟล์
+ */
+async function downloadUrl(id: string, fileName: string) {
+  await 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();
+    });
+}
+
+function onUpdate() {
+  modalUpdate.value = true;
+}
+
 onMounted(async () => {
   await fetchDataRequest();
 });
@@ -144,6 +213,15 @@ onMounted(async () => {
       />
       รายละเอียดคำร้องขอแก้ไขทะเบียนประวัติของ{{ dataRequest.fullname }}
     </div>
+    <q-space />
+    <q-btn
+      v-if="workflowRef?.permission.isUpdate"
+      color="public"
+      label="ปรับปรุงข้อมูลจากกรมการปกครอง"
+      @click="onUpdate"
+    >
+      <q-tooltip>ปรับปรุงข้อมูลจากกรมการปกครอง</q-tooltip>
+    </q-btn>
   </div>
   <q-card>
     <q-card-section>
@@ -228,6 +306,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>
@@ -325,6 +455,14 @@ onMounted(async () => {
       </div>
     </q-card-section>
   </q-card>
+
+  <DialogUpdate
+    v-model:modal="modalUpdate"
+    v-model:id-card="idCard"
+    v-model:profile-id="profileId"
+    :fetch-data="fetchDataRequest"
+    :request-id="requestId"
+  />
 </template>
 
 <style scoped></style>