เงินเดือน => permission รายการผังบัญชีเงินเดือน

src/modules/13_salary/views/salaryRate.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { ref, onMounted, reactive, watch } from "vue";
+import { checkPermission } from "@/utils/permissions";
 import { useQuasar } from "quasar";
 import { useRouter, useRoute } from "vue-router";
 import http from "@/plugins/http";
@@ -240,13 +241,13 @@ watch([() => formQuery.page, () => formQuery.pageSize], async () => {
         class="q-mr-sm"
         @click="router.go(-1)"
       />
-      อัตราเงินเดือนของ {{ posType }}
+      อัตราเงินเดือนของ{{ posType }}
     </div>
   </div>
   <q-card flat bordered class="q-pa-md">
     <div class="col-12 row">
       <q-btn
-        v-if="!isActive"
+        v-if="!isActive && checkPermission($route)?.attrIsUpdate"
         flat
         round
         dense
@@ -283,52 +284,33 @@ watch([() => formQuery.page, () => formQuery.pageSize], async () => {
       >
         <template v-slot:header="props">
           <q-tr :props="props">
-            <q-th auto-width v-if="!isActive"></q-th>
+            <q-th auto-width />
             <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-if="!isActive">
+          <q-tr :props="props">
+            <q-td auto-width>
               <q-btn
-                
+                v-if="!isActive && checkPermission($route)?.attrIsUpdate"
                 flat
+                round
                 dense
-                icon="mdi-dots-vertical"
-                class="q-pa-none q-ml-xs"
-                color="grey-13"
-                size="12px"
+                v-for="(item, index) in itemMenu"
+                :key="index"
+                :color="item.color"
+                :icon="item.icon"
+                @click.stop="
+                  item.type === 'edit'
+                    ? onClickSalaryRate('edit', props.row)
+                    : item.type === 'delete'
+                    ? onClickDelete(props.row.id)
+                    : null
+                "
               >
-                <q-menu>
-                  <q-list dense style="min-width: 150px">
-                    <q-item
-                      v-for="(item, index) in itemMenu"
-                      :key="index"
-                      clickable
-                      v-close-popup
-                      @click.stop="
-                        item.type === 'edit'
-                          ? onClickSalaryRate('edit', props.row)
-                          : item.type === 'delete'
-                          ? onClickDelete(props.row.id)
-                          : null
-                      "
-                    >
-                      <q-item-section>
-                        <div class="row items-center">
-                          <q-icon
-                            :color="item.color"
-                            size="17px"
-                            :name="item.icon"
-                          />
-                          <div class="q-pl-md">{{ item.label }}</div>
-                        </div>
-                      </q-item-section>
-                    </q-item>
-                  </q-list>
-                </q-menu>
+                <q-tooltip>{{ item.label }}</q-tooltip>
               </q-btn>
             </q-td>
             <q-td
@@ -384,7 +366,6 @@ watch([() => formQuery.page, () => formQuery.pageSize], async () => {
                 {{ col.value ? col.value.toLocaleString() : "-" }}
               </div>
             </q-td>
-
           </q-tr>
         </template>
         <template v-slot:pagination="scope">