เเก้ UIรายการสืบสวนข้อเท็จจริง

src/modules/11_discipline/components/2_InvestigateFacts/EditPage.vue

@@ -0,0 +1,72 @@
+<script setup lang="ts">
+import { onMounted, reactive, ref } from "vue";
+import Form from "@/modules/11_discipline/components/2_InvestigateFacts/Form.vue";
+import type { FormData } from "@/modules/11_discipline/interface/request/investigate";
+import { useRouter, useRoute } from "vue-router";
+
+const router = useRouter();
+const route = useRoute();
+const id = ref<string>(route.params.id as string);
+onMounted(() => {
+  fetchData();
+});
+
+// get ข้อมูลเก่ากรณีแก้ไขข้อมูล
+const data = reactive<FormData>({
+  complaint: "",
+  complaintdetail: "",
+  detail: "",
+  fault: "",
+  results: "",
+  other: "",
+  evidenceFiles: null,
+  fileComplaint: null,
+  clickTime: false,
+  date: null,
+  dateEnd: null,
+  investigation: "",
+  daysExtend: "",
+});
+const fetchData = async () => {
+  // ดึงค่าจาก api
+  data.complaint = "เรื่องที่ 1";
+  data.complaintdetail = "รายละเอียด";
+  data.detail = "รายละเอียด";
+  data.fault = "001";
+  data.results = "test";
+  data.other = "";
+  data.evidenceFiles = null;
+  data.fileComplaint = null;
+  data.clickTime = false;
+  data.date = new Date("2023-11-07T14:58:00");
+  data.dateEnd = new Date("2023-11-08T14:58:00");
+  data.investigation = "002";
+  data.daysExtend = "";
+};
+
+// แก้ไขข้อมูล
+const onSubmit = async (id: string) => {
+  // put
+  console.log("edit");
+  router.push(`/discipline/investigatefacts`);
+};
+</script>
+<template>
+  <div class="col-xs-12 col-sm-12 col-md-11">
+    <div class="toptitle col-12 row items-center">
+      <q-btn
+        icon="mdi-arrow-left"
+        unelevated
+        round
+        dense
+        flat
+        color="primary"
+        class="q-mr-sm"
+        @click="$router.push(`/discipline/investigatefacts`)"
+      />
+      แก้ไขรายการสืบสวนข้อเท็จจริง {{ id }}#id
+    </div>
+
+    <Form :on-submit="onSubmit" :data="data" />
+  </div>
+</template>