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 { useQuasar } from "quasar";
import type {
  FormData,
  ArrayPerson,
} from "@/modules/11_discipline/interface/request/complaint";
import { useCounterMixin } from "@/stores/mixin";

const $q = useQuasar();
const mixin = useCounterMixin()
const { dialogConfirm } = mixin
const router = useRouter();
const route = useRoute();
const id = ref<string>(route.params.id as string);

/** ข้อมูล v-model ของฟอร์ม */
const personOj = reactive<ArrayPerson>({
  idcard: "",
  name: "",
  position: "",
  positionLevel: "",
  salary: "",
  organization: "",
});
const data = reactive<FormData>({
  respondentType: "",
  office: "",
  consideredAgency: "",
  title: "",
  description: "",
  dateReceived: null,
  dateConsideration: null,
  offenseDetails: "",
  levelConsideration: "",
  dateNotification: null,
  complaintFrom: "",
  appellant: "",
  documentFile: null,
  complaintStatus: "",
  organizationId: "",
  persons: [personOj],
  personId:[],
  respondentId:[]
});

/** ดึงค่าจาก api */
const fetchData = async () => {
  data.respondentType = "PERSON";
  data.office = "0";
  data.consideredAgency = "2";
  data.title = "ทุจริตในหน้าที่";
  data.description = "มีข้อร้องเรียนเรื่องการทุจริตทางการเงิน";
  data.dateReceived = new Date("2023-11-05");
  data.dateConsideration = new Date("2023-11-07T14:58:00");
  data.offenseDetails = "NOT_SPECIFIED";
  data.levelConsideration = "NORMAL";
  data.dateNotification = new Date("2023-11-07T14:58:00");
  data.complaintFrom = "สตง";
  data.appellant = "สมศรี สุขใจ";
  data.documentFile = "";
  data.complaintStatus = "NEW";
  data.persons = [
    {
      idcard: "1529900022223",
      name: "นางศิรินภา คงน้อย",
      position: "ธุรการ",
      positionLevel: "ต้น",
      salary: "10000",
      organization: "สกจ.",
    },
  ]
};

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

/** ยืนยัน มีมูลส่งไปสืบสวน */
function sentInvestigate(){
  dialogConfirm($q,()=> confirmSentInvestigate(),'ยืนยันส่งไปสืบสวน','ต้องการยืนยันส่งไปสืบสวนใช่หรือไม่?')
}

/** ยืนยัน ยุติเรื่อง */
function endInvestigate(){
  dialogConfirm($q,()=> confirmEndInvestigate(),'ยืนยันยุติเรื่อง','ต้องการยืนยันยุติเรื่องใช่หรือไม่?')
}

/** ยืนยัน ยกเลิกการยุติเรื่อง */
function cancelInvestigate(){
  dialogConfirm($q,()=> confirmCancelInvestigate(),'ยืนยันยกเลิกการยุติเรื่อง','ต้องการยืนยันยกเลิกการยุติเรื่องใช่หรือไม่?')
}

/** ฟังชั่น มีมูลส่งไปสืบสวน*/
function confirmSentInvestigate(){
  console.log('sent')
}

/** ฟังชั่น ยุติเรื่อง*/
function confirmEndInvestigate(){
  console.log('sent')
}

/** ฟังชั่น ยกเลิกการยุติเรื่อง*/
function confirmCancelInvestigate(){
  console.log('sent')
}
/** เรียกใช้งาน ฟังชั่น ตอนเริ่มโหลดหน้า */
onMounted(() => {
  console.log(data);
  fetchData();
});
</script>
<template>
  <div class="col-xs-12 col-sm-12 col-md-11">
    <div class="toptitle col-12 row items-end">
      <q-btn
        icon="mdi-arrow-left"
        unelevated
        round
        dense
        flat
        color="primary"
        class="q-mr-sm"
        @click="$router.push(`/discipline/complaints`)"
      />
      <div class="q-ma-none">แก้ไขเรื่องร้องเรียน {{ id }}#id</div>
      <q-space />
      <div class="q-gutter-x-sm">
        <q-btn
          v-if="data.complaintStatus === 'NEW'"
          label="มีมูลส่งไปสืบสวน"
          color="public"
          @click="sentInvestigate"
        />
        <q-btn
          v-if="data.complaintStatus === 'NEW'"
          label="ยุติเรื่อง"
          color="red-7"
          @click="endInvestigate"
        />
        <q-btn
          v-if="data.complaintStatus === 'STOP'"
          label="ยกเลิกการยุติเรื่อง"
          color="red-7"
          @click="cancelInvestigate"
        />
      </div>
    </div>

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