From 4124d81bb3247655cb532a9d0ae47ab0ea12b07a Mon Sep 17 00:00:00 2001
From: setthawutttty <trx.setthawut@gmail.com>
Date: Tue, 29 Oct 2024 14:06:05 +0700
Subject: [PATCH] =?UTF-8?q?=E0=B9=81=E0=B8=81=E0=B9=89=20dialog=20?=
 =?UTF-8?q?=E0=B9=80=E0=B8=9E=E0=B8=B4=E0=B9=88=E0=B8=A1=20page?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../14_IDP/component/DialogDevelop.vue        | 528 -----------------
 src/modules/14_IDP/router.ts                  |  20 +
 src/modules/14_IDP/views/main.vue             |  29 +-
 src/modules/14_IDP/views/registry.vue         | 545 ++++++++++++++++++
 4 files changed, 576 insertions(+), 546 deletions(-)
 delete mode 100644 src/modules/14_IDP/component/DialogDevelop.vue
 create mode 100644 src/modules/14_IDP/views/registry.vue

diff --git a/src/modules/14_IDP/component/DialogDevelop.vue b/src/modules/14_IDP/component/DialogDevelop.vue
deleted file mode 100644
index bbc1239..0000000
--- a/src/modules/14_IDP/component/DialogDevelop.vue
+++ /dev/null
@@ -1,528 +0,0 @@
-<script setup lang="ts">
-import { reactive, ref, computed, watch } from "vue";
-import { useQuasar } from "quasar";
-import axios from "axios";
-
-import http from "@/plugins/http";
-import config from "@/app.config";
-import { useCounterMixin } from "@/stores/mixin";
-import { useIndividualDevelopmentPlan } from "@/modules/14_IDP/store";
-
-import type {
-  FormDataIDP,
-  DataItemsDevelopment,
-} from "@/modules/14_IDP/interface/Main";
-
-import DialogHeader from "@/components/DialogHeader.vue";
-
-const $q = useQuasar();
-const store = useIndividualDevelopmentPlan();
-const { dialogConfirm, showLoader, hideLoader, messageError, success } =
-  useCounterMixin();
-
-const modal = defineModel<boolean>("modal", { required: true }); //เปิด,ปิด popup แก้ไขสถานะคำร้อง
-const isEdit = defineModel<boolean>("isEdit", { required: true }); //เปิด,ปิด popup แก้ไขสถานะคำร้อง
-const idRow = defineModel<string>("idRow", { required: true }); //เปิด,ปิด popup แก้ไขสถานะคำร้อง
-const isReadOnly = ref<boolean>(false);
-
-const props = defineProps({
-  getData: Function,
-  onDownloadFile: Function,
-});
-
-/** เช็ค true/false 70*/
-const isDevelopment70 = computed(() => {
-  return itemsDevelopmentAction.value.some((txt) =>
-    formData.development.includes(txt.value)
-  );
-});
-/** เช็ค true/false 20*/
-const isDevelopment20 = computed(() => {
-  return itemsDevelopmentPerson.value.some((txt) =>
-    formData.development.includes(txt.value)
-  );
-});
-/** เช็ค true/false 10*/
-const isDevelopment10 = computed(() => {
-  return itemsDevelopmentTraining.value.some((txt) =>
-    formData.development.includes(txt.value)
-  );
-});
-
-const formData = reactive<FormDataIDP>({
-  topic: "",
-  development: [],
-  otherAction: "",
-  otherPerson: "",
-  otherTraining: "",
-  developmentTarget: "",
-  developmentResults: "",
-  developmentReport: "",
-  document: null,
-});
-
-//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: "อื่น ๆ (ระบุ)" },
-]);
-
-function onSubmit() {
-  dialogConfirm($q, () => {
-    showLoader();
-    const body = {
-      name: formData.topic,
-      developmentTarget: formData.developmentTarget,
-      developmentResults: formData.developmentResults,
-      developmentReport: formData.developmentReport,
-      reasonDevelopment70: formData.otherAction,
-      reasonDevelopment20: formData.otherPerson,
-      reasonDevelopment10: formData.otherTraining,
-      isDevelopment70: isDevelopment70.value,
-      isDevelopment20: isDevelopment20.value,
-      isDevelopment10: isDevelopment10.value,
-      developmentProjects: formData.development,
-    };
-    http
-      .post(config.API.developmentRequest, body)
-      .then(async (res) => {
-        await createURLUpload(res.data.result, formData.document);
-      })
-      .catch((e) => {
-        messageError($q, e);
-        hideLoader();
-      })
-      .finally(() => {});
-  });
-}
-
-/**
- * function สร้าง URL อัปโหลไฟล์เอกสารหลักฐาน
- */
-async function createURLUpload(id: string, file: any) {
-  const fileName = { fileName: file.name };
-  await http
-    .post(
-      config.API.file("IDP", "ยื่นคำร้องขอเพิ่มข้อมูลการพัฒนารายบุคคล", id),
-      {
-        replace: false,
-        fileList: fileName,
-      }
-    )
-    .then(async (res) => {
-      const foundKey: string | undefined = Object.keys(res.data).find(
-        (key) =>
-          res.data[key]?.fileName !== undefined &&
-          res.data[key]?.fileName !== ""
-      );
-      foundKey &&
-        (await uploadFileDoc(res.data[foundKey]?.uploadUrl, formData.document));
-    })
-    .catch((err) => {
-      messageError($q, err);
-      hideLoader();
-    });
-}
-
-/**
- * function สำหรับอัพโหลดไฟล์เอกสารหลักฐาน
- */
-async function uploadFileDoc(uploadUrl: string, file: any) {
-  await axios
-    .put(uploadUrl, file, {
-      headers: {
-        "Content-Type": file.type,
-      },
-    })
-    .then(async (res) => {
-      success($q, `บันทึกข้อมูลสำเร็จ`);
-      closeDialog();
-      await props.getData?.();
-      hideLoader();
-    })
-    .catch((e) => {
-      messageError($q, e);
-      hideLoader();
-    })
-    .finally(() => {});
-}
-
-/**
- * function ปิด popup
- */
-function closeDialog() {
-  modal.value = false;
-  formData.topic = "";
-  formData.development = [];
-  formData.otherAction = "";
-  formData.otherPerson = "";
-  formData.otherTraining = "";
-  formData.developmentTarget = "";
-  formData.developmentResults = "";
-  formData.developmentReport = "";
-  formData.document = null;
-
-  isEdit.value = false;
-  idRow.value = "";
-}
-
-/**
- * class inpui
- * @param val ค่าสถานะ
- */
-function classInput(val: boolean) {
-  return {
-    "full-width cursor-pointer ": val,
-    "full-width cursor-pointer inputgreen": !val,
-  };
-}
-
-function getDetail() {
-  showLoader();
-  http
-    .get(config.API.developmentRequest + `/user/${idRow.value}`)
-    .then((res) => {
-      const data = res.data.result;
-      formData.topic = data.name;
-      formData.developmentTarget = data.developmentTarget;
-      formData.developmentResults = data.developmentResults;
-      formData.developmentReport = data.developmentReport;
-      formData.otherAction = data.reasonDevelopment70;
-      formData.otherPerson = data.reasonDevelopment20;
-      formData.otherTraining = data.reasonDevelopment10;
-      formData.development = data.developmentProjects;
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(() => {
-      hideLoader();
-    });
-}
-
-watch(
-  () => modal.value,
-  () => {
-    if (idRow.value) {
-      getDetail();
-    }
-  }
-);
-</script>
-
-<template>
-  <q-dialog v-model="modal" persistent>
-    <q-card style="min-width: 90vw">
-      <q-form greedy @submit.prevent @validation-success="onSubmit">
-        <DialogHeader
-          :tittle="
-            isEdit
-              ? 'รายละเอียดยื่นคำร้องขอเพิ่มข้อมูลการพัฒนารายบุคคล'
-              : 'ยื่นคำร้องขอเพิ่มข้อมูลการพัฒนารายบุคคล'
-          "
-          :close="closeDialog"
-        />
-        <q-separator />
-
-        <q-card-section style="max-height: 80vh" class="scroll">
-          <div class="row q-col-gutter-sm">
-            <div class="col-12">
-              <div class="row q-col-gutter-sm">
-                <div class="col-12">
-                  <q-input
-                    :class="classInput(isReadOnly)"
-                    outlined
-                    v-model="formData.topic"
-                    label="ชื่อเรื่อง/เนื้อเรื่อง/หัวข้อการพัฒนา"
-                    dense
-                    :readonly="isEdit"
-                    hide-bottom-space
-                    :rules="[(val:any) => !!val || `${'กรุณากรอกชื่อเรื่อง/เนื้อเรื่อง/หัวข้อการพัฒนา'}`]"
-                  />
-                </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-12 col-sm-6 col-lg-4">
-                      <q-label class="q-mb-sm text-weight-medium text-body2"
-                        >70 การลงมือปฏิบัติ (โดยผู้บังคับบัญชามอบหมาย)</q-label
-                      >
-                      <q-option-group
-                        class="check_box q-mt-sm"
-                        keep-color
-                        color="primary"
-                        dense
-                        v-model="formData.development"
-                        :options="itemsDevelopmentAction"
-                        type="checkbox"
-                        :disable="isEdit"
-                      />
-
-                      <div
-                        class="row q-pb-md"
-                        v-if="formData.development.includes('other1')"
-                      >
-                        <div
-                          class="offset-4 offset-md-3 col-8 q-mt-sm relative-position"
-                        >
-                          <div class="other_custom_input">
-                            <q-input
-                              v-model="formData.otherAction"
-                              dense
-                              :readonly="isEdit"
-                              outlined
-                              class="inputgreen"
-                              label="กรุณาระบุ"
-                            ></q-input>
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-
-                    <!-- 20 การเรียนรู้จากผู้อื่น (Coach/Mentor/Consulting) -->
-                    <div class="col-12 col-sm-6 col-lg-4">
-                      <q-label class="q-mb-sm text-weight-medium text-body2"
-                        >20 การเรียนรู้จากผู้อื่น
-                        (Coach/Mentor/Consulting)</q-label
-                      >
-                      <q-option-group
-                        class="check_box q-mt-sm"
-                        keep-color
-                        color="primary"
-                        dense
-                        :disable="isEdit"
-                        v-model="formData.development"
-                        :options="itemsDevelopmentPerson"
-                        type="checkbox"
-                      />
-                      <div
-                        class="row q-pb-md"
-                        v-if="formData.development.includes('other2')"
-                      >
-                        <div
-                          class="offset-4 offset-md-3 col-8 q-mt-sm relative-position"
-                        >
-                          <div class="other_custom_input">
-                            <q-input
-                              v-model="formData.otherPerson"
-                              dense
-                              :readonly="isEdit"
-                              outlined
-                              label="กรุณาระบุ"
-                            ></q-input>
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-
-                    <!-- 10 การฝึกอบรมอื่นๆ -->
-                    <div class="col-12 col-sm-6 col-lg-4">
-                      <q-label class="q-mb-sm text-weight-medium text-body2"
-                        >10 การฝึกอบรมอื่นๆ</q-label
-                      >
-                      <q-option-group
-                        class="check_box q-mt-sm"
-                        keep-color
-                        color="primary"
-                        dense
-                        :disable="isEdit"
-                        v-model="formData.development"
-                        :options="itemsDevelopmentTraining"
-                        type="checkbox"
-                      />
-                      <div
-                        class="row q-pb-md"
-                        v-if="formData.development.includes('other3')"
-                      >
-                        <div
-                          class="offset-4 offset-md-3 col-8 q-mt-sm relative-position"
-                        >
-                          <div class="other_custom_input">
-                            <q-input
-                              v-model="formData.otherTraining"
-                              dense
-                              :readonly="isEdit"
-                              outlined
-                              label="กรุณาระบุ"
-                            ></q-input>
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-
-                <!-- เป้าหมายการนำไปพัฒนางาน -->
-                <div class="col-12">
-                  <q-input
-                    outlined
-                    :readonly="isEdit"
-                    v-model="formData.developmentTarget"
-                    label="เป้าหมายการนำไปพัฒนางาน"
-                    dense
-                    type="textarea"
-                    class="inputgreen"
-                  />
-                </div>
-
-                <!-- วิธีการวัดผลการพัฒนา -->
-                <div class="col-12">
-                  <q-input
-                    outlined
-                    :readonly="isEdit"
-                    v-model="formData.developmentResults"
-                    label="วิธีการวัดผลการพัฒนา"
-                    dense
-                    type="textarea"
-                    class="inputgreen"
-                  />
-                </div>
-
-                <!-- รายงานผลการพัฒนา -->
-                <div class="col-12">
-                  <q-input
-                    :readonly="isEdit"
-                    outlined
-                    v-model="formData.developmentReport"
-                    label="รายงานผลการพัฒนา"
-                    dense
-                    type="textarea"
-                    class="inputgreen"
-                  />
-                </div>
-                <div class="col-12">
-                  <q-file
-                    v-if="!isEdit"
-                    :class="classInput(isReadOnly)"
-                    v-model="formData.document"
-                    label="อัปโหลดเอกสารหลักฐาน"
-                    flat
-                    dense
-                    :readonly="isEdit"
-                    outlined
-                    hide-bottom-space
-                    :rules="[(val:any) => !!val || `${'กรุณาเลือกไฟล์'}`]"
-                  />
-                  <q-btn
-                    v-else
-                    color="primary"
-                    flat
-                    dense
-                    rounded
-                    icon="mdi-download"
-                    label="ดาวน์โหลดเอกสารหลักฐาน"
-                    @click="props.onDownloadFile?.(idRow)"
-                  >
-                    <q-tooltip>ดาวน์โหลดเอกสารหลักฐาน</q-tooltip>
-                  </q-btn>
-                </div>
-              </div>
-            </div>
-          </div>
-        </q-card-section>
-
-        <q-separator v-if="!isEdit" />
-
-        <q-card-actions align="right" v-if="!isEdit">
-          <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>
-:deep(.check_box .q-checkbox) {
-  align-items: start;
-}
-
-.other_custom_input {
-  position: absolute;
-  top: -25px;
-  width: 100%;
-}
-</style>
diff --git a/src/modules/14_IDP/router.ts b/src/modules/14_IDP/router.ts
index 654998f..82ce6de 100644
--- a/src/modules/14_IDP/router.ts
+++ b/src/modules/14_IDP/router.ts
@@ -3,6 +3,8 @@
  */
 
 const idpMain = () => import("@/modules/14_IDP/views/main.vue");
+const idpRegistry = () => import("@/modules/14_IDP/views/registry.vue");
+const idpRegistryDetail = () => import("@/modules/14_IDP/views/registry.vue");
 
 export default [
   {
@@ -14,4 +16,22 @@ export default [
       Key: [14],
     },
   },
+  {
+    path: "/idp-registry",
+    name: "idpRegistry",
+    component: idpRegistry,
+    meta: {
+      Auth: true,
+      Key: [14],
+    },
+  },
+  {
+    path: "/idp-registry-detail/:id",
+    name: "idpRegistryDetail",
+    component: idpRegistryDetail,
+    meta: {
+      Auth: true,
+      Key: [14],
+    },
+  },
 ];
diff --git a/src/modules/14_IDP/views/main.vue b/src/modules/14_IDP/views/main.vue
index dd512e4..355fd8c 100644
--- a/src/modules/14_IDP/views/main.vue
+++ b/src/modules/14_IDP/views/main.vue
@@ -10,8 +10,6 @@ import { useIndividualDevelopmentPlan } from "@/modules/14_IDP/store"; // ดึ
 
 import type { DataOption, RowsListMain } from "@/modules/14_IDP/interface/Main";
 
-import DialogDevelop from "@/modules/14_IDP/component/DialogDevelop.vue";
-
 const $q = useQuasar();
 const router = useRouter();
 const mixin = useCounterMixin();
@@ -169,7 +167,7 @@ function clearStatus() {
 
 /** ฟังชั่น เปิด popup */
 function openAdd() {
-  modalAdd.value = true;
+  router.push("/idp-registry");
 }
 
 function onDelete(id: string) {
@@ -267,9 +265,12 @@ function updatePagination(newPagination: any) {
  * @param id id row
  */
 function onDetail(id: string) {
-  modalAdd.value = true;
-  isEdit.value = true;
-  idRow.value = id;
+  router.push(`/idp-registry-detail/${id}`);
+}
+
+function getSerach(){
+  pagination.value.page = 1
+  getListData()
 }
 
 watch(
@@ -315,7 +316,7 @@ onMounted(async () => {
               option-value="id"
               :options="statusOptions"
               style="width: 250px"
-              @update:model-value="getListData()"
+              @update:model-value="getSerach()"
               @filter="(inputValue:string,
               doneFn:Function) => filterOption(inputValue, doneFn
               ) "
@@ -345,7 +346,7 @@ onMounted(async () => {
               outlined
               dense
               label="ค้นหา"
-              @keydown.enter="getListData()"
+              @keydown.enter="getSerach()"
               style="width: 200px"
             >
               <template v-slot:append>
@@ -354,7 +355,7 @@ onMounted(async () => {
                   v-if="filterKeyword !== ''"
                   name="clear"
                   class="cursor-pointer"
-                  @click="(filterKeyword = ''), getListData()"
+                  @click="(filterKeyword = ''), getSerach()"
                 />
               </template>
             </q-input>
@@ -381,7 +382,7 @@ onMounted(async () => {
               row-key="id"
               :paging="true"
               :visible-columns="visibleColumns"
-              :rows-per-page-options="[1, 25, 50, 100]"
+              :rows-per-page-options="[10, 25, 50, 100]"
               @update:pagination="updatePagination"
             >
               <template v-slot:header="props">
@@ -485,13 +486,5 @@ onMounted(async () => {
       </div>
     </div>
   </div>
-
-  <DialogDevelop
-    v-model:modal="modalAdd"
-    :get-data="getListData"
-    v-model:is-edit="isEdit"
-    v-model:id-row="idRow"
-    :on-download-file="onDownloadFile"
-  />
 </template>
 <style scoped lang="scss"></style>
diff --git a/src/modules/14_IDP/views/registry.vue b/src/modules/14_IDP/views/registry.vue
new file mode 100644
index 0000000..f03ff61
--- /dev/null
+++ b/src/modules/14_IDP/views/registry.vue
@@ -0,0 +1,545 @@
+<script setup lang="ts">
+import { reactive, ref, computed, onMounted } from "vue";
+import { useRouter, useRoute } from "vue-router";
+import { useQuasar } from "quasar";
+import axios from "axios";
+
+import http from "@/plugins/http";
+import config from "@/app.config";
+import { useCounterMixin } from "@/stores/mixin";
+
+import type {
+  FormDataIDP,
+  DataItemsDevelopment,
+} from "@/modules/14_IDP/interface/Main";
+
+const $q = useQuasar();
+const { dialogConfirm, showLoader, hideLoader, messageError, success } =
+  useCounterMixin();
+
+const idRow = ref<string>("");
+const router = useRouter();
+const route = useRoute();
+const isReadOnly = ref<boolean>(false);
+const isEdit = ref<boolean>(false); // เก็บ เช็ค รายละเอียด/แก้ไข
+
+const formData = reactive<FormDataIDP>({
+  topic: "",
+  development: [],
+  otherAction: "",
+  otherPerson: "",
+  otherTraining: "",
+  developmentTarget: "",
+  developmentResults: "",
+  developmentReport: "",
+  document: null,
+});
+
+/** เช็ค true/false 70*/
+const isDevelopment70 = computed(() => {
+  return itemsDevelopmentAction.value.some((txt) =>
+    formData.development.includes(txt.value)
+  );
+});
+/** เช็ค true/false 20*/
+const isDevelopment20 = computed(() => {
+  return itemsDevelopmentPerson.value.some((txt) =>
+    formData.development.includes(txt.value)
+  );
+});
+/** เช็ค true/false 10*/
+const isDevelopment10 = computed(() => {
+  return itemsDevelopmentTraining.value.some((txt) =>
+    formData.development.includes(txt.value)
+  );
+});
+
+//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: "อื่น ๆ (ระบุ)" },
+]);
+
+/**
+ * class inpui
+ * @param val ค่าสถานะ
+ */
+function classInput(val: boolean) {
+  return {
+    "full-width cursor-pointer ": val,
+    "full-width cursor-pointer inputgreen": !val,
+  };
+}
+
+/**
+ * function หาชื่อไฟล์
+ * @param id รายการยื่นคำร้องขอแก้ไขข้อมูล
+ */
+function onDownloadFile(id: string) {
+  showLoader();
+  http
+    .get(config.API.file("IDP", "ยื่นคำร้องขอเพิ่มข้อมูลการพัฒนารายบุคคล", id))
+    .then((res) => {
+      if (res.data.length !== 0) {
+        downloadUrl(id, res.data[0].fileName);
+      } else {
+        hideLoader();
+      }
+    })
+    .catch((e) => {
+      messageError($q, e);
+      hideLoader();
+    });
+}
+
+/**
+ * function  โหลดไฟล์
+ * @param id  รายการยื่นคำร้องขอแก้ไขข้อมูล
+ * @param fileName  ชื่อไฟล์
+ */
+function downloadUrl(id: string, fileName: string) {
+  http
+    .get(
+      config.API.fileByFile(
+        "IDP",
+        "ยื่นคำร้องขอเพิ่มข้อมูลการพัฒนารายบุคคล",
+        id,
+        fileName
+      )
+    )
+    .then((res) => {
+      window.open(res.data.downloadUrl, "_blank");
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+function onSubmit() {
+  dialogConfirm($q, () => {
+    showLoader();
+    const body = {
+      name: formData.topic,
+      developmentTarget: formData.developmentTarget,
+      developmentResults: formData.developmentResults,
+      developmentReport: formData.developmentReport,
+      reasonDevelopment70: formData.otherAction,
+      reasonDevelopment20: formData.otherPerson,
+      reasonDevelopment10: formData.otherTraining,
+      isDevelopment70: isDevelopment70.value,
+      isDevelopment20: isDevelopment20.value,
+      isDevelopment10: isDevelopment10.value,
+      developmentProjects: formData.development,
+    };
+    http
+      .post(config.API.developmentRequest, body)
+      .then(async (res) => {
+        await createURLUpload(res.data.result, formData.document);
+      })
+      .catch((e) => {
+        messageError($q, e);
+        hideLoader();
+      })
+      .finally(() => {});
+  });
+}
+
+/**
+ * function สร้าง URL อัปโหลไฟล์เอกสารหลักฐาน
+ */
+async function createURLUpload(id: string, file: any) {
+  const fileName = { fileName: file.name };
+  await http
+    .post(
+      config.API.file("IDP", "ยื่นคำร้องขอเพิ่มข้อมูลการพัฒนารายบุคคล", id),
+      {
+        replace: false,
+        fileList: fileName,
+      }
+    )
+    .then(async (res) => {
+      const foundKey: string | undefined = Object.keys(res.data).find(
+        (key) =>
+          res.data[key]?.fileName !== undefined &&
+          res.data[key]?.fileName !== ""
+      );
+      foundKey &&
+        (await uploadFileDoc(res.data[foundKey]?.uploadUrl, formData.document));
+    })
+    .catch((err) => {
+      messageError($q, err);
+      hideLoader();
+    });
+}
+
+/**
+ * function สำหรับอัพโหลดไฟล์เอกสารหลักฐาน
+ */
+async function uploadFileDoc(uploadUrl: string, file: any) {
+  await axios
+    .put(uploadUrl, file, {
+      headers: {
+        "Content-Type": file.type,
+      },
+    })
+    .then(async (res) => {
+      success($q, `บันทึกข้อมูลสำเร็จ`);
+      router.push("/idp");
+      hideLoader();
+    })
+    .catch((e) => {
+      messageError($q, e);
+      hideLoader();
+    })
+    .finally(() => {});
+}
+
+function getDetail() {
+  showLoader();
+  http
+    .get(config.API.developmentRequest + `/user/${idRow.value}`)
+    .then((res) => {
+      const data = res.data.result;
+      formData.topic = data.name;
+      formData.developmentTarget = data.developmentTarget;
+      formData.developmentResults = data.developmentResults;
+      formData.developmentReport = data.developmentReport;
+      formData.otherAction = data.reasonDevelopment70;
+      formData.otherPerson = data.reasonDevelopment20;
+      formData.otherTraining = data.reasonDevelopment10;
+      formData.development = data.developmentProjects;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+onMounted(() => {
+  if (route.name == "idpRegistryDetail") {
+    isEdit.value = true;
+    idRow.value = route.params.id as string;
+    getDetail();
+  } else {
+    isEdit.value = false;
+    idRow.value = "";
+  }
+});
+</script>
+<template>
+  <div class="row justify-center">
+    <div class="col-xs-12 col-sm-12 col-md-11">
+      <div class="toptitle text-white col-12 row items-center">
+        <q-btn
+          icon="mdi-arrow-left"
+          unelevated
+          round
+          dense
+          flat
+          color="primary"
+          class="q-mr-sm"
+          @click="router.go(-1)"
+        />
+        {{
+          isEdit
+            ? "รายละเอียดยื่นคำร้องขอเพิ่มข้อมูลการพัฒนารายบุคคล"
+            : "ยื่นคำร้องขอเพิ่มข้อมูลการพัฒนารายบุคคล"
+        }}
+      </div>
+      <q-card bordered>
+        <q-form greedy @submit.prevent @validation-success="onSubmit">
+          <q-card-section>
+            <div class="row q-col-gutter-sm">
+              <div class="col-12">
+                <div class="row q-col-gutter-sm">
+                  <div class="col-12">
+                    <q-input
+                      :class="classInput(isReadOnly)"
+                      outlined
+                      v-model="formData.topic"
+                      label="ชื่อเรื่อง/เนื้อเรื่อง/หัวข้อการพัฒนา"
+                      dense
+                      :readonly="isEdit"
+                      hide-bottom-space
+                      :rules="[(val:any) => !!val || `${'กรุณากรอกชื่อเรื่อง/เนื้อเรื่อง/หัวข้อการพัฒนา'}`]"
+                    />
+                  </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-12 col-sm-6 col-lg-4">
+                        <q-label class="q-mb-sm text-weight-medium text-body2"
+                          >70 การลงมือปฏิบัติ
+                          (โดยผู้บังคับบัญชามอบหมาย)</q-label
+                        >
+                        <q-option-group
+                          class="check_box q-mt-sm"
+                          keep-color
+                          color="primary"
+                          dense
+                          v-model="formData.development"
+                          :options="itemsDevelopmentAction"
+                          type="checkbox"
+                          :disable="isEdit"
+                        />
+
+                        <div
+                          class="row q-pb-md"
+                          v-if="formData.development.includes('other1')"
+                        >
+                          <div
+                            class="offset-4 offset-md-3 col-8 q-mt-sm relative-position"
+                          >
+                            <div class="other_custom_input">
+                              <q-input
+                                v-model="formData.otherAction"
+                                dense
+                                :readonly="isEdit"
+                                outlined
+                                class="inputgreen"
+                                label="กรุณาระบุ"
+                              ></q-input>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+
+                      <!-- 20 การเรียนรู้จากผู้อื่น (Coach/Mentor/Consulting) -->
+                      <div class="col-12 col-sm-6 col-lg-4">
+                        <q-label class="q-mb-sm text-weight-medium text-body2"
+                          >20 การเรียนรู้จากผู้อื่น
+                          (Coach/Mentor/Consulting)</q-label
+                        >
+                        <q-option-group
+                          class="check_box q-mt-sm"
+                          keep-color
+                          color="primary"
+                          dense
+                          :disable="isEdit"
+                          v-model="formData.development"
+                          :options="itemsDevelopmentPerson"
+                          type="checkbox"
+                        />
+                        <div
+                          class="row q-pb-md"
+                          v-if="formData.development.includes('other2')"
+                        >
+                          <div
+                            class="offset-4 offset-md-3 col-8 q-mt-sm relative-position"
+                          >
+                            <div class="other_custom_input">
+                              <q-input
+                                v-model="formData.otherPerson"
+                                dense
+                                :readonly="isEdit"
+                                outlined
+                                label="กรุณาระบุ"
+                              ></q-input>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+
+                      <!-- 10 การฝึกอบรมอื่นๆ -->
+                      <div class="col-12 col-sm-6 col-lg-4">
+                        <q-label class="q-mb-sm text-weight-medium text-body2"
+                          >10 การฝึกอบรมอื่นๆ</q-label
+                        >
+                        <q-option-group
+                          class="check_box q-mt-sm"
+                          keep-color
+                          color="primary"
+                          dense
+                          :disable="isEdit"
+                          v-model="formData.development"
+                          :options="itemsDevelopmentTraining"
+                          type="checkbox"
+                        />
+                        <div
+                          class="row q-pb-md"
+                          v-if="formData.development.includes('other3')"
+                        >
+                          <div
+                            class="offset-4 offset-md-3 col-8 q-mt-sm relative-position"
+                          >
+                            <div class="other_custom_input">
+                              <q-input
+                                v-model="formData.otherTraining"
+                                dense
+                                :readonly="isEdit"
+                                outlined
+                                label="กรุณาระบุ"
+                              ></q-input>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+
+                  <!-- เป้าหมายการนำไปพัฒนางาน -->
+                  <div class="col-12">
+                    <q-input
+                      outlined
+                      :readonly="isEdit"
+                      v-model="formData.developmentTarget"
+                      label="เป้าหมายการนำไปพัฒนางาน"
+                      dense
+                      type="textarea"
+                      class="inputgreen"
+                    />
+                  </div>
+
+                  <!-- วิธีการวัดผลการพัฒนา -->
+                  <div class="col-12">
+                    <q-input
+                      outlined
+                      :readonly="isEdit"
+                      v-model="formData.developmentResults"
+                      label="วิธีการวัดผลการพัฒนา"
+                      dense
+                      type="textarea"
+                      class="inputgreen"
+                    />
+                  </div>
+
+                  <!-- รายงานผลการพัฒนา -->
+                  <div class="col-12">
+                    <q-input
+                      :readonly="isEdit"
+                      outlined
+                      v-model="formData.developmentReport"
+                      label="รายงานผลการพัฒนา"
+                      dense
+                      type="textarea"
+                      class="inputgreen"
+                    />
+                  </div>
+                  <div class="col-12">
+                    <q-file
+                      v-if="!isEdit"
+                      :class="classInput(isReadOnly)"
+                      v-model="formData.document"
+                      label="อัปโหลดเอกสารหลักฐาน"
+                      flat
+                      dense
+                      :readonly="isEdit"
+                      outlined
+                      hide-bottom-space
+                      :rules="[(val:any) => !!val || `${'กรุณาเลือกไฟล์'}`]"
+                    />
+                    <q-btn
+                      v-else
+                      color="primary"
+                      flat
+                      dense
+                      rounded
+                      icon="mdi-download"
+                      label="ดาวน์โหลดเอกสารหลักฐาน"
+                      @click="onDownloadFile?.(idRow)"
+                    >
+                      <q-tooltip>ดาวน์โหลดเอกสารหลักฐาน</q-tooltip>
+                    </q-btn>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </q-card-section>
+          <q-separator v-if="!isEdit" />
+          <q-card-actions align="right" v-if="!isEdit">
+            <q-btn label="บันทึก" color="secondary" type="submit"
+              ><q-tooltip>บันทึก</q-tooltip></q-btn
+            >
+          </q-card-actions>
+        </q-form>
+      </q-card>
+    </div>
+  </div>
+</template>