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 config from "@/app.config";
import http from "@/plugins/http";

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, showLoader, hideLoader, success, messageError } = 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>({
  personId:'',
  idcard: "",
  name: "",
  prefix:'',
  firstName:'',
  lastName:'',
  posNo: "",
  position: "",
  positionLevel: "",
  salary: null,
  organization: "",
});

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

const data = reactive<FormData>({
  respondentType: "",
  organizationId: "",
  consideredAgency: "",
  title: "",
  description: "",
  dateReceived: null,
  dateConsideration: null,
  offenseDetails: "",
  levelConsideration: "",
  dateNotification: null,
  complaintFrom: "",
  appellant: "",
  documentFile: null,
  status: "",
  persons: [personOj],
  rejectReason: null,
  disciplineComplaintDocs: [fileListOj],
});

/** ดึงค่าจาก api */
// const fetchData = async () => {
//   data.respondentType = "PERSON";
//   data.organizationId = "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 getData() {
  showLoader();
 await http
    .get(config.API.complaintbyId(id.value))
    .then((res) => {
      const dataList = res.data.result;
      data.respondentType = dataList.respondentType
      data.organizationId = dataList.organizationId
      data.consideredAgency = dataList.consideredAgency
      data.title = dataList.title
      data.description = dataList.description
      data.dateReceived = dataList.dateReceived
      data.levelConsideration = dataList.levelConsideration
      data.dateConsideration = dataList.dateConsideration
      data.offenseDetails = dataList.offenseDetails
      data.dateNotification = dataList.dateNotification
      data.complaintFrom = dataList.complaintFrom
      data.appellant = dataList.appellant
      data.status = dataList.status
      data.persons = dataList.persons
      data.rejectReason = dataList.rejectReason
      data.disciplineComplaintDocs = dataList.disciplineComplaintDocs

      console.log('list', dataList.persons)
    })
    .catch((e) => {
      messageError($q, e);
    })
    .finally(() => {
      hideLoader();
    });
}
/** ฟังชั่น แก้ไข */
async function onSubmit(data:any) {
  showLoader()
  http
  .put(config.API.complaintbyId(id.value),data)
  .then((res) => {
      console.log(res)
      success($q, "บันทึกข้อมูลสำเร็จ");
      router.push(`/discipline/complaints`);
    })
    .catch((e) => {
      messageError($q, e);
    })
    .finally(async () => {
      hideLoader();
    });
  console.log("edit",data);
  // 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();
  getData();
});
</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.status === 'NEW'"
          label="มีมูลส่งไปสืบสวน"
          color="public"
          @click="sentInvestigate"
        />
        <q-btn
          v-if="data.status === 'NEW'"
          label="ยุติเรื่อง"
          color="red-7"
          @click="endInvestigate"
        />
        <q-btn
          v-if="data.status === 'STOP'"
          label="ยกเลิกการยุติเรื่อง"
          color="red-7"
          @click="cancelInvestigate"
        />
      </div>
    </div>

    <Form :on-submit="onSubmit" :data="data" />
    <Popup :modal="modalPopup" :close="closePopup" />
  </div>
</template>