hrms-mgt/src/modules/11_discipline/components/1_Complaint/EditPage.vue

<script setup lang="ts">
import { onMounted, reactive, ref } from "vue";
import Form from "@/modules/11_discipline/components/1_Complaint/Form.vue";
import { useRouter, useRoute } from "vue-router";
import type { FormData } from "@/modules/11_discipline/interface/request/complaint";

const router = useRouter();
const route = useRoute();
const id = ref<string>(route.params.id as string);

/** ข้อมูล v-model ของฟอร์ม */
const data = reactive<FormData>({
  complainantType: "",
  complainant: "",
  office: "",
  agency: "",
  topicComplaint: "",
  detail: "",
  datereceive: null,
  dateconsideration: null,
  offenseDescription: "",
  considerationLevel: "",
  datewarn: null,
  receivecomplaints: "",
  petitioner: "",
  files: null,
});

/** ดึงค่าจาก api */
const fetchData = async () => {
  data.complainantType = "2"
  data.complainant = "1"
  data.office = "0"
  data.agency = "2"
  data.topicComplaint = "test"
  data.detail = "test"
  data.datereceive = new Date("2023-11-07T14:58:00")
  data.dateconsideration = new Date("2023-11-07T14:58:00")
  data.offenseDescription = "0"
  data.considerationLevel = "0"
  data.datewarn = new Date("2023-11-07T14:58:00")
  data.receivecomplaints = "0"
  data.petitioner = "test"
  data.files = ""
};

/** ฟังชั่น แก้ไข */
async function onSubmit() {
  console.log("edit");
  router.push(`/discipline/complaints`);
};

/** เรียกใช้งาน ฟังชั่น ตอนเริ่มโหลดหน้า */
onMounted(() => {
  fetchData();
});
</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/complaints`)"
      />
      แก้ไขเรื่องร้องเรียน {{ id }}#id
    </div>

    <Form :on-submit="onSubmit" :data="data" />
  </div>
</template>