hrms-mgt/src/modules/11_discipline/components/4_Result/EditPage.vue

<script setup lang="ts">
import { onMounted, reactive, ref } from "vue";
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 FormResult from "@/modules/11_discipline/components/4_Result/Form.vue"; // สอบสวนความผิดทางวินัย
import type { FormData } from "@/modules/11_discipline/interface/request/result";
import { useRouter, useRoute } from "vue-router";
import { useCounterMixin } from "@/stores/mixin";
import { useDisciplineResultStore } from "@/modules/11_discipline/store/ResultStore";
import { useQuasar } from "quasar";
import DialogSendToCommand from "@/modules/11_discipline/components/4_Result/DialogSendToCommand.vue";

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

/** ข้อมูล v-model ของฟอร์ม */
const data = reactive<FormData>({
  detail: "",
});

/** จำลองข้อมูลจาก api */
const fetchData = async () => {
  data.detail = "";
};

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

const modal = ref<boolean>(false);
const filterKeyword = ref<string>("");
/** ฟังชั่นปิด dialog */
function closeModal() {
  modal.value = false;
}

function getData() {}

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

/** โหลดข้อมูลเมื่อเข้าหน้านี้ */
onMounted(async () => {
  store.tabMenu = "result";
  await 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-result`)"
      />
      <div class="q-ma-none">แก้ไขผลการพิจารณาทางวินัย</div>
      <q-space />
      <div class="q-gutter-x-sm">
        <q-btn label="ส่งไปออกคำสั่ง" color="public" @click="sentIssue" />
      </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-tab name="result" 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-panel name="result">
          <FormResult :on-submit="onSubmit" :data="data" />
        </q-tab-panel>
      </q-tab-panels>
    </q-card>
    <!-- <Form :on-submit="onSubmit" :data="data" /> -->
  </div>

  <DialogSendToCommand
    v-model:Modal="modal"
    :closeModal="closeModal"
    :rows2="[]"
    v-model:filterKeyword2="filterKeyword"
    :getData="getData"
    v-model:type="type"
  />
</template>

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