พัฒนาบุคลากร

src/modules/15_development/views/Scholarship.vue

@@ -4,7 +4,7 @@ import { useQuasar, type QTableProps } from "quasar";
 import { useRouter } from "vue-router";
 import http from "@/plugins/http";
 import config from "@/app.config";
-
+import { checkPermission } from "@/utils/permissions";
 import genReportXLSX from "@/plugins/genreportxlsx";
 
 import type {
@@ -202,6 +202,10 @@ watch(
   }
 );
 
+function onDetail(id: string) {
+  router.push(`/development/scholarship-detail/${id}`);
+}
+
 /** ดึงข้อมูลเมื่ออยู่ในหน้า */
 onMounted(() => {
   fetchList();
@@ -278,6 +282,7 @@ onMounted(() => {
       </div>
 
       <q-btn
+        v-if="checkPermission($route)?.attrIsCreate"
         flat
         round
         dense
@@ -285,22 +290,11 @@ onMounted(() => {
         color="primary"
         @click="onClickAddOrView()"
       >
-        <q-tooltip>เพิ่ม</q-tooltip>
+        <q-tooltip>เพิ่มข้อมูล</q-tooltip>
       </q-btn>
 
       <q-space />
       <div class="row q-gutter-sm">
-        <!-- <q-btn
-          flat
-          round
-          dense
-          icon="mdi-arrow-down-bold-circle-outline"
-          color="blue"
-          @click="onDownload"
-        >
-          <q-tooltip>ดาวน์โหลด</q-tooltip>
-        </q-btn> -->
-
         <q-input
           standout
           dense
@@ -355,19 +349,42 @@ onMounted(() => {
       >
         <template v-slot:header="props">
           <q-tr :props="props">
+            <q-th auto-width></q-th>
             <q-th v-for="col in props.cols" :key="col.name" :props="props">
               <span class="text-weight-medium">{{ col.label }}</span>
             </q-th>
           </q-tr>
         </template>
         <template v-slot:body="props">
-          <q-tr :props="props" class="cursor-pointer">
-            <q-td
-              v-for="col in props.cols"
-              :key="col.name"
-              :props="props"
-              @click="onClickAddOrView(true, props.row.id)"
-            >
+          <q-tr :props="props">
+            <q-td auto-width>
+              <q-btn
+                v-if="checkPermission($route)?.attrIsGet"
+                flat
+                dense
+                round
+                icon="mdi-eye"
+                color="info"
+                @click="onDetail(props.row.id)"
+              >
+                <q-tooltip>รายละเอียด</q-tooltip>
+              </q-btn>
+              <q-btn
+                v-if="
+                  checkPermission($route)?.attrIsUpdate &&
+                  checkPermission($route)?.attrIsGet
+                "
+                flat
+                dense
+                round
+                icon="edit"
+                color="edit"
+                @click="onClickAddOrView(true, props.row.id)"
+              >
+                <q-tooltip>แก้ไขข้อมูล</q-tooltip>
+              </q-btn>
+            </q-td>
+            <q-td v-for="col in props.cols" :key="col.name" :props="props">
               <div class="table_ellipsis">
                 {{ col.value ? col.value : "-" }}
               </div>