From 38d5697a7ce4e5ccd158e3b7ac878648dbbd74cc Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Fri, 9 Aug 2024 16:59:57 +0700
Subject: [PATCH] =?UTF-8?q?=E0=B9=80=E0=B8=87=E0=B8=B4=E0=B8=99=E0=B9=80?=
 =?UTF-8?q?=E0=B8=94=E0=B8=B7=E0=B8=AD=E0=B8=99=20=3D>=20permission=20?=
 =?UTF-8?q?=E0=B8=9C=E0=B8=B1=E0=B8=87=E0=B8=9A=E0=B8=B1=E0=B8=8D=E0=B8=8A?=
 =?UTF-8?q?=E0=B8=B5=E0=B8=84=E0=B9=88=E0=B8=B2=E0=B8=88=E0=B9=89=E0=B8=B2?=
 =?UTF-8?q?=E0=B8=87=E0=B8=A5=E0=B8=B9=E0=B8=81=E0=B8=88=E0=B9=89=E0=B8=B2?=
 =?UTF-8?q?=E0=B8=87=E0=B8=9B=E0=B8=A3=E0=B8=B0=E0=B8=88=E0=B8=B3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../DialogEmployeeChart.vue                   |  20 +-
 .../DialogEmployeeRate.vue                    |  19 ++
 .../DialogEmployeeUpload.vue                  |  15 +-
 .../DialogFormCriteria.vue                    | 108 +++++----
 .../salaryEmployeeChart/TabCriteria.vue       |  79 ++++---
 .../salaryEmployeeChart/TabStructure.vue      | 215 +++++++++++-------
 .../13_salary/views/salaryEmployeeChart.vue   |   8 +-
 .../13_salary/views/salaryEmployeeRate.vue    | 100 ++------
 src/modules/13_salary/views/salaryRate.vue    |  11 +-
 9 files changed, 323 insertions(+), 252 deletions(-)

diff --git a/src/modules/13_salary/components/salaryEmployeeChart/DialogEmployeeChart.vue b/src/modules/13_salary/components/salaryEmployeeChart/DialogEmployeeChart.vue
index b2dea615b..dfb1f2ea5 100644
--- a/src/modules/13_salary/components/salaryEmployeeChart/DialogEmployeeChart.vue
+++ b/src/modules/13_salary/components/salaryEmployeeChart/DialogEmployeeChart.vue
@@ -26,6 +26,8 @@ const {
 
 /** props*/
 const modal = defineModel<boolean>("modal", { required: true });
+const activeType = defineModel<string>("activeType", { required: true });
+
 const props = defineProps({
   isStatusEdit: { type: Boolean, required: true },
   data: { type: Object, required: true },
@@ -65,7 +67,7 @@ function fetchSalaryDetail(id: string) {
       formData.startDate = data.startDate;
       formData.endDate = data.endDate;
       formData.details = data.details;
-      isReadonly.value = data.isActive ? true : false;
+      isReadonly.value = activeType.value === "view" ? true : data.isActive;
     })
     .catch((err) => {
       messageError($q, err);
@@ -84,9 +86,9 @@ function onSubmit() {
         ? config.API.salaryEmployeeChart
         : config.API.salaryEmployeeChartByid(props.data.id);
       await http[!props.isStatusEdit ? "post" : "put"](url, formData);
-      success($q, "บันทีกข้อมูลสำเร็จ");
-      props.fetchData?.();
+      await props.fetchData?.();
       closeDialog();
+      success($q, "บันทีกข้อมูลสำเร็จ");
     } catch (err) {
       messageError($q, err);
     } finally {
@@ -150,7 +152,9 @@ const getClass = (val: boolean) => {
       <q-form greedy @submit.prevent @validation-success="onSubmit">
         <Header
           :tittle="
-            props.isStatusEdit
+            props.isStatusEdit && activeType === 'view'
+              ? 'รายละเอียด'
+              : props.isStatusEdit
               ? 'แก้ไขผังบัญชีค่าจ้างลูกจ้างประจำ'
               : 'เพิ่มผังบัญชีค่าจ้างลูกจ้างประจำ'
           "
@@ -359,12 +363,8 @@ const getClass = (val: boolean) => {
           </div>
         </q-card-section>
         <q-separator />
-        <q-card-actions align="right">
-          <q-btn
-            label="บันทึก"
-            color="secondary"
-            type="submit"
-            :disable="isReadonly"
+        <q-card-actions align="right" v-if="!isReadonly">
+          <q-btn label="บันทึก" color="secondary" type="submit"
             ><q-tooltip>บันทึกข้อมูล</q-tooltip></q-btn
           >
         </q-card-actions>
diff --git a/src/modules/13_salary/components/salaryEmployeeChart/DialogEmployeeRate.vue b/src/modules/13_salary/components/salaryEmployeeChart/DialogEmployeeRate.vue
index daa0e58db..0391b16f1 100644
--- a/src/modules/13_salary/components/salaryEmployeeChart/DialogEmployeeRate.vue
+++ b/src/modules/13_salary/components/salaryEmployeeChart/DialogEmployeeRate.vue
@@ -117,6 +117,19 @@ watch(
     }
   }
 );
+
+const isReadonly = ref<boolean>(false);
+
+/**
+ * class จัดรูปแบบแสดงระหว่างข้อมูลที่แก้ไขหรือแสดงเฉยๆ
+ * @param val ข้อมูล input สำหรับแก้ไขหรือไม่
+ */
+const getClass = (val: boolean) => {
+  return {
+    "full-width inputgreen cursor-pointer": val,
+    "full-width cursor-pointer": !val,
+  };
+};
 </script>
 
 <template>
@@ -135,6 +148,8 @@ watch(
             <div class="row col-xs-12 col-md-12 q-col-gutter-sm">
               <div class="col-12">
                 <q-input
+                  :readonly="isReadonly"
+                  :class="getClass(!isReadonly)"
                   ref="salaryNoRef"
                   dense
                   outlined
@@ -154,6 +169,8 @@ watch(
 
               <div class="col-12">
                 <q-input
+                  :readonly="isReadonly"
+                  :class="getClass(!isReadonly)"
                   ref="salaryMonthRef"
                   dense
                   outlined
@@ -172,6 +189,8 @@ watch(
 
               <div class="col-12">
                 <q-input
+                  :readonly="isReadonly"
+                  :class="getClass(!isReadonly)"
                   ref="salaryDayRef"
                   dense
                   outlined
diff --git a/src/modules/13_salary/components/salaryEmployeeChart/DialogEmployeeUpload.vue b/src/modules/13_salary/components/salaryEmployeeChart/DialogEmployeeUpload.vue
index 4dc3a35e8..86b26b54a 100644
--- a/src/modules/13_salary/components/salaryEmployeeChart/DialogEmployeeUpload.vue
+++ b/src/modules/13_salary/components/salaryEmployeeChart/DialogEmployeeUpload.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { ref, watch } from "vue";
+import { checkPermission } from "@/utils/permissions";
 import { useQuasar } from "quasar";
 import axios from "axios";
 import http from "@/plugins/http";
@@ -207,7 +208,12 @@ watch(
             <div class="col-xs-12 col-md-3">
               <div class="row col-12 q-col-gutter-y-sm">
                 <div class="col-12 row">
-                  <div v-if="!props.isActive" class="full-width">
+                  <div
+                    v-if="
+                      !props.isActive && checkPermission($route)?.attrIsUpdate
+                    "
+                    class="full-width"
+                  >
                     <q-file
                       class="col-12"
                       outlined
@@ -260,7 +266,12 @@ watch(
                               <q-tooltip>ดาวน์โหลดไฟล์</q-tooltip>
                             </q-btn>
                           </div>
-                          <div v-if="!props.isActive">
+                          <div
+                            v-if="
+                              !props.isActive &&
+                              checkPermission($route)?.attrIsUpdate
+                            "
+                          >
                             <q-btn
                               dense
                               flat
diff --git a/src/modules/13_salary/components/salaryEmployeeChart/DialogFormCriteria.vue b/src/modules/13_salary/components/salaryEmployeeChart/DialogFormCriteria.vue
index 52907dc94..52a6f74e7 100644
--- a/src/modules/13_salary/components/salaryEmployeeChart/DialogFormCriteria.vue
+++ b/src/modules/13_salary/components/salaryEmployeeChart/DialogFormCriteria.vue
@@ -22,6 +22,7 @@ const { dialogConfirm, showLoader, hideLoader, messageError, success } =
 
 /** props*/
 const modal = defineModel<boolean>("modal", { required: true });
+const actionsType = defineModel<string>("actionsType", { default: "" });
 const isEdit = defineModel<boolean>("isStatusEdit", { required: true });
 const props = defineProps({
   data: {
@@ -39,6 +40,7 @@ const groupOldOp = ref<DataOptions[]>([]);
 const groupOldOpMain = ref<DataOptions[]>([]);
 const posLevelOp = ref<any[]>([]);
 const posNameListOp = ref<DataListOptions[]>([]);
+const isReadonly = ref<boolean>(false);
 
 const formData = reactive<any>({
   id: "",
@@ -104,10 +106,10 @@ function onSubmit() {
       ? config.API.salaryFormula()
       : config.API.salaryFormulaById(formData.id);
     await http[!isEdit.value ? "post" : "put"](url, body)
-      .then(() => {
-        success($q, "บันทึกข้อมูลสำเร็จ");
+      .then(async () => {
+        await props.getDataMain?.();
         closeDialog();
-        props.getDataMain?.();
+        await success($q, "บันทึกข้อมูลสำเร็จ");
       })
       .catch((e) => {
         messageError($q, e);
@@ -120,7 +122,6 @@ function onSubmit() {
 
 /** ดึงข้อมูล กลุ่มงาน */
 function getPosType() {
-  showLoader();
   http
     .get(config.API.salaryEmployeePosType())
     .then((res) => {
@@ -134,9 +135,6 @@ function getPosType() {
     })
     .catch((e) => {
       messageError($q, e);
-    })
-    .finally(() => {
-      hideLoader();
     });
 }
 
@@ -145,7 +143,6 @@ function getPosName() {
   if (formData.posType) {
     formData.posName = "";
     formData.posLevel = "";
-    showLoader();
     http
       .get(config.API.salaryEmployeePositionType(formData.posType.name))
       .then((res) => {
@@ -162,9 +159,6 @@ function getPosName() {
       })
       .catch((e) => {
         messageError($q, e);
-      })
-      .finally(() => {
-        hideLoader();
       });
   }
 }
@@ -238,26 +232,37 @@ function getSalaryGroup() {
 
 /** function fetch ข้อมูลหลักเกณฑ์ */
 function getDataEdit() {
-  http.get(config.API.salaryFormula() + `/${formData.id}`).then(async (res) => {
-    const data = res.data.result;
-    formData.posType = posTypeOp.value.find((a: any) => a.id == data.posTypeId);
-    formData.posName = data.position;
-    getPosNameEdit();
-    setTimeout(() => {
-      getPosLevelEdit();
-      formData.posLevel = posLevelOp.value.find(
-        (item: any) => item.id == data.posLevelId
+  showLoader();
+  http
+    .get(config.API.salaryFormula() + `/${formData.id}`)
+    .then(async (res) => {
+      const data = res.data.result;
+      formData.posType = posTypeOp.value.find(
+        (a: any) => a.id == data.posTypeId
       );
-      formData.reson = data.details;
-      formData.rateOldMin = data.salaryMin;
-      formData.groupOld = groupOldOp.value.filter((b: any) =>
-        data.salaryEmployeeMinIds.includes(b.id)
-      );
-      formData.rateMaxOld = data.salary;
-      formData.groupRateHigh = data.salaryEmployeeId;
-      formData.rateHighMax = data.salaryMax;
-    }, 200);
-  });
+      formData.posName = data.position;
+      getPosNameEdit();
+      setTimeout(() => {
+        getPosLevelEdit();
+        formData.posLevel = posLevelOp.value.find(
+          (item: any) => item.id == data.posLevelId
+        );
+        formData.reson = data.details;
+        formData.rateOldMin = data.salaryMin;
+        formData.groupOld = groupOldOp.value.filter((b: any) =>
+          data.salaryEmployeeMinIds.includes(b.id)
+        );
+        formData.rateMaxOld = data.salary;
+        formData.groupRateHigh = data.salaryEmployeeId;
+        formData.rateHighMax = data.salaryMax;
+      }, 200);
+    })
+    .catch(() => {})
+    .finally(() => {
+      setTimeout(() => {
+        hideLoader();
+      }, 1500);
+    });
 }
 watch(
   () => modal.value,
@@ -267,8 +272,11 @@ watch(
       getSalaryGroup();
 
       if (isEdit.value) {
+        isReadonly.value = actionsType.value === "view" ? true : false;
         formData.id = props.data?.id ? props.data.id : null;
         getDataEdit();
+      } else {
+        isReadonly.value = false;
       }
     }
   }
@@ -328,7 +336,13 @@ const getClass = (val: boolean) => {
     <q-card class="col-12" style="width: 80%">
       <q-form greedy @submit.prevent @validation-success="onSubmit">
         <Header
-          :tittle="isEdit ? 'แก้ไขหลักเกณฑ์' : 'เพิ่มหลักเกณฑ์'"
+          :tittle="
+            isEdit && actionsType === 'view'
+              ? 'รายละเอียด'
+              : isEdit
+              ? 'แก้ไขหลักเกณฑ์'
+              : 'เพิ่มหลักเกณฑ์'
+          "
           :close="closeDialog"
         />
         <q-separator />
@@ -338,7 +352,8 @@ const getClass = (val: boolean) => {
               <div class="col-4">
                 <q-select
                   ref="posTypeRef"
-                  :class="getClass(true)"
+                  :class="getClass(!isReadonly)"
+                  :readonly="isReadonly"
                   dense
                   outlined
                   v-model="formData.posType"
@@ -366,9 +381,9 @@ const getClass = (val: boolean) => {
               <div class="col-4">
                 <q-select
                   ref="posNameRef"
-                  :class="getClass(true)"
+                  :class="getClass(!isReadonly)"
+                  :readonly="isReadonly || formData.posType"
                   dense
-                  :readonly="formData.posType"
                   outlined
                   v-model="formData.posName"
                   label="ตำแหน่ง"
@@ -394,8 +409,8 @@ const getClass = (val: boolean) => {
               </div>
               <div class="col-4">
                 <q-select
-                  :readonly="formData.posName"
-                  :class="getClass(true)"
+                  :class="getClass(!isReadonly)"
+                  :readonly="isReadonly || formData.posName"
                   ref="posLevelRef"
                   dense
                   outlined
@@ -419,20 +434,23 @@ const getClass = (val: boolean) => {
                 </q-select>
               </div>
 
-              <div class="col-8">
+              <div class="col-12">
                 <q-input
-                  :class="getClass(true)"
+                  :class="getClass(!isReadonly)"
+                  :readonly="isReadonly"
                   dense
                   outlined
                   v-model="formData.reson"
                   label="หมายเหตุ"
+                  type="textarea"
                 />
               </div>
 
               <div class="col-12 text-bold">อัตราค่าจ้าง</div>
               <div class="col-4">
                 <q-input
-                  :class="getClass(true)"
+                  :class="getClass(!isReadonly)"
+                  :readonly="isReadonly"
                   ref="rateOldMinRef"
                   dense
                   outlined
@@ -449,7 +467,8 @@ const getClass = (val: boolean) => {
               </div>
               <div class="col-4">
                 <q-select
-                  :class="getClass(true)"
+                  :class="getClass(!isReadonly)"
+                  :readonly="isReadonly"
                   ref="groupOldRef"
                   dense
                   outlined
@@ -481,7 +500,8 @@ const getClass = (val: boolean) => {
               </div>
               <div class="col-4">
                 <q-input
-                  :class="getClass(true)"
+                  :class="getClass(!isReadonly)"
+                  :readonly="isReadonly"
                   ref="rateMaxOldRef"
                   dense
                   outlined
@@ -503,7 +523,8 @@ const getClass = (val: boolean) => {
               </div>
               <div class="col-4">
                 <q-select
-                  :class="getClass(true)"
+                  :class="getClass(!isReadonly)"
+                  :readonly="isReadonly"
                   ref="groupRateHighRef"
                   dense
                   outlined
@@ -533,7 +554,8 @@ const getClass = (val: boolean) => {
               </div>
               <div class="col-4">
                 <q-input
-                  :class="getClass(true)"
+                  :class="getClass(!isReadonly)"
+                  :readonly="isReadonly"
                   ref="rateHighMaxRef"
                   dense
                   outlined
diff --git a/src/modules/13_salary/components/salaryEmployeeChart/TabCriteria.vue b/src/modules/13_salary/components/salaryEmployeeChart/TabCriteria.vue
index 379f7c8c1..3387c4d46 100644
--- a/src/modules/13_salary/components/salaryEmployeeChart/TabCriteria.vue
+++ b/src/modules/13_salary/components/salaryEmployeeChart/TabCriteria.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { ref, reactive, onMounted, watch } from "vue";
+import { checkPermission } from "@/utils/permissions";
 import http from "@/plugins/http";
 import config from "@/app.config";
 import { useQuasar } from "quasar";
@@ -142,6 +143,7 @@ const formFilter = reactive({
 
 const modalForm = ref<boolean>(false);
 const isStatusEdit = ref<boolean>(false);
+const actionsType = ref<string>("");
 const dataRow = ref<ListData>();
 
 const posTypeOpMain = ref<DataOption[]>([]);
@@ -213,7 +215,8 @@ function getData() {
  * เปิด dialog แก้ไขหลักเกณฑ์
  * @param params
  */
-function editPopup(params: ListData) {
+function editPopup(params: ListData, type: string) {
+  actionsType.value = type;
   modalForm.value = true;
   isStatusEdit.value = true;
   dataRow.value = params;
@@ -330,7 +333,14 @@ onMounted(() => {
         </template>
       </q-select>
     </div>
-    <q-btn flat round dense icon="add" @click="() => (modalForm = true)">
+    <q-btn
+      v-if="checkPermission($route)?.attrIsCreate"
+      flat
+      round
+      dense
+      icon="add"
+      @click="() => (modalForm = true)"
+    >
       <q-tooltip>เพิ่ม </q-tooltip>
     </q-btn>
     <q-space />
@@ -388,39 +398,43 @@ onMounted(() => {
     </template>
     <template v-slot:body="props">
       <q-tr :props="props" class="cursor-pointer">
-        <q-td>
+        <q-td auto-width>
           <q-btn
+            v-if="checkPermission($route)?.attrIsGet"
             flat
+            round
             dense
-            icon="mdi-dots-vertical"
-            class="q-pa-none q-ml-xs"
-            color="grey-13"
-            size="12px"
+            icon="mdi-eye"
+            color="info"
+            @click="editPopup(props.row, 'view')"
           >
-            <q-menu>
-              <q-list dense style="min-width: 200px">
-                <q-item clickable v-close-popup>
-                  <q-item-section>
-                    <div class="row items-center" @click="editPopup(props.row)">
-                      <q-icon color="edit" size="17px" name="edit" />
-                      <div class="q-pl-md">แก้ไขข้อมูล</div>
-                    </div>
-                  </q-item-section>
-                </q-item>
-                <q-item
-                  clickable
-                  v-close-popup
-                  @click.stop="onClickDelete(props.row.id)"
-                >
-                  <q-item-section>
-                    <div class="row items-center">
-                      <q-icon color="red" size="17px" name="delete" />
-                      <div class="q-pl-md">ลบ</div>
-                    </div>
-                  </q-item-section>
-                </q-item>
-              </q-list>
-            </q-menu>
+            <q-tooltip>รายละเอียด</q-tooltip>
+          </q-btn>
+          <q-btn
+            v-if="
+              checkPermission($route)?.attrIsGet &&
+              checkPermission($route)?.attrIsUpdate
+            "
+            flat
+            round
+            dense
+            icon="edit"
+            color="edit"
+            @click="editPopup(props.row, 'edit')"
+          >
+            <q-tooltip>แก้ไขข้อมูล</q-tooltip>
+          </q-btn>
+
+          <q-btn
+            v-if="checkPermission($route)?.attrIsDelete"
+            flat
+            round
+            dense
+            icon="mdi-delete"
+            color="red"
+            @click.stop="onClickDelete(props.row.id)"
+          >
+            <q-tooltip>ลบข้อมูล</q-tooltip>
           </q-btn>
         </q-td>
         <q-td v-for="col in props.cols" :key="col.name" :props="props">
@@ -447,8 +461,6 @@ onMounted(() => {
           </div>
           <div v-else>{{ col.value != "" ? col.value : "-" }}</div>
         </q-td>
-
-
       </q-tr>
     </template>
     <template v-slot:pagination="scope">
@@ -472,6 +484,7 @@ onMounted(() => {
     v-model:isStatusEdit="isStatusEdit"
     :data="dataRow"
     :get-data-Main="getData"
+    :actionsType="actionsType"
   />
 </template>
 
diff --git a/src/modules/13_salary/components/salaryEmployeeChart/TabStructure.vue b/src/modules/13_salary/components/salaryEmployeeChart/TabStructure.vue
index bc9c8d5e5..c5c5870b3 100644
--- a/src/modules/13_salary/components/salaryEmployeeChart/TabStructure.vue
+++ b/src/modules/13_salary/components/salaryEmployeeChart/TabStructure.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { ref, reactive, onMounted, watch } from "vue";
+import { checkPermission } from "@/utils/permissions";
 import { useQuasar } from "quasar";
 import { useRouter } from "vue-router";
 import http from "@/plugins/http";
@@ -7,10 +8,7 @@ import config from "@/app.config";
 
 /** importType*/
 import type { QTableProps } from "quasar";
-import type {
-  ItemsMenu,
-  NewPagination,
-} from "@/modules/13_salary/interface/index/Main";
+import type { NewPagination } from "@/modules/13_salary/interface/index/Main";
 import type { FormFilter } from "@/modules/13_salary/interface/request/EmployeeChart";
 import type { EmployeeSalary } from "@/modules/13_salary/interface/response/salaryEmployeeChart";
 
@@ -43,6 +41,7 @@ const totalList = ref<number>(0);
 
 const modalDialogEmployeeChart = ref<boolean>(false);
 const isStatusEdit = ref<boolean>(false);
+const activeType = ref<string>("");
 const dataRow = ref<EmployeeSalary>();
 
 /** ข้อมูล Table*/
@@ -92,34 +91,6 @@ const visibleColumns = ref<string[]>([
   "isActive",
 ]);
 
-/** List Mune*/
-const itemMenu = ref<ItemsMenu[]>([
-  {
-    label: "แก้ไข",
-    icon: "edit",
-    color: "edit",
-    type: "edit",
-  },
-  {
-    label: "เอกสารอ้างอิง",
-    icon: "mdi-file-document-outline",
-    color: "teal",
-    type: "upload",
-  },
-  {
-    label: "อัตราค่าจ้าง",
-    icon: "mdi-format-list-bulleted-triangle",
-    color: "secondary",
-    type: "salaryRate",
-  },
-  {
-    label: "คัดลอก",
-    icon: "content_copy",
-    color: "blue-6",
-    type: "copy",
-  },
-]);
-
 /** function fetch ข้แมูลรายาการผังบัญชีค่าจ้างลูกจ้างประจำ */
 function fetchListChart() {
   showLoader();
@@ -141,38 +112,39 @@ function fetchListChart() {
     });
 }
 
-/**
- * function เลือกเมนู
- * @param type ประเทภเมนู
- * @param data ข้อมูลผังบัญชีค่าจ้างลูกจ้างประจำ
- */
-function onClickAction(type: string, data: EmployeeSalary) {
-  switch (type) {
-    case "edit":
-      onEdit(data);
-      break;
-    case "upload":
-      onUpload(data.id, data.isActive);
-      break;
-    case "salaryRate":
-      onSalaryRate(data.id);
-      break;
-    case "copy":
-      onCoppy(data.id);
-      break;
-    default:
-      break;
-  }
-}
+// /**
+//  * function เลือกเมนู
+//  * @param type ประเทภเมนู
+//  * @param data ข้อมูลผังบัญชีค่าจ้างลูกจ้างประจำ
+//  */
+// function onClickAction(type: string, data: EmployeeSalary) {
+//   switch (type) {
+//     case "edit":
+//       onEdit(data);
+//       break;
+//     case "upload":
+//       onUpload(data.id, data.isActive);
+//       break;
+//     case "salaryRate":
+//       onSalaryRate(data.id);
+//       break;
+//     case "copy":
+//       onCoppy(data.id);
+//       break;
+//     default:
+//       break;
+//   }
+// }
 
 /**
  *  function openDialog แก้ไขผังบัญชีค่าจ้างลูกจ้างประจำ
  * @param data ข้อมูลผังบัญชีค่าจ้างลูกจ้างประจำ
  */
-function onEdit(data: EmployeeSalary) {
-  modalDialogEmployeeChart.value = true;
+function onEdit(data: EmployeeSalary, type: string) {
+  activeType.value = type;
   isStatusEdit.value = true;
   dataRow.value = data;
+  modalDialogEmployeeChart.value = true;
 }
 
 const modalDialogUpload = ref<boolean>(false);
@@ -205,9 +177,9 @@ function onSalaryRate(id: string) {
 function onCoppy(id: string) {
   http
     .post(config.API.salaryEmployeeChartCopy, { id: id })
-    .then(() => {
-      fetchListChart();
-      success($q, "คัดลอกข้อมูลสำเร็จ");
+    .then(async () => {
+      await fetchListChart();
+      await success($q, "คัดลอกข้อมูลสำเร็จ");
     })
     .catch((err) => {
       messageError($q, err);
@@ -222,9 +194,9 @@ function onClickDelete(id: string) {
   dialogRemove($q, () => {
     http
       .delete(config.API.salaryEmployeeChartByid(id))
-      .then(() => {
-        fetchListChart();
-        success($q, "ลบข้อมูลสำเร็จ");
+      .then(async () => {
+        await fetchListChart();
+        await success($q, "ลบข้อมูลสำเร็จ");
       })
       .catch((err) => {
         messageError($q, err);
@@ -273,7 +245,14 @@ onMounted(() => {
 </script>
 <template>
   <q-toolbar class="text-primary" style="padding: 0px">
-    <q-btn flat round dense icon="add" @click="onClickAdd()">
+    <q-btn
+      v-if="checkPermission($route)?.attrIsCreate"
+      flat
+      round
+      dense
+      icon="add"
+      @click="onClickAdd()"
+    >
       <q-tooltip>เพิ่ม </q-tooltip>
     </q-btn>
     <q-space />
@@ -330,43 +309,121 @@ onMounted(() => {
       <q-tr :props="props" class="cursor-pointer">
         <q-td>
           <q-btn
+            v-if="
+              checkPermission($route)?.attrIsGet ||
+              checkPermission($route)?.attrIsCreate ||
+              (checkPermission($route)?.attrIsDelete &&
+                props.row.isActive == false)
+            "
             flat
             dense
-            icon="mdi-dots-vertical"
-            class="q-pa-none q-ml-xs"
-            color="grey-13"
-            size="12px"
+            color="secondary"
+            icon="mdi-dots-horizontal-circle-outline"
+            round
           >
             <q-menu>
               <q-list dense style="min-width: 200px">
+                <!-- อัตราเงินเดือน -->
                 <q-item
-                  v-for="(item, index) in itemMenu"
-                  :key="index"
+                  v-if="checkPermission($route)?.attrIsGet"
                   clickable
                   v-close-popup
-                  @click.stop="onClickAction(item.type, props.row)"
+                  @click.stop="onSalaryRate(props.row.id)"
                 >
                   <q-item-section>
                     <div class="row items-center">
                       <q-icon
-                        :color="item.color"
-                        size="17px"
-                        :name="item.icon"
+                        color="secondary"
+                        size="xs"
+                        name="mdi-format-list-bulleted-triangle"
                       />
-                      <div class="q-pl-md">{{ item.label }}</div>
+                      <div class="q-pl-md">อัตราเงินเดือน</div>
                     </div>
                   </q-item-section>
                 </q-item>
+
+                <!-- เอกสารอ้างอิง -->
                 <q-item
-                  v-if="props.row.isActive == false"
+                  v-if="checkPermission($route)?.attrIsGet"
+                  clickable
+                  v-close-popup
+                  @click.stop="onUpload(props.row.id, props.row.isActive)"
+                >
+                  <q-item-section>
+                    <div class="row items-center">
+                      <q-icon
+                        color="teal"
+                        size="xs"
+                        name="mdi-file-document-outline"
+                      />
+                      <div class="q-pl-md">เอกสารอ้างอิง</div>
+                    </div>
+                  </q-item-section>
+                </q-item>
+
+                <!-- รายละเอียด -->
+                <q-item
+                  v-if="checkPermission($route)?.attrIsGet"
+                  clickable
+                  v-close-popup
+                  @click.stop="onEdit(props.row, 'view')"
+                >
+                  <q-item-section>
+                    <div class="row items-center">
+                      <q-icon color="info" size="xs" name="mdi-eye" />
+                      <div class="q-pl-md">รายละเอียด</div>
+                    </div>
+                  </q-item-section>
+                </q-item>
+
+                <!-- แก้ไข -->
+                <q-item
+                  v-if="
+                    checkPermission($route)?.attrIsUpdate &&
+                    checkPermission($route)?.attrIsGet &&
+                    !props.row.isActive
+                  "
+                  clickable
+                  v-close-popup
+                  @click.stop="onEdit(props.row, 'edit')"
+                >
+                  <q-item-section>
+                    <div class="row items-center">
+                      <q-icon color="edit" size="xs" name="edit" />
+                      <div class="q-pl-md">แก้ไข</div>
+                    </div>
+                  </q-item-section>
+                </q-item>
+
+                <!-- คัดลอก -->
+                <q-item
+                  v-if="checkPermission($route)?.attrIsCreate"
+                  clickable
+                  v-close-popup
+                  @click.stop="onCoppy(props.row.id)"
+                >
+                  <q-item-section>
+                    <div class="row items-center">
+                      <q-icon color="blue-6" size="xs" name="content_copy" />
+                      <div class="q-pl-md">คัดลอก</div>
+                    </div>
+                  </q-item-section>
+                </q-item>
+
+                <!-- ลบข้อมูล -->
+                <q-item
+                  v-if="
+                    props.row.isActive == false &&
+                    checkPermission($route)?.attrIsDelete
+                  "
                   clickable
                   v-close-popup
                   @click.stop="onClickDelete(props.row.id)"
                 >
                   <q-item-section>
                     <div class="row items-center">
-                      <q-icon color="red" size="17px" name="delete" />
-                      <div class="q-pl-md">ลบ</div>
+                      <q-icon color="red" size="xs" name="delete" />
+                      <div class="q-pl-md">ลบข้อมูล</div>
                     </div>
                   </q-item-section>
                 </q-item>
@@ -390,7 +447,6 @@ onMounted(() => {
           </div>
           <div v-else>{{ col.value ? col.value : "-" }}</div>
         </q-td>
-
       </q-tr>
     </template>
     <template v-slot:pagination="scope">
@@ -414,6 +470,7 @@ onMounted(() => {
     :isStatusEdit="isStatusEdit"
     :data="dataRow as EmployeeSalary"
     :fetchData="fetchListChart"
+    :activeType="activeType"
   />
 
   <DialogEmployeeUpload
diff --git a/src/modules/13_salary/views/salaryEmployeeChart.vue b/src/modules/13_salary/views/salaryEmployeeChart.vue
index a00ed82d8..8128edd4f 100644
--- a/src/modules/13_salary/views/salaryEmployeeChart.vue
+++ b/src/modules/13_salary/views/salaryEmployeeChart.vue
@@ -32,14 +32,14 @@ const store = useSalaryEmployeeChartDataStore();
     <q-separator />
 
     <q-tab-panels v-model="store.mainTab" animated>
-      <q-tab-panel name="structure">
-        <div class="q-pa-sm">
+      <q-tab-panel name="structure" class="q-pt-none">
+        <div class="q-pa-xs">
           <TabStructure />
         </div>
       </q-tab-panel>
 
-      <q-tab-panel name="criteria">
-        <div class="q-pa-sm">
+      <q-tab-panel name="criteria" class="q-pt-none">
+        <div class="q-pa-xs">
           <TabCriteris />
         </div>
       </q-tab-panel>
diff --git a/src/modules/13_salary/views/salaryEmployeeRate.vue b/src/modules/13_salary/views/salaryEmployeeRate.vue
index c0dd6fb1a..11b0d2b31 100644
--- a/src/modules/13_salary/views/salaryEmployeeRate.vue
+++ b/src/modules/13_salary/views/salaryEmployeeRate.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { ref, reactive, onMounted, watch } from "vue";
+import { checkPermission } from "@/utils/permissions";
 import { useQuasar } from "quasar";
 import { useRouter, useRoute } from "vue-router";
 import http from "@/plugins/http";
@@ -145,20 +146,6 @@ const modalDialogEmployeeRate = ref<boolean>(false);
 const isStatusEdit = ref<boolean>(false);
 const dataRow = ref<EmployeeRateSalary>();
 
-function onClickAction(type: string, data: EmployeeRateSalary) {
-  switch (type) {
-    case "edit":
-      onEdit(data);
-      break;
-    case "delete":
-      onDelete(data.id);
-      break;
-
-    default:
-      break;
-  }
-}
-
 function onEdit(data: EmployeeRateSalary) {
   modalDialogEmployeeRate.value = true;
   isStatusEdit.value = true;
@@ -186,11 +173,6 @@ function onClickAdd() {
   isStatusEdit.value = false;
 }
 
-function filterFn() {
-  formFilter.page = 1;
-  fetchSalalyEmployeeRate();
-}
-
 function updatePage(val: number) {
   formFilter.page = val;
   fetchSalalyEmployeeRate();
@@ -243,12 +225,19 @@ onMounted(async () => {
         class="q-mr-sm"
         @click="router.go(-1)"
       />
-      อัตราค่าจ้างของ กลุ่มที่ {{ groupSalary }}
+      อัตราค่าจ้างของกลุ่มที่ {{ groupSalary }}
     </div>
   </div>
   <q-card flat bordered class="q-pa-md">
     <q-toolbar class="text-primary" style="padding: 0px">
-      <q-btn v-if="!isActive" flat round dense icon="add" @click="onClickAdd">
+      <q-btn
+        v-if="!isActive && checkPermission($route)?.attrIsUpdate"
+        flat
+        round
+        dense
+        icon="add"
+        @click="onClickAdd"
+      >
         <q-tooltip>เพิ่ม </q-tooltip>
       </q-btn>
       <q-space />
@@ -259,34 +248,6 @@ onMounted(async () => {
         color="blue"
         @click="clickDownload()"
       />
-      <!-- <q-input
-        borderless
-        dense
-        outlined
-        v-model="formFilter.keyword"
-        @keydown.enter.pervrnt="filterFn"
-        placeholder="ค้นหา"
-      >
-        <template v-slot:append>
-          <q-icon name="search" />
-        </template>
-      </q-input>
-      <q-select
-        for="#select"
-        v-model="visibleColumns"
-        multiple
-        outlined
-        dense
-        options-dense
-        :display-value="$q.lang.table.columns"
-        emit-value
-        map-options
-        :options="columns"
-        option-value="name"
-        options-cover
-        style="min-width: 150px"
-        class="col-xs-12 col-sm-3 col-md-2 q-ml-sm"
-      /> -->
     </q-toolbar>
     <div class="col-12">
       <d-table
@@ -314,41 +275,28 @@ onMounted(async () => {
           <q-tr :props="props" class="cursor-pointer">
             <q-td v-if="!isActive">
               <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'
+                    ? onEdit(props.row)
+                    : item.type === 'delete'
+                    ? onDelete(props.row.id)
+                    : null
+                "
               >
-                <q-menu>
-                  <q-list dense style="min-width: 200px">
-                    <q-item
-                      v-for="(item, index) in itemMenu"
-                      :key="index"
-                      clickable
-                      v-close-popup
-                      @click.stop="onClickAction(item.type, props.row)"
-                    >
-                      <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 v-for="col in props.cols" :key="col.name" :props="props">
               {{ col.value ? col.value : "-" }}
             </q-td>
-
           </q-tr>
         </template>
         <template v-slot:pagination="scope">
diff --git a/src/modules/13_salary/views/salaryRate.vue b/src/modules/13_salary/views/salaryRate.vue
index 56bba6f83..7b2e2eeba 100644
--- a/src/modules/13_salary/views/salaryRate.vue
+++ b/src/modules/13_salary/views/salaryRate.vue
@@ -176,17 +176,18 @@ function onClickSalaryRate(type: string, data: SalaryRate | null) {
 }
 
 function onClickDelete(id: string) {
-  dialogRemove($q, async () => {
-    await http
+  dialogRemove($q, () => {
+    showLoader();
+    http
       .delete(config.API.salaryRateListByid(id))
-      .then(() => {
-        success($q, "ลบข้อมูลสำเร็จ");
+      .then(async () => {
+        await fetchListSalalyRate();
+        await success($q, "ลบข้อมูลสำเร็จ");
       })
       .catch((err) => {
         messageError($q, err);
       })
       .finally(() => {
-        fetchListSalalyRate();
         hideLoader();
       });
   });