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

---
 .../components/SalaryChart/DialogUpload.vue   | 130 ++--
 src/modules/13_salary/interface/index/Main.ts |  28 +-
 .../15_development/components/BasicInfo.vue   | 139 +++++
 .../15_development/components/MainTab.vue     |  57 ++
 .../components/ProjectDetail.vue              |  12 +
 .../15_development/components/Target.vue      | 568 ++++++++++++++++++
 src/modules/15_development/router.ts          |  22 +
 .../15_development/store/developmentStore.ts  |  18 +-
 src/modules/15_development/views/MainPage.vue | 191 +++++-
 9 files changed, 1072 insertions(+), 93 deletions(-)
 create mode 100644 src/modules/15_development/components/BasicInfo.vue
 create mode 100644 src/modules/15_development/components/MainTab.vue
 create mode 100644 src/modules/15_development/components/ProjectDetail.vue
 create mode 100644 src/modules/15_development/components/Target.vue

diff --git a/src/modules/13_salary/components/SalaryChart/DialogUpload.vue b/src/modules/13_salary/components/SalaryChart/DialogUpload.vue
index 3f34e56ad..9e1a5ddf6 100644
--- a/src/modules/13_salary/components/SalaryChart/DialogUpload.vue
+++ b/src/modules/13_salary/components/SalaryChart/DialogUpload.vue
@@ -1,14 +1,11 @@
 <script setup lang="ts">
-import {  ref, reactive, watch } from "vue";
+import { ref, reactive, watch } from "vue";
 import { useQuasar } from "quasar";
 import axios from "axios";
 import http from "@/plugins/http";
 import config from "@/app.config";
 
-import type {
-  ObjectSalaryRef,
-} from "@/modules/13_salary/interface/index/Main";
-
+import type { ObjectSalaryRef } from "@/modules/13_salary/interface/index/Main";
 
 import Header from "@/components/DialogHeader.vue";
 
@@ -32,7 +29,7 @@ const props = defineProps({
   },
   id: {
     type: String,
-    defult: '',
+    defult: "",
   },
   isActive: {
     type: Boolean,
@@ -74,13 +71,9 @@ const ObjectRef: ObjectSalaryRef = {
   endDate: endDateRef,
 };
 
-
-
 const documentFile = ref<any>(null);
 const itemsDocument = ref<any>([]);
 
-
-
 async function fetchDocumentFile(id: string) {
   await http
     .get(config.API.salaryChartFile(id))
@@ -89,9 +82,9 @@ async function fetchDocumentFile(id: string) {
       itemsDocument.value = list;
     })
     .catch((err) => {})
-    .finally(()=>{
-        hideLoader()
-    })
+    .finally(() => {
+      hideLoader();
+    });
 }
 
 watch(
@@ -291,12 +284,9 @@ async function downloadFile(url: string, type: string, fileName: string) {
         <div class="row col-12 q-col-gutter-sm">
           <div class="col-md-12">
             <div class="col-xs-12 col-md-3">
-
-
-
-                <div class="row col-12 q-col-gutter-y-sm">
-                  <div class="col-12 row">
-                    <div v-if="!props.isActive" class="full-width">
+              <div class="row col-12 q-col-gutter-y-sm">
+                <div class="col-12 row">
+                  <div v-if="!props.isActive" class="full-width">
                     <q-file
                       v-if="props.typeAction === 'edit'"
                       class="col-12"
@@ -324,68 +314,58 @@ async function downloadFile(url: string, type: string, fileName: string) {
                       </template>
                     </q-file>
                   </div>
-                  </div>
-
-                  <div v-if="itemsDocument.length > 0" class="col-xs-12 row">
-                    <q-list
-                      class="full-width rounded-borders"
-                      bordered
-                      separator
-                    >
-                      <q-item
-                        v-for="file in itemsDocument"
-                        :key="file.id"
-                        clickable
-                        v-ripple
-                      >
-                        <q-item-section>{{ file.name }}</q-item-section>
-                        <q-item-section avatar>
-                          <div class="row q-col-gutter-md">
-                            <div>
-                              <q-btn
-                                dense
-                                flat
-                                round
-                                size="12px"
-                                color="blue"
-                                icon="mdi-download-outline"
-                                @click="onClickDonwload(file.name)"
-                              >
-                                <q-tooltip>ดาวน์โหลดไฟล์</q-tooltip>
-                              </q-btn>
-                            </div>
-                            <div v-if="!props.isActive">
-                              <q-btn
-                              
-                                dense
-                                flat
-                                round
-                                size="12px"
-                                color="red"
-                                icon="mdi-delete-outline"
-                                @click="onClickDeleteFile(file.name)"
-                                ><q-tooltip>ลบไฟล์</q-tooltip></q-btn
-                              >
-                            </div>
-                          </div>
-                        </q-item-section>
-                      </q-item>
-                    </q-list>
-                  </div>
-
-                  <div class="col-12" v-else>
-                    <q-card class="q-pa-md" bordered>
-                      ไม่มีรายการเอกสาร
-                    </q-card>
-                  </div>
                 </div>
 
+                <div v-if="itemsDocument.length > 0" class="col-xs-12 row">
+                  <q-list class="full-width rounded-borders" bordered separator>
+                    <q-item
+                      v-for="file in itemsDocument"
+                      :key="file.id"
+                      clickable
+                      v-ripple
+                    >
+                      <q-item-section>{{ file.name }}</q-item-section>
+                      <q-item-section avatar>
+                        <div class="row q-col-gutter-md">
+                          <div>
+                            <q-btn
+                              dense
+                              flat
+                              round
+                              size="12px"
+                              color="blue"
+                              icon="mdi-download-outline"
+                              @click="onClickDonwload(file.name)"
+                            >
+                              <q-tooltip>ดาวน์โหลดไฟล์</q-tooltip>
+                            </q-btn>
+                          </div>
+                          <div v-if="!props.isActive">
+                            <q-btn
+                              dense
+                              flat
+                              round
+                              size="12px"
+                              color="red"
+                              icon="mdi-delete-outline"
+                              @click="onClickDeleteFile(file.name)"
+                              ><q-tooltip>ลบไฟล์</q-tooltip></q-btn
+                            >
+                          </div>
+                        </div>
+                      </q-item-section>
+                    </q-item>
+                  </q-list>
+                </div>
+
+                <div class="col-12" v-else>
+                  <q-card class="q-pa-md" bordered> ไม่มีรายการเอกสาร </q-card>
+                </div>
+              </div>
             </div>
           </div>
         </div>
       </q-card-section>
-
-
     </q-card>
   </q-dialog>
 </template>
diff --git a/src/modules/13_salary/interface/index/Main.ts b/src/modules/13_salary/interface/index/Main.ts
index 6c3ae0b4d..3ce1593fb 100644
--- a/src/modules/13_salary/interface/index/Main.ts
+++ b/src/modules/13_salary/interface/index/Main.ts
@@ -6,7 +6,7 @@ interface DataOption {
 interface DataOptionShort {
   id: string;
   name: string;
-  shortCode: string
+  shortCode: string;
 }
 
 interface NewPagination {
@@ -23,9 +23,13 @@ interface ItemsMenu {
   type: string;
 }
 interface ObjectSalaryRef {
-  name: object | null;
+  salaryType: object | null;
+  // name: object | null;
   posTypId: object | null;
   posLevelId: object | null;
+  date: object | null;
+  startDate: object | null;
+  endDate: object | null;
 
   [key: string]: any;
 }
@@ -42,16 +46,16 @@ interface ObjectSalaryRateRef {
   [key: string]: any;
 }
 
-interface FormData{
-  name:string
-  posTypeId:string
-  posLevelId:string
-  isActive:boolean
-  date:Date |null
-  startDate:Date |null
-  endDate:Date |null
-  details:string
-  isSpecial:boolean
+interface FormData {
+  name: string;
+  posTypeId: string;
+  posLevelId: string;
+  isActive: boolean;
+  date: Date | null;
+  startDate: Date | null;
+  endDate: Date | null;
+  details: string;
+  isSpecial: boolean;
 }
 export type {
   DataOption,
diff --git a/src/modules/15_development/components/BasicInfo.vue b/src/modules/15_development/components/BasicInfo.vue
new file mode 100644
index 000000000..73d856f11
--- /dev/null
+++ b/src/modules/15_development/components/BasicInfo.vue
@@ -0,0 +1,139 @@
+<script setup lang="ts">
+import { onMounted, reactive, ref } from "vue";
+import { useQuasar } from "quasar";
+
+import { useCounterMixin } from "@/stores/mixin";
+
+const $q = useQuasar();
+const { showLoader, hideLoader, dialogConfirm } = useCounterMixin();
+
+onMounted(() => {
+  console.log("ข้อมูลเบื้องต้น");
+});
+
+const formData = reactive<any>({
+  year: new Date().getFullYear(),
+  org: "",
+  projectName: "",
+  reason: "",
+  objective: "",
+});
+
+const options = ref<any>(["Google", "Facebook", "Twitter", "Apple", "Oracle"]);
+function onSubmit() {
+  dialogConfirm($q, () => {});
+}
+</script>
+<template>
+  <q-form greedy @submit.prevent @validation-success="onSubmit">
+    <div class="row col-12 q-col-gutter-md q-pa-md">
+      <div class="col-xs-6 col-sm-2 col-md-2">
+        <datepicker
+          menu-class-name="modalfix"
+          v-model="formData.year"
+          :locale="'th'"
+          autoApply
+          year-picker
+          :enableTimePicker="false"
+        >
+          <template #year="{ year }">{{ year + 543 }}</template>
+          <template #year-overlay-value="{ value }">{{
+            parseInt(value + 543)
+          }}</template>
+          <template #trigger>
+            <q-input
+              dense
+              lazy-rules
+              outlined
+              :model-value="Number(formData.year) + 543"
+              :label="`${'ปีงบประมาณ'}`"
+            >
+              <template v-slot:prepend>
+                <q-icon
+                  name="event"
+                  class="cursor-pointer"
+                  style="color: var(--q-primary)"
+                >
+                </q-icon>
+              </template>
+            </q-input>
+          </template>
+        </datepicker>
+      </div>
+      <div class="col-xs-10 col-sm-10 col-md-10">
+        <q-select
+          dense
+          outlined
+          v-model="formData.org"
+          :options="options"
+          label="ชื่อหน่วยงานที่รับผิดชอบ"
+          hide-bottom-space
+          lazy-rules
+          :rules="[
+            (val:string) =>
+              !!val || `${'กรุณาเลือกหน่วยงานที่รับผิดชอบ'}`,
+          ]"
+        />
+      </div>
+      <div class="col-xs-12 col-sm-12 col-md-12">
+        <q-input
+          outlined
+          dense
+          v-model="formData.projectName"
+          label="ชื่อโครงการ/กิจกรรม/หลักสูตร"
+          rows="6"
+          type="textarea"
+          :rules="[
+            (val:string) =>
+              !!val || `${'กรุณากรอกชื่อโครงการ/กิจกรรม/หลักสูตร'}`,
+          ]"
+        />
+      </div>
+      <div class="col-xs-12 col-sm-12 col-md-12">
+        <q-input
+          outlined
+          dense
+          v-model="formData.reason"
+          label="หลักการและเหตุผล"
+          rows="6"
+          type="textarea"
+          :rules="[
+            (val:string) =>
+              !!val || `${'กรุณากรอกหลักการและเหตุผล'}`,
+          ]"
+        />
+      </div>
+      <div class="col-xs-12 col-sm-12 col-md-12">
+        <q-input
+          outlined
+          dense
+          v-model="formData.objective"
+          label="วัตถุประสงค์"
+          rows="6"
+          type="textarea"
+          :rules="[
+            (val:string) =>
+              !!val || `${'กรุณากรอกวัตถุประสงค์'}`,
+          ]"
+        />
+      </div>
+    </div>
+
+    <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>
+</template>
+
+<style scoped></style>
diff --git a/src/modules/15_development/components/MainTab.vue b/src/modules/15_development/components/MainTab.vue
new file mode 100644
index 000000000..f486e3082
--- /dev/null
+++ b/src/modules/15_development/components/MainTab.vue
@@ -0,0 +1,57 @@
+<script setup lang="ts">
+import { ref, reactive } from "vue";
+import { useRouter, useRoute } from "vue-router";
+
+import BasicInfo from "@/modules/15_development/components/BasicInfo.vue";
+import Target from "@/modules/15_development/components/Target.vue";
+import ProjectDetail from "@/modules/15_development/components/ProjectDetail.vue";
+
+const router = useRouter();
+const route = useRoute();
+
+const title = ref<string>(route.params.id ? "แก้ไข" : "เพิ่ม");
+const tab = ref<string>("BasicInfo");
+</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 class="col-12">
+    <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="BasicInfo" label="ข้อมูลเบื้องต้น" />
+      <q-tab name="Target" label="เป้าหมาย" />
+      <q-tab name="ProjectDetail" label="ลักษณะโครงการ" />
+    </q-tabs>
+    <q-separator />
+    <div class="q-pa-sm" style="padding: 0px">
+      <q-tab-panels v-model="tab" animated>
+        <q-tab-panel style="padding: 0px" name="BasicInfo">
+          <BasicInfo />
+        </q-tab-panel>
+        <q-tab-panel name="Target"> <Target /></q-tab-panel>
+        <q-tab-panel name="ProjectDetail"> <ProjectDetail /> </q-tab-panel>
+      </q-tab-panels>
+    </div>
+  </q-card>
+</template>
+
+<style scoped></style>
diff --git a/src/modules/15_development/components/ProjectDetail.vue b/src/modules/15_development/components/ProjectDetail.vue
new file mode 100644
index 000000000..aeb796c49
--- /dev/null
+++ b/src/modules/15_development/components/ProjectDetail.vue
@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import { onMounted } from "vue";
+
+onMounted(() => {
+  console.log("ลักษณะโครงการ");
+});
+</script>
+<template>
+  <div>ลักษณะโครงการ</div>
+</template>
+
+<style scoped></style>
diff --git a/src/modules/15_development/components/Target.vue b/src/modules/15_development/components/Target.vue
new file mode 100644
index 000000000..96797c035
--- /dev/null
+++ b/src/modules/15_development/components/Target.vue
@@ -0,0 +1,568 @@
+<script setup lang="ts">
+import { onMounted, ref, reactive } from "vue";
+import { useQuasar } from "quasar";
+
+import type { QTableProps } from "quasar";
+
+import DialogHeader from "@/components/DialogHeader.vue";
+
+import { useCounterMixin } from "@/stores/mixin";
+
+const $q = useQuasar();
+const { showLoader, hideLoader, dialogConfirm, dialogRemove, success } =
+  useCounterMixin();
+
+const columnsGroup = ref<QTableProps["columns"]>([
+  {
+    name: "groupTarget",
+    align: "left",
+    label: "กลุ่มเป้าหมาย ",
+    sortable: true,
+    field: "groupTarget",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "type",
+    align: "left",
+    label: "ประเภท",
+    sortable: true,
+    field: "type",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+
+  {
+    name: "amount",
+    align: "left",
+    label: "จำนวน(คน)",
+    sortable: true,
+    field: "amount",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+]);
+const columnsRelated = ref<QTableProps["columns"]>([
+  {
+    name: "related",
+    align: "left",
+    label: "ผู้เกี่ยวข้อง ",
+    sortable: true,
+    field: "related",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+
+  {
+    name: "amount",
+    align: "left",
+    label: "จำนวน(คน)",
+    sortable: true,
+    field: "amount",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+]);
+
+const rows1 = ref<any>([
+  {
+    groupTarget: "ข้าราชการ",
+    type: "บริหาร",
+    amount: 20,
+  },
+]);
+const rows2 = ref<any>([{ related: "เจ้าหน้าที่", amount: 10 }]);
+const rows3 = ref<any>([
+  {
+    groupTarget: "ข้าราชการ",
+    type: "บริหาร",
+    amount: 20,
+  },
+]);
+const rows4 = ref<any>([{ related: "เจ้าหน้าที่", amount: 10 }]);
+const options = ref<any>(["Google", "Facebook", "Twitter", "Apple", "Oracle"]);
+
+const modalGroupTarget = ref<boolean>(false);
+const modalRelate = ref<boolean>(false);
+
+const formGroupTarget = reactive({
+  groupTarget: "",
+  groupTargetSub: "",
+  position: "",
+  posType: "",
+  level: "",
+  type: "",
+  amount: null,
+});
+
+const formGroupRelate = reactive({
+  relate: "",
+  amount: null,
+});
+
+function onClickOpenDialog(type: string) {
+  if (type === "group") {
+    modalGroupTarget.value = true;
+  } else {
+    modalRelate.value = true;
+  }
+}
+
+function onSubmitGroup() {
+  dialogConfirm($q, () => {
+    success($q, "บันทึกข้อมูลสำเร็จ");
+    onClickCloseDialog();
+  });
+}
+
+function onSubmitRelate() {
+  dialogConfirm($q, () => {
+    success($q, "บันทึกข้อมูลสำเร็จ");
+    onClickCloseDialog();
+  });
+}
+
+function onclickDelete() {
+  dialogRemove($q, () => {
+    success($q, "ลบข้อมูลสำเร็จ");
+  });
+}
+
+function cleanFormData() {
+  formGroupTarget.groupTarget = "";
+  formGroupTarget.groupTargetSub = "";
+  formGroupTarget.position = "";
+  formGroupTarget.posType = "";
+  formGroupTarget.level = "";
+  formGroupTarget.type = "";
+  formGroupTarget.amount = null;
+  formGroupRelate.relate = "";
+  formGroupRelate.amount = null;
+}
+
+function onClickCloseDialog() {
+  modalGroupTarget.value = false;
+  modalRelate.value = false;
+  cleanFormData();
+}
+
+onMounted(() => {
+  console.log("เป้าหมาย");
+});
+</script>
+<template>
+  <!-- CARD เป้าหมายตามแผน -->
+  <q-card bordered style="border: 1px solid #d6dee1">
+    <div class="text-weight-medium bg-grey-1 q-py-sm q-px-md">
+      เป้าหมายตามแผน
+      <q-btn flat round dense icon="add" color="primary">
+        <q-menu>
+          <q-list style="min-width: 100px">
+            <q-item clickable v-close-popup @click="onClickOpenDialog('group')">
+              <q-item-section>กลุ่มเป้าหมาย</q-item-section>
+            </q-item>
+            <q-item
+              clickable
+              v-close-popup
+              @click="onClickOpenDialog('relate')"
+            >
+              <q-item-section>ผู้เกี่ยวข้อง</q-item-section>
+            </q-item>
+            <q-separator />
+          </q-list>
+        </q-menu>
+        <q-tooltip>เพิ่ม</q-tooltip>
+      </q-btn>
+    </div>
+    <div class="col-12"><q-separator /></div>
+    <div class="row col-12 q-col-gutter-md q-pa-md">
+      <div class="col-12">
+        <d-table
+          for="table"
+          ref="table"
+          :columns="columnsGroup"
+          :rows="rows1"
+          row-key="id"
+          flat
+          bordered
+          dense
+          class="custom-header-table"
+          hide-pagination
+        >
+          <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-th auto-width />
+            </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-td>
+                <q-btn
+                  flat
+                  round
+                  dense
+                  icon="delete"
+                  color="red"
+                  @click="onclickDelete"
+                >
+                  <q-tooltip>ลบข้อมูล</q-tooltip>
+                </q-btn>
+              </q-td>
+            </q-tr>
+          </template>
+        </d-table>
+      </div>
+
+      <div class="col-12">
+        <d-table
+          for="table"
+          ref="table"
+          :columns="columnsRelated"
+          :rows="rows2"
+          row-key="id"
+          flat
+          bordered
+          dense
+          class="custom-header-table"
+          hide-pagination
+        >
+          <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-th auto-width />
+            </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-td>
+                <q-btn
+                  flat
+                  round
+                  dense
+                  icon="delete"
+                  color="red"
+                  @click="onclickDelete"
+                >
+                  <q-tooltip>ลบข้อมูล</q-tooltip>
+                </q-btn>
+              </q-td>
+            </q-tr>
+          </template>
+        </d-table>
+      </div>
+    </div>
+  </q-card>
+
+  <!--CARD เป้าหมายตามจริง -->
+  <q-card bordered style="border: 1px solid #d6dee1" class="q-mt-md">
+    <div class="text-weight-medium bg-grey-1 q-py-sm q-px-md">
+      เป้าหมายตามจริง
+      <q-btn flat round dense icon="add" color="primary">
+        <q-menu>
+          <q-list style="min-width: 100px">
+            <q-item clickable v-close-popup @click="onClickOpenDialog('group')">
+              <q-item-section>กลุ่มเป้าหมาย</q-item-section>
+            </q-item>
+            <q-item
+              clickable
+              v-close-popup
+              @click="onClickOpenDialog('relate')"
+            >
+              <q-item-section>ผู้เกี่ยวข้อง</q-item-section>
+            </q-item>
+            <q-separator />
+          </q-list>
+        </q-menu>
+        <q-tooltip>เพิ่ม</q-tooltip>
+      </q-btn>
+    </div>
+    <div class="col-12"><q-separator /></div>
+    <div class="row col-12 q-col-gutter-md q-pa-md">
+      <div class="col-12">
+        <d-table
+          for="table"
+          ref="table"
+          :columns="columnsGroup"
+          :rows="rows3"
+          row-key="id"
+          flat
+          bordered
+          dense
+          class="custom-header-table"
+          hide-pagination
+        >
+          <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-th auto-width />
+            </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-td>
+                <q-btn
+                  flat
+                  round
+                  dense
+                  icon="delete"
+                  color="red"
+                  @click="onclickDelete"
+                >
+                  <q-tooltip>ลบข้อมูล</q-tooltip>
+                </q-btn>
+              </q-td>
+            </q-tr>
+          </template>
+        </d-table>
+      </div>
+
+      <div class="col-12">
+        <d-table
+          for="table"
+          ref="table"
+          :columns="columnsRelated"
+          :rows="rows4"
+          row-key="id"
+          flat
+          bordered
+          dense
+          class="custom-header-table"
+          hide-pagination
+        >
+          <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-th auto-width />
+            </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-td>
+                <q-btn
+                  flat
+                  round
+                  dense
+                  icon="delete"
+                  color="red"
+                  @click="onclickDelete"
+                >
+                  <q-tooltip>ลบข้อมูล</q-tooltip>
+                </q-btn>
+              </q-td>
+            </q-tr>
+          </template>
+        </d-table>
+      </div>
+    </div>
+  </q-card>
+
+  <q-dialog v-model="modalGroupTarget" persistent>
+    <q-card style="width: 700px">
+      <q-form greedy @submit.prevent @validation-success="onSubmitGroup">
+        <DialogHeader tittle="เพิ่มกลุ่มเป้าหมาย" :close="onClickCloseDialog" />
+        <q-separator />
+        <q-card-section class="q-p-sm">
+          <div class="row col-12 q-col-gutter-md">
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <q-select
+                dense
+                outlined
+                v-model="formGroupTarget.groupTarget"
+                :options="options"
+                label="กลุ่มเป้าหมาย"
+                hide-bottom-space
+                lazy-rules
+                :rules="[
+                (val:string) =>
+                  !!val || `${'กรุณาเลือกกลุ่มเป้าหมาย'}`,
+              ]"
+              />
+            </div>
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <q-select
+                dense
+                outlined
+                v-model="formGroupTarget.groupTargetSub"
+                :options="options"
+                label="กลุ่มเป้าหมายย่อย"
+                hide-bottom-space
+                lazy-rules
+                :rules="[
+                (val:string) =>
+                  !!val || `${'กรุณาเลือกกลุ่มเป้าหมายย่อย'}`,
+              ]"
+              />
+            </div>
+            <div class="col-xs-6 col-sm-4 col-md-4">
+              <q-input
+                outlined
+                dense
+                hide-bottom-space
+                v-model="formGroupTarget.position"
+                label="ตำแหน่ง"
+                :rules="[
+                (val:string) =>
+                  !!val || `${'กรุณากรอกตำแหน่ง'}`,
+              ]"
+              />
+            </div>
+            <div class="col-xs-6 col-sm-4 col-md-4">
+              <q-input
+                outlined
+                dense
+                hide-bottom-space
+                v-model="formGroupTarget.posType"
+                label="ประเภทตำแหน่ง"
+                :rules="[
+                (val:string) =>
+                  !!val || `${'กรุณากรอกประเภทตำแหน่ง'}`,
+              ]"
+              />
+            </div>
+            <div class="col-xs-6 col-sm-4 col-md-4">
+              <q-input
+                outlined
+                dense
+                hide-bottom-space
+                v-model="formGroupTarget.level"
+                label="ระดับ"
+                :rules="[
+                (val:string) =>
+                  !!val || `${'กรุณากรอกระดับ'}`,
+              ]"
+              />
+            </div>
+            <div class="col-xs-6 col-sm-6 col-md-8">
+              <q-input
+                outlined
+                dense
+                hide-bottom-space
+                v-model="formGroupTarget.type"
+                label="ประเภท(กลุ่มอาชีพ คุณสมบัติ)"
+                :rules="[
+              (val:string) =>
+                !!val || `${'กรุณากรอกประเภท(กลุ่มอาชีพ คุณสมบัติ)'}`,
+            ]"
+              />
+            </div>
+            <div class="col-xs-6 col-sm-6 col-md-4">
+              <q-input
+                outlined
+                dense
+                hide-bottom-space
+                v-model="formGroupTarget.amount"
+                label="จำนวน(คน)"
+                mask="#####"
+                :rules="[
+              (val:string) =>
+                !!val || `${'กรุณากรอกจำนวน(คน)'}`,
+            ]"
+              />
+            </div>
+          </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-card>
+  </q-dialog>
+
+  <q-dialog v-model="modalRelate" persistent>
+    <q-card style="width: 400px">
+      <q-form greedy @submit.prevent @validation-success="onSubmitRelate">
+        <DialogHeader tittle="เพิ่มผู้เกี่ยวข้อง" :close="onClickCloseDialog" />
+        <q-separator />
+        <q-card-section class="q-p-sm">
+          <div class="row col-12 q-col-gutter-md">
+            <div class="col-xs-6 col-sm-12 col-md-12">
+              <q-select
+                dense
+                outlined
+                v-model="formGroupRelate.relate"
+                :options="options"
+                label="ผู้เกี่ยวข้อง"
+                hide-bottom-space
+                lazy-rules
+                :rules="[
+                (val:string) =>
+                  !!val || `${'กรุณาเลือกผู้เกี่ยวข้อง'}`,
+              ]"
+              />
+            </div>
+            <div class="col-xs-6 col-sm-12 col-md-12">
+              <q-input
+                outlined
+                dense
+                hide-bottom-space
+                v-model="formGroupRelate.amount"
+                label="จำนวน(คน)"
+                mask="#####"
+                :rules="[
+            (val:string) =>
+              !!val || `${'กรุณากรอกจำนวน(คน)'}`,
+          ]"
+              />
+            </div>
+          </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-card>
+  </q-dialog>
+</template>
+
+<style scoped></style>
diff --git a/src/modules/15_development/router.ts b/src/modules/15_development/router.ts
index 46bfad991..dba8e6a74 100644
--- a/src/modules/15_development/router.ts
+++ b/src/modules/15_development/router.ts
@@ -1,4 +1,6 @@
 const mainPage = () => import("@/modules/15_development/views/MainPage.vue");
+const mainForm = () =>
+  import("@/modules/15_development/components/MainTab.vue");
 
 export default [
   {
@@ -11,4 +13,24 @@ export default [
       Role: "development",
     },
   },
+  {
+    path: "/development/add",
+    name: "developmentAdd",
+    component: mainForm,
+    meta: {
+      Auth: true,
+      Key: [1.1],
+      Role: "development",
+    },
+  },
+  {
+    path: "/development/:id",
+    name: "developmentDetail",
+    component: mainForm,
+    meta: {
+      Auth: true,
+      Key: [1.1],
+      Role: "development",
+    },
+  },
 ];
diff --git a/src/modules/15_development/store/developmentStore.ts b/src/modules/15_development/store/developmentStore.ts
index cea789075..74daba4ef 100644
--- a/src/modules/15_development/store/developmentStore.ts
+++ b/src/modules/15_development/store/developmentStore.ts
@@ -1,6 +1,16 @@
 import { defineStore } from "pinia";
+import { reactive } from "vue";
 
-// store 
-export const useDevelopmentDataStore = defineStore("developmentDataStore", () => {
-  return {};
-});
+// store
+export const useDevelopmentDataStore = defineStore(
+  "developmentDataStore",
+  () => {
+    const formFilter = reactive({
+      year: new Date().getFullYear(),
+      keyword: "",
+    });
+    return {
+      formFilter,
+    };
+  }
+);
diff --git a/src/modules/15_development/views/MainPage.vue b/src/modules/15_development/views/MainPage.vue
index 74eb72131..ca45a44e8 100644
--- a/src/modules/15_development/views/MainPage.vue
+++ b/src/modules/15_development/views/MainPage.vue
@@ -1,12 +1,199 @@
 <script setup lang="ts">
-import { useQuasar } from "quasar";
+import { ref, onMounted } from "vue";
+import { useQuasar, type QTableProps } from "quasar";
 import { useRouter } from "vue-router";
 
+/** importStore*/
+import { useDevelopmentDataStore } from "@/modules/15_development/store/developmentStore";
+import { useCounterMixin } from "@/stores/mixin";
+
 /** use*/
+const store = useDevelopmentDataStore();
 const $q = useQuasar();
 const router = useRouter();
+const { showLoader, hideLoader } = useCounterMixin();
+
+/** หัวตาราง */
+const rows = ref<any>([]);
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "year",
+    align: "left",
+    label: "ปีงบประมาณ ",
+    sortable: true,
+    field: "year",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "name",
+    align: "left",
+    label: "ชื่อโครงการ/กิจกรรม/หลักสูตร",
+    sortable: true,
+    field: "name",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+
+  {
+    name: "org",
+    align: "left",
+    label: "หน่วยงานที่รับผิดชอบ",
+    sortable: true,
+    field: "org",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+]);
+const visibleColumns = ref<string[]>(["year", "name", "org"]);
+
+function fetchListProject() {
+  showLoader();
+  const data = [
+    {
+      id: "1",
+      year: 2567,
+      name: "โครงการฝึกอบรมสำนักงานข้าราชการ",
+      org: "สำนักงานข้าราชการ/กองบริหารทั่วไป/กลุ่มงานช่วยนักบริหาร",
+    },
+    {
+      id: "2",
+      year: 2567,
+      name: "โครงการฝึกอบรม",
+      org: "สำนักงานข้าราชการ/กองบริหารทั่วไป/กลุ่มงานช่วยนักบริหาร",
+    },
+  ];
+  rows.value = data;
+  setTimeout(() => {
+    hideLoader();
+  }, 500);
+}
+
+function onClickAddOrView(status: boolean = false, id: string = "") {
+  status ? router.push(`development/${id}`) : router.push("development/add");
+}
+
+onMounted(() => {
+  fetchListProject();
+});
 </script>
 
-<template>development Page</template>
+<template>
+  <div class="toptitle text-dark col-12 row items-center">
+    รายการโครงการ/หลักสูตรการฝึกอบรมที่หน่วยงานของกรุงเทพมหานครเป็นผู้จัด
+  </div>
+  <q-card flat bordered class="q-pa-md">
+    <q-toolbar style="padding: 0px">
+      <datepicker
+        menu-class-name="modalfix"
+        v-model="store.formFilter.year"
+        :locale="'th'"
+        autoApply
+        year-picker
+        :enableTimePicker="false"
+      >
+        <template #year="{ year }">{{ year + 543 }}</template>
+        <template #year-overlay-value="{ value }">{{
+          parseInt(value + 543)
+        }}</template>
+        <template #trigger>
+          <q-input
+            dense
+            lazy-rules
+            outlined
+            :model-value="Number(store.formFilter.year) + 543"
+            :label="`${'ปีงบประมาณ'}`"
+          >
+            <template v-slot:prepend>
+              <q-icon
+                name="event"
+                class="cursor-pointer"
+                style="color: var(--q-primary)"
+              >
+              </q-icon>
+            </template>
+          </q-input>
+        </template>
+      </datepicker>
+      <q-btn flat round dense icon="add" color="primary" @click="onClickAddOrView()">
+        <q-tooltip>เพิ่ม</q-tooltip>
+      </q-btn>
+      <q-space />
+      <div class="row q-gutter-sm">
+        <q-input
+          standout
+          dense
+          v-model="store.formFilter.keyword"
+          ref="filterRef"
+          outlined
+          debounce="300"
+          placeholder="ค้นหา"
+        >
+          <template v-slot:append>
+            <q-icon v-if="store.formFilter.keyword == ''" name="search" />
+            <q-icon
+              v-if="store.formFilter.keyword !== ''"
+              name="clear"
+              class="cursor-pointer"
+              @click="store.formFilter.keyword = ''"
+            />
+          </template>
+        </q-input>
+
+        <q-select
+          v-model="visibleColumns"
+          multiple
+          outlined
+          dense
+          options-dense
+          :display-value="$q.lang.table.columns"
+          emit-value
+          map-options
+          :options="columns"
+          option-value="name"
+          options-cover
+          style="min-width: 150px"
+        />
+      </div>
+    </q-toolbar>
+
+    <div class="col-12">
+      <d-table
+        for="table"
+        ref="table"
+        :columns="columns"
+        :rows="rows"
+        row-key="subject"
+        flat
+        bordered
+        dense
+        class="custom-header-table"
+        :visible-columns="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"
+              @click="onClickAddOrView(true, props.row.id)"
+            >
+              <div class="table_ellipsis">
+                {{ col.value ? col.value : "-" }}
+              </div>
+            </q-td>
+          </q-tr>
+        </template>
+      </d-table>
+    </div>
+  </q-card>
+</template>
 
 <style scoped></style>