fix:interface

src/modules/22_issues/views/Main.vue

@@ -10,6 +10,7 @@ import { useCounterMixin } from "@/stores/mixin";
 import { useIssueStore } from "@/modules/22_issues/store";
 
 import type { QTableProps } from "quasar";
+import type { IssueData } from "@/modules/22_issues/interface/Main";
 
 import DialogViewIssue from "@/modules/22_issues/components/DialogViewIssue.vue";
 
@@ -98,16 +99,17 @@ const columns = ref<QTableProps["columns"]>([
     format: (val: string) => convertStatus(val),
   },
 ]);
-const filterKeyword = ref<string>("");
-const systemFilter = ref<string>("");
-const statusFilter = ref<string>("NEW");
-const rows = ref<any[]>([]);
-const rowsData = ref<any[]>([]);
+const filterKeyword = ref<string>(""); // ค้นหา
+const systemFilter = ref<string>(""); // กรองระบบ
+const statusFilter = ref<string>("NEW"); // กรองสถานะ
+const rows = ref<IssueData[]>([]); // ข้อมูลตาราง
+const rowsData = ref<IssueData[]>([]); // ข้อมูลตารางทั้งหมด
 
-const modal = ref<boolean>(false);
-const typeModal = ref<string>("view");
-const dataIssue = ref<any>(null);
+const modal = ref<boolean>(false); // modal แสดงรายละเอียด
+const typeModal = ref<string>("view"); // ประเภท modal
+const dataIssue = ref<IssueData | null>(null); // ข้อมูลรายงานปัญหา
 
+/** fetch รายการรายงานปัญหา */
 async function fetchListIssues() {
   try {
     showLoader();
@@ -121,6 +123,7 @@ async function fetchListIssues() {
   }
 }
 
+/** ค้นหารายการรายงานปัญหา*/
 function onSearch() {
   let filtered = onSearchDataTable(
     filterKeyword.value,
@@ -144,12 +147,18 @@ function onSearch() {
   rows.value = filtered;
 }
 
-function onViewDetail(row: any, type: string) {
+/**
+ * แสดงรายละเอียดรายงานปัญหา
+ * @param row ข้อมูลรายงานปัญหา
+ * @param type ประเภทของ modal
+ */
+function onViewDetail(row: IssueData, type: string) {
   typeModal.value = type;
   dataIssue.value = row;
   modal.value = true;
 }
 
+/** โหลดข้อมูลเมื่อเข้าหน้า */
 onMounted(async () => {
   await fetchListIssues();
 });
@@ -300,7 +309,9 @@ onMounted(async () => {
                 </q-btn>
               </q-td>
               <q-td v-for="col in props.cols" :key="col.id">
-                <div>
+                <div
+                  :class="col.name === 'description' ? 'table_ellipsis' : ''"
+                >
                   {{ col.value ? col.value : "-" }}
                 </div>
               </q-td>
@@ -311,7 +322,12 @@ onMounted(async () => {
     </div>
   </q-card>
 
-  <DialogViewIssue v-model:modal="modal" :type="typeModal" :data="dataIssue" />
+  <DialogViewIssue
+    v-model:modal="modal"
+    :type="typeModal"
+    :data="dataIssue"
+    :fetch-data="fetchListIssues"
+  />
 </template>
 
 <style scoped></style>