hrms-mgt/src/modules/11_discipline/components/8_AppealComplain/Form.vue

<script setup lang="ts">
import { ref, reactive } from "vue";
import { useQuasar } from "quasar";
import { useRoute, useRouter } from "vue-router";

import DialogAddPersonal from "@/components/Dialogs/AddPersonal.vue";

import { useCounterMixin } from "@/stores/mixin";
import { useAppealComplainStore } from "@/modules/11_discipline/store/AppealComplainStore";
import { useDisciplineMainStore } from "@/modules/11_discipline/store/main";

import type { MyObjectAppealRef } from "@/modules/11_discipline/interface/response/appealComplain";

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

const $q = useQuasar();
const modalPerson = ref<boolean>(false);
const mixin = useCounterMixin();
const { dialogConfirm } = mixin;
const dataStore = useAppealComplainStore();

const modalEdit = ref<boolean>(false);
const formData = reactive<any>({
  type: "",
  status: "",

  year: new Date().getFullYear().toString(),
});

/** ตัวแปร validate */
const typeRef = ref<Object | null>(null);
const statusRef = ref<Object | null>(null);

const objectAppeal: MyObjectAppealRef = {
  complaint: typeRef,
  complaintdetail: statusRef,
};

/*** ฟังก์ชั่นสำหรับ validate ฟอร์ม */
function validateForm() {
  const hasError = [];
  for (const key in objectAppeal) {
    if (Object.prototype.hasOwnProperty.call(objectAppeal, key)) {
      const property = objectAppeal[key];
      if (property.value && typeof property.value.validate === "function") {
        const isValid = property.value.validate();
        hasError.push(isValid);
      }
    }
  }

  if (hasError.every((result) => result === true)) {
    onSubmit();
  } else {
    console.log("ไม่ผ่าน ");
    // console.log(hasError);
  }
}

function toggleModal() {
  modalPerson.value = true
}

async function addPerson(data: any) {

  toggleModal();
}

function handleSave(returnData: any) {
  console.log(returnData)
  modalPerson.value = false
  mainStore.rowsAdd = returnData
}

function onSubmit() {
  dialogConfirm(
    $q,
    async () => {
      console.log("add");
    },
    "ยืนยันการบันทึกข้อมูล",
    "ต้องการยืนยันการบันทึกข้อมูลนี้หรือไม่ ?"
  );
}
</script>
<template>
  <form @submit.prevent="validateForm">
    <q-card bordered>
      <div class="q-pa-md">
        <div class="q-gutter-y-sm">
          <div class="row q-gutter-x-sm">
            <div class="col-3">
              <q-select
                ref="typeRef"
                v-model="formData.type"
                label="ประเภท"
                dense
                outlined
                emit-value
                map-options
                option-label="name"
                option-value="id"
                :options="dataStore.typeOptions"
                :rules="[(val) => !!val || `${'กรุณาเลือกผู้ร้องเรียน'}`]"
                lazy-rules
                hide-bottom-space
              />
            </div>
          </div>
          <div class="row col-12">
            <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
                  size="12px"
                  flat
                  round
                  dense
                  color="add"
                  class="q-ml-sm"
                  icon="mdi-plus"
                  @click="toggleModal"
                >
                  <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="false"
                  dense
                  hide-bottom
                  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-tr>
                  </template>
                </d-table>
              </div>
            </q-card>
          </div>
        </div>
      </div>
      <q-separator />
      <div class="row col-12 q-pa-sm">
        <q-space />
        <q-btn id="onSubmit" type="submit" label="บันทึก" color="secondary"
          ><q-tooltip>บันทึก</q-tooltip></q-btn
        >
      </div>
    </q-card>
  </form>
  <DialogAddPersonal
    title="ผู้ถูกร้องเรียน"
    :modal="modalPerson"
    btn-title="เพิ่มรายชื่อผู้ถูกสอบสวน"
    :close="toggleModal"
    :save="addPerson"
    :selected-data="mainStore.rowsAdd"
    @returnData="handleSave"
    selecetSwitch="single"
  />
</template>