hrms-mgt/src/modules/11_discipline/components/4_Result/Form.vue

<script setup lang="ts">
import { ref, onMounted, reactive, watch } from "vue";
import { useQuasar, QForm } from "quasar";
import { useRouter, useRoute } from "vue-router";
import { useCounterMixin } from "@/stores/mixin";
import { useInvestigateDisStore } from "@/modules/11_discipline/store/InvestigateDisStore";

import type {
  FormData,
  FormRef,
} from "@/modules/11_discipline/interface/request/result";

const investigateDis = useInvestigateDisStore();
const { fecthDirector } = investigateDis;

const mixin = useCounterMixin();
const { date2Thai, hideLoader, dialogConfirm } = mixin;
const router = useRouter();
const route = useRoute();

const $q = useQuasar();
const id = ref<string>(route.params.id as string);

/** ตัวแปร ref สำหรับแสดง validate */
const detailRef = ref<Object | null>(null);

/** รับ props มาจากหน้าหลัก */
const props = defineProps({
  data: {
    type: Object,
    default: null,
  },
  onSubmit: {
    type: Function,
    default: () => "",
  },
});

/** ข้อมูล v-model ของฟอร์ม */
const formData = reactive<FormData>({
  detail: "",
});

/** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
const objectdisciplinary: FormRef = {
  detail: detailRef,
};

/** ฟังชั่นตรวจสอบความถูกต้องก่อน บันทึก */
function validateForm() {
  const hasError = [];
  for (const key in objectdisciplinary) {
    if (Object.prototype.hasOwnProperty.call(objectdisciplinary, key)) {
      const property = objectdisciplinary[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 {
    console.log(hasError);
  }
}

/**
 * ฟังก์ชั่นสำหรับบันทึกข้อมูล ระบบจะแสดง dialog ให้ยืนยันการบันทึก
 * หากยืนยันจะส่งข้อมูลไปบันทึกที่ api
 * หากยกเลิกจะกลับไปหน้าฟอร์ม
 */
function onSubmit() {
  dialogConfirm(
    $q,
    async () => {
      console.log(formData);
      props.onSubmit();
    },
    "ยืนยันการบันทึกข้อมูล",
    "ต้องการยืนยันการบันทึกข้อมูลนี้หรือไม่ ?"
  );
}

async function fetchDatadetail() {
  formData.detail = props.data.detail;
}
/**
 * เช็คข้อมูลจาก props
 * เมื่อมีข้อมูล
 * เก็บข้อมูลลง formData
 */
watch(props.data, async () => {
  fetchDatadetail();
});

/**เมื่อเริ่มโหลดหน้า
 * ส่งข้อมูลจำลองไปยัง store
 */
onMounted(async () => {
  await fetchDatadetail();
});
</script>
<template>
  <div class="col-xs-12 col-sm-12 col-md-11">
    <form @submit.prevent="validateForm">
      <div class="col-12">
        <q-card>
          <div class="col-12 row q-pa-md">
            <div class="col-12 row q-col-gutter-md">
              <q-input
                type="textarea"
                class="col-12"
                dense
                outlined
                ref="detailRef"
                v-model="formData.detail"
                for="#detail"
                label="สรุปผลการพิจารณา"
                hide-bottom-space
                :rules="[(val) => !!val || `${'กรุณากรอกกรณีมีความผิด'}`]"
                lazy-rules
              />
            </div>
          </div>
          <q-separator />
          <div class="row col-12 q-pa-sm">
            <q-space />
            <q-btn
              for="ButtonOnSubmit"
              id="formSubmit"
              color="secondary"
              label="บันทึก"
              type="submit"
              ><q-tooltip>บับทึกข้อมูล</q-tooltip></q-btn
            >
          </div>
        </q-card>
      </div>
    </form>
  </div>
</template>