คำสั่ง tab แก้เงินเดือน

src/modules/18_command/components/Step/2_ListPersons.vue

@@ -464,5 +464,7 @@ onMounted(async () => {
     :get-data="getPersonList"
     :select-person-data="selectPersonData"
     :type="formCommandList.commandTypeName"
+    :command-code="formCommandList.commandCode"
+    :command-sys-id="formCommandList.commandSysId"
   />
 </template>

src/modules/18_command/components/Step/Dialog2_Salary.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { reactive, watch } from "vue";
+import { ref, reactive, watch, computed } from "vue";
 import { useQuasar } from "quasar";
 
 import http from "@/plugins/http";
@@ -21,6 +21,8 @@ const props = defineProps({
     type: String,
     required: true,
   },
+  commandCode: { type: String, required: true },
+  commandSysId: { type: String, required: true },
 });
 const modal = defineModel<boolean>("modal", { required: true });
 const titleName = defineModel<string>("titleName", { required: true });
@@ -36,6 +38,29 @@ const formData = reactive<any>({
   remarkHorizontal: null,
 });
 
+const readonly = ref<boolean>(false);
+
+function checkCommandSysId() {
+  if (props.commandSysId === "SALARY") {
+    readonly.value = true;
+  }
+}
+
+const chechCommandCode = computed(() => {
+  const listCommandCode = [
+    "C-PM-01",
+    "C-PM-02",
+    "C-PM-03",
+    "C-PM-04",
+    "C-PM-29",
+  ];
+  if (listCommandCode.includes(props.commandCode)) {
+    return true;
+  } else {
+    return false;
+  }
+});
+
 function onSubmit() {
   dialogConfirm($q, () => {
     showLoader();
@@ -79,11 +104,23 @@ function onClose() {
   formData.remarkHorizontal = null;
 }
 
+/**
+ * class จัดรูปแบบแสดงระหว่างข้อมูลที่แก้ไขหรือแสดงเฉยๆ
+ * @param val ข้อมูล input สำหรับแก้ไขหรือไม่
+ */
+const getClass = (val: boolean) => {
+  return {
+    "full-width inputgreen cursor-pointer": val,
+    "full-width cursor-pointer": !val,
+  };
+};
+
 watch(
   () => modal.value,
   () => {
     if (modal.value) {
       if (props.selectPersonData) {
+        checkCommandSysId();
         const list = props.selectPersonData;
         formData.amount = list.amount;
         formData.positionSalaryAmount = list.positionSalaryAmount;
@@ -105,56 +142,65 @@ watch(
         <q-card-section>
           <div class="row col-12 q-col-gutter-sm">
             <div
-              v-if="store.isShowSalary(type)"
-              class="col-xs-6 col-sm-6 col-md-6"
+              class="row col-12 q-col-gutter-sm"
+              v-if="chechCommandCode || readonly"
             >
-              <q-input
-                dense
-                outlined
-                lazy-rules
-                hide-bottom-space
-                v-model="formData.amount"
-                class="inputgreen"
-                mask="###,###,###,###,###,###"
-                reverse-fill-mask
-                :label="`${'เงินเดือน'}`"
-                :rules="[(val: any) => !!val || `${'กรุณากรอกเงินเดือน'}`]"
-              />
+              <div
+                v-if="store.isShowSalary(type)"
+                class="col-xs-6 col-sm-6 col-md-6"
+              >
+                <q-input
+                  dense
+                  outlined
+                  lazy-rules
+                  hide-bottom-space
+                  v-model="formData.amount"
+                  :class="getClass(!readonly)"
+                  mask="###,###,###,###,###,###"
+                  reverse-fill-mask
+                  :readonly="readonly"
+                  :label="`${'เงินเดือน'}`"
+                  :rules="[(val: any) => !!val || `${'กรุณากรอกเงินเดือน'}`]"
+                />
+              </div>
+
+              <div
+                v-if="store.isShowSalary(type)"
+                class="col-xs-6 col-sm-6 col-md-6"
+              >
+                <q-input
+                  dense
+                  outlined
+                  lazy-rules
+                  hide-bottom-space
+                  v-model="formData.positionSalaryAmount"
+                  :class="getClass(!readonly)"
+                  :readonly="readonly"
+                  mask="###,###,###,###,###,###"
+                  reverse-fill-mask
+                  :label="`${'เงินประจำตำแหน่ง'}`"
+                />
+              </div>
+
+              <div
+                v-if="store.isShowSalary(type)"
+                class="col-xs-6 col-sm-6 col-md-6"
+              >
+                <q-input
+                  dense
+                  outlined
+                  lazy-rules
+                  hide-bottom-space
+                  v-model="formData.monthSalaryAmount"
+                  :class="getClass(!readonly)"
+                  :readonly="readonly"
+                  mask="###,###,###,###,###,###"
+                  reverse-fill-mask
+                  :label="`${'เงินค่าตอบแทนรายเดือน'}`"
+                />
+              </div>
             </div>
 
-            <div
-              v-if="store.isShowSalary(type)"
-              class="col-xs-6 col-sm-6 col-md-6"
-            >
-              <q-input
-                dense
-                outlined
-                lazy-rules
-                hide-bottom-space
-                v-model="formData.positionSalaryAmount"
-                class="inputgreen"
-                mask="###,###,###,###,###,###"
-                reverse-fill-mask
-                :label="`${'เงินประจำตำแหน่ง'}`"
-              />
-            </div>
-
-            <div
-              v-if="store.isShowSalary(type)"
-              class="col-xs-6 col-sm-6 col-md-6"
-            >
-              <q-input
-                dense
-                outlined
-                lazy-rules
-                hide-bottom-space
-                v-model="formData.monthSalaryAmount"
-                class="inputgreen"
-                mask="###,###,###,###,###,###"
-                reverse-fill-mask
-                :label="`${'เงินค่าตอบแทนรายเดือน'}`"
-              />
-            </div>
             <div class="col-xs-6 col-sm-6 col-md-12">
               <q-input
                 dense