hrms-mgt/src/modules/02_organization/components/DialogFormAgency.vue

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

import type {
  FormDataAgency,
  FormAgencyRef,
  DataOption,
} from "@/modules/02_organization/interface/index/Main";

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

import { useOrganizational } from "@/modules/02_organization/store/organizational";
import { useCounterMixin } from "@/stores/mixin";

const level = defineModel<number>("orgLevel", { required: true });
const actionType = defineModel<string>("actionType", { required: true });
const props = defineProps({
  modal: {
    type: Boolean,
    require: true,
  },
  close: {
    type: Function,
    require: true,
  },
  fetchDataTree: {
    type: Function,
    require: true,
    default: () => "",
  },
  fetchDataTable: {
    type: Function,
    require: true,
    default: () => "",
  },
  dataNode: {
    type: Object,
    require: true,
  },
  edit: {
    type: Function,
    require: true,
  },
});

const $q = useQuasar();
const store = useOrganizational();
const mixin = useCounterMixin();
const { dialogConfirm, showLoader, hideLoader, messageError, success } = mixin;

const orgLevelOptionMain = ref<DataOption[]>([
  { name: "ระดับสำนัก", id: "DEPARTMENT" },
  {
    name: "ระดับกอง/สำนักงาน/ส่วนราชการ/โรงพยาบาล/เทียบเท่ากอง",
    id: "OFFICE",
  },
  { name: "ระดับส่วน/กลุ่มภารกิจ", id: "DIVISION" },
  { name: "ระดับฝ่าย/กลุ่มงาน", id: "SECTION" },
]);

const orgLevelSubOptionMain = ref<DataOption[]>([]);

const orgLevelOption = ref<DataOption[]>([]);

const orgNameRef = ref<Object | null>(null);
const orgShortNameRef = ref<Object | null>(null);
const orgCodeRef = ref<Object | null>(null);

const orgLevelRef = ref<Object | null>(null);
const orgLevelSubRef = ref<Object | null>(null);

const formData = reactive<FormDataAgency>({
  orgName: "",
  orgShortName: "",
  orgCode: "",
  orgPhoneEx: "",
  orgPhoneIn: "",
  orgFax: "",
  orgLevel: "",
  orgLevelSub: "",
  responsibility: "",
});

/** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
const objectComplaintsRef: FormAgencyRef = {
  orgName: orgNameRef,
  orgShortName: orgShortNameRef,
  orgCode: orgCodeRef,

  orgLevel: orgLevelRef,
  orgLevelSub: orgLevelSubRef,
};

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

/** ฟังชั่น บันทึก */
function onSubmit() {
  dialogConfirm($q, async () => {
    showLoader();
    const type = store.checkLevel(level.value);
    const nameId =
      level.value === 0
        ? "orgRevisionId"
        : level.value === 1
        ? "orgRootId"
        : level.value === 2
        ? "orgChild1Id"
        : level.value === 3
        ? "orgChild2Id"
        : "orgChild3Id";

    let rootId: string = "";
    if (actionType.value === "ADD") {
      rootId = level.value === 0 ? store.draftId : props.dataNode?.orgTreeId;
    } else {
      rootId = level.value === 0 ? store.draftId : props.dataNode?.orgRootId;
    }

    const body = {
      ["org" + type + "Name"]: formData.orgName,
      ["org" + type + "ShortName"]: formData.orgShortName,
      ["org" + type + "Code"]: formData.orgCode,
      ["org" + type + "PhoneEx"]: formData.orgPhoneEx,
      ["org" + type + "PhoneIn"]: formData.orgPhoneIn,
      ["org" + type + "Fax"]: formData.orgFax,
      ["org" + type + "Rank"]: formData.orgLevel,
      ["org" + type + "RankSub"]: formData.orgLevelSub,
      [nameId]: rootId,
      responsibility:
        formData.responsibility != null ? formData.responsibility : "",
    };

    //เพิ่มข้อมูล
    if (actionType.value === "ADD") {
      await http
        .post(config.API.createOrgLevel(type.toLocaleLowerCase()), body)
        .then(async () => {
          await props.fetchDataTree(store.draftId);
          await success($q, "บันทึกข้อมูลสำเร็จ");
          await closeClear();
        })
        .catch((err) => {
          messageError($q, err);
        })
        .finally(() => {
          hideLoader();
        });
    } else {
      // แก่้ไขข้อมูล
      props.dataNode &&
        (await http
          .put(
            config.API.orgLevelByid(
              type.toLocaleLowerCase(),
              props.dataNode.orgTreeId
            ),
            body
          )
          .then(async () => {
            await props.fetchDataTree(store.draftId);
            await props.edit?.(
              props.dataNode?.orgTreeId,
              type,
              body,
              props.dataNode?.orgRootCode
            );
            await props.fetchDataTable(
              props?.dataNode?.orgTreeId,
              props?.dataNode?.orgLevel,
              false
            );
            await success($q, "บันทึกข้อมูลสำเร็จ");
            await closeClear();
          })
          .catch((err) => {
            messageError($q, err);
          })
          .finally(() => {
            hideLoader();
          }));
    }
  });
}

/**
 * function เช็ต formdata  กลับไปค่าว่าง และปิด popup
 */
function closeClear() {
  formData.orgName = "";
  formData.orgShortName = "";
  formData.orgCode = "";
  formData.orgPhoneEx = "";
  formData.orgPhoneIn = "";
  formData.orgFax = "";
  formData.orgLevel = "";
  formData.responsibility = "";
  props.close?.();
}

/**
 * callback function ทำงานเมื่อมีการเปิด popup
 */
watch(
  () => props.modal,
  () => {
    if (props.modal === true) {
      if (actionType.value === "ADD") {
        if (props.dataNode) {
          formData.orgCode =
            props?.dataNode?.orgLevel !== 0
              ? props?.dataNode.orgTreeCode
              : undefined;
          formData.orgShortName =
            props?.dataNode?.orgLevel !== 0
              ? props?.dataNode.orgTreeShortName
              : undefined;
        }

        if (level.value === 0) {
          formData.orgLevel = "DEPARTMENT";
          orgLevelOption.value = orgLevelOptionMain.value;
        } else {
          orgLevelOption.value = orgLevelOptionMain.value.slice(1, 4);
          formData.orgLevel = "";
        }

        formData.orgLevel == "DEPARTMENT" ? selectOrgLevele("DEPARTMENT") : "";
      } else {
        if (props.dataNode) {
          formData.orgName = props.dataNode.orgTreeName;
          formData.orgShortName = props.dataNode.orgTreeShortName;
          formData.orgCode = props.dataNode.orgTreeCode;
          formData.orgPhoneEx = props.dataNode.orgTreePhoneEx;
          formData.orgPhoneIn = props.dataNode.orgTreePhoneIn;
          formData.orgFax = props.dataNode.orgTreeFax;
          formData.orgLevel = props.dataNode.orgTreeRank;
          formData.orgLevelSub = props.dataNode.orgTreeRankSub;
          formData.responsibility = props.dataNode.responsibility;
          orgLevelOption.value =
            props.dataNode.orgTreeRank === "DEPARTMENT"
              ? orgLevelOptionMain.value
              : orgLevelOptionMain.value.slice(1, 4);
          selectOrgLevele(formData.orgLevel, false);
        }
      }
    }
  }
);

/**
 * title ของ popup
 */
const tittleName = computed(() => {
  let name = "";
  if (actionType.value === "ADD") {
    name = level.value === 0 ? "เพิ่มหน่วยงาน" : "เพิ่มส่วนราชการ";
  } else {
    name = level.value === 0 ? "แก้ไขหน่วยงาน" : "แก้ไขส่วนราชการ";
  }

  return name;
});

/**
 * function เลือกระดับของส่วนราชการ
 * @param val
 * @param status
 */
function selectOrgLevele(val: string, status: boolean = true) {
  formData.orgLevelSub = status ? "" : formData.orgLevelSub;
  switch (val) {
    case "DEPARTMENT":
      orgLevelSubOptionMain.value = [
        { name: "สำนัก", id: "BUREAU" },
        { name: "สำนักงาน", id: "OFFICE" },
        { name: "สำนักงานเขต", id: "DISTRICT" },
      ];
      break;
    case "OFFICE":
      orgLevelSubOptionMain.value = [
        { name: "กอง", id: "DIVISION" },
        {
          name: "สำนักงาน",
          id: "OFFICE",
        },
        { name: "ส่วนราชการ", id: "GOVERNMENT" },
        { name: "โรงพยาบาล", id: "HOSPITAL" },
        { name: "เทียบเท่ากอง", id: "EQUIVALENT" },
      ];

      break;
    case "DIVISION":
      orgLevelSubOptionMain.value = [
        { name: "ส่วน", id: "SECTION" },
        {
          name: "กลุ่มภารกิจ",
          id: "MISSION",
        },
      ];

    case "SECTION":
      orgLevelSubOptionMain.value = [
        { name: "ฝ่าย", id: "FACTION" },
        {
          name: "กลุ่มงาน",
          id: "WORK",
        },
        {
          name: "สถานีดับเพลิงและกู้ภัย",
          id: "FIRESTATION",
        },
        {
          name: "โรงเรียน",
          id: "SCHOOL",
        },
      ];

    default:
      break;
  }
}
</script>

<template>
  <template>
    <q-dialog v-model="props.modal" persistent>
      <q-card style="min-width: 60vw">
        <form @submit.prevent="validateForm">
          <DialogHeader :tittle="tittleName" :close="closeClear" />
          <q-separator />
          <q-card-section>
            <div class="row q-col-gutter-sm">
              <div class="col-4">
                <q-input
                  v-model="formData.orgName"
                  ref="orgNameRef"
                  dense
                  outlined
                  for="#ocName"
                  :label="level == 0 ? 'ชื่อหน่วยงาน' : 'ชื่อส่วนราชการ'"
                  hide-bottom-space
                  :rules="[
                    (val) =>
                      !!val ||
                      `${
                        level == 0
                          ? 'กรุณากรอกชื่อหน่วยงาน'
                          : 'กรุณากรอกชื่อส่วนราชการ'
                      }`,
                  ]"
                />
              </div>
              <div class="col-2">
                <q-input
                  v-model="formData.orgShortName"
                  :readonly="
                    (actionType === 'ADD' &&
                      props?.dataNode?.orgLevel !== 0 &&
                      level !== 0) ||
                    (actionType === 'EDIT' && props?.dataNode?.orgLevel > 1)
                  "
                  ref="orgShortNameRef"
                  dense
                  outlined
                  for="#shortName"
                  label="อักษรย่อ"
                  hide-bottom-space
                  :rules="[(val) => !!val || `${'กรุณากรอกอักษรย่อ'}`]"
                />
              </div>
              <div class="col-2">
                <q-input
                  :readonly="
                    (actionType === 'ADD' &&
                      props?.dataNode?.orgLevel !== 0 &&
                      level !== 0) ||
                    (actionType === 'EDIT' && props?.dataNode?.orgLevel > 1)
                  "
                  mask="##"
                  v-model="formData.orgCode"
                  ref="orgCodeRef"
                  dense
                  outlined
                  for="#ocNo"
                  :label="level == 0 ? 'รหัสหน่วยงาน' : 'รหัสส่วนราชการ'"
                  hide-bottom-space
                  :rules="[
                    (val) =>
                      !!val ||
                      `${
                        level == 0
                          ? 'กรุณากรอกรหัสหน่วยงาน'
                          : 'กรุณากรอกรหัสส่วนราชการ'
                      }`,
                  ]"
                />
              </div>
              <div class="col-4">
                <q-select
                  :readonly="level === 0 || formData.orgLevel === 'DEPARTMENT'"
                  for="#ocLevel"
                  ref="orgLevelRef"
                  dense
                  hide-bottom-space
                  outlined
                  option-label="name"
                  option-value="id"
                  emit-value
                  map-options
                  v-model="formData.orgLevel"
                  @update:model-value="selectOrgLevele"
                  :options="orgLevelOption"
                  :label="
                    level == 0 ? 'ระดับของหน่วยงาน' : 'ระดับของส่วนราชการ'
                  "
                  :rules="[
                    (val) =>
                      !!val ||
                      `${
                        level == 0
                          ? 'กรุณาเลือกระดับของหน่วยงาน'
                          : 'กรุณาเลือกระดับของส่วนราชการ'
                      }`,
                  ]"
                  lazy-rules
                />
              </div>
              <div class="col-4" v-if="formData.orgLevel !== ''">
                <q-select
                  ref="orgLevelSubRef"
                  dense
                  hide-bottom-space
                  outlined
                  option-label="name"
                  option-value="id"
                  emit-value
                  map-options
                  v-model="formData.orgLevelSub"
                  :options="orgLevelSubOptionMain"
                  label="ระดับของส่วนราชการ(ซับ)"
                  :rules="[
                    (val) => !!val || 'กรุณาเลือกระดับของส่วนราชการ (ซับ)',
                  ]"
                  lazy-rules
                />
              </div>
              <div class="col-4">
                <q-input
                  v-model="formData.orgPhoneEx"
                  ref="orgPhoneExRef"
                  dense
                  outlined
                  for="#telOut"
                  label="หมายเลขโทรศัพท์ที่ติดต่อจากภายนอก"
                  hide-bottom-space
                />
              </div>
              <div class="col-4">
                <q-input
                  v-model="formData.orgPhoneIn"
                  ref="orgPhoneInRef"
                  dense
                  outlined
                  for="#telIn"
                  label="หมายเลขโทรศัพท์ที่ติดต่อจากภายใน"
                  hide-bottom-space
                />
              </div>
              <div class="col-4">
                <q-input
                  v-model="formData.orgFax"
                  ref="orgFaxRef"
                  dense
                  outlined
                  for="#tel"
                  label="หมายเลขโทรสาร"
                  hide-bottom-space
                />
              </div>
              <div class="col-12">
                <q-input
                  v-model="formData.responsibility"
                  ref="responsibilityRef"
                  dense
                  outlined
                  for="#tel"
                  label="หน้าที่ความรับผิดชอบ"
                  hide-bottom-space
                  type="textarea"
                  rows="4"
                />
              </div>
            </div>
          </q-card-section>
          <q-separator />
          <q-card-actions align="right">
            <q-btn type="submit" :label="`บันทึก`" color="public">
              <q-tooltip>บันทึกข้อมูล</q-tooltip></q-btn
            >
          </q-card-actions>
        </form>
      </q-card>
    </q-dialog>
  </template>
</template>

<style scoped></style>