diff --git a/src/modules/15_development/components/Record.vue b/src/modules/15_development/components/Record.vue
index 954df7897..fd41c5a14 100644
--- a/src/modules/15_development/components/Record.vue
+++ b/src/modules/15_development/components/Record.vue
@@ -1,10 +1,25 @@
 <script setup lang="ts">
 import { ref, reactive, onMounted } from "vue";
+import { useRoute } from "vue-router";
 import { useCounterMixin } from "@/stores/mixin";
+import http from "@/plugins/http";
+import config from "@/app.config";
+import axios from "axios";
 import type { QTableProps } from "quasar";
+import { useQuasar } from "quasar";
 const mixin = useCounterMixin();
-
-const { date2Thai } = mixin;
+const route = useRoute();
+const $q = useQuasar();
+const id = ref<string>(route.params.id ? route.params.id.toString() : "");
+const {
+  success,
+  messageError,
+  showLoader,
+  hideLoader,
+  dialogConfirm,
+  dialogRemove,
+  date2Thai,
+} = mixin;
 const columns = ref<QTableProps["columns"]>([
   {
     name: "idcard",
@@ -108,6 +123,7 @@ const columns = ref<QTableProps["columns"]>([
   },
 ]);
 
+const fileList = ref<File[]>([]);
 const visibleColumns = ref<string[]>([
   "idcard",
   "fullName",
@@ -119,7 +135,7 @@ const visibleColumns = ref<string[]>([
   "refCommandNo",
   "refCommandDate",
 ]);
-const files = ref<File[]>([]);
+const files = ref<any>([]);
 const pagination = ref({
   page: 1,
   rowsPerPage: 10,
@@ -153,6 +169,79 @@ const row = [
     refCommandDate: new Date(),
   },
 ];
+
+async function clickUpload(file: any) {
+  const fileName = { fileName: file.name };
+
+  dialogConfirm(
+    $q,
+    async () => {
+      const selectedFile = file;
+      const formdata = new FormData();
+      formdata.append("file", selectedFile);
+      await http
+        .post(config.API.file("พัฒนาบุคลาการ", "บันทึกผล", id.value), {
+          replace: false,
+          fileList: fileName,
+        })
+        .then(async (res) => {
+          const foundKey: string | undefined = Object.keys(res.data).find(
+            (key) =>
+              res.data[key]?.fileName !== undefined &&
+              res.data[key]?.fileName !== ""
+          );
+          foundKey && uploadFileDoc(res.data[foundKey]?.uploadUrl, files.value);
+        })
+        .catch((err) => {
+          messageError($q, err);
+        });
+    },
+    "ยืนยันการอัปโหลดไฟล์",
+    "ต้องการยืนยันการอัปโหลดไฟล์นี้หรือไม่ ?"
+  );
+}
+
+async function getData() {
+  showLoader();
+  await http
+    .get(config.API.file("พัฒนาบุคลาการ", "บันทึกผล", id.value))
+    .then((res) => {
+      fileList.value = res.data;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+async function uploadFileDoc(uploadUrl: string, file: any) {
+  const Data = new FormData();
+  Data.append("file", files.value);
+  showLoader();
+  await axios
+    .put(uploadUrl, file, {
+      headers: {
+        "Content-Type": file.type,
+      },
+    })
+    .then((res) => {
+      success($q, "อัปโหลดไฟล์สำเร็จ");
+      getData();
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+      files.value = null;
+    });
+}
+
+onMounted(() => {
+  // getData();
+});
 </script>
 
 <template>
@@ -160,18 +249,26 @@ const row = [
     <q-file
       v-model="files"
       dense
-      label="'อัปโหลดไฟล์"
+      label="อัปโหลดไฟล์"
       outlined
-      use-chips
       accept=".xlsx"
-      multiple
+      hide-bottom-space
+      clearable
       class="col-xs-12 col-sm-4"
     >
       <template v-slot:prepend>
         <q-icon name="attach_file" color="blue" />
       </template>
     </q-file>
-    <q-btn size="md" icon="mdi-upload" round flat color="blue">
+    <q-btn
+      v-if="files"
+      size="md"
+      icon="mdi-upload"
+      round
+      flat
+      color="blue"
+      @click="clickUpload(files)"
+    >
       <q-tooltip>อัปโหลดไฟล์</q-tooltip>
     </q-btn>
     <q-space />
diff --git a/src/modules/15_development/components/Target.vue b/src/modules/15_development/components/Target.vue
index 348d1f304..bc0474b9d 100644
--- a/src/modules/15_development/components/Target.vue
+++ b/src/modules/15_development/components/Target.vue
@@ -192,7 +192,11 @@ function fetchType() {
 function onClickOpenDialog(type: string, target: string) {
   isTarget.value = target;
   if (type === "group") {
-    newModalGroupTarget.value = true;
+    if (target === "planned") {
+      newModalGroupTarget.value = true;
+    } else {
+      modalGroupTarget.value = true;
+    }
   } else {
     modalRelate.value = true;
   }
@@ -295,6 +299,7 @@ function cleanFormData() {
 
 function onClickCloseDialog() {
   newModalGroupTarget.value = false;
+  modalGroupTarget.value = false;
   groupTargetData.targetData = [{}];
   modalRelate.value = false;
   cleanFormData();
@@ -571,7 +576,7 @@ onMounted(() => {
                     () => {
                       isEdit = true;
                       rowIndex = props.rowIndex;
-                      newModalGroupTarget = true;
+                      modalGroupTarget = true;
                     }
                   "
                 >
@@ -643,7 +648,10 @@ onMounted(() => {
   <q-dialog v-model="modalGroupTarget" persistent>
     <q-card style="width: 700px">
       <q-form greedy @submit.prevent @validation-success="onSubmitGroup">
-        <DialogHeader tittle="เพิ่มกลุ่มเป้าหมาย" :close="onClickCloseDialog" />
+        <DialogHeader
+          :tittle="isEdit ? 'แก้ไขกลุ่มเป้าหมาย' : 'เพิ่มกลุ่มเป้าหมาย'"
+          :close="onClickCloseDialog"
+        />
         <q-separator />
         <q-card-section class="q-p-sm">
           <div class="row col-12 q-col-gutter-md">
@@ -819,9 +827,7 @@ onMounted(() => {
     <q-card style="width: 700px">
       <q-form greedy @submit.prevent @validation-success="onSubmitGroup">
         <DialogHeader
-          :tittle="
-            isEdit ? 'แก้ไขกลุ่มเป้าหมาย (ใหม่)' : 'เพิ่มกลุ่มเป้าหมาย (ใหม่)'
-          "
+          :tittle="isEdit ? 'แก้ไขกลุ่มเป้าหมาย' : 'เพิ่มกลุ่มเป้าหมาย'"
           :close="onClickCloseDialog"
         />
         <q-separator />
@@ -875,6 +881,39 @@ onMounted(() => {
               ]"
               />
             </div>
+            <div
+              class="col-xs-6 col-sm-6 col-md-8"
+              v-if="formGroupTarget.groupTarget === 'OUTSIDERS'"
+            >
+              <q-input
+                outlined
+                dense
+                class="inputgreen"
+                hide-bottom-space
+                v-model="formGroupTarget.type"
+                label="ประเภท(กลุ่มอาชีพ คุณสมบัติ)"
+                :rules="[
+              (val:string) =>
+                !!val || `${'กรุณากรอกประเภท(กลุ่มอาชีพ คุณสมบัติ)'}`,
+            ]"
+              />
+            </div>
+            <div class="col-xs-6 col-sm-6 col-md-4">
+              <q-input
+                outlined
+                dense
+                hide-bottom-space
+                class="inputgreen"
+                v-model="formGroupTarget.amount"
+                label="จำนวน(คน)"
+                mask="#"
+                reverse-fill-mask
+                :rules="[
+              (val:string) =>
+                !!val || `${'กรุณากรอกจำนวน(คน)'}`,
+            ]"
+              />
+            </div>
             <div
               class="col-12 row items-center"
               v-if="formGroupTarget.groupTarget !== 'OUTSIDERS'"
@@ -978,39 +1017,6 @@ onMounted(() => {
                 </q-btn>
               </div>
             </div>
-            <div
-              class="col-xs-6 col-sm-6 col-md-8"
-              v-if="formGroupTarget.groupTarget === 'OUTSIDERS'"
-            >
-              <q-input
-                outlined
-                dense
-                class="inputgreen"
-                hide-bottom-space
-                v-model="formGroupTarget.type"
-                label="ประเภท(กลุ่มอาชีพ คุณสมบัติ)"
-                :rules="[
-              (val:string) =>
-                !!val || `${'กรุณากรอกประเภท(กลุ่มอาชีพ คุณสมบัติ)'}`,
-            ]"
-              />
-            </div>
-            <div class="col-xs-6 col-sm-6 col-md-4">
-              <q-input
-                outlined
-                dense
-                hide-bottom-space
-                class="inputgreen"
-                v-model="formGroupTarget.amount"
-                label="จำนวน(คน)"
-                mask="#"
-                reverse-fill-mask
-                :rules="[
-              (val:string) =>
-                !!val || `${'กรุณากรอกจำนวน(คน)'}`,
-            ]"
-              />
-            </div>
           </div>
         </q-card-section>
         <q-separator />