รอบการปฏิบัติงาน สิทธิ์

src/modules/09_leave/components/3_WorkTime/DialogForm.vue

@@ -20,7 +20,7 @@ const $q = useQuasar();
 
 const mixin = useCounterMixin();
 const { dialogConfirm, success, messageError } = mixin;
-
+const isRead = defineModel<boolean>("isRead", { required: true });
 /** propsData จาก RoundMain */
 const props = defineProps({
   modal: {
@@ -145,6 +145,7 @@ async function putRoundDuty(id: string) {
 //** Function ปิด Popup */
 function close() {
   props.closeDialog?.();
+  isRead.value = false;
 }
 
 /***/
@@ -183,7 +184,9 @@ watch(
             props.editCheck === 'add'
               ? 'เพิ่มรอบการปฏิบัติงาน'
               : props.detailData
-              ? `แก้ไขรอบ ${props.detailData.round}`
+              ? isRead
+                ? `รายละเอียดรอบ ${props.detailData.round}`
+                : `แก้ไขรอบ ${props.detailData.round}`
               : ''
           "
           :close="close"
@@ -199,7 +202,7 @@ watch(
               <q-input
                 ref="amRef"
                 class="inputgreen"
-                :readonly="props.editCheck === 'edit'"
+                :readonly="props.editCheck === 'edit' || isRead"
                 :outlined="props.editCheck === 'add'"
                 dense
                 lazy-rules
@@ -236,7 +239,7 @@ watch(
               <q-input
                 ref="amOutRef"
                 class="inputgreen"
-                :readonly="props.editCheck === 'edit'"
+                :readonly="props.editCheck === 'edit' || isRead"
                 :outlined="props.editCheck === 'add'"
                 dense
                 v-model="formData.endTimeMorning"
@@ -297,7 +300,7 @@ watch(
                   },
                 ]"
                 class="inputgreen"
-                :readonly="props.editCheck === 'edit'"
+                :readonly="props.editCheck === 'edit' || isRead"
                 :outlined="props.editCheck === 'add'"
                 dense
                 lazy-rules
@@ -334,7 +337,7 @@ watch(
                   },
                 ]"
                 class="inputgreen"
-                :readonly="props.editCheck === 'edit'"
+                :readonly="props.editCheck === 'edit' || isRead"
                 :outlined="props.editCheck === 'add'"
                 dense
                 v-model="formData.endTimeAfternoon"
@@ -350,6 +353,7 @@ watch(
             class="col-12 bg-white q-ma-md"
             outlined
             stack-label
+            :readonly="isRead"
             v-model="formData.description"
             label="คำอธิบาย"
             hide-bottom-space
@@ -360,8 +364,9 @@ watch(
           >
             <div class="row items-center q-my-sm justify-between">
               <p class="q-ma-none">เวลา Default</p>
-              <label class="toggle-control">
+              <label :class="`toggle-control ${isRead ? 'no-pointer-events' : ''}`">
                 <input
+                  :readonly="isRead"
                   type="checkbox"
                   v-model="formData.isDefault"
                   @change="checkDefault()"
@@ -375,7 +380,7 @@ watch(
           >
             <div class="row items-center q-my-sm justify-between">
               <p class="q-ma-none">สถานะการใช้งาน</p>
-              <label class="toggle-control">
+              <label :class="`toggle-control ${isRead ? 'no-pointer-events' : ''}`">
                 <input
                   type="checkbox"
                   v-model="formData.isActive"
@@ -386,8 +391,8 @@ watch(
             </div>
           </div>
         </q-card-section>
-        <q-separator color="grey-4" />
-        <div class="q-pa-sm">
+        <q-separator color="grey-4" v-if="!isRead"/>
+        <div class="q-pa-sm" v-if="!isRead">
           <div class="row justify-end">
             <q-btn
               id="onSubmit"

src/modules/09_leave/views/RoundMain.vue

@@ -10,6 +10,7 @@ import { useCounterMixin } from "@/stores/mixin";
 
 /** ImportComponents*/
 import DialogForm from "@/modules/09_leave/components/3_WorkTime/DialogForm.vue";
+import { checkPermission } from "@/utils/permissions";
 
 const mixin = useCounterMixin();
 const dataStore = useRoundDataStore();
@@ -20,6 +21,7 @@ const $q = useQuasar(); //ใช้ noti quasar
 const attrs = ref<any>(useAttrs());
 
 const modal = ref<boolean>(false);
+const isRead = ref<boolean>(false);
 const detailData = ref<any>();
 const editCheck = ref<string>("");
 
@@ -83,6 +85,20 @@ function openModal(data: any, check: string) {
   }
 }
 
+/**
+ *
+ * @param data ข้อมูลรอบการปฏิบัติงาน
+ * @param check action แก้ไข,เพิ่ม
+ */
+function openModalDetail(data: any, check: string) {
+  modal.value = true;
+  editCheck.value = check;
+  if (check === "edit") {
+    isRead.value = true;
+    detailData.value = data;
+  }
+}
+
 /** Function ปิด popup รายละเอียดและการเพิ่ม*/
 function closeDialog() {
   modal.value = false;
@@ -109,9 +125,10 @@ onMounted(() => {
     <div class="row col-12 q-col-gutter-sm q-mb-sm">
       <div>
         <q-btn
+          v-if="checkPermission($route)?.attrIsCreate"
           for="#addInvestigatefacts"
           @click="openModal(null, 'add')"
-          size="12px"
+          dense
           flat
           round
           color="add"
@@ -179,7 +196,6 @@ onMounted(() => {
       >
         <template v-slot:header="props">
           <q-tr :props="props">
-            <q-th auto-width></q-th>
             <q-th auto-width></q-th>
             <q-th
               v-for="col in props.cols"
@@ -192,18 +208,42 @@ onMounted(() => {
           </q-tr>
         </template>
         <template v-slot:body="props">
-          <q-tr :props="props" class="cursor-pointer">
-            <q-td>
+          <q-tr :props="props">
+            <q-td auto-width>
               <q-btn
+                v-if="checkPermission($route)?.attrIsGet"
+                dense
+                flat
+                round
+                color="info"
+                icon="mdi-eye"
+                @click.prevent="openModalDetail(props.row, 'edit')"
+              >
+                <q-tooltip>รายละเอียด</q-tooltip>
+              </q-btn>
+              <q-btn
+                v-if="
+                  checkPermission($route)?.attrIsGet &&
+                  checkPermission($route)?.attrIsUpdate
+                "
+                dense
+                flat
+                round
+                color="edit"
+                icon="edit"
+                @click.prevent="openModal(props.row, 'edit')"
+                ><q-tooltip>แก้ไขข้อมูล</q-tooltip>
+              </q-btn>
+              <q-btn
+                v-if="checkPermission($route)?.attrIsDelete"
                 dense
                 flat
                 round
                 color="red"
                 icon="delete"
                 @click="onClickDelete(props.row.id)"
-              />
-            </q-td>
-            <q-td auto-width>
+                ><q-tooltip>ลบข้อมูล</q-tooltip>
+              </q-btn>
               <q-icon
                 v-if="props.row.isDefault === true"
                 name="mdi-bookmark"
@@ -213,12 +253,7 @@ onMounted(() => {
                 <q-tooltip>เวลา Default</q-tooltip>
               </q-icon>
             </q-td>
-            <q-td
-              v-for="col in props.cols"
-              :key="col.name"
-              :props="props"
-              @click.prevent="openModal(props.row, 'edit')"
-            >
+            <q-td v-for="col in props.cols" :key="col.name" :props="props">
               <div v-if="col.name === 'isActive'" class="text-center">
                 <q-icon
                   v-if="props.row.isActive === true"
@@ -248,6 +283,7 @@ onMounted(() => {
     :editCheck="editCheck"
     :detailData="detailData"
     :fetchData="fetchListRoind"
+    v-model:isRead="isRead"
   />
 </template>
 <style scoped lang="scss">