ผังบัญชีค่าจ้างลูกจ้างประจำ => fix bug

src/modules/13_salary/components/salaryEmployeeChart/DialogEmployeeChart.vue

@@ -132,6 +132,17 @@ watch(
     }
   }
 );
+
+/**
+ * class จัดรูปแบบแสดงระหว่างข้อมูลที่แก้ไขหรือแสดงเฉยๆ
+ * @param val ข้อมูล input สำหรับแก้ไขหรือไม่
+ */
+const getClass = (val: boolean) => {
+  return {
+    "full-width inputgreen cursor-pointer": val,
+    "full-width cursor-pointer": !val,
+  };
+};
 </script>
 <template>
   <q-dialog v-model="modal" persistent>
@@ -153,6 +164,7 @@ watch(
                 <div class="col-xs-12 col-md-4">
                   <q-input
                     :readonly="isReadonly"
+                    :class="getClass(!isReadonly)"
                     ref="nameRef"
                     dense
                     hide-bottom-space
@@ -171,12 +183,14 @@ watch(
                     ref="groupRef"
                     week-start="0"
                     :readonly="isReadonly"
+                    :class="getClass(!isReadonly)"
                     dense
                     outlined
                     v-model="formData.group"
                     label="กลุ่มของผังบัญชีอัตราค่าจ้าง"
                     hide-bottom-space
-                    mask="########"
+                    mask="#"
+                    reverse-fill-mask
                     :rules="[
                       (val) => !!val || 'กรุณากรอกกลุ่มของผังบัญชีอัตราค่าจ้าง',
                     ]"
@@ -206,6 +220,7 @@ watch(
                     :enableTimePicker="false"
                     week-start="0"
                     :readonly="isReadonly"
+                    :class="getClass(!isReadonly)"
                   >
                     <template #year="{ year }">
                       {{ year + 543 }}
@@ -242,6 +257,7 @@ watch(
                 <div class="col-xs-12 col-md-4">
                   <datepicker
                     :readonly="isReadonly"
+                    :class="getClass(!isReadonly)"
                     menu-class-name="modalfix"
                     v-model="formData.startDate"
                     :locale="'th'"
@@ -286,6 +302,7 @@ watch(
                 <div class="col-xs-12 col-md-4">
                   <datepicker
                     :readonly="isReadonly"
+                    :class="getClass(!isReadonly)"
                     menu-class-name="modalfix"
                     v-model="formData.endDate"
                     :locale="'th'"
@@ -329,6 +346,7 @@ watch(
                 <div class="col-12">
                   <q-input
                     :readonly="isReadonly"
+                    :class="getClass(!isReadonly)"
                     v-model="formData.details"
                     outlined
                     dense