รอบการขึ้นเงินเดือน

2024-03-07 15:22:56 +07:00 · 2024-03-07 15:22:56 +07:00 · 05d4ea4b0b
commit 05d4ea4b0b
parent ed15f2edde
2 changed files with 142 additions and 78 deletions
--- a/src/modules/13_salary/components/SalaryRound/DialogForm.vue
+++ b/src/modules/13_salary/components/SalaryRound/DialogForm.vue
@ -15,8 +15,11 @@ const $q = useQuasar();
 const isActive = ref<boolean>(false);
 const period = ref<string>("");
 const modal = defineModel<boolean>("modal", { required: true });
-const effective = defineModel<Date|null|string>("effective", { required: true });
-const year = defineModel<number|null|string>("year");
+const effective = defineModel<Date | null | string>("effective", {
+  required: true,
+});
+const isRead = defineModel<boolean>("isRead", { required: true });
+const year = defineModel<number | null | string>("year");
 const mixin = useCounterMixin();
 const { dialogConfirm, date2Thai, messageError } = mixin;
 const isReadonly = ref<boolean>(false); // อ่านได้อย่างเดียว
@ -43,6 +46,7 @@ const props = defineProps({
  period: String,
  effectiveDate: Date,
  isActive: Boolean,
+  isRead: Boolean,
 });
 /*** ฟังก์ชั่นสำหรับ validate ฟอร์ม */
 function validateForm() {
@ -58,9 +62,9 @@ function validateForm() {
  }

  if (hasError.every((result) => result === true)) {
-    if(props.edit == true){
+    if (props.edit == true) {
      editSummit();
-    }else{
+    } else {
      onSubmit();
    }
  }
@ -71,7 +75,8 @@ function clearForm() {
  isActive.value = false;
  period.value = "";
  effective.value = null;
-  year.value = 0
+  year.value = 0;
+  isRead.value = false;
 }

 function close() {
@ -79,7 +84,7 @@ function close() {
  clearForm();
 }

-function editSummit(){
+function editSummit() {
  dialogConfirm($q, () => {
    const body = {
      period: period.value,
@ -88,7 +93,7 @@ function editSummit(){
      year: year.value,
    };
    http
-      .put(config.API.salaryPeriod()+`/${props.idRound}`, body)
+      .put(config.API.salaryPeriod() + `/${props.idRound}`, body)
      .then((res) => {
        modal.value = false;
        clearForm();
@ -133,16 +138,16 @@ function inputEdit(val: boolean) {
 watch(
  () => modal.value,
  () => {
-    console.log(props.edit)
+    console.log(props.edit);
    if (props.edit == true) {
-      period.value = props.period ? props.period :'';
-      effectiveDate.value = props.effectiveDate ? props.effectiveDate:null;
+      period.value = props.period ? props.period : "";
+      effectiveDate.value = props.effectiveDate ? props.effectiveDate : null;
      isActive.value = props.isActive;
-    }else{
-      year.value = 0
-      effective.value = null
-      period.value = ''
-      isActive.value = false
+    } else {
+      year.value = 0;
+      effective.value = null;
+      period.value = "";
+      isActive.value = false;
    }
  }
 );
@ -161,47 +166,46 @@ watch(

      <q-card-section class="scroll" style="max-height: 70vh">
        <div class="q-gutter-y-sm">
-
-        <datepicker
-
-          menu-class-name="modalfix"
-          v-model="year"
-          class="col-2"
-          :locale="'th'"
-          autoApply
-          year-picker
-          :enableTimePicker="false"
-        >
-          <template #year="{ year }">{{ year + 543 }}</template>
-          <template #year-overlay-value="{ value }">{{
-            parseInt(value + 543)
-          }}</template>
-          <template #trigger>
-            <q-input
-            ref="yearRef"
-              dense
-              :class="inputEdit(isReadonly)"
-              hide-bottom-space
-              outlined
-              :model-value="year === 0 ? null : Number(year) + 543"
-              :label="`${'ปีงบประมาณ'}`"
-              :rules="[
-                  (val) => !!val || `${'กรุณาเลือกเลือกปีงบประมาณ'}`,
-                ]"
-            >
-              <template v-slot:prepend>
-                <q-icon
-                  name="event"
-                  class="cursor-pointer"
-                  style="color: var(--q-primary)"
-                >
-                </q-icon>
-              </template>
-            </q-input>
-          </template>
-        </datepicker>
+          <datepicker
+            :readonly="isRead"
+            menu-class-name="modalfix"
+            v-model="year"
+            class="col-2"
+            :locale="'th'"
+            autoApply
+            year-picker
+            :enableTimePicker="false"
+          >
+            <template #year="{ year }">{{ year + 543 }}</template>
+            <template #year-overlay-value="{ value }">{{
+              parseInt(value + 543)
+            }}</template>
+            <template #trigger>
+              <q-input
+                :readonly="isRead"
+                ref="yearRef"
+                dense
+                :class="inputEdit(isReadonly)"
+                hide-bottom-space
+                outlined
+                :model-value="year === 0 ? null : Number(year) + 543"
+                :label="`${'ปีงบประมาณ'}`"
+                :rules="[(val) => !!val || `${'กรุณาเลือกเลือกปีงบประมาณ'}`]"
+              >
+                <template v-slot:prepend>
+                  <q-icon
+                    name="event"
+                    class="cursor-pointer"
+                    style="color: var(--q-primary)"
+                  >
+                  </q-icon>
+                </template>
+              </q-input>
+            </template>
+          </datepicker>

          <q-select
+          :readonly="isRead"
            ref="periodRef"
            :class="inputEdit(isReadonly)"
            v-model="period"
@ -218,12 +222,12 @@ watch(
            hide-bottom-space
          />
          <datepicker
+          :readonly="isRead"
            menu-class-name="modalfix"
            v-model="effective"
            :locale="'th'"
            autoApply
            borderless
-            :readonly="isReadonly"
            :enableTimePicker="false"
            week-start="0"
          >
@ -240,7 +244,7 @@ watch(
                outlined
                dense
                :class="inputEdit(isReadonly)"
-                :readonly="isReadonly"
+                :readonly="isRead"
                hide-bottom-space
                :model-value="
                  effective != null ? date2Thai(effective as Date) : null
@ -264,16 +268,16 @@ watch(
          <div class="col q-pa-sm bg-white border_custom text-weight-medium">
            <div class="row items-center q-my-sm justify-between">
              <p class="q-ma-none">สถานะการใช้งาน</p>
-              <label class="toggle-control">
-                <input type="checkbox" v-model="isActive" />
+              <label :class="isRead == true ? 'toggle-control noClick':'toggle-control'">
+                <input type="checkbox" v-model="isActive" :readonly="isRead"/>
                <span class="control"></span>
              </label>
            </div>
          </div>
        </div>
      </q-card-section>
-      <q-separator />
-      <form @submit.prevent="validateForm">
+      <q-separator v-if="!isRead"/>
+      <form @submit.prevent="validateForm" v-if="!isRead">
        <q-card-actions align="right" class="bg-white text-teal">
          <!-- <q-btn flat label="OK" v-close-popup /> -->
          <q-btn
@ -360,4 +364,7 @@ $toggle-control-size: $toggle-height - ($toggle-gutter * 2);
    }
  }
 }
+.noClick {
+   pointer-events: none;
+}
 </style>
--- a/src/modules/13_salary/views/salaryRound.vue
+++ b/src/modules/13_salary/views/salaryRound.vue
@ -14,7 +14,15 @@ import { useQuasar } from "quasar";
 const idRound = ref<string>("");
 const $q = useQuasar();
 const mixin = useCounterMixin();
-const { dialogRemove, showLoader, hideLoader, messageError,date2Thai } = mixin;
+const {
+  dialogRemove,
+  showLoader,
+  hideLoader,
+  messageError,
+  date2Thai,
+  dateToISO,
+  dialogConfirm,
+} = mixin;
 const dataStore = useSalaryDataStore();
 const year = ref<number>(0);
 const filterKeyword = ref<string>("");
@ -23,9 +31,10 @@ const editCheck = ref<boolean>(false);
 const dialog = ref<boolean>(false);
 const period = ref<string>("");
 const isActive = ref<boolean>(false);
+const isRead = ref<boolean>(false);
 const effectiveDate = ref<Date | null>(null);

-const yearData = ref<number|null>(0)
+const yearData = ref<number | null>(0);
 const maxPage = ref<number>(1);
 const currentPage = ref<number>(1);
 const page = ref<number>(1);
@ -95,7 +104,7 @@ const columns = ref<QTableProps["columns"]>([

 function clickAdd() {
  dialog.value = true;
-  editCheck.value = false
+  editCheck.value = false;
 }
 /** ดึงข้อมูลเริ่มต้น */
 function getData() {
@ -151,17 +160,39 @@ function deleteData(id: string) {
    });
 }

-function editPopup(data:RowList) {
-  console.log(data)
+function editPopup(data: RowList, status: string) {
+  console.log(data);
+  if (status == "read") {
+    isRead.value = true;
+  }
  editCheck.value = true;
  dialog.value = true;
-  console.log(dialog.value)
+  console.log(dialog.value);
  idRound.value = data.id;
-  period.value = data.period ? data.period:'';
-  yearData.value = data.year ? data.year:0;
+  period.value = data.period ? data.period : "";
+  yearData.value = data.year ? data.year : 0;
  effectiveDate.value = data.effectiveDate as Date;
-  isActive.value = data.isActive ? data.isActive:false;
+  isActive.value = data.isActive ? data.isActive : false;
 }
+/** ปิดรอบ */
+function dialogClose(id: string) {
+  dialogConfirm(
+    $q,
+    () => {
+      // http
+      //   .put(config.API)
+      //   .then((res) => {})
+      //   .catch((e) => {
+      //     messageError($q, e);
+      //   })
+      //   .finally(() => {
+      //   });
+    },
+    "ยืนยันการปิดรอบ",
+    "หากปิดรอบแล้วจะไม่สามารถแก้ไขรายการเงินเดือนของรอบนี้ได้ ต้องการยืนยันการปิดรอบนี้ใช่หรือไม่?"
+  );
+}
+
 onMounted(async () => {
  year.value = new Date().getFullYear();
  getData();
@ -324,13 +355,13 @@ onMounted(async () => {
                }}
              </div>
              <div v-if="col.name == 'effectiveDate'">
-                {{ date2Thai(props.row.effectiveDate)}}
+                {{ date2Thai(props.row.effectiveDate) }}
              </div>
              <div v-else-if="col.name == 'year'">
-                {{ props.row.year ? props.row.year + 543:'-'}}
+                {{ props.row.year ? props.row.year + 543 : "-" }}
              </div>
              <div v-else-if="col.name == 'period'">
-                {{ dataStore.statusTothai(props.row.period)}}
+                {{ dataStore.statusTothai(props.row.period) }}
              </div>
              <div v-else-if="col.name === 'isActive'">
                <q-icon
@ -358,11 +389,23 @@ onMounted(async () => {
                round
                class="q-mr-xs"
                size="12px"
-                icon="edit"
+                :icon="
+                  dateToISO(new Date()) >= dateToISO(props.row.effectiveDate)
+                    ? 'mdi-eye-outline'
+                    : 'edit'
+                "
                clickable
-                @click="editPopup(props.row)"
+                @click="
+                  dateToISO(new Date()) >= dateToISO(props.row.effectiveDate)
+                    ? editPopup(props.row, 'read')
+                    : editPopup(props.row, 'edit')
+                "
              >
-                <q-tooltip>แก้ไขข้อมูล</q-tooltip>
+                <q-tooltip>{{
+                  dateToISO(new Date()) >= dateToISO(props.row.effectiveDate)
+                    ? "ดูข้อมูล"
+                    : "แก้ไขข้อมูล"
+                }}</q-tooltip>
              </q-btn>
              <q-btn
                color="red"
@ -370,14 +413,27 @@ onMounted(async () => {
                dense
                round
                size="12px"
-                icon="mdi-delete"
+                :icon="
+                  dateToISO(new Date()) >= dateToISO(props.row.effectiveDate)
+                    ? 'mdi-close-box'
+                    : 'mdi-delete'
+                "
                clickable
                @click.stop="
-                  dialogRemove($q, async () => await deleteData(props.row.id))
+                  dateToISO(new Date()) >= dateToISO(props.row.effectiveDate)
+                    ? dialogClose(props.row.id)
+                    : dialogRemove(
+                        $q,
+                        async () => await deleteData(props.row.id)
+                      )
                "
                v-close-popup
              >
-                <q-tooltip>ลบข้อมูล</q-tooltip>
+                <q-tooltip>{{
+                  dateToISO(new Date()) >= dateToISO(props.row.effectiveDate)
+                    ? "ปิดรอบ"
+                    : "ลบข้อมูล"
+                }}</q-tooltip>
              </q-btn>
            </q-td>
          </q-tr>
@ -394,6 +450,7 @@ onMounted(async () => {
    :period="period"
    v-model:effective="effectiveDate"
    :isActive="isActive"
+    v-model:is-read="isRead"
    v-model:year="yearData"
  />
 </template>