ทะเบียนประวัติ: ฝึกอบรมดูงาน interface

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

@@ -1,10 +1,11 @@
 <script setup lang="ts">
 import { ref, reactive, watch, onMounted } from "vue";
-import moment from "moment";
 import dialogHeader from "@/components/DialogHeader.vue";
 import type { QTableProps } from "quasar";
 import { useCounterMixin } from "@/stores/mixin";
 import { useRoute } from "vue-router";
+import type { RequestItemsObject } from "@/modules/04_registryNew/interface/request/Training";
+import type { ResponseObject } from "@/modules/04_registryNew/interface/response/Training";
 import { QForm, useQuasar } from "quasar";
 import http from "@/plugins/http";
 import config from "@/app.config";
@@ -142,7 +143,7 @@ const dialogStatus = ref<string>("create");
 const historyDialog = ref<boolean>(false);
 const editId = ref<string>("");
 
-const trainData = reactive({
+const trainData = reactive<RequestItemsObject>({
   name: "",
   topic: "",
   yearly: new Date().getFullYear(),
@@ -178,8 +179,8 @@ const historyPagination = ref({
   rowsPerPage: historyFormFilter.pageSize,
 });
 
-const rows = ref<any>([]);
+const rows = ref<ResponseObject[]>([]);
-const historyRows = ref<any>([]);
+const historyRows = ref<ResponseObject[]>([]);
 
 const visibleColumns = ref<string[]>([
   "name", // ชื่อโครงงาน
@@ -365,17 +366,6 @@ watch(
     }
   }
 );
-// async function isDateCheck() {
-//   if (isDate.value === "false") {
-//     trainData.startYear = +trainData.startDate.toString().slice(11, 15);
-//     trainData.finishYear = +trainData.endDate.toString().slice(11, 15);
-//     trainData.startDate = new Date(trainData.startYear + "-01-01");
-//     trainData.endDate = new Date(trainData.finishYear + "-01-01");
-//   } else {
-//     trainData.startDate = new Date(trainData.startYear + "-01-01");
-//     trainData.endDate = new Date(trainData.finishYear + "-01-01");
-//   }
-// }
 
 async function fetchData(id: string) {
   showLoader();
@@ -383,7 +373,6 @@ async function fetchData(id: string) {
     .get(config.API.profileNewTrainingByProfileId(id))
     .then(async (res) => {
       rows.value = res.data.result;
-      console.log(rows.value);
     })
     .catch((err) => {
       messageError($q, err);
@@ -520,9 +509,31 @@ onMounted(async () => {
     </template>
     <template v-slot:body="props" v-if="mode === 'table'">
       <q-tr :props="props" class="cursor-pointer">
-        <q-td
+        <q-td v-for="col in props.cols" :key="col.id">
-          v-for="col in props.cols"
+          <div v-if="col.name === 'startDate' || col.name === 'endDate'">
-          :key="col.id"
+            <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-btn
+            color="edit"
+            flat
+            dense
+            round
+            class="q-mr-xs"
+            size="14px"
+            icon="edit"
+            clickable
             @click="
               () => {
                 dialogStatus = 'edit';
@@ -544,21 +555,8 @@ onMounted(async () => {
               }
             "
           >
-          <div v-if="col.name === 'startDate' || col.name === 'endDate'">
+            <q-tooltip>แก้ไขข้อมูล</q-tooltip>
-            <div v-if="props.row.isDate">{{ date2Thai(col.value) }}</div>
+          </q-btn>
-            <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-btn
             color="info"
             flat
@@ -1087,6 +1085,7 @@ onMounted(async () => {
             row-key="name"
             flat
             :filter="historyFormFilter.keyword"
+            v-model:pagination="historyPagination"
             bordered
             :paging="true"
             dense
@@ -1102,7 +1101,7 @@ onMounted(async () => {
                 <q-th auto-width />
               </q-tr>
             </template>
-            <template v-slot:body="props" v-if="mode === 'table'">
+            <template v-slot:body="props">
               <q-tr :props="props" class="cursor-pointer">
                 <q-td v-for="col in props.cols" :key="col.id">
                   <div
@@ -1125,7 +1124,6 @@ onMounted(async () => {
                     {{ col.value ? col.value : "-" }}
                   </div>
                 </q-td>
-                <q-td auto-width> </q-td>
               </q-tr>
             </template>
           </d-table>

src/modules/04_registryNew/interface/request/Training.ts

@@ -0,0 +1,17 @@
+interface RequestItemsObject {
+    name: string,
+    topic: string,
+    yearly: number,
+    place: string,
+    duration: string,
+    department: string,
+    numberOrder: string,
+    dateOrder: Date,
+    startDate: Date,
+    endDate: Date,
+    startYear: number,
+    finishYear: number,
+  }
+  
+  export type { RequestItemsObject };
+

src/modules/04_registryNew/interface/response/Training.ts

@@ -0,0 +1,26 @@
+//ข้อมูล
+interface ResponseObject {
+    createdAt: Date 
+    createdFullName: string
+    createdUserId: string
+    dateOrder: Date
+    dateStart: Date | null
+    dateEnd: Date | null
+    department: string
+    duration : string
+    id: string
+    isActive: boolean
+    isDate: boolean
+    lastUpdateFullName: string
+    lastUpdateUserId: string
+    lastUpdateAt: Date
+    name: string
+    numberOrder: string
+    place: string
+    profileId: string
+    topic: string
+    yearly: number
+  }
+  
+  export type { ResponseObject };
+