hrms-mgt/src/modules/11_discipline/components/3_InvestigateDisciplinary/AddPage.vue

<script setup lang="ts">
import { ref, onMounted } from "vue";
import { useQuasar, QForm } from "quasar";
import { useRouter, useRoute } from "vue-router";
import { useCounterMixin } from "@/stores/mixin";
import Dialogbody from "@/modules/11_discipline/components/3_InvestigateDisciplinary/Dialogbody.vue";
import Table from "@/modules/11_discipline/components/3_InvestigateDisciplinary/DirectorTable.vue";
import { useInvestigateDisStore } from "@/modules/11_discipline/store/InvestigateDisStore";

const investigateDis = useInvestigateDisStore();
const { fecthDirector } = investigateDis;

onMounted(async () => {
  await fecthDirector([
    {
      nameDirector: "นาง เกสินี เจียรสุมัย",
      position: "ครู",
      duty: "ประธาน",
      email: "e@email.com",
      telephone: "0800808080",
    },
    {
      nameDirector: "นาย สรวิชญ์ พลสิทธิ์",
      position: "ทดลองงาน",
      duty: "เลขานุการ",
      email: "g@gmail.com",
      telephone: "0614565145",
    },
  ]);
  await hideLoader();
});

const popup = () => {
  modal.value = true;
  filterKeyword2.value = "";
};

const mixin = useCounterMixin();
const { date2Thai, hideLoader } = mixin;

const initialPagination = ref<any>({
  rowsPerPage: 0,
});

const router = useRouter();
const route = useRoute();
const rows = ref([]);
const modal = ref<boolean>(false);
const $q = useQuasar();
const id = ref<string>(route.params.id as string);
const myForm = ref<QForm | null>(null); //form data input
const edit = ref<boolean>(false);
const dateInvestigate = ref<Date>(new Date());
const dateAllegation = ref<Date>(new Date());
const dateEvident = ref<Date>(new Date());
const filterKeyword2 = ref<string>("");
const typefault = ref<string>("");
const faultLevel = ref<string>("");
const type = ref<string>("");
const Complaint = ref<string>("");
const trueDetail = ref<string>("");
const evidence = ref<string>("");
const recordAccuser = ref<string>("");
const witnesses = ref<string>("");
const InvestResults = ref<string>("");
const files = ref<File>();
const filesEvidence = ref<File>();
const filesRecordAccuser = ref<File>();
const filesWitnesses = ref<File>();
const filesEtc = ref<File>();
const fileDocDataUpload = ref<File[]>([]);
const refRaw = ref<string>("");
const casefault = ref<string>("");
const whereInvestigate = ref<string>("");

const routeName = router.currentRoute.value.name;

const clickClose = () => {
  modal.value = false;
};

// เรียกข้อมูลของรอบการเสนอขอ

const filter = ref<string>(""); //search data table

const fileUploadDoc = async (files: any) => {
  files.forEach((file: any) => {
    fileDocDataUpload.value.push(file);
  });
};

// คลิกบันทึก
const checkSave = () => {};

const deleteData = async (id: string) => {
  console.log("delete");
};

const clickBack = () => {
  router.push(`/discipline/disciplinary`);
};
</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="clickBack"
      />
      {{ "เพิ่มการสอบสวนความผิดทางวินัย" }}
    </div>
    <q-form ref="myForm">
      <div class="col-12">
        <q-card bordered>
          <div class="col-12 row q-col-gutter-md q-pa-md">
            <div class="col-xs-12 col-sm-12 row">
              <q-separator />
              <div class="col-12 row q-pa-sm q-col-gutter-sm">
                <q-input
                  class="col-12"
                  dense
                  outlined
                  v-model="Complaint"
                  label="เรื่องร้องเรียน"
                  type="textarea"
                  :rules="[(val:string) => !!val || `${'กรุณากรอกเรื่องร้องเรียน'}`]"
                />
                <datepicker
                  menu-class-name="modalfix"
                  v-model="dateInvestigate"
                  :locale="'th'"
                  autoApply
                  class="col-xs-12 col-sm-4"
                  borderless
                  :enableTimePicker="false"
                  week-start="0"
                >
                  <template #year="{ year }">
                    {{ year + 543 }}
                  </template>
                  <template #year-overlay-value="{ value }">
                    {{ parseInt(value + 543) }}
                  </template>
                  <template #trigger>
                    <q-input
                      outlined
                      dense
                      class="full-width datepicker"
                      :model-value="
                        dateInvestigate != null
                          ? date2Thai(dateInvestigate)
                          : null
                      "
                      :label="`${'วันที่สอบสวน'}`"
                      :rules="[(val) => !!val || `${'กรุณาเลือกวันที่สอบสวน'}`]"
                    >
                      <template v-slot:prepend>
                        <q-icon
                          name="event"
                          class="cursor-pointer"
                          style="color: var(--q-primary)"
                        >
                        </q-icon>
                      </template>
                    </q-input>
                  </template>
                </datepicker>
                <datepicker
                  menu-class-name="modalfix"
                  v-model="dateAllegation"
                  class="col-xs-12 col-sm-4"
                  :locale="'th'"
                  autoApply
                  borderless
                  :enableTimePicker="false"
                  week-start="0"
                >
                  <template #year="{ year }">
                    {{ year + 543 }}
                  </template>
                  <template #year-overlay-value="{ value }">
                    {{ parseInt(value + 543) }}
                  </template>
                  <template #trigger>
                    <q-input
                      outlined
                      dense
                      class="col-xs-12 col-sm-4"
                      :model-value="
                        dateAllegation != null
                          ? date2Thai(dateAllegation)
                          : null
                      "
                      :label="`${'วันที่รับทราบข้อกล่าวหา'}`"
                      :rules="[
                        (val) =>
                          !!val || `${'กรุณาเลือกวันที่รับทราบข้อกล่าวหา'}`,
                      ]"
                    >
                      <template v-slot:prepend>
                        <q-icon
                          name="event"
                          class="cursor-pointer"
                          style="color: var(--q-primary)"
                        >
                        </q-icon>
                      </template>
                    </q-input>
                  </template>
                </datepicker>
                <datepicker
                  menu-class-name="modalfix"
                  v-model="dateEvident"
                  :locale="'th'"
                  autoApply
                  class="col-xs-12 col-sm-4"
                  borderless
                  :enableTimePicker="false"
                  week-start="0"
                >
                  <template #year="{ year }">
                    {{ year + 543 }}
                  </template>
                  <template #year-overlay-value="{ value }">
                    {{ parseInt(value + 543) }}
                  </template>
                  <template #trigger>
                    <q-input
                      outlined
                      dense
                      class="full-width datepicker"
                      :model-value="
                        dateEvident != null ? date2Thai(dateEvident) : null
                      "
                      :label="`${'วันที่สรุปพยานหลักฐาน'}`"
                      :rules="[
                        (val) =>
                          !!val || `${'กรุณาเลือกวันที่สรุปพยานหลักฐาน'}`,
                      ]"
                    >
                      <template v-slot:prepend>
                        <q-icon
                          name="event"
                          class="cursor-pointer"
                          style="color: var(--q-primary)"
                        >
                        </q-icon>
                      </template>
                    </q-input>
                  </template>
                </datepicker>
                <div class="col-xs-12 col-sm-12 text-bold">
                  กรรมการ
                  <q-btn
                    size="12px"
                    flat
                    round
                    color="add"
                    @click="popup()"
                    icon="mdi-plus"
                  >
                    <q-tooltip>เพิ่มกรรมการ</q-tooltip>
                  </q-btn>
                </div>
                <div class="col-xs-12 col-sm-12 q-pb-md">
                  <Table
                    style="max-height: 80vh"
                    :rows="rows"
                    :columns="investigateDis.columnsDirector"
                    :filter="filter"
                    :visible-columns="investigateDis.visibleColumnsDirector"
                    v-model:inputfilter="filter"
                    v-model:inputvisible="investigateDis.visibleColumnsDirector"
                    :pagination="initialPagination"
                    :nornmalData="true"
                    :paging="true"
                    :titleText="''"
                  >
                    <template #columns="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'" class="table_ellipsis2">
                            {{ props.rowIndex + 1 }}
                          </div>
                          <div v-else class="table_ellipsis2">
                            {{ col.value }}
                          </div>
                        </q-td>
                        <q-td>
                          <q-btn
                            dense
                            size="12px"
                            flat
                            round
                            color="red"
                            @click="deleteData(props.row.id)"
                            icon="mdi-delete"
                          >
                            <q-tooltip>ลบข้อมูล</q-tooltip>
                          </q-btn>
                        </q-td>
                      </q-tr>
                    </template>
                  </Table>
                </div>

                <q-input
                  class="col-xs-12 col-sm-6"
                  dense
                  outlined
                  v-model="casefault"
                  label="กรณีมีความผิด"
                  :rules="[(val) => !!val || `${'กรุณากรอกกรณีมีความผิด'}`]"
                  lazy-rules
                />
                <q-input
                  class="col-xs-12 col-sm-6"
                  dense
                  outlined
                  v-model="whereInvestigate"
                  label="สอบสวนที่"
                  :rules="[(val) => !!val || `${'กรุณากรอกสอบสวนที่'}`]"
                  lazy-rules
                />
                <q-select
                  dense
                  class="col-xs-12 col-sm-3"
                  outlined
                  v-model="typefault"
                  option-label="name"
                  option-value="id"
                  :options="investigateDis.optionsTypefault"
                  label="ลักษณะความผิด"
                />
                <q-select
                  dense
                  class="col-xs-12 col-sm-3"
                  outlined
                  v-model="faultLevel"
                  option-label="name"
                  option-value="id"
                  :options="investigateDis.optionsfaultLevel"
                  label="ระดับโทษความผิด"
                />
                <q-input
                  class="col-xs-12 col-sm-6 q-pb-md"
                  dense
                  outlined
                  v-model="refRaw"
                  label="อ้างอิงมาตราตามกฎหมาย"
                  :rules="[
                    (val) => !!val || `${'กรุณากรอกอ้างอิงมาตราตามกฎหมาย'}`,
                  ]"
                  lazy-rules
                />
                <q-input
                  class="col-12"
                  dense
                  outlined
                  v-model="Complaint"
                  label="รายละเอียดเรื่องร้องเรียน"
                  type="textarea"
                  :rules="[(val:string) => !!val || `${'กรุณากรอกรายละเอียดเรื่องร้องเรียน'}`]"
                />
                <q-input
                  class="col-12"
                  dense
                  outlined
                  v-model="trueDetail"
                  label="รายละเอียดสืบสวนข้อเท็จจริง"
                  type="textarea"
                  :rules="[(val:string) => !!val || `${'กรุณากรอกรายละเอียดสืบสวนข้อเท็จจริง'}`]"
                />
                <q-input
                  class="col-12"
                  dense
                  outlined
                  v-model="evidence"
                  label="สรุปพยานหลักฐานสนับสนุนข้อกล่าวหา"
                  type="textarea"
                  :rules="[(val:string) => !!val || `${'กรุณากรอกสรุปพยานหลักฐานสนับสนุนข้อกล่าวหา'}`]"
                />
                <q-file
                  class="col-12 q-pb-md"
                  outlined
                  dense
                  v-model="filesEvidence"
                  @added="fileUploadDoc"
                  label="ไฟล์เอกสารหลักฐานสรุปพยานหลักฐานสนับสนุนข้อกล่าวหา"
                  hide-bottom-space
                  lazy-rules
                  accept=".pdf,.xlsx,.doc"
                >
                  <template v-slot:prepend>
                    <q-icon name="attach_file" />
                  </template>
                </q-file>
                <q-input
                  class="col-12"
                  dense
                  outlined
                  v-model="recordAccuser"
                  label="บันทึกถ้อยคำของผู้กล่าวหา"
                  type="textarea"
                  :rules="[(val:string) => !!val || `${'กรุณากรอกบันทึกถ้อยคำของผู้กล่าวหา'}`]"
                />
                <q-file
                  class="col-12 q-pb-md"
                  outlined
                  dense
                  v-model="filesRecordAccuser"
                  @added="fileUploadDoc"
                  label="ไฟล์เอกสารบันทึกถ้อยคำของผู้กล่าวหา"
                  hide-bottom-space
                  lazy-rules
                  accept=".pdf,.xlsx,.doc"
                >
                  <template v-slot:prepend>
                    <q-icon name="attach_file" />
                  </template>
                </q-file>
                <q-input
                  class="col-12"
                  dense
                  outlined
                  v-model="witnesses"
                  label="พยานและการบันทึกถ้อยคำ"
                  type="textarea"
                  :rules="[(val:string) => !!val || `${'กรุณากรอกพยานและการบันทึกถ้อยคำ'}`]"
                />
                <q-file
                  class="col-12 q-pb-md"
                  outlined
                  dense
                  v-model="filesWitnesses"
                  @added="fileUploadDoc"
                  label="ไฟล์เอกสารพยานและการบันทึกถ้อยคำ"
                  hide-bottom-space
                  lazy-rules
                  accept=".pdf,.xlsx,.doc"
                >
                  <template v-slot:prepend>
                    <q-icon name="attach_file" />
                  </template>
                </q-file>
                <q-input
                  class="col-12"
                  dense
                  outlined
                  v-model="InvestResults"
                  label="ผลการสอบสวน"
                  type="textarea"
                  :rules="[(val:string) => !!val || `${'กรุณากรอกผลการสอบสวน'}`]"
                />
                <q-file
                  class="col-12"
                  outlined
                  dense
                  v-model="filesEtc"
                  @added="fileUploadDoc"
                  label="ไฟล์เอกสารหลักฐานอื่น ๆ"
                  hide-bottom-space
                  lazy-rules
                  accept=".pdf,.xlsx,.doc"
                >
                  <template v-slot:prepend>
                    <q-icon name="attach_file" />
                  </template>
                </q-file>
              </div>
            </div>
          </div>
          <q-separator />
          <q-separator />
          <div class="row col-12 q-pa-sm">
            <q-space />
            <q-btn
              flat
              round
              color="public"
              @click="checkSave"
              icon="mdi-content-save-outline"
            >
              <q-tooltip>{{ edit ? "แก้ไขข้อมูล" : "บันทึกข้อมูล" }}</q-tooltip>
            </q-btn>
          </div>
        </q-card>
      </div>
    </q-form>
  </div>
  <Dialogbody
    v-model:Modal="modal"
    :clickClose="clickClose"
    :rows2="investigateDis.rows2"
    v-model:filterKeyword2="filterKeyword2"
    v-model:type="type"
  />
  <!-- :fecthlistappointment="fecthlistappointment" -->
</template>