ต่อ api รายละเอียดการประเมินของ

src/modules/12_evaluatePersonal/components/Detail/viewTab2/CardMeet.vue

@@ -1,7 +1,25 @@
 <script setup lang="ts">
-import { ref } from "vue";
+import { ref, onMounted, watch, defineProps } from "vue";
 import type { QTableProps } from "quasar";
+import { useQuasar } from "quasar";
+import { useCounterMixin } from "@/stores/mixin";
+import { useRouter, useRoute } from "vue-router";
+import http from "@/plugins/http";
+import config from "@/app.config";
 
+const router = useRouter();
+const route = useRoute();
+const id = ref<string>(route.params.id as string);
+const mixin = useCounterMixin();
+const $q = useQuasar();
+const props = defineProps({
+  data: {
+    type: Array,
+    default: [],
+  },
+});
+const { showLoader, hideLoader, messageError, dialogConfirm, date2Thai } =
+  mixin;
 import DialogMeet from "@/modules/12_evaluatePersonal/components/Detail/viewTab2/DialogMeet.vue";
 
 const columns = ref<QTableProps["columns"]>([
@@ -17,22 +35,22 @@ const columns = ref<QTableProps["columns"]>([
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
-    name: "dateMeeting",
+    name: "date",
     align: "left",
     label: "วันเวลาในการประชุม",
     sortable: true,
-    field: "dateMeeting",
+    field: "date",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
     sort: (a: string, b: string) =>
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
-    name: "results",
+    name: "result",
     align: "left",
     label: "ผลการพิจารณาของคณะกรรมการประเมินผลงานแต่ละคณะ",
     sortable: true,
-    field: "results",
+    field: "result",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
     sort: (a: string, b: string) =>
@@ -86,9 +104,89 @@ async function updatePaging(rpp: number, p: number) {
  */
 function returnData(data: any) {
   const dataList = data.map((item: any) => item.id);
-  rows.value = data;
-  onClickClose();
+  dialogConfirm($q, () => {
+    showLoader();
+    http
+      .put(config.API.evaluationChooseMeeting(id.value), {
+        meetings: dataList,
+      })
+      .then((res) => {
+        console.log(res);
+      })
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(() => {
+        hideLoader();
+        onClickClose();
+      });
+  });
 }
+
+async function getList() {
+  showLoader();
+  await http
+    .get(
+      config.API
+        .meeting
+        // currentPage.value,
+        // rowsPerPage.value,
+        // filterKeyword.value
+        ()
+    )
+    .then((res) => {
+      // maxPage.value = Math.ceil(res.data.result.total / rowsPerPage.value);
+      const data = res.data.result;
+      listMeet.value = data.map((item: any) => ({
+        id: item.id,
+        createdAt: item.createdAt,
+        createdUserId: item.createdUserId,
+        lastUpdatedAt: item.lastUpdatedAt,
+        lastUpdateUserId: item.lastUpdateUserId,
+        createdFullName: item.createdFullName,
+        lastUpdateFullName: item.lastUpdateFullName,
+        title: item.tittle,
+        round: item.round,
+        date: `${date2Thai(item.dateStart as Date, false, true)} - ${date2Thai(
+          item.dateEnd as Date,
+          false,
+          true
+        )}`,
+        result: item.result,
+        timePeriod: item.duration,
+      }));
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+onMounted(() => {
+  getList();
+});
+
+watch(
+  () => props.data,
+  () => {
+    if (props.data) {
+      console.log(props.data)
+      rows.value = props.data.map((item: any) => ({
+        id: item.id,
+        date: `${date2Thai(item.dateStart as Date, false, true)} - ${date2Thai(
+          item.dateEnd as Date,
+          false,
+          true
+        )}`,
+        dateStart: item.dateStart,
+        dateEnd: item.dateEnd,
+        result: item.result,
+        timePeriod: item.duration,
+      }));
+    }
+  }
+);
 </script>
 <template>
   <q-card bordered class="row col-12" style="border: 1px solid #d6dee1">