file step 2

src/modules/06_evaluate/components/viewstep/popupHistory.vue

@@ -1,25 +1,26 @@
 <script setup lang="ts">
-import { ref } from "vue";
-import type { QTableProps } from "quasar";
+import { ref, watch } from "vue";
+import http from "@/plugins/http";
+import config from "@/app.config";
 
 import HeaderDialog from "@/components/DialogHeader.vue";
 
+import type { QTableProps } from "quasar";
+import { useCounterMixin } from "@/stores/mixin";
+
+const mixins = useCounterMixin();
+const { showLoader, hideLoader, date2Thai } = mixins;
+
 /** รับ props Tab 1  */
 const props = defineProps({
+  id: {
+    type: String,
+    require: true,
+  },
   modal: {
     type: Boolean,
     require: true,
   },
-  // fetchDirector: {
-  //   type: Function,
-  //   require: true,
-  //   default: () => "",
-  // },
-  // fetchMeeting: {
-  //   type: Function,
-  //   require: true,
-  //   default: () => "",
-  // },
   close: {
     type: Function,
     default: () => "",
@@ -37,33 +38,60 @@ const columns = ref<QTableProps["columns"]>([
     style: "font-size: 14px",
   },
   {
-    name: "statusEdit",
+    name: "Step",
     align: "left",
     label: "การแก้ไข",
     sortable: true,
-    field: "statusEdit",
+    field: "Step",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
   {
-    name: "operator",
+    name: "LastUpdateFullName",
     align: "left",
     label: "ผู้ดำเนินการ",
     sortable: true,
-    field: "operator",
+    field: "LastUpdateFullName",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
   {
-    name: "dateEdit",
+    name: "LastUpdatedAt",
     align: "left",
     label: "วันที่แก้ไข",
     sortable: true,
-    field: "dateEdit",
+    field: "LastUpdatedAt",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
 ]);
+const row = ref<any>();
+
+async function fetchListHistory(id: string) {
+  showLoader();
+  await http
+    .get(config.API.evaluationHistory(id))
+    .then((res) => {
+      const data = res.data.result;
+      const list = data.map((e: any) => ({
+        Step: e.Step,
+        LastUpdateFullName: e.LastUpdateFullName,
+        LastUpdatedAt: date2Thai(e.LastUpdatedAt),
+      }));
+      row.value = list;
+    })
+    .catch((err) => {})
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+watch(
+  () => props.modal,
+  () => {
+    props.modal && props.id && fetchListHistory(props.id);
+  }
+);
 </script>
 <template>
   <q-dialog v-model="props.modal">
@@ -81,6 +109,7 @@ const columns = ref<QTableProps["columns"]>([
               bordered
               class="custom-header-table"
               :columns="columns"
+              :rows="row"
               dense
               :rows-per-page-options="[10, 25, 50, 100]"
             >