Merge branch 'develop' into devTee

src/modules/03_retire/views/addRetire.vue

@@ -128,6 +128,7 @@ const cancelResing = () => {
   modal.value = true;
 };
 
+const checkCancleLeave = ref<boolean>(false);
 /**
  * ฟังก์ชั่นเรียกข้อมูลจาก Api
  * @param id ไอดีของข้อมูล
@@ -141,6 +142,12 @@ const fectDataresign = async (id: string) => {
       tranferOrg.value = data.location;
       dateCommand.value = data.sendDate;
       dateLeave.value = data.activeDate;
+
+      const currentDate = new Date();
+      let dueDateMinusOne = new Date(data.activeDate);
+      dueDateMinusOne.setDate(dueDateMinusOne.getDate() - 1);
+      checkCancleLeave.value = currentDate < dueDateMinusOne;
+
       noteReason.value = data.reason;
       files.value = data.docs;
       dataDetail.value = data;
@@ -561,6 +568,7 @@ function downloadFile(data: string) {
               </div>
             </div>
           </div>
+
           <q-separator v-if="routeName !== 'AddRetire'" />
           <q-card-actions
             align="right"
@@ -570,8 +578,10 @@ function downloadFile(data: string) {
             <q-btn
               v-if="
                 dataDetail.status !== 'DELETE' &&
-                dataDetail.status !== 'DONE' &&
-                dataDetail.status !== 'CANCEL'
+                dataDetail.status !== 'CANCEL' &&
+                dataDetail.status !== 'DONECANCEL' &&
+                dataDetail.status !== 'DONEREJECT' &&
+                checkCancleLeave
               "
               unelevated
               class="q-px-md items-center"

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

@@ -0,0 +1,253 @@
+<script setup lang="ts">
+import { reactive, ref, watch } from "vue";
+import { useQuasar } from "quasar";
+import config from "@/app.config";
+import http from "@/plugins/http";
+import axios from "axios";
+import keycloak from "@/plugins/keycloak";
+
+import DialogHeader from "@/components/DialogHeader.vue";
+
+import { useRequestEditStore } from "@/modules/10_registry/store/RequestEdit";
+import { useCounterMixin } from "@/stores/mixin";
+
+/**
+ * use
+ */
+const $q = useQuasar();
+const store = useRequestEditStore();
+const { dialogConfirm, showLoader, hideLoader, messageError, success } =
+  useCounterMixin();
+
+/**
+ *  props
+ */
+const modal = defineModel<boolean>("modal", { required: true });
+const props = defineProps({
+  fetchData: { type: Function, requied: true },
+});
+
+const isReadOnly = ref<boolean>(false);
+const profileId = ref<string>("");
+const formData = reactive({
+  topic: "",
+  detail: "",
+  document: null,
+});
+const topicOption = ref<string[]>(store.optionTopic);
+
+function closeDialog() {
+  modal.value = false;
+  formData.topic = "";
+  formData.detail = "";
+  formData.document = null;
+}
+
+/**
+ * function ยืนยันการยื่นคำร้องขอแก้ไขข้อมูล
+ */
+function onSubmit() {
+  dialogConfirm(
+    $q,
+    () => {
+      showLoader();
+      http
+        .post(config.API.requestEdit, {
+          topic: formData.topic,
+          detail: formData.detail,
+          profileId: profileId.value,
+        })
+        .then((res) => {
+          createURLUpload(res.data.result, formData.document);
+        })
+        .catch((err) => {
+          messageError($q, err);
+          hideLoader();
+        });
+    },
+    "ยืนยันการยื่นคำร้อง",
+    "ต้องการยืนยันการยื่นคำร้องนี้ใช่หรือไม่?"
+  );
+}
+
+/**
+ * function สร้าง URL อัปโหลไฟล์เอกสารหลักฐาน
+ */
+function createURLUpload(id: string, file: any) {
+  const fileName = { fileName: file.name };
+  http
+    .post(
+      config.API.file(
+        "ระบบทะเบียนประวัติ",
+        "เอกสารหลักฐานคำร้องขอแก้ไขข้อมูล",
+        id
+      ),
+      {
+        replace: false,
+        fileList: fileName,
+      }
+    )
+    .then(async (res) => {
+      const foundKey: string | undefined = Object.keys(res.data).find(
+        (key) =>
+          res.data[key]?.fileName !== undefined &&
+          res.data[key]?.fileName !== ""
+      );
+      foundKey &&
+        uploadFileDoc(res.data[foundKey]?.uploadUrl, formData.document);
+    })
+    .catch((err) => {
+      messageError($q, err);
+    });
+}
+
+/**
+ * function สำหรับอัพโหลดไฟล์เอกสารหลักฐาน
+ */
+function uploadFileDoc(uploadUrl: string, file: any) {
+  showLoader();
+  axios
+    .put(uploadUrl, file, {
+      headers: {
+        "Content-Type": file.type,
+      },
+    })
+    .then(async (res) => {
+      await props.fetchData?.();
+      await success($q, "บันทึกข้อมูลสำเร็จ");
+      closeDialog();
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+/**
+ * class input
+ * @param val
+ */
+function classInput(val: boolean) {
+  return {
+    "full-width cursor-pointer ": val,
+    "full-width cursor-pointer inputgreen": !val,
+  };
+}
+
+/**
+ * function ค้นหาข้อมูลใน select
+ * @param val คำค้นหา
+ * @param update Function
+ */
+function filterOption(val: string, update: Function) {
+  update(() => {
+    topicOption.value = store.optionTopic.filter(
+      (v: any) => v.indexOf(val) > -1
+    );
+  });
+}
+
+/**
+ * function fetch profileId
+ */
+function fetchProfile() {
+  showLoader();
+  http
+    .get(config.API.profilePosition())
+    .then((res) => {
+      const data = res.data.result;
+      profileId.value = data.profileId;
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+watch(
+  () => modal.value,
+  () => {
+    modal.value && fetchProfile();
+  }
+);
+</script>
+
+<template>
+  <q-dialog v-model="modal" persistent>
+    <q-card style="width: 700px; max-width: 80vw">
+      <q-form greedy @submit.prevent @validation-success="onSubmit">
+        <DialogHeader tittle="ยื่นคำร้องขอแก้ไขข้อมูล" :close="closeDialog" />
+        <q-separator />
+
+        <q-card-section>
+          <div class="row q-col-gutter-sm">
+            <div class="col-xs-12 col-md-12">
+              <q-select
+                :class="classInput(isReadOnly)"
+                v-model="formData.topic"
+                label="ชื่อเรื่อง"
+                dense
+                outlined
+                emit-value
+                map-options
+                :options="topicOption"
+                :rules="[(val:string) => !!val || `${'กรุณาเลือกชื่อเรื่อง'}`]"
+                lazy-rules
+                hide-bottom-space
+                use-input
+                @filter="(inputValue:string,
+                doneFn:Function) => filterOption(inputValue, doneFn
+                ) "
+              >
+                <template v-slot:no-option>
+                  <q-item>
+                    <q-item-section class="text-grey">
+                      ไม่มีข้อมูล
+                    </q-item-section>
+                  </q-item>
+                </template>
+              </q-select>
+            </div>
+
+            <div class="col-xs-12 col-md-12">
+              <q-input
+                :class="classInput(isReadOnly)"
+                v-model="formData.detail"
+                label="รายละเอียด"
+                dense
+                outlined
+                type="textarea"
+                hide-bottom-space
+              />
+            </div>
+
+            <div class="col-xs-12 col-md-12">
+              <q-file
+                :class="classInput(isReadOnly)"
+                v-model="formData.document"
+                label="อัปโหลดเอกสารหลักฐาน"
+                flat
+                dense
+                outlined
+                hide-bottom-space
+                :rules="[(val:any) => !!val || `${'กรุณาเลือกไฟล์'}`]"
+              />
+            </div>
+          </div>
+        </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>
+      </q-form>
+    </q-card>
+  </q-dialog>
+</template>
+
+<style scoped></style>

src/modules/10_registry/interface/index/Main.ts

@@ -0,0 +1,13 @@
+interface DataOption {
+  id: string;
+  name: string;
+}
+
+interface NewPagination {
+  descending: boolean;
+  page: number;
+  rowsPerPage: number;
+  sortBy: string;
+}
+
+export type { DataOption,NewPagination };

src/modules/10_registry/interface/response/Main.ts

@@ -0,0 +1,14 @@
+interface DataRequest {
+  createdAt: string;
+  createdFullName: string;
+  detail: string;
+  fullname: string;
+  id: string;
+  lastUpdateFullName: string;
+  lastUpdatedAt: string;
+  remark: string;
+  status: string;
+  topic: string;
+}
+
+export type { DataRequest };

src/modules/10_registry/router.ts

@@ -1,12 +1,20 @@
 // registry
 const registryPage = () => import("@/modules/10_registry/views/main.vue");
 
-const registryInformation = () => import("@/modules/10_registry/tabs/01_information.vue");
-const registryGovernment = () => import("@/modules/10_registry/tabs/02_government.vue");
+const registryInformation = () =>
+  import("@/modules/10_registry/tabs/01_information.vue");
+const registryGovernment = () =>
+  import("@/modules/10_registry/tabs/02_government.vue");
 const registrySalary = () => import("@/modules/10_registry/tabs/03_salary.vue");
-const registryAchievement = () => import("@/modules/10_registry/tabs/04_Achievement.vue");
+const registryAchievement = () =>
+  import("@/modules/10_registry/tabs/04_Achievement.vue");
 const registryOther = () => import("@/modules/10_registry/tabs/05_other.vue");
 
+/**
+ * คำร้องแก้ไข
+ */
+const requestEditMain = () => import("@/modules/10_registry/views/requestEditMain.vue");
+
 export default [
   {
     path: "/registry",
@@ -63,4 +71,14 @@ export default [
       Key: [10],
     },
   },
+
+  {
+    path: "/registry/request-edit",
+    name: "request-edit",
+    component: requestEditMain,
+    meta: {
+      Auth: true,
+      Key: [10],
+    },
+  },
 ];

src/modules/10_registry/store/RequestEdit.ts

@@ -0,0 +1,36 @@
+import { defineStore } from "pinia";
+import { ref } from "vue";
+import type { DataOption } from "@/modules/10_registry/interface/index/Main";
+
+export const useRequestEditStore = defineStore("requestEditStore", () => {
+  const optionTopic = ref<string[]>([
+    "ขอแก้ไขคำนำหน้านาม ชื่อ นามสกุล",
+    "ขอแก้ไขรูปภาพประจำตัว",
+    "ขอแก้ไขชื่อ - นามสกุล คู่สมรส",
+    "ขอแก้ไขชื่อ - นามสกุล บิดา",
+    "ขอแก้ไขชื่อ - นามสกุล มารดา",
+    "ขอแก้ไขข้อมูลการได้รับพระราชทานเครื่องราชอิสริยาภรณ์/เหรียญจักรพรรดิมาลา",
+    "ขอแก้ไขประกาศเกียรติคุณ",
+    "ขอแก้ไขข้อมูลประวัติการศึกษา",
+  ]);
+  const optionStatus = ref<DataOption[]>([
+    { id: "", name: "ทั้งหมด" },
+    { id: "PENDING", name: "รอดำเนินการ" },
+    { id: "COMPLETE", name: "ดำเนินการแก้ไขแล้ว" },
+    { id: "REJECT", name: "ไม่อนุมัตการแก้ไข" },
+  ]);
+
+  function convertStatus(val: string) {
+    switch (val) {
+      case "PENDING":
+        return "รอดำเนินการ";
+      case "COMPLETE":
+        return "ดำเนินการแก้ไขแล้ว";
+      case "REJECT":
+        return "ไม่อนุมัตการแก้ไข";
+      default:
+        return "-";
+    }
+  }
+  return { convertStatus, optionTopic, optionStatus };
+});

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

@@ -128,21 +128,6 @@ function onClickDownloadKp7(type: string) {
     });
 }
 
-/**
- * logout keycloak
- * confirm ก่อนออกจากระบบ
- */
-const doLogout = () => {
-  dialogConfirm(
-    $q,
-    () => {
-      keycloak.logout();
-    },
-    "ยืนยันการออกจากระบบ",
-    "ต้องการออกจากระบบใช่หรือไม่"
-  );
-};
-
 /**
  * ฟังชั่นกลับหน้าหลัก
  */
@@ -150,6 +135,13 @@ const clickBack = () => {
   router.push(`/`);
 };
 
+/**
+ * function redirect ไปหน้ารายการคำร้องขอแก้ไขข้อมูล
+ */
+function redirectToPagePetition() {
+  router.push(`/registry/request-edit`);
+}
+
 onMounted(async () => {
   store.typeProfile = "OFFICER";
   await getType();
@@ -171,7 +163,14 @@ onMounted(async () => {
           class="q-mr-sm"
           @click="clickBack"
         />
-        ข้อมูลทะเบียนประวัติ
+        ข้อมูลทะเบียนประวัติ <q-space />
+        <q-btn
+          color="primary"
+          label="ยื่นคำร้องขอแก้ไขข้อมูล"
+          @click="redirectToPagePetition"
+        >
+          <q-tooltip>ยื่นคำร้องขอแก้ไขข้อมูล</q-tooltip>
+        </q-btn>
       </div>
       <div v-if="$q.screen.gt.xs" class="row q-col-gutter-md">
         <div class="col-3">
@@ -340,16 +339,6 @@ onMounted(async () => {
               >
                 <q-tooltip>ดาวน์โหลด ก.พ.7/ก.ก. 1</q-tooltip>
               </q-btn>
-              <q-btn
-                color="red-1"
-                text-color="red-12"
-                unelevated
-                dense
-                round
-                size="14px"
-                icon="mdi-logout"
-                @click="doLogout"
-              ></q-btn>
             </div>
           </q-card-section>
 

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

@@ -0,0 +1,446 @@
+<script setup lang="ts">
+import { ref, onMounted, watch } from "vue";
+import { useQuasar } from "quasar";
+import { useRouter } from "vue-router";
+import config from "@/app.config";
+import http from "@/plugins/http";
+
+/**
+ * importType
+ */
+import type { QTableProps } from "quasar";
+import type {
+  DataOption,
+  NewPagination,
+} from "@/modules/10_registry/interface/index/Main";
+import type { DataRequest } from "@/modules/10_registry/interface/response/Main";
+
+/**
+ * importComponents
+ */
+import DialogAddRequestEdit from "@/modules/10_registry/components/DialogAddRequestEdit.vue";
+
+/**
+ * importStore
+ */
+import { useRequestEditStore } from "@/modules/10_registry/store/RequestEdit";
+import { useCounterMixin } from "@/stores/mixin";
+
+/**
+ * use
+ */
+const $q = useQuasar();
+const store = useRequestEditStore();
+const router = useRouter();
+const { showLoader, hideLoader, messageError, dialogRemove, success } =
+  useCounterMixin();
+
+/**
+ * ตัวแปร
+ */
+const modalPetiton = ref<boolean>(false);
+const status = ref<string>("");
+const keyword = ref<string>("");
+const statusOption = ref<DataOption[]>(store.optionStatus);
+
+/**
+ * Table
+ */
+const rows = ref<DataRequest[]>([]);
+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"]>([
+  {
+    name: "no",
+    align: "left",
+    label: "ลำดับ",
+    sortable: false,
+    field: (row) => rows.value.indexOf(row) + 1,
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "topic",
+    align: "left",
+    label: "ชื่อเรื่อง",
+    sortable: true,
+    field: "topic",
+    format: (v) => (v ? v : "-"),
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "detail",
+    align: "left",
+    label: "รายละเอียด",
+    sortable: true,
+    field: "detail",
+    format: (v) => (v ? v : "-"),
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "document",
+    align: "left",
+    label: "หลักฐานอ้างอิง",
+    sortable: true,
+    field: "document",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "status",
+    align: "left",
+    label: "สถานะคำร้อง",
+    sortable: true,
+    field: "status",
+    format: (v) => store.convertStatus(v),
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "remark",
+    align: "left",
+    label: "หมายเหตุ ",
+    sortable: true,
+    field: "remark",
+    format: (v) => (v ? v : "-"),
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+]);
+const visibleColumns = ref<string[]>([
+  "no",
+  "topic",
+  "detail",
+  "document",
+  "status",
+  "remark",
+]);
+
+/**
+ * function กลับไปหน้าทะเบียนประวัติ
+ */
+function onclickBackPage() {
+  router.push(`/registry`);
+}
+
+/**
+ * function กดเพิ่มรายการยื่นคำร้องขอแก้ไขข้อมูล
+ */
+function onClickAdd() {
+  modalPetiton.value = true;
+}
+
+/**
+ * function fetch รายการข้อมูลการยื่นคำร้องขอแก้ไขข้อมูล
+ */
+function fetchListRequset() {
+  let queryParams = {
+    page: page.value,
+    pageSize: pageSize.value,
+    status: status.value,
+    keyword: keyword.value,
+  };
+  showLoader();
+  http
+    .get(config.API.requestEdit + `user`, { params: queryParams })
+    .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 เลือกสถานะคำร้อง
+ */
+function updateStatusValue() {
+  page.value = 1;
+  fetchListRequset();
+}
+
+/**
+ * function เคลียร์ข้อมูลสถานะคำร้อง
+ */
+function clearStatus() {
+  status.value = "";
+  statusOption.value = store.optionStatus;
+}
+
+/**
+ * function ค้นหาข้อมูลใน select
+ * @param val คำค้นหา
+ * @param update Function
+ */
+function filterOption(val: string, update: Function) {
+  update(() => {
+    status.value = val ? "" : status.value;
+    statusOption.value = store.optionStatus.filter(
+      (v: DataOption) => v.name.indexOf(val) > -1
+    );
+  });
+}
+
+function updatePageSizePagination(newPagination: NewPagination) {
+  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();
+    });
+}
+
+// function onDeleteLidt(id: string) {
+//   dialogRemove($q, () => {
+//     showLoader();
+//     http
+//       .delete(config.API.requestEdit + `${id}`)
+//       .then(async (res) => {
+//         await fetchListRequset();
+//         await success($q, "ลบข้อมูลสำเร็จ");
+//       })
+//       .catch((err) => {
+//         messageError($q, err);
+//         hideLoader();
+//       });
+//   });
+// }
+
+watch(
+  () => pageSize.value,
+  () => {
+    fetchListRequset();
+  }
+);
+
+onMounted(() => {
+  fetchListRequset();
+});
+</script>
+
+<template>
+  <div class="row justify-center">
+    <div class="col-xs-12 col-sm-12 col-md-11">
+      <div class="toptitle text-white col-12 row items-center">
+        <q-btn
+          icon="mdi-arrow-left"
+          unelevated
+          round
+          dense
+          flat
+          color="primary"
+          class="q-mr-sm"
+          @click="onclickBackPage"
+        />
+        รายการยื่นคำร้องขอแก้ไขข้อมูล
+      </div>
+      <q-card bordered class="q-pa-md">
+        <div class="row q-mb-sm q-col-gutter-sm">
+          <div class="col-xs-10 col-md-2">
+            <q-select
+              v-model="status"
+              label="สถานะคำร้อง"
+              dense
+              outlined
+              emit-value
+              map-options
+              option-label="name"
+              option-value="id"
+              :options="statusOption"
+              @update:model-value="updateStatusValue"
+              :clearable="status !== ''"
+              @clear="clearStatus"
+              use-input
+              @filter="(inputValue:string,
+              doneFn:Function) => filterOption(inputValue, doneFn
+              ) "
+            >
+              <template v-slot:no-option>
+                <q-item>
+                  <q-item-section class="text-grey">
+                    ไม่มีข้อมูล
+                  </q-item-section>
+                </q-item>
+              </template>
+            </q-select>
+          </div>
+          <div>
+            <q-btn
+              flat
+              round
+              color="primary"
+              icon="mdi-plus"
+              @click="onClickAdd()"
+            >
+              <q-tooltip>ยื่นคำร้องขอแก้ไขข้อมูล</q-tooltip>
+            </q-btn>
+          </div>
+          <q-space />
+          <q-input
+            v-model="keyword"
+            outlined
+            clearable
+            dense
+            label="ค้นหา"
+            style="width: 250px"
+            @keydown.enter="updateStatusValue()"
+          >
+          </q-input>
+
+          <q-select
+            v-model="visibleColumns"
+            multiple
+            outlined
+            dense
+            options-dense
+            :display-value="$q.lang.table.columns"
+            emit-value
+            map-options
+            :options="columns"
+            option-value="name"
+            options-cover
+            class="col-xs-12 col-sm-3 col-md-2"
+          />
+        </div>
+        <div class="col-12">
+          <d-table
+            :columns="columns"
+            :rows="rows"
+            row-key="id"
+            :rows-per-page-options="[10, 25, 50, 100]"
+            :paging="true"
+            :visible-columns="visibleColumns"
+            @update:pagination="updatePageSizePagination"
+          >
+            <template v-slot:header="props">
+              <q-tr :props="props">
+                <q-th v-for="col in props.cols" :key="col.name" :props="props">
+                  <span class="text-weight-medium">{{ col.label }}</span>
+                </q-th>
+                <!-- <q-th auto-width /> -->
+              </q-tr>
+            </template>
+            <template v-slot:body="props">
+              <q-tr :props="props" class="cursor-pointer">
+                <q-td v-for="col in props.cols" :key="col.name" :props="props">
+                  <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>
+                </q-td>
+                <!-- <q-td>
+                  <q-btn
+                    v-if="props.row.status === 'PENDING'"
+                    flat
+                    round
+                    color="red"
+                    icon="mdi-delete"
+                    size="12px"
+                    @click="onDeleteLidt(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>
+    </div>
+  </div>
+
+  <DialogAddRequestEdit
+    v-model:modal="modalPetiton"
+    :fetchData="fetchListRequset"
+  />
+</template>
+
+<style scoped></style>