แก้ รายการผังบัญชีเงินเดือน

src/modules/13_salary/components/SalaryChart/DialogFormMain.vue

@@ -19,6 +19,7 @@ import Header from "@/components/DialogHeader.vue";
 
 import { useCounterMixin } from "@/stores/mixin";
 
+const isReadonly = ref<boolean>(false)
 const $q = useQuasar();
 const {
   date2Thai,
@@ -144,6 +145,7 @@ async function fetchSalaryDetail(id: string) {
       formData.endDate = data.endDate;
       formData.details = data.details;
       formData.isSpecial = data.isSpecial;
+      isReadonly.value = data.isActive
     })
     .catch((err) => {
       messageError($q, err);
@@ -206,6 +208,7 @@ function clearFormData() {
   formData.details = "";
   documentFile.value = null;
   itemsDocument.value = [];
+  isReadonly.value = false
 }
 
 function onClickSubmit() {
@@ -283,17 +286,18 @@ function checkEndDate() {
 
 <template>
   <q-dialog v-model="modal" persistent>
+
     <q-card class="col-12" style="width: 80%">
       <form @submit.prevent.stop="onClickSubmit">
         <Header :tittle="title" :close="closeDialog" />
         <q-separator />
-
         <q-card-section class="scroll" style="max-height: 70vh">
           <div class="row col-12 q-col-gutter-sm">
             <div class="col-md-12">
               <div class="row col-12 q-col-gutter-sm">
                 <div class="col-xs-12 col-md-3">
                   <q-select
+                  :readonly="isReadonly"
                     ref="salaryTypeRef"
                     dense
                     hide-bottom-space
@@ -314,6 +318,7 @@ function checkEndDate() {
 
                 <div class="col-xs-12 col-md-3">
                   <q-select
+                  :readonly="isReadonly"
                     ref="posTypeRef"
                     dense
                     hide-bottom-space
@@ -333,6 +338,7 @@ function checkEndDate() {
 
                 <div class="col-xs-12 col-md-3">
                   <q-select
+                  :readonly="isReadonly"
                     ref="posLevelRef"
                     dense
                     hide-bottom-space
@@ -352,6 +358,7 @@ function checkEndDate() {
 
                 <div class="col-xs-12 col-md-1">
                   <q-checkbox
+                  :disable="isReadonly"
                     size="md"
                     v-model="formData.isSpecial"
                     label="ฉ"
@@ -378,6 +385,7 @@ function checkEndDate() {
                     borderless
                     :enableTimePicker="false"
                     week-start="0"
+                    :readonly="isReadonly"
                   >
                     <template #year="{ year }">
                       {{ year + 543 }}
@@ -387,6 +395,7 @@ function checkEndDate() {
                     </template>
                     <template #trigger>
                       <q-input
+                      :readonly="isReadonly"
                         ref="dateRef"
                         outlined
                         dense
@@ -417,6 +426,7 @@ function checkEndDate() {
 
                 <div class="col-xs-12 col-md-4">
                   <datepicker
+                  :readonly="isReadonly"
                     menu-class-name="modalfix"
                     v-model="formData.startDate"
                     :locale="'th'"
@@ -434,6 +444,7 @@ function checkEndDate() {
                     </template>
                     <template #trigger>
                       <q-input
+                      :readonly="isReadonly"
                         ref="startDateRef"
                         outlined
                         dense
@@ -464,6 +475,7 @@ function checkEndDate() {
 
                 <div class="col-xs-12 col-md-4">
                   <datepicker
+                  :readonly="isReadonly"
                     menu-class-name="modalfix"
                     v-model="formData.endDate"
                     :locale="'th'"
@@ -481,6 +493,7 @@ function checkEndDate() {
                     </template>
                     <template #trigger>
                       <q-input
+                      :readonly="isReadonly"
                         ref="endDateRef"
                         outlined
                         dense
@@ -511,6 +524,7 @@ function checkEndDate() {
 
                 <div class="col-12">
                   <q-input
+                  :readonly="isReadonly"
                     v-model="formData.details"
                     outlined
                     dense