hrms-mgt/src/modules/02_organization/components/DialogNewStructure.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";
import { useOrganizational } from "@/modules/02_organization/store/organizational";

/**
 * importType
 */
import type {
  FormDataNewStructure,
  FormNewStructureRef,
  DataOption,
  HistoryType,
} from "@/modules/02_organization/interface/index/Main";

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

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

/**
 * props
 */
const modal = defineModel<boolean>("newStructure", { required: true });
const status = defineModel<boolean>("status", { required: true });
const type = defineModel<string>("type", { default: "NEW" });
const props = defineProps({
  fetchActive: {
    type: Function,
    require: true,
    default: () => "fetchActive function",
  },
});

//ตัวเลือกการเพิ่มโครงสร้าง
const typeOp = ref<DataOption[]>([
  {
    id: "NEW",
    name: "สร้างใหม่",
  },
  {
    id: "ORG",
    name: "ทำสำเนาเฉพาะโครงสร้าง",
  },
  {
    id: "ORG_POSITION",
    name: "ทำสำเนาโครงสร้างและตำแหน่ง",
  },
  {
    id: "ORG_POSITION_PERSON",
    name: "ทำสำเนาโครงสร้าง ตำแหน่ง และคนครอง",
  },
]);

const selectType = ref<string[]>([]);

//ฟอร์มเพิ่มโครงสร้าง
const formData = reactive<FormDataNewStructure>({
  orgRevisionId: "",
  orgRevisionName: "",
  typeDraft: "",
  remark: "",
});

/** ฟังก์ชันยืนยันการบันทึกการกสร้างโครงสร้าง*/
function onSubmit() {
  //เช็คการทำสำเนา
  formData.typeDraft =
    selectType.value.includes("ORG") &&
    selectType.value.includes("PERSON") &&
    selectType.value.includes("POSITION") &&
    selectType.value.includes("ROLE")
      ? "ORG_POSITION_PERSON_ROLE"
      : selectType.value.includes("ORG") &&
        selectType.value.includes("PERSON") &&
        selectType.value.includes("POSITION")
      ? "ORG_POSITION_PERSON"
      : selectType.value.includes("ORG") &&
        selectType.value.includes("POSITION") &&
        selectType.value.includes("ROLE")
      ? "ORG_POSITION_ROLE"
      : selectType.value.includes("ORG") &&
        selectType.value.includes("POSITION")
      ? "ORG_POSITION"
      : selectType.value.includes("ORG")
      ? "ORG"
      : "NEW";

  dialogConfirm(
    $q,
    async () => {
      showLoader();
      await http
        .post(config.API.createOrganization, formData)
        .then(async (res) => {
          await props.fetchActive();
          status.value = true;
          store.typeOrganizational = "draft";
          store.draftId = res.data.result.id;
          store.statusView = "list";
          success($q, "บันทึกข้อมูลสำเร็จ");
          close();
        })
        .catch((err) => {
          messageError($q, err);
        })
        .finally(() => {
          hideLoader();
        });
    },
    "ยืนยันการเพิ่มโครงสร้าง",
    store.draftId
      ? "คุณมีแบบร่างอยู่หากคุณกดยืนยันระบบจะทำการลบแบบร่างเดิมและสร้างแบบร่างใหม่ ต้องการยืนยันการเพิ่มโครงสร้างนี้ใช่หรือไม่?"
      : "ต้องการยืนยันการเพิ่มโครงสร้างนี้ใช่หรือไม่?"
  );
}

/** ฟังก์ชัน ปิด popup และกำหนดฟอร์มเพิ่มโครงสร้างเป็น Default*/
function close() {
  modal.value = false;
  formData.orgRevisionId = "";
  formData.orgRevisionName = "";
  formData.typeDraft = "";
  formData.remark = "";
  selectType.value = [];
}

/** ฟังก์ชันเรียกข้อมูลประวัติโครงสร้าง*/
function fetchOrgRevision() {
  showLoader();
  http
    .get(config.API.organizationHistoryNew)
    .then(async (res) => {
      const data = res.data.result.filter(
        (e: HistoryType) => e.orgRevisionIsDraft === false
      );
      if (data) {
        const currentStr = await data.find(
          (x: HistoryType) => x.orgRevisionIsCurrent === true
        );
        formData.orgRevisionId = currentStr ? currentStr.orgRevisionId : null;
      }
    })
    .catch((err) => {
      messageError($q, err);
    })
    .finally(() => {
      hideLoader();
    });
}

/**
 * ฟังก์ชันเลือกทำสำเนา
 * @param val รายการที่เลือก
 */
function updateSelectCopy(val: string[]) {
  if (!val.includes("ORG")) {
    selectType.value = [];
  } else if (!val.includes("POSITION")) {
    selectType.value = ["ORG"];
  }
}

/**
 * ดูการเปลี่ยนแปลง  modal เมื่อเป็น true
 * type ไม่เป็นการสร้างใหม่ให้เรียกข้อมูลประวัติโครงสร้าง
 */
watch(
  () => modal.value,
  () => {
    modal.value && type.value !== "NEW" && fetchOrgRevision();
  }
);
</script>
<template>
  <template>
    <q-dialog v-model="modal" persistent>
      <q-card style="min-width: 50vw">
        <q-form greedy @submit.prevent @validation-success="onSubmit">
          <DialogHeader :tittle="`เพิ่มโครงสร้าง`" :close="close" />
          <q-separator />

          <q-card-section>
            <div class="row q-col-gutter-sm">
              <div class="col-12">
                <q-input
                  class="inputgreen"
                  v-model="formData.orgRevisionName"
                  ref="orgRevisionNameRef"
                  dense
                  outlined
                  for="#orgRevisionName"
                  label="ชื่อโครงสร้าง"
                  hide-bottom-space
                  :rules="[(val:string) => !!val || `${'กรุณากรอกชื่อโครงสร้าง'}`]"
                />
              </div>

              <div class="col-12">
                <q-input
                  class="inputgreen"
                  v-model="formData.remark"
                  dense
                  outlined
                  for="#orgRevisionRemark"
                  label="หมายเหตุ"
                  hide-bottom-space
                  type="textarea"
                />
              </div>
              <div class="col-12" v-if="type === 'ADD'">
                เลือกทำสำเนา
                <div class="column">
                  <div class="col">
                    <q-checkbox
                      v-model="selectType"
                      label="โครงสร้าง"
                      color="primary"
                      val="ORG"
                      @update:model-value="updateSelectCopy"
                    />
                  </div>
                  <div class="col">
                    <q-checkbox
                      v-model="selectType"
                      :disable="!selectType.includes('ORG')"
                      label="ตำแหน่ง"
                      color="primary"
                      val="POSITION"
                      @update:model-value="updateSelectCopy"
                    />
                  </div>
                  <div class="col">
                    <q-checkbox
                      v-model="selectType"
                      label="คนครอง"
                      color="primary"
                      val="PERSON"
                      :disable="
                        !selectType.includes('ORG') ||
                        !selectType.includes('POSITION')
                      "
                    />
                  </div>
                  <div class="col">
                    <q-checkbox
                      v-model="selectType"
                      label="สิทธิ์"
                      color="primary"
                      val="ROLE"
                      :disable="
                        !selectType.includes('ORG') ||
                        !selectType.includes('POSITION')
                      "
                    />
                  </div>
                </div>

                <!-- <q-select
                  for="#type"
                  ref="typeRef"
                  readonly
                  dense
                  hide-bottom-space
                  outlined
                  option-label="name"
                  option-value="id"
                  emit-value
                  map-options
                  v-model="formData.typeDraft"
                  :options="typeOp"
                  label="ประเภทการโคลน"
                  :rules="[(val:string) => !!val || `${'กรุณาเลือกประเภทการโคลน'}`]"
                  lazy-rules
                /> -->
              </div>
            </div>
          </q-card-section>
          <q-separator />
          <q-card-actions align="right">
            <q-btn type="submit" :label="`บันทึก`" color="public" />
          </q-card-actions>
        </q-form>
      </q-card>
    </q-dialog>
  </template>
</template>