Merge branch 'nice' into develop

2024-07-30 18:08:00 +07:00 · 2024-07-30 18:08:00 +07:00 · ca9812425c
commit ca9812425c
parent eb6319654c c91843ceba
9 changed files with 918 additions and 170 deletions
--- a/src/modules/15_development/components/DialogRecordPerson.vue
+++ 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>
--- 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>
--- 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,
 };
--- 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",
--- 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,
    };
  }
 );
--- 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()">
--- a/src/modules/15_development/views/RecordPage.vue
+++ 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>