From 51c6c2cecb9549e01187ae5c78b4a20b2310b883 Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Fri, 19 Jul 2024 17:56:51 +0700
Subject: [PATCH] =?UTF-8?q?=E0=B8=A3=E0=B8=B2=E0=B8=A2=E0=B8=81=E0=B8=B2?=
 =?UTF-8?q?=E0=B8=A3=E0=B8=A2=E0=B8=B7=E0=B9=88=E0=B8=99=E0=B8=84=E0=B8=B3?=
 =?UTF-8?q?=E0=B8=A3=E0=B9=89=E0=B8=AD=E0=B8=87=E0=B8=82=E0=B8=AD=E0=B9=81?=
 =?UTF-8?q?=E0=B8=81=E0=B9=89=E0=B9=84=E0=B8=82=E0=B8=82=E0=B9=89=E0=B8=AD?=
 =?UTF-8?q?=E0=B8=A1=E0=B8=B9=E0=B8=A5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/02_organizational/api.organization.ts |   5 +
 .../components/requestEdit/DialogStatus.vue   |  61 +++++-
 .../04_registryNew/views/requestEdit.vue      | 200 +++++++++++++-----
 3 files changed, 205 insertions(+), 61 deletions(-)

diff --git a/src/api/02_organizational/api.organization.ts b/src/api/02_organizational/api.organization.ts
index b0c2c7f3f..b07565b76 100644
--- a/src/api/02_organizational/api.organization.ts
+++ b/src/api/02_organizational/api.organization.ts
@@ -107,4 +107,9 @@ export default {
   /** รักษาการตำแหน่ง*/
   orgAct,
   orgPosAct,
+
+  /**
+   * รายการคำร้องขอแก้ไขทะเบียนประวัติ
+   */
+  requestEdit: `${orgProfile}/edit/`,
 };
diff --git a/src/modules/04_registryNew/components/requestEdit/DialogStatus.vue b/src/modules/04_registryNew/components/requestEdit/DialogStatus.vue
index d5af53c26..18b24ec7b 100644
--- a/src/modules/04_registryNew/components/requestEdit/DialogStatus.vue
+++ b/src/modules/04_registryNew/components/requestEdit/DialogStatus.vue
@@ -1,6 +1,8 @@
 <script setup lang="ts">
-import { reactive, ref } from "vue";
+import { reactive, ref, watch } from "vue";
 import { useQuasar } from "quasar";
+import http from "@/plugins/http";
+import config from "@/app.config";
 
 import type { DataOption } from "@/modules/04_registryNew/interface/index/Main";
 
@@ -27,9 +29,9 @@ const { dialogConfirm, showLoader, hideLoader, messageError, success } =
  *  props
  */
 const modal = defineModel<boolean>("modal", { required: true });
+const requestId = defineModel<string>("requestId", { required: true });
 const props = defineProps({
   fetchData: { type: Function, requied: true },
-  data: { type: Object, requied: true },
 });
 
 const isReadOnly = ref<boolean>(false);
@@ -43,7 +45,23 @@ const statusOptionMain = ref<DataOption[]>(
 const statusOption = ref<DataOption[]>(statusOptionMain.value);
 
 function onSubmit() {
-  dialogConfirm($q, async () => {});
+  dialogConfirm($q, () => {
+    showLoader();
+    http
+      .patch(config.API.requestEdit + `${requestId.value}`, {
+        status: formData.status,
+        remark: formData.remark,
+      })
+      .then(async () => {
+        await props.fetchData?.();
+        closeDialog();
+        await success($q, "บันทึกข้อมูลสำเร็จ");
+      })
+      .catch((err) => {
+        messageError($q, err);
+        hideLoader();
+      });
+  });
 }
 
 function closeDialog() {
@@ -66,6 +84,35 @@ function filterOption(val: string, update: Function) {
     );
   });
 }
+
+function fetchDataRequest() {
+  showLoader();
+  http
+    .get(config.API.requestEdit + `${requestId.value}`)
+    .then((res) => {
+      const data = res.data.result;
+      formData.status = data.status;
+      formData.remark = data.remark;
+      if (data.status !== "PENDING") {
+        isReadOnly.value = true;
+      } else {
+        isReadOnly.value = false;
+      }
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+watch(
+  () => modal.value,
+  () => {
+    modal.value && fetchDataRequest();
+  }
+);
 </script>
 
 <template>
@@ -80,6 +127,7 @@ function filterOption(val: string, update: Function) {
             <div class="col-xs-12 col-md-12">
               <q-select
                 :class="classInput(isReadOnly)"
+                :readonly="isReadOnly"
                 v-model="formData.status"
                 label="สถานะ"
                 dense
@@ -110,6 +158,7 @@ function filterOption(val: string, update: Function) {
             <div class="col-xs-12 col-md-12">
               <q-input
                 :class="classInput(isReadOnly)"
+                :readonly="isReadOnly"
                 v-model="formData.remark"
                 label="รายละเอียด"
                 dense
@@ -122,9 +171,9 @@ function filterOption(val: string, update: Function) {
         </q-card-section>
         <q-separator />
 
-        <q-card-actions align="right">
-          <q-btn label="ยื่นคำร้อง" color="secondary" type="submit"
-            ><q-tooltip>ยื่นคำร้อง</q-tooltip></q-btn
+        <q-card-actions align="right" v-if="!isReadOnly">
+          <q-btn label="บันทึก" color="secondary" type="submit"
+            ><q-tooltip>บันทึก</q-tooltip></q-btn
           >
         </q-card-actions>
       </q-form>
diff --git a/src/modules/04_registryNew/views/requestEdit.vue b/src/modules/04_registryNew/views/requestEdit.vue
index 21f656128..29e15c326 100644
--- a/src/modules/04_registryNew/views/requestEdit.vue
+++ b/src/modules/04_registryNew/views/requestEdit.vue
@@ -1,36 +1,46 @@
 <script setup lang="ts">
-import { ref, onMounted } from "vue";
+import { ref, onMounted, watch } from "vue";
 import { useRouter } from "vue-router";
+import { useQuasar } from "quasar";
 import config from "@/app.config";
 import http from "@/plugins/http";
 
+/**
+ * importType
+ */
+import type { QTableProps } from "quasar";
+import type {
+  DataOption,
+  Pagination,
+} from "@/modules/04_registryNew/interface/index/Main";
+
 /**
  * importComponents
  */
 import DialogStatus from "@/modules/04_registryNew/components/requestEdit/DialogStatus.vue";
 
-/**
- * importType
- */
-import type { QTableProps } from "quasar";
-import type { DataOption } from "@/modules/04_registryNew/interface/index/Main";
-
 /**
  * importStore
  */
 import { useRequestEditStore } from "@/modules/04_registryNew/stores/RequestEdit";
+import { useCounterMixin } from "@/stores/mixin";
 
 /**
  * use
  */
+const $q = useQuasar();
 const router = useRouter();
 const store = useRequestEditStore();
+const { showLoader, hideLoader, messageError } = useCounterMixin();
 
 /**
  * Table
  */
 const rows = ref<any[]>([]);
-const dataList = ref<any[]>([]);
+const page = ref<number>(1);
+const pageSize = ref<number>(10);
+const rowsTotal = ref<number>(0);
+const maxPage = ref<number>(0);
 
 const columns = ref<QTableProps["columns"]>([
   {
@@ -77,7 +87,6 @@ const columns = ref<QTableProps["columns"]>([
     label: "หลักฐานอ้างอิง",
     sortable: true,
     field: "document",
-    format: (v) => (v ? v : "-"),
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
@@ -119,48 +128,36 @@ const status = ref<string>("");
 const keyword = ref<string>("");
 const statusOption = ref<DataOption[]>(store.optionStatus);
 const modalStatus = ref<boolean>(false);
-const dataRequest = ref<any>();
+const requestId = ref<string>("");
 
-function fetchListRequest() {
-  const data = [
-    {
-      id: "1",
-      fullname: "นายเกียรติศักดิ์ บัณฑิต",
-      topic: "ขอแก้ไขคำนำหน้านาม ชื่อ นามสกุล",
-      detail: "ขอแก้ไขคำนำหน้านาม",
-      document: null,
-      status: "PENDING",
-      remark: "",
-    },
-    {
-      id: "2",
-      fullname: "นายนิมมาน วงศ์วโรทัย",
-      topic: "ขอแก้ไขข้อมูลประวัติการศึกษา",
-      detail: "ขอแก้ไขคำนำหน้านาม",
-      document: null,
-      status: "COMPLETE",
-      remark: "",
-    },
-    {
-      id: "3",
-      fullname: "นายพัฒนกิจ จันทร์สว่างวงศ์",
-      topic: "ขอแก้ไขชื่อ - นามสกุล คู่สมรส",
-      detail: "ขอแก้ไขคำนำหน้านาม",
-      document: null,
-      status: "REJECT",
-      remark: "",
-    },
-  ];
-  dataList.value = data;
-  rows.value = dataList.value;
+function fetchListRequset() {
+  showLoader();
+  http
+    .get(config.API.requestEdit + `admin`, {
+      params: {
+        page: page.value,
+        pageSize: pageSize.value,
+        status: status.value,
+        keyword: keyword.value,
+      },
+    })
+    .then((res) => {
+      const data = res.data.result;
+      maxPage.value = Math.ceil(data.total / pageSize.value);
+      rowsTotal.value = data.total;
+      rows.value = data.data;
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
 }
 
-function updateStatusValue(val: string) {
-  if (val) {
-    rows.value = dataList.value.filter((e) => e.status === val);
-  } else {
-    rows.value = dataList.value;
-  }
+function updateStatusValue() {
+  page.value = 1;
+  fetchListRequset();
 }
 
 function clearStatus() {
@@ -177,13 +174,78 @@ function filterOption(val: string, update: Function) {
   });
 }
 
-function onclickEdit(data: any) {
+function onclickEdit(id: string) {
   modalStatus.value = true;
-  dataRequest.value = data;
+  requestId.value = id;
 }
 
+function updatePageSizePagination(newPagination: Pagination) {
+  page.value = 1;
+  pageSize.value = newPagination.rowsPerPage;
+}
+
+/**
+ * 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) => {
+      window.open(res.data.downloadUrl, "_blank");
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+watch(
+  () => pageSize.value,
+  () => {
+    fetchListRequset();
+  }
+);
+
 onMounted(() => {
-  fetchListRequest();
+  fetchListRequset();
 });
 </script>
 
@@ -240,6 +302,7 @@ onMounted(() => {
         dense
         label="ค้นหา"
         style="width: 250px"
+        @keydown.enter="updateStatusValue()"
       >
       </q-input>
 
@@ -266,7 +329,7 @@ onMounted(() => {
         :rows-per-page-options="[10, 25, 50, 100]"
         :paging="true"
         :visible-columns="visibleColumns"
-        :filter="keyword"
+        @update:pagination="updatePageSizePagination"
       >
         <template v-slot:header="props">
           <q-tr :props="props">
@@ -282,6 +345,19 @@ onMounted(() => {
               <div v-if="col.name == 'no'">
                 {{ props.rowIndex + 1 }}
               </div>
+              <div v-else-if="col.name === 'document'">
+                <q-btn
+                  icon="mdi-download"
+                  round
+                  dense
+                  flat
+                  color="primary"
+                  size="12px"
+                  @click.pervent="onDownloadFile(props.row.id)"
+                >
+                  <q-tooltip>หลักฐานอ้างอิง</q-tooltip>
+                </q-btn>
+              </div>
               <div v-else class="table_ellipsis2">
                 {{ col.value ? col.value : "-" }}
               </div>
@@ -294,21 +370,35 @@ onMounted(() => {
                 flat
                 color="edit"
                 size="12px"
-                @click.pervent="onclickEdit(props.row)"
+                @click.pervent="onclickEdit(props.row.id)"
               >
                 <q-tooltip>แก้ไขสถานะคำร้อง</q-tooltip>
               </q-btn>
             </q-td>
           </q-tr>
         </template>
+        <template v-slot:pagination="scope">
+          ทั้งหมด {{ rowsTotal }} รายการ
+          <q-pagination
+            v-model="page"
+            active-color="primary"
+            color="dark"
+            :max="Number(maxPage)"
+            :max-pages="5"
+            size="sm"
+            boundary-links
+            direction-links
+            @update:model-value="fetchListRequset()"
+          ></q-pagination>
+        </template>
       </d-table>
     </div>
   </q-card>
 
   <DialogStatus
     v-model:modal="modalStatus"
-    :fetchData="fetchListRequest"
-    :data="dataRequest"
+    :fetchData="fetchListRequset"
+    :requestId="requestId"
   />
 </template>