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

<script setup lang="ts">
import { ref, reactive, watch } from "vue";
import { useQuasar } from "quasar";
import { useCounterMixin } from "@/stores/mixin";
import DialogHeader from "@/components/DialogHeader.vue";
import type {
  FormDataAgency,
  FormAgencyRef,
  DataOption,
} from "@/modules/02_organizationalNew/interface/index/Main";

const props = defineProps({
  modal: Boolean,
  close: Function,
});

const $q = useQuasar();
const mixin = useCounterMixin();
const { dialogConfirm } = mixin;

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

const ocNameRef = ref<Object | null>(null);
const shortNameRef = ref<Object | null>(null);
const ocNoRef = ref<Object | null>(null);
const ocLevelRef = ref<Object | null>(null);
const telOutRef = ref<Object | null>(null);
const telInRef = ref<Object | null>(null);
const telRef = ref<Object | null>(null);

const formData = reactive<FormDataAgency>({
  ocName: "",
  shortName: "",
  ocNo: "",
  ocLevel: "",
  telOut: "",
  telIn: "",
  tel: "",
});

/** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
const objectComplaintsRef: FormAgencyRef = {
  ocName: ocNameRef,
  shortName: shortNameRef,
  ocNo: ocNoRef,
  ocLevel: ocLevelRef,
  telOut: telOutRef,
  telIn: telInRef,
  tel: telRef,
};

/** ฟังก์ชั่นตรวจสอบความถูกต้องของข้อมูลในฟอร์ม */
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, () => {
    console.log(formData)
  });
}

watch(
  () => props.modal,
  () => {
    if (props.modal === true) {
      ocLevelOp.value = [
        {
          id: "id1",
          name: "id1",
        },
        {
          id: "id2",
          name: "id2",
        },
      ];
    }
  }
);
</script>
<template>
  <template>
    <q-dialog v-model="props.modal" persistent>
      <q-card style="min-width: 50vw">
        <form @submit.prevent="validateForm">
          <DialogHeader :tittle="`เพิ่มหน่วยงาน`" :close="props.close" />
          <q-separator />

          <q-card-section>
            <div class="row q-col-gutter-sm">
              <div class="col-4">
                <q-input
                  v-model="formData.ocName"
                  ref="ocNameRef"
                  dense
                  outlined
                  for="#ocName"
                  label="สรุปผลการพิจารณา"
                  hide-bottom-space
                  :rules="[(val) => !!val || `${'กรุณากรอกสรุปผลการพิจารณา'}`]"
                />
              </div>
              <div class="col-2">
                <q-input
                  v-model="formData.shortName"
                  ref="shortNameRef"
                  dense
                  outlined
                  for="#shortName"
                  label="ชื่อย่อ"
                  hide-bottom-space
                  :rules="[(val) => !!val || `${'กรุณากรอกชื่อย่อ'}`]"
                />
              </div>
              <div class="col-2">
                <q-input
                  v-model="formData.ocNo"
                  ref="ocNoRef"
                  dense
                  outlined
                  for="#ocNo"
                  label="รหัสหน่วยงาน"
                  hide-bottom-space
                  :rules="[(val) => !!val || `${'กรุณากรอกรหัสหน่วยงาน'}`]"
                />
              </div>
              <div class="col-4">
                <q-select
                  for="#ocLevel"
                  ref="ocLevelRef"
                  dense
                  hide-bottom-space
                  outlined
                  option-label="name"
                  option-value="id"
                  emit-value
                  map-options
                  v-model="formData.ocLevel"
                  :options="ocLevelOp"
                  label="ระดับของหน่วยงาน"
                  :rules="[(val) => !!val || `${'กรุณาเลือกระดับของหน่วยงาน'}`]"
                  lazy-rules
                />
              </div>
              <div class="col-4">
                <q-input
                  v-model="formData.telOut"
                  ref="telOutRef"
                  dense
                  outlined
                  for="#telOut"
                  label="หมายเลขโทรศัพท์ที่ติดต่อจากภายนอก"
                  hide-bottom-space
                  :rules="[
                    (val) =>
                      !!val ||
                      `${'กรุณากรอกหมายเลขโทรศัพท์ที่ติดต่อจากภายนอก'}`,
                  ]"
                />
              </div>
              <div class="col-4">
                <q-input
                  v-model="formData.telIn"
                  ref="telInRef"
                  dense
                  outlined
                  for="#telIn"
                  label="หมายเลขโทรศัพท์ที่ติดต่อจากภายใน"
                  hide-bottom-space
                  :rules="[
                    (val) =>
                      !!val || `${'กรุณากรอกหมายเลขโทรศัพท์ที่ติดต่อจากภายใน'}`,
                  ]"
                />
              </div>
              <div class="col-4">
                <q-input
                  v-model="formData.tel"
                  ref="telRef"
                  dense
                  outlined
                  for="#tel"
                  label="หมายเลขโทรสาร"
                  hide-bottom-space
                  :rules="[(val) => !!val || `${'กรุณากรอกหมายเลขโทรสาร'}`]"
                />
              </div>
            </div>
          </q-card-section>
          <q-separator />
          <q-card-actions align="right" class="bg-white text-teal">
            <q-btn type="submit" :label="`บันทึก`" color="public" />
          </q-card-actions>
        </form>
      </q-card>
    </q-dialog>
  </template>
</template>