From 85047393edd16f3dde5458c2cf6f9404be03402a Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Tue, 29 Oct 2024 15:20:11 +0700
Subject: [PATCH] =?UTF-8?q?=E0=B9=80=E0=B8=9E=E0=B8=B4=E0=B9=88=E0=B8=A1?=
 =?UTF-8?q?=20workflow=20REGISTRY=5FIDP?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/requestEdit/Page01_Detail.vue  | 407 +++++++-------
 .../requestEdit/Page02_DetailIDP.vue          | 503 ++++++++++++++++++
 .../requestEdit/requestEditPage.vue           | 498 -----------------
 src/modules/04_registryPerson/router.ts       |   2 +-
 4 files changed, 710 insertions(+), 700 deletions(-)
 create mode 100644 src/modules/04_registryPerson/components/requestEdit/Page02_DetailIDP.vue
 delete mode 100644 src/modules/04_registryPerson/components/requestEdit/requestEditPage.vue

diff --git a/src/modules/04_registryPerson/components/requestEdit/Page01_Detail.vue b/src/modules/04_registryPerson/components/requestEdit/Page01_Detail.vue
index 54a70a4c2..3f97fda1c 100644
--- a/src/modules/04_registryPerson/components/requestEdit/Page01_Detail.vue
+++ b/src/modules/04_registryPerson/components/requestEdit/Page01_Detail.vue
@@ -233,7 +233,7 @@ onMounted(async () => {
 </script>
 
 <template>
-  <div class="row items-center">
+  <div class="q-gutter-sm q-pa-sm">
     <div class="toptitle text-dark row items-center q-py-xs">
       <q-btn
         icon="mdi-arrow-left"
@@ -259,221 +259,226 @@ onMounted(async () => {
     >
       <q-tooltip>{{ topicConvert(dataRequest.topic) }}</q-tooltip>
     </q-btn>
-  </div>
-  <q-card>
-    <q-card-section>
-      <div class="row q-col-gutter-sm">
-        <!-- รายละเอียดคำร้องขอแก้ไข -->
-        <div class="col-12">
-          <q-card bordered class="row col-12">
-            <div class="bg-grey-1 q-pa-sm col-12 row items-center">
-              <div class="q-pl-sm text-weight-bold text-dark">
-                รายละเอียดคำร้องขอแก้ไข
+
+    <q-card>
+      <q-card-section>
+        <div class="row q-col-gutter-sm">
+          <!-- รายละเอียดคำร้องขอแก้ไข -->
+          <div class="col-12">
+            <q-card bordered class="row col-12">
+              <div class="bg-grey-1 q-pa-sm col-12 row items-center">
+                <div class="q-pl-sm text-weight-bold text-dark">
+                  รายละเอียดคำร้องขอแก้ไข
+                </div>
               </div>
-            </div>
-            <div class="col-12"><q-separator /></div>
-            <q-card-section class="col-12">
-              <div class="row q-col-gutter-sm">
-                <!-- วันที่ยื่นขอ -->
-                <div class="col-md-2 col-xs-12">
-                  <datepicker
-                    menu-class-name="modalfix"
-                    v-model="dataRequest.createdAt"
-                    :locale="'th'"
-                    autoApply
-                    readonly
-                    borderless
-                    :enableTimePicker="false"
-                    week-start="0"
-                  >
-                    <template #year="{ year }">
-                      {{ year + 543 }}
-                    </template>
-                    <template #year-overlay-value="{ value }">
-                      {{ parseInt(value + 543) }}
-                    </template>
-                    <template #trigger>
-                      <q-input
-                        outlined
-                        readonly
-                        dense
-                        hide-bottom-space
-                        class="full-width"
-                        :model-value="
-                          dataRequest.createdAt != null
-                            ? date2Thai(dataRequest.createdAt as Date)
-                            : null
-                        "
-                        :label="`${'วันที่ยื่นขอ'}`"
-                      >
-                        <template v-slot:prepend>
-                          <q-icon
-                            name="event"
-                            class="cursor-pointer"
-                            style="color: var(--q-primary)"
-                          >
-                          </q-icon>
-                        </template>
-                      </q-input>
-                    </template>
-                  </datepicker>
-                </div>
-
-                <!-- เรื่อง -->
-                <div class="col-md-10 col-xs-12">
-                  <q-input
-                    :class="classInput(true)"
-                    readonly
-                    v-model="dataRequest.topic"
-                    label="เรื่องที่ต้องการแก้ไข"
-                    dense
-                    outlined
-                  />
-                </div>
-
-                <!-- รายละเอียด -->
-                <div class="col-12">
-                  <q-input
-                    :class="classInput(true)"
-                    readonly
-                    v-model="dataRequest.detail"
-                    label="รายละเอียด"
-                    dense
-                    outlined
-                    type="textarea"
-                  />
-                </div>
-
-                <div v-if="checkFile != null && checkFile != false">
-                  <div class="text-weight-bold text-dark col-12">
-                    {{
-                      checkFile == "img" ? "รูปภาพประจำตัว" : "เอกสารหลักฐาน"
-                    }}
-                  </div>
-                  <div class="col-12">
-                    <!-- เอกสารหลักฐาน -->
-                    <q-btn
-                      v-if="checkFile == 'doc'"
-                      icon="mdi-download"
-                      dense
-                      flat
-                      label="ดาวน์โหลดเอกสารหลักฐาน"
-                      color="blue"
-                      :href="urlDownload"
-                      target="_blank"
-                    />
-                    <div
-                      v-else-if="checkFile == 'img'"
-                      class="q-pa-md q-gutter-sm"
+              <div class="col-12"><q-separator /></div>
+              <q-card-section class="col-12">
+                <div class="row q-col-gutter-sm">
+                  <!-- วันที่ยื่นขอ -->
+                  <div class="col-md-2 col-xs-12">
+                    <datepicker
+                      menu-class-name="modalfix"
+                      v-model="dataRequest.createdAt"
+                      :locale="'th'"
+                      autoApply
+                      readonly
+                      borderless
+                      :enableTimePicker="false"
+                      week-start="0"
                     >
-                      <q-avatar size="120px" color="grey-4">
-                        <img
-                          :src="urlDownload"
-                          class="bg-grey-3"
-                          style="object-fit: cover"
-                        />
-                      </q-avatar>
+                      <template #year="{ year }">
+                        {{ year + 543 }}
+                      </template>
+                      <template #year-overlay-value="{ value }">
+                        {{ parseInt(value + 543) }}
+                      </template>
+                      <template #trigger>
+                        <q-input
+                          outlined
+                          readonly
+                          dense
+                          hide-bottom-space
+                          class="full-width"
+                          :model-value="
+                            dataRequest.createdAt != null
+                              ? date2Thai(dataRequest.createdAt as Date)
+                              : null
+                          "
+                          :label="`${'วันที่ยื่นขอ'}`"
+                        >
+                          <template v-slot:prepend>
+                            <q-icon
+                              name="event"
+                              class="cursor-pointer"
+                              style="color: var(--q-primary)"
+                            >
+                            </q-icon>
+                          </template>
+                        </q-input>
+                      </template>
+                    </datepicker>
+                  </div>
+
+                  <!-- เรื่อง -->
+                  <div class="col-md-10 col-xs-12">
+                    <q-input
+                      :class="classInput(true)"
+                      readonly
+                      v-model="dataRequest.topic"
+                      label="เรื่องที่ต้องการแก้ไข"
+                      dense
+                      outlined
+                    />
+                  </div>
+
+                  <!-- รายละเอียด -->
+                  <div class="col-12">
+                    <q-input
+                      :class="classInput(true)"
+                      readonly
+                      v-model="dataRequest.detail"
+                      label="รายละเอียด"
+                      dense
+                      outlined
+                      type="textarea"
+                    />
+                  </div>
+
+                  <div v-if="checkFile != null && checkFile != false">
+                    <div class="text-weight-bold text-dark col-12">
+                      {{
+                        checkFile == "img" ? "รูปภาพประจำตัว" : "เอกสารหลักฐาน"
+                      }}
+                    </div>
+                    <div class="col-12">
+                      <!-- เอกสารหลักฐาน -->
+                      <q-btn
+                        v-if="checkFile == 'doc'"
+                        icon="mdi-download"
+                        dense
+                        flat
+                        label="ดาวน์โหลดเอกสารหลักฐาน"
+                        color="blue"
+                        :href="urlDownload"
+                        target="_blank"
+                      />
+                      <div
+                        v-else-if="checkFile == 'img'"
+                        class="q-pa-md q-gutter-sm"
+                      >
+                        <q-avatar size="120px" color="grey-4">
+                          <img
+                            :src="urlDownload"
+                            class="bg-grey-3"
+                            style="object-fit: cover"
+                          />
+                        </q-avatar>
+                      </div>
                     </div>
                   </div>
                 </div>
-              </div>
-            </q-card-section>
-          </q-card>
-        </div>
+              </q-card-section>
+            </q-card>
+          </div>
 
-        <!-- แก้ไขสถานะคำร้อง -->
-        <q-form
-          class="col-12"
-          greedy
-          @submit.prevent
-          @validation-success="onSubmit"
-        >
-          <q-card bordered class="row col-12">
-            <div class="bg-grey-1 q-pa-sm col-12 row items-center">
-              <div class="q-pl-sm text-weight-bold text-dark">
-                แก้ไขสถานะคำร้อง
+          <!-- แก้ไขสถานะคำร้อง -->
+          <q-form
+            class="col-12"
+            greedy
+            @submit.prevent
+            @validation-success="onSubmit"
+          >
+            <q-card bordered class="row col-12">
+              <div class="bg-grey-1 q-pa-sm col-12 row items-center">
+                <div class="q-pl-sm text-weight-bold text-dark">
+                  แก้ไขสถานะคำร้อง
+                </div>
               </div>
-            </div>
-            <div class="col-12"><q-separator /></div>
-            <q-card-section class="col-12">
-              <div class="row q-col-gutter-sm">
-                <div class="col-xs-12 col-md-12">
-                  <q-select
-                    :class="
-                      classInput(
+              <div class="col-12"><q-separator /></div>
+              <q-card-section class="col-12">
+                <div class="row q-col-gutter-sm">
+                  <div class="col-xs-12 col-md-12">
+                    <q-select
+                      :class="
+                        classInput(
+                          isReadOnly || !workflowRef?.permission.isUpdate
+                        )
+                      "
+                      :readonly="
                         isReadOnly || !workflowRef?.permission.isUpdate
-                      )
-                    "
-                    :readonly="isReadOnly || !workflowRef?.permission.isUpdate"
-                    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>
+                      "
+                      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-xs-12 col-md-12">
-                  <q-input
-                    :class="
-                      classInput(
+                  <div class="col-xs-12 col-md-12">
+                    <q-input
+                      :class="
+                        classInput(
+                          isReadOnly || !workflowRef?.permission.isUpdate
+                        )
+                      "
+                      :readonly="
                         isReadOnly || !workflowRef?.permission.isUpdate
-                      )
-                    "
-                    :readonly="isReadOnly || !workflowRef?.permission.isUpdate"
-                    v-model="formData.remark"
-                    label="หมายเหตุ"
-                    dense
-                    outlined
-                    type="textarea"
-                    hide-bottom-space
-                  />
-                </div>
+                      "
+                      v-model="formData.remark"
+                      label="หมายเหตุ"
+                      dense
+                      outlined
+                      type="textarea"
+                      hide-bottom-space
+                    />
+                  </div>
 
-                <div
-                  class="row col-12 justify-end"
-                  v-if="!isReadOnly && workflowRef?.permission.isUpdate"
-                >
-                  <q-btn label="บันทึก" color="secondary" type="submit"
-                    ><q-tooltip>บันทึก</q-tooltip></q-btn
+                  <div
+                    class="row col-12 justify-end"
+                    v-if="!isReadOnly && workflowRef?.permission.isUpdate"
                   >
+                    <q-btn label="บันทึก" color="secondary" type="submit"
+                      ><q-tooltip>บันทึก</q-tooltip></q-btn
+                    >
+                  </div>
                 </div>
-              </div>
-            </q-card-section>
-            <q-separator />
-          </q-card>
-        </q-form>
+              </q-card-section>
+              <q-separator />
+            </q-card>
+          </q-form>
 
-        <div class="col-12">
-          <Workflow
-            v-model:is-check-data="isCheckData"
-            ref="workflowRef"
-            :id="requestId"
-            sys-name="REGISTRY_PROFILE"
-          />
+          <div class="col-12">
+            <Workflow
+              v-model:is-check-data="isCheckData"
+              ref="workflowRef"
+              :id="requestId"
+              sys-name="REGISTRY_PROFILE"
+            />
+          </div>
         </div>
-      </div>
-    </q-card-section>
-  </q-card>
+      </q-card-section>
+    </q-card>
+  </div>
 
   <DialogUpdate
     v-model:modal="modalUpdate"
diff --git a/src/modules/04_registryPerson/components/requestEdit/Page02_DetailIDP.vue b/src/modules/04_registryPerson/components/requestEdit/Page02_DetailIDP.vue
new file mode 100644
index 000000000..4789dd32a
--- /dev/null
+++ b/src/modules/04_registryPerson/components/requestEdit/Page02_DetailIDP.vue
@@ -0,0 +1,503 @@
+<script setup lang="ts">
+import { onMounted, reactive, ref, computed } from "vue";
+import { useQuasar } from "quasar";
+import { useRouter, useRoute } from "vue-router";
+
+import { useCounterMixin } from "@/stores/mixin";
+import { useRequestEditStore } from "@/modules/04_registryPerson/stores/RequestEdit";
+import config from "@/app.config";
+import http from "@/plugins/http";
+
+import type {
+  DataOption,
+  DataItemsDevelopment,
+} from "@/modules/04_registryPerson/interface/index/Main";
+import type { FormDataIDP } from "@/modules/04_registryPerson/interface/request/Main";
+
+import Workflow from "@/components/Workflow/Main.vue";
+
+const $q = useQuasar();
+const router = useRouter();
+const route = useRoute();
+const store = useRequestEditStore();
+const {
+  dialogConfirm,
+  showLoader,
+  hideLoader,
+  messageError,
+  success,
+  date2Thai,
+} = useCounterMixin();
+
+const requestId = ref<string>(route.params.id as string);
+
+const isReadOnly = ref<boolean>(false); //อ่านอย่างเดียว
+const isDone = ref<string>("");
+//ฟอร์มข้อมูลการพัฒนารายบุคคล
+const formData = reactive<FormDataIDP>({
+  topic: "", //ชื่อเรื่อง/เนื้อเรื่อง/หัวข้อการพัฒนา
+  developmentProjects: [], //วิธีการพัฒนา
+  reasonDevelopment70: "", //อื่นๆ 70 การลงมือปฏิบัติ
+  reasonDevelopment20: "", //อื่นๆ 20 การเรียนรู้จากผู้อื่น
+  reasonDevelopment10: "", //อื่นๆ 10 การฝึกอบรมอื่นๆ
+  developmentTarget: "", //เป้าหมายการนำไปพัฒนางาน
+  developmentResults: "", //วิธีการวัดผลการพัฒนา
+  developmentReport: "", //รายงานผลการพัฒนา
+  status: "", //สถานะ
+  reason: "", //หมายเหตุ
+  createdFullName: "", //ผู้ขอแก้ไข
+  createdAt: null, //เวลาที่แก้ไข
+});
+
+const isCheckData = computed(() => {
+  if (isReadOnly.value === true) {
+    return true;
+  } else return false;
+});
+
+//70 การลงมือปฏิบัติ (โดยผู้บังคับบัญชามอบหมาย)
+const itemsDevelopment70 = 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 itemsDevelopment20 = 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 itemsDevelopment10 = 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.optionStatusIDP.filter((e: DataOption) => e.id !== "")
+);
+const statusOption = ref<DataOption[]>(statusOptionMain.value); //ตัวเลือกรายการสถานะ
+
+/**
+ * function fetch ข้อมูลการพัฒนารายบุคคลตาม ID ที่ค้องการ
+ * @param id ID ที่ต้องการดูรายละเอียด
+ */
+async function fetchDataByid(id: string) {
+  showLoader();
+  await http
+    .get(config.API.requestDevelopmentEdit + `admin/${id}`)
+    .then((res) => {
+      const data = res.data.result;
+      formData.topic = data.name;
+      formData.developmentProjects = data.developmentProjects;
+      formData.developmentTarget = data.developmentTarget;
+      formData.developmentResults = data.developmentResults;
+      formData.developmentReport = data.developmentReport;
+      formData.reasonDevelopment70 = data.reasonDevelopment70;
+      formData.reasonDevelopment20 = data.reasonDevelopment20;
+      formData.reasonDevelopment10 = data.reasonDevelopment10;
+      formData.status = data.status;
+      formData.reason = data.reason;
+      formData.createdFullName = data.createdFullName;
+      formData.createdAt = data.createdAt;
+
+      isDone.value = data.status;
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+/**
+ * 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 บันทึกข้อมูลการพัฒนารายบุคคล */
+function onSubmit() {
+  dialogConfirm($q, async () => {
+    showLoader();
+    await http
+      .patch(config.API.requestDevelopmentEdit + `admin/${requestId.value}`, {
+        status: formData.status,
+        reason: formData.reason,
+      })
+      .then(async () => {
+        await fetchDataByid(requestId.value);
+        success($q, "บันทึกข้อมูลสำเร็จ");
+      })
+      .catch((err) => {
+        messageError($q, err);
+      })
+      .finally(() => {
+        hideLoader();
+      });
+  });
+}
+
+/**
+ * class inpui
+ * @param val ค่าสถานะ
+ */
+function classInput(val: boolean) {
+  return {
+    "full-width cursor-pointer ": val,
+    "full-width cursor-pointer inputgreen": !val,
+  };
+}
+
+/**
+ * ดูการเปลี่ยนแปลงของ modal เมื่อ modal เป็น True
+ * fetch ข้อมูลการพัฒนารายบุคคลตาม ID ที่ค้องการ
+ */
+onMounted(() => {
+  fetchDataByid(requestId.value);
+});
+</script>
+
+<template>
+  <div class="q-gutter-sm q-pa-sm">
+    <div class="toptitle text-dark row items-center q-py-xs">
+      <q-btn
+        icon="mdi-arrow-left"
+        unelevated
+        round
+        dense
+        flat
+        color="primary"
+        class="q-mr-sm"
+        @click="router.go(-1)"
+      />
+      {{
+        `${formData.createdFullName}
+        (ขอแก้ไขเมื่อ ${
+          formData.createdAt ? date2Thai(formData.createdAt, true, true) : ""
+        })`
+      }}
+    </div>
+
+    <q-card>
+      <q-card-section>
+        <div class="row q-col-gutter-sm">
+          <!-- สถานะ -->
+          <q-form
+            v-if="isDone == 'PENDING'"
+            class="col-12"
+            greedy
+            @submit.prevent
+            @validation-success="onSubmit"
+          >
+            <q-card bordered class="col-12">
+              <div class="row q-pa-md q-col-gutter-sm">
+                <!-- สถานะ -->
+                <div class="col-4">
+                  <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-8">
+                  <q-input
+                    :class="classInput(isReadOnly)"
+                    v-model="formData.reason"
+                    label="หมายเหตุ"
+                    dense
+                    outlined
+                    type="textarea"
+                    hide-bottom-space
+                  />
+                </div>
+              </div>
+
+              <q-separator />
+
+              <q-card-actions align="right">
+                <q-btn label="บันทึก" color="secondary" type="submit"
+                  ><q-tooltip>บันทึก</q-tooltip></q-btn
+                >
+              </q-card-actions>
+            </q-card>
+          </q-form>
+
+          <!-- รายละเอียด -->
+          <div class="col-12">
+            <q-card bordered class="col-12">
+              <div class="col-12 text-weight-medium bg-grey-1 q-py-xs q-px-md">
+                รายละเอียด
+              </div>
+              <q-separator />
+              <div class="row q-col-gutter-sm q-pa-md">
+                <div class="col-12">
+                  <q-input
+                    readonly
+                    outlined
+                    v-model="formData.topic"
+                    label="ชื่อเรื่อง/เนื้อเรื่อง/หัวข้อการพัฒนา"
+                    dense
+                  />
+                </div>
+
+                <div class="col-12">
+                  <div class="q-mb-sm text-weight-medium text-body2">
+                    วิธีการพัฒนา
+                  </div>
+                  <div class="row col-12 q-ml-md q-col-gutter-sm">
+                    <!-- 70 การลงมือปฏิบัติ (โดยผู้บังคับบัญชามอบหมาย) -->
+                    <div class="col-4">
+                      <div class="q-mb-sm text-weight-medium text-body2">
+                        70 การลงมือปฏิบัติ (โดยผู้บังคับบัญชามอบหมาย)
+                      </div>
+                      <q-option-group
+                        disable
+                        class="check_box q-mt-sm"
+                        keep-color
+                        color="primary"
+                        dense
+                        v-model="formData.developmentProjects"
+                        :options="itemsDevelopment70"
+                        type="checkbox"
+                      />
+
+                      <div
+                        class="row"
+                        v-if="formData.developmentProjects.includes('other1')"
+                      >
+                        <div class="col-8 q-mt-sm relative-position">
+                          <div class="other_custom_input">
+                            <q-input
+                              readonly
+                              v-model="formData.reasonDevelopment70"
+                              dense
+                              outlined
+                              label="กรุณาระบุ"
+                            ></q-input>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+
+                    <!-- 20 การเรียนรู้จากผู้อื่น (Coach/Mentor/Consulting) -->
+                    <div class="col-4">
+                      <div class="q-mb-sm text-weight-medium text-body2">
+                        20 การเรียนรู้จากผู้อื่น (Coach/Mentor/Consulting)
+                      </div>
+                      <q-option-group
+                        disable
+                        class="check_box q-mt-sm"
+                        keep-color
+                        color="primary"
+                        dense
+                        v-model="formData.developmentProjects"
+                        :options="itemsDevelopment20"
+                        type="checkbox"
+                      />
+                      <div
+                        class="row"
+                        v-if="formData.developmentProjects.includes('other2')"
+                      >
+                        <div class="col-8 q-mt-sm relative-position">
+                          <div class="other_custom_input">
+                            <q-input
+                              readonly
+                              v-model="formData.reasonDevelopment20"
+                              dense
+                              outlined
+                              label="กรุณาระบุ"
+                            ></q-input>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+
+                    <!-- 10 การฝึกอบรมอื่นๆ -->
+                    <div class="col-4">
+                      <div class="q-mb-sm text-weight-medium text-body2">
+                        10 การฝึกอบรมอื่นๆ
+                      </div>
+                      <q-option-group
+                        disable
+                        class="check_box q-mt-sm"
+                        keep-color
+                        color="primary"
+                        dense
+                        v-model="formData.developmentProjects"
+                        :options="itemsDevelopment10"
+                        type="checkbox"
+                      />
+                      <div
+                        class="row"
+                        v-if="formData.developmentProjects.includes('other3')"
+                      >
+                        <div class="offset-4 col-8 q-mt-sm relative-position">
+                          <div class="other_custom_input">
+                            <q-input
+                              readonly
+                              v-model="formData.reasonDevelopment10"
+                              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>
+            </q-card>
+          </div>
+
+          <div class="col-12">
+            <Workflow
+              v-model:is-check-data="isCheckData"
+              ref="workflowRef"
+              :id="requestId"
+              sys-name="REGISTRY_IDP"
+            />
+          </div>
+        </div>
+      </q-card-section>
+    </q-card>
+  </div>
+</template>
+
+<style scoped></style>
diff --git a/src/modules/04_registryPerson/components/requestEdit/requestEditPage.vue b/src/modules/04_registryPerson/components/requestEdit/requestEditPage.vue
deleted file mode 100644
index 01582e86a..000000000
--- a/src/modules/04_registryPerson/components/requestEdit/requestEditPage.vue
+++ /dev/null
@@ -1,498 +0,0 @@
-<script setup lang="ts">
-import { onMounted, reactive, ref, watch } from "vue";
-import { useQuasar } from "quasar";
-import { useRouter, useRoute } from "vue-router";
-
-import { useCounterMixin } from "@/stores/mixin";
-import { useRequestEditStore } from "@/modules/04_registryPerson/stores/RequestEdit";
-import config from "@/app.config";
-import http from "@/plugins/http";
-
-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 router = useRouter();
-const route = useRoute();
-const store = useRequestEditStore();
-const {
-  dialogConfirm,
-  showLoader,
-  hideLoader,
-  messageError,
-  success,
-  date2Thai,
-} = useCounterMixin();
-
-const requestId = ref<string>(route.params.id as string);
-
-const isReadOnly = ref<boolean>(false); //อ่านอย่างเดียว
-const isDone = ref<string>("");
-//ฟอร์มข้อมูลการพัฒนารายบุคคล
-const formData = reactive<FormDataIDP>({
-  topic: "", //ชื่อเรื่อง/เนื้อเรื่อง/หัวข้อการพัฒนา
-  developmentProjects: [], //วิธีการพัฒนา
-  reasonDevelopment70: "", //อื่นๆ 70 การลงมือปฏิบัติ
-  reasonDevelopment20: "", //อื่นๆ 20 การเรียนรู้จากผู้อื่น
-  reasonDevelopment10: "", //อื่นๆ 10 การฝึกอบรมอื่นๆ
-  developmentTarget: "", //เป้าหมายการนำไปพัฒนางาน
-  developmentResults: "", //วิธีการวัดผลการพัฒนา
-  developmentReport: "", //รายงานผลการพัฒนา
-  status: "", //สถานะ
-  reason: "", //หมายเหตุ
-  createdFullName: "", //ผู้ขอแก้ไข
-  createdAt: null, //เวลาที่แก้ไข
-});
-
-//70 การลงมือปฏิบัติ (โดยผู้บังคับบัญชามอบหมาย)
-const itemsDevelopment70 = 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 itemsDevelopment20 = 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 itemsDevelopment10 = 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.optionStatusIDP.filter((e: DataOption) => e.id !== "")
-);
-const statusOption = ref<DataOption[]>(statusOptionMain.value); //ตัวเลือกรายการสถานะ
-
-/**
- * function fetch ข้อมูลการพัฒนารายบุคคลตาม ID ที่ค้องการ
- * @param id ID ที่ต้องการดูรายละเอียด
- */
-function fetchDataByid(id: string) {
-  showLoader();
-  http
-    .get(config.API.requestDevelopmentEdit + `admin/${id}`)
-    .then((res) => {
-      const data = res.data.result;
-      formData.topic = data.name;
-      formData.developmentProjects = data.developmentProjects;
-      formData.developmentTarget = data.developmentTarget;
-      formData.developmentResults = data.developmentResults;
-      formData.developmentReport = data.developmentReport;
-      formData.reasonDevelopment70 = data.reasonDevelopment70;
-      formData.reasonDevelopment20 = data.reasonDevelopment20;
-      formData.reasonDevelopment10 = data.reasonDevelopment10;
-      formData.status = data.status;
-      formData.reason = data.reason;
-      formData.createdFullName = data.createdFullName;
-      formData.createdAt = data.createdAt;
-
-      isDone.value = data.status;
-    })
-    .catch((err) => {
-      messageError($q, err);
-    })
-    .finally(() => {
-      hideLoader();
-    });
-}
-
-/**
- * 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 บันทึกข้อมูลการพัฒนารายบุคคล */
-function onSubmit() {
-  dialogConfirm($q, async () => {
-    showLoader();
-    await http
-      .patch(config.API.requestDevelopmentEdit + `admin/${requestId.value}`, {
-        status: formData.status,
-        reason: formData.reason,
-      })
-      .then(async () => {
-        router.push("/registry-officer/request-edit");
-        success($q, "บันทึกข้อมูลสำเร็จ");
-      })
-      .catch((err) => {
-        messageError($q, err);
-      })
-      .finally(() => {
-        hideLoader();
-      });
-  });
-}
-
-/**
- * function ปิด popup
- * และกำหนด formData เป็นค่า Defult
- */
-function closeDialog() {
-  formData.topic = "";
-  formData.developmentProjects = [];
-  formData.reasonDevelopment70 = "";
-  formData.reasonDevelopment20 = "";
-  formData.reasonDevelopment10 = "";
-  formData.developmentTarget = "";
-  formData.developmentResults = "";
-  formData.developmentReport = "";
-  formData.status = "";
-  formData.reason = "";
-  formData.createdFullName = "";
-  formData.createdAt = null;
-}
-
-/**
- * class inpui
- * @param val ค่าสถานะ
- */
-function classInput(val: boolean) {
-  return {
-    "full-width cursor-pointer ": val,
-    "full-width cursor-pointer inputgreen": !val,
-  };
-}
-
-/**
- * ดูการเปลี่ยนแปลงของ modal เมื่อ modal เป็น True
- * fetch ข้อมูลการพัฒนารายบุคคลตาม ID ที่ค้องการ
- */
-onMounted(() => {
-  fetchDataByid(requestId.value);
-});
-</script>
-
-<template>
-  <div class="row items-center">
-    <div class="toptitle text-dark row items-center q-py-xs">
-      <q-btn
-        icon="mdi-arrow-left"
-        unelevated
-        round
-        dense
-        flat
-        color="primary"
-        class="q-mr-sm"
-        @click="router.go(-1)"
-      />
-      {{
-        `${formData.createdFullName}
-        (ขอแก้ไขเมื่อ ${
-          formData.createdAt ? date2Thai(formData.createdAt, true, true) : ""
-        })`
-      }}
-    </div>
-  </div>
-
-  <q-card flat>
-    <q-form greedy @submit.prevent @validation-success="onSubmit">
-      <q-card-section v-if="isDone == 'PENDING'">
-        <q-card bordered class="col-12">
-          <div class="row q-pa-md q-col-gutter-sm">
-            <!-- สถานะ -->
-            <div class="col-4">
-              <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-8">
-              <q-input
-                :class="classInput(isReadOnly)"
-                v-model="formData.reason"
-                label="หมายเหตุ"
-                dense
-                outlined
-                type="textarea"
-                hide-bottom-space
-              />
-            </div>
-          </div>
-
-          <q-separator />
-
-          <q-card-actions align="right">
-            <q-btn label="บันทึก" color="secondary" type="submit"
-              ><q-tooltip>บันทึก</q-tooltip></q-btn
-            >
-          </q-card-actions>
-        </q-card>
-      </q-card-section>
-    </q-form>
-
-    <!-- รายละเอียด -->
-    <q-card-section class="q-pt-sm">
-      <q-card bordered class="col-12">
-        <div class="col-12 text-weight-medium bg-grey-1 q-py-xs q-px-md">
-          รายละเอียด
-        </div>
-        <q-separator />
-        <div class="row q-col-gutter-sm q-pa-md">
-          <div class="col-12">
-            <q-input
-              readonly
-              outlined
-              v-model="formData.topic"
-              label="ชื่อเรื่อง/เนื้อเรื่อง/หัวข้อการพัฒนา"
-              dense
-            />
-          </div>
-
-          <div class="col-12">
-            <div class="q-mb-sm text-weight-medium text-body2">
-              วิธีการพัฒนา
-            </div>
-            <div class="row col-12 q-ml-md q-col-gutter-sm">
-              <!-- 70 การลงมือปฏิบัติ (โดยผู้บังคับบัญชามอบหมาย) -->
-              <div class="col-4">
-                <div class="q-mb-sm text-weight-medium text-body2">
-                  70 การลงมือปฏิบัติ (โดยผู้บังคับบัญชามอบหมาย)
-                </div>
-                <q-option-group
-                  disable
-                  class="check_box q-mt-sm"
-                  keep-color
-                  color="primary"
-                  dense
-                  v-model="formData.developmentProjects"
-                  :options="itemsDevelopment70"
-                  type="checkbox"
-                />
-
-                <div
-                  class="row"
-                  v-if="formData.developmentProjects.includes('other1')"
-                >
-                  <div class="col-8 q-mt-sm relative-position">
-                    <div class="other_custom_input">
-                      <q-input
-                        readonly
-                        v-model="formData.reasonDevelopment70"
-                        dense
-                        outlined
-                        label="กรุณาระบุ"
-                      ></q-input>
-                    </div>
-                  </div>
-                </div>
-              </div>
-
-              <!-- 20 การเรียนรู้จากผู้อื่น (Coach/Mentor/Consulting) -->
-              <div class="col-4">
-                <div class="q-mb-sm text-weight-medium text-body2">
-                  20 การเรียนรู้จากผู้อื่น (Coach/Mentor/Consulting)
-                </div>
-                <q-option-group
-                  disable
-                  class="check_box q-mt-sm"
-                  keep-color
-                  color="primary"
-                  dense
-                  v-model="formData.developmentProjects"
-                  :options="itemsDevelopment20"
-                  type="checkbox"
-                />
-                <div
-                  class="row"
-                  v-if="formData.developmentProjects.includes('other2')"
-                >
-                  <div class="col-8 q-mt-sm relative-position">
-                    <div class="other_custom_input">
-                      <q-input
-                        readonly
-                        v-model="formData.reasonDevelopment20"
-                        dense
-                        outlined
-                        label="กรุณาระบุ"
-                      ></q-input>
-                    </div>
-                  </div>
-                </div>
-              </div>
-
-              <!-- 10 การฝึกอบรมอื่นๆ -->
-              <div class="col-4">
-                <div class="q-mb-sm text-weight-medium text-body2">
-                  10 การฝึกอบรมอื่นๆ
-                </div>
-                <q-option-group
-                  disable
-                  class="check_box q-mt-sm"
-                  keep-color
-                  color="primary"
-                  dense
-                  v-model="formData.developmentProjects"
-                  :options="itemsDevelopment10"
-                  type="checkbox"
-                />
-                <div
-                  class="row"
-                  v-if="formData.developmentProjects.includes('other3')"
-                >
-                  <div class="offset-4 col-8 q-mt-sm relative-position">
-                    <div class="other_custom_input">
-                      <q-input
-                        readonly
-                        v-model="formData.reasonDevelopment10"
-                        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>
-      </q-card>
-    </q-card-section>
-  </q-card>
-</template>
-
-<style scoped></style>
diff --git a/src/modules/04_registryPerson/router.ts b/src/modules/04_registryPerson/router.ts
index d0a1e17ba..aae17b90d 100644
--- a/src/modules/04_registryPerson/router.ts
+++ b/src/modules/04_registryPerson/router.ts
@@ -9,7 +9,7 @@ const detailPage = () =>
 const requestEdit = () =>
   import("@/modules/04_registryPerson/views/requestEditView.vue");
 const requestEditPage = () =>
-  import("@/modules/04_registryPerson/components/requestEdit/requestEditPage.vue");
+  import("@/modules/04_registryPerson/components/requestEdit/Page02_DetailIDP.vue");
 const Page01_Detail = () =>
   import(
     "@/modules/04_registryPerson/components/requestEdit/Page01_Detail.vue"