ทะเบียนประวัติ: API ประวัติของอบรมดูงาน

src/api/registry/api.registry.ts

@@ -27,4 +27,13 @@ export default {
     `${registryNew}training/${trainingId}`,
   profileNewTrainingHisByTrainingId: (trainingId: string) =>
     `${registryNew}training/history/${trainingId}`,
+
+// ประวัติการศึกษา
+profileNewEducation: `${registryNew}educations`,
+profileNewEducationByProfileId: (profileId: string) =>
+  `${registryNew}educations/${profileId}`,
+profileNewEducationByEducationId: (educationId: string) =>
+  `${registryNew}educations/${educationId}`,
+profileNewEducationHisByEducationId: (educationsId: string) =>
+  `${registryNew}educations/history/${educationsId}`,
 };

src/modules/04_registryNew/components/detail/Achievement/02_Train.vue

@@ -167,83 +167,19 @@ const pagination = ref({
   page: formFilter.page,
   rowsPerPage: formFilter.pageSize,
 });
+const historyFormFilter = reactive({
+  page: 1,
+  pageSize: 10,
+  keyword: "",
+});
 
-const row = [
+const historyPagination = ref({
-  {
+  page: historyFormFilter.page,
-    name: "ชื่อโครงการ",
+  rowsPerPage: historyFormFilter.pageSize,
-    topic: "ชื่อหัวข้อ",
+});
-    yearly: "2567",
-    place: "สถานที่",
-    duration: "3 ปี",
-    department: "แผนกสาขา",
-    numberOrder: "1244",
-    dateOrder: new Date(),
-    startDate: new Date(),
-    endDate: new Date(),
-  },
-  {
-    name: "ชื่อโครงการ",
-    topic: "ชื่อหัวข้อ",
-    yearly: "2567",
-    place: "สถานที่",
-    duration: "2567",
-    department: "แผนกสาขา",
-    numberOrder: "1244",
-    dateOrder: new Date(),
-    startDate: new Date(),
-    endDate: new Date(),
-  },
-  {
-    name: "ชื่อโครงการ",
-    topic: "ชื่อหัวข้อ",
-    yearly: "2567",
-    place: "สถานที่",
-    duration: "2567",
-    department: "แผนกสาขา",
-    numberOrder: "1244",
-    dateOrder: new Date(),
-    startDate: new Date(),
-    endDate: new Date(),
-  },
-  {
-    name: "ชื่อโครงการ",
-    topic: "ชื่อหัวข้อ",
-    yearly: "2567",
-    place: "สถานที่",
-    duration: "2567",
-    department: "แผนกสาขา",
-    numberOrder: "1244",
-    dateOrder: new Date(),
-    startDate: new Date(),
-    endDate: new Date(),
-  },
-  {
-    name: "ชื่อโครงการ",
-    topic: "ชื่อหัวข้อ",
-    yearly: "2567",
-    place: "สถานที่",
-    duration: "2567",
-    department: "แผนกสาขา",
-    numberOrder: "1244",
-    dateOrder: new Date(),
-    startDate: new Date(),
-    endDate: new Date(),
-  },
-  {
-    name: "ชื่อโครงการ",
-    topic: "ชื่อหัวข้อ",
-    yearly: "2567",
-    place: "สถานที่",
-    duration: "2567",
-    department: "แผนกสาขา",
-    numberOrder: "1244",
-    dateOrder: new Date(),
-    startDate: new Date(),
-    endDate: new Date(),
-  },
-];
 
 const rows = ref<any>([]);
+const historyRows = ref<any>([]);
 
 const visibleColumns = ref<string[]>([
   "name", // ชื่อโครงงาน
@@ -258,6 +194,19 @@ const visibleColumns = ref<string[]>([
   "endDate", // วันสิ้นสุด
 ]);
 
+const historyVisibleColumns = ref<string[]>([
+  "name", // ชื่อโครงงาน
+  "topic", // หัวข้อ
+  "yearly", // ปีที่อบรม
+  "place", // สถานที่
+  "duration", // รวมระยะวเลา
+  "department", // หน่วยงานที่รับผิดชอบ
+  "numberOrder", // เลขที่คำสั่ง
+  "dateOrder", // คำสั่งลงวันที่
+  "startDate", // วันเริ่มต้น
+  "endDate", // วันสิ้นสุด
+]);
+
 function validateForm() {
   onSubmit();
 }
@@ -444,6 +393,22 @@ async function fetchData(id: string) {
     });
 }
 
+async function fetchHistoryData(id: string) {
+  showLoader();
+  await http
+    .get(config.API.profileNewTrainingHisByTrainingId(id))
+    .then(async (res) => {
+      historyRows.value = res.data.result;
+      console.log(historyRows.value);
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
 onMounted(async () => {
   await fetchData(id.value);
 });
@@ -539,6 +504,7 @@ onMounted(async () => {
     bordered
     :paging="true"
     dense
+    :filter="formFilter.keyword"
     :rows-per-page-options="[20, 50, 100]"
     v-model:pagination="pagination"
     class="custom-header-table"
@@ -600,7 +566,9 @@ onMounted(async () => {
             round
             size="14px"
             icon="mdi-history"
-            @click="() => (historyDialog = true)"
+            @click="
+              () => (fetchHistoryData(props.row.id), (historyDialog = true))
+            "
           >
             <q-tooltip>ประวัติแก้ไขประวัติการศึกษา</q-tooltip>
           </q-btn>
@@ -1087,7 +1055,7 @@ onMounted(async () => {
               dense
               outlined
               bg-color="white"
-              v-model="formFilter.keyword"
+              v-model="historyFormFilter.keyword"
               label="ค้นหา"
               class="q-mr-sm"
             >
@@ -1097,7 +1065,7 @@ onMounted(async () => {
             </q-input>
 
             <q-select
-              v-model="visibleColumns"
+              v-model="historyVisibleColumns"
               multiple
               outlined
               dense
@@ -1115,15 +1083,16 @@ onMounted(async () => {
           <d-table
             ref="table"
             :columns="columns"
-            :rows="row"
+            :rows="historyRows"
             row-key="name"
             flat
+            :filter="historyFormFilter.keyword"
             bordered
             :paging="true"
             dense
             :rows-per-page-options="[20, 50, 100]"
             class="custom-header-table"
-            :visible-columns="visibleColumns"
+            :visible-columns="historyVisibleColumns"
           >
             <template v-slot:header="props">
               <q-tr :props="props">
@@ -1133,13 +1102,30 @@ onMounted(async () => {
                 <q-th auto-width />
               </q-tr>
             </template>
-            <template v-slot:body="props">
+            <template v-slot:body="props" v-if="mode === 'table'">
               <q-tr :props="props" class="cursor-pointer">
                 <q-td v-for="col in props.cols" :key="col.id">
-                  <div>
+                  <div
-                    {{ col.value }}
+                    v-if="col.name === 'startDate' || col.name === 'endDate'"
+                  >
+                    <div v-if="props.row.isDate">
+                      {{ date2Thai(col.value) }}
+                    </div>
+                    <div v-else>
+                      {{ +col.value.slice(0, 4) + 543 }}
+                    </div>
+                  </div>
+                  <div v-else-if="col.name === 'dateOrder'">
+                    {{ date2Thai(col.value) }}
+                  </div>
+                  <div v-else-if="col.name === 'yearly'">
+                    {{ col.value + 543 }}
+                  </div>
+                  <div v-else>
+                    {{ col.value ? col.value : "-" }}
                   </div>
                 </q-td>
+                <q-td auto-width> </q-td>
               </q-tr>
             </template>
           </d-table>