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 Popup from "@/modules/11_discipline/components/1_Complaint/Popup.vue";
import { useRouter, useRoute } from "vue-router";
import { useQuasar } from "quasar";
import type {
  FormData,
  ArrayPerson,
  ArrayFileList,
} 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);

const modalPopup = ref<boolean>(false);

/** ข้อมูล v-model ของฟอร์ม */
const personOj = reactive<ArrayPerson>({
  idcard: "",
  name: "",
  positionNo: "",
  position: "",
  positionLevel: "",
  salary: "",
  organization: "",
});

const fileListOj = reactive<ArrayFileList>({
  id: "",
  file: "",
  fileName: "",
  fileType: "",
});

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: [],
  fileList: [fileListOj],
});

/** ดึงค่าจาก 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: "นางศิรินภา คงน้อย",
      positionNo: "สกก.1",
      position: "ธุรการ",
      positionLevel: "ต้น",
      salary: "10000",
      organization: "สกจ.",
    },
  ]),
    (data.fileList = [
      {
        id: "08dbeb08-1931-487d-8989-0725ce48031d",
        file: "https://s3cluster.frappet.com/bma-ehr-fpt/edb095bf-8898-4ef8-ad60-daaf60991b8f?AWSAccessKeyId=frappet&Expires=1700657567&Signature=7Do0YexqpTJGA4DQPKzJ5YtvyJg%3D",
        fileName: "ex_slip.jpeg.png14",
        fileType: "image/png",
      },
      {
        id: "08dbeb08-392b-41b8-8970-78934f317469",
        file: "https://s3cluster.frappet.com/bma-ehr-fpt/5a32c821-46d6-4bbc-9824-b777f154702e?AWSAccessKeyId=frappet&Expires=1700657567&Signature=HlNAjybBNPqGAYJtHIefNRofz1E%3D",
        fileName: "17058616.jpg",
        fileType: "image/jpeg",
      },
      {
        id: "08dbeb08-3e41-4500-8476-6bdd76f0b6c8",
        file: "https://s3cluster.frappet.com/bma-ehr-fpt/1bf5ef61-05f3-4cb1-98a5-dd2698b49440?AWSAccessKeyId=frappet&Expires=1700657567&Signature=WAlAjPbX%2BUoO0zY7m1jDEb3ovvA%3D",
        fileName: "17058616.jpg",
        fileType: "image/jpeg",
      },
      {
        id: "08dbeb08-428f-483b-8d50-718e947d012e",
        file: "https://s3cluster.frappet.com/bma-ehr-fpt/d848952a-54af-4502-b235-1f01f441d86c?AWSAccessKeyId=frappet&Expires=1700657568&Signature=3L9QfaWLCHmZjeS2UttVM3se6W0%3D",
        fileName: "HybGoQu8osQ49G7AzCOvYF4G.png",
        fileType: "image/png",
      },
      {
        id: "08dbeb08-8aa5-4264-87bf-1794be50f0c7",
        file: "https://s3cluster.frappet.com/bma-ehr-fpt/ac55b1f8-54f6-43c4-9f85-c236d24e7d76?AWSAccessKeyId=frappet&Expires=1700657568&Signature=isN3RM3P4%2BP5lgK5%2F45h1U5pabI%3D",
        fileName: "1300399ปปปป.jpg",
        fileType: "image/jpeg",
      },
    ]);
};

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

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

function closePopup() {
  modalPopup.value = false;
}

/** ยืนยัน ยุติเรื่อง */
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" />

    <Popup :modal="modalPopup" :close="closePopup" />
  </div>
</template>