From cc98d336d48dfdb90378c4e4d63b4ceeab0ead0d Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Thu, 28 Nov 2024 09:58:40 +0700
Subject: [PATCH] =?UTF-8?q?=E0=B9=80=E0=B8=9E=E0=B8=B4=E0=B9=88=E0=B9=88?=
 =?UTF-8?q?=E0=B8=A1=20stroe=20=E0=B9=80=E0=B8=81=E0=B9=87=E0=B8=9A=20list?=
 =?UTF-8?q?Development?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../detail/Achievement/DialogDevelopmance.vue |  78 ++-----
 .../requestEdit/01_TabInformation.vue         |  13 --
 .../requestEdit/Dialog01_EditStatus.vue       | 192 ------------------
 .../requestEdit/Page02_DetailIDP.vue          |  97 ++-------
 .../04_registryPerson/interface/index/Main.ts |   6 -
 .../components/Tab/Dialog/DialogDevelop.vue   |  75 ++-----
 .../components/results/dialogIndividual.vue   |  92 ++-------
 .../components/ProjectDetail.vue              | 102 ++--------
 .../15_development/interface/index/Main.ts    |   7 +
 .../15_development/store/listDevelopment.ts   |  98 +++++++++
 10 files changed, 182 insertions(+), 578 deletions(-)
 delete mode 100644 src/modules/04_registryPerson/components/requestEdit/Dialog01_EditStatus.vue
 create mode 100644 src/modules/15_development/store/listDevelopment.ts

diff --git a/src/modules/04_registryPerson/components/detail/Achievement/DialogDevelopmance.vue b/src/modules/04_registryPerson/components/detail/Achievement/DialogDevelopmance.vue
index 54f8ca7fb..abed59a50 100644
--- a/src/modules/04_registryPerson/components/detail/Achievement/DialogDevelopmance.vue
+++ b/src/modules/04_registryPerson/components/detail/Achievement/DialogDevelopmance.vue
@@ -6,17 +6,20 @@ import { useRoute } from "vue-router";
 import http from "@/plugins/http";
 import config from "@/app.config";
 import { useCounterMixin } from "@/stores/mixin";
+import { uselistDevelopmentDataStore } from "@/modules/15_development/store/listDevelopment";
 
 import type {
   DataOptionTechnique,
   ProjectYearOp,
 } from "@/modules/14_KPI/interface/index/Main";
+import type { DataItemsDevelopment } from "@/modules/15_development/interface/index/Main";
 
 import DialogHeader from "@/components/DialogHeader.vue";
 
 const $q = useQuasar();
 const route = useRoute();
 const mixin = useCounterMixin();
+const itemsDevelopment = uselistDevelopmentDataStore();
 const { showLoader, hideLoader, messageError } = mixin;
 
 /**
@@ -42,68 +45,18 @@ const checkOtherBox13 = computed<boolean>(() => {
   return development.value.includes("other3");
 });
 
-const projectTechniquesOp1 = ref<DataOptionTechnique[]>([
-  {
-    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: "อื่น ๆ (ระบุ)" },
-]);
-const projectTechniquesOp2 = ref<DataOptionTechnique[]>([
-  { 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: "อื่น ๆ (ระบุ)" },
-]);
-const projectTechniquesOp3 = ref<DataOptionTechnique[]>([
-  {
-    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: "อื่นๆ (ระบุ)" },
-]);
+//70 การลงมือปฏิบัติ (โดยผู้บังคับบัญชามอบหมาย)
+const projectTechniquesOp1 = ref<DataItemsDevelopment[]>(
+  itemsDevelopment.dataDevelopment70
+);
+//20 การเรียนรู้จากผู้อื่น (Coach/Mentor/Consulting)
+const projectTechniquesOp2 = ref<DataItemsDevelopment[]>(
+  itemsDevelopment.dataDevelopment20
+);
+//10 การฝึกอบรมอื่นๆ
+const projectTechniquesOp3 = ref<DataItemsDevelopment[]>(
+  itemsDevelopment.dataDevelopment10
+);
 
 const choice = ref<string>("MANUAL");
 const projectName = ref<any>("");
@@ -301,6 +254,7 @@ watch(
   }
 );
 </script>
+
 <template>
   <q-dialog persistent v-model="modal">
     <q-card style="min-width: 90vw">
diff --git a/src/modules/04_registryPerson/components/requestEdit/01_TabInformation.vue b/src/modules/04_registryPerson/components/requestEdit/01_TabInformation.vue
index 9452c7201..8cb7e3807 100644
--- a/src/modules/04_registryPerson/components/requestEdit/01_TabInformation.vue
+++ b/src/modules/04_registryPerson/components/requestEdit/01_TabInformation.vue
@@ -17,9 +17,6 @@ import type {
 } from "@/modules/04_registryPerson/interface/index/Main";
 import type { DataRequest } from "@/modules/04_registryPerson/interface/response/Main";
 
-/** importComponents*/
-import DialogStatus from "@/modules/04_registryPerson/components/requestEdit/Dialog01_EditStatus.vue";
-
 const $q = useQuasar();
 const router = useRouter();
 const route = useRoute();
@@ -28,8 +25,6 @@ const { showLoader, hideLoader, messageError, date2Thai } = useCounterMixin();
 
 const routerName = ref<string>(route.name as string);
 //Table
-const idCard = ref<string>("");
-const profileId = ref<string>("");
 const rows = ref<DataRequest[]>([]); //รายการข้อมูลคำร้องขอแก้ไขทะเบียนประวัติ
 const page = ref<number>(1); //หน้า
 const pageSize = ref<number>(10); //จำนวนต่อหน้า
@@ -119,8 +114,6 @@ const visibleColumns = ref<string[]>([
 const status = ref<string>("PENDING"); //ค้นหาตามสถานะ
 const keyword = ref<string>(""); //คำค้นหา
 const statusOption = ref<DataOption[]>(store.optionStatus); //รายการสถานะ
-const modalStatus = ref<boolean>(false); //แก้ไขสถานะคำร้อง
-const modalUpdate = ref<boolean>(false); //อัปเดตข้อมูลจากกรมการปกครอง
 const requestId = ref<string>(""); //id รายการแก้ไข
 
 /** function fetch รายการคำร้องขอแก้ไขทะเบียนประวัติ*/
@@ -402,12 +395,6 @@ onMounted(() => {
       </d-table>
     </div>
   </q-card>
-
-  <DialogStatus
-    v-model:modal="modalStatus"
-    :fetch-data="fetchListRequset"
-    :request-id="requestId"
-  />
 </template>
 
 <style scoped></style>
diff --git a/src/modules/04_registryPerson/components/requestEdit/Dialog01_EditStatus.vue b/src/modules/04_registryPerson/components/requestEdit/Dialog01_EditStatus.vue
deleted file mode 100644
index e496ee49a..000000000
--- a/src/modules/04_registryPerson/components/requestEdit/Dialog01_EditStatus.vue
+++ /dev/null
@@ -1,192 +0,0 @@
-<script setup lang="ts">
-import { reactive, ref, watch } from "vue";
-import { useQuasar } from "quasar";
-
-import http from "@/plugins/http";
-import config from "@/app.config";
-import { useRequestEditStore } from "@/modules/04_registryPerson/stores/RequestEdit";
-import { useCounterMixin } from "@/stores/mixin";
-
-import type { DataOption } from "@/modules/04_registryPerson/interface/index/Main";
-
-import DialogHeader from "@/components/DialogHeader.vue";
-
-const $q = useQuasar();
-const store = useRequestEditStore();
-const { dialogConfirm, showLoader, hideLoader, messageError, success } =
-  useCounterMixin();
-
-/** props*/
-const modal = defineModel<boolean>("modal", { required: true }); //เปิด,ปิด popup แก้ไขสถานะคำร้อง
-const requestId = defineModel<string>("requestId", { required: true }); // id ที่ต้องการแก้ไข
-const props = defineProps({
-  fetchData: { type: Function, requied: true }, // ดึงข้อมูลรายการคำร้องขอแก้ไขทะเบียนประวัติ
-});
-const isReadOnly = ref<boolean>(false); //อ่ายได้อย่างเดียว
-//ฟอร์มสถานะคำร้อง
-const formData = reactive({
-  status: "", //สถานะ
-  remark: "", //หมายเหตุแ
-});
-//ข้อมูลรายการสถานะ
-const statusOptionMain = ref<DataOption[]>(
-  store.optionStatus.filter((e) => e.id !== "")
-);
-const statusOption = ref<DataOption[]>(statusOptionMain.value); //ตัวเลือกรายการสถานะ
-
-/** function บันทึกรายการคำร้อง*/
-function onSubmit() {
-  dialogConfirm($q, async () => {
-    showLoader();
-    await http
-      .patch(config.API.requestEdit + `${requestId.value}`, {
-        status: formData.status,
-        remark: formData.remark,
-      })
-      .then(async () => {
-        await props.fetchData?.();
-        await success($q, "บันทึกข้อมูลสำเร็จ");
-        closeDialog();
-      })
-      .catch((err) => {
-        messageError($q, err);
-      })
-      .finally(() => {
-        hideLoader();
-      });
-  });
-}
-
-/** function ปิด popup*/
-function closeDialog() {
-  modal.value = false;
-  formData.status = "";
-  formData.remark = "";
-}
-
-/**
- * function ค้นหาคำใน select  สถานะคำร้อง
- * @param val คำค้น
- * @param update Function
- */
-function filterOption(val: string, update: Function) {
-  update(() => {
-    statusOption.value = statusOptionMain.value.filter(
-      (v: any) => v.name.indexOf(val) > -1
-    );
-  });
-}
-
-/** function fetch ข้อมูลคำร้องแก้ไข*/
-function fetchDataRequest() {
-  showLoader();
-  http
-    .get(config.API.requestEdit + `${requestId.value}`)
-    .then((res) => {
-      const data = res.data.result;
-      formData.status = data.status;
-      formData.remark = data.remark;
-      if (data.status !== "PENDING") {
-        isReadOnly.value = true;
-      } else {
-        isReadOnly.value = false;
-      }
-    })
-    .catch((err) => {
-      messageError($q, err);
-    })
-    .finally(() => {
-      hideLoader();
-    });
-}
-
-/**
- * class inpui
- * @param val ค่าสถานะ
- */
-function classInput(val: boolean) {
-  return {
-    "full-width cursor-pointer ": val,
-    "full-width cursor-pointer inputgreen": !val,
-  };
-}
-
-/**
- * ดูการเปลี่ยนแปลงของ modal
- * เมื่อ modal เป็น true ทำการดึงข้อมูลคำร้องแก้ไข
- */
-watch(
-  () => modal.value,
-  () => {
-    modal.value && fetchDataRequest();
-  }
-);
-</script>
-
-<template>
-  <q-dialog v-model="modal" persistent>
-    <q-card style="width: 700px; max-width: 80vw">
-      <q-form greedy @submit.prevent @validation-success="onSubmit">
-        <DialogHeader tittle="แก้ไขสถานะคำร้อง" :close="closeDialog" />
-        <q-separator />
-
-        <q-card-section>
-          <div class="row q-col-gutter-sm">
-            <div class="col-xs-12 col-md-12">
-              <q-select
-                :class="classInput(isReadOnly)"
-                :readonly="isReadOnly"
-                v-model="formData.status"
-                label="สถานะ"
-                dense
-                outlined
-                emit-value
-                map-options
-                :options="statusOption"
-                :rules="[(val:string) => !!val || `${'กรุณาเลือกสถานะ'}`]"
-                lazy-rules
-                hide-bottom-space
-                use-input
-                option-label="name"
-                option-value="id"
-                @filter="(inputValue:string,
-                    doneFn:Function) => filterOption(inputValue, doneFn
-                    ) "
-              >
-                <template v-slot:no-option>
-                  <q-item>
-                    <q-item-section class="text-grey">
-                      ไม่มีข้อมูล
-                    </q-item-section>
-                  </q-item>
-                </template>
-              </q-select>
-            </div>
-
-            <div class="col-xs-12 col-md-12">
-              <q-input
-                :class="classInput(isReadOnly)"
-                :readonly="isReadOnly"
-                v-model="formData.remark"
-                label="หมายเหตุ"
-                dense
-                outlined
-                type="textarea"
-                hide-bottom-space
-              />
-            </div>
-          </div>
-        </q-card-section>
-        <q-separator />
-
-        <q-card-actions align="right" v-if="!isReadOnly">
-          <q-btn label="บันทึก" color="secondary" type="submit"
-            ><q-tooltip>บันทึก</q-tooltip></q-btn
-          >
-        </q-card-actions>
-      </q-form>
-    </q-card>
-  </q-dialog>
-</template>
-
-<style scoped></style>
diff --git a/src/modules/04_registryPerson/components/requestEdit/Page02_DetailIDP.vue b/src/modules/04_registryPerson/components/requestEdit/Page02_DetailIDP.vue
index 7b144b52e..9b658e735 100644
--- a/src/modules/04_registryPerson/components/requestEdit/Page02_DetailIDP.vue
+++ b/src/modules/04_registryPerson/components/requestEdit/Page02_DetailIDP.vue
@@ -5,14 +5,13 @@ import { useRouter, useRoute } from "vue-router";
 
 import { useCounterMixin } from "@/stores/mixin";
 import { useRequestEditStore } from "@/modules/04_registryPerson/stores/RequestEdit";
+import { uselistDevelopmentDataStore } from "@/modules/15_development/store/listDevelopment";
 import config from "@/app.config";
 import http from "@/plugins/http";
 
-import type {
-  DataOption,
-  DataItemsDevelopment,
-} from "@/modules/04_registryPerson/interface/index/Main";
+import type { DataOption } from "@/modules/04_registryPerson/interface/index/Main";
 import type { FormDataIDP } from "@/modules/04_registryPerson/interface/request/Main";
+import type { DataItemsDevelopment } from "@/modules/15_development/interface/index/Main";
 
 import Workflow from "@/components/Workflow/Main.vue";
 
@@ -21,6 +20,7 @@ const router = useRouter();
 const route = useRoute();
 const routerName = ref<string>(route.name as string);
 const store = useRequestEditStore();
+const itemsDevelopment = uselistDevelopmentDataStore();
 const {
   dialogConfirm,
   showLoader,
@@ -58,88 +58,17 @@ const isCheckData = computed(() => {
 });
 
 //70 การลงมือปฏิบัติ (โดยผู้บังคับบัญชามอบหมาย)
-const itemsDevelopment70 = ref<DataItemsDevelopment[]>([
-  {
-    value: "on_the_job_training",
-    label: "การฝึกปฏิบัติในงาน (On the job training)",
-  },
-  {
-    value: "job_project_assignment",
-    label: "การมอบหมายงาน/โครงการ (Job/Project assignment)",
-  },
-  {
-    value: "job_shadowing",
-    label: "การติดตามเรียนรู้รูปแบบการทำงานของผู้บริหาร (Job shadowing)",
-  },
-  {
-    value: "job_enlargement",
-    label: "การมอบหมายงานเพิ่มขึ้น (Job enlargement)",
-  },
-  {
-    value: "internal_trainer",
-    label: "การเป็นวิทยากรภายในหน่วยงาน (Internal trainer)",
-  },
-  {
-    value: "rotation",
-    label: "การหมุนเวียนงาน (Rotation)",
-  },
-  {
-    value: "activity",
-    label: "การทำกิจกรรม (Activity)",
-  },
-  {
-    value: "site_visit",
-    label: "การศึกษาดูงานนอกสถานที่ (Site visit)",
-  },
-  {
-    value: "benchmarking",
-    label: "การแลกเปลี่ยน เทียบเคียงความรู้ ประสมการณ์ (Benchmarking)",
-  },
-  {
-    value: "problem_solving",
-    label: "การแก้ปัญหา (Problem-solving)",
-  },
-  {
-    value: "team_working",
-    label: "การทำงานเป็นทีม (Team working)",
-  },
-  {
-    value: "other1",
-    label: "อื่น ๆ (ระบุ)",
-  },
-]);
+const itemsDevelopment70 = ref<DataItemsDevelopment[]>(
+  itemsDevelopment.dataDevelopment70
+);
 //20 การเรียนรู้จากผู้อื่น (Coach/Mentor/Consulting)
-const itemsDevelopment20 = ref<DataItemsDevelopment[]>([
-  { value: "coaching", label: "การสอนงาน (Coaching)" },
-  { value: "mentoring", label: "การเป็นพี่เลี้ยง (Mentoring)" },
-  { value: "team_meeting", label: "การประชุมทีม (Team meeting)" },
-  { value: "consulting", label: "การให้คำปรึกษา (Consulting)" },
-  { value: "feedback", label: "การให้ข้อคิดเห็น/เสนอแนะ (Feedback)" },
-  { value: "other2", label: "อื่น ๆ (ระบุ)" },
-]);
+const itemsDevelopment20 = ref<DataItemsDevelopment[]>(
+  itemsDevelopment.dataDevelopment20
+);
 //10 การฝึกอบรมอื่นๆ
-const itemsDevelopment10 = ref<DataItemsDevelopment[]>([
-  {
-    value: "self_learning",
-    label: "การเรียนรู้ด้วยตนเอง แบบ online/offline (Self – learning)",
-  },
-  { value: "classroom_training", label: "การฝึกอบรม (Classroom training)" },
-  {
-    value: "in_house_training",
-    label: "การฝึกอบรมภายในองค์กร (In – house training)",
-  },
-  {
-    value: "public_training",
-    label: "การฝึกอบรมจากองค์กรภายนอก (Public training)",
-  },
-  {
-    value: "e_training",
-    label: "การฝึกอบรมผ่าน online (e – training / e – learning)",
-  },
-  { value: "meeting", label: "การประชุม (Meeting)" },
-  { value: "seminar", label: "การสัมมนา (Seminar)" },
-  { value: "other3", label: "อื่น ๆ (ระบุ)" },
-]);
+const itemsDevelopment10 = ref<DataItemsDevelopment[]>(
+  itemsDevelopment.dataDevelopment10
+);
 //ข้อมูลรายการสถานะ
 const statusOptionMain = ref<DataOption[]>(
   store.optionStatusIDP.filter((e: DataOption) => e.id !== "")
diff --git a/src/modules/04_registryPerson/interface/index/Main.ts b/src/modules/04_registryPerson/interface/index/Main.ts
index e34533956..d1e6f42ae 100644
--- a/src/modules/04_registryPerson/interface/index/Main.ts
+++ b/src/modules/04_registryPerson/interface/index/Main.ts
@@ -67,11 +67,6 @@ interface ItemTab {
   label: string;
 }
 
-interface DataItemsDevelopment {
-  value: string;
-  label: string;
-}
-
 interface Request {
   createdAt: string;
   createdFullName: string;
@@ -100,6 +95,5 @@ export type {
   ItemTab,
   DataOptionEducation,
   DataOptionEducationLevel,
-  DataItemsDevelopment,
   Request,
 };
diff --git a/src/modules/14_KPI/components/Tab/Dialog/DialogDevelop.vue b/src/modules/14_KPI/components/Tab/Dialog/DialogDevelop.vue
index 1f491a6bd..a3604a60b 100644
--- a/src/modules/14_KPI/components/Tab/Dialog/DialogDevelop.vue
+++ b/src/modules/14_KPI/components/Tab/Dialog/DialogDevelop.vue
@@ -6,11 +6,13 @@ import { useQuasar } from "quasar";
 import http from "@/plugins/http";
 import config from "@/app.config";
 import { useCounterMixin } from "@/stores/mixin";
+import { uselistDevelopmentDataStore } from "@/modules/15_development/store/listDevelopment";
 
 import type {
   DataOptionTechnique,
   ProjectYearOp,
 } from "@/modules/14_KPI/interface/index/Main";
+import type { DataItemsDevelopment } from "@/modules/15_development/interface/index/Main";
 
 import DialogHeader from "@/components/DialogHeader.vue";
 
@@ -20,6 +22,7 @@ const props = defineProps({
 
 const $q = useQuasar();
 const mixin = useCounterMixin();
+const itemsDevelopment = uselistDevelopmentDataStore();
 const {
   showLoader,
   hideLoader,
@@ -61,70 +64,17 @@ const isDevelopment10 = computed(() => {
   );
 });
 
-const projectTechniquesOp1 = ref<DataOptionTechnique[]>([
-  {
-    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: "อื่น ๆ (ระบุ)" },
-]);
+const projectTechniquesOp1 = ref<DataItemsDevelopment[]>(
+  itemsDevelopment.dataDevelopment70
+);
 
-const projectTechniquesOp2 = ref<DataOptionTechnique[]>([
-  { 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: "อื่น ๆ (ระบุ)" },
-]);
+const projectTechniquesOp2 = ref<DataItemsDevelopment[]>(
+  itemsDevelopment.dataDevelopment20
+);
 
-const projectTechniquesOp3 = ref<DataOptionTechnique[]>([
-  {
-    value: "self_learning",
-    label: "การเรียนรู้ด้วยตนเอง แบบ online/offline (Self–learning)",
-  },
-  { value: "classroom_training", label: "การฝึกอบรม (Classroom training)" },
-  {
-    value: "in_house_training",
-    label: "การฝึกอบรมภายในองค์กร (In–house training)",
-  },
-  {
-    value: "public_training",
-    label: "การฝึกอบรมจากองค์กรภายนอก (Public training)",
-  },
-  {
-    value: "e_training",
-    label: "การฝึกอบรมผ่าน online (e–training/e–learning)",
-  },
-  { value: "meeting", label: "การประชุม (Meeting)" },
-  { value: "seminar", label: "การสัมมนา (Seminar)" },
-  { value: "other3", label: "อื่น ๆ (ระบุ)" },
-]);
+const projectTechniquesOp3 = ref<DataItemsDevelopment[]>(
+  itemsDevelopment.dataDevelopment10
+);
 
 const choice = ref<string>("MANUAL");
 const projectName = ref<any>("");
@@ -361,6 +311,7 @@ watch(
   }
 );
 </script>
+
 <template>
   <q-dialog persistent v-model="modal">
     <q-card style="min-width: 90vw">
diff --git a/src/modules/14_KPI/components/results/dialogIndividual.vue b/src/modules/14_KPI/components/results/dialogIndividual.vue
index 8183724ad..ae704b1d3 100644
--- a/src/modules/14_KPI/components/results/dialogIndividual.vue
+++ b/src/modules/14_KPI/components/results/dialogIndividual.vue
@@ -5,22 +5,17 @@ import { useQuasar, type QTableProps } from "quasar";
 import http from "@/plugins/http";
 import config from "@/app.config";
 import { useCounterMixin } from "@/stores/mixin";
+import { uselistDevelopmentDataStore } from "@/modules/15_development/store/listDevelopment";
 
-import type { DataOptionTechnique } from "@/modules/14_KPI/interface/index/Main";
-/**
- * importType
- */
-import type {
-  OptionCheckbox,
-  DataAchievement,
-} from "@/modules/14_KPI/interface/index/Main";
+/** importType*/
+import type { DataAchievement } from "@/modules/14_KPI/interface/index/Main";
+import type { DataItemsDevelopment } from "@/modules/15_development/interface/index/Main";
 
-/**
- * importComponents
- */
+/** importComponents*/
 import DialogHeader from "@/components/DialogHeader.vue";
 
 const $q = useQuasar();
+const itemsDevelopment = uselistDevelopmentDataStore();
 const { showLoader, messageError, hideLoader } = useCounterMixin();
 
 /**
@@ -42,69 +37,18 @@ const checkOtherBox13 = computed<boolean>(() => {
   return development.value.includes("other3");
 });
 
-const projectTechniquesOp1 = ref<DataOptionTechnique[]>([
-  {
-    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: "อื่น ๆ (ระบุ)" },
-]);
-const projectTechniquesOp2 = ref<DataOptionTechnique[]>([
-  { 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: "อื่น ๆ (ระบุ)" },
-]);
-
-const projectTechniquesOp3 = ref<DataOptionTechnique[]>([
-  {
-    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: "อื่น ๆ (ระบุ)" },
-]);
+// 70 การลงมือปฏิบัติ (โดยผู้บังคับบัญชามอบหมาย)
+const projectTechniquesOp1 = ref<DataItemsDevelopment[]>(
+  itemsDevelopment.dataDevelopment70
+);
+// 20 การเรียนรู้จากผู้อื่น (Coach/Mentor/Consulting)
+const projectTechniquesOp2 = ref<DataItemsDevelopment[]>(
+  itemsDevelopment.dataDevelopment20
+);
+// 10 การฝึกอบรมอื่นๆ
+const projectTechniquesOp3 = ref<DataItemsDevelopment[]>(
+  itemsDevelopment.dataDevelopment10
+);
 
 /**
  * props
diff --git a/src/modules/15_development/components/ProjectDetail.vue b/src/modules/15_development/components/ProjectDetail.vue
index e32fe4ba6..f1c12d817 100644
--- a/src/modules/15_development/components/ProjectDetail.vue
+++ b/src/modules/15_development/components/ProjectDetail.vue
@@ -7,6 +7,7 @@ import http from "@/plugins/http";
 import config from "@/app.config";
 import { useCounterMixin } from "@/stores/mixin";
 import { useDevelopmentDataStore } from "@/modules/15_development/store/developmentStore";
+import { uselistDevelopmentDataStore } from "@/modules/15_development/store/listDevelopment";
 
 /**importType*/
 import type {
@@ -16,11 +17,12 @@ import type {
   StrategyNode,
 } from "@/modules/15_development/interface/index/Main";
 import type { DataStrategic } from "@/modules/15_development/interface/response/Main";
+import type { DataItemsDevelopment } from "@/modules/15_development/interface/index/Main";
 
 const $q = useQuasar();
 const store = useDevelopmentDataStore();
 const route = useRoute();
-const projectId = ref<string>(route.params.id.toLocaleString());
+const itemsDevelopment = uselistDevelopmentDataStore();
 const { showLoader, hideLoader, messageError, date2Thai, diffDay, success } =
   useCounterMixin();
 
@@ -31,6 +33,7 @@ const props = defineProps({
   onCheckChangeData: { type: Function, required: true },
 });
 
+const projectId = ref<string>(route.params.id.toLocaleString());
 const step = ref<string>("");
 const reasonPlanned70 = ref<string>(""); //การเรียนรู้และการพัฒนาจากการลงมือทำ 70 เทคนิควิธีการที่ใช้ในการพัฒนา
 const reasonPlanned20 = ref<string>(""); // การเรียนรู้และการพัฒนาจากบุคคลอื่น 20 เทคนิควิธีการที่ใช้ในการพัฒนา
@@ -62,7 +65,7 @@ const checkOtherBox23 = computed<boolean>(() => {
 const checkRoutePermission = ref<boolean>(
   route.name == "developmentDetailPage"
 );
-const projectTypeOp = ref<any[]>([
+const projectTypeOp = ref<DataOptionTechnique[]>([
   { label: "โครงการตามยุทธศาสตร์", value: "โครงการตามยุทธศาสตร์" },
   {
     label: "โครงการตามภารกิจประจำของหน่วยงาน",
@@ -72,89 +75,18 @@ const projectTypeOp = ref<any[]>([
   { label: "โครงการต่อเนื่อง", value: "โครงการต่อเนื่อง" },
 ]);
 
-/** option */
-const projectTechniquesOp1 = ref<DataOptionTechnique[]>([
-  {
-    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: "อื่น ๆ (ระบุ)",
-  },
-]);
-
-const projectTechniquesOp2 = ref<DataOptionTechnique[]>([
-  { 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: "อื่นๆ (ระบุ)" },
-]);
-
-const projectTechniquesOp3 = ref<DataOptionTechnique[]>([
-  {
-    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: "อื่น ๆ (ระบุ)" },
-]);
+//70 การลงมือปฏิบัติ (โดยผู้บังคับบัญชามอบหมาย)
+const projectTechniquesOp1 = ref<DataItemsDevelopment[]>(
+  itemsDevelopment.dataDevelopment70
+);
+//20 การเรียนรู้จากผู้อื่น (Coach/Mentor/Consulting)
+const projectTechniquesOp2 = ref<DataItemsDevelopment[]>(
+  itemsDevelopment.dataDevelopment20
+);
+//10 การฝึกอบรมอื่นๆ
+const projectTechniquesOp3 = ref<DataItemsDevelopment[]>(
+  itemsDevelopment.dataDevelopment10
+);
 
 const formData = reactive<FormProjectDetail>({
   developmentProjectTypes: [],
diff --git a/src/modules/15_development/interface/index/Main.ts b/src/modules/15_development/interface/index/Main.ts
index ad522fc46..ebf9e863b 100644
--- a/src/modules/15_development/interface/index/Main.ts
+++ b/src/modules/15_development/interface/index/Main.ts
@@ -160,6 +160,12 @@ interface StrategyNode {
   name: string;
   children: StrategyNode[];
 }
+
+interface DataItemsDevelopment {
+  value: string;
+  label: string;
+}
+
 export type {
   DataOption,
   DataOptionCheckBox,
@@ -174,4 +180,5 @@ export type {
   OrgTree,
   PersonData,
   StrategyNode,
+  DataItemsDevelopment,
 };
diff --git a/src/modules/15_development/store/listDevelopment.ts b/src/modules/15_development/store/listDevelopment.ts
new file mode 100644
index 000000000..fb78a3c3b
--- /dev/null
+++ b/src/modules/15_development/store/listDevelopment.ts
@@ -0,0 +1,98 @@
+import { defineStore } from "pinia";
+import { ref } from "vue";
+
+import type { DataItemsDevelopment } from "@/modules/15_development/interface/index/Main";
+
+export const uselistDevelopmentDataStore = defineStore(
+  "listDevelopmentDataStore",
+  () => {
+    //70 การลงมือปฏิบัติ (โดยผู้บังคับบัญชามอบหมาย)
+    const dataDevelopment70 = 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 dataDevelopment20 = 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 dataDevelopment10 = 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: "อื่น ๆ (ระบุ)" },
+    ]);
+    return {
+      dataDevelopment70,
+      dataDevelopment20,
+      dataDevelopment10,
+    };
+  }
+);