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

div
<script setup lang="ts">
import { ref, onMounted, reactive, watch } from "vue";
import http from "@/plugins/http";
import config from "@/app.config";
import { useQuasar } from "quasar";
import { useRouter, useRoute } from "vue-router";

// import DialogAddPersonal from "@/components/Dialogs/AddPersonal.vue";
import { useCounterMixin } from "@/stores/mixin";
import { useInvestigateDisStore } from "@/modules/11_discipline/store/InvestigateDisStore";
import { useDisciplineResultStore } from "@/modules/11_discipline/store/ResultStore";
import { useDisciplineMainStore } from "@/modules/11_discipline/store/main";

import type {
  FormData,
  FormRef,
  DataOption,
  DataOptionRes,
} from "@/modules/11_discipline/interface/request/result";

const mainStore = useDisciplineMainStore();
const modalPerson = ref<boolean>(false);
const toggleModal = () => (modalPerson.value = !modalPerson.value);
const investigateDis = useInvestigateDisStore();
// const { fecthDirector } = investigateDis;
const isReadonly = ref<boolean>(false); // อ่านได้อย่างเดียว
const dataStore = useDisciplineResultStore();
const mixin = useCounterMixin();
const { date2Thai, hideLoader, dialogConfirm, success, messageError } = mixin;
const router = useRouter();
const route = useRoute();

const $q = useQuasar();
const id = ref<string>(route.params.id as string);
const isSave = ref<boolean>(false); // มีการแก้ไขรอบันทึก
const respondentType = ref<string>("");
const organizationId = ref<string>("");
const consideredAgency = ref<string>("");
/** ตัวแปร ref สำหรับแสดง validate */
const detailRef = ref<Object | null>(null);

/** รับ props มาจากหน้าหลัก */
const props = defineProps({
  data: {
    type: Object,
    default: null,
  },
  onSubmit: {
    type: Function,
    default: () => "",
  },
  fetchData: {
    type: Function,
    default: () => "",
  },
});

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

/** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
const objectdisciplinary: FormRef = {
  resultDescription: detailRef,
};

const organizationOption = ref<DataOption[]>([]);

async function addPerson(data: any) {
  await mainStore.fetchData(data);
  console.log(mainStore.rowsAdd);
  toggleModal();
}

function handleSave(returnData: any) {
  addPerson(returnData);
  toggleModal();
}

/** function เรียกรายชื่อหน่วยงาน*/
async function fetchOrganization() {
  await http
    .get(config.API.typeOc())
    .then((res) => {
      const data = res.data.result;
      organizationOption.value = data.map((e: DataOptionRes) => ({
        id: e.organizationId,
        name: e.organizationName,
      }));
    })
    .catch((err) => {
      messageError($q, err);
    });
}

async function selectComplainant(val: string) {
  organizationId.value = "";
  consideredAgency.value = "";
}

/** ฟังชั่นตรวจสอบความถูกต้องก่อน บันทึก */
function validateForm() {
  const hasError = [];
  for (const key in objectdisciplinary) {
    if (Object.prototype.hasOwnProperty.call(objectdisciplinary, key)) {
      const property = objectdisciplinary[key];
      if (property.value && typeof property.value.validate === "function") {
        const isValid = property.value.validate();
        hasError.push(isValid);
      }
    }
  }
  if (hasError.every((result) => result === true)) {
    onSubmit();
  }
}

/**
 * ฟังก์ชั่นสำหรับบันทึกข้อมูล ระบบจะแสดง dialog ให้ยืนยันการบันทึก
 * หากยืนยันจะส่งข้อมูลไปบันทึกที่ api
 * หากยกเลิกจะกลับไปหน้าฟอร์ม
 */
function onSubmit() {
  dialogConfirm(
    $q,
    async () => {
      await http
        .put(config.API.listResultById(id.value), formData)
        .then(() => {
          isSave.value = false;
          success($q, "บันทึกข้อมูลสำเร็จ");
        })
        .catch((err) => {
          messageError($q, err);
        })
        .finally(async () => {
          await props.fetchData();
        });
    },
    "ยืนยันการบันทึกข้อมูล",
    "ต้องการยืนยันการบันทึกข้อมูลนี้หรือไม่ ?"
  );
}

async function fetchDatadetail() {
  formData.resultDescription = props.data.resultDescription;
}
/**
 * เช็คข้อมูลจาก props
 * เมื่อมีข้อมูล
 * เก็บข้อมูลลง formData
 */
watch(
  () => props.data,
  async () => {
    respondentType.value = props.data.respondentType;
    mainStore.rowsAdd = props.data.persons;
    await fetchDatadetail();
    await fetchOrganization();
  }
);

/** ฟังก์ชั่นเช็คการแก้ไขฟอร์มแล้วไม่ได้กดบันทึก */
function changeFormData() {
  isSave.value = true;
}

// function deletePerson(id: string) {
//   changeFormData();
//   const dataRow = mainStore.rowsAdd;
//   const updatedRows = dataRow.filter((item: any) => item.id !== id);
//   mainStore.rowsAdd = updatedRows;
// }

/**เมื่อเริ่มโหลดหน้า
 * ส่งข้อมูลจำลองไปยัง store
 */
onMounted(async () => {});
</script>
<template>
  <div class="row col-12">
    <div class="col-12">
      <div v-if="isSave" class="q-pa-sm q-gutter-sm">
        <q-banner
          inline-actions
          bordered
          class="bg-red-1 text-red border-orange"
        >
          <q-icon name="mdi-information-outline" size="20px" /> แจ้งเตือน
          ยังไม่ได้บันทึกข้อมูล
        </q-banner>
      </div>
      <form @submit.prevent="validateForm">
        <q-card>
          <div class="q-pa-md">
            <div class="row col-12 q-gutter-sm">
              <div class="col-xs-12 col-sm-2">
                <q-select
                  readonly
                  for="SelectrespondentType"
                  v-model="respondentType"
                  ref="respondentTypeRef"
                  dense
                  outlined
                  label="ผู้ถูกร้องเรียน"
                  option-value="id"
                  option-label="name"
                  emit-value
                  use-input
                  map-options
                  hide-bottom-space
                  :options="dataStore.complainantoptions"
                  :rules="[(val) => !!val || `${'กรุณาเลือกผู้ร้องเรียน'}`]"
                  lazy-rules
                  @update:model-value="selectComplainant(respondentType)"
                  @filter="(inputValue: any,
                doneFn: Function) => dataStore.filterSelector(inputValue, doneFn, 'filterrespondentType'
                )"
                >
                  <template v-slot:no-option>
                    <q-item>
                      <q-item-section class="text-grey">
                        ไม่มีข้อมูล
                      </q-item-section>
                    </q-item>
                  </template>
                </q-select>
              </div>
              <div
                class="col-xs-12 col-sm-3"
                v-if="respondentType === 'ORGANIZATION'"
                id="organizationId"
              >
                <q-select
                  for="inputOffice"
                  name="organizationId"
                  ref="organizationIdRef"
                  dense
                  hide-bottom-space
                  outlined
                  option-label="name"
                  option-value="id"
                  emit-value
                  map-options
                  v-model="organizationId"
                  :options="organizationOption"
                  label="เลือกสำนักงาน"
                  :rules="[(val) => !!val || `${'กรุณาเลือกสำนักงาน'}`]"
                  lazy-rules
                />
              </div>
              <div class="row col-12" v-if="respondentType === 'PERSON'">
                <q-card
                  bordered
                  class="row col-12"
                  style="border: 1px solid #d6dee1"
                >
                  <div
                    class="col-xs-12 col-sm-12 text-weight-medium bg-grey-1 q-py-xs q-px-md"
                  >
                    ผู้ถูกร้องเรียน
                    <!-- <q-btn
                  v-if="!isReadonly"
                  size="12px"
                  flat
                  round
                  dense
                  color="add"
                  class="q-ml-sm"
                  @click="toggleModal"
                  icon="mdi-plus"
                >
                  <q-tooltip>เพิ่มผู้ถูกร้องเรียน</q-tooltip>
                </q-btn> -->
                  </div>
                  <div class="col-12"><q-separator /></div>
                  <div class="col-xs-12 q-pa-sm">
                    <d-table
                      ref="table"
                      :columns="mainStore.columnsRespondent"
                      :rows="mainStore.rowsAdd"
                      row-key="idcard"
                      flat
                      bordered
                      :paging="true"
                      dense
                      class="custom-header-table"
                      :visible-columns="mainStore.visibleColumnsRespondent"
                    >
                      <template v-slot:header="props">
                        <q-tr :props="props">
                          <q-th
                            v-for="col in props.cols"
                            :key="col.name"
                            :props="props"
                            style="color: #000000; font-weight: 500"
                          >
                            <span class="text-weight-medium">{{
                              col.label
                            }}</span>
                          </q-th>
                          <!-- <q-th auto-width></q-th> -->
                        </q-tr>
                      </template>
                      <template v-slot:body="props">
                        <q-tr :props="props" class="cursor-pointer">
                          <q-td
                            v-for="col in props.cols"
                            :key="col.name"
                            :props="props"
                          >
                            <div v-if="col.name == 'no'">
                              {{ props.rowIndex + 1 }}
                            </div>
                            <div v-else-if="col.name == 'info'">
                              <q-btn
                                size="14px"
                                flat
                                round
                                dense
                                color="info"
                                icon="info"
                                @click="
                                  router.push(`/registry/${props.row.personId}`)
                                "
                                ><q-tooltip
                                  >ดูข้อมูลในทะเบียนประวัติ</q-tooltip
                                ></q-btn
                              >
                            </div>
                            <div
                              v-else-if="col.name === 'organization'"
                              class="table_ellipsis"
                            >
                              {{ props.row.organization }}
                            </div>
                            <div v-else>
                              {{ col.value }}
                            </div>
                          </q-td>
                          <!-- <q-td auto-width>
                        <q-btn
                          v-if="!isReadonly"
                          size="12px"
                          flat
                          round
                          dense
                          color="red"
                          class="q-ml-sm"
                          icon="mdi-delete-outline"
                          @click="deletePerson(props.row.id)"
                          ><q-tooltip>ลบผู้ถูกร้องเรียน</q-tooltip></q-btn
                        >
                      </q-td> -->
                        </q-tr>
                      </template>
                    </d-table>
                  </div>
                </q-card>
              </div>
              <q-input
                type="textarea"
                class="col-12"
                dense
                outlined
                ref="detailRef"
                v-model="formData.resultDescription"
                for="#detail"
                label="สรุปผลการพิจารณา"
                hide-bottom-space
                :rules="[(val) => !!val || `${'กรุณากรอกสรุปผลการพิจารณา'}`]"
                lazy-rules
                @update:model-value="changeFormData()"
              />
            </div>
          </div>
          <q-separator />
          <div class="row col-12 q-pa-sm">
            <q-space />
            <q-btn
              for="ButtonOnSubmit"
              id="formSubmit"
              color="secondary"
              label="บันทึก"
              type="submit"
              ><q-tooltip>บับทึกข้อมูล</q-tooltip></q-btn
            >
          </div>
        </q-card>
        <!-- <DialogAddPersonal
      title="ผู้ถูกร้องเรียน"
      :mainData="mainStore.rowsAdd"
      :modal="modalPerson"
      btn-title="เพิ่มรายชื่อผู้ถูกร้องเรียน"
      :close="toggleModal"
      :save="addPerson"
      @returnData="handleSave"
    /> -->
      </form>
    </div>
  </div>
</template>