ทะเบียนประวัติ: API ประวัติของประวัติการศึกษา+Search

src/modules/04_registryNew/components/detail/PersonalInformation/05_Education.vue

@@ -193,6 +193,7 @@ const columns = ref<QTableProps["columns"]>([
 ]);
 
 const rows = ref<any>([]);
+const historyRows = ref<any>([]);
 const editId = ref<string>("");
 const route = useRoute();
 const id = ref<string>(route.params.id.toString());
@@ -202,6 +203,7 @@ const educationOption = ref([
   { label: "ใช่", value: true },
   { label: "ไม่ใช่", value: false },
 ]);
+
 const historyDialog = ref<boolean>(false);
 const educationData = reactive<{
   educationLevel: string;
@@ -252,6 +254,17 @@ const pagination = ref({
   rowsPerPage: formFilter.pageSize,
 });
 
+const historyFormFilter = reactive({
+  page: 1,
+  pageSize: 10,
+  keyword: "",
+});
+
+const historyPagination = ref({
+  page: historyFormFilter.page,
+  rowsPerPage: historyFormFilter.pageSize,
+});
+
 const visibleColumns = ref<string[]>([
   "educationLevel",
   "institute",
@@ -269,6 +282,23 @@ const visibleColumns = ref<string[]>([
   "finishDate",
   "note",
 ]);
+const historyVisibleColumns = ref<string[]>([
+  "educationLevel",
+  "institute",
+  "degree",
+  "field",
+  "gpa",
+  "country",
+  "duration",
+  "durationYear",
+  "other",
+  "fundName",
+  "isEducation",
+  "endDate",
+  "startDate",
+  "finishDate",
+  "note",
+]);
 
 function validateForm() {
   onSubmit();
@@ -330,6 +360,21 @@ async function fetchData(id: string) {
       hideLoader();
     });
 }
+async function fetchHistoryData(id: string) {
+  showLoader();
+  await http
+    .get(config.API.profileNewEducationHisByEducationId(id))
+    .then(async (res) => {
+      historyRows.value = res.data.result;
+      console.log(historyRows.value);
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
 
 async function addData() {
   console.log(educationData.durationYear);
@@ -566,6 +611,7 @@ onMounted(async () => {
     flat
     bordered
     :paging="true"
+    :filter="formFilter.keyword"
     dense
     v-model:pagination="pagination"
     :rows-per-page-options="[20, 50, 100]"
@@ -635,7 +681,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>
@@ -1184,7 +1232,7 @@ onMounted(async () => {
               dense
               outlined
               bg-color="white"
-              v-model="formFilter.keyword"
+              v-model="historyFormFilter.keyword"
               label="ค้นหา"
               class="q-mr-sm"
             >
@@ -1194,7 +1242,7 @@ onMounted(async () => {
             </q-input>
 
             <q-select
-              v-model="visibleColumns"
+              v-model="historyVisibleColumns"
               multiple
               outlined
               dense
@@ -1212,15 +1260,17 @@ onMounted(async () => {
           <d-table
             ref="table"
             :columns="columns"
-            :rows="rows"
+            :rows="historyRows"
             row-key="name"
             flat
             bordered
             :paging="true"
             dense
+            :filter="historyFormFilter.keyword"
+            v-model:pagination="historyPagination"
             :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">
@@ -1230,22 +1280,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
-                    v-if="
-                      col.name === 'startDate' ||
-                      col.name === 'finishDate' ||
-                      col.name === 'graduateDate'
-                    "
+                    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 === 'finishDate'">
                     {{ col.value ? date2Thai(col.value) : "-" }}
                   </div>
+                  <div v-else-if="col.name === 'isEducation'">
+                    {{ col.value === true ? "ใช่" : "ไม่ใช่" }}
+                  </div>
                   <div v-else>
-                    {{ col.value }}
+                    {{ col.value === "" ? "-" : col.value }}
                   </div>
                 </q-td>
+                <q-td auto-width> </q-td>
               </q-tr>
             </template>
           </d-table>