UI ระบบพัฒนา เมนูประวัติฝึกอบรม/ดูงาน ขรก

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

@@ -90,7 +90,7 @@ onMounted(() => {
 });
 </script>
 <template>
-  <q-form greedy @submit.prevent @validation-success="onSubmit">
+
     <div class="row q-pa-md q-col-gutter-sm">
       <div class="col-12">
         <span class="text-weight-medium text-body1">ตัวชี้วัดความสำเร็จ</span>
@@ -254,7 +254,7 @@ onMounted(() => {
         <q-tooltip>บันทึกข้อมูล</q-tooltip>
       </q-btn>
     </div>
-  </q-form>
+
 </template>
 
 <style scoped></style>

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

@@ -75,7 +75,7 @@ onMounted(() => {
 });
 </script>
 <template>
-  <q-form greedy @submit.prevent @validation-success="onSubmit">
+
     <div class="row q-pa-md q-col-gutter-sm">
       <div class="col-12">
         <span class="text-weight-medium text-body1">ระยะเวลาดำเนินการ</span>
@@ -312,7 +312,6 @@ onMounted(() => {
         <q-tooltip>บันทึกข้อมูล</q-tooltip>
       </q-btn>
     </div>
-  </q-form>
 </template>
 
 <style scoped></style>

src/modules/15_development/components/history/AddPage.vue

@@ -1,7 +1,10 @@
 <script setup lang="ts">
 import { ref, reactive } from "vue";
 import { useRoute, useRouter } from "vue-router";
-import type { FormAddHistory } from "@/modules/15_development/interface/request/Main";
+import type {
+  FormAddHistory,
+  FormAddHistoryProject,
+} from "@/modules/15_development/interface/request/Main";
 import { useDevelopmentDataStore } from "@/modules/15_development/store/developmentStore";
 
 import Dialog from "@/modules/15_development/components/history/Dialog.vue";
@@ -12,7 +15,7 @@ const store = useDevelopmentDataStore();
 const modalDialog = ref<boolean>(false);
 const typeSelect = ref<string>("");
 
-/** ตัวแปรข้อมูลหลัก */
+/** ตัวแปรข้อมูลข้าราชการ */
 const formMain = reactive<FormAddHistory>({
   citizenId: "1XXXXXXXXXXXX", //เลขประจําตัวประชาชน
   name: "นางสาวรัชภรณ์ ภักดี", //ชื่อ - นามสกุล
@@ -23,6 +26,20 @@ const formMain = reactive<FormAddHistory>({
   oc: "กลุ่มงานช่วยนักบริหาร", //หน่วยงานที่สังกัด
 });
 
+/** ตัวแปรข้อมูลโครงสร้าง */
+const formMainProject = reactive<FormAddHistoryProject>({
+  project: "", //ชื่อโครงการ/หลักสูตรการฝึกอบรม
+  year: "", //ปีงบประมาณที่เข้ารับการฝึกอบรม
+  trainingStart: "", //วันเริ่มต้นการฝึกอบรม
+  trainingEnd: "", //วันสิ้นสุดการฝึกอบรม
+  totalTraining: "", //รวมระยะเวลาในการฝึกอบรม
+  location: "", //สถานที่ไปศึกษาดูงาน
+  topic: "", //หัวข้อการไปศึกษาดูงาน
+  studyStart: "", //วันเริ่มต้นการศึกษาดูงาน
+  studyEnd: "", //วันสิ้นสุดการศึกษาดูงาน
+  organizingTraining: "", //หน่วยงานที่รับผิดชอบจัดการอบรม
+});
+
 const fieldLabels = {
   citizenId: "เลขประจําตัวประชาชน",
   name: "ชื่อ - นามสกุล",
@@ -34,6 +51,20 @@ const fieldLabels = {
   oc: "หน่วยงานที่สังกัด",
 };
 
+const fieldLabelsProject = {
+  project: "ชื่อโครงการ/หลักสูตรการฝึกอบรม",
+  year: "ปีงบประมาณที่เข้ารับการฝึกอบรม",
+  trainingStart: "วันเริ่มต้นการฝึกอบรม",
+  trainingEnd: "วันสิ้นสุดการฝึกอบรม",
+  totalTraining: "รวมระยะเวลาในการฝึกอบรม",
+
+  location: "สถานที่ไปศึกษาดูงาน",
+  topic: "หัวข้อการไปศึกษาดูงาน",
+  studyStart: "วันเริ่มต้นการศึกษาดูงาน",
+  studyEnd: "วันสิ้นสุดการศึกษาดูงาน",
+  organizingTraining: "หน่วยงานที่รับผิดชอบจัดการอบรม",
+};
+
 const visibleColumnsGov = ref<string[]>([
   "citizenId",
   "name",
@@ -229,6 +260,47 @@ function openDialog(select: string) {
         />
       </div>
       <div class="col-12"><q-separator /></div>
+      <div class="row q-col-gutter-md q-pa-md">
+        <div class="col-12 col-sm-6 col-md-6 q-gutter-y-sm">
+          <div
+            class="row"
+            v-for="(field, index) in Object.keys(fieldLabelsProject).slice(
+              0,
+              5
+            )"
+            :key="index"
+          >
+            <div class="col-12 col-sm-12 col-md-4">
+              <span class="text-grey-6 text-weight-medium">{{
+                fieldLabelsProject[field as keyof typeof fieldLabelsProject]
+              }}</span>
+            </div>
+            <div class="col-12 col-sm-12 col-md-8">
+              <span>{{ formMainProject[field] ? formMainProject[field] : "-" }}</span>
+            </div>
+          </div>
+        </div>
+
+        <div class="col-12 col-sm-6 col-md-6 q-gutter-y-sm">
+          <div
+            class="row"
+            v-for="(field, index) in Object.keys(fieldLabelsProject).slice(
+              5,
+              10
+            )"
+            :key="index"
+          >
+            <div class="col-12 col-sm-12 col-md-4">
+              <span class="text-grey-6 text-weight-medium">{{
+                fieldLabelsProject[field as keyof typeof fieldLabelsProject]
+              }}</span>
+            </div>
+            <div class="col-12 col-sm-12 col-md-8">
+              <span>{{ formMainProject[field] ? formMainProject[field] : "-" }}</span>
+            </div>
+          </div>
+        </div>
+      </div>
     </q-card>
   </q-card>
 

src/modules/15_development/interface/request/Main.ts

@@ -63,6 +63,20 @@ interface FormAddHistory{
   [key: string]: any;
 }
 
+interface FormAddHistoryProject{
+  project:string
+  year:string
+  trainingStart:string
+  trainingEnd:string
+  totalTraining:string
+  location:string
+  topic:string
+  studyStart:string
+  studyEnd:string
+  organizingTraining:string
+  [key: string]: any;
+}
+
 export type {
   FormQueryProject,
   FormBasicinfo,
@@ -71,4 +85,5 @@ export type {
   FormFollowResult,
   FormFollowOther,
   FormAddHistory,
+  FormAddHistoryProject,
 };