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,
  DataOptions,
  DataListOptions,
} 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 isEdit = defineModel<boolean>("isStatusEdit", { required: true });
const props = defineProps({
  data: {
    type: Object,
    defult: [],
  },
  // fetchData: {
  //   type: Function,
  //   required: true,
  // },
});

const posTypeOp = ref<DataOptions[]>([]);
const posNameOp = ref<DataOptions[]>([]);
const posLevelOp = ref<any[]>([]);
const posNameListOp = ref<DataListOptions[]>([]);
const formData = reactive<any>({
  id: "",
  posType: "", //กลุ่มงาน
  posName: "", //ตำแหน่ง
  posLevel: "", //ระดับชั้นงาน
  reson: "", //หมายเหตุ
  rateOldMin: "", //อัตราค่าจ้าง ขั้นต่ำสุด
  groupOld: "", //อัตราค่าจ้าง กลุ่มบัญชีค่าจ้าง
  rateMaxOld: "", //อัตราค่าจ้าง ขั้นสูงสุดเดิม
  groupRateHigh: "", //อัตราค่าจ้างสูงกว่าฯ กลุ่มบัญชีค่าจ่าง
  rateHighMax: "", //อัตราค่าจ้างสูงกว่าฯ ขั้นสูงใหม่
});

/** ตัวแปร ref สำหรับแสดง validate */
const posTypeRef = ref<object | null>(null);
const posNameRef = ref<object | null>(null);
const posLevelRef = ref<object | null>(null);
const rateOldMinRef = ref<object | null>(null);
const groupOldRef = ref<object | null>(null);
const rateMaxOldRef = ref<object | null>(null);
const groupRateHighRef = ref<object | null>(null);
const rateHighMaxRef = ref<object | null>(null);

const ObjectRef: ObjectReteRef = {
  posType: posTypeRef,
  posName: posNameRef,
  posLevel: posLevelRef,
  rateOldMin: rateOldMinRef,
  groupOld: groupOldRef,
  rateMaxOld: rateMaxOldRef,
  groupRateHigh: groupRateHighRef,
  rateHighMax: rateHighMaxRef,
};

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

function clearFormData() {
  console.log(3);
  isEdit.value = false;
  formData.posType = "";
  formData.posName = "";
  formData.posLevel = "";
  formData.reson = "";
  formData.rateOldMin = "";
  formData.groupOld = "";
  formData.rateMaxOld = "";
  formData.groupRateHigh = "";
  formData.rateHighMax = "";
}

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, () => {
    showLoader();
    const body = {
      posType: formData.posType,
      posName: formData.posName,
      posLevel: formData.posLevel,
      reson: formData.reson,
      rateOldMin:
        typeof formData.rateOldMin === "string"
          ? Number(formData.rateOldMin.replace(/,/g, ""))
          : formData.rateOldMin,
      groupOld: formData.groupOld,
      rateMaxOld:
        typeof formData.rateMaxOld === "string"
          ? Number(formData.rateMaxOld.replace(/,/g, ""))
          : formData.rateMaxOld,
      groupRateHigh: formData.groupRateHigh,
      rateHighMax:
        typeof formData.rateHighMax === "string"
          ? Number(formData.rateHighMax.replace(/,/g, ""))
          : formData.rateHighMax,
    };
    const url = !isEdit
      ? config.API.salaryEmployeeRateList
      : config.API.salaryEmployeeRateListByid(formData.id);
    http[!isEdit ? "post" : "put"](url, body)
      .then((res) => {
        success($q, "บันทึกข้อมูลสำเร็จ");
        closeDialog();
      })
      .catch((e) => {
        messageError($q, e);
      })
      .finally(() => {
        hideLoader();
      });
  });
}

// 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;
//       }
//     }
//   }
// );

/** ดึงข้อมูล กลุ่มงาน */
function getPosType() {
  showLoader();
  http
    .get(config.API.salaryEmployeePosType())
    .then((res) => {
      console.log(res.data.result);
      const dataOp = res.data.result;
      posTypeOp.value = dataOp.map((item: any) => ({
        id: item.id,
        name: item.posTypeName,
      }));
    })
    .catch((e) => {
      messageError($q, e);
    })
    .finally(() => {
      hideLoader();
    });
}

/** ดึงข้อมูล ตำแหน่ง */
function getPosName() {
  formData.posName = "";
  formData.posLevel = "";
  showLoader();
  http
    .get(config.API.salaryEmployeePositionType(formData.posType))
    .then((res) => {
      const dataOp = res.data.result;
      posNameListOp.value = res.data.result;
      posNameOp.value = dataOp.filter((item: DataListOptions) => item.posDictName).map((i:DataListOptions)=>({
        id:i.id,
        name:i.posDictName
      }));

    })
    .catch((e) => {
      messageError($q, e);
    })
    .finally(() => {
      hideLoader();
    });
}
/** ดึงข้อมูล ระดับชั้นงาน */
function getPosLevel() {
  formData.posLevel = "";
  posLevelOp.value = posNameListOp.value
    .filter((item) => item.posDictName === formData.posName)
    .map((i) => ({ id: i.id, name: i.posLevelName }));
}

watch(
  () => modal.value,
  (check) => {
    if (check) {
      getPosType();

      if (isEdit.value) {
        formData.id = props.data?.id ? props.data.id : null;
        formData.posType = props.data?.posType ? props.data.posType : null;
        formData.posName = props.data?.posName ? props.data.posName : null;
        formData.posLevel = props.data?.posLevel ? props.data.posLevel : null;
        formData.reson = props.data?.reson ? props.data.reson : null;
        formData.rateOldMin = props.data?.rateOldMin
          ? props.data.rateOldMin
          : null;
        formData.groupOld = props.data?.groupOld ? props.data.groupOld : null;
        formData.rateMaxOld = props.data?.rateMaxOld
          ? props.data.rateMaxOld
          : null;
        formData.groupRateHigh = props.data?.groupRateHigh
          ? props.data.groupRateHigh
          : null;
        formData.rateHighMax = props.data?.rateHighMax
          ? props.data.rateHighMax
          : null;
      }
    }
  }
);
</script>

<template>
  <q-dialog v-model="modal" persistent>
    <q-card class="col-12" style="width: 80%">
      <Header
        :tittle="isEdit ? 'แก้ไขหลักเกณฑ์' : 'เพิ่มหลักเกณฑ์'"
        :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="posTypeRef"
                dense
                outlined
                v-model="formData.posType"
                label="กลุ่มงาน"
                :rules="[(val) => !!val || 'กรุณาเลือกกลุ่มงาน']"
                :options="posTypeOp"
                option-label="name"
                option-value="name"
                emit-value
                lazy-rules
                hide-bottom-space
                @update:model-value="getPosName()"
              />
            </div>

            <div class="col-4">
              <q-select
                ref="posNameRef"
                dense
                :readonly="formData.posType"
                outlined
                v-model="formData.posName"
                label="ตำแหน่ง"
                :rules="[(val) => !!val || 'กรุณาเลือกตำแหน่ง']"
                :options="posNameOp"
                option-label="name"
                option-value="name"
                emit-value
                lazy-rules
                hide-bottom-space
                @update:model-value="getPosLevel()"
              />
            </div>

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

            <div class="col-8">
              <q-input
                dense
                outlined
                v-model="formData.reson"
                label="หมายเหตุ"
              />
            </div>

            <div class="col-12 text-bold">อัตราค่าจ้าง</div>
            <div class="col-4">
              <q-input
                ref="rateOldMinRef"
                dense
                outlined
                v-model="formData.rateOldMin"
                label="ขั้นต่ำสุด"
                mask="###,###,###,###"
                reverse-fill-mask
                :rules="[
                  (val) => !!val || `${'กรุณากรอกอัตราค่าจ้าง ขั้นต่ำสุด'}`,
                ]"
                lazy-rules
                hide-bottom-space
              />
            </div>
            <div class="col-4">
              <q-select
                ref="groupOldRef"
                dense
                outlined
                v-model="formData.groupOld"
                label="กลุ่มของผังบัญชีอัตราค่าจ้าง"
                mask="###,###,###,###"
                reverse-fill-mask
                :rules="[
                  (val) =>
                    !!val ||
                    `${'กรุณาเลือกอัตราค่าจ้าง กลุ่มของผังบัญชีอัตราค่าจ้าง'}`,
                ]"
                lazy-rules
                hide-bottom-space
              />
            </div>
            <div class="col-4">
              <q-input
                ref="rateMaxOldRef"
                dense
                outlined
                v-model="formData.rateMaxOld"
                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="groupRateHighRef"
                dense
                outlined
                v-model="formData.groupRateHigh"
                label="กลุ่มบัญชีค่าจ้าง"
                mask="###,###,###,###"
                reverse-fill-mask
                :rules="[
                  (val) => !!val || `${'กรุณากรอกเลือกกลุ่มบัญชีค่าจ้าง'}`,
                ]"
                lazy-rules
                hide-bottom-space
              />
            </div>
            <div class="col-4">
              <q-input
                ref="rateHighMaxRef"
                dense
                outlined
                v-model="formData.rateHighMax"
                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>