no message

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