hrms-mgt/src/modules/16_positionEmployee/components/DialogAddPosition.vue

<script setup lang="ts">
import { ref, reactive, watch } from "vue";
import { useQuasar } from "quasar";

import http from "@/plugins/http";
import config from "@/app.config";
import { useCounterMixin } from "@/stores/mixin";

/**
 * importType
 */
import type {
  ResGroup,
  ResLevel,
} from "@/modules/01_masterdata/interface/response/positionEmployee/Main";
import type { DataOption } from "@/modules/16_positionEmployee/interface/index/Main";
import type { OptionType } from "@/modules/16_positionEmployee/interface/response/organizational";

/**
 * importComponents
 */
import DialogHeader from "@/components/DialogHeader.vue";

/**
 * use
 */
const $q = useQuasar();
const mixin = useCounterMixin();
const { dialogConfirm, showLoader, hideLoader, messageError, success } = mixin;

/**
 * props
 */
const modal = defineModel<boolean>("modalAdd", { required: true });
const isEditCheck = defineModel<boolean>("isEdit", { required: true });
const props = defineProps({
  emitSearch: Function,
  getData: Function,
  data: Object,
  levelOp: Object,
});

//ข้อมูลตำแหน่ง
const formDataPos = reactive({
  posName: "", //ชือตำแหน่ง
  posTypeName: "", //กลุ่มงาน
  posLevelName: "", //ระดับชั้นงาน
});

const posTypeMain = ref<ResGroup[]>([]); //ข้อมูลกลุ่มงาน
const posTypeOp = ref<DataOption[]>([]); //รายการกลุ่มงาน
const posLevelOp = ref<DataOption[]>([]); //รายการระดับชั้นงาน

/**
 * ฟังก์ชันยืนยันการบันทึกข้อมุล
 */
async function onSubmit() {
  dialogConfirm($q, async () => {
    const body = {
      posDictName: formDataPos.posName,
      posTypeId: formDataPos.posTypeName,
      posLevelId: formDataPos.posLevelName,
    };
    showLoader();
    try {
      const url = !isEditCheck.value
        ? config.API.orgEmployeePos
        : config.API.orgEmployeePosById(props?.data?.id);
      await http[!isEditCheck.value ? "post" : "put"](url, body);
      await props.emitSearch?.(formDataPos.posName, "positionName");
      await success($q, "บันทีกข้อมูลสำเร็จ");
      close();
    } catch (err) {
      messageError($q, err);
    } finally {
      hideLoader();
    }
  });
}

/**
 * ฟังก์ชันปิด popup
 */
function close() {
  modal.value = false;
  isEditCheck.value = false;
  formDataPos.posName = "";
  formDataPos.posTypeName = "";
  formDataPos.posLevelName = "";
}

/**
 * ฟังก์ชันดึงข้อมุลกลุ่มงาน
 */
async function fetchType() {
  showLoader();
  await http
    .get(config.API.orgEmployeeType)
    .then((res) => {
      posTypeMain.value = res.data.result;
      posTypeOp.value = res.data.result.map((e: OptionType) => ({
        id: e.id,
        name: e.posTypeName,
      }));
    })
    .catch((err) => {
      messageError($q, err);
    })
    .finally(() => {
      hideLoader();
    });
}

/**
 * ฟังก์ชันหาข้อมูลระดับชั้นงานตามกลุ่มงาน
 * @param id  กลุ่มงาน
 */
function updatePosTypeName(id: string) {
  const posLevel = posTypeMain.value.find((e: ResGroup) => e.id === id);
  posLevelOp.value =
    posLevel?.posLevels.map((e: ResLevel) => ({
      id: e.id,
      name: e.posLevelName.toString(),
    })) ?? [];
  formDataPos.posLevelName = "";
}

/**
 * ทำงานเมื่อ modal เป็น true
 */
watch(
  () => modal.value,
  async () => {
    if (modal.value === true) {
      await fetchType();

      if (props.data) {
        const dataList = props.data;
        updatePosTypeName(dataList.posTypeId);

        formDataPos.posName = dataList.posDictName;
        formDataPos.posTypeName = dataList.posTypeId;
        formDataPos.posLevelName = dataList.posLevelId;
      }
    }
  }
);
</script>

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

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

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

            <div class="col-6">
              <q-select
                ref="posLevelNameRef"
                label="ระดับชั้นงาน"
                v-model="formDataPos.posLevelName"
                :disable="formDataPos.posTypeName === ''"
                :options="posLevelOp"
                emit-value
                dense
                map-options
                outlined
                option-label="name"
                option-value="id"
                lazy-rules
                hide-bottom-space
                :rules="[(val:string) => !!val || `${'กรุณาเลือกระดับชั้นงาน'}`]"
                class="inputgreen"
              />
            </div>
          </div>

          <q-separator />
          <q-card-actions align="right" class="bg-white text-teal q-pa-sm">
            <q-btn
              type="submit"
              :label="`${isEditCheck ? 'แก้ไขตำแหน่ง' : 'เพิ่มตำแหน่ง'}`"
              color="public"
            />
          </q-card-actions>
        </q-card-section>
      </q-form>
    </q-card>
  </q-dialog>
</template>