From d62a7e536cbc1ff4a54e2a4b3c8594b8abe13da6 Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Fri, 9 Aug 2024 15:38:30 +0700
Subject: [PATCH] no message

---
 .../components/SalaryChart/DialogFormRate.vue | 27 ++++++++++++++++++-
 1 file changed, 26 insertions(+), 1 deletion(-)

diff --git a/src/modules/13_salary/components/SalaryChart/DialogFormRate.vue b/src/modules/13_salary/components/SalaryChart/DialogFormRate.vue
index b1df17224..eb47b489a 100644
--- a/src/modules/13_salary/components/SalaryChart/DialogFormRate.vue
+++ b/src/modules/13_salary/components/SalaryChart/DialogFormRate.vue
@@ -16,7 +16,6 @@ import Header from "@/components/DialogHeader.vue";
 import { useCounterMixin } from "@/stores/mixin";
 
 /** use*/
-
 const $q = useQuasar();
 const route = useRoute();
 const { dialogConfirm, showLoader, hideLoader, messageError, success } =
@@ -39,6 +38,7 @@ const props = defineProps({
   },
 });
 
+const isReadonly = ref<boolean>(false);
 const salaryId = ref<string>(route.params.id.toString());
 const formData = reactive<FormSalaryRate>({
   salaryId: "",
@@ -170,6 +170,17 @@ watch(
     }
   }
 );
+
+/**
+ * class จัดรูปแบบแสดงระหว่างข้อมูลที่แก้ไขหรือแสดงเฉยๆ
+ * @param val ข้อมูล input สำหรับแก้ไขหรือไม่
+ */
+const getClass = (val: boolean) => {
+  return {
+    "full-width inputgreen cursor-pointer": val,
+    "full-width cursor-pointer": !val,
+  };
+};
 </script>
 
 <template>
@@ -184,6 +195,8 @@ watch(
             <div class="row col-xs-12 col-md-12 q-col-gutter-sm">
               <div class="col-6">
                 <q-input
+                  :readonly="isReadonly"
+                  :class="getClass(!isReadonly)"
                   ref="salaryRef"
                   dense
                   outlined
@@ -201,6 +214,8 @@ watch(
               </div>
               <div class="col-6">
                 <q-input
+                  :readonly="isReadonly"
+                  :class="getClass(!isReadonly)"
                   ref="salaryHalfRef"
                   dense
                   outlined
@@ -215,6 +230,8 @@ watch(
               </div>
               <div class="col-6">
                 <q-input
+                  :readonly="isReadonly"
+                  :class="getClass(!isReadonly)"
                   ref="salaryHalfSpecialRef"
                   dense
                   outlined
@@ -228,6 +245,8 @@ watch(
               </div>
               <div class="col-6">
                 <q-input
+                  :readonly="isReadonly"
+                  :class="getClass(!isReadonly)"
                   ref="salaryFullRef"
                   dense
                   outlined
@@ -242,6 +261,8 @@ watch(
               </div>
               <div class="col-6">
                 <q-input
+                  :readonly="isReadonly"
+                  :class="getClass(!isReadonly)"
                   ref="salaryFullSpecialRef"
                   dense
                   outlined
@@ -255,6 +276,8 @@ watch(
               </div>
               <div class="col-6">
                 <q-input
+                  :readonly="isReadonly"
+                  :class="getClass(!isReadonly)"
                   ref="salaryFullHalfRef"
                   dense
                   outlined
@@ -269,6 +292,8 @@ watch(
               </div>
               <div class="col-6">
                 <q-input
+                  :readonly="isReadonly"
+                  :class="getClass(!isReadonly)"
                   ref="salaryFullHalfSpecialRef"
                   dense
                   outlined