updated develop form

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

@@ -16,6 +16,8 @@ import Other from "@/modules/15_development/components/Other.vue"; // อื่
 /** importStore*/
 import { useCounterMixin } from "@/stores/mixin";
 import { useDevelopmentDataStore } from "@/modules/15_development/store/developmentStore";
+import Budget from "@/modules/15_development/components/Budget.vue";
+import Risk from "@/modules/15_development/components/Risk.vue";
 
 /** use*/
 const $q = useQuasar();
@@ -25,12 +27,36 @@ const store = useDevelopmentDataStore();
 const { success, showLoader, hideLoader, messageError, dialogConfirm } =
   useCounterMixin();
 
-const checkRoutePermission = ref<boolean>(route.name == 'developmentDetailPage')
+const checkRoutePermission = ref<boolean>(
+  route.name == "developmentDetailPage"
+);
 const title = ref<string>(route.params.id ? "แก้ไข" : "เพิ่ม");
 const projectId = ref<string>(route.params.id.toLocaleString());
 const tab = ref<string>("BasicInfo");
 const status = ref<string>("ONGOING");
+const step = ref<string[]>([
+  "BasicInfo",
+  "Target",
+  "ProjectDetail",
+  "Budget",
+  "Risk",
+  "FollowResult",
+  "Other",
+  "Result",
+]);
 
+function prevStep() {
+  const index = step.value.indexOf(tab.value);
+  if (index > 0) {
+    tab.value = step.value[index - 1];
+  }
+}
+function nextStep() {
+  const index = step.value.indexOf(tab.value);
+  if (index < step.value.length - 1) {
+    tab.value = step.value[index + 1];
+  }
+}
 /**
  * function fetch สถานะ Project
  * @param id projectId
@@ -91,7 +117,11 @@ onMounted(() => {
       color="primary"
       @click="router.push('/development')"
     />
-    {{ checkRoutePermission ? 'รายละเอียดโครงการ/หลักสูตรการฝึกอบรม':`${title}โครงการ/หลักสูตรการฝึกอบรม` }}
+    {{
+      checkRoutePermission
+        ? "รายละเอียดโครงการ/หลักสูตรการฝึกอบรม"
+        : `${title}โครงการ/หลักสูตรการฝึกอบรม`
+    }}
     <q-space />
     <div v-if="!checkRoutePermission"></div>
     <q-btn
@@ -103,7 +133,11 @@ onMounted(() => {
     >
       <q-tooltip>เสร็จสิ้นโครงการ</q-tooltip>
     </q-btn>
-    <q-badge v-else-if="status !== 'ONGOING' || !checkRoutePermission" outline color="primary" class="q-px-sm q-py-xs"
+    <q-badge
+      v-else-if="status !== 'ONGOING' || !checkRoutePermission"
+      outline
+      color="primary"
+      class="q-px-sm q-py-xs"
       >เสร็จสิ้นโครงการ</q-badge
     >
   </div>
@@ -122,23 +156,44 @@ onMounted(() => {
       <q-tab name="BasicInfo" label="ข้อมูลเบื้องต้น" />
       <q-tab name="Target" label="เป้าหมาย" />
       <q-tab name="ProjectDetail" label="ลักษณะโครงการ" />
+      <q-tab name="Budget" label="งบประมาณ" />
+      <q-tab name="Risk" label="ความเสี่ยงและประโยชน์ที่จะได้รับ" />
       <q-tab name="FollowResult" label="การติดตามประเมินผล" />
       <q-tab name="Other" label="อื่นๆ" />
+      <!-- v-if="status !== 'ONGOING'" -->
       <!-- <q-tab name="Record" 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 />
+          <BasicInfo :next-step="nextStep" />
         </q-tab-panel>
-        <q-tab-panel name="Target"> <Target /></q-tab-panel>
+        <q-tab-panel name="Target">
+          <Target :prev-step="prevStep" :next-step="nextStep"
+        /></q-tab-panel>
         <q-tab-panel name="ProjectDetail" style="padding: 0px">
-          <ProjectDetail />
+          <ProjectDetail :prev-step="prevStep" :next-step="nextStep" />
+        </q-tab-panel>
+        <q-tab-panel name="Budget" style="padding: 0px">
+          <Budget
+            :status="status"
+            :prev-step="prevStep"
+            :next-step="nextStep"
+          />
+        </q-tab-panel>
+        <q-tab-panel name="Risk" style="padding: 0px">
+          <Risk :status="status" :prev-step="prevStep" :next-step="nextStep" />
+        </q-tab-panel>
+        <q-tab-panel name="FollowResult">
+          <FollowResult
+            :status="status"
+            :prev-step="prevStep"
+            :next-step="nextStep"
+          />
         </q-tab-panel>
-        <q-tab-panel name="FollowResult"> <FollowResult /> </q-tab-panel>
         <q-tab-panel name="Other" style="padding: 0px">
-          <Other :status="status" />
+          <Other :status="status" :prev-step="prevStep" />
         </q-tab-panel>
         <!-- <q-tab-panel name="Record"> <Record /> </q-tab-panel> -->
       </q-tab-panels>