เงินเดือน 1 ขั้น เพิ่มบันทึกคนสำรอง

src/modules/13_salary/components/SalaryLists/DialogMoveLevel.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, computed } from "vue";
+import { ref, computed, watch } from "vue";
 import { useQuasar } from "quasar";
 import http from "@/plugins/http";
 import config from "@/app.config";
@@ -27,6 +27,8 @@ const {
 const modal = defineModel<boolean>("modal", { required: true });
 const profileId = defineModel<string>("profileId", { required: true });
 const props = defineProps({
+  typeLevel: { type: String, required: true },
+  isReserve: { type: Boolean, required: true },
   fetchData: {
     type: Function,
   },
@@ -35,6 +37,8 @@ const props = defineProps({
 const type = ref<string>("");
 const typeRef = ref<any>(null);
 const isReadonly = ref<boolean>(false); // อ่านได้อย่างเดียว
+const isChange = ref<boolean>(false); // มีการแก้ไขข้อมูลหรือไม่
+const isReserve = ref<boolean>(false); // สำรองหรือไม่
 
 const typeRangeOps = computed(() => {
   return store.roundMainCode == "OCT"
@@ -61,7 +65,7 @@ function validateForm() {
     // ) {
     //   dialogMessageNotify($q, "ไม่สามารถย้ายขั้นได้เนื่องจากโควตาคงเหลือไม่พอ");
     // } else {
-      onSubmit();
+    onSubmit();
     // }
   }
 }
@@ -79,6 +83,7 @@ function onSubmit() {
     const body = {
       profileId: profileId.value,
       type: type.value,
+      isReserve: isReserve.value,
     };
     http
       .post(config.API.salaryPeriod() + `/change/type`, body)
@@ -96,6 +101,15 @@ function onSubmit() {
   });
 }
 
+watch(
+  () => modal.value,
+  () => {
+    type.value = props.typeLevel;
+    isReserve.value = props.isReserve;
+    isChange.value = false;
+  }
+);
+
 function inputEdit(val: boolean) {
   return {
     "full-width cursor-pointer inputgreen ": val,
@@ -123,10 +137,21 @@ function inputEdit(val: boolean) {
             map-options
             option-label="name"
             option-value="id"
-            :options="typeRangeOps.filter((e) => e.id !== store.tabType)"
+            :options="typeRangeOps"
             :rules="[(val) => !!val || `${'กรุณาเลือก ขั้น'}`]"
             lazy-rules
             hide-bottom-space
+            @update:model-value="isChange = true"
+          />
+          <!-- :options="typeRangeOps.filter((e) => e.id !== store.tabType)" -->
+
+          <q-checkbox
+            v-if="type === 'FULL'"
+            keep-color
+            label="สำรอง"
+            dense
+            v-model="isReserve"
+            @update:model-value="isChange = true"
           />
         </div>
       </q-card-section>
@@ -134,7 +159,11 @@ function inputEdit(val: boolean) {
       <form @submit.prevent="validateForm">
         <q-card-actions align="right" class="bg-white text-teal">
           <!-- <q-btn flat label="OK" v-close-popup /> -->
+          isChange={{ isChange }}<br />
+          typeLevel={{ type }}<br />
+          isRe={{ isChange }}<br />
           <q-btn
+            :disabled="!isChange"
             type="submit"
             for="#submitForm"
             unelevated

src/modules/13_salary/components/SalaryLists/TableTypePending.vue

@@ -206,14 +206,18 @@ function onClickMovieGroup(id: string) {
   modalDialogMoveGroup.value = !modalDialogMoveGroup.value;
 }
 
+const typeLevel = ref<string>("");
+const isReserve = ref<boolean>(false);
 /**
  * function openPopup ย้ายกขั้น
  * @param id profileId
  *
  */
-function onClickMoveLevel(id: string) {
+function onClickMoveLevel(id: string, typeVal: string, isReserveVal: boolean) {
   profileId.value = id;
   modalDialogMoveLeve.value = !modalDialogMoveLeve.value;
+  typeLevel.value = typeVal;
+  isReserve.value = isReserveVal;
 }
 
 /** function updatePageTable*/
@@ -399,7 +403,11 @@ watch(
                       : item.type === 'moveGroup'
                       ? onClickMovieGroup(props.row.id)
                       : item.type === 'moveLevel'
-                      ? onClickMoveLevel(props.row.id)
+                      ? onClickMoveLevel(
+                          props.row.id,
+                          props.row.type,
+                          props.row.isReserve
+                        )
                       : item.type === 'delete'
                       ? onClickDelete(props.row.id)
                       : null
@@ -456,6 +464,8 @@ watch(
     :fetchData="props.fetchDataTable"
   />
   <DialogMoveLevel
+    :typeLevel="typeLevel"
+    :isReserve="isReserve"
     v-model:modal="modalDialogMoveLeve"
     v-model:profileId="profileId"
     :fetchData="props.fetchDataTable"

src/modules/13_salary/store/SalaryListsStore.ts

@@ -42,6 +42,12 @@ export const useSalaryListSDataStore = defineStore("salaryListStore", () => {
       color: "green-6",
       type: "moveLevel",
     },
+    {
+      label: "แก้ไขคุณสมบัติ",
+      icon: "mdi-format-list-checks",
+      color: "blue-6",
+      type: "moveLevel",
+    },
     {
       label: "ลบ",
       icon: "delete",

src/modules/13_salary/views/salaryLists.vue

@@ -388,7 +388,7 @@ onMounted(async () => {
     </q-card>
   </q-card>
 
-  <q-card flat bordered class="row col-12 q-mt-xs">
+  <q-card v-if="isLoad" flat bordered class="row col-12 q-mt-xs">
     <ProcessStep />
   </q-card>