From ac6706cde4a60957220e23cd219c7f505a2cce4d Mon Sep 17 00:00:00 2001
From: "STW_TTTY\\stwtt" <trx.setthawut@gmail.com>
Date: Tue, 2 Apr 2024 14:36:54 +0700
Subject: [PATCH] =?UTF-8?q?UI=20=E0=B8=A3=E0=B8=B2=E0=B8=A2=E0=B8=81?=
 =?UTF-8?q?=E0=B8=B2=E0=B8=A3=E0=B8=9B=E0=B8=A3=E0=B8=B0=E0=B8=A7=E0=B8=B1?=
 =?UTF-8?q?=E0=B8=95=E0=B8=B4=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/=E0=B8=94?=
 =?UTF-8?q?=E0=B8=B9=E0=B8=87=E0=B8=B2=E0=B8=99=E0=B8=82=E0=B8=AD=E0=B8=87?=
 =?UTF-8?q?=E0=B8=82=E0=B9=89=E0=B8=B2=E0=B8=A3=E0=B8=B2=E0=B8=8A=E0=B8=81?=
 =?UTF-8?q?=E0=B8=B2=E0=B8=A3=E0=B8=81=E0=B8=A3=E0=B8=B8=E0=B8=87=E0=B9=80?=
 =?UTF-8?q?=E0=B8=97=E0=B8=9E=E0=B8=A1=E0=B8=AB=E0=B8=B2=E0=B8=99=E0=B8=84?=
 =?UTF-8?q?=E0=B8=A3=E0=B8=AA=E0=B8=B2=E0=B8=A1=E0=B8=B1=E0=B8=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/history/AddPage.vue            | 372 ++++++++++--------
 .../components/history/Dialog.vue             | 167 --------
 .../components/history/DialogGov.vue          | 218 ++++++++++
 .../components/history/DialogProject.vue      | 215 ++++++++++
 4 files changed, 644 insertions(+), 328 deletions(-)
 delete mode 100644 src/modules/15_development/components/history/Dialog.vue
 create mode 100644 src/modules/15_development/components/history/DialogGov.vue
 create mode 100644 src/modules/15_development/components/history/DialogProject.vue

diff --git a/src/modules/15_development/components/history/AddPage.vue b/src/modules/15_development/components/history/AddPage.vue
index 1ca3c9c8e..26dfbdd18 100644
--- a/src/modules/15_development/components/history/AddPage.vue
+++ b/src/modules/15_development/components/history/AddPage.vue
@@ -7,16 +7,25 @@ import type {
 } from "@/modules/15_development/interface/request/Main";
 import { useDevelopmentDataStore } from "@/modules/15_development/store/developmentStore";
 
-import Dialog from "@/modules/15_development/components/history/Dialog.vue";
-import type { QTableProps } from "quasar";
+import { useCounterMixin } from "@/stores/mixin";
 
+import DialogGov from "@/modules/15_development/components/history/DialogGov.vue"
+import DialogProject from "@/modules/15_development/components/history/DialogProject.vue";
+import { useQuasar, type QTableProps } from "quasar";
+
+import http from "@/plugins/http";
+import config from '@/app.config'
+
+const $q = useQuasar()
+const mixin = useCounterMixin()
+const { dialogConfirm,showLoader,hideLoader,messageError } = mixin
 const router = useRouter();
 const store = useDevelopmentDataStore();
-const modalDialog = ref<boolean>(false);
-const typeSelect = ref<string>("");
+const modalDialogGov = ref<boolean>(false);
+const modalDialogProject = ref<boolean>(false);
 
-const order = ref<string>('')
-const dateOrder = ref<string>('')
+const order = ref<string>("");
+const dateOrder = ref<string>("");
 
 /** ตัวแปรข้อมูลข้าราชการ */
 const formMain = reactive<FormAddHistory>({
@@ -77,7 +86,11 @@ const visibleColumnsGov = ref<string[]>([
   "positionSide",
 ]);
 
-const visibleColumnsProject = ref<string[]>(["project", "year", "oc"]);
+const visibleColumnsProject = ref<string[]>([
+  "project",
+  "year",
+  "organizingTraining",
+]);
 
 const columnsGov = ref<QTableProps["columns"]>([
   {
@@ -158,38 +171,74 @@ const columnsProject = ref<QTableProps["columns"]>([
   },
 
   {
-    name: "oc",
+    name: "organizingTraining",
     align: "left",
     label: "หน่วยงานที่รับผิดชอบ",
     sortable: true,
-    field: "oc",
+    field: "organizingTraining",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
 ]);
 
-/** เปิด dialog ข้าราชการ/โครงการ */
-function openDialog(select: string) {
-  if (select == "GOV") {
-    store.columns = columnsGov.value;
-    store.visibleColumns = visibleColumnsGov.value;
-  } else {
-    store.columns = columnsProject.value;
-    store.visibleColumns = visibleColumnsProject.value;
-  }
+/** เปิด dialog ข้าราชการ*/
+function openDialogGov() {
+  store.columns = columnsGov.value;
+  store.visibleColumns = visibleColumnsGov.value;
+  modalDialogGov.value = true;
+}
 
-  modalDialog.value = true;
-  typeSelect.value = select;
+/** เปิด dialog โครงการ */
+function openDialogProject() {
+  store.columns = columnsProject.value;
+  store.visibleColumns = visibleColumnsProject.value;
+
+  modalDialogProject.value = true;
 }
 
 function getClass() {
   return "inputgreen";
 }
 /** save */
-function onSubmit(){
-  
-}
+function onSubmit() {
+//   const body = {
+// citizenId:formMain.citizenId,
+// name:formMain.name,
+// position:formMain.position,
+// type:formMain.type,
+// level:formMain.level,
+// positionSide:formMain.positionSide,
+// oc:formMain.oc,
 
+// project:formMainProject.project,
+// year:formMainProject.year,
+// trainingStart:formMainProject.trainingStart,
+// trainingEnd:formMainProject.trainingEnd,
+// totalTraining:formMainProject.totalTraining,
+// location:formMainProject.location,
+// topic:formMainProject.topic,
+// studyStart:formMainProject.studyStart,
+// studyEnd:formMainProject.studyEnd,
+// organizingTraining:formMainProject.organizingTraining,
+
+// order:order.value,
+// dateOrder:dateOrder.value,
+//   }
+//   dialogConfirm($q,()=>{
+//     showLoader()
+//     http
+//     .post(config.API.,body)
+//     .then((res)=>{
+
+//     }).catch((e)=>{
+//       messageError($q,e)
+//     }).finally(()=>{
+//       hideLoader()
+//     })
+//   })
+
+router.push(`/development/history`)
+}
 </script>
 <template>
   <div class="toptitle text-dark">
@@ -209,159 +258,160 @@ function onSubmit(){
   </div>
   <q-card flat bordered>
     <q-form greedy @submit.prevent @validation-success="onSubmit">
-    <q-card-section>
-      <q-card flat bordered style="border: 1px solid #d6dee1">
-        <div class="col-12 text-weight-bold bg-grey-1 q-py-sm q-px-md">
-          ข้อมูลข้าราชการ
+      <q-card-section>
+        <q-card flat bordered style="border: 1px solid #d6dee1">
+          <div class="col-12 text-weight-bold bg-grey-1 q-py-sm q-px-md">
+            ข้อมูลข้าราชการ
 
-          <q-btn
-            flat
-            class="btn-fixed-width"
-            color="teal"
-            label="เลือกข้าราชการ"
-            icon="add"
-            @click="openDialog('GOV')"
-          />
-        </div>
-        <div class="col-12"><q-separator /></div>
-        <div class="row q-col-gutter-md q-pa-md">
-          <div class="col-12 col-sm-6 col-md-6 q-gutter-y-sm">
-            <div
-              class="row"
-              v-for="(field, index) in Object.keys(fieldLabels).slice(0, 4)"
-              :key="index"
-            >
-              <div class="col-12 col-sm-12 col-md-4">
-                <span class="text-grey-6 text-weight-medium">{{
-                  fieldLabels[field as keyof typeof fieldLabels]
-                }}</span>
+            <q-btn
+              flat
+              class="btn-fixed-width"
+              color="teal"
+              label="เลือกข้าราชการ"
+              icon="add"
+              @click="openDialogGov()"
+            />
+          </div>
+          <div class="col-12"><q-separator /></div>
+          <div class="row q-col-gutter-md q-pa-md">
+            <div class="col-12 col-sm-6 col-md-6 q-gutter-y-sm">
+              <div
+                class="row"
+                v-for="(field, index) in Object.keys(fieldLabels).slice(0, 4)"
+                :key="index"
+              >
+                <div class="col-12 col-sm-12 col-md-4">
+                  <span class="text-grey-6 text-weight-medium">{{
+                    fieldLabels[field as keyof typeof fieldLabels]
+                  }}</span>
+                </div>
+                <div class="col-12 col-sm-12 col-md-8">
+                  <span>{{ formMain[field] ? formMain[field] : "-" }}</span>
+                </div>
               </div>
-              <div class="col-12 col-sm-12 col-md-8">
-                <span>{{ formMain[field] ? formMain[field] : "-" }}</span>
+            </div>
+
+            <div class="col-12 col-sm-6 col-md-6 q-gutter-y-sm">
+              <div
+                class="row"
+                v-for="(field, index) in Object.keys(fieldLabels).slice(4, 7)"
+                :key="index"
+              >
+                <div class="col-12 col-sm-12 col-md-4">
+                  <span class="text-grey-6 text-weight-medium">{{
+                    fieldLabels[field as keyof typeof fieldLabels]
+                  }}</span>
+                </div>
+                <div class="col-12 col-sm-12 col-md-8">
+                  <span>{{ formMain[field] ? formMain[field] : "-" }}</span>
+                </div>
               </div>
             </div>
           </div>
+        </q-card>
 
-          <div class="col-12 col-sm-6 col-md-6 q-gutter-y-sm">
-            <div
-              class="row"
-              v-for="(field, index) in Object.keys(fieldLabels).slice(4, 7)"
-              :key="index"
-            >
-              <div class="col-12 col-sm-12 col-md-4">
-                <span class="text-grey-6 text-weight-medium">{{
-                  fieldLabels[field as keyof typeof fieldLabels]
-                }}</span>
+        <q-card flat bordered class="q-mt-md" style="border: 1px solid #d6dee1">
+          <div class="col-12 text-weight-bold bg-grey-1 q-py-sm q-px-md">
+            ข้อมูลโครงการ
+            <q-btn
+              flat
+              class="btn-fixed-width"
+              color="teal"
+              label="เลือกโครงการ"
+              icon="add"
+              @click="openDialogProject()"
+            />
+          </div>
+          <div class="col-12"><q-separator /></div>
+          <div class="row q-col-gutter-md q-pa-md">
+            <div class="col-12 col-sm-6 col-md-6 q-gutter-y-sm">
+              <div
+                class="row"
+                v-for="(field, index) in Object.keys(fieldLabelsProject).slice(
+                  0,
+                  5
+                )"
+                :key="index"
+              >
+                <div class="col-12 col-sm-12 col-md-4">
+                  <span class="text-grey-6 text-weight-medium">{{
+                    fieldLabelsProject[field as keyof typeof fieldLabelsProject]
+                  }}</span>
+                </div>
+                <div class="col-12 col-sm-12 col-md-8">
+                  <span>{{
+                    formMainProject[field] ? formMainProject[field] : "-"
+                  }}</span>
+                </div>
               </div>
-              <div class="col-12 col-sm-12 col-md-8">
-                <span>{{ formMain[field] ? formMain[field] : "-" }}</span>
+            </div>
+
+            <div class="col-12 col-sm-6 col-md-6 q-gutter-y-sm">
+              <div
+                class="row"
+                v-for="(field, index) in Object.keys(fieldLabelsProject).slice(
+                  5,
+                  10
+                )"
+                :key="index"
+              >
+                <div class="col-12 col-sm-12 col-md-4">
+                  <span class="text-grey-6 text-weight-medium">{{
+                    fieldLabelsProject[field as keyof typeof fieldLabelsProject]
+                  }}</span>
+                </div>
+                <div class="col-12 col-sm-12 col-md-8">
+                  <span>{{
+                    formMainProject[field] ? formMainProject[field] : "-"
+                  }}</span>
+                </div>
               </div>
             </div>
           </div>
-        </div>
-      </q-card>
+        </q-card>
 
-      <q-card flat bordered class="q-mt-md" style="border: 1px solid #d6dee1">
-        <div class="col-12 text-weight-bold bg-grey-1 q-py-sm q-px-md">
-          ข้อมูลโครงการ
-          <q-btn
-            flat
-            class="btn-fixed-width"
-            color="teal"
-            label="เลือกโครงการ"
-            icon="add"
-            @click="openDialog('project')"
-          />
-        </div>
-        <div class="col-12"><q-separator /></div>
-        <div class="row q-col-gutter-md q-pa-md">
-          <div class="col-12 col-sm-6 col-md-6 q-gutter-y-sm">
-            <div
-              class="row"
-              v-for="(field, index) in Object.keys(fieldLabelsProject).slice(
-                0,
-                5
-              )"
-              :key="index"
-            >
-              <div class="col-12 col-sm-12 col-md-4">
-                <span class="text-grey-6 text-weight-medium">{{
-                  fieldLabelsProject[field as keyof typeof fieldLabelsProject]
-                }}</span>
-              </div>
-              <div class="col-12 col-sm-12 col-md-8">
-                <span>{{
-                  formMainProject[field] ? formMainProject[field] : "-"
-                }}</span>
-              </div>
-            </div>
+        <div class="row q-col-gutter-sm q-mt-md">
+          <div class="col-3">
+            <q-input
+              label="เลขที่คำสั่ง/เลขที่หนังสืออนุมัติ"
+              v-model="order"
+              dense
+              outlined
+              :class="getClass()"
+              hide-bottom-space
+              :rules="[(val:string) => !!val || `${'กรุณากรอกเลขที่คำสั่ง/เลขที่หนังสืออนุมัติ'}`,]"
+            />
           </div>
-
-          <div class="col-12 col-sm-6 col-md-6 q-gutter-y-sm">
-            <div
-              class="row"
-              v-for="(field, index) in Object.keys(fieldLabelsProject).slice(
-                5,
-                10
-              )"
-              :key="index"
-            >
-              <div class="col-12 col-sm-12 col-md-4">
-                <span class="text-grey-6 text-weight-medium">{{
-                  fieldLabelsProject[field as keyof typeof fieldLabelsProject]
-                }}</span>
-              </div>
-              <div class="col-12 col-sm-12 col-md-8">
-                <span>{{
-                  formMainProject[field] ? formMainProject[field] : "-"
-                }}</span>
-              </div>
-            </div>
+          <div class="col-3">
+            <q-input
+              label="คำสั่งลงวันที่/หนังสืออนุมัติลงวันที่"
+              v-model="dateOrder"
+              dense
+              outlined
+              :class="getClass()"
+              hide-bottom-space
+              :rules="[(val:string) => !!val || `${'กรุณากรอกคำสั่งลงวันที่/หนังสืออนุมัติลงวันที่'}`,]"
+            />
           </div>
         </div>
-      </q-card>
-
-      <div class="row q-col-gutter-sm q-mt-md">
-        <div class="col-3">
-          <q-input
-            label="เลขที่คำสั่ง/เลขที่หนังสืออนุมัติ"
-            v-model="order"
-            dense
-            outlined
-            :class="getClass()"
-            hide-bottom-space
-            :rules="[(val:string) => !!val || `${'กรุณากรอกเลขที่คำสั่ง/เลขที่หนังสืออนุมัติ'}`,]"
-          />
-        </div>
-        <div class="col-3">
-          <q-input
-            label="คำสั่งลงวันที่/หนังสืออนุมัติลงวันที่"
-            v-model="dateOrder"
-            dense
-            outlined
-            :class="getClass()"
-            hide-bottom-space
-            :rules="[(val:string) => !!val || `${'กรุณากรอกคำสั่งลงวันที่/หนังสืออนุมัติลงวันที่'}`,]"
-          />
-        </div>
+      </q-card-section>
+      <q-separator />
+      <div class="text-right q-pa-sm">
+        <q-btn
+          dense
+          unelevated
+          label="บันทึก"
+          id="onSubmit"
+          type="submit"
+          color="public"
+          class="q-px-md"
+        >
+          <q-tooltip>บันทึกข้อมูล</q-tooltip>
+        </q-btn>
       </div>
-    </q-card-section>
-    <q-separator />
-    <div class="text-right q-pa-sm">
-      <q-btn
-        dense
-        unelevated
-        label="บันทึก"
-        id="onSubmit"
-        type="submit"
-        color="public"
-        class="q-px-md"
-      >
-        <q-tooltip>บันทึกข้อมูล</q-tooltip>
-      </q-btn>
-    </div>
-  </q-form>
+    </q-form>
   </q-card>
 
-  <Dialog v-model:modal="modalDialog" v-model:type="typeSelect" />
+  <DialogGov v-model:modal="modalDialogGov" />
+  <DialogProject v-model:modal="modalDialogProject" />
 </template>
diff --git a/src/modules/15_development/components/history/Dialog.vue b/src/modules/15_development/components/history/Dialog.vue
deleted file mode 100644
index 7a28e7bf3..000000000
--- a/src/modules/15_development/components/history/Dialog.vue
+++ /dev/null
@@ -1,167 +0,0 @@
-<script setup lang="ts">
-import { ref, watch } from "vue";
-import Header from "@/components/DialogHeader.vue";
-import type { DataOption } from "@/modules/15_development/interface/index/Main";
-import { useDevelopmentDataStore } from "@/modules/15_development/store/developmentStore";
-
-const store = useDevelopmentDataStore();
-
-const modal = defineModel<boolean>("modal", { required: true });
-const type = defineModel<string>("type", { required: true });
-
-const selected = ref<any[]>()
-const search = ref<string>("");
-const inputSearch = ref<string>("");
-
-const govOp = ref<DataOption[]>([
-  {
-    id: "citizenId",
-    name: "เลขประจำตัวประชาชน",
-  },
-  {
-    id: "prefix",
-    name: "คำนำหน้า",
-  },
-  {
-    id: "fullName",
-    name: "ชื่อ - นามสกุล",
-  },
-]);
-
-const projectOp = ref<DataOption[]>([
-  {
-    id: "ID1",
-    name: "ชื่อโครงการ",
-  },
-  {
-    id: "ID2",
-    name: "ปีงบประมาณ",
-  },
-  {
-    id: "ID3",
-    name: "ชื่อหน่วยงานที่รับผิดชอบ",
-  },
-]);
-
-/** save ข้อมูล */
-function onSubmit() {}
-
-/** ปิด dialog */
-function closeDialog() {
-  modal.value = false;
-}
-
-/** class */
-function getClass() {
-  return "inputgreen";
-}
-
-watch(
-  () => type.value,
-  () => {
-    if (type.value == "GOV") {
-      search.value = "citizenId";
-    } else {
-      search.value = "ID1";
-    }
-  }
-);
-</script>
-<template>
-  <q-dialog v-model="modal" persistent>
-    <q-card class="col-12" style="width: 60%">
-      <q-form greedy @submit.prevent @validation-success="onSubmit">
-        <Header
-          :tittle="type == 'GOV' ? 'เลือกข้าราชการ' : 'เลือกโครงการ'"
-          :close="closeDialog"
-        />
-        <q-separator />
-
-        <q-card-section>
-          <div class="row q-col-gutter-x-sm">
-            <div class="col-2">
-              <q-select
-                dense
-                outlined
-                label="ค้นหาจาก"
-                v-model="search"
-                option-label="name"
-                option-value="id"
-                :options="type == 'GOV' ? govOp : projectOp"
-                map-options
-                emit-value
-                :class="getClass()"
-              />
-            </div>
-            <div class="col-8">
-              <q-input
-                dense
-                outlined
-                label="ค้นหา"
-                v-model="inputSearch"
-                :class="getClass()"
-              />
-            </div>
-            <div class="col-2">
-              <q-btn
-                label="ค้นหา"
-                class="full-width full-height"
-                unelevated
-                color="teal"
-              >
-              </q-btn>
-            </div>
-          </div>
-          <div class="q-mt-sm">
-            <d-table
-              selection="single"
-              v-model:selected="selected"
-              for="table"
-              ref="table"
-              :columns="store.columns"
-              :rows="store.rows"
-              row-key="id"
-              flat
-              bordered
-              dense
-              class="custom-header-table"
-              :visible-columns="store.visibleColumns"
-            >
-              <template v-slot:header="props">
-                <q-tr :props="props">
-                  <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
-                    v-for="col in props.cols"
-                    :key="col.name"
-                    :props="props"
-                  >
-                    <div class="table_ellipsis">
-                      {{ col.value ? col.value : "-" }}
-                    </div>
-                  </q-td>
-                </q-tr>
-              </template>
-            </d-table>
-          </div>
-        </q-card-section>
-        <q-separator />
-
-        <q-card-actions align="right" class="bg-white text-teal">
-          <q-btn label="บันทึก" color="secondary" type="submit"
-            ><q-tooltip>บันทึกข้อมูล</q-tooltip></q-btn
-          >
-        </q-card-actions>
-      </q-form>
-    </q-card>
-  </q-dialog>
-</template>
diff --git a/src/modules/15_development/components/history/DialogGov.vue b/src/modules/15_development/components/history/DialogGov.vue
new file mode 100644
index 000000000..2d673b3a1
--- /dev/null
+++ b/src/modules/15_development/components/history/DialogGov.vue
@@ -0,0 +1,218 @@
+<script setup lang="ts">
+import { ref, watch } from "vue";
+import Header from "@/components/DialogHeader.vue";
+import type { DataOption } from "@/modules/15_development/interface/index/Main";
+import { useDevelopmentDataStore } from "@/modules/15_development/store/developmentStore";
+import { useCounterMixin } from "@/stores/mixin";
+import { useQuasar } from "quasar";
+
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+const $q = useQuasar();
+const mixin = useCounterMixin();
+const {
+  dialogConfirm,
+  messageError,
+  dialogMessageNotify,
+  showLoader,
+  hideLoader,
+} = mixin;
+const store = useDevelopmentDataStore();
+
+const modal = defineModel<boolean>("modal", { required: true });
+
+const selected = ref<any[]>();
+const search = ref<string>("citizenId");
+const inputSearch = ref<string>("");
+
+const govOp = ref<DataOption[]>([
+  {
+    id: "citizenId",
+    name: "เลขประจำตัวประชาชน",
+  },
+  {
+    id: "prefix",
+    name: "คำนำหน้า",
+  },
+  {
+    id: "fullName",
+    name: "ชื่อ - นามสกุล",
+  },
+]);
+
+const projectOp = ref<DataOption[]>([
+  {
+    id: "ID1",
+    name: "ชื่อโครงการ",
+  },
+  {
+    id: "ID2",
+    name: "ปีงบประมาณ",
+  },
+  {
+    id: "ID3",
+    name: "ชื่อหน่วยงานที่รับผิดชอบ",
+  },
+]);
+
+/** save ข้อมูล */
+function onSubmit() {
+  if (selected.value?.length == 0) {
+    dialogMessageNotify($q, `กรุณาเลือก 1 รายการ`);
+  } else {
+    dialogConfirm($q, () => {
+      const data = selected.value?.[0];
+      const body = {
+        citizenId: data.citizenId,
+        name: data.name,
+        position: data.position,
+        type: data.type,
+        level: data.level,
+        positionSide: data.positionSide,
+      };
+      closeDialog()
+
+    });
+  }
+}
+
+/** ปิด dialog */
+function closeDialog() {
+  modal.value = false;
+  store.rows = [];
+  selected.value = [];
+}
+
+/** class */
+function getClass() {
+  return "inputgreen";
+}
+
+function searchFilter() {
+  const dataTest = [
+    {
+      id: "ID1",
+      citizenId: "1XXXXXXXXXXXX", //เลขประจําตัวประชาชน
+      name: "นางสาวรัชภรณ์ ภักดี", //ชื่อ - นามสกุล
+      position: "นักบริหาร", //ตําแหน่ง
+      type: "บริหาร", //ประเภทตําแหน่ง
+      level: "ชำนาญการพิเศษ", //ระดับตําแหน่ง
+      positionSide: "นักบริหาร", //ตําแหน่งทางการบริหาร
+    },
+    {
+      id: "ID2",
+      citizenId: "1XXXXXXXXXXXX", //เลขประจําตัวประชาชน
+      name: "นางสาวภาพรรณ ลออ", //ชื่อ - นามสกุล
+      position: "นักจัดการงานทั่วไป", //ตําแหน่ง
+      type: "บริหาร", //ประเภทตําแหน่ง
+      level: "วิชาการ", //ระดับตําแหน่ง
+      positionSide: "ชำนาญงาน", //ตําแหน่งทางการบริหาร
+    },
+  ];
+
+  store.rows = dataTest;
+}
+</script>
+<template>
+  <q-dialog v-model="modal" persistent>
+    <q-card class="col-12" style="width: 60%">
+      <Header
+        :tittle="'เลือกข้าราชการ'"
+        :close="closeDialog"
+      />
+      <q-separator />
+
+      <q-card-section>
+        <div class="row q-col-gutter-x-sm">
+          <div class="col-2">
+            <q-select
+              dense
+              outlined
+              label="ค้นหาจาก"
+              v-model="search"
+              option-label="name"
+              option-value="id"
+              :options="govOp"
+              map-options
+              emit-value
+              :class="getClass()"
+            />
+          </div>
+          <div class="col-8">
+            <q-input
+              dense
+              outlined
+              label="ค้นหา"
+              v-model="inputSearch"
+              :class="getClass()"
+            />
+          </div>
+          <div class="col-2">
+            <q-btn
+              label="ค้นหา"
+              class="full-width full-height"
+              unelevated
+              color="teal"
+              @click="searchFilter()"
+            >
+            </q-btn>
+          </div>
+        </div>
+        <div class="q-mt-sm">
+          <d-table
+            selection="single"
+            v-model:selected="selected"
+            for="table"
+            ref="table"
+            :columns="store.columns"
+            :rows="store.rows"
+            row-key="id"
+            flat
+            bordered
+            dense
+            class="custom-header-table"
+            :visible-columns="store.visibleColumns"
+          >
+            <template v-slot:header="props">
+              <q-tr :props="props">
+                <q-th class="text-center"> </q-th>
+                <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 class="text-center">
+                  <q-checkbox
+                    keep-color
+                    color="primary"
+                    dense
+                    v-model="props.selected"
+                  />
+                </q-td>
+                <q-td v-for="col in props.cols" :key="col.name" :props="props">
+                  <div class="table_ellipsis">
+                    {{ col.value ? col.value : "-" }}
+                  </div>
+                </q-td>
+              </q-tr>
+            </template>
+          </d-table>
+        </div>
+      </q-card-section>
+      <q-separator />
+
+      <q-card-actions align="right" class="bg-white text-teal">
+        <q-btn
+          label="บันทึก"
+          color="secondary"
+          type="submit"
+          @click="onSubmit()"
+          ><q-tooltip>บันทึกข้อมูล</q-tooltip></q-btn
+        >
+      </q-card-actions>
+    </q-card>
+  </q-dialog>
+</template>
diff --git a/src/modules/15_development/components/history/DialogProject.vue b/src/modules/15_development/components/history/DialogProject.vue
new file mode 100644
index 000000000..6189eaabc
--- /dev/null
+++ b/src/modules/15_development/components/history/DialogProject.vue
@@ -0,0 +1,215 @@
+<script setup lang="ts">
+import { ref, watch } from "vue";
+import Header from "@/components/DialogHeader.vue";
+import type { DataOption } from "@/modules/15_development/interface/index/Main";
+import { useDevelopmentDataStore } from "@/modules/15_development/store/developmentStore";
+import { useCounterMixin } from "@/stores/mixin";
+import { useQuasar } from "quasar";
+
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+const $q = useQuasar();
+const mixin = useCounterMixin();
+const {
+  dialogConfirm,
+  messageError,
+  dialogMessageNotify,
+  showLoader,
+  hideLoader,
+} = mixin;
+const store = useDevelopmentDataStore();
+
+const modal = defineModel<boolean>("modal", { required: true });
+
+const selected = ref<any[]>();
+const search = ref<string>("ID1");
+const inputSearch = ref<string>("");
+
+const projectOp = ref<DataOption[]>([
+  {
+    id: "ID1",
+    name: "ชื่อโครงการ",
+  },
+  {
+    id: "ID2",
+    name: "ปีงบประมาณ",
+  },
+  {
+    id: "ID3",
+    name: "ชื่อหน่วยงานที่รับผิดชอบ",
+  },
+]);
+
+/** save ข้อมูล */
+function onSubmit() {
+  if (selected.value?.length == 0) {
+    dialogMessageNotify($q, `กรุณาเลือก 1 รายการ`);
+  } else {
+    dialogConfirm($q, () => {
+      const data = selected.value?.[0];
+      const body = {
+        project: data.project,
+        year: data.year,
+        organizingTraining: data.organizingTraining,
+      };
+      closeDialog()
+
+    });
+  }
+}
+
+/** ปิด dialog */
+function closeDialog() {
+  modal.value = false;
+  store.rows = [];
+  selected.value = [];
+}
+
+/** class */
+function getClass() {
+  return "inputgreen";
+}
+
+function searchFilter() {
+  const dataTestGov = [
+    {
+      id: "ID1",
+      citizenId: "1XXXXXXXXXXXX", //เลขประจําตัวประชาชน
+      name: "นางสาวรัชภรณ์ ภักดี", //ชื่อ - นามสกุล
+      position: "นักบริหาร", //ตําแหน่ง
+      type: "บริหาร", //ประเภทตําแหน่ง
+      level: "ชำนาญการพิเศษ", //ระดับตําแหน่ง
+      positionSide: "นักบริหาร", //ตําแหน่งทางการบริหาร
+    },
+    {
+      id: "ID2",
+      citizenId: "1XXXXXXXXXXXX", //เลขประจําตัวประชาชน
+      name: "นางสาวภาพรรณ ลออ", //ชื่อ - นามสกุล
+      position: "นักจัดการงานทั่วไป", //ตําแหน่ง
+      type: "บริหาร", //ประเภทตําแหน่ง
+      level: "วิชาการ", //ระดับตําแหน่ง
+      positionSide: "ชำนาญงาน", //ตําแหน่งทางการบริหาร
+    },
+  ];
+  const dataTest = [
+    {
+      id: "ID1",
+      project: "โครงการฝึกอบรมที่หน่วยงานของกรุงเทพมหานคร", //ชื่อโครงการ/หลักสูตรการฝึกอบรม
+      year: "2567", //ปีงบประมาณที่เข้ารับการฝึกอบรม
+      organizingTraining: "กลุ่มงานช่วยนักบริหาร", //หน่วยงานที่รับผิดชอบจัดการอบรม
+    },
+    {
+      id: "ID2",
+      project: "กิจกรรมฝึกอบรมที่หน่วยงานของกรุงเทพมหานคร", //ชื่อโครงการ/หลักสูตรการฝึกอบรม
+      year: "2567", //ปีงบประมาณที่เข้ารับการฝึกอบรม
+      organizingTraining: "กลุ่มงานช่วยนักบริหาร", //หน่วยงานที่รับผิดชอบจัดการอบรม
+    },
+  ];
+
+  store.rows = dataTest;
+}
+
+</script>
+<template>
+  <q-dialog v-model="modal" persistent>
+    <q-card class="col-12" style="width: 60%">
+      <Header
+        :tittle="'เลือกโครงการ'"
+        :close="closeDialog"
+      />
+      <q-separator />
+
+      <q-card-section>
+        <div class="row q-col-gutter-x-sm">
+          <div class="col-2">
+            <q-select
+              dense
+              outlined
+              label="ค้นหาจาก"
+              v-model="search"
+              option-label="name"
+              option-value="id"
+              :options="projectOp"
+              map-options
+              emit-value
+              :class="getClass()"
+            />
+          </div>
+          <div class="col-8">
+            <q-input
+              dense
+              outlined
+              label="ค้นหา"
+              v-model="inputSearch"
+              :class="getClass()"
+            />
+          </div>
+          <div class="col-2">
+            <q-btn
+              label="ค้นหา"
+              class="full-width full-height"
+              unelevated
+              color="teal"
+              @click="searchFilter()"
+            >
+            </q-btn>
+          </div>
+        </div>
+        <div class="q-mt-sm">
+          <d-table
+            selection="single"
+            v-model:selected="selected"
+            for="table"
+            ref="table"
+            :columns="store.columns"
+            :rows="store.rows"
+            row-key="id"
+            flat
+            bordered
+            dense
+            class="custom-header-table"
+            :visible-columns="store.visibleColumns"
+          >
+            <template v-slot:header="props">
+              <q-tr :props="props">
+                <q-th class="text-center"> </q-th>
+                <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 class="text-center">
+                  <q-checkbox
+                    keep-color
+                    color="primary"
+                    dense
+                    v-model="props.selected"
+                  />
+                </q-td>
+                <q-td v-for="col in props.cols" :key="col.name" :props="props">
+                  <div class="table_ellipsis">
+                    {{ col.value ? col.value : "-" }}
+                  </div>
+                </q-td>
+              </q-tr>
+            </template>
+          </d-table>
+        </div>
+      </q-card-section>
+      <q-separator />
+
+      <q-card-actions align="right" class="bg-white text-teal">
+        <q-btn
+          label="บันทึก"
+          color="secondary"
+          type="submit"
+          @click="onSubmit()"
+          ><q-tooltip>บันทึกข้อมูล</q-tooltip></q-btn
+        >
+      </q-card-actions>
+    </q-card>
+  </q-dialog>
+</template>