Refactoring code module 02_organization

src/modules/02_organization/components/DialogHistory.vue

@@ -1,8 +1,10 @@
 <script setup lang="ts">
 import { ref, watch } from "vue";
 import { useQuasar } from "quasar";
+
 import http from "@/plugins/http";
 import config from "@/app.config";
+import { useCounterMixin } from "@/stores/mixin";
 
 /**
  * importType
@@ -15,11 +17,6 @@ import type { HistoryPostType } from "@/modules/02_organization/interface/index/
  */
 import DialogHeader from "@/components/DialogHeader.vue";
 
-/**
- * importStore
- */
-import { useCounterMixin } from "@/stores/mixin";
-
 /**
  * use
  */
@@ -37,14 +34,14 @@ const orgId = defineModel<string>("orgId", { required: true });
 /**
  * ข้อมุล Table
  */
-const rows = ref<HistoryPostType[]>([]);
+const rows = ref<HistoryPostType[]>([]); //ข้อมูลรายการประวัติหน่วยงาน
 const columns = ref<QTableProps["columns"]>([
   {
     name: "no",
     align: "left",
     label: "ลำดับ",
     sortable: false,
-    field: "no",
+    field: (row) => rows.value.indexOf(row) + 1,
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
@@ -72,7 +69,7 @@ const columns = ref<QTableProps["columns"]>([
     align: "left",
     label: "วันที่แก้ไข",
     sortable: true,
-    field: "lastUpdatedAt",
+    field: (v) => date2Thai(v),
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
@@ -85,26 +82,18 @@ const visibleColumns = ref<string[]>([
 ]);
 
 /**
- * function เรียกข้อมูล ประวัติหน่วยงาน,ประวัติส่วนราชการ
+ * function เรียกข้อมูลประวัติหน่วยงาน,ประวัติส่วนราชการ
  */
-function postData() {
+async function fetchHistory() {
   showLoader();
-  http
+  await http
     .post(config.API.organizationHistoryPostNew, {
       id: orgId.value,
       type: type.value,
     })
-    .then((res) => {
-      const dataList = res.data.result;
-      const dataMap = dataList.map((item: HistoryPostType) => ({
-        id: item.id ? item.id : "-",
-        name: item.name ? item.name : "-",
-        lastUpdatedAt: item.lastUpdatedAt
-          ? date2Thai(item.lastUpdatedAt as Date, false, true)
-          : "-",
-        orgRevisionName: item.orgRevisionName ? item.orgRevisionName : "-",
-      }));
-      rows.value = dataMap;
+    .then(async (res) => {
+      const data = await res.data.result;
+      rows.value = data;
     })
     .catch((e) => {
       messageError($q, e);
@@ -115,13 +104,13 @@ function postData() {
 }
 
 /**
- * callback function  เมื่อ modal = true เรียกข้อมูล ประวัติหน่วยงาน,ประวัติส่วนราชการ
+ * ดูการเปลี่ยนแปลง  modal เมื่อเป็น true จะเรียกข้อมูลประวัติหน่วยงาน,ประวัติส่วนราชการ
  */
 watch(
   () => modal.value,
   () => {
     if (modal.value == true) {
-      postData();
+      fetchHistory();
     }
   }
 );
@@ -177,43 +166,8 @@ watch(
                       :key="col.name"
                       :props="props"
                     >
-                      <div v-if="col.name == 'no'">
-                        {{ props.rowIndex + 1 }}
-                      </div>
-
-                      <div v-else-if="col.name == 'orgRevisionIsCurrent'">
-                        <q-icon
-                          :name="
-                            props.row.orgRevisionIsCurrent == true
-                              ? 'mdi-check'
-                              : ''
-                          "
-                          :color="
-                            props.row.orgRevisionIsCurrent == true
-                              ? 'positive'
-                              : ''
-                          "
-                          class="text-h5"
-                        />
-                      </div>
-                      <div v-else-if="col.name == 'orgRevisionIsDraft'">
-                        <q-icon
-                          :name="
-                            props.row.orgRevisionIsDraft == true
-                              ? 'mdi-check'
-                              : ''
-                          "
-                          :color="
-                            props.row.orgRevisionIsDraft == true
-                              ? 'positive'
-                              : ''
-                          "
-                          class="text-h5"
-                        />
-                      </div>
-
-                      <div v-else>
-                        {{ col.value }}
+                      <div>
+                        {{ col.value ?? "-" }}
                       </div>
                     </q-td>
                   </q-tr>