รายการโครงการ/หลักสูตรการฝึกอบรมที่หน่วยงานของกรุงเทพมหานครเป็นผู้จัด => เพิ่ม interface

src/modules/15_development/components/BasicInfo.vue

@@ -2,27 +2,32 @@
 import { onMounted, reactive, ref } from "vue";
 import { useQuasar } from "quasar";
 
+import type { FormBasicinfo } from "@/modules/15_development/interface/request/Main";
+
 import { useCounterMixin } from "@/stores/mixin";
 
 const $q = useQuasar();
 const { showLoader, hideLoader, dialogConfirm } = useCounterMixin();
 
-onMounted(() => {
-  console.log("ข้อมูลเบื้องต้น");
-});
-
-const formData = reactive<any>({
+const formData = reactive<FormBasicinfo>({
   year: new Date().getFullYear(),
-  org: "",
+  org: "สำนักงานคณะกรรมการข้าราชการกรุงเทพมหานครกองบริหารทั้วไป",
   projectName: "",
   reason: "",
   objective: "",
 });
 
-const options = ref<any>(["Google", "Facebook", "Twitter", "Apple", "Oracle"]);
+const options = ref<any>([
+  "สำนักงานคณะกรรมการข้าราชการกรุงเทพมหานครกองบริหารทั้วไป",
+  "สำนักงานคณะกรรมการข้าราชการกรุงเทพมหานคร",
+]);
 function onSubmit() {
   dialogConfirm($q, () => {});
 }
+
+onMounted(() => {
+  console.log("ข้อมูลเบื้องต้น");
+});
 </script>
 <template>
   <q-form greedy @submit.prevent @validation-success="onSubmit">

src/modules/15_development/components/MainTab.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, reactive } from "vue";
+import { ref } from "vue";
 import { useRouter, useRoute } from "vue-router";
 
 import BasicInfo from "@/modules/15_development/components/BasicInfo.vue";

src/modules/15_development/components/Table.vue

@@ -1,5 +0,0 @@
-<script setup lang="ts"></script>
-
-<template></template>
-
-<style lang="scss" scoped></style>

src/modules/15_development/components/Target.vue

@@ -3,6 +3,10 @@ import { onMounted, ref, reactive } from "vue";
 import { useQuasar } from "quasar";
 
 import type { QTableProps } from "quasar";
+import type {
+  FormGroupTarget,
+  FormGroupRelate,
+} from "@/modules/15_development/interface/request/Main";
 
 import DialogHeader from "@/components/DialogHeader.vue";
 
@@ -80,12 +84,16 @@ const rows3 = ref<any>([
   },
 ]);
 const rows4 = ref<any>([{ related: "เจ้าหน้าที่", amount: 10 }]);
-const options = ref<any>(["Google", "Facebook", "Twitter", "Apple", "Oracle"]);
+const options = ref<any>([
+  "ข้าราชการกรุงเทพมหานคร",
+  "ข้าราชการกรุงเทพมหานครสามัญ",
+  "เจ้าหน้าที่ดำเนิดการ",
+]);
 
 const modalGroupTarget = ref<boolean>(false);
 const modalRelate = ref<boolean>(false);
 
-const formGroupTarget = reactive({
+const formGroupTarget = reactive<FormGroupTarget>({
   groupTarget: "",
   groupTargetSub: "",
   position: "",
@@ -95,7 +103,7 @@ const formGroupTarget = reactive({
   amount: null,
 });
 
-const formGroupRelate = reactive({
+const formGroupRelate = reactive<FormGroupRelate>({
   relate: "",
   amount: null,
 });