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

<script setup lang="ts">
import { ref, onMounted, reactive, watch } from "vue";
import http from "@/plugins/http";
import config from "@/app.config";
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, success, messageError } = 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: () => "",
  },
  fetchData: {
    type: Function,
    default: () => "",
  },
});

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

/** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
const objectdisciplinary: FormRef = {
  resultDescription: 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 () => {
      await http
        .put(config.API.listResultById(id.value), formData)
        .then(() => {
          success($q, "บันทึกข้อมูลสำเร็จ");
        })
        .catch((err) => {
          messageError($q, err);
        })
        .finally(async () => {
          await props.fetchData();
        });
    },
    "ยืนยันการบันทึกข้อมูล",
    "ต้องการยืนยันการบันทึกข้อมูลนี้หรือไม่ ?"
  );
}

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

/**เมื่อเริ่มโหลดหน้า
 * ส่งข้อมูลจำลองไปยัง store
 */
onMounted(async () => {});
</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.resultDescription"
                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>