hrms-mgt/src/modules/11_discipline/components/3_InvestigateDisciplinary/EditPage.vue

<script setup lang="ts">
import { onMounted, reactive, ref, watch } from "vue";
import http from "@/plugins/http";
import config from "@/app.config";
import FormComplaints from "@/modules/11_discipline/components/1_Complaint/Form.vue"; //เรื่องร้องเรียน
import FormInvestigatefacts from "@/modules/11_discipline/components/2_InvestigateFacts/Form.vue"; //สืบสวนข้อเท็จจริง
import FormDisciplinary from "@/modules/11_discipline/components/3_InvestigateDisciplinary/Form.vue"; // สอบสวนความผิดทางวินัย
import type { FormData } from "@/modules/11_discipline/interface/request/disciplinary";
import { useRouter, useRoute } from "vue-router";
import { useCounterMixin } from "@/stores/mixin";
import { useInvestigateDisStore } from "@/modules/11_discipline/store/InvestigateDisStore";
import { useQuasar } from "quasar";
const $q = useQuasar();
const mixin = useCounterMixin();
const store = useInvestigateDisStore();
const { dialogConfirm } = mixin;
const router = useRouter();
const route = useRoute();
const id = ref<string>(route.params.id as string);

/** ข้อมูล v-model ของฟอร์ม */
const data = reactive<FormData>({
  complaint: "",
  respondentType: "",
  dateInvestigate: null,
  dateAllegation: null,
  dateEvident: null,
  casefault: "",
  typefault: "",
  faultLevel: "",
  refLaw: "",
  detailComplaint: "",
  whereInvestigate: "",
  trueDetail: "",
  evidence: "",
  recordAccuser: "",
  witnesses: "",
  InvestResults: "",
  filesEvidence: null,
  filesRecordAccuser: null,
  filesWitnesses: null,
  filesEtc: null,
  complaintStatus: "NEW",
  organizationId: "",
  consideredAgency: "",
});

async function fetchDetailDisciplinary() {
  await http
    .get(config.API.disciplineDisciplinaryById(id.value))
    .then((res) => {
      console.log(res);
    })
    .catch((err) => {
      console.log(err);
    });
}

async function fetchDetailInvestigate() {
  await http
    .get(config.API.disciplineInvestigateById(id.value))
    .then((res) => {
      console.log(res);
    })
    .catch((err) => {
      console.log(err);
    });
}

async function fetchDetailComplaints() {
  await http
    .get(config.API.disciplineComplaintsById(id.value))
    .then((res) => {
      console.log(res);
    })
    .catch((err) => {
      console.log(err);
    });
}

/** จำลองข้อมูลจาก api */
const fetchData = async () => {
  data.complaint = "test1";
  data.dateInvestigate = new Date("2023-11-08T14:58:00");
  data.dateAllegation = new Date("2023-11-08T14:58:00");
  data.dateEvident = new Date("2023-11-08T14:58:00");
  data.casefault = "test1";
  data.typefault = "2";
  data.faultLevel = "2";
  data.refLaw = "test";
  data.detailComplaint = "รายละเอียด";
  data.whereInvestigate = "ที่ไหน";
  data.trueDetail = "รายละเอียด";
  data.evidence = "รายละเอียด";
  data.recordAccuser = "รายละเอียด";
  data.witnesses = "รายละเอียด";
  data.InvestResults = "รายละเอียด";
  data.filesEvidence = null;
  data.filesRecordAccuser = null;
  data.filesWitnesses = null;
  data.filesEtc = null;
};

/**
 * บันทึกข้อมูลที่เเก้ไข
 * @param id ระบุ บุคคล
 */
const onSubmit = async (id: string) => {
  console.log("edit");
  router.push(`/discipline/disciplinary`);
};

/** ยืนยัน ส่งไปออกคำสั่ง */
function sentIssue() {
  dialogConfirm(
    $q,
    () => confirmSentIssue(),
    "ยืนยันส่งไปออกคำสั่ง",
    "ต้องการยืนยันส่งไปออกคำสั่งใช่หรือไม่?"
  );
}

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

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

/** ฟังชั่น ส่งไปออกคำสั่ง*/
function confirmSentIssue() {
  console.log("sent");
}

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

/** ฟังชั่น ยกเลิกการยุติเรื่อง*/
function confirmCancelInvestigate() {
  console.log("sent");
}

/** โหลดข้อมูลเมื่อเข้าหน้านี้ */
onMounted(async () => {
  store.tabMenu = 'disciplinary'
  await fetchDetailDisciplinary();
});

watch(
  () => store.tabMenu,
  async () => {
    const fetchFunction =
      store.tabMenu === "disciplinary"
        ? fetchDetailDisciplinary
        : store.tabMenu === "investigatefacts"
        ? fetchDetailInvestigate
        : store.tabMenu === "complaints"
        ? fetchDetailComplaints
        : null;

    if (fetchFunction) {
      await fetchFunction();
    }
    //   if (store.tabMenu === "disciplinary") {
    //     await fetchDetailDisciplinary();
    //   } else if (store.tabMenu === "investigatefacts") {
    //     await fetchDetailInvestigate();
    //   } else if (store.tabMenu === "complaints") await fetchDetailComplaints();
  }
);
</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/disciplinary`)"
      />
      <div class="q-ma-none">แก้ไขการสอบสวนความผิดทางวินัย</div>
      <q-space />
      <div class="q-gutter-x-sm">
        <q-btn
          v-if="data.complaintStatus === 'NEW'"
          label="ส่งไปสรุปผลการพิจารณา"
          color="public"
          @click="sentIssue"
        />
        <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>
    <q-card flat class="col-12">
      <q-tabs
        v-model="store.tabMenu"
        dense
        align="left"
        inline-label
        class="rounded-borders"
        indicator-color="primary"
        active-bg-color="teal-1"
        active-class="text-primary"
      >
        <q-tab name="complaints" label="เรื่องร้องเรียน" />
        <q-tab name="investigatefacts" label="สืบสวนข้อเท็จจริง" />
        <q-tab name="disciplinary" label="สอบสวนความผิดทางวินัย" />
      </q-tabs>
      <q-separator />
      <q-tab-panels v-model="store.tabMenu" animated>
        <q-tab-panel name="complaints">
          <FormComplaints :on-submit="onSubmit" :data="data" />
        </q-tab-panel>
        <q-tab-panel name="investigatefacts">
          <FormInvestigatefacts :on-submit="onSubmit" :data="data" />
        </q-tab-panel>
        <q-tab-panel name="disciplinary">
          <FormDisciplinary :on-submit="onSubmit" :data="data" />
        </q-tab-panel>
      </q-tab-panels>
    </q-card>
    <!-- <Form :on-submit="onSubmit" :data="data" /> -->
  </div>
</template>

<style scoped>
.q-tab-panel {
  padding: 0;
  background-color: #f0f3f3;
}
</style>