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

src/modules/06_retirement/components/ListRetirement/TableList.vue

@@ -164,11 +164,11 @@ const action = ref<string>("");
 onMounted(() => {
   retireld.value = retireld_params.toString();
   console.log(retireld_params);
-
   fecthlistprofile(retireld.value);
 });
 const round = ref<number>();
 const typeReport = ref<string>("");
+const statusReport = ref<boolean>();
 // fecthlist
 const fecthlistprofile = async (id: string) => {
   showLoader();
@@ -177,6 +177,7 @@ const fecthlistprofile = async (id: string) => {
     .then((res) => {
       console.log(res);
       round.value = res.data.result.round;
+      statusReport.value = res.data.result.json;
       typeReport.value = res.data.result.typeReport;
       rows.value = res.data.result.profile.map((e: any) => ({
         id: e.id,
@@ -193,6 +194,7 @@ const fecthlistprofile = async (id: string) => {
         reason: e.reason,
         remove: e.remove,
       }));
+      console.log(statusReport.value);
     })
     .catch((e) => {
       messageError($q, e);
@@ -320,11 +322,11 @@ const visibleNote = computed(() => {
 //     .onCancel(() => {})
 //     .onDismiss(() => {});
 // };
-// const classrow = (prop: any) => {
-//   if (profileId.value!=='' && prop.profileId === profileId.value) {
-//     return "color: #26a69a;";
-//   } else return "";
-// };
+const classrow = (prop: any) => {
+  if (profileId.value !== "" && prop.profileId === profileId.value) {
+    return "color: #26a69a;";
+  } else return "";
+};
 const paging = ref<boolean>(true);
 const pagination = ref({
   sortBy: "order",
@@ -360,9 +362,10 @@ const paginationLabel = (start: number, end: number, total: number) => {
           :profile-id="profileId"
           :UpdateListId="UpdateListId"
           v-if="
-            typeReport == null || typeReport == 'ADD' || typeReport == 'ADD'
+            statusReport !== true || typeReport == 'ADD' || typeReport == ''
           "
         />
+
         <!-- <q-btn flat round style="color: #016987;" icon="save" @click="saveList">
           <q-tooltip>บันทึกข้อมูล</q-tooltip>
         </q-btn> -->
@@ -454,8 +457,14 @@ const paginationLabel = (start: number, end: number, total: number) => {
                 </div>
               </q-th>
               <q-th auto-width />
-              <q-th auto-width v-if="typeReport === 'EDIT' || round === 1" />
-              <q-th auto-width v-if="typeReport === 'REMOVE' || round === 1" />
+              <q-th
+                auto-width
+                v-if="typeReport === 'EDIT' || statusReport !== true"
+              />
+              <q-th
+                auto-width
+                v-if="typeReport === 'REMOVE' || statusReport !== true"
+              />
             </q-tr>
           </template>
           <template v-slot:body="props">
@@ -523,7 +532,11 @@ const paginationLabel = (start: number, end: number, total: number) => {
                   <q-tooltip>ดูข้อมูลทะเบียนประวัติ</q-tooltip>
                 </q-btn> -->
               </q-td>
-              <q-td auto-width v-if="typeReport === 'EDIT' || round === 1">
+
+              <q-td
+                auto-width
+                v-if="typeReport === 'EDIT' || statusReport !== true"
+              >
                 <q-btn
                   flat
                   round
@@ -540,7 +553,10 @@ const paginationLabel = (start: number, end: number, total: number) => {
                   <q-tooltip>กรอกเหตุผล</q-tooltip>
                 </q-btn>
               </q-td>
-              <q-td auto-width v-if="typeReport === 'REMOVE' || round === 1">
+              <q-td
+                auto-width
+                v-if="typeReport === 'REMOVE' || statusReport !== true"
+              >
                 <q-btn
                   flat
                   round
@@ -550,7 +566,7 @@ const paginationLabel = (start: number, end: number, total: number) => {
                   @click.stop="
                     (modalNote = true),
                       (action = 'delete'),
-                      (note = props.row.remove),
+                      (note = props.row.reason),
                       (retireProfileId = props.row.id)
                   "
                   ><q-tooltip>ลบข้อมูล</q-tooltip></q-btn

src/modules/06_retirement/interface/response/Main.ts

@@ -1,8 +1,9 @@
-interface resMain{
-id:string;
-createdAt:Date;
-year:string;
-round:number;
-total:number;
+interface resMain {
+    id: string;
+    createdAt: Date;
+    year: string;
+    round: number;
+    total: number;
+    typeReport: String;
 }
-export type {resMain};
+export type { resMain };

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>