ปรับวินัย

src/modules/11_discipline/components/4_Result/Form.vue

@@ -0,0 +1,142 @@
+<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>