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

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>