Merge branch 'develop' into devTee

2024-10-02 12:57:24 +07:00 · 2024-10-02 12:57:24 +07:00 · 6d5794f124
commit 6d5794f124
parent 282815cf33 aadf15bcde
20 changed files with 893 additions and 437 deletions
--- a/src/api/02_organizational/api.organization.ts
+++ b/src/api/02_organizational/api.organization.ts
@ -122,6 +122,11 @@ export default {
   */
  requestEdit: `${orgProfile}/edit/`,

+  /**
+   * ข้อมูลการพัฒนารายบุคคล IDP
+   */
+  requestDevelopmentEdit: `${orgProfile}/development-request/`,
+
  /**
   * รายการเมนู
   */
--- a/src/components/LoadView.vue
+++ b/src/components/LoadView.vue
@ -0,0 +1,18 @@
+<template>
+  <div class="full-width row flex-center text-accent q-gutter-sm">
+    <span
+      ><div
+        style="
+          height: 50vh;
+          display: flex;
+          flex-direction: column;
+          justify-content: center;
+          align-items: center;
+        "
+        class="text-grey-5"
+      >
+        <q-spinner color="primary" size="3em" :thickness="10" />
+      </div>
+    </span>
+  </div>
+</template>
--- a/src/components/LoginLinkage.vue
+++ b/src/components/LoginLinkage.vue
@ -0,0 +1,187 @@
+<script setup lang="ts">
+import { ref } from "vue";
+
+import DialogHeader from "./DialogHeader.vue";
+
+const modal = defineModel<boolean>("modal", { required: true });
+
+const step = ref<number>(1);
+const devices = ref<string>("");
+const devicesData = ref<string[]>([
+  "Generic",
+  "EMV",
+  "Smartcard",
+  "Reader",
+  "0",
+]);
+const devicesOp = ref<string[]>([]);
+
+/** 1.เสียบบัตรประชาชนเข้ากับเครื่องอ่าน*/
+function fetchDeviceLists() {
+  step.value++;
+}
+
+/** 2.เลือกเครื่องอ่านบัตร*/
+function readDevice() {
+  step.value++;
+}
+
+function verifyPin() {
+  step.value++;
+}
+
+/**
+ * function ต้นหาข้อมูลของ Option
+ * @param val ค่าที่ต้องการฟิลเตอร์
+ * @param update  อัพเดทค่า
+ */
+function filterOption(val: string, update: Function) {
+  update(() => {
+    const newVal = val.toLocaleUpperCase();
+    devicesOp.value = devicesData.value.filter(
+      (v: string) => v.toLocaleUpperCase().indexOf(newVal) > -1
+    );
+  });
+}
+
+function onClose() {
+  modal.value = false;
+  step.value = 1;
+  devices.value = "";
+}
+</script>
+
+<template>
+  <q-dialog v-model="modal" persistent>
+    <q-card style="width: 700px; max-width: 80vw">
+      <DialogHeader :tittle="'เข้าสู่ระบบ Linkage Center'" :close="onClose" />
+      <q-separator />
+      <q-card-section>
+        <q-card flat bordered>
+          <q-card-section>
+            <div class="row">
+              <div class="text-red">
+                *ต้องใช้บน Windows และต้องติดตั้ง Agent
+                <a
+                  href="https://linkagemgmt.bora.dopa.go.th/app/LinkageManagement-v1.11.0.zip"
+                  >ลิงก์ดาวน์โหลด Agent</a
+                >
+              </div>
+            </div>
+
+            <q-timeline color="primary">
+              <!-- เสียบบัตรประชาชนเข้ากับเครื่องอ่าน -->
+              <q-timeline-entry
+                title="เสียบบัตรประชาชนเข้ากับเครื่องอ่าน"
+                style="font-size: 12px"
+                :icon="
+                  step === 1
+                    ? 'mdi-pencil'
+                    : step > 1
+                    ? 'done'
+                    : 'mdi-numeric-1'
+                "
+              >
+                <div class="row" v-if="step === 1">
+                  <q-btn
+                    color="primary"
+                    label="ดำเนินการต่อ"
+                    @click="fetchDeviceLists"
+                  />
+                </div>
+              </q-timeline-entry>
+
+              <!-- เลือกเครื่องอ่านบัตร -->
+              <q-timeline-entry
+                title="เลือกเครื่องอ่านบัตร"
+                :icon="
+                  step === 2
+                    ? 'mdi-pencil'
+                    : step > 2
+                    ? 'done'
+                    : 'mdi-numeric-2'
+                "
+                :color="step < 2 ? 'grey-4' : ''"
+              >
+                <div class="row" v-if="step === 2">
+                  <q-form
+                    greedy
+                    @submit.prevent
+                    @validation-success="readDevice"
+                  >
+                    <div class="q-col-gutter-sm">
+                      <div>
+                        <q-select
+                          dense
+                          v-model="devices"
+                          label="เลือกเครื่องอ่านบัตร"
+                          outlined
+                          emit-value
+                          map-options
+                          fill-input
+                          hide-selected
+                          lazy-rules
+                          hide-bottom-space
+                          option-label="name"
+                          option-value="id"
+                          class="inputgreen"
+                          :options="devicesOp"
+                          use-input
+                          :rules="[(val:string) => !!val || `${'กรุณาเลือกเลือกเครื่องอ่านบัตร'}`,]"
+                          @filter="(inputValue:string,doneFn:Function) => filterOption(inputValue, doneFn) "
+                        >
+                          <template v-slot:no-option>
+                            <q-item>
+                              <q-item-section class="text-grey">
+                                ไม่มีข้อมูล
+                              </q-item-section>
+                            </q-item>
+                          </template>
+                        </q-select>
+                      </div>
+
+                      <div>
+                        <q-btn
+                          color="primary"
+                          label="ดำเนินการต่อ"
+                          type="submit"
+                        />
+                      </div></div
+                  ></q-form>
+                </div>
+              </q-timeline-entry>
+
+              <!-- เชื่อมต่อและใส่ PIN -->
+              <q-timeline-entry
+                title="เชื่อมต่อและใส่ PIN"
+                :icon="
+                  step === 3
+                    ? 'mdi-pencil'
+                    : step > 3
+                    ? 'done'
+                    : 'mdi-numeric-3'
+                "
+                :color="step < 3 ? 'grey-4' : ''"
+              >
+                <div class="row" v-if="step === 3">
+                  <q-btn
+                    color="primary"
+                    label="ดำเนินการต่อ"
+                    @click="verifyPin"
+                  />
+                </div>
+              </q-timeline-entry>
+            </q-timeline>
+          </q-card-section>
+        </q-card>
+      </q-card-section>
+    </q-card>
+  </q-dialog>
+</template>
+
+<style scoped>
+:deep(.q-timeline__title) {
+  font-size: 15px; /* ปรับขนาดฟอนต์ตามที่ต้องการ */
+  font-weight: normal; /* หรือปรับน้ำหนักฟอนต์ */
+}
+</style>
--- a/src/modules/02_organization/components/TreeView.vue
+++ b/src/modules/02_organization/components/TreeView.vue
@ -19,6 +19,7 @@ import type { FilterMaster } from "@/modules/02_organization/interface/request/o
 /** importComponents*/
 import TreeMain from "@/modules/02_organization/components/TreeMain.vue";
 import TreeTable from "@/modules/02_organization/components/TreeTable.vue";
+import LoadView from "@/components/LoadView.vue";

 /** use*/
 const store = useOrganizational();
@ -278,15 +279,7 @@ onMounted(async () => {

      <div class="col-xs-12 col-sm-9 q-pa-md row">
        <div class="col-12 row">
-          <div
-            class="row col-12 justify-center"
-            v-if="isLoad"
-            style="height: 550px"
-          >
-            <div class="col-2">
-              <q-spinner color="primary" size="3em" />
-            </div>
-          </div>
+          <LoadView v-if="isLoad" />

          <div v-else class="col-12 row">
            <div class="col-12" v-if="nodeId !== ''">
--- a/src/modules/04_registryPerson/components/detail/Achievement/05_ResultsPerformance.vue
+++ b/src/modules/04_registryPerson/components/detail/Achievement/05_ResultsPerformance.vue
@ -418,7 +418,7 @@ async function getDevelop() {

 /**
 * บันทึกข้อมูลผลการประเมินการปฏิบัติราชการ
- * @param editStatus แก่ไข,เพิ่ม
+ * @param editStatus แก้ไข,เพิ่ม
 */
 async function addEditData(editStatus: boolean = false) {
  if (!profileId.value) return;
@ -706,7 +706,9 @@ onMounted(async () => {
                      icon="mdi-history"
                      @click="clickHistory(props.row)"
                    >
-                      <q-tooltip>ประวัติแก้ไขเครื่องราชอิสริยาภรณ์</q-tooltip>
+                      <q-tooltip
+                        >ประวัติแก้ไขผลการประเมินการปฏิบัติราชการ</q-tooltip
+                      >
                    </q-btn>
                    <q-btn
                      v-if="checkPermission($route)?.attrIsUpdate"
@ -716,7 +718,7 @@ onMounted(async () => {
                      icon="edit"
                      @click.stop.prevent="onClickOpenDialog(true, props.row)"
                    >
-                      <q-tooltip>แก่ไขข้อมุล</q-tooltip>
+                      <q-tooltip>แก้ไขข้อมุล</q-tooltip>
                    </q-btn>
                  </q-card-actions>
                  <q-separator />
--- a/src/modules/04_registryPerson/components/requestEdit/01_TabInformation.vue
+++ b/src/modules/04_registryPerson/components/requestEdit/01_TabInformation.vue
@ -2,15 +2,12 @@
 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";
+import config from "@/app.config";
+import http from "@/plugins/http";

-/**
- * importType
- */
+/** importType*/
 import type { QTableProps } from "quasar";
 import type {
  DataOption,
@ -18,22 +15,14 @@ import type {
 } from "@/modules/04_registryPerson/interface/index/Main";
 import type { DateRequest } from "@/modules/04_registryPerson/interface/response/Main";

-/**
- * importComponents
- */
+/** 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
- */
+//Table
 const rows = ref<DateRequest[]>([]); //รายการข้อมูลคำร้องขอแก้ไขทะเบียนประวัติ
 const page = ref<number>(1); //หน้า
 const pageSize = ref<number>(10); //จำนวนต่อหน้า
@ -119,18 +108,14 @@ const visibleColumns = ref<string[]>([
  "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 fetch รายการคำร้องขอแก้ไขทะเบียนประวัติ*/
 function fetchListRequset() {
  showLoader();
  http
@ -156,18 +141,14 @@ function fetchListRequset() {
    });
 }

-/**
- * function เลือกสถานะคำร้อง
- */
+/** function เลือกสถานะคำร้อง*/
 function updateStatusValue() {
  page.value = 1;
  // fetch รายการคำร้องขอแก้ไขทะเบียนประวัติ
  fetchListRequset();
 }

-/**
- * function เคลียร์ สถานะคำร้อง
- */
+/** function เคลียร์ สถานะคำร้อง*/
 function clearStatus() {
  status.value = "";
  statusOption.value = store.optionStatus;
@ -260,7 +241,6 @@ async function downloadUrl(id: string, fileName: string) {

 /**
 * ดูการเปลี่ยนแปลงของ pageSize
- *
 * เมื่อมีการเปลี่ยนแปลงจำทำการ ดึงช้อมูลรายการคำร้องขอแก้ไขทะเบียนประวัติตามจำนวน pageSize
 */
 watch(
--- a/src/modules/04_registryPerson/components/requestEdit/02_TabIDP.vue
+++ b/src/modules/04_registryPerson/components/requestEdit/02_TabIDP.vue
@ -1,18 +1,22 @@
 <script setup lang="ts">
 import { ref, onMounted, watch } from "vue";
+import { useQuasar } from "quasar";

 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 { QTableProps } from "quasar";
-
 import type {
  DataOption,
  Pagination,
 } from "@/modules/04_registryPerson/interface/index/Main";
+import type { DataListsIDP } from "@/modules/04_registryPerson/interface/response/Main";

 import DialogEditIDP from "@/modules/04_registryPerson/components/requestEdit/Dialog02_EditIDP.vue";

+const $q = useQuasar();
 const store = useRequestEditStore();
 const { showLoader, hideLoader, messageError, date2Thai } = useCounterMixin();
 /**
@ -20,14 +24,14 @@ const { showLoader, hideLoader, messageError, date2Thai } = useCounterMixin();
 */
 const status = ref<string>("PENDING"); //ค้นหาตามสถานะ
 const keyword = ref<string>(""); //คำค้นหา
-const statusOption = ref<DataOption[]>(store.optionStatus); //รายการสถานะ
+const statusOption = ref<DataOption[]>(store.optionStatusIDP); //รายการสถานะ
 const modalEdit = ref<boolean>(false); //แก้ไขสถานะคำร้อง
 const requestId = ref<string>(""); //id รายการแก้ไข

 /**
 * Table
 */
-const rows = ref<any[]>([]); //รายการข้อมูลการพัฒนารายบุคคล
+const rows = ref<DataListsIDP[]>([]); //รายการข้อมูลการพัฒนารายบุคคล
 const page = ref<number>(1); //หน้า
 const pageSize = ref<number>(10); //จำนวนต่อหน้า
 const rowsTotal = ref<number>(0); //จำนวนรายการ
@ -44,11 +48,11 @@ const columns = ref<QTableProps["columns"]>([
    style: "font-size: 14px",
  },
  {
-    name: "knowledgeSkills",
+    name: "name",
    align: "left",
    label: "ความรู้ / ทักษะ / สมรรถนะที่ต้องได้รับการพัฒนา",
    sortable: true,
-    field: "knowledgeSkills",
+    field: "name",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
@ -103,16 +107,16 @@ const columns = ref<QTableProps["columns"]>([
    label: "สถานะคำร้อง",
    sortable: true,
    field: "status",
-    format: (v) => store.convertStatus(v),
+    format: (v) => store.convertStatusIDP(v),
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
  {
-    name: "remark",
+    name: "reason",
    align: "left",
    label: "หมายเหตุ",
    sortable: true,
-    field: "remark",
+    field: "reason",
    format: (v) => (v ? v : "-"),
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
@ -120,47 +124,53 @@ const columns = ref<QTableProps["columns"]>([
 ]);
 const visibleColumns = ref<string[]>([
  "createdAt",
-  "knowledgeSkills",
+  "name",
  "developmentProjects",
  "developmentTarget",
  "developmentResults",
  "developmentReport",
  "document",
  "status",
-  "remark",
+  "reason",
 ]);

-function fetchData() {
-  const data = [
-    {
-      id: "1",
-      createdAt: "2024-09-17T08:21:21.600Z",
-      status: "PENDING",
-      knowledgeSkills: "ความรู้",
-      developmentProjects: "การพัฒนา",
-      developmentTarget: "เป้าหมาย",
-      developmentResults: "ผล",
-      developmentReport: "รายงาน",
-    },
-  ];
-  rows.value = data;
+/** function fetch ข้อมูลรายการการพัฒนารายบุคคล*/
+async function fetchData() {
+  showLoader();
+  await http
+    .get(config.API.requestDevelopmentEdit + `admin`, {
+      params: {
+        page: page.value,
+        pageSize: pageSize.value,
+        status: status.value ? status.value : "",
+        keyword: keyword.value,
+      },
+    })
+    .then(async (res) => {
+      const data = await 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 เลือกสถานะคำร้อง */
 function updateStatusValue() {
  page.value = 1;
  // fetch รายการคำร้องขอแก้ไขทะเบียนประวัติ
-  //   function  fetchData() {
+  fetchData();
 }

-/**
- * function เคลียร์ สถานะคำร้อง
- */
+/** function เคลียร์ สถานะคำร้อง */
 function clearStatus() {
  status.value = "";
-  statusOption.value = store.optionStatus;
+  statusOption.value = store.optionStatusIDP;
 }

 /**
@ -171,7 +181,7 @@ function clearStatus() {
 function filterOption(val: string, update: Function) {
  update(() => {
    status.value = val ? "" : status.value;
-    statusOption.value = store.optionStatus.filter(
+    statusOption.value = store.optionStatusIDP.filter(
      (v: DataOption) => v.name.indexOf(val) > -1
    );
  });
@ -195,6 +205,70 @@ function onclickEdit(id: string) {
  requestId.value = id;
 }

+/**
+ * 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,
+  () => {
+    fetchData();
+  }
+);
+
 onMounted(() => {
  fetchData();
 });
@ -291,12 +365,38 @@ onMounted(() => {
              </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">
+              <div v-if="col.name == 'developmentProjects'">
+                <div class="column">
+                  <q-checkbox
+                    size="xs"
+                    :model-value="props.row.isDevelopment70"
+                    label="70 การลงมือปฏิบัติ (โดยผู้บังคับบัญชามอบหมาย)"
+                  />
+                  <q-checkbox
+                    size="xs"
+                    :model-value="props.row.isDevelopment20"
+                    label="20 การเรียนรู้จากผู้อื่น (Coach/Mentor/Consulting)"
+                  />
+                  <q-checkbox
+                    size="xs"
+                    :model-value="props.row.isDevelopment10"
+                    label="10 การฝึกอบรมอื่นๆ"
+                  />
+                </div>
+              </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">
+              <div v-else>
                {{ col.value ? col.value : "-" }}
              </div>
            </q-td>
@ -320,7 +420,11 @@ onMounted(() => {
    </div>
  </q-card>

-  <DialogEditIDP v-model:modal="modalEdit" v-model:request-id="requestId" />
+  <DialogEditIDP
+    v-model:modal="modalEdit"
+    v-model:request-id="requestId"
+    :fetch-data-list="fetchData"
+  />
 </template>

 <style scoped></style>
--- a/src/modules/04_registryPerson/components/requestEdit/Dialog01_EditStatus.vue
+++ b/src/modules/04_registryPerson/components/requestEdit/Dialog01_EditStatus.vue
@ -9,22 +9,14 @@ import { useCounterMixin } from "@/stores/mixin";

 import type { DataOption } from "@/modules/04_registryPerson/interface/index/Main";

-/**
- * importComponents
- */
 import DialogHeader from "@/components/DialogHeader.vue";

-/**
- * use
- */
 const $q = useQuasar();
 const store = useRequestEditStore();
 const { dialogConfirm, showLoader, hideLoader, messageError, success } =
  useCounterMixin();

-/**
- *  props
- */
+/** props*/
 const modal = defineModel<boolean>("modal", { required: true }); //เปิด,ปิด popup แก้ไขสถานะคำร้อง
 const requestId = defineModel<string>("requestId", { required: true }); // id ที่ต้องการแก้ไข
 const props = defineProps({
@ -42,9 +34,7 @@ const statusOptionMain = ref<DataOption[]>(
 );
 const statusOption = ref<DataOption[]>(statusOptionMain.value); //ตัวเลือกรายการสถานะ

-/**
- * function บันทึกรายการคำร้อง
- */
+/** function บันทึกรายการคำร้อง*/
 function onSubmit() {
  dialogConfirm($q, async () => {
    showLoader();
@ -67,9 +57,7 @@ function onSubmit() {
  });
 }

-/**
- * function ปิด popup
- */
+/** function ปิด popup*/
 function closeDialog() {
  modal.value = false;
  formData.status = "";
@ -89,9 +77,7 @@ function filterOption(val: string, update: Function) {
  });
 }

-/**
- * function fetch ข้อมูลคำร้องแก้ไข
- */
+/** function fetch ข้อมูลคำร้องแก้ไข*/
 function fetchDataRequest() {
  showLoader();
  http
@ -127,7 +113,6 @@ function classInput(val: boolean) {

 /**
 * ดูการเปลี่ยนแปลงของ modal
- *
 * เมื่อ modal เป็น true ทำการดึงข้อมูลคำร้องแก้ไข
 */
 watch(
--- a/src/modules/04_registryPerson/components/requestEdit/Dialog02_EditIDP.vue
+++ b/src/modules/04_registryPerson/components/requestEdit/Dialog02_EditIDP.vue
@ -1,9 +1,11 @@
 <script setup lang="ts">
-import { reactive, ref } from "vue";
+import { reactive, ref, watch } from "vue";
 import { useQuasar } from "quasar";

 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,
@ -20,24 +22,28 @@ const { dialogConfirm, showLoader, hideLoader, messageError, success } =

 const modal = defineModel<boolean>("modal", { required: true }); //เปิด,ปิด popup แก้ไขสถานะคำร้อง
 const requestId = defineModel<string>("requestId", { required: true }); // id ที่ต้องการแก้ไข
+const { fetchDataList } = defineProps({
+  fetchDataList: { type: Function, require: true },
+});

-const isReadOnly = ref<boolean>(false);
+const isReadOnly = ref<boolean>(false); //อ่านอย่างเดียว

+//ฟอร์มข้อมูลการพัฒนารายบุคคล
 const formData = reactive<FormDataIDP>({
-  topic: "",
-  development: [],
-  otherAction: "",
-  otherPerson: "",
-  otherTraining: "",
-  developmentTarget: "",
-  developmentResults: "",
-  developmentReport: "",
-  status: "",
-  remark: "",
+  topic: "", //ชื่อเรื่อง/เนื้อเรื่อง/หัวข้อการพัฒนา
+  developmentProjects: [], //วิธีการพัฒนา
+  reasonDevelopment70: "", //อื่นๆ 70 การลงมือปฏิบัติ
+  reasonDevelopment20: "", //อื่นๆ 20 การเรียนรู้จากผู้อื่น
+  reasonDevelopment10: "", //อื่นๆ 10 การฝึกอบรมอื่นๆ
+  developmentTarget: "", //เป้าหมายการนำไปพัฒนางาน
+  developmentResults: "", //วิธีการวัดผลการพัฒนา
+  developmentReport: "", //รายงานผลการพัฒนา
+  status: "", //สถานะ
+  reason: "", //หมายเหตุ
 });

 //70 การลงมือปฏิบัติ (โดยผู้บังคับบัญชามอบหมาย)
-const itemsDevelopmentAction = ref<DataItemsDevelopment[]>([
+const itemsDevelopment70 = ref<DataItemsDevelopment[]>([
  {
    value: "on_the_job_training",
    label: "การฝึกปฏิบัติในงาน (On the job training)",
@ -88,7 +94,7 @@ const itemsDevelopmentAction = ref<DataItemsDevelopment[]>([
  },
 ]);
 //20 การเรียนรู้จากผู้อื่น (Coach/Mentor/Consulting)
-const itemsDevelopmentPerson = ref<DataItemsDevelopment[]>([
+const itemsDevelopment20 = ref<DataItemsDevelopment[]>([
  { value: "coaching", label: "การสอนงาน (Coaching)" },
  { value: "mentoring", label: "การเป็นพี่เลี้ยง (Mentoring)" },
  { value: "team_meeting", label: "การประชุมทีม (Team meeting)" },
@ -97,7 +103,7 @@ const itemsDevelopmentPerson = ref<DataItemsDevelopment[]>([
  { value: "other2", label: "อื่น ๆ (ระบุ)" },
 ]);
 //10 การฝึกอบรมอื่นๆ
-const itemsDevelopmentTraining = ref<DataItemsDevelopment[]>([
+const itemsDevelopment10 = ref<DataItemsDevelopment[]>([
  {
    value: "self_learning",
    label: "การเรียนรู้ด้วยตนเอง แบบ online/offline (Self – learning)",
@ -121,10 +127,39 @@ const itemsDevelopmentTraining = ref<DataItemsDevelopment[]>([
 ]);
 //ข้อมูลรายการสถานะ
 const statusOptionMain = ref<DataOption[]>(
-  store.optionStatus.filter((e: DataOption) => e.id !== "")
+  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;
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
 /**
 * function ค้นหาคำใน select  สถานะคำร้อง
 * @param val คำค้น
@ -139,25 +174,45 @@ function filterOption(val: string, update: Function) {
  });
 }

+/** function บันทึกข้อมูลการพัฒนารายบุคคล */
 function onSubmit() {
-  dialogConfirm($q, () => {});
+  dialogConfirm($q, async () => {
+    showLoader();
+    await http
+      .patch(config.API.requestDevelopmentEdit + `admin/${requestId.value}`, {
+        status: formData.status,
+        reason: formData.reason,
+      })
+      .then(async () => {
+        await fetchDataList?.();
+        success($q, "บันทึกข้อมูลสำเร็จ");
+        closeDialog();
+      })
+      .catch((err) => {
+        messageError($q, err);
+      })
+      .finally(() => {
+        hideLoader();
+      });
+  });
 }

 /**
 * function ปิด popup
+ * และกำหนด formData เป็นค่า Defult
 */
 function closeDialog() {
  modal.value = false;
  formData.topic = "";
-  formData.development = [];
-  formData.otherAction = "";
-  formData.otherPerson = "";
-  formData.otherTraining = "";
+  formData.developmentProjects = [];
+  formData.reasonDevelopment70 = "";
+  formData.reasonDevelopment20 = "";
+  formData.reasonDevelopment10 = "";
  formData.developmentTarget = "";
  formData.developmentResults = "";
  formData.developmentReport = "";
  formData.status = "";
-  formData.remark = "";
+  formData.reason = "";
 }

 /**
@ -170,234 +225,249 @@ function classInput(val: boolean) {
    "full-width cursor-pointer inputgreen": !val,
  };
 }
+
+/**
+ * ดูการเปลี่ยนแปลงของ modal เมื่อ modal เป็น True
+ * fetch ข้อมูลการพัฒนารายบุคคลตาม ID ที่ค้องการ
+ */
+watch(modal, (val) => {
+  if (val) {
+    fetchDataByid(requestId.value);
+  }
+});
 </script>

 <template>
  <q-dialog v-model="modal" persistent>
-    <q-card style="min-width: 90%">
+    <q-card style="min-width: 65%">
      <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,
+        <!-- สถานะคำร้อง -->
+        <q-card-section>
+          <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-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>
+                >
+                  <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 class="col-8">
+                <q-input
+                  :class="classInput(isReadOnly)"
+                  v-model="formData.reason"
+                  label="หมายเหตุ"
+                  dense
+                  outlined
+                  type="textarea"
+                  hide-bottom-space
+                />
              </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
-                  />
+            <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-card-section class="q-pt-none">
+          <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="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
+                      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">
-                      <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>
+                  <!-- 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">
-                      <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>
+                  <!-- 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.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.developmentResults"
+                  label="วิธีการวัดผลการพัฒนา"
+                  dense
+                  type="textarea"
+                />
+              </div>

-                <!-- รายงานผลการพัฒนา -->
-                <div class="col-12">
-                  <q-input
-                    readonly
-                    outlined
-                    v-model="formData.developmentReport"
-                    label="รายงานผลการพัฒนา"
-                    dense
-                    type="textarea"
-                  />
-                </div>
+              <!-- รายงานผลการพัฒนา -->
+              <div class="col-12">
+                <q-input
+                  readonly
+                  outlined
+                  v-model="formData.developmentReport"
+                  label="รายงานผลการพัฒนา"
+                  dense
+                  type="textarea"
+                />
              </div>
            </div>
-          </div>
+          </q-card>
        </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>
--- a/src/modules/04_registryPerson/interface/request/Main.ts
+++ b/src/modules/04_registryPerson/interface/request/Main.ts
@ -68,15 +68,15 @@ interface FormChangeName {

 interface FormDataIDP {
  topic: string;
-  development: string[];
-  otherAction: string;
-  otherPerson: string;
-  otherTraining: string;
+  developmentProjects: string[];
+  reasonDevelopment70: string;
+  reasonDevelopment20: string;
+  reasonDevelopment10: string;
  developmentTarget: string;
  developmentResults: string;
  developmentReport: string;
  status: string;
-  remark: string;
+  reason: string;
 }

 export type {
--- a/src/modules/04_registryPerson/interface/response/Main.ts
+++ b/src/modules/04_registryPerson/interface/response/Main.ts
@ -152,6 +152,30 @@ interface DataLeaveType {
  refCommandDate: string;
 }

+interface DataListsIDP {
+  createdAt: string;
+  createdFullName: string;
+  createdUserId: string;
+  developmentReport: string;
+  developmentResults: string;
+  developmentTarget: string;
+  id: string;
+  isDevelopment10: boolean;
+  isDevelopment20: boolean;
+  isDevelopment70: boolean;
+  lastUpdateFullName: string;
+  lastUpdateUserId: string;
+  lastUpdatedAt: string;
+  name: string;
+  profileEmployeeId: string;
+  profileId: string;
+  reason: string;
+  reasonDevelopment10: string;
+  reasonDevelopment20: string;
+  reasonDevelopment70: string;
+  status: string;
+}
+
 export type {
  DataType,
  DataLevel,
@ -160,4 +184,5 @@ export type {
  DataProfile,
  DataLeave,
  DataLeaveType,
+  DataListsIDP,
 };
--- a/src/modules/04_registryPerson/stores/RequestEdit.ts
+++ b/src/modules/04_registryPerson/stores/RequestEdit.ts
@ -20,6 +20,13 @@ export const useRequestEditStore = defineStore("requestEditStore", () => {
    { id: "REJECT", name: "ไม่อนุมัตการแก้ไข" },
  ]);

+  const optionStatusIDP = ref<DataOption[]>([
+    { id: "", name: "ทั้งหมด" },
+    { id: "PENDING", name: "รอดำเนินการ" },
+    { id: "APPROVE", name: "อนุมัติ" },
+    { id: "REJECT", name: "ไม่อนุมัติ" },
+  ]);
+
  function convertStatus(val: string) {
    switch (val) {
      case "PENDING":
@ -32,5 +39,24 @@ export const useRequestEditStore = defineStore("requestEditStore", () => {
        return "-";
    }
  }
-  return { convertStatus, optionTopic, optionStatus };
+
+  function convertStatusIDP(val: string) {
+    switch (val) {
+      case "PENDING":
+        return "รอดำเนินการ";
+      case "APPROVE":
+        return "อนุมัติ";
+      case "REJECT":
+        return "ไม่อนุมัติ";
+      default:
+        return "-";
+    }
+  }
+  return {
+    convertStatus,
+    optionTopic,
+    optionStatus,
+    optionStatusIDP,
+    convertStatusIDP,
+  };
 });
--- a/src/modules/15_development/components/Record.vue
+++ b/src/modules/15_development/components/Record.vue
@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, onMounted } from "vue";
+import { ref, onMounted, computed } from "vue";
 import { useRoute } from "vue-router";
 import { useQuasar } from "quasar";

@ -8,26 +8,18 @@ import { useCounterMixin } from "@/stores/mixin";
 import type { QTableProps } from "quasar";
 import type { ResRecord } from "@/modules/15_development/interface/response/Main";

-/**
- * usec
- */
-const route = useRoute();
 const $q = useQuasar();
-const id = ref<string>(route.params.id.toString());
 const { date2Thai } = useCounterMixin();

-/**
- * prosp
- */
+//prosp
 const isProfile = defineModel<boolean>("isProfile", { required: true });
 const listPerson = defineModel<ResRecord[]>("listPerson", { required: true });

-/**
- * ข้อมุล Table
- */
+//ข้อมุล Table
 const keyword = ref<string>("");
 const rows = ref<ResRecord[]>([]);
-const columns = ref<QTableProps["columns"]>([
+// baseColumns
+const baseColumns = ref<QTableProps["columns"]>([
  {
    name: "isDone",
    align: "left",
@ -194,6 +186,17 @@ const columns = ref<QTableProps["columns"]>([
      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
  },
 ]);
+const columns = computed(() => {
+  if (!isProfile.value) {
+    if (baseColumns.value) {
+      return baseColumns.value.filter(
+        (column) => column.name !== "isDone" && column.name !== "isDoneIDP"
+      );
+    }
+  }
+  return baseColumns.value;
+});
+
 const visibleColumns = ref<string[]>([
  "isDone",
  "isDoneIDP",
@ -204,8 +207,8 @@ const visibleColumns = ref<string[]>([
  "posTypeName",
  "posLevelName",
  "posExecutive",
-  "startDate",
-  "endDate",
+  "dateStart",
+  "dateEnd",
  "trainingDays",
  "org",
  "commandNumber",
@ -231,9 +234,7 @@ function formBmaofficer(val: string) {
  }
 }

-/**
- *  function เรียกข้อมูลโครงการ
- */
+/** function เรียกข้อมูลโครงการ*/
 function fetchDataProject() {
  rows.value = listPerson.value.filter(
    (e: ResRecord) => e.isProfile === isProfile.value
--- a/src/modules/15_development/views/RecordPage.vue
+++ b/src/modules/15_development/views/RecordPage.vue
@ -13,9 +13,6 @@ import type { ResRecord } from "@/modules/15_development/interface/response/Main
 import Record from "@/modules/15_development/components/Record.vue";
 import DialogRecordPerson from "@/modules/15_development/components/DialogRecordPerson.vue";

-/**
- * use
- */
 const $q = useQuasar();
 const router = useRouter();
 const route = useRoute();
@ -23,9 +20,7 @@ const store = useDevelopmentDataStore();
 const { showLoader, hideLoader, messageError, dialogConfirm, success } =
  useCounterMixin();

-/**
- * ตัวแปร
- */
+//ตัวแปร
 const projectId = ref<string>(route.params.id.toLocaleString()); //id route
 const tab = ref<string>("IN"); //tab
 const title = ref<string>(""); // หัวข้อ
@ -54,9 +49,7 @@ async function fetchData(id: string) {
    });
 }

-/**
- *  function เรียกข้อมูลรายชื่อทั้งหมด
- */
+/** function เรียกข้อมูลรายชื่อทั้งหมด*/
 async function fetchDataProject() {
  isLoadPage.value = false;
  showLoader();
@ -103,9 +96,7 @@ function clickUpload(file: any) {
  );
 }

-/**
- *  function ส่งไปบันทึกที่ทะเบียนประวัติ
- */
+/** function ส่งไปบันทึกที่ทะเบียนประวัติ*/
 function sendRecordRegistry() {
  dialogConfirm(
    $q,
@ -127,33 +118,29 @@ function sendRecordRegistry() {
  );
 }

-/**
- *  function ส่งข้อมูลการพัฒนารายบุคคลไปบันทึกที่ทะเบียนประวัติ
- */
+/** function ส่งข้อมูลการพัฒนารายบุคคลไปบันทึกที่ทะเบียนประวัติ (IDP)*/
 function sendDevalopRegistry() {
  dialogConfirm(
    $q,
    () => {
-      // showLoader();
-      // http
-      //   .get(config.API.developmentMainTab("tab6/done", projectId.value))
-      //   .then(async () => {
-      //     await fetchDataProject();
-      //     await success($q, "ส่งข้อมูลสำเร็จ");
-      //   })
-      //   .catch((e) => {
-      //     messageError($q, e);
-      //     hideLoader();
-      //   });
+      showLoader();
+      http
+        .get(config.API.developmentMainTab("tab6/done-idp", projectId.value))
+        .then(async () => {
+          await fetchDataProject();
+          await success($q, "ส่งข้อมูลสำเร็จ");
+        })
+        .catch((e) => {
+          messageError($q, e);
+          hideLoader();
+        });
    },
    "ยืนยันการส่งข้อมูลการพัฒนารายบุคคลไปบันทึกที่ทะเบียนประวัติ",
    "ต้องการยืนยันการส่งข้อมูลการพัฒนารายบุคคลไปบันทึกที่ทะเบียนประวัติหรือไม่"
  );
 }

-/**
- * function  ดาวน์โหลดไฟล์ต้นแบบ
- */
+/** function  ดาวน์โหลดไฟล์ต้นแบบ*/
 function downloadFile() {
  const link = document.createElement("a");
  link.href = `${window.location.protocol}//${window.location.host}/default-บันทึกผล.xlsx`;
@ -232,6 +219,7 @@ onMounted(() => {
      </q-btn>

      <q-btn
+        v-if="listPerson.length > 0"
        size="md"
        icon="mdi-clipboard-account-outline"
        round
--- a/src/modules/16_positionEmployee/views/main.vue
+++ b/src/modules/16_positionEmployee/views/main.vue
@ -21,6 +21,7 @@ import type { FilterMaster } from "@/modules/16_positionEmployee/interface/reque
 /** importComponents*/
 import TreeMain from "@/modules/16_positionEmployee/components/TreeMain.vue";
 import TreeTable from "@/modules/16_positionEmployee/components/TreeTable.vue";
+import LoadView from "@/components/LoadView.vue";

 /** use*/
 const store = usePositionEmp();
@ -237,15 +238,7 @@ onMounted(() => {

            <div class="col-xs-12 col-sm-9 q-pa-md row">
              <div class="col-12 row">
-                <div
-                  class="row col-12 justify-center"
-                  v-if="isLoad"
-                  style="height: 550px"
-                >
-                  <div class="col-2">
-                    <q-spinner color="primary" size="3em" />
-                  </div>
-                </div>
+                <LoadView v-if="isLoad" />

                <div v-else class="col-12 row">
                  <div class="col-12" v-if="nodeId !== ''">
--- a/src/modules/17_acting/views/main.vue
+++ b/src/modules/17_acting/views/main.vue
@ -2,12 +2,11 @@
 import { ref, onMounted } from "vue";
 import { useQuasar } from "quasar";

-import http from "@/plugins/http";
-import config from "@/app.config";
-
 import { checkPermission } from "@/utils/permissions";
 import { useCounterMixin } from "@/stores/mixin";
 import { useStructureTree } from "@/stores/structureTree";
+import http from "@/plugins/http";
+import config from "@/app.config";

 /** importType*/
 import type { QTableProps } from "quasar";
@ -17,7 +16,7 @@ import type {
  ListPerson,
 } from "@/modules/17_acting/interface/response/Main";

-/** importStore*/
+import LoadView from "@/components/LoadView.vue";

 /** use*/
 const $q = useQuasar();
@ -59,14 +58,20 @@ async function fetchOrganizationActive() {
  }
 }

+const isLaod = ref<boolean>(false);
+
 /**
- * function เลือกตำแหน่งที่จะให่รักษาการ
+ * function เลือกตำแหน่งที่จะให้ษาการ
 * @param data ข้อมูลตำแหน่ง
 */
 async function updateSelected(data: PosMaster) {
  posmasterId.value = data.posmasterId;
+  isLaod.value = true;
  // เรียกใช้ function  fetch รายชื่อ ,fetch รายชื่อรักษาการ
-  await Promise.all([fetchPosMaster(), fetchListAct()]);
+  await Promise.all([fetchPosMaster(), fetchListAct()]).finally(() => {
+    isLaod.value = false;
+    console.log("test");
+  });
 }

 /** ตำแหน่ง*/
@ -143,9 +148,8 @@ const keyword = ref<string>("");
 /**
 * function fetch รายชื่อ
 */
-function fetchPosMaster() {
-  showLoader();
-  http
+async function fetchPosMaster() {
+  await http
    .post(config.API.orgPosAct + `/search`, {
      posmasterId: posmasterId.value,
      isAll: isAll.value,
@ -156,9 +160,6 @@ function fetchPosMaster() {
    })
    .catch((err) => {
      messageError($q, err);
-    })
-    .finally(() => {
-      hideLoader();
    });
 }

@ -198,9 +199,8 @@ const keywordAct = ref<string>("");
 /**
 *  function fetch รายชื่อรักษาการ
 */
-function fetchListAct() {
-  showLoader();
-  http
+async function fetchListAct() {
+  await http
    .get(config.API.orgPosAct + `/${posmasterId.value}`)
    .then((res) => {
      const data = res.data.result;
@ -208,9 +208,6 @@ function fetchListAct() {
    })
    .catch((err) => {
      messageError($q, err);
-    })
-    .finally(() => {
-      hideLoader();
    });
 }

@ -341,7 +338,8 @@ onMounted(() => {
        class="col-lg-9 col-md-8 col-xs-12 scroll"
        style="height: 80vh"
      >
-        <div class="column q-col-gutter-sm">
+        <LoadView v-if="isLaod" />
+        <div class="column q-col-gutter-sm" v-else>
          <div class="col">
            <q-card bordered style="height: 100%; border: 1px solid #d6dee1">
              <div class="col-12 text-weight-medium bg-grey-1 q-py-sm q-px-md">
--- a/src/modules/18_command/components/Main/DialogFormCommand.vue
+++ b/src/modules/18_command/components/Main/DialogFormCommand.vue
@ -3,6 +3,8 @@ import { ref, watch } from "vue";
 import { useQuasar } from "quasar";

 import { useRouter } from "vue-router";
+import { useCounterMixin } from "@/stores/mixin";
+import { useCommandListStore } from "@/modules/18_command/store/ListStore";
 import http from "@/plugins/http";
 import config from "@/app.config";

@ -11,41 +13,34 @@ import type { DataCommandType } from "@/modules/18_command/interface/response/Ma

 import DialogHeader from "@/components/DialogHeader.vue";

-import { useCounterMixin } from "@/stores/mixin";
-
 const $q = useQuasar();
 const router = useRouter();
+const store = useCommandListStore();
 const { dialogConfirm, showLoader, hideLoader, messageError, success } =
  useCounterMixin();

-const modal = defineModel<boolean>("modal", { required: true });
-const isCopy = defineModel<boolean>("isCopy", { required: true });
-const commandId = defineModel<string>("commandId", { default: "" });
+/** props*/
+const modal = defineModel<boolean>("modal", { required: true }); //เปิด,ปิด Popup
+const isCopy = defineModel<boolean>("isCopy", { required: true }); //สถานะทำสำเนา
+const commandId = defineModel<string>("commandId", { default: "" }); // id ประเภทคำสั่งที่คำสำเนา

-const commandType = ref<string>("");
-const commandNo = ref<string>("");
-const commandYear = ref<number>(new Date().getFullYear());
+const commandType = ref<string>(""); //ประเภทคำสั่ง
+const commandNo = ref<string>(""); //คำสั่งเลขที่
+const commandYear = ref<number>(new Date().getFullYear()); //ปี

-const listCommand = ref<DataCommandType[]>([]);
-const commandOp = ref<DataCommandType[]>([]);
+const listCommand = ref<DataCommandType[]>([]); //ข้อมูลรายการประเภทคำสั่ง
+const commandOp = ref<DataCommandType[]>([]); //ตัวเลือกประเภทคำสั่ง

+/** ฟังก์ชันดึงข้อมูลปรเภทคำสั่ง*/
 async function fetchCommandType() {
-  showLoader();
-  await http
-    .get(config.API.commandType)
-    .then(async (res) => {
-      const data = await res.data.result;
-      listCommand.value = data;
-      commandOp.value = data;
-    })
-    .catch((err) => {
-      messageError($q, err);
-    })
-    .finally(() => {
-      hideLoader();
-    });
+  const data = await store.fetchCommandType();
+  if (data) {
+    listCommand.value = data;
+    commandOp.value = data;
+  }
 }

+/** ฟังก์ชันยืนยันการบันทึกข้อมูล */
 function onSubmit() {
  dialogConfirm($q, () => {
    showLoader();
@ -74,29 +69,36 @@ function onSubmit() {
  });
 }

-function filterSelector(val: string, update: Function, refData: string) {
-  switch (refData) {
-    case "OrderTypeOption":
-      update(() => {
-        commandType.value = val ? "" : commandType.value;
-        commandOp.value = listCommand.value.filter(
-          (v: any) => v.name.indexOf(val) > -1
-        );
-      });
-      break;
-
-    default:
-      break;
-  }
+/**
+ * ฟังก์ชันค้นหาข้อมูลรายการประเภทคำสั่ง
+ * @param val คำที่ค้องการค้นหา
+ * @param update function จาก quasar
+ */
+function filterSelector(val: string, update: Function) {
+  update(() => {
+    commandType.value = val ? "" : commandType.value;
+    commandOp.value = listCommand.value.filter(
+      (v: any) => v.name.indexOf(val) > -1
+    );
+  });
 }

+/**
+ * ฟังก์ชันปิด Popup
+ * และกำหนด  commandNo commandYear เป็นค่า Defult
+ * */
 function onClose() {
  modal.value = false;
  commandNo.value = "";
  commandYear.value = new Date().getFullYear();
 }

+/**
+ * ดูการเปลี่ยนแปลงของ modal
+ * เมื่อ  modal เป็น True และ isCopy เป็น False จะเรียก ฟังก์ชัน fetchCommandType เพื่อดึงข้อมูลปรเภทคำสั่ง
+ */
 watch(modal, () => {
+  //เช็คค่าของ modal และ isCopy
  if (modal.value && !isCopy.value) {
    fetchCommandType();
  }
@ -131,8 +133,7 @@ watch(modal, () => {
                outlined
                :rules="[(val:string) => !!val || `${'กรุณาเลือกประเภทคำสั่ง'}`]"
                @filter="(inputValue:any,
-                    doneFn:Function) => filterSelector(inputValue, doneFn,'OrderTypeOption'
-                    ) "
+                    doneFn:Function) => filterSelector(inputValue, doneFn) "
              >
                <template v-slot:no-option>
                  <q-item>
--- a/src/modules/18_command/interface/response/Main.ts
+++ b/src/modules/18_command/interface/response/Main.ts
@ -30,6 +30,7 @@ interface DataCommandType {
  lastUpdateUserId: string;
  lastUpdatedAt: string | Date;
  name: string;
+  subtitle: string;
 }

 interface DataFileDownload {
--- a/src/modules/18_command/store/ListStore.ts
+++ b/src/modules/18_command/store/ListStore.ts
@ -1,7 +1,18 @@
 import { defineStore } from "pinia";
 import { ref } from "vue";
+import { useQuasar } from "quasar";

-import type { DataListCommand } from "@/modules/18_command/interface/response/Main";
+import { useCounterMixin } from "@/stores/mixin";
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+import type {
+  DataListCommand,
+  DataCommandType,
+} from "@/modules/18_command/interface/response/Main";
+
+const $q = useQuasar();
+const { showLoader, hideLoader, messageError } = useCounterMixin();

 export const useCommandListStore = defineStore("commandListStore", () => {
  const tabsMain = ref<string>("DRAFT");
@ -9,10 +20,42 @@ export const useCommandListStore = defineStore("commandListStore", () => {
  const total = ref<number>(0);
  const maxPage = ref<number>(0);

+  const listCommand = ref<DataCommandType[]>([]); //รายการข้อมูลปรเภทคำสั่ง
+
+  /**
+   * ฟังก์ชันดึงข้อมูลปรเภทคำสั่งจาก API
+   * ถ้า 'listCommand' ยังไม่มีข้อมูล จะเรียก Call API เพื่อดึงข้อมูลประเภทคำสั่ง
+   * @returns รายการประเภทคำสั่ง
+   */
+  async function fetchCommandType() {
+    //เช็คค่าของ listCommand
+    if (listCommand.value.length === 0) {
+      showLoader();
+      try {
+        const res = await http.get(config.API.commandType);
+        const data = res.data.result;
+
+        listCommand.value = data.map((e: DataCommandType) => ({
+          id: e.id,
+          name: e.subtitle ? `${e.name} (${e.subtitle})` : e.name,
+        }));
+
+        return listCommand.value;
+      } catch (err) {
+        messageError($q, err);
+      } finally {
+        hideLoader();
+      }
+    } else {
+      return listCommand.value;
+    }
+  }
+
  return {
    tabsMain,
    rows,
    total,
    maxPage,
+    fetchCommandType,
  };
 });
--- a/src/views/MainLayout.vue
+++ b/src/views/MainLayout.vue
@ -19,6 +19,8 @@ import type {
 import { tabList, tabListPlacement } from "../interface/request/main/main";
 import { useroleUserDataStore } from "@/stores/roleUser";

+import LoginLinkage from "@/components/LoginLinkage.vue";
+
 const { setVerticalScrollPosition, getVerticalScrollPosition } = scroll;
 const store = useDataStore();
 const route = useRoute();
@ -74,6 +76,7 @@ const options = ref<optionType[]>([
    color: "indigo",
  },
 ]);
+const modalLoginLinkage = ref<boolean>(false); //เข้าสู่ระบบ Linkage Center

 async function fetchmsgNoread() {
  await http
@ -700,7 +703,38 @@ async function fetchPermissionsSys() {
                <div class="text-subtitle2 q-mt-md q-mb-xs text-center">
                  {{ fullname }}
                </div>
-                <div id="#logout">
+                <div class="row q-col-gutter-sm q-pa-sm">
+                  <div class="col-6">
+                    <q-btn
+                      color="blue"
+                      label="เข้าสู่ระบบ Linkage Center"
+                      size="sm"
+                      v-close-popup
+                      @click="modalLoginLinkage = true"
+                    />
+                  </div>
+                  <div class="col-6">
+                    <q-btn
+                      color="primary"
+                      label="ออกจากระบบ"
+                      v-close-popup
+                      @click="doLogout"
+                      class="full-width full-height"
+                    />
+                  </div>
+                </div>
+
+                <!-- <div id="#logout">
+                  <q-btn
+                    color="blue"
+                    label="เข้าสู่ระบบ Linkage Center"
+                    push
+                    size="sm"
+                    v-close-popup
+                    @click="modalLoginLinkage = true"
+                  />
+                </div>
+                <div id="#logout" class="q-mt-sm">
                  <q-btn
                    color="primary"
                    label="ออกจากระบบ"
@ -708,8 +742,8 @@ async function fetchPermissionsSys() {
                    size="sm"
                    v-close-popup
                    @click="doLogout"
-                  /><!--  -->
-                </div>
+                  />
+                </div> -->
              </div>

              <!-- <div class="column col-12">
@ -1137,6 +1171,8 @@ async function fetchPermissionsSys() {
    </q-page-container>
    <full-loader :visibility="loader" />
  </q-layout>
+
+  <LoginLinkage v-model:modal="modalLoginLinkage" />
 </template>

 <style>