hrms-mgt/src/modules/13_salary/components/salaryEmployeeChart/DialogFormCriteria.vue

<script setup lang="ts">
import { ref, reactive, watch } from "vue";
import { useQuasar } from "quasar";
import { useRoute } from "vue-router";
import http from "@/plugins/http";
import config from "@/app.config";

import type { ObjectReteRef } from "@/modules/13_salary/interface/index/EmployeeChart";
// import type { FormDataRate } from "@/modules/13_salary/interface/request/EmployeeChart";

import Header from "@/components/DialogHeader.vue";

import { useCounterMixin } from "@/stores/mixin";

const $q = useQuasar();
const route = useRoute();
const {
  date2Thai,
  dialogConfirm,
  showLoader,
  hideLoader,
  messageError,
  success,
} = useCounterMixin();

// const salaryEmployeeId = ref<string>(route.params.id.toString());

const modal = defineModel<boolean>("modal", { required: true });
const props = defineProps({
  isStatusEdit: {
    type: Boolean,
    required: true,
  },
  data: {
    type: Object,
    defult: [],
  },
  // fetchData: {
  //   type: Function,
  //   required: true,
  // },
});

const formData = reactive<any>({
  salaryNo: null,
  salaryMonth: null,
  salaryDay: null,
});

/** ตัวแปร ref สำหรับแสดง validate */
const salaryNoRef = ref<Object | null>(null);
const salaryMonthRef = ref<Object | null>(null);
const salaryDayRef = ref<Object | null>(null);

const ObjectRef: ObjectReteRef = {
  salaryNo: salaryNoRef,
  salaryMonth: salaryMonthRef,
  salaryDay: salaryDayRef,
};

function closeDialog() {
  modal.value = !modal.value;
  clearFormData();
}

function clearFormData() {
  formData.salaryNo = null;
  formData.salaryMonth = null;
  formData.salaryDay = null;
}

function onClickSubmit() {
  const hasError = [];
  for (const key in ObjectRef) {
    if (Object.prototype.hasOwnProperty.call(ObjectRef, key)) {
      const property = ObjectRef[key];
      if (property.value && typeof property.value.validate === "function") {
        const isValid = property.value.validate();
        hasError.push(isValid);
      }
    }
  }
  if (hasError.every((result) => result === true)) {
    onSubmit();
  }
}

function onSubmit() {
  // dialogConfirm($q, async () => {
  //   showLoader();
  //   const body: FormDataRate = {
  //     salaryEmployeeId: !props.isStatusEdit
  //       ? salaryEmployeeId.value
  //       : undefined,
  //     step:
  //       typeof formData.salaryNo === "number"
  //         ? formData.salaryNo
  //         : Number(formData.salaryNo.replace(/,/g, "")),
  //     salaryMonth:
  //       typeof formData.salaryMonth === "number"
  //         ? formData.salaryMonth
  //         : Number(formData.salaryMonth.replace(/,/g, "")), //*เงินเดือนฐาน
  //     salaryDay:
  //       typeof formData.salaryDay === "number"
  //         ? formData.salaryDay
  //         : Number(formData.salaryDay.replace(/,/g, "")), //0.5 ขั้น
  //   };
  //   try {
  //     const url = !props.isStatusEdit
  //       ? config.API.salaryEmployeeRateList
  //       : config.API.salaryEmployeeRateListByid(props?.data?.id);
  //     await http[!props.isStatusEdit ? "post" : "put"](url, body);
  //     success($q, "บันทีกข้อมูลสำเร็จ");
  //     props.fetchData?.();
  //   } catch (err) {
  //     messageError($q, err);
  //     hideLoader();
  //   } finally {
  //     closeDialog();
  //   }
  // });
}

// watch(
//   () => modal.value,
//   () => {
//     if (modal.value && props.isStatusEdit) {
//       if (props.data) {
//         const data = props.data;
//         console.log(data);
//         formData.salaryNo = data.step;
//         formData.salaryMonth = data.salaryMonth;
//         formData.salaryDay = data.salaryDay;
//       }
//     }
//   }
// );
</script>

<template>
  <q-dialog v-model="modal" persistent>
    <q-card class="col-12" style="width: 80%">
      <Header
        :tittle="props.isStatusEdit ? 'แก้ไขหลักเกณฑ์' : 'เพิ่มหลักเกณฑ์'"
        :close="closeDialog"
      />
      <q-separator />

      <q-card-section>
        <div class="row q-gutter-sm q-pa-sm">
          <div class="row col-xs-12 col-md-12 q-col-gutter-sm">
            <div class="col-4">
              <q-select
                ref="salaryNoRef"
                dense
                outlined
                v-model="formData.salaryNo"
                label="กลุ่มงาน"
                :rules="[(val) => !!val || 'กรุณาเลือกกลุ่มงาน']"
                lazy-rules
                hide-bottom-space
              />
            </div>

            <div class="col-4">
              <q-select
                ref="salaryNoRef"
                dense
                outlined
                v-model="formData.salaryNo"
                label="ตำแหน่ง"
                :rules="[(val) => !!val || 'กรุณาเลือกตำแหน่ง']"
                lazy-rules
                hide-bottom-space
              />
            </div>

            <div class="col-4">
              <q-select
                ref="salaryNoRef"
                dense
                outlined
                v-model="formData.salaryNo"
                label="ระดับชั้นงาน"
                :rules="[(val) => !!val || 'กรุณาเลือกระดับชั้นงาน']"
                lazy-rules
                hide-bottom-space
              />
            </div>

            <div class="col-8">
              <q-input
                ref="salaryMonthRef"
                dense
                outlined
                v-model="formData.salaryMonth"
                label="หมายเหตุ"
                reverse-fill-mask
                lazy-rules
                hide-bottom-space
              />
            </div>

            <div class="col-12 text-bold">อัตราค่าจ้าง</div>
            <div class="col-4">
              <q-input
                ref="salaryMonthRef"
                dense
                outlined
                v-model="formData.salaryMonth"
                label="ขั้นต่ำสุด"
                mask="###,###,###,###"
                reverse-fill-mask
                :rules="[
                  (val) => !!val || `${'กรุณากรอกอัตราค่าจ้าง ขั้นต่ำสุด'}`,
                ]"
                lazy-rules
                hide-bottom-space
              />
            </div>
            <div class="col-4">
              <q-select
                ref="salaryMonthRef"
                dense
                outlined
                v-model="formData.salaryMonth"
                label="กลุ่มบัญชีค่าจ้าง"
                mask="###,###,###,###"
                reverse-fill-mask
                :rules="[
                  (val) =>
                    !!val || `${'กรุณาเลือกอัตราค่าจ้าง กลุ่มบัญชีค่าจ้าง'}`,
                ]"
                lazy-rules
                hide-bottom-space
              />
            </div>
            <div class="col-4">
              <q-input
                ref="salaryMonthRef"
                dense
                outlined
                v-model="formData.salaryMonth"
                label="ขั้นสูงสุดเดิม"
                mask="###,###,###,###"
                reverse-fill-mask
                :rules="[
                  (val) => !!val || `${'กรุณากรอกอัตราค่าจ้าง ขั้นสูงสุดเดิม'}`,
                ]"
                lazy-rules
                hide-bottom-space
              />
            </div>

            <div class="col-12 text-bold">
              อัตราค่าจ้างสูงกว่าอัตราค่าจ้างขั้นสูงของตำแหน่งที่ได้รับแต่งตั้งในแต่ละระดับ
            </div>
            <div class="col-4">
              <q-select
                ref="salaryMonthRef"
                dense
                outlined
                v-model="formData.salaryMonth"
                label="กลุ่มบัญชีค่าจ้าง"
                mask="###,###,###,###"
                reverse-fill-mask
                :rules="[
                  (val) => !!val || `${'กรุณากรอกเลือกกลุ่มบัญชีค่าจ้าง'}`,
                ]"
                lazy-rules
                hide-bottom-space
              />
            </div>
            <div class="col-4">
              <q-input
                ref="salaryMonthRef"
                dense
                outlined
                v-model="formData.salaryMonth"
                label="อัตราค่าจ้างขั้นสูงใหม่"
                mask="###,###,###,###"
                reverse-fill-mask
                :rules="[
                  (val) => !!val || `${'กรุณากรอกอัตราค่าจ้างขั้นสูงใหม่'}`,
                ]"
                lazy-rules
                hide-bottom-space
              />
            </div>
          </div>
        </div>
      </q-card-section>
      <q-separator />

      <q-card-actions align="right" class="bg-white text-teal">
        <q-btn label="บันทึก" color="secondary" @click="onClickSubmit"
          ><q-tooltip>บันทึกข้อมูล</q-tooltip></q-btn
        >
      </q-card-actions>
    </q-card>
  </q-dialog>
</template>

<style lang="scss" scoped></style>