แก้ไขการแสดง button

src/modules/06_retirement/views/Main.vue

@@ -143,6 +143,9 @@
                 <q-td key="retireNumber" :props="props">
                   {{ props.row.total }}
                 </q-td>
+                <q-td key="typeReport" :props="props">
+                  {{ props.row.typeReport }}
+                </q-td>
                 <!-- <q-td auto-width>
                   <q-btn
                     dense
@@ -223,6 +226,7 @@
                   option-value="id"
                   emit-value
                   map-options
+                  :rules="[(val) => !!val || 'กรุณาเลือกรอบ']"
                 />
               </q-item-label>
             </q-item-section>
@@ -249,6 +253,7 @@
                   option-value="id"
                   emit-value
                   map-options
+                  :rules="[(val) => !!val || 'กรุณาเลือกรอบ']"
               /></q-item-label>
             </q-item-section>
           </q-item>
@@ -295,7 +300,12 @@ const actionOption = ref<resMain[]>([]);
 const action = ref<string>("");
 
 const type = ref<string>("officer");
-const visibleColumns = ref<string[]>(["no", "Date", "retireNumber"]); //ค้นหา คอลัมน์ คอลัมน์ที่แสดง
+const visibleColumns = ref<string[]>([
+  "no",
+  "Date",
+  "retireNumber",
+  "typeReport",
+]); //ค้นหา คอลัมน์ คอลัมน์ที่แสดง
 
 // หัวตาราง
 const columns = ref<QTableProps["columns"]>([
@@ -303,7 +313,6 @@ const columns = ref<QTableProps["columns"]>([
     name: "no",
     align: "left",
     label: "ลำดับ",
-    sortable: true,
     field: "no",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
@@ -312,7 +321,6 @@ const columns = ref<QTableProps["columns"]>([
     name: "Date",
     align: "left",
     label: "วันที่สร้าง",
-    sortable: true,
     field: "Date",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
@@ -321,11 +329,18 @@ const columns = ref<QTableProps["columns"]>([
     name: "retireNumber",
     align: "left",
     label: "จำนวนผู้เกษียณ",
-    sortable: true,
     field: "retireNumber",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
+  {
+    name: "typeReport",
+    align: "left",
+    label: "ประเภทประการ",
+    field: "typeReport",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
 ]);
 
 // ข้อมูลตาราง (จำลอง)
@@ -350,18 +365,21 @@ const fetchRetirement = async (type: string, year: any) => {
       console.log(res);
       rows.value = [];
       let data = res.data.result;
-      rows.value = data.map((items: resMain) => ({
+      rows.value = data.map((items: any) => ({
         id: items.id,
         Date: date2Thai(items.createdAt),
         year: items.year,
         retireNumber: items.round,
         total: items.total,
         round: items.round,
+        typeReport: typeReportChangeName(items.typeReport),
       }));
       actionOption.value = rows.value;
-      console.log(actionOption.value);
+      rows.value.sort((a, b) => a.round - b.round);
+    })
+    .catch((e) => {
+      messageError($q, e);
     })
-    .catch((e) => {})
     .finally(() => {
       hideLoader();
     });
@@ -517,7 +535,7 @@ const cerateRetirement = async (data: object) => {
     });
 };
 const clickSelect = async (action: string) => {
-  // console.log(action);
+  console.log(action);
   // console.log(radio.value);
   $q.dialog({
     title: "ยืนยันการแก้ไขข้อมูลประกาศเกษียณ",
@@ -584,6 +602,19 @@ const nextPage = (prop: any) => {
 watch(type, () => {
   fetchRetirement(type.value, currentYear);
 });
+const typeReportChangeName = (val: string) => {
+  console.log(val);
+  switch (val) {
+    case "EDIT":
+      return "ประกาศแก้ไข้เกษียณ";
+    case "ADD":
+      return "ประกาศเพิ่มเกษียณ";
+    case "REMOVE":
+      return "ประกาศยกเลิกเกษียณ";
+    default:
+      return "ประกาศข้อมูลเกษียณ";
+  }
+};
 </script>
 
 <style lang="scss" scope>