From d9ff26ac4a4f44ece9e68e8e912e2b4056dcd38b Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Thu, 26 Sep 2024 13:46:04 +0700
Subject: [PATCH] UI =>  IDP

---
 .../requestEdit/01_TabInformation.vue         | 412 +++++++++++++++++
 .../components/requestEdit/02_TabIDP.vue      | 326 +++++++++++++
 ...alogStatus.vue => Dialog01_EditStatus.vue} |   0
 .../requestEdit/Dialog02_EditIDP.vue          | 406 +++++++++++++++++
 .../04_registryPerson/interface/index/Main.ts |   6 +
 .../interface/request/Main.ts                 |  14 +
 .../views/requestEditView.vue                 | 430 ++----------------
 7 files changed, 1198 insertions(+), 396 deletions(-)
 create mode 100644 src/modules/04_registryPerson/components/requestEdit/01_TabInformation.vue
 create mode 100644 src/modules/04_registryPerson/components/requestEdit/02_TabIDP.vue
 rename src/modules/04_registryPerson/components/requestEdit/{DialogStatus.vue => Dialog01_EditStatus.vue} (100%)
 create mode 100644 src/modules/04_registryPerson/components/requestEdit/Dialog02_EditIDP.vue

diff --git a/src/modules/04_registryPerson/components/requestEdit/01_TabInformation.vue b/src/modules/04_registryPerson/components/requestEdit/01_TabInformation.vue
new file mode 100644
index 000000000..2d4833055
--- /dev/null
+++ b/src/modules/04_registryPerson/components/requestEdit/01_TabInformation.vue
@@ -0,0 +1,412 @@
+<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";
+import { useRequestEditStore } from "@/modules/04_registryPerson/stores/RequestEdit";
+import { useCounterMixin } from "@/stores/mixin";
+
+/**
+ * importType
+ */
+import type { QTableProps } from "quasar";
+import type {
+  DataOption,
+  Pagination,
+} from "@/modules/04_registryPerson/interface/index/Main";
+import type { DateRequest } from "@/modules/04_registryPerson/interface/response/Main";
+
+/**
+ * importComponents
+ */
+import DialogStatus from "@/modules/04_registryPerson/components/requestEdit/Dialog01_EditStatus.vue";
+
+/**
+ * use
+ */
+const $q = useQuasar();
+const router = useRouter();
+const store = useRequestEditStore();
+const { showLoader, hideLoader, messageError, date2Thai } = useCounterMixin();
+
+/**
+ * Table
+ */
+const rows = ref<DateRequest[]>([]); //รายการข้อมูลคำร้องขอแก้ไขทะเบียนประวัติ
+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: "createdAt",
+    align: "left",
+    label: "วันที่ยื่นขอ",
+    sortable: true,
+    field: "createdAt",
+    format: (v) => (v ? date2Thai(v, false, true) : "-"),
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "fullname",
+    align: "left",
+    label: "ชื่อ-นามสกุล",
+    sortable: false,
+    field: "fullname",
+    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[]>([
+  "createdAt",
+  "fullname",
+  "topic",
+  "detail",
+  "document",
+  "status",
+  "remark",
+]);
+
+/**
+ * ตัวแปร
+ */
+const status = ref<string>("PENDING"); //ค้นหาตามสถานะ
+const keyword = ref<string>(""); //คำค้นหา
+const statusOption = ref<DataOption[]>(store.optionStatus); //รายการสถานะ
+const modalStatus = ref<boolean>(false); //แก้ไขสถานะคำร้อง
+const requestId = ref<string>(""); //id รายการแก้ไข
+
+/**
+ * function fetch รายการคำร้องขอแก้ไขทะเบียนประวัติ
+ */
+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 เลือกสถานะคำร้อง
+ */
+function updateStatusValue() {
+  page.value = 1;
+  // fetch รายการคำร้องขอแก้ไขทะเบียนประวัติ
+  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
+    );
+  });
+}
+
+/**
+ * funciton  แก่ไขคำร้อง
+ * @param id รายการคำร้อง
+ */
+function onclickEdit(id: string) {
+  modalStatus.value = true;
+  requestId.value = id;
+}
+
+/**
+ * function เลือกแถวต่อหน้า
+ * @param newPagination
+ */
+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(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) => {
+      window.open(res.data.downloadUrl, "_blank");
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+/**
+ * ดูการเปลี่ยนแปลงของ pageSize
+ *
+ * เมื่อมีการเปลี่ยนแปลงจำทำการ ดึงช้อมูลรายการคำร้องขอแก้ไขทะเบียนประวัติตามจำนวน pageSize
+ */
+watch(
+  () => pageSize.value,
+  () => {
+    fetchListRequset();
+  }
+);
+
+onMounted(() => {
+  fetchListRequset();
+});
+</script>
+
+<template>
+  <q-card class="q-pa-md">
+    <div class="row q-mb-sm q-col-gutter-sm">
+      <div class="col-xs-10 col-md-3">
+        <q-select
+          style="max-width: 250px"
+          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>
+      <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 auto-width />
+            <q-th v-for="col in props.cols" :key="col.name" :props="props">
+              <span class="text-weight-medium">{{ col.label }}</span>
+            </q-th>
+          </q-tr>
+        </template>
+        <template v-slot:body="props">
+          <q-tr :props="props">
+            <q-td auto-width>
+              <q-btn
+                icon="edit"
+                round
+                dense
+                flat
+                color="edit"
+                @click.pervent="onclickEdit(props.row.id)"
+              >
+                <q-tooltip>แก้ไขสถานะคำร้อง</q-tooltip>
+              </q-btn>
+            </q-td>
+            <q-td v-for="col in props.cols" :key="col.name" :props="props">
+              <div v-if="col.name === 'document'">
+                <q-btn
+                  icon="mdi-download"
+                  round
+                  dense
+                  flat
+                  color="primary"
+                  @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-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"
+    :fetch-data="fetchListRequset"
+    :request-id="requestId"
+  />
+</template>
+
+<style scoped></style>
diff --git a/src/modules/04_registryPerson/components/requestEdit/02_TabIDP.vue b/src/modules/04_registryPerson/components/requestEdit/02_TabIDP.vue
new file mode 100644
index 000000000..8cffe9722
--- /dev/null
+++ b/src/modules/04_registryPerson/components/requestEdit/02_TabIDP.vue
@@ -0,0 +1,326 @@
+<script setup lang="ts">
+import { ref, onMounted, watch } from "vue";
+
+import { useCounterMixin } from "@/stores/mixin";
+import { useRequestEditStore } from "@/modules/04_registryPerson/stores/RequestEdit";
+
+import type { QTableProps } from "quasar";
+
+import type {
+  DataOption,
+  Pagination,
+} from "@/modules/04_registryPerson/interface/index/Main";
+
+import DialogEditIDP from "@/modules/04_registryPerson/components/requestEdit/Dialog02_EditIDP.vue";
+
+const store = useRequestEditStore();
+const { showLoader, hideLoader, messageError, date2Thai } = useCounterMixin();
+/**
+ * ตัวแปร
+ */
+const status = ref<string>("PENDING"); //ค้นหาตามสถานะ
+const keyword = ref<string>(""); //คำค้นหา
+const statusOption = ref<DataOption[]>(store.optionStatus); //รายการสถานะ
+const modalEdit = ref<boolean>(false); //แก้ไขสถานะคำร้อง
+const requestId = ref<string>(""); //id รายการแก้ไข
+
+/**
+ * Table
+ */
+const rows = 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"]>([
+  {
+    name: "createdAt",
+    align: "left",
+    label: "วันที่ยื่นขอ",
+    sortable: true,
+    field: "createdAt",
+    format: (v) => (v ? date2Thai(v, false, true) : "-"),
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "knowledgeSkills",
+    align: "left",
+    label: "ความรู้ / ทักษะ / สมรรถนะที่ต้องได้รับการพัฒนา",
+    sortable: true,
+    field: "knowledgeSkills",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "developmentProjects",
+    align: "left",
+    label: "วิธีการพัฒนา",
+    sortable: true,
+    field: "developmentProjects",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "developmentTarget",
+    align: "left",
+    label: "เป้าหมายการพัฒนา",
+    sortable: true,
+    field: "developmentTarget",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "developmentResults",
+    align: "left",
+    label: "วิธีการวัดผลการพัฒนา",
+    sortable: true,
+    field: "developmentResults",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "developmentReport",
+    align: "left",
+    label: "รายงานผลการพัฒนา",
+    sortable: true,
+    field: "developmentReport",
+    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[]>([
+  "createdAt",
+  "knowledgeSkills",
+  "developmentProjects",
+  "developmentTarget",
+  "developmentResults",
+  "developmentReport",
+  "document",
+  "status",
+  "remark",
+]);
+
+function fetchData() {
+  const data = [
+    {
+      id: "1",
+      createdAt: "2024-09-17T08:21:21.600Z",
+      status: "PENDING",
+      knowledgeSkills: "ความรู้",
+      developmentProjects: "การพัฒนา",
+      developmentTarget: "เป้าหมาย",
+      developmentResults: "ผล",
+      developmentReport: "รายงาน",
+    },
+  ];
+  rows.value = data;
+}
+
+/**
+ * function เลือกสถานะคำร้อง
+ */
+function updateStatusValue() {
+  page.value = 1;
+  // fetch รายการคำร้องขอแก้ไขทะเบียนประวัติ
+  //   function  fetchData() {
+}
+
+/**
+ * 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 เลือกแถวต่อหน้า
+ * @param newPagination
+ */
+function updatePageSizePagination(newPagination: Pagination) {
+  page.value = 1;
+  pageSize.value = newPagination.rowsPerPage;
+}
+
+/**
+ * funciton  แก่ไขคำร้อง
+ * @param id รายการคำร้อง
+ */
+function onclickEdit(id: string) {
+  modalEdit.value = true;
+  requestId.value = id;
+}
+
+onMounted(() => {
+  fetchData();
+});
+</script>
+
+<template>
+  <q-card class="q-pa-md">
+    <div class="row q-mb-sm q-col-gutter-sm">
+      <div class="col-xs-10 col-md-3">
+        <q-select
+          style="max-width: 250px"
+          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>
+      <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 auto-width />
+            <q-th v-for="col in props.cols" :key="col.name" :props="props">
+              <span class="text-weight-medium">{{ col.label }}</span>
+            </q-th>
+          </q-tr>
+        </template>
+        <template v-slot:body="props">
+          <q-tr :props="props">
+            <q-td auto-width>
+              <q-btn
+                icon="edit"
+                round
+                dense
+                flat
+                color="edit"
+                @click.pervent="onclickEdit(props.row.id)"
+              >
+                <q-tooltip>แก้ไขสถานะคำร้อง</q-tooltip>
+              </q-btn>
+            </q-td>
+            <q-td v-for="col in props.cols" :key="col.name" :props="props">
+              <div v-if="col.name === 'document'">
+                <q-btn icon="mdi-download" round dense flat color="primary">
+                  <q-tooltip>หลักฐานอ้างอิง</q-tooltip>
+                </q-btn>
+              </div>
+              <div v-else class="table_ellipsis2">
+                {{ col.value ? col.value : "-" }}
+              </div>
+            </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="fetchData"
+          ></q-pagination>
+        </template>
+      </d-table>
+    </div>
+  </q-card>
+
+  <DialogEditIDP v-model:modal="modalEdit" v-model:request-id="requestId" />
+</template>
+
+<style scoped></style>
diff --git a/src/modules/04_registryPerson/components/requestEdit/DialogStatus.vue b/src/modules/04_registryPerson/components/requestEdit/Dialog01_EditStatus.vue
similarity index 100%
rename from src/modules/04_registryPerson/components/requestEdit/DialogStatus.vue
rename to src/modules/04_registryPerson/components/requestEdit/Dialog01_EditStatus.vue
diff --git a/src/modules/04_registryPerson/components/requestEdit/Dialog02_EditIDP.vue b/src/modules/04_registryPerson/components/requestEdit/Dialog02_EditIDP.vue
new file mode 100644
index 000000000..e7cee0f22
--- /dev/null
+++ b/src/modules/04_registryPerson/components/requestEdit/Dialog02_EditIDP.vue
@@ -0,0 +1,406 @@
+<script setup lang="ts">
+import { reactive, ref } from "vue";
+import { useQuasar } from "quasar";
+
+import { useCounterMixin } from "@/stores/mixin";
+import { useRequestEditStore } from "@/modules/04_registryPerson/stores/RequestEdit";
+
+import type {
+  DataOption,
+  DataItemsDevelopment,
+} from "@/modules/04_registryPerson/interface/index/Main";
+import type { FormDataIDP } from "@/modules/04_registryPerson/interface/request/Main";
+
+import DialogHeader from "@/components/DialogHeader.vue";
+
+const $q = useQuasar();
+const store = useRequestEditStore();
+const { dialogConfirm, showLoader, hideLoader, messageError, success } =
+  useCounterMixin();
+
+const modal = defineModel<boolean>("modal", { required: true }); //เปิด,ปิด popup แก้ไขสถานะคำร้อง
+const requestId = defineModel<string>("requestId", { required: true }); // id ที่ต้องการแก้ไข
+
+const isReadOnly = ref<boolean>(false);
+
+const formData = reactive<FormDataIDP>({
+  topic: "",
+  development: [],
+  otherAction: "",
+  otherPerson: "",
+  otherTraining: "",
+  developmentTarget: "",
+  developmentResults: "",
+  developmentReport: "",
+  status: "",
+  remark: "",
+});
+
+//70 การลงมือปฏิบัติ (โดยผู้บังคับบัญชามอบหมาย)
+const itemsDevelopmentAction = ref<DataItemsDevelopment[]>([
+  {
+    value: "on_the_job_training",
+    label: "การฝึกปฏิบัติในงาน (On the job training)",
+  },
+  {
+    value: "job_project_assignment",
+    label: "การมอบหมายงาน/โครงการ (Job/Project assignment)",
+  },
+  {
+    value: "job_shadowing",
+    label: "การติดตามเรียนรู้รูปแบบการทำงานของผู้บริหาร (Job shadowing)",
+  },
+  {
+    value: "job_enlargement",
+    label: "การมอบหมายงานเพิ่มขึ้น (Job enlargement)",
+  },
+  {
+    value: "internal_trainer",
+    label: "การเป็นวิทยากรภายในหน่วยงาน (Internal trainer)",
+  },
+  {
+    value: "rotation",
+    label: "การหมุนเวียนงาน (Rotation)",
+  },
+  {
+    value: "activity",
+    label: "การทำกิจกรรม (Activity)",
+  },
+  {
+    value: "site_visit",
+    label: "การศึกษาดูงานนอกสถานที่ (Site visit)",
+  },
+  {
+    value: "benchmarking",
+    label: "การแลกเปลี่ยน เทียบเคียงความรู้ ประสมการณ์ (Benchmarking)",
+  },
+  {
+    value: "problem_solving",
+    label: "การแก้ปัญหา (Problem-solving)",
+  },
+  {
+    value: "team_working",
+    label: "การทำงานเป็นทีม (Team working)",
+  },
+  {
+    value: "other1",
+    label: "อื่น ๆ (ระบุ)",
+  },
+]);
+//20 การเรียนรู้จากผู้อื่น (Coach/Mentor/Consulting)
+const itemsDevelopmentPerson = ref<DataItemsDevelopment[]>([
+  { value: "coaching", label: "การสอนงาน (Coaching)" },
+  { value: "mentoring", label: "การเป็นพี่เลี้ยง (Mentoring)" },
+  { value: "team_meeting", label: "การประชุมทีม (Team meeting)" },
+  { value: "consulting", label: "การให้คำปรึกษา (Consulting)" },
+  { value: "feedback", label: "การให้ข้อคิดเห็น/เสนอแนะ (Feedback)" },
+  { value: "other2", label: "อื่น ๆ (ระบุ)" },
+]);
+//10 การฝึกอบรมอื่นๆ
+const itemsDevelopmentTraining = ref<DataItemsDevelopment[]>([
+  {
+    value: "self_learning",
+    label: "การเรียนรู้ด้วยตนเอง แบบ online/offline (Self – learning)",
+  },
+  { value: "classroom_training", label: "การฝึกอบรม (Classroom training)" },
+  {
+    value: "in_house_training",
+    label: "การฝึกอบรมภายในองค์กร (In – house training)",
+  },
+  {
+    value: "public_training",
+    label: "การฝึกอบรมจากองค์กรภายนอก (Public training)",
+  },
+  {
+    value: "e_training",
+    label: "การฝึกอบรมผ่าน online (e – training / e – learning)",
+  },
+  { value: "meeting", label: "การประชุม (Meeting)" },
+  { value: "seminar", label: "การสัมมนา (Seminar)" },
+  { value: "other3", label: "อื่น ๆ (ระบุ)" },
+]);
+//ข้อมูลรายการสถานะ
+const statusOptionMain = ref<DataOption[]>(
+  store.optionStatus.filter((e: DataOption) => e.id !== "")
+);
+const statusOption = ref<DataOption[]>(statusOptionMain.value); //ตัวเลือกรายการสถานะ
+
+/**
+ * function ค้นหาคำใน select  สถานะคำร้อง
+ * @param val คำค้น
+ * @param update Function
+ */
+function filterOption(val: string, update: Function) {
+  update(() => {
+    formData.status = val ? "" : formData.status;
+    statusOption.value = statusOptionMain.value.filter(
+      (v: DataOption) => v.name.indexOf(val) > -1
+    );
+  });
+}
+
+function onSubmit() {
+  dialogConfirm($q, () => {});
+}
+
+/**
+ * function ปิด popup
+ */
+function closeDialog() {
+  modal.value = false;
+  formData.topic = "";
+  formData.development = [];
+  formData.otherAction = "";
+  formData.otherPerson = "";
+  formData.otherTraining = "";
+  formData.developmentTarget = "";
+  formData.developmentResults = "";
+  formData.developmentReport = "";
+  formData.status = "";
+  formData.remark = "";
+}
+
+/**
+ * class inpui
+ * @param val ค่าสถานะ
+ */
+function classInput(val: boolean) {
+  return {
+    "full-width cursor-pointer ": val,
+    "full-width cursor-pointer inputgreen": !val,
+  };
+}
+</script>
+
+<template>
+  <q-dialog v-model="modal" persistent>
+    <q-card style="min-width: 90%">
+      <q-form greedy @submit.prevent @validation-success="onSubmit">
+        <DialogHeader tittle="ข้อมูลการพัฒนารายบุคคล" :close="closeDialog" />
+        <q-separator />
+
+        <q-card-section style="max-height: 84vh" class="scroll">
+          <div class="row q-col-gutter-sm">
+            <div class="col-md-3 col-xs-12">
+              <div class="row q-col-gutter-sm">
+                <!-- สถานะ -->
+                <div class="col-12">
+                  <q-select
+                    :class="classInput(isReadOnly)"
+                    v-model="formData.status"
+                    label="สถานะ"
+                    dense
+                    outlined
+                    emit-value
+                    map-options
+                    :options="statusOption"
+                    :rules="[(val:string) => !!val || `${'กรุณาเลือกสถานะ'}`]"
+                    lazy-rules
+                    hide-bottom-space
+                    use-input
+                    option-label="name"
+                    option-value="id"
+                    @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-12">
+                  <q-input
+                    :class="classInput(isReadOnly)"
+                    v-model="formData.remark"
+                    label="หมายเหตุ"
+                    dense
+                    outlined
+                    type="textarea"
+                    hide-bottom-space
+                  />
+                </div>
+              </div>
+            </div>
+
+            <div class="col-md-9 col-xs-12">
+              <div class="row q-col-gutter-sm">
+                <div class="col-12">
+                  <q-input
+                    :class="classInput(isReadOnly)"
+                    readonly
+                    outlined
+                    v-model="formData.topic"
+                    label="ชื่อเรื่อง/เนื้อเรื่อง/หัวข้อการพัฒนา"
+                    dense
+                  />
+                </div>
+
+                <div class="col-12">
+                  <q-label class="q-mb-sm text-weight-medium text-body2"
+                    >วิธีการพัฒนา
+                  </q-label>
+                  <div class="row col-12 q-ml-md q-col-gutter-sm">
+                    <!-- 70 การลงมือปฏิบัติ (โดยผู้บังคับบัญชามอบหมาย) -->
+                    <div class="col-4">
+                      <q-label class="q-mb-sm text-weight-medium text-body2"
+                        >70 การลงมือปฏิบัติ (โดยผู้บังคับบัญชามอบหมาย)</q-label
+                      >
+                      <q-option-group
+                        disable
+                        class="check_box q-mt-sm"
+                        keep-color
+                        color="primary"
+                        dense
+                        v-model="formData.development"
+                        :options="itemsDevelopmentAction"
+                        type="checkbox"
+                      />
+
+                      <div
+                        class="row"
+                        v-if="formData.development.includes('other1')"
+                      >
+                        <div class="col-8 q-mt-sm relative-position">
+                          <div class="other_custom_input">
+                            <q-input
+                              readonly
+                              v-model="formData.otherAction"
+                              dense
+                              outlined
+                              class="inputgreen"
+                              label="กรุณาระบุ"
+                            ></q-input>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+
+                    <!-- 20 การเรียนรู้จากผู้อื่น (Coach/Mentor/Consulting) -->
+                    <div class="col-4">
+                      <q-label class="q-mb-sm text-weight-medium text-body2"
+                        >20 การเรียนรู้จากผู้อื่น
+                        (Coach/Mentor/Consulting)</q-label
+                      >
+                      <q-option-group
+                        disable
+                        class="check_box q-mt-sm"
+                        keep-color
+                        color="primary"
+                        dense
+                        v-model="formData.development"
+                        :options="itemsDevelopmentPerson"
+                        type="checkbox"
+                      />
+                      <div
+                        class="row"
+                        v-if="formData.development.includes('other2')"
+                      >
+                        <div class="col-8 q-mt-sm relative-position">
+                          <div class="other_custom_input">
+                            <q-input
+                              readonly
+                              v-model="formData.otherPerson"
+                              dense
+                              outlined
+                              label="กรุณาระบุ"
+                            ></q-input>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+
+                    <!-- 10 การฝึกอบรมอื่นๆ -->
+                    <div class="col-4">
+                      <q-label class="q-mb-sm text-weight-medium text-body2"
+                        >10 การฝึกอบรมอื่นๆ</q-label
+                      >
+                      <q-option-group
+                        disable
+                        class="check_box q-mt-sm"
+                        keep-color
+                        color="primary"
+                        dense
+                        v-model="formData.development"
+                        :options="itemsDevelopmentTraining"
+                        type="checkbox"
+                      />
+                      <div
+                        class="row"
+                        v-if="formData.development.includes('other3')"
+                      >
+                        <div class="offset-4 col-8 q-mt-sm relative-position">
+                          <div class="other_custom_input">
+                            <q-input
+                              readonly
+                              v-model="formData.otherTraining"
+                              dense
+                              outlined
+                              label="กรุณาระบุ"
+                            ></q-input>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+
+                <!-- เป้าหมายการนำไปพัฒนางาน -->
+                <div class="col-12">
+                  <q-input
+                    readonly
+                    outlined
+                    v-model="formData.developmentTarget"
+                    label="เป้าหมายการนำไปพัฒนางาน"
+                    dense
+                    type="textarea"
+                  />
+                </div>
+
+                <!-- วิธีการวัดผลการพัฒนา -->
+                <div class="col-12">
+                  <q-input
+                    readonly
+                    outlined
+                    v-model="formData.developmentResults"
+                    label="วิธีการวัดผลการพัฒนา"
+                    dense
+                    type="textarea"
+                  />
+                </div>
+
+                <!-- รายงานผลการพัฒนา -->
+                <div class="col-12">
+                  <q-input
+                    readonly
+                    outlined
+                    v-model="formData.developmentReport"
+                    label="รายงานผลการพัฒนา"
+                    dense
+                    type="textarea"
+                  />
+                </div>
+              </div>
+            </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>
diff --git a/src/modules/04_registryPerson/interface/index/Main.ts b/src/modules/04_registryPerson/interface/index/Main.ts
index 970c2b1f7..9670b7a9e 100644
--- a/src/modules/04_registryPerson/interface/index/Main.ts
+++ b/src/modules/04_registryPerson/interface/index/Main.ts
@@ -67,6 +67,11 @@ interface ItemTab {
   label: string;
 }
 
+interface DataItemsDevelopment {
+  value: string;
+  label: string;
+}
+
 export type {
   Pagination,
   DataOption,
@@ -80,4 +85,5 @@ export type {
   ItemTab,
   DataOptionEducation,
   DataOptionEducationLevel,
+  DataItemsDevelopment,
 };
diff --git a/src/modules/04_registryPerson/interface/request/Main.ts b/src/modules/04_registryPerson/interface/request/Main.ts
index cbde0472b..178cb0ece 100644
--- a/src/modules/04_registryPerson/interface/request/Main.ts
+++ b/src/modules/04_registryPerson/interface/request/Main.ts
@@ -66,6 +66,19 @@ interface FormChangeName {
   documentId: string | null | undefined;
 }
 
+interface FormDataIDP {
+  topic: string;
+  development: string[];
+  otherAction: string;
+  otherPerson: string;
+  otherTraining: string;
+  developmentTarget: string;
+  developmentResults: string;
+  developmentReport: string;
+  status: string;
+  remark: string;
+}
+
 export type {
   FormFilter,
   FormAddPerson,
@@ -73,4 +86,5 @@ export type {
   DataNodeData,
   QueryParams,
   FormChangeName,
+  FormDataIDP,
 };
diff --git a/src/modules/04_registryPerson/views/requestEditView.vue b/src/modules/04_registryPerson/views/requestEditView.vue
index da8fba7e0..6166c5de2 100644
--- a/src/modules/04_registryPerson/views/requestEditView.vue
+++ b/src/modules/04_registryPerson/views/requestEditView.vue
@@ -1,278 +1,20 @@
 <script setup lang="ts">
-import { ref, onMounted, watch } from "vue";
-import { useQuasar } from "quasar";
+import { ref } from "vue";
 
 import { useRouter } from "vue-router";
-import config from "@/app.config";
-import http from "@/plugins/http";
-import { useRequestEditStore } from "@/modules/04_registryPerson/stores/RequestEdit";
-import { useCounterMixin } from "@/stores/mixin";
 
-/**
- * importType
- */
-import type { QTableProps } from "quasar";
-import type {
-  DataOption,
-  Pagination,
-} from "@/modules/04_registryPerson/interface/index/Main";
-import type { DateRequest } from "@/modules/04_registryPerson/interface/response/Main";
+import type { DataOption } from "@/modules/04_registryPerson/interface/index/Main";
 
-/**
- * importComponents
- */
-import DialogStatus from "@/modules/04_registryPerson/components/requestEdit/DialogStatus.vue";
+import TabInformation from "@/modules/04_registryPerson/components/requestEdit/01_TabInformation.vue";
+import TabIDP from "@/modules/04_registryPerson/components/requestEdit/02_TabIDP.vue";
 
-/**
- * use
- */
-const $q = useQuasar();
 const router = useRouter();
-const store = useRequestEditStore();
-const { showLoader, hideLoader, messageError, date2Thai } = useCounterMixin();
 
-/**
- * Table
- */
-const rows = ref<DateRequest[]>([]); //รายการข้อมูลคำร้องขอแก้ไขทะเบียนประวัติ
-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: "lastUpdatedAt",
-    align: "left",
-    label: "วันที่ยื่นขอ",
-    sortable: true,
-    field: "lastUpdatedAt",
-    format: (v) => (v ? date2Thai(v, false, true) : "-"),
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "fullname",
-    align: "left",
-    label: "ชื่อ-นามสกุล",
-    sortable: false,
-    field: "fullname",
-    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 tabs = ref<string>("Main");
+const tabsManu = ref<DataOption[]>([
+  { name: "ข้อมูลส่วนตัว", id: "Main" },
+  { name: "ข้อมูลการพัฒนารายบุคคล (IDP)", id: "IDP" },
 ]);
-const visibleColumns = ref<string[]>([
-  "lastUpdatedAt",
-  "fullname",
-  "topic",
-  "detail",
-  "document",
-  "status",
-  "remark",
-]);
-
-/**
- * ตัวแปร
- */
-const status = ref<string>("PENDING"); //ค้นหาตามสถานะ
-const keyword = ref<string>(""); //คำค้นหา
-const statusOption = ref<DataOption[]>(store.optionStatus); //รายการสถานะ
-const modalStatus = ref<boolean>(false); //แก้ไขสถานะคำร้อง
-const requestId = ref<string>(""); //id รายการแก้ไข
-
-/**
- * function fetch รายการคำร้องขอแก้ไขทะเบียนประวัติ
- */
-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 เลือกสถานะคำร้อง
- */
-function updateStatusValue() {
-  page.value = 1;
-  // fetch รายการคำร้องขอแก้ไขทะเบียนประวัติ
-  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
-    );
-  });
-}
-
-/**
- * funciton  แก่ไขคำร้อง
- * @param id รายการคำร้อง
- */
-function onclickEdit(id: string) {
-  modalStatus.value = true;
-  requestId.value = id;
-}
-
-/**
- * function เลือกแถวต่อหน้า
- * @param newPagination
- */
-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(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  ชื่อไฟล์
- */
-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();
-    });
-}
-
-/**
- * ดูการเปลี่ยนแปลงของ pageSize
- *
- * เมื่อมีการเปลี่ยนแปลงจำทำการ ดึงช้อมูลรายการคำร้องขอแก้ไขทะเบียนประวัติตามจำนวน pageSize
- */
-watch(
-  () => pageSize.value,
-  () => {
-    fetchListRequset();
-  }
-);
-
-onMounted(() => {
-  fetchListRequset();
-});
 </script>
 
 <template>
@@ -291,139 +33,35 @@ onMounted(() => {
       รายการคำร้องขอแก้ไขทะเบียนประวัติ
     </div>
   </div>
-  <q-card flat bordered class="q-pa-md">
-    <div class="row q-mb-sm q-col-gutter-sm">
-      <div class="col-xs-10 col-md-3">
-        <q-select
-          style="max-width: 250px"
-          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>
-      <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"
+  <q-card class="q-mt-sm">
+    <q-card-section style="padding: 0px">
+      <q-separator />
+      <q-tabs
+        v-model="tabs"
+        inline-label
+        align="left"
+        indicator-color="primary"
+        active-color="primary bg-teal-1"
       >
-        <template v-slot:header="props">
-          <q-tr :props="props">
-            <q-th auto-width />
-            <q-th v-for="col in props.cols" :key="col.name" :props="props">
-              <span class="text-weight-medium">{{ col.label }}</span>
-            </q-th>
-          </q-tr>
-        </template>
-        <template v-slot:body="props">
-          <q-tr :props="props">
-            <q-td auto-width>
-              <q-btn
-                icon="edit"
-                round
-                dense
-                flat
-                color="edit"
-                @click.pervent="onclickEdit(props.row.id)"
-              >
-                <q-tooltip>แก้ไขสถานะคำร้อง</q-tooltip>
-              </q-btn>
-            </q-td>
-            <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"
-                  @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-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-tab
+          v-for="(tab, index) in tabsManu"
+          :key="index"
+          :name="tab.id"
+          :label="tab.name"
+        />
+      </q-tabs>
+      <q-separator />
+
+      <q-tab-panels v-model="tabs" animated>
+        <q-tab-panel style="padding: 0px" name="Main">
+          <TabInformation />
+        </q-tab-panel>
+
+        <q-tab-panel style="padding: 0px" name="IDP"> <TabIDP /> </q-tab-panel>
+      </q-tab-panels>
+    </q-card-section>
   </q-card>
-
-  <DialogStatus
-    v-model:modal="modalStatus"
-    :fetch-data="fetchListRequset"
-    :request-id="requestId"
-  />
 </template>
 
 <style scoped></style>