ปรับระบบพัฒนา โครงการ

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

@@ -1,12 +1,112 @@
 <script setup lang="ts">
-import { onMounted } from "vue";
+import { ref, onMounted, reactive, watch } from "vue";
+
+/**importType*/
+import type { DataOption } from "@/modules/15_development/interface/index/Main";
+
+import { useDevelopmentDataStore } from "@/modules/15_development/store/developmentStore";
+
+const store = useDevelopmentDataStore();
+
+const projectTypeOp = ref<DataOption[]>([
+  { id: "1", name: "โครงการตามยุทธศาสตร์" },
+  { id: "2", name: "โครงการตามภารกิจประจำของหน่วยงาน" },
+  { id: "3", name: "โครงการใหม่" },
+  { id: "4", name: "โครงการต่อเนื่อง" },
+]);
+const projectCharacteristicsOp = ref<DataOption[]>([
+  { id: "1", name: "ไป-กลับ" },
+  { id: "2", name: "พักค้าง" },
+  { id: "3", name: "ไป-กลับและพักค้าง" },
+]);
+const projectTechniquesOp = ref<DataOption[]>([
+  { id: "1", name: "การอบรม" },
+  { id: "2", name: "การประชุม" },
+  { id: "3", name: "การสัมมนา" },
+  { id: "4", name: "การศึกษาดูงาน" },
+  { id: "5", name: "การสัมมนาทางวิชาการ" },
+  { id: "6", name: "การสัมมนาเชิงปฏิบัติการ" },
+  { id: "7", name: "การบรรยายพิเศษ" },
+  { id: "8", name: "การฝึกศึกษา" },
+]);
 
 onMounted(() => {
   console.log("ลักษณะโครงการ");
 });
 </script>
 <template>
-  <div>ลักษณะโครงการ</div>
+  <div class="row q-pa-md q-col-gutter-sm">
+    <div class="col-12 col-sm-12 col-md-4">
+      <q-select
+        dense
+        outlined
+        v-model="store.formAddProject.projectType"
+        :options="projectTypeOp"
+        label="ประเภทโครงการ"
+        option-label="name"
+        option-value="id"
+        emit-value
+        map-options
+      />
+    </div>
+    <div class="col-12 col-sm-6 col-md-4">
+      <q-select
+        dense
+        outlined
+        v-model="store.formAddProject.projectCharacteristics"
+        :options="projectCharacteristicsOp"
+        label="ลักษณะ"
+        option-label="name"
+        option-value="id"
+        emit-value
+        map-options
+      />
+    </div>
+    <div class="col-12 col-sm-6 col-md-2">
+      <q-input
+        dense
+        outlined
+        v-model="store.formAddProject.projectDay"
+        label="จำนวน (วัน)"
+        mask="#"
+        reverse-fill-mask
+      />
+    </div>
+    <div class="col-12 col-sm-6 col-md-2">
+      <q-input
+        v-if="store.formAddProject.projectCharacteristics !== '1'"
+        dense
+        outlined
+        v-model="store.formAddProject.projectNigth"
+        label="จำนวน (คืน)"
+        mask="#"
+        reverse-fill-mask
+      />
+    </div>
+    <div class="col-12 col-sm-6 col-md-4">
+      <q-select
+        dense
+        outlined
+        v-model="store.formAddProject.projectTechniques"
+        :options="projectTechniquesOp"
+        label="เทคนิควิธีการที่ใช้ในการพัฒนา"
+        option-label="name"
+        option-value="id"
+        emit-value
+        map-options
+      />
+    </div>
+    <div class="col-12 col-sm-6 col-md-2">
+      <q-input
+        dense
+        outlined
+        v-model="store.formAddProject.projectModal"
+        label="จำนวน (รุ่น)"
+        mask="#"
+        reverse-fill-mask
+      />
+    </div>
+  </div>
 </template>
 
 <style scoped></style>