From e022451d75bcab7a201a005ac45fdf454d4a9d4e Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Wed, 3 Apr 2024 17:51:00 +0700
Subject: [PATCH] =?UTF-8?q?=E0=B9=80=E0=B8=9E=E0=B8=B4=E0=B9=88=E0=B8=A1?=
 =?UTF-8?q?=E0=B9=82=E0=B8=84=E0=B8=A3=E0=B8=87=E0=B8=81=E0=B8=B2=E0=B8=A3?=
 =?UTF-8?q?/=E0=B8=AB=E0=B8=A5=E0=B8=B1=E0=B8=81=E0=B8=AA=E0=B8=B9?=
 =?UTF-8?q?=E0=B8=95=E0=B8=A3=E0=B8=81=E0=B8=B2=E0=B8=A3=E0=B8=9D=E0=B8=B6?=
 =?UTF-8?q?=E0=B8=81=E0=B8=AD=E0=B8=9A=E0=B8=A3=E0=B8=A1=20=3D>=20?=
 =?UTF-8?q?=E0=B8=82=E0=B9=89=E0=B8=AD=E0=B8=A1=E0=B8=B9=E0=B8=A5=E0=B9=80?=
 =?UTF-8?q?=E0=B8=9A=E0=B8=B7=E0=B9=89=E0=B8=AD=E0=B8=87=E0=B8=95=E0=B9=89?=
 =?UTF-8?q?=E0=B8=99,=E0=B9=80=E0=B8=9B=E0=B9=89=E0=B8=B2=E0=B8=AB?=
 =?UTF-8?q?=E0=B8=A1=E0=B8=B2=E0=B8=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/15_development/api.development.ts     |   1 +
 .../15_development/components/BasicInfo.vue   | 190 ++++++------
 .../15_development/components/MainTab.vue     | 109 ++++++-
 .../15_development/components/Target.vue      | 285 ++++++++++++++----
 .../15_development/interface/request/Main.ts  |  75 ++++-
 .../15_development/store/developmentStore.ts  |  93 +++++-
 src/modules/15_development/views/MainPage.vue |   8 +-
 .../15_development/views/Scholarship.vue      |   2 -
 8 files changed, 588 insertions(+), 175 deletions(-)

diff --git a/src/api/15_development/api.development.ts b/src/api/15_development/api.development.ts
index 619a66198..e0a8521fc 100644
--- a/src/api/15_development/api.development.ts
+++ b/src/api/15_development/api.development.ts
@@ -4,4 +4,5 @@ const development = `${env.API_URI}/development`;
 export default {
   /** รายการโครงการ*/
   developmentMain: `${development}/main`,
+  developmentMainById: (id: string) => `${development}/main/${id}`,
 };
diff --git a/src/modules/15_development/components/BasicInfo.vue b/src/modules/15_development/components/BasicInfo.vue
index 90d4dceeb..1da06b539 100644
--- a/src/modules/15_development/components/BasicInfo.vue
+++ b/src/modules/15_development/components/BasicInfo.vue
@@ -7,8 +7,10 @@ import type { FormBasicinfo } from "@/modules/15_development/interface/request/M
 import DialogSelectAgency from "@/modules/15_development/components/DialogSelectAgency.vue";
 
 import { useCounterMixin } from "@/stores/mixin";
+import { useDevelopmentDataStore } from "@/modules/15_development/store/developmentStore";
 
 const $q = useQuasar();
+const store = useDevelopmentDataStore();
 const { showLoader, hideLoader, dialogConfirm } = useCounterMixin();
 
 const formData = reactive<FormBasicinfo>({
@@ -19,14 +21,6 @@ const formData = reactive<FormBasicinfo>({
   objective: "",
 });
 
-const options = ref<any>([
-  "สำนักงานคณะกรรมการข้าราชการกรุงเทพมหานครกองบริหารทั้วไป",
-  "สำนักงานคณะกรรมการข้าราชการกรุงเทพมหานคร",
-]);
-function onSubmit() {
-  dialogConfirm($q, () => {});
-}
-
 const modalDialogSelect = ref<boolean>(false);
 function selectAgency() {
   modalDialogSelect.value = true;
@@ -34,111 +28,99 @@ function selectAgency() {
 function updateAgency(name: string) {
   formData.org = name;
 }
-
-onMounted(() => {
-  console.log("ข้อมูลเบื้องต้น");
-});
 </script>
 <template>
   <!-- <q-form greedy @submit.prevent @validation-success="onSubmit"> -->
-    <div class="row col-12 q-col-gutter-md q-pa-md">
-      <div class="col-xs-6 col-sm-2 col-md-2">
-        <datepicker
-          menu-class-name="modalfix"
-          v-model="formData.year"
-          :locale="'th'"
-          autoApply
-          year-picker
-          :enableTimePicker="false"
-        >
-          <template #year="{ year }">{{ year + 543 }}</template>
-          <template #year-overlay-value="{ value }">{{
-            parseInt(value + 543)
-          }}</template>
-          <template #trigger>
-            <q-input
-              dense
-              lazy-rules
-              outlined
-              :model-value="Number(formData.year) + 543"
-              :label="`${'ปีงบประมาณ'}`"
-            >
-              <template v-slot:prepend>
-                <q-icon
-                  name="event"
-                  class="cursor-pointer"
-                  style="color: var(--q-primary)"
-                >
-                </q-icon>
-              </template>
-            </q-input>
-          </template>
-        </datepicker>
-      </div>
-      <div class="col-xs-10 col-sm-10 col-md-10">
-        <q-input
-          dense
-          outlined
-          v-model="formData.org"
-          label="ชื่อหน่วยงานที่รับผิดชอบ"
-          hide-bottom-space
-          lazy-rules
-          @click="selectAgency"
-          :rules="[
-            (val:string) =>
-              !!val || `${'กรุณาเลือกหน่วยงานที่รับผิดชอบ'}`,
-          ]"
-        />
-      </div>
-      <div class="col-xs-12 col-sm-12 col-md-12">
-        <q-input
-          outlined
-          dense
-          v-model="formData.projectName"
-          label="ชื่อโครงการ/กิจกรรม/หลักสูตร"
-          rows="6"
-          type="textarea"
-          hide-bottom-space
-          :rules="[
+  <div class="row col-12 q-col-gutter-md q-pa-md">
+    <div class="col-xs-6 col-sm-2 col-md-2">
+      <datepicker
+        menu-class-name="modalfix"
+        v-model="store.formAddProject.year"
+        :locale="'th'"
+        autoApply
+        year-picker
+        :enableTimePicker="false"
+      >
+        <template #year="{ year }">{{ year + 543 }}</template>
+        <template #year-overlay-value="{ value }">{{
+          parseInt(value + 543)
+        }}</template>
+        <template #trigger>
+          <q-input
+            dense
+            lazy-rules
+            outlined
+            :model-value="Number(store.formAddProject.year) + 543"
+            :label="`${'ปีงบประมาณ'}`"
+          >
+            <template v-slot:prepend>
+              <q-icon
+                name="event"
+                class="cursor-pointer"
+                style="color: var(--q-primary)"
+              >
+              </q-icon>
+            </template>
+          </q-input>
+        </template>
+      </datepicker>
+    </div>
+    <div class="col-xs-10 col-sm-10 col-md-10">
+      <q-input
+        dense
+        outlined
+        v-model="formData.org"
+        label="ชื่อหน่วยงานที่รับผิดชอบ"
+        hide-bottom-space
+        lazy-rules
+        @click="selectAgency"
+      />
+      <!-- :rules="[
+        (val:string) =>
+          !!val || `${'กรุณาเลือกหน่วยงานที่รับผิดชอบ'}`,
+      ]" -->
+    </div>
+    <div class="col-xs-12 col-sm-12 col-md-12">
+      <q-input
+        outlined
+        dense
+        v-model="store.formAddProject.projectName"
+        label="ชื่อโครงการ/กิจกรรม/หลักสูตร"
+        rows="6"
+        type="textarea"
+        hide-bottom-space
+        :rules="[
             (val:string) =>
               !!val || `${'กรุณากรอกชื่อโครงการ/กิจกรรม/หลักสูตร'}`,
 
           ]"
-        />
-      </div>
-      <div class="col-xs-12 col-sm-12 col-md-12">
-        <q-input
-          outlined
-          dense
-          v-model="formData.reason"
-          label="หลักการและเหตุผล"
-          rows="6"
-          hide-bottom-space
-          type="textarea"
-          :rules="[
-            (val:string) =>
-              !!val || `${'กรุณากรอกหลักการและเหตุผล'}`,
-          ]"
-        />
-      </div>
-      <div class="col-xs-12 col-sm-12 col-md-12">
-        <q-input
-          outlined
-          dense
-          v-model="formData.objective"
-          label="วัตถุประสงค์"
-          rows="6"
-          hide-bottom-space
-          type="textarea"
-          :rules="[
-            (val:string) =>
-              !!val || `${'กรุณากรอกวัตถุประสงค์'}`,
-          ]"
-        />
-      </div>
+      />
     </div>
+    <div class="col-xs-12 col-sm-12 col-md-12">
+      <q-input
+        outlined
+        dense
+        v-model="store.formAddProject.reason"
+        label="หลักการและเหตุผล"
+        rows="6"
+        hide-bottom-space
+        type="textarea"
+      />
+    </div>
+    <div class="col-xs-12 col-sm-12 col-md-12">
+      <q-input
+        outlined
+        dense
+        v-model="store.formAddProject.objective"
+        label="วัตถุประสงค์"
+        rows="6"
+        hide-bottom-space
+        type="textarea"
+      />
+    </div>
+  </div>
 
-    <!-- <q-separator />
+  <!-- <q-separator />
     <div class="text-right q-pa-sm">
       <q-btn
         dense
diff --git a/src/modules/15_development/components/MainTab.vue b/src/modules/15_development/components/MainTab.vue
index caa909f52..36dd45eb1 100644
--- a/src/modules/15_development/components/MainTab.vue
+++ b/src/modules/15_development/components/MainTab.vue
@@ -1,7 +1,9 @@
 <script setup lang="ts">
-import { ref } from "vue";
+import { ref, onMounted, onUnmounted } from "vue";
 import { useQuasar } from "quasar";
 import { useRouter, useRoute } from "vue-router";
+import http from "@/plugins/http";
+import config from "@/app.config";
 
 import BasicInfo from "@/modules/15_development/components/BasicInfo.vue";
 import Target from "@/modules/15_development/components/Target.vue";
@@ -10,18 +12,115 @@ import FollowResult from "@/modules/15_development/components/FollowResult.vue";
 import Other from "@/modules/15_development/components/Other.vue";
 
 import { useCounterMixin } from "@/stores/mixin";
+import { useDevelopmentDataStore } from "@/modules/15_development/store/developmentStore";
 
 const $q = useQuasar();
 const router = useRouter();
 const route = useRoute();
-const { showLoader, hideLoader, dialogConfirm } = useCounterMixin();
+const store = useDevelopmentDataStore();
+const {
+  success,
+  showLoader,
+  hideLoader,
+  messageError,
+  dialogConfirm,
+  dialogMessageNotify,
+} = useCounterMixin();
 
 const title = ref<string>(route.params.id ? "แก้ไข" : "เพิ่ม");
+const projectId = ref<string | null>(
+  route.params.id ? route.params.id.toLocaleString() : null
+);
 const tab = ref<string>("BasicInfo");
 
-function onSubmit() {
-  dialogConfirm($q, () => {});
+function fetchDataProject(id: string) {
+  showLoader();
+  http
+    .get(config.API.developmentMainById(id))
+    .then((res) => {
+      const data = res.data.result;
+      console.log(data);
+      /** ข้อมูลเบื้องต้น*/
+      store.formAddProject.year = data.year;
+      store.formAddProject.projectName = data.projectName;
+      store.formAddProject.reason = data.reason;
+      store.formAddProject.objective = data.objective;
+
+      /**เป้าหมาย*/
+      const plannedGoals = data.plannedGoals.map((e: any) => ({
+        groupTarget: e.groupTarget,
+        groupTargetSub: e.groupTargetSub,
+        position: e.position,
+        posTypePlannedId: e.posTypePlannedId,
+        posLevelPlannedId: e.posLevelPlannedId,
+        type: e.type,
+        amount: e.amount,
+      }));
+      const plannedPeoples = data.plannedPeoples.map((e: any) => ({
+        groupTarget: e.groupTarget,
+        amount: e.amount,
+      }));
+      store.formAddProject.plannedGoals = plannedGoals;
+      store.formAddProject.plannedPeoples = plannedPeoples;
+
+      const actualGoals = data.actualGoals.map((e: any) => ({
+        groupTarget: e.groupTarget,
+        groupTargetSub: e.groupTargetSub,
+        position: e.position,
+        posTypeActualId: e.posTypeActualId,
+        posLevelActualId: e.posLevelActualId,
+        type: e.type,
+        amount: e.amount,
+      }));
+      const actualPeoples = data.actualPeoples.map((e: any) => ({
+        groupTarget: e.groupTarget,
+        amount: e.amount,
+      }));
+      store.formAddProject.actualGoals = actualGoals;
+      store.formAddProject.actualPeoples = actualPeoples;
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      setTimeout(() => {
+        hideLoader();
+      }, 1000);
+    });
 }
+
+function onSubmit() {
+  if (store.formAddProject.projectName === "" && tab.value !== "BasicInfo") {
+    dialogMessageNotify($q, "ชื่อโครงการ/กิจกรรม/หลักสูตร");
+    tab.value = "BasicInfo";
+  } else {
+    dialogConfirm($q, async () => {
+      showLoader();
+      const url = projectId.value
+        ? config.API.developmentMainById(projectId.value)
+        : config.API.developmentMain;
+      const method = projectId.value ? "put" : "post";
+      try {
+        const res = await http[method](url, store.formAddProject);
+        success($q, "บันทึกข้อมูลสำเร็จ");
+        !projectId.value && router.push(`/development/${res.data.result}`);
+        projectId.value && fetchDataProject(projectId.value);
+      } catch (e) {
+        messageError($q, e);
+      } finally {
+        hideLoader();
+      }
+    });
+  }
+}
+
+onMounted(() => {
+  projectId.value && fetchDataProject(projectId.value);
+});
+
+onUnmounted(() => {
+  store.clearFormAddProject();
+});
 </script>
 <template>
   <q-form greedy @submit.prevent @validation-success="onSubmit">
@@ -33,7 +132,7 @@ function onSubmit() {
         class="q-mr-sm"
         icon="mdi-arrow-left"
         color="primary"
-        @click="router.go(-1)"
+        @click="router.push('/development')"
       />
       {{ `${title}รายการโครงการ/หลักสูตรการฝึกอบรม` }}
       <q-space />
diff --git a/src/modules/15_development/components/Target.vue b/src/modules/15_development/components/Target.vue
index ffa32f7f0..9d77d1126 100644
--- a/src/modules/15_development/components/Target.vue
+++ b/src/modules/15_development/components/Target.vue
@@ -17,9 +17,11 @@ import type {
 
 import DialogHeader from "@/components/DialogHeader.vue";
 
+import { useDevelopmentDataStore } from "@/modules/15_development/store/developmentStore";
 import { useCounterMixin } from "@/stores/mixin";
 
 const $q = useQuasar();
+const store = useDevelopmentDataStore();
 const {
   showLoader,
   hideLoader,
@@ -29,7 +31,7 @@ const {
   messageError,
 } = useCounterMixin();
 
-const columnsGroup = ref<QTableProps["columns"]>([
+const columnsPlannedGoals = ref<QTableProps["columns"]>([
   {
     name: "groupTarget",
     align: "left",
@@ -38,15 +40,17 @@ const columnsGroup = ref<QTableProps["columns"]>([
     field: "groupTarget",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
+    format: (val) => convertNameGoals(val),
   },
   {
-    name: "type",
+    name: "posTypePlannedId",
     align: "left",
     label: "ประเภท",
     sortable: true,
-    field: "type",
+    field: "posTypePlannedId",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
+    format: (val) => convertTypeGoals(val),
   },
 
   {
@@ -59,15 +63,50 @@ const columnsGroup = ref<QTableProps["columns"]>([
     style: "font-size: 14px",
   },
 ]);
+
+const columnsActualGoals = ref<QTableProps["columns"]>([
+  {
+    name: "groupTarget",
+    align: "left",
+    label: "กลุ่มเป้าหมาย ",
+    sortable: true,
+    field: "groupTarget",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    format: (val) => convertNameGoals(val),
+  },
+  {
+    name: "posTypeActualId",
+    align: "left",
+    label: "ประเภท",
+    sortable: true,
+    field: "posTypeActualId",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    format: (val) => convertTypeGoals(val),
+  },
+
+  {
+    name: "amount",
+    align: "left",
+    label: "จำนวน(คน)",
+    sortable: true,
+    field: "amount",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+]);
+
 const columnsRelated = ref<QTableProps["columns"]>([
   {
-    name: "related",
+    name: "groupTarget",
     align: "left",
     label: "ผู้เกี่ยวข้อง ",
     sortable: true,
-    field: "related",
+    field: "groupTarget",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
+    format: (val) => convertNamePeoples(val),
   },
 
   {
@@ -81,40 +120,32 @@ const columnsRelated = ref<QTableProps["columns"]>([
   },
 ]);
 
-const rows1 = ref<any>([
-  {
-    groupTarget: "ข้าราชการ",
-    type: "บริหาร",
-    amount: 20,
-  },
-]);
-const rows2 = ref<any>([{ related: "เจ้าหน้าที่", amount: 10 }]);
-const rows3 = ref<any>([
-  {
-    groupTarget: "ข้าราชการ",
-    type: "บริหาร",
-    amount: 20,
-  },
-]);
-const rows4 = ref<any>([{ related: "เจ้าหน้าที่", amount: 10 }]);
-const options = ref<any>([
-  // "ข้าราชการกรุงเทพมหานคร",
-  // "ข้าราชการกรุงเทพมหานครสามัญ",
-  // "เจ้าหน้าที่ดำเนิดการ",
+const plannedGoals = ref<any>([]);
+const plannedPeoples = ref<any>([]);
+const actualGoals = ref<any>([]);
+const actualPeoples = ref<any>([]);
+
+const peoplesOp = ref<DataOption[]>([
+  { id: "OPERATOR", name: "เจ้าหน้าที่ดําเนินการ" },
+  { id: "LECTURER", name: "วิทยากร" },
+  { id: "OBSERVER", name: "ผู้สังเกตการณ์" },
 ]);
 
 const groupOp = ref<DataOption[]>([
-  { id: "1", name: "ข้าราชการกรุงเทพมหานคร" },
-  { id: "2", name: "บุคลากรกรุงเทพมหานคร" },
-  { id: "3", name: "บุคคลภายนอก" },
+  { id: "OFFICER", name: "ข้าราชการกรุงเทพมหานคร" },
+  { id: "PERSONNEL", name: "บุคลากรกรุงเทพมหานคร" },
+  { id: "OUTSIDERS", name: "บุคคลภายนอก" },
 ]);
 const groupSubOp = ref<DataOption[]>([
-  { id: "1", name: "ข้าราชการกรุงเทพมหานครสามัญ" },
-  { id: "2", name: "ข้าราชการครู" },
+  { id: "OFFICER", name: "ข้าราชการกรุงเทพมหานครสามัญ" },
+  { id: "TEACHER", name: "ข้าราชการครู" },
+  { id: "EMPLOYEE", name: "กรุงเทพมหานคร(ลูกจ้างประจำ ลูกจ้างชั่วคราว)" },
+  { id: "EDUCATIONAL", name: "บุคลากรทางการศึกษากรุงเทพมหานคร" },
 ]);
 
 const modalGroupTarget = ref<boolean>(false);
 const modalRelate = ref<boolean>(false);
+const isTarget = ref<string>("");
 
 const formGroupTarget = reactive<FormGroupTarget>({
   groupTarget: "",
@@ -154,10 +185,10 @@ function fetchType() {
   }
 }
 
-function onClickOpenDialog(type: string) {
+function onClickOpenDialog(type: string, target: string) {
+  isTarget.value = target;
   if (type === "group") {
     modalGroupTarget.value = true;
-    fetchType();
   } else {
     modalRelate.value = true;
   }
@@ -165,20 +196,88 @@ function onClickOpenDialog(type: string) {
 
 function onSubmitGroup() {
   dialogConfirm($q, () => {
-    success($q, "บันทึกข้อมูลสำเร็จ");
-    onClickCloseDialog();
+    if (isTarget.value === "planned") {
+      const data = [];
+      data.push(formGroupTarget);
+      const list = data.map((e) => ({
+        groupTarget: e.groupTarget,
+        groupTargetSub: e.groupTargetSub,
+        position: e.position,
+        posTypePlannedId: e.posType,
+        posLevelPlannedId: e.level,
+        type: e.type,
+        amount: Number(e.amount),
+      }));
+      plannedGoals.value.push(...list);
+      store.formAddProject.plannedGoals = plannedGoals.value;
+    } else {
+      const data = [];
+      data.push(formGroupTarget);
+      const list = data.map((e) => ({
+        groupTarget: e.groupTarget,
+        groupTargetSub: e.groupTargetSub,
+        position: e.position,
+        posTypeActualId: e.posType,
+        posLevelActualId: e.level,
+        type: e.type,
+        amount: Number(e.amount),
+      }));
+      actualGoals.value.push(...list);
+      store.formAddProject.actualGoals = actualGoals.value;
+    }
+    setTimeout(() => {
+      success($q, "บันทึกข้อมูลสำเร็จ");
+      onClickCloseDialog();
+    }, 500);
   });
 }
 
 function onSubmitRelate() {
   dialogConfirm($q, () => {
     success($q, "บันทึกข้อมูลสำเร็จ");
+    if (isTarget.value === "planned") {
+      const data = [];
+      data.push(formGroupRelate);
+      const list = data.map((e) => ({
+        groupTarget: e.relate,
+        amount: Number(e.amount),
+      }));
+      plannedPeoples.value.push(...list);
+      store.formAddProject.plannedPeoples = plannedPeoples.value;
+    } else {
+      const data = [];
+      data.push(formGroupRelate);
+      const list = data.map((e) => ({
+        groupTarget: e.relate,
+        amount: Number(e.amount),
+      }));
+      actualPeoples.value.push(...list);
+      store.formAddProject.actualPeoples = actualPeoples.value;
+    }
     onClickCloseDialog();
   });
 }
 
-function onclickDelete() {
+function onclickDelete(index: number, type: string) {
   dialogRemove($q, () => {
+    switch (type) {
+      case "plannedGoals":
+        plannedGoals.value.splice(index, 1);
+        break;
+      case "plannedPeoples":
+        plannedPeoples.value.splice(index, 1);
+        break;
+      case "actualGoals":
+        actualGoals.value.splice(index, 1);
+        break;
+      case "actualPeoples":
+        actualPeoples.value.splice(index, 1);
+        break;
+
+      default:
+        break;
+    }
+
     success($q, "ลบข้อมูลสำเร็จ");
   });
 }
@@ -211,8 +310,47 @@ function updatePosTypeName(id: string) {
   formGroupTarget.level = "";
 }
 
+function updateGroupTarget(val: string) {
+  if (val === "OUTSIDERS") {
+    formGroupTarget.groupTargetSub = "NONE";
+    formGroupTarget.position = "";
+    formGroupTarget.posType = null;
+    formGroupTarget.level = null;
+  } else formGroupTarget.groupTargetSub = "";
+}
+
+function convertNameGoals(id: string) {
+  const data = groupOp.value.find((e: DataOption) => e.id === id);
+  return data && data?.name;
+}
+
+function convertNamePeoples(id: string) {
+  const data = peoplesOp.value.find((e: DataOption) => e.id === id);
+  return data && data?.name;
+}
+
+function convertTypeGoals(id: string) {
+  const data = posTypeMain.value.find((e: ResGroup) => e.id === id);
+  return data && data?.posTypeName;
+}
+
 onMounted(() => {
-  console.log("เป้าหมาย");
+  fetchType();
+  plannedGoals.value = store.formAddProject.plannedGoals
+    ? store.formAddProject.plannedGoals
+    : [];
+
+  plannedPeoples.value = store.formAddProject.plannedPeoples
+    ? store.formAddProject.plannedPeoples
+    : [];
+
+  actualGoals.value = store.formAddProject.actualGoals
+    ? store.formAddProject.actualGoals
+    : [];
+
+  actualPeoples.value = store.formAddProject.actualPeoples
+    ? store.formAddProject.actualPeoples
+    : [];
 });
 </script>
 <template>
@@ -223,13 +361,17 @@ onMounted(() => {
       <q-btn flat round dense icon="add" color="primary">
         <q-menu>
           <q-list style="min-width: 100px">
-            <q-item clickable v-close-popup @click="onClickOpenDialog('group')">
+            <q-item
+              clickable
+              v-close-popup
+              @click="onClickOpenDialog('group', 'planned')"
+            >
               <q-item-section>กลุ่มเป้าหมาย</q-item-section>
             </q-item>
             <q-item
               clickable
               v-close-popup
-              @click="onClickOpenDialog('relate')"
+              @click="onClickOpenDialog('relate', 'planned')"
             >
               <q-item-section>ผู้เกี่ยวข้อง</q-item-section>
             </q-item>
@@ -245,8 +387,8 @@ onMounted(() => {
         <d-table
           for="table"
           ref="table"
-          :columns="columnsGroup"
-          :rows="rows1"
+          :columns="columnsPlannedGoals"
+          :rows="plannedGoals"
           row-key="id"
           flat
           bordered
@@ -276,7 +418,7 @@ onMounted(() => {
                   dense
                   icon="delete"
                   color="red"
-                  @click="onclickDelete"
+                  @click="onclickDelete(props.rowIndex, 'plannedGoals')"
                 >
                   <q-tooltip>ลบข้อมูล</q-tooltip>
                 </q-btn>
@@ -291,7 +433,7 @@ onMounted(() => {
           for="table"
           ref="table"
           :columns="columnsRelated"
-          :rows="rows2"
+          :rows="plannedPeoples"
           row-key="id"
           flat
           bordered
@@ -321,7 +463,7 @@ onMounted(() => {
                   dense
                   icon="delete"
                   color="red"
-                  @click="onclickDelete"
+                  @click="onclickDelete(props.rowIndex, 'plannedPeoples')"
                 >
                   <q-tooltip>ลบข้อมูล</q-tooltip>
                 </q-btn>
@@ -340,13 +482,17 @@ onMounted(() => {
       <q-btn flat round dense icon="add" color="primary">
         <q-menu>
           <q-list style="min-width: 100px">
-            <q-item clickable v-close-popup @click="onClickOpenDialog('group')">
+            <q-item
+              clickable
+              v-close-popup
+              @click="onClickOpenDialog('group', 'actual')"
+            >
               <q-item-section>กลุ่มเป้าหมาย</q-item-section>
             </q-item>
             <q-item
               clickable
               v-close-popup
-              @click="onClickOpenDialog('relate')"
+              @click="onClickOpenDialog('relate', 'actual')"
             >
               <q-item-section>ผู้เกี่ยวข้อง</q-item-section>
             </q-item>
@@ -362,8 +508,8 @@ onMounted(() => {
         <d-table
           for="table"
           ref="table"
-          :columns="columnsGroup"
-          :rows="rows3"
+          :columns="columnsActualGoals"
+          :rows="actualGoals"
           row-key="id"
           flat
           bordered
@@ -393,7 +539,7 @@ onMounted(() => {
                   dense
                   icon="delete"
                   color="red"
-                  @click="onclickDelete"
+                  @click="onclickDelete(props.rowIndex, 'actualGoals')"
                 >
                   <q-tooltip>ลบข้อมูล</q-tooltip>
                 </q-btn>
@@ -408,7 +554,7 @@ onMounted(() => {
           for="table"
           ref="table"
           :columns="columnsRelated"
-          :rows="rows4"
+          :rows="actualPeoples"
           row-key="id"
           flat
           bordered
@@ -438,7 +584,7 @@ onMounted(() => {
                   dense
                   icon="delete"
                   color="red"
-                  @click="onclickDelete"
+                  @click="onclickDelete(props.rowIndex, 'actualPeoples')"
                 >
                   <q-tooltip>ลบข้อมูล</q-tooltip>
                 </q-btn>
@@ -470,18 +616,26 @@ onMounted(() => {
                 map-options
                 emit-value
                 lazy-rules
+                @update:model-value="updateGroupTarget"
                 :rules="[
                 (val:string) =>
                   !!val || `${'กรุณาเลือกกลุ่มเป้าหมาย'}`,
               ]"
               />
             </div>
-            <div class="col-xs-6 col-sm-6 col-md-6">
+            <div
+              class="col-xs-6 col-sm-6 col-md-6"
+              v-if="formGroupTarget.groupTarget !== 'OUTSIDERS'"
+            >
               <q-select
                 dense
                 outlined
                 v-model="formGroupTarget.groupTargetSub"
-                :options="groupSubOp"
+                :options="
+                  formGroupTarget.groupTarget === 'OFFICER'
+                    ? groupSubOp.slice(0, 2)
+                    : groupSubOp.slice(2, 4)
+                "
                 label="กลุ่มเป้าหมายย่อย"
                 hide-bottom-space
                 lazy-rules
@@ -495,7 +649,11 @@ onMounted(() => {
               ]"
               />
             </div>
-            <div class="col-xs-6 col-sm-4 col-md-4">
+
+            <div
+              class="col-xs-6 col-sm-4 col-md-4"
+              v-if="formGroupTarget.groupTarget !== 'OUTSIDERS'"
+            >
               <q-input
                 outlined
                 dense
@@ -508,7 +666,10 @@ onMounted(() => {
               ]"
               />
             </div>
-            <div class="col-xs-6 col-sm-4 col-md-4">
+            <div
+              class="col-xs-6 col-sm-4 col-md-4"
+              v-if="formGroupTarget.groupTarget !== 'OUTSIDERS'"
+            >
               <q-select
                 dense
                 outlined
@@ -529,7 +690,10 @@ onMounted(() => {
         ]"
               />
             </div>
-            <div class="col-xs-6 col-sm-4 col-md-4">
+            <div
+              class="col-xs-6 col-sm-4 col-md-4"
+              v-if="formGroupTarget.groupTarget !== 'OUTSIDERS'"
+            >
               <q-select
                 dense
                 outlined
@@ -549,7 +713,10 @@ onMounted(() => {
       ]"
               />
             </div>
-            <div class="col-xs-6 col-sm-6 col-md-8">
+            <div
+              class="col-xs-6 col-sm-6 col-md-8"
+              v-if="formGroupTarget.groupTarget === 'OUTSIDERS'"
+            >
               <q-input
                 outlined
                 dense
@@ -609,10 +776,14 @@ onMounted(() => {
                 dense
                 outlined
                 v-model="formGroupRelate.relate"
-                :options="options"
+                :options="peoplesOp"
                 label="ผู้เกี่ยวข้อง"
                 hide-bottom-space
                 lazy-rules
+                option-label="name"
+                option-value="id"
+                map-options
+                emit-value
                 :rules="[
                 (val:string) =>
                   !!val || `${'กรุณาเลือกผู้เกี่ยวข้อง'}`,
diff --git a/src/modules/15_development/interface/request/Main.ts b/src/modules/15_development/interface/request/Main.ts
index f2b500b0b..8a0a98889 100644
--- a/src/modules/15_development/interface/request/Main.ts
+++ b/src/modules/15_development/interface/request/Main.ts
@@ -17,8 +17,8 @@ interface FormGroupTarget {
   groupTarget: string;
   groupTargetSub: string;
   position: string;
-  posType: string;
-  level: string;
+  posType: string | null;
+  level: string | null;
   type: string;
   amount: number | null;
 }
@@ -86,8 +86,79 @@ interface FormAddHistoryProject {
   [key: string]: any;
 }
 
+/** form เพิ่มรายการโครงการ/หลักสูตรการฝึกอบรม*/
+interface FormAddProject {
+  year: number;
+  projectName: string;
+  reason: string;
+  objective: string;
+  metricType: string;
+  indicators: string;
+  target: string;
+  calculation: string;
+  measuRement: string;
+  results: string;
+  obstacles: string;
+  suggestions: string;
+  project: string;
+  isPassAllocate: boolean;
+  isPassNoAllocate: boolean;
+  isNoPass: boolean;
+  isBudget: boolean;
+  isOutBudget: boolean;
+  dateStart: Date | null;
+  dateEnd: Date | null;
+  totalDate: number | null;
+  address: string;
+  provinceId: string | null;
+  budget: string;
+  accept: number | null;
+  receive: number | null;
+  approved: number | null;
+  budgetPay: number | null;
+  issues: string;
+  chance: string;
+  effects: string;
+  riskLevel: string;
+  riskManagement: string;
+  expect: string;
+  topicAcademic: string;
+  addressAcademic: string;
+  provinceActualId: string | null;
+  actualPeoples: People[];
+  plannedPeoples: People[];
+  actualGoals: actualGoals[];
+  plannedGoals: PlannedGoals[];
+}
+
+interface People {
+  groupTarget: string;
+  amount: number | null;
+}
+
+interface actualGoals {
+  groupTarget: string;
+  groupTargetSub: string;
+  position: string;
+  posTypeActualId: string | null;
+  posLevelActualId: string | null;
+  type: string;
+  amount: number | null;
+}
+
+interface PlannedGoals {
+  groupTarget: string;
+  groupTargetSub: string;
+  position: string;
+  posTypePlannedId: string | null;
+  posLevelPlannedId: string | null;
+  type: string;
+  amount: number | null;
+}
+
 export type {
   FormQueryListProject,
+  FormAddProject,
   FormBasicinfo,
   FormGroupTarget,
   FormGroupRelate,
diff --git a/src/modules/15_development/store/developmentStore.ts b/src/modules/15_development/store/developmentStore.ts
index 406547c37..c3f61d9cf 100644
--- a/src/modules/15_development/store/developmentStore.ts
+++ b/src/modules/15_development/store/developmentStore.ts
@@ -1,16 +1,107 @@
 import { defineStore } from "pinia";
-import { ref } from "vue";
+import { reactive, ref } from "vue";
 
 import type { QTableProps } from "quasar";
+import type { FormAddProject } from "@/modules/15_development/interface/request/Main";
 
 // store
 export const useDevelopmentDataStore = defineStore(
   "developmentDataStore",
   () => {
+    const formAddProject = reactive<FormAddProject>({
+      year: new Date().getFullYear(), //ปีงบประมาณ*
+      projectName: "", //ชื่อโครงการ/กิจกรรม/หลักสูตร*
+      reason: "", //หลักการและเหตุผล
+      objective: "", //วัตถุประสงค์
+      metricType: "", //ประเภทตัวชี้วัด
+      indicators: "", //ตัวชี้วัด
+      target: "", //เป้าหมาย
+      calculation: "", //วิธีการคำนวณ/เครื่องมือ
+      measuRement: "", //ระยะเวลาวัดผล
+      results: "", //ผลการดำเนิน
+      obstacles: "", //ปัญหาอุปสรรค
+      suggestions: "", //ข้อเสนอเเนะfalse
+      project: "", //ประเภทโครงการ(โครงการที่เสนอขอ TN->OFFER ,โครงการที่ไม่เสนอขอ TN->NOOFFER)
+      isPassAllocate: false, //ผ่านการพิจาณา ได้รับการจัดสรรงบประมาณตามข้อบัญญัติ
+      isPassNoAllocate: false, //ผ่านการพิจารณา ไม่ได้รับการจัดสรรงบประมาณตามข้อบัญญัติ แต่ได้รับการจัดสรรเงินนอกงบประมาณ
+      isNoPass: false, //ไม่ผ่านการพิจารณา แต่ได้รับการจัดสรรเงินนอกงบประมาณ
+      isBudget: false, //แต่ได้รับการจัดสรรงบประมาณตามข้อบัญญัติ
+      isOutBudget: false, //แต่ได้รับการจัดสรรเงินนอกงบประมาณ
+      dateStart: null, //วันที่เริ่มต้น
+      dateEnd: null, //วันที่สิ้นสุด
+      totalDate: null, //รวมระยะเวลา (วัน)
+      address: "", //ที่อยู่
+      provinceId: null, //จังหวัด
+      budget: "", //ประเภทงบประมาณ(งบตามข้อบัญญัติ->REGULATIONBUDGET, งบประมาณกรุงเทพมหานคร->BANGKOKBUDGET, เงินนอกงบประมาณ->OUTSIDEBUDGET)
+      accept: null, //จํานวนงบประมาณที่ขอรับการจัดสรรฯ
+      receive: null, //จํานวนงบประมาณที่ได้รับการจัดสรรฯ
+      approved: null, //จํานวนงบประมาณที่ได้รับอนุมัติ
+      budgetPay: null, //จํานวนงบประมาณที่จ่ายจริง
+      issues: "", //ประเด็นความเสี่ยง
+      chance: "", //โอกาสที่จะเกิด
+      effects: "", //ผลกระทบจากการเกิด
+      riskLevel: "", //ระดับความเสี่ยง
+      riskManagement: "", //เเนวทางการบริหารความเสี่ยง
+      expect: "", //ประโยชน์ที่คาดว่าจะได้รับ
+      topicAcademic: "", //หัวข้อ/ประเด็นการฝึกอบรม ศึกษาดูงาน
+      addressAcademic: "", //สถานที่ฝึกอบรม ศึกษาดูงาน
+      provinceActualId: null, //จังหวัด(ข้อมูลวิชาการ)
+      actualPeoples: [
+        // {
+        //   groupTarget: "", //ผู้เกี่ยวข้อง(เจ้าหน้าที่ดําเนินการ->OPERATOR, วิทยากร->LECTURER, ผู้สังเกตการณ์->OBSERVER)
+        //   amount: null, //จำนวน(คน)
+        // },
+      ], //เป้าหมายตามจริง ผู้เกี่ยวข้อง
+      plannedPeoples: [
+        // {
+        //   groupTarget: "", //ผู้เกี่ยวข้อง(เจ้าหน้าที่ดําเนินการ->OPERATOR, วิทยากร->LECTURER, ผู้สังเกตการณ์->OBSERVER)
+        //   amount: null, //จำนวน(คน)
+        // },
+      ], //เป้าหมายตามแผน ผู้เกี่ยวข้อง
+      actualGoals: [
+        // {
+        //   groupTarget: "", //กลุ่มเป้าหมาย(ข้าราชการกรุงเทพมหานคร->OFFICER, บุคลากรกรุงเทพมหานคร->PERSONNEL, บุคคลภายนอก->OUTSIDERS)
+        //   groupTargetSub: "", //กลุ่มเป้าหมายย่อย(ข้าราชการกรุงเทพมหานครสามัญ->OFFICER, ข้าราชการครู->TEACHER, กรุงเทพมหานคร(ลูกจ้างประจํา,ลูกจ้างชวคราว)->EMPLOYEE, บุคลากรทางการศึกษากรุงเทพมหานคร->EDUCATIONAL, ไม่มีกลุ่มเป้าหมายย่อย->NONE)
+        //   position: "", //ตำแหน่ง
+        //   posTypeActualId: null, //ประเภทตำแหน่ง
+        //   posLevelActualId: null, //ระดับ
+        //   type: "", //ประเภท(กลุ่มอาชีพ คุณสมบัติ)
+        //   amount: null, //จำนวน(คน)
+        // },
+      ], //เป้าหมายตามจริง กลุ่มเป้าหมาย
+      plannedGoals: [
+        // {
+        //   groupTarget: "", //กลุ่มเป้าหมาย(ข้าราชการกรุงเทพมหานคร->OFFICER, บุคลากรกรุงเทพมหานคร->PERSONNEL, บุคคลภายนอก->OUTSIDERS)
+        //   groupTargetSub: "", //กลุ่มเป้าหมายย่อย(ข้าราชการกรุงเทพมหานครสามัญ->OFFICER, ข้าราชการครู->TEACHER, กรุงเทพมหานคร(ลูกจ้างประจํา,ลูกจ้างชวคราว)->EMPLOYEE, บุคลากรทางการศึกษากรุงเทพมหานคร->EDUCATIONAL, ไม่มีกลุ่มเป้าหมายย่อย->NONE)
+        //   position: "", //ตำแหน่ง
+        //   posTypePlannedId: null, //ประเภทตำแหน่ง
+        //   posLevelPlannedId: null, //ระดับ
+        //   type: "", //ประเภท(กลุ่มอาชีพ คุณสมบัติ)
+        //   amount: null, //จำนวน(คน)
+        // },
+      ], //เป้าหมายตามแผน กลุ่มเป้าหมาย
+    });
+
+    function clearFormAddProject() {
+      /** ข้อมูลเบื้องต้น*/
+      formAddProject.year = new Date().getFullYear();
+      formAddProject.projectName = "";
+      formAddProject.reason = " ";
+      formAddProject.objective = "";
+
+      /**เป้าหมาย*/
+      formAddProject.plannedGoals = [];
+      formAddProject.plannedPeoples = [];
+      formAddProject.actualGoals = [];
+      formAddProject.actualPeoples = [];
+    }
+
     const visibleColumns = ref<string[]>([]);
     const columns = ref<QTableProps["columns"]>([]);
     const rows = ref<any[]>([]);
     return {
+      formAddProject,
+      clearFormAddProject,
       visibleColumns,
       columns,
       rows,
diff --git a/src/modules/15_development/views/MainPage.vue b/src/modules/15_development/views/MainPage.vue
index 202f43027..99e291931 100644
--- a/src/modules/15_development/views/MainPage.vue
+++ b/src/modules/15_development/views/MainPage.vue
@@ -30,7 +30,7 @@ const columns = ref<QTableProps["columns"]>([
     sortable: true,
     field: "year",
     headerStyle: "font-size: 14px",
-    style: "font-size: 14px ;width: 10%",
+    style: "font-size: 14px ; width:10%",
     format: (val) => val + 543,
   },
   {
@@ -40,7 +40,7 @@ const columns = ref<QTableProps["columns"]>([
     sortable: true,
     field: "projectName",
     headerStyle: "font-size: 14px",
-    style: "font-size: 14px;width: 45%",
+    style: "font-size: 14px;width:45% ",
   },
 
   {
@@ -50,7 +50,7 @@ const columns = ref<QTableProps["columns"]>([
     sortable: true,
     field: "org",
     headerStyle: "font-size: 14px",
-    style: "font-size: 14px ;width: 45%",
+    style: "font-size: 14px ; width:45% ",
   },
 ]);
 const visibleColumns = ref<string[]>(["year", "projectName", "org"]);
@@ -114,7 +114,7 @@ function fetchListProject() {
  * @param id รายการโครงการ
  */
 function onClickAddOrView(status: boolean = false, id: string = "") {
-  status ? router.push(`development/${id}`) : router.push("development/add");
+  status ? router.push(`/development/${id}`) : router.push("/development/add");
 }
 
 /**
diff --git a/src/modules/15_development/views/Scholarship.vue b/src/modules/15_development/views/Scholarship.vue
index 96b740623..aabaf3588 100644
--- a/src/modules/15_development/views/Scholarship.vue
+++ b/src/modules/15_development/views/Scholarship.vue
@@ -4,11 +4,9 @@ import { useQuasar, type QTableProps } from "quasar";
 import { useRouter } from "vue-router";
 
 /** importStore*/
-
 import { useCounterMixin } from "@/stores/mixin";
 
 /** use*/
-
 const $q = useQuasar();
 const router = useRouter();
 const { showLoader, hideLoader } = useCounterMixin();