hrms-mgt/src/modules/01_metadataNew/components/position-employee/DialogAddPosition.vue

<script setup lang="ts">
import { ref, reactive, watch, defineProps } from "vue";
import { useQuasar } from "quasar";
import http from "@/plugins/http";
import config from "@/app.config";
// import type { QTableProps } from "quasar";
import DialogHeader from "@/components/DialogHeader.vue";
import type {
  DataOption,
  FormPositionEmployeeSelectDialog,
  FormPositionEmployeeSelectRef,
  OptionType,
  OptionLevel,
} from "@/modules/01_metadataNew/interface/request/position/index";
import { useCounterMixin } from "@/stores/mixin";
const levelOps = ref<DataOption[]>([]);
const levelOpsMain = ref<DataOption[]>([]);
const typeOps = ref<DataOption[]>([]);
const typeOpsMain = ref<DataOption[]>([]);
const dataLevel = ref<any>();
const formPositionSelect = reactive<FormPositionEmployeeSelectDialog>({
  positionId: "",
  positionName: "",
  positionType: "",
  positionLevel: "",
});
const $q = useQuasar();
const isSpecial = ref<boolean>(false);
const props = defineProps({
  getData: Function,
});
const { dialogConfirm, showLoader, success, hideLoader, messageError } =
  useCounterMixin();

const isReadonly = ref<boolean>(false); // อ่านได้อย่างเดียว
const modal = defineModel<boolean>("addPosition", { required: true });
const formData = defineModel<any>("formData", { required: true });
const editCheck = defineModel<boolean>("editCheck", { required: true });

const positionNameRef = ref<Object | null>(null);
const positionTypeRef = ref<Object | null>(null);
const positionLevelRef = ref<Object | null>(null);

const objectPositionSelectRef: FormPositionEmployeeSelectRef = {
  positionName: positionNameRef,
  positionType: positionTypeRef,
  positionLevel: positionLevelRef,
};

/** ฟังก์ชั่นตรวจสอบความถูกต้องของข้อมูลในฟอร์ม */
function validateFormPositionEdit() {
  const hasError = [];
  for (const key in objectPositionSelectRef) {
    if (Object.prototype.hasOwnProperty.call(objectPositionSelectRef, key)) {
      const property = objectPositionSelectRef[key];
      if (property.value && typeof property.value.validate === "function") {
        const isValid = property.value.validate();
        hasError.push(isValid);
      }
    }
  }
  if (hasError.every((result) => result === true)) {
    if (editCheck.value == true) {
      saveSelectEdit();
    } else {
      onSubmitSelectEdit();
    }
  }
}

/** ฟังชั่น บันทึก */
function saveSelectEdit() {
  dialogConfirm(
    $q,
    async () => {
      // showLoader();
      // const body = {
      //   posDictName: formPositionSelect.positionName,
      //   posTypeId: formPositionSelect.positionType, //*ประเภทตำแหน่ง
      //   posLevelId: formPositionSelect.positionLevel, //*ระดับตำแหน่ง
      // };
      // await http
      //   .put(config.API.orgPosPositionById(formPositionSelect.positionId), body)
      //   .then(() => {
      //     success($q, "เพิ่มข้อมูลสำเร็จ");
      //     clearFormPositionSelect();
      //     modal.value = false;
      //     editCheck.value = false;
      //     props.getData?.();
      //   })
      //   .catch((err) => {
      //     messageError($q, err);
      //   })
      //   .finally(() => {
      //     hideLoader();
      //   });
    },
    "ยืนยันการเพิ่มตำแหน่ง",
    "ต้องการยืนยันการเพิ่มตำแหน่งนี้ใช่หรือไม่?"
  );
}
/** ฟังชั่น บันทึก */
function onSubmitSelectEdit() {
  dialogConfirm(
    $q,
    async () => {
      // showLoader();
      // const body = {
      //   posDictName: formPositionSelect.positionName,
      //   posTypeId: formPositionSelect.positionType, //*ประเภทตำแหน่ง
      //   posLevelId: formPositionSelect.positionLevel, //*ระดับตำแหน่ง
      // };
      // await http
      //   .post(config.API.orgPosPosition, body)
      //   .then(() => {
      //     success($q, "เพิ่มข้อมูลสำเร็จ");
      //     clearFormPositionSelect();
      //     modal.value = false;
      //     editCheck.value = false;
      //   })
      //   .catch((err) => {
      //     messageError($q, err);
      //   })
      //   .finally(() => {
      //     hideLoader();
      //   });
    },
    "ยืนยันการเพิ่มตำแหน่ง",
    "ต้องการยืนยันการเพิ่มตำแหน่งนี้ใช่หรือไม่?"
  );
}

async function clearFormPositionSelect() {
  formPositionSelect.positionId = "";
  formPositionSelect.positionName = "";
  formPositionSelect.positionType = "";
  formPositionSelect.positionLevel = "";
}

/**
 * ส่งค่า css ออกไปตามเงื่อนไข
 * @param val true/false
 */
function inputEdit(val: boolean) {
  return {
    "full-width cursor-pointer inputgreen ": val,
    "full-width cursor-pointer inputgreen": !val,
  };
}

/** function เรียกรายการประเภทตำแหน่ง */
async function fetchType() {
  showLoader();
  await http
    .get(config.API.orgPosType)
    .then((res) => {
      const data = res.data.result;
      dataLevel.value = data;
      typeOpsMain.value = data.map((e: OptionType) => ({
        id: e.id,
        name: e.posTypeName,
      }));
      typeOps.value = typeOpsMain.value;
    })
    .catch((err) => {
      messageError($q, err);
    })
    .finally(() => {
      hideLoader();
    });
}

watch(
  () => modal.value,
  () => {
    if (modal.value == true) {
      fetchType();
      if (formData.value) {
        const dataList = formData.value;
        setTimeout(() => {
          updateSelectType(dataList.posTypeId);
        }, 1000);
        formPositionSelect.positionId = dataList.positionId;
        formPositionSelect.positionName = dataList.positionName;
        formPositionSelect.positionType = dataList.positionType;
        formPositionSelect.positionLevel = dataList.positionLevel;
      }
    }
  }
);

function updateSelectType(val: string) {
  const listLevel = dataLevel.value.find((e: any) => e.id === val);
  levelOpsMain.value = listLevel.posLevels.map((e: OptionLevel) => ({
    id: e.id,
    name: e.posLevelName,
  }));
  levelOps.value = levelOpsMain.value;
}

function close() {
  modal.value = false;
  editCheck.value = false;
}
</script>

<template>
  <q-dialog v-model="modal" persistent>
    <q-card style="min-width: 50vw">
      <form @submit.prevent="validateFormPositionEdit">
        <DialogHeader
          :tittle="`${
            editCheck
              ? 'แก้ไขข้อมูลตำแหน่งลูกจ้างประจำ'
              : 'เพิ่มข้อมูลตำแหน่งลูกจ้างประจำ'
          }`"
          :close="close"
        />
        <q-separator />

        <q-card-section>
          <div class="row q-col-gutter-sm col-12">
            <div class="col-12">
              <q-input
                ref="positionNameRef"
                v-model="formPositionSelect.positionName"
                :class="inputEdit(isReadonly)"
                dense
                outlined
                for="#positionName"
                label="ชื่อตำแหน่ง"
                lazy-rules
                hide-bottom-space
                :rules="[(val) => !!val || `${'กรุณากรอกชื่อตำแหน่ง'}`]"
              />
            </div>

            <div class="col-6">
              <q-select
                ref="positionTypeRef"
                :class="inputEdit(isReadonly)"
                label="กลุ่มงาน"
                v-model="formPositionSelect.positionType"
                :options="typeOps"
                emit-value
                dense
                @update:model-value="updateSelectType"
                map-options
                outlined
                option-label="name"
                option-value="id"
                lazy-rules
                hide-bottom-space
                :rules="[(val) => !!val || `${'กรุณาเลือกกลุ่มงาน'}`]"
              />
            </div>

            <div class="col-6">
              <q-select
                ref="positionLevelRef"
                :class="inputEdit(isReadonly)"
                label="ระดับชั้นงาน"
                v-model="formPositionSelect.positionLevel"
                :disable="formPositionSelect.positionType === ''"
                :options="levelOps"
                emit-value
                dense
                map-options
                outlined
                option-label="name"
                option-value="id"
                lazy-rules
                hide-bottom-space
                :rules="[(val) => !!val || `${'กรุณาเลือกระดับชั้นงาน'}`]"
              />
            </div>
          </div>
        </q-card-section>
        <q-separator />
        <q-card-actions align="right">
          <q-btn type="submit" :label="`บันทึก`" color="public" />
        </q-card-actions>
      </form>
    </q-card>
  </q-dialog>
</template>