From c91843cebad80ad8138e864b673b96984c85c968 Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Tue, 30 Jul 2024 18:07:41 +0700
Subject: [PATCH] =?UTF-8?q?=E0=B8=9A=E0=B8=B1=E0=B8=99=E0=B8=97=E0=B8=B6?=
 =?UTF-8?q?=E0=B8=81=E0=B8=9C=E0=B8=A5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 public/default-บันทึกผล.xlsx                    | Bin 0 -> 9763 bytes
 src/api/15_development/api.development.ts     |   1 +
 .../components/DialogRecordPerson.vue         | 483 ++++++++++++++++++
 .../15_development/components/Record.vue      | 248 ++++-----
 .../15_development/interface/response/Main.ts |  11 +
 src/modules/15_development/router.ts          |  14 +
 .../15_development/store/developmentStore.ts  |   2 +
 src/modules/15_development/views/MainPage.vue |  67 ++-
 .../15_development/views/RecordPage.vue       | 262 ++++++++++
 9 files changed, 918 insertions(+), 170 deletions(-)
 create mode 100644 public/default-บันทึกผล.xlsx
 create mode 100644 src/modules/15_development/components/DialogRecordPerson.vue
 create mode 100644 src/modules/15_development/views/RecordPage.vue

diff --git a/public/default-บันทึกผล.xlsx b/public/default-บันทึกผล.xlsx
new file mode 100644
index 0000000000000000000000000000000000000000..4c6b57256475ecdb225ac5becf2579d59efe2464
GIT binary patch
literal 9763
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

literal 0
HcmV?d00001

diff --git a/src/api/15_development/api.development.ts b/src/api/15_development/api.development.ts
index f7649aa45..5bc9fab8d 100644
--- a/src/api/15_development/api.development.ts
+++ b/src/api/15_development/api.development.ts
@@ -24,6 +24,7 @@ export default {
   developmentMainById: (id: string) => `${development}/main/${id}`,
   developmentMainTab: (tab: string, id: string) =>
     `${development}/main/${tab}/${id}`,
+  devUploadUser: `${development}/main/uploadUser/`,
 
   /** ทุนการศึกษา/ฝึกอบรม*/
   devScholarship,
diff --git a/src/modules/15_development/components/DialogRecordPerson.vue b/src/modules/15_development/components/DialogRecordPerson.vue
new file mode 100644
index 000000000..290aa1f9a
--- /dev/null
+++ b/src/modules/15_development/components/DialogRecordPerson.vue
@@ -0,0 +1,483 @@
+<script setup lang="ts">
+import { ref, reactive, watch } from "vue";
+import { useQuasar } from "quasar";
+import { useRoute } from "vue-router";
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+/**
+ * importType
+ */
+import type { DataOption } from "@/modules/15_development/interface/index/Main";
+import type { ResPrefix } from "@/modules/15_development/interface/response/Main";
+/**
+ * importComponents
+ */
+import DialogHeader from "@/components/DialogHeader.vue";
+
+/** importStore*/
+import { useCounterMixin } from "@/stores/mixin";
+
+const $q = useQuasar();
+const route = useRoute();
+const {
+  dialogConfirm,
+  success,
+  messageError,
+  showLoader,
+  hideLoader,
+  date2Thai,
+  calculateDurationYmd,
+} = useCounterMixin();
+
+/**
+ * props
+ */
+const modal = defineModel<boolean>("modal", { required: true });
+const tab = defineModel<string>("tab", { required: true });
+
+const props = defineProps({
+  fetchData: { type: Function, required: true },
+});
+
+const projectId = ref<string>(route.params.id.toString());
+const formData = reactive({
+  type: "",
+  citizenId: "",
+  prefix: "",
+  firstName: "",
+  lastName: "",
+  position: "",
+  org: "",
+  dateStart: null,
+  dateEnd: null,
+  trainingDays: "",
+  commandNumber: "",
+  commandDate: null,
+});
+
+/** Option*/
+const typeOpsMain = ref<DataOption[]>([
+  {
+    id: "OFFICER",
+    name: "ขรก.กทม. สามัญ",
+  },
+  {
+    id: "EMPLOYEE",
+    name: "ลูกจ้างประจำ",
+  },
+]);
+const typeOps = ref<DataOption[]>(typeOpsMain.value);
+const prefixOpsMain = ref<DataOption[]>([]);
+const prefixOps = ref<DataOption[]>([]);
+
+/**
+ * function บันทึกข้อมูลการเพิ่มราชชื่อ
+ */
+function onSubmit() {
+  dialogConfirm($q, () => {
+    showLoader();
+    http
+      .post(config.API.devUploadUser + projectId.value, formData)
+      .then(async (res) => {
+        await props?.fetchData();
+        tab.value = res.data.result ? "IN" : "OUT";
+        await success($q, "บันทึกข้อมูลสำเร็จ");
+        onCloseDialog();
+      })
+      .catch((err) => {
+        messageError($q, err);
+      })
+      .finally(() => {
+        hideLoader();
+      });
+  });
+}
+
+/**
+ * function ค้นหาข้อมูล Option
+ * @param val คำค้นหา
+ * @param update function
+ * @param refData ประเภท
+ */
+const filterSelector = (val: string, update: Function, refData: string) => {
+  switch (refData) {
+    case "type":
+      update(() => {
+        typeOps.value = typeOpsMain.value.filter(
+          (v: DataOption) => v.name.indexOf(val) > -1
+        );
+      });
+      break;
+
+    case "prefix":
+      update(() => {
+        prefixOps.value = prefixOpsMain.value.filter(
+          (v: DataOption) => v.name.indexOf(val) > -1
+        );
+      });
+      break;
+
+    default:
+      break;
+  }
+};
+
+/**
+ * function ปิด Dialig และเคลียร์ข้อมูลใน formData
+ */
+function onCloseDialog() {
+  modal.value = false;
+  formData.type = "";
+  formData.citizenId = "";
+  formData.prefix = "";
+  formData.firstName = "";
+  formData.lastName = "";
+  formData.position = "";
+  formData.org = "";
+  formData.dateStart = null;
+  formData.dateEnd = null;
+  formData.trainingDays = "";
+  formData.commandNumber = "";
+  formData.commandDate = null;
+}
+
+/**
+ * function เรียกข้อมูลคำนำหน้าชื่อ
+ */
+function fetchDataPrefix() {
+  showLoader();
+  http
+    .get(config.API.orgPrefix)
+    .then((res) => {
+      const option = res.data.result.map((e: ResPrefix) => ({
+        id: e.id,
+        name: e.name,
+      }));
+      prefixOpsMain.value = option;
+      prefixOps.value = option;
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+/**
+ * callback function ทำงานเมื่อเลือกวันเริ่มต้นและวันาสิ้นสุด จะคำนวนจำนวนวันที่อบรม
+ */
+watch(
+  () => [formData.dateStart, formData.dateEnd],
+  () => {
+    if (formData.dateStart && formData.dateEnd) {
+      formData.trainingDays = calculateDurationYmd(
+        formData.dateStart,
+        formData.dateEnd
+      );
+    }
+  }
+);
+
+/**
+ * callback function ทำงานเมื่อ modal = true
+ */
+watch(
+  () => modal.value,
+  () => {
+    if (modal.value) {
+      fetchDataPrefix();
+    }
+  }
+);
+</script>
+
+<template>
+  <q-dialog v-model="modal" persistent>
+    <q-card style="width: 900px; max-width: 80vw">
+      <q-form greedy @submit.prevent @validation-success="onSubmit">
+        <DialogHeader :tittle="'เพิ่มรายชื่อ'" :close="onCloseDialog" />
+        <q-separator />
+        <q-card-section>
+          <div class="row q-col-gutter-md">
+            <div class="col-xs-12 col-sm-6 col-md-6">
+              <q-select
+                dense
+                outlined
+                use-input
+                lazy-rules
+                emit-value
+                map-options
+                hide-bottom-space
+                input-debounce="0"
+                option-label="name"
+                option-value="id"
+                v-model="formData.type"
+                class="inputgreen"
+                :options="typeOps"
+                label="ประเภท"
+                :rules="[(val: string) => !!val || `${'กรุณาเลือกประเภท'}`]"
+                @filter="(inputValue: string,
+              doneFn: Function) => filterSelector(inputValue, doneFn, 'type'
+              )"
+              >
+                <template v-slot:no-option>
+                  <q-item>
+                    <q-item-section class="text-italic text-grey">
+                      ไม่มีข้อมูล
+                    </q-item-section>
+                  </q-item>
+                </template>
+              </q-select>
+            </div>
+            <div class="col-xs-12 col-sm-6 col-md-6">
+              <q-input
+                dense
+                outlined
+                lazy-rules
+                hide-bottom-space
+                maxlength="13"
+                mask="#############"
+                v-model="formData.citizenId"
+                class="inputgreen"
+                label="เลขประจำตัวประชาชน"
+                :rules="[
+                  (val: string) => !!val || `${'กรุณากรอก เลขประจำตัวประชาชน'}`,
+                  (val: string) =>
+                    val.length >= 13 ||
+                    `${'กรุณากรอกเลขประจำตัวประชาชนให้ครบ'}`,
+                ]"
+              />
+            </div>
+            <div class="col-xs-12 col-sm-4 col-md-4">
+              <q-select
+                dense
+                outlined
+                use-input
+                lazy-rules
+                emit-value
+                map-options
+                hide-bottom-space
+                input-debounce="0"
+                option-label="name"
+                option-value="name"
+                v-model="formData.prefix"
+                class="inputgreen"
+                :options="prefixOps"
+                label="คำนำหน้าชื่อ"
+                :rules="[(val: string) => !!val || `${'กรุณาเลือกคำนำหน้าชื่อ'}`]"
+                @filter="(inputValue: string,
+                doneFn: Function) => filterSelector(inputValue, doneFn, 'prefix'
+                )"
+              >
+                <template v-slot:no-option>
+                  <q-item>
+                    <q-item-section class="text-italic text-grey">
+                      ไม่มีข้อมูล
+                    </q-item-section>
+                  </q-item>
+                </template>
+              </q-select>
+            </div>
+            <div class="col-xs-12 col-sm-4 col-md-4">
+              <q-input
+                dense
+                outlined
+                lazy-rules
+                hide-bottom-space
+                v-model="formData.firstName"
+                class="inputgreen"
+                label="ชื่อ"
+                :rules="[
+                  (val: string) => !!val || `${'กรุณากรอกชื่อ'}`]"
+              />
+            </div>
+            <div class="col-xs-12 col-sm-4 col-md-4">
+              <q-input
+                dense
+                outlined
+                lazy-rules
+                hide-bottom-space
+                v-model="formData.lastName"
+                class="inputgreen"
+                label="นามสกุล"
+                :rules="[
+                (val: string) => !!val || `${'กรุณากรอกนามสกุล'}`]"
+              />
+            </div>
+            <div class="col-xs-12 col-sm-6 col-md-6">
+              <q-input
+                dense
+                outlined
+                lazy-rules
+                hide-bottom-space
+                v-model="formData.position"
+                class="inputgreen"
+                label="ตำแหน่ง"
+              />
+            </div>
+            <div class="col-xs-12 col-sm-6 col-md-6">
+              <q-input
+                dense
+                outlined
+                lazy-rules
+                hide-bottom-space
+                v-model="formData.org"
+                class="inputgreen"
+                label="สังกัด"
+              />
+            </div>
+            <div class="col-xs-12 col-sm-4 col-md-4">
+              <datepicker
+                menu-class-name="modalfix"
+                v-model="formData.dateStart"
+                :locale="'th'"
+                autoApply
+                :enableTimePicker="false"
+                week-start="0"
+                :max-date="formData.dateEnd"
+              >
+                <template #year="{ year }">{{ year + 543 }}</template>
+                <template #year-overlay-value="{ value }">{{
+                  parseInt(value + 543)
+                }}</template>
+                <template #trigger>
+                  <q-input
+                    class="inputgreen"
+                    dense
+                    outlined
+                    :model-value="
+                      formData.dateStart ? date2Thai(formData.dateStart) : null
+                    "
+                    :label="`${'วันที่เริ่มต้น'}`"
+                    :rules="[(val: string) => !!val || `${'กรุณาเลือกวันที่เริ่มต้น'}`]"
+                  >
+                    <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-12 col-sm-4 col-md-4">
+              <datepicker
+                menu-class-name="modalfix"
+                v-model="formData.dateEnd"
+                :locale="'th'"
+                autoApply
+                :enableTimePicker="false"
+                week-start="0"
+                :min-date="formData.dateStart"
+              >
+                <template #year="{ year }">{{ year + 543 }}</template>
+                <template #year-overlay-value="{ value }">{{
+                  parseInt(value + 543)
+                }}</template>
+                <template #trigger>
+                  <q-input
+                    dense
+                    outlined
+                    class="inputgreen"
+                    :model-value="
+                      formData.dateEnd ? date2Thai(formData.dateEnd) : null
+                    "
+                    :label="`${'วันที่สิ้นสุด'}`"
+                    :rules="[(val: string) => !!val || `${'กรุณาเลือกวันที่สิ้นสุด'}`]"
+                  >
+                    <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-12 col-sm-4 col-md-4">
+              <q-input
+                dense
+                outlined
+                lazy-rules
+                hide-bottom-space
+                v-model="formData.trainingDays"
+                class="inputgreen"
+                label="จำนวนวันที่อบรม"
+                :rules="[
+                (val: string) => !!val || `${'กรุณากรอกจำนวนวันที่อบรม'}`]"
+              />
+            </div>
+            <div class="col-xs-12 col-sm-4 col-md-4">
+              <q-input
+                dense
+                outlined
+                lazy-rules
+                hide-bottom-space
+                v-model="formData.commandNumber"
+                class="inputgreen"
+                label="เลขที่คำสั่ง/เลขที่หนังสืออนุมัติ"
+                :rules="[
+                (val: string) => !!val || `${'กรุณากรอกเลขที่คำสั่ง/เลขที่หนังสืออนุมัติ'}`]"
+              />
+            </div>
+            <div class="col-xs-12 col-sm-4 col-md-4">
+              <datepicker
+                menu-class-name="modalfix"
+                v-model="formData.commandDate"
+                :locale="'th'"
+                autoApply
+                :enableTimePicker="false"
+                week-start="0"
+              >
+                <template #year="{ year }">{{ year + 543 }}</template>
+                <template #year-overlay-value="{ value }">{{
+                  parseInt(value + 543)
+                }}</template>
+                <template #trigger>
+                  <q-input
+                    dense
+                    outlined
+                    class="inputgreen"
+                    :model-value="
+                      formData.commandDate
+                        ? date2Thai(formData.commandDate)
+                        : null
+                    "
+                    :label="`${'คำสั่งลงวันที่/หนังสืออนุมัติลงวันที่'}`"
+                    :rules="[(val: string) => !!val || `${'กรุณาเลือกคำสั่งลงวันที่/หนังสืออนุมัติลงวันที่'}`]"
+                  >
+                    <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>
+        </q-card-section>
+        <q-separator />
+
+        <q-card-actions align="right" class="bg-white text-teal">
+          <q-btn id="onSubmit" type="submit" label="บันทึก" color="public">
+            <q-tooltip>บันทึกข้อมูล</q-tooltip>
+          </q-btn>
+        </q-card-actions>
+      </q-form>
+    </q-card>
+  </q-dialog>
+</template>
+
+<style scoped></style>
diff --git a/src/modules/15_development/components/Record.vue b/src/modules/15_development/components/Record.vue
index 0f2c31706..00fa71a37 100644
--- a/src/modules/15_development/components/Record.vue
+++ b/src/modules/15_development/components/Record.vue
@@ -1,14 +1,24 @@
 <script setup lang="ts">
 import { ref, onMounted } from "vue";
 import { useRoute } from "vue-router";
-import { useCounterMixin } from "@/stores/mixin";
+import { useQuasar } from "quasar";
 import http from "@/plugins/http";
 import config from "@/app.config";
+
+/**
+ * importType
+ */
 import type { QTableProps } from "quasar";
-import { useQuasar } from "quasar";
 import type { ResRecord } from "@/modules/15_development/interface/response/Main";
 
-const mixin = useCounterMixin();
+/**
+ * importStore
+ */
+import { useCounterMixin } from "@/stores/mixin";
+
+/**
+ * usec
+ */
 const route = useRoute();
 const $q = useQuasar();
 const id = ref<string>(route.params.id.toString());
@@ -19,8 +29,19 @@ const {
   hideLoader,
   dialogConfirm,
   date2Thai,
-} = mixin;
+} = useCounterMixin();
 
+/**
+ * prosp
+ */
+const isProfile = defineModel<boolean>("isProfile", { required: true });
+const listPerson = defineModel<ResRecord[]>("listPerson", { required: true });
+
+/**
+ * ข้อมุล Table
+ */
+const keyword = ref<string>("");
+const rows = ref<ResRecord[]>([]);
 const columns = ref<QTableProps["columns"]>([
   {
     name: "type",
@@ -170,7 +191,6 @@ const columns = ref<QTableProps["columns"]>([
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
 ]);
-
 const visibleColumns = ref<string[]>([
   "type",
   "idcard",
@@ -186,41 +206,15 @@ const visibleColumns = ref<string[]>([
   "commandNumber",
   "commandDate",
 ]);
-const files = ref<any>(null);
 const pagination = ref({
   page: 1,
   rowsPerPage: 10,
 });
-const keyword = ref<string>("");
-const rows = ref<ResRecord[]>([]);
 
-/** uoload file */
-async function clickUpload(file: any) {
-  dialogConfirm(
-    $q,
-    async () => {
-      showLoader();
-      const selectedFile = file;
-      const formData = new FormData();
-      formData.append("file", selectedFile);
-      await http
-        .post(config.API.developmentMainTab("tab6", id.value), formData)
-        .then(() => {
-          success($q, "อัปโหลดไฟล์สำเร็จ");
-          getData();
-          files.value = null;
-        })
-        .catch((err) => {
-          messageError($q, err);
-          showLoader();
-        });
-    },
-    "ยืนยันการอัปโหลดไฟล์",
-    "ต้องการยืนยันการอัปโหลดไฟล์นี้หรือไม่ ?"
-  );
-}
-
-/** convert status to text */
+/**
+ * convert status to text
+ * @param  val ประเภท
+ */
 function formBmaofficer(val: string) {
   switch (val) {
     case "OFFICER":
@@ -234,90 +228,23 @@ function formBmaofficer(val: string) {
   }
 }
 
-/** ดึงข้อมูล */
-async function getData() {
-  showLoader();
-  await http
-    .get(config.API.developmentMainTab("tab6", id.value))
-    .then((res) => {
-      rows.value = res.data.result;
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(() => {
-      hideLoader();
-    });
-}
-
-/** ส่งไปบันทึกที่ทะเบียนประวัติ */
-function sendRecordRegistry() {
-  // ส่งไปบันทึกที่ทะเบียนประวัติ
-  dialogConfirm(
-    $q,
-    () => {
-      showLoader();
-      http
-        .get(config.API.developmentMainTab("tab6/done", id.value))
-        .then(async () => {
-          await getData();
-          await success($q, "ส่งข้อมูลสำเร็จ");
-        })
-        .catch((e) => {
-          messageError($q, e);
-          hideLoader();
-        });
-    },
-    "ยืนยันการส่งข้อมูลไปบันทึกยังทะเบียนประวัติ",
-    "ต้องการยืนยันการส่งข้อมูลไปบันทึกยังทะเบียนประวัติหรือไม่"
+/**
+ *  function เรียกข้อมูลโครงการ
+ */
+function fetchDataProject() {
+  rows.value = listPerson.value.filter(
+    (e: ResRecord) => e.isProfile === isProfile.value
   );
 }
 
 /** ดึงข้อมูลเมื่อคอมโพเนนต์โหลดเสร็จสมบูรณ์  */
 onMounted(() => {
-  getData();
+  fetchDataProject();
 });
 </script>
 
 <template>
-  <q-toolbar style="padding: 0px" class="text-primary q-mb-xs">
-    <q-file
-      v-model="files"
-      dense
-      label="อัปโหลดไฟล์"
-      outlined
-      accept=".xlsx"
-      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
-      v-if="files"
-      size="md"
-      icon="mdi-upload"
-      round
-      flat
-      color="blue"
-      @click="clickUpload(files)"
-    >
-      <q-tooltip>อัปโหลดไฟล์</q-tooltip>
-    </q-btn>
-    <q-btn
-      v-if="rows.length > 0"
-      size="md"
-      icon="mdi-clipboard-account-outline"
-      round
-      flat
-      color="public"
-      @click="sendRecordRegistry()"
-    >
-      <q-tooltip>ส่งไปบันทึกที่ทะเบียนประวัติ</q-tooltip>
-    </q-btn>
-
+  <q-toolbar style="padding: 0px" class="q-mb-xs">
     <q-space />
     <q-input dense outlined v-model="keyword" label="ค้นหา" class="q-mr-sm">
       <template v-slot:append>
@@ -338,56 +265,61 @@ onMounted(() => {
       option-value="name"
       options-cover
       style="min-width: 150px"
-      class="q-mr-sm"
     />
   </q-toolbar>
-  <d-table
-    ref="table"
-    row-key="id"
-    flat
-    bordered
-    dense
-    :columns="columns"
-    :rows="rows"
-    :paging="true"
-    :filter="keyword"
-    v-model:pagination="pagination"
-    :rows-per-page-options="[20, 50, 100]"
-    :visible-columns="visibleColumns"
-  >
-    <template v-slot:header="props">
-      <q-tr :props="props">
-        <q-th auto-width />
-        <q-th v-for="col in props.cols" :key="col.name" :props="props">
-          <span class="text-weight-medium">{{ col.label }}</span>
-        </q-th>
-      </q-tr>
-    </template>
-    <template v-slot:body="props">
-      <q-tr :props="props" class="cursor-pointer">
-        <q-td>
-          <q-icon
-            v-if="props.row.isDone"
-            name="mdi-check"
-            color="green"
-            size="xs"
-          >
-            <q-tooltip>ส่งไปบันทึกที่ทะเบียนประวัติแล้ว</q-tooltip>
-          </q-icon>
-        </q-td>
-        <q-td v-for="col in props.cols" :key="col.id">
-          <div v-if="col.name == 'fullName'">
-            {{ props.row.prefix ? props.row.prefix : ""
-            }}{{ props.row.firstName ? props.row.firstName : "" }}
-            {{ props.row.lastName ? props.row.lastName : "" }}
-          </div>
-          <div v-else class="table_ellipsis2">
-            {{ col.value ? col.value : "-" }}
-          </div>
-        </q-td>
-      </q-tr>
-    </template>
-  </d-table>
+
+  <div class="col-12">
+    <d-table
+      ref="table"
+      row-key="id"
+      flat
+      bordered
+      dense
+      :columns="columns"
+      :rows="rows"
+      :paging="true"
+      :filter="keyword"
+      v-model:pagination="pagination"
+      :rows-per-page-options="[20, 50, 100]"
+      :visible-columns="visibleColumns"
+    >
+      <template v-slot:header="props">
+        <q-tr :props="props">
+          <q-th auto-width />
+          <q-th v-for="col in props.cols" :key="col.name" :props="props">
+            <span class="text-weight-medium">{{ col.label }}</span>
+          </q-th>
+        </q-tr>
+      </template>
+      <template v-slot:body="props">
+        <q-tr :props="props" class="cursor-pointer">
+          <q-td>
+            <q-icon
+              v-if="props.row.isDone"
+              name="mdi-check"
+              color="green"
+              size="xs"
+            >
+              <q-tooltip>ส่งไปบันทึกที่ทะเบียนประวัติแล้ว</q-tooltip>
+            </q-icon>
+          </q-td>
+          <q-td v-for="col in props.cols" :key="col.id">
+            <div v-if="col.name == 'fullName'">
+              {{ props.row.prefix ? props.row.prefix : ""
+              }}{{ props.row.firstName ? props.row.firstName : "" }}
+              {{ props.row.lastName ? props.row.lastName : "" }}
+            </div>
+            <div v-else-if="col.name === 'org'" class="table_ellipsis">
+              {{ col.value ? col.value : "-" }}
+            </div>
+            <div v-else>
+              {{ col.value ? col.value : "-" }}
+            </div>
+          </q-td>
+        </q-tr>
+      </template>
+    </d-table>
+  </div>
 </template>
 
 <style scoped></style>
diff --git a/src/modules/15_development/interface/response/Main.ts b/src/modules/15_development/interface/response/Main.ts
index ef659e817..a39c51f32 100644
--- a/src/modules/15_development/interface/response/Main.ts
+++ b/src/modules/15_development/interface/response/Main.ts
@@ -126,6 +126,7 @@ interface ResRecord {
   prefix: string;
   trainingDays: number | null;
   type: string;
+  isProfile: boolean;
 }
 
 interface DataStrategic {
@@ -178,6 +179,15 @@ interface ResHistory {
   year: number;
 }
 
+interface ResPrefix {
+  createdAt: string;
+  createdFullName: string;
+  id: string;
+  lastUpdateFullName: string;
+  lastUpdatedAt: string;
+  name: string;
+}
+
 export type {
   ResGroup,
   ResLevel,
@@ -190,4 +200,5 @@ export type {
   DataStrategic,
   DataTree,
   ResHistory,
+  ResPrefix,
 };
diff --git a/src/modules/15_development/router.ts b/src/modules/15_development/router.ts
index 2c8e27f10..ff32fd0e9 100644
--- a/src/modules/15_development/router.ts
+++ b/src/modules/15_development/router.ts
@@ -21,6 +21,9 @@ const ScholarshipDetail = () =>
 //   import("@/modules/15_development/components/history/AddPage.vue");
 // const StrategicView = () =>
 //   import("@/modules/15_development/views/Strategic.vue");
+
+const RecordPage = () =>
+  import("@/modules/15_development/views/RecordPage.vue");
 export default [
   {
     path: "/development",
@@ -143,6 +146,17 @@ export default [
     },
   },
 
+  {
+    path: "/development/record/:id",
+    name: "developmentRecordPage",
+    component: RecordPage,
+    meta: {
+      Auth: true,
+      Key: [1.6],
+      Role: "development",
+    },
+  },
+
   // {
   //   path: "/development/strategic",
   //   name: "developmentStrategic",
diff --git a/src/modules/15_development/store/developmentStore.ts b/src/modules/15_development/store/developmentStore.ts
index 454f4e889..7acee6851 100644
--- a/src/modules/15_development/store/developmentStore.ts
+++ b/src/modules/15_development/store/developmentStore.ts
@@ -8,6 +8,7 @@ import type { FormAddProject } from "@/modules/15_development/interface/request/
 export const useDevelopmentDataStore = defineStore(
   "developmentDataStore",
   () => {
+    const projectName = ref<string>("");
     const projectStatus = ref<string>("ONGOING");
     const statusEdit = ref<boolean>(false);
     const formAddProject = reactive<FormAddProject>({
@@ -133,6 +134,7 @@ export const useDevelopmentDataStore = defineStore(
       rows,
       statusEdit,
       projectStatus,
+      projectName,
     };
   }
 );
diff --git a/src/modules/15_development/views/MainPage.vue b/src/modules/15_development/views/MainPage.vue
index 2876a15e3..7f38ce850 100644
--- a/src/modules/15_development/views/MainPage.vue
+++ b/src/modules/15_development/views/MainPage.vue
@@ -6,8 +6,6 @@ import genReportXLSX from "@/plugins/genreportxlsx";
 import http from "@/plugins/http";
 import config from "@/app.config";
 
-import DialogHeader from "@/components/DialogHeader.vue";
-
 /**importType*/
 import type {
   DataOption,
@@ -22,12 +20,19 @@ import type {
   DataTree,
 } from "@/modules/15_development/interface/response/Main";
 
+/**
+ * importComponents
+ */
+import DialogHeader from "@/components/DialogHeader.vue";
+import { useDevelopmentDataStore } from "@/modules/15_development/store/developmentStore";
+
 /** importStore*/
 import { useCounterMixin } from "@/stores/mixin";
 
 /** use*/
 const $q = useQuasar();
 const router = useRouter();
+const store = useDevelopmentDataStore();
 const {
   showLoader,
   hideLoader,
@@ -144,13 +149,17 @@ function onAdd() {
   modal.value = true;
 }
 
-/** function fetchข้อมูลหน้าแรกใหม่*/
+/**
+ * function fetchข้อมูลหน้าแรกใหม่
+ */
 function fetchListProjectNew() {
   formQuery.page = 1;
   fetchListProject();
 }
 
-/** function Download รายการโครงการ*/
+/**
+ * function Download รายการโครงการ
+ */
 function onDownload() {
   showLoader();
   http
@@ -170,7 +179,9 @@ function onDownload() {
     });
 }
 
-/** function ปิด Dialog เพิ่มโครงการ/หลักสูตรการฝึกอบรม*/
+/**
+ * function ปิด Dialog เพิ่มโครงการ/หลักสูตรการฝึกอบรม
+ */
 function closeDialog() {
   modal.value = false;
   formProject.year = null;
@@ -179,12 +190,14 @@ function closeDialog() {
   formProject.nodeId = "";
 }
 
-/** dialog submit */
-async function onSubmit() {
+/**
+ * dialog submit
+ */
+function onSubmit() {
   if (formProject.nodeId) {
     dialogConfirm($q, async () => {
-      await showLoader();
-      await http
+      showLoader();
+      http
         .post(config.API.developmentMain, formProject)
         .then(async (res) => {
           await closeDialog();
@@ -235,14 +248,18 @@ function fetchTree(id: string) {
     });
 }
 
-/** function เลือกหน่วยงานที่รับผิดชอบ*/
+/**
+ * function เลือกหน่วยงานที่รับผิดชอบ
+ */
 function updateSelected(data: DataTree) {
   formProject.node = data.orgLevel;
   formProject.nodeId = data.orgTreeId;
   formProject.orgRevisionId = data.orgRevisionId;
 }
 
-/** function เลือกหน่วยงานที่จะค้นหาโครงการ */
+/**
+ * function เลือกหน่วยงานที่จะค้นหาโครงกา
+ */
 function updateSelectedTreeMain(data: DataTree) {
   if (formQuery.node === data.orgLevel && formQuery.nodeId === data.orgTreeId) {
     formQuery.node = null;
@@ -263,6 +280,14 @@ function updatePagination(newPagination: NewPagination) {
   formQuery.pageSize = newPagination.rowsPerPage;
 }
 
+/**
+ * function redirect หน้าบันทึกผล
+ * @param id โครงการ
+ */
+function onRedirectToRecordPage(id: string) {
+  router.push(`/development/record/${id}`);
+}
+
 /** callbackFunction ทำเมื่อมีการอัปเดท pageSize*/
 watch(
   () => formQuery.pageSize,
@@ -274,6 +299,7 @@ watch(
 /** ดึงข้อมูลเมื่อโหลดหน้าเสร็จสิ้น */
 onMounted(() => {
   fetchActive();
+  formQuery.status = store.projectStatus;
 });
 </script>
 
@@ -282,6 +308,7 @@ onMounted(() => {
     รายการโครงการ/หลักสูตรการฝึกอบรมที่หน่วยงานของกรุงเทพมหานครเป็นผู้จัด
   </div>
   <q-card bordered class="col-12 row caedNone">
+    <!-- หน่วยงาน/ส่วนราชการ -->
     <div class="col-xs-12 col-sm-3 row">
       <div class="col-12 row no-wrap">
         <div class="col-12 q-py-sm q-px-sm">
@@ -342,6 +369,8 @@ onMounted(() => {
         </div>
       </div>
     </div>
+
+    <!-- รายการโครงการ -->
     <div class="col-xs-12 col-sm-9 q-pa-md row">
       <div class="col-12">
         <q-toolbar class="row col-8 q-pa-none q-gutter-x-sm" style="padding: 0">
@@ -479,6 +508,7 @@ onMounted(() => {
           >
             <template v-slot:header="props">
               <q-tr :props="props">
+                <q-th v-if="formQuery.status === 'FINISH'" auto-width />
                 <q-th v-for="col in props.cols" :key="col.name" :props="props">
                   <span class="text-weight-medium">{{ col.label }}</span>
                 </q-th>
@@ -486,11 +516,23 @@ onMounted(() => {
             </template>
             <template v-slot:body="props">
               <q-tr :props="props" class="cursor-pointer">
+                <q-td v-if="formQuery.status === 'FINISH'">
+                  <q-btn
+                    flat
+                    round
+                    color="public"
+                    icon="mdi-content-save-edit-outline"
+                    size="12px"
+                    @click.pervent="onRedirectToRecordPage(props.row.id)"
+                  >
+                    <q-tooltip>บันทึกผล</q-tooltip></q-btn
+                  >
+                </q-td>
                 <q-td
                   v-for="col in props.cols"
                   :key="col.name"
                   :props="props"
-                  @click="onClickAddOrView(true, props.row.id)"
+                  @click.pervent="onClickAddOrView(true, props.row.id)"
                 >
                   <div class="table_ellipsis">
                     {{ col.value ? col.value : "-" }}
@@ -518,6 +560,7 @@ onMounted(() => {
     </div>
   </q-card>
 
+  <!-- Popup เพิ่มโครงการ/หลักสูตรการฝึกอบรม -->
   <q-dialog persistent v-model="modal">
     <q-card flat bordered style="min-width: 60vw">
       <q-form greedy @submit.prevent @validation-success="onSubmit()">
diff --git a/src/modules/15_development/views/RecordPage.vue b/src/modules/15_development/views/RecordPage.vue
new file mode 100644
index 000000000..5b374177d
--- /dev/null
+++ b/src/modules/15_development/views/RecordPage.vue
@@ -0,0 +1,262 @@
+<script setup lang="ts">
+import { ref, onMounted } from "vue";
+import { useQuasar } from "quasar";
+import { useRouter, useRoute } from "vue-router";
+import http from "@/plugins/http";
+import config from "@/app.config";
+import env from "@/api/index";
+
+/**
+ * importComponents
+ */
+import Record from "@/modules/15_development/components/Record.vue"; // บันทึกผล
+import DialogRecordPerson from "@/modules/15_development/components/DialogRecordPerson.vue";
+
+import type { ResRecord } from "@/modules/15_development/interface/response/Main";
+
+/** importStore*/
+import { useCounterMixin } from "@/stores/mixin";
+import { useDevelopmentDataStore } from "@/modules/15_development/store/developmentStore";
+
+/**
+ * use
+ */
+const $q = useQuasar();
+const router = useRouter();
+const route = useRoute();
+const store = useDevelopmentDataStore();
+const { showLoader, hideLoader, messageError, dialogConfirm, success } =
+  useCounterMixin();
+
+/**
+ * ตัวแปร
+ */
+const projectId = ref<string>(route.params.id.toLocaleString());
+const tab = ref<string>("IN");
+const title = ref<string>("");
+const isLoadPage = ref<boolean>(false);
+const files = ref<any>(null);
+const listPerson = ref<ResRecord[]>([]);
+const modalAddPerson = ref<boolean>(false);
+
+/**
+ * function fetch ข้อมูลเบื้องต้น
+ * @param id ProjectId
+ */
+function fetchData(id: string) {
+  showLoader();
+  http
+    .get(config.API.developmentMainTab("tab1", id))
+    .then(async (res) => {
+      title.value = res.data.result.projectName;
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+/**
+ *  function เรียกข้อมูลรายชื่อทั้งหมด
+ */
+function fetchDataProject() {
+  isLoadPage.value = false;
+  showLoader();
+  http
+    .get(config.API.developmentMainTab("tab6", projectId.value))
+    .then(async (res) => {
+      listPerson.value = await res.data.result;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+      isLoadPage.value = true;
+    });
+}
+
+/**
+ *  function อัปโหลดไฟล์
+ * @param file ไฟล์
+ */
+function clickUpload(file: any) {
+  dialogConfirm(
+    $q,
+    async () => {
+      showLoader();
+      const selectedFile = file;
+      const formData = new FormData();
+      formData.append("file", selectedFile);
+      await http
+        .post(config.API.developmentMainTab("tab6", projectId.value), formData)
+        .then(async () => {
+          await fetchDataProject();
+          await success($q, "อัปโหลดไฟล์สำเร็จ");
+          files.value = null;
+        })
+        .catch((err) => {
+          messageError($q, err);
+          showLoader();
+        });
+    },
+    "ยืนยันการอัปโหลดไฟล์",
+    "ต้องการยืนยันการอัปโหลดไฟล์นี้หรือไม่ ?"
+  );
+}
+
+/**
+ *  function ส่งไปบันทึกที่ทะเบียนประวัติ
+ */
+function sendRecordRegistry() {
+  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();
+        });
+    },
+    "ยืนยันการส่งข้อมูลไปบันทึกยังทะเบียนประวัติ",
+    "ต้องการยืนยันการส่งข้อมูลไปบันทึกยังทะเบียนประวัติหรือไม่"
+  );
+}
+
+/**
+ * function  ดาวน์โหลดไฟล์ต้นแบบ
+ */
+function downloadFile() {
+  const link = document.createElement("a");
+  link.href = `${window.location.protocol}//${window.location.host}/default-บันทึกผล.xlsx`;
+  link.download = "default-บันทึกผล.xlsx";
+  document.body.appendChild(link);
+  link.click();
+  document.body.removeChild(link);
+}
+
+onMounted(() => {
+  fetchDataProject();
+  fetchData(projectId.value);
+  store.projectStatus = "FINISH";
+});
+</script>
+
+<template>
+  <div class="toptitle text-dark col-12 row items-center">
+    <q-btn
+      flat
+      round
+      dense
+      class="q-mr-sm"
+      icon="mdi-arrow-left"
+      color="primary"
+      @click="router.go(-1)"
+    />
+    {{ `บันทึกผล${title}` }}
+  </div>
+  <q-card flat bordered>
+    <q-toolbar class="q-pa-md">
+      <q-file
+        v-model="files"
+        dense
+        label="อัปโหลดไฟล์"
+        outlined
+        accept=".xlsx"
+        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
+        v-if="files"
+        size="md"
+        icon="mdi-upload"
+        round
+        flat
+        color="blue"
+        @click="clickUpload(files)"
+      >
+        <q-tooltip>อัปโหลดไฟล์</q-tooltip>
+      </q-btn>
+      <q-btn
+        size="md"
+        icon="mdi-download"
+        round
+        flat
+        color="green"
+        @click="downloadFile"
+      >
+        <q-tooltip>ดาวน์โหลดไฟล์ต้นแบบ</q-tooltip>
+      </q-btn>
+      <q-btn
+        v-if="listPerson.length > 0"
+        size="md"
+        icon="mdi-clipboard-account-outline"
+        round
+        flat
+        color="public"
+        @click="sendRecordRegistry()"
+      >
+        <q-tooltip>ส่งไปบันทึกที่ทะเบียนประวัติ</q-tooltip>
+      </q-btn>
+      <q-space />
+      <q-btn
+        flat
+        round
+        dense
+        icon="add"
+        color="primary"
+        @click="modalAddPerson = true"
+      >
+        <q-tooltip>เพิ่ม</q-tooltip>
+      </q-btn>
+    </q-toolbar>
+  </q-card>
+
+  <q-card flat bordered class="q-mt-sm">
+    <q-tabs
+      v-model="tab"
+      dense
+      align="left"
+      inline-label
+      class="rounded-borders"
+      indicator-color="primary"
+      active-bg-color="teal-1"
+      active-class="text-primary"
+    >
+      <q-tab name="IN" label="รายชื่อที่อยู่ในทะเบียนประวัติ" />
+      <q-tab name="OUT" label="รายชื่อบุคคลภายนอก" />
+    </q-tabs>
+    <q-separator />
+    <div class="q-pa-sm" style="padding: 0px" v-if="isLoadPage">
+      <q-tab-panels v-model="tab" animated>
+        <q-tab-panel name="IN">
+          <Record :isProfile="true" :listPerson="listPerson" />
+        </q-tab-panel>
+        <q-tab-panel name="OUT">
+          <Record :isProfile="false" :listPerson="listPerson" />
+        </q-tab-panel>
+      </q-tab-panels>
+    </div>
+  </q-card>
+
+  <DialogRecordPerson
+    v-model:modal="modalAddPerson"
+    v-model:tab="tab"
+    :fetchData="fetchDataProject"
+  />
+</template>
+
+<style scoped></style>