hrms-mgt/src/modules/11_discipline/components/DialogSearchAdvanced.vue

<script setup lang="ts">
import { ref, watchEffect } from "vue";
import { useRoute } from "vue-router";

import { useCounterMixin } from "@/stores/mixin";
import { useComplainstDataStore } from "@/modules/11_discipline/store/ComplaintsStore";
import { useDisciplineMainStore } from "@/modules/11_discipline/store/Main";
import { useInvestigateFactStore } from "@/modules/11_discipline/store/InvestigateFactStore";
import { useInvestigateDisStore } from "@/modules/11_discipline/store/InvestigateDisStore";

import DialogHeader from "@/components/DialogHeader.vue";

const route = useRoute();
const mixin = useCounterMixin();
const { dateThaiRange } = mixin;
const store = useDisciplineMainStore();
const complainstStore = useComplainstDataStore();
const investigateStore = useInvestigateFactStore();
const InvestigateDisStore = useInvestigateDisStore();

const props = defineProps({
  getData: Function,
});
const modal = ref<boolean>(false);

/** เปิด popup ค้นหาขั้นสูง */
function onSearch() {
  modal.value = true;
}

/** ปิด popup ค้นหาขั้นสูง */
function onClose() {
  modal.value = false;
}

function fnSearch() {
  props.getData?.();
  onClose();
}

function resetForms() {
  store.formComplaint.dateReceived = null;
  store.formComplaint.respondentType = "";
  store.formComplaint.offenseDetails = "";
  store.formComplaint.levelConsideration = "";
  store.formComplaint.dateConsideration = null;

  store.formInvestigateFacts.respondentType = "";
  store.formInvestigateFacts.offenseDetails = "";
  store.formInvestigateFacts.investigationDetail = "";
  store.formInvestigateFacts.investigationDate = null;
  store.formInvestigateFacts.dateReceived = null;
  store.formInvestigateFacts.investigationStatusResult = "";

  store.formInvestigateDisciplinary.respondentType = "";
  store.formInvestigateDisciplinary.offenseDetails = "";
  store.formInvestigateDisciplinary.disciplinaryFaultLevel = "";
  store.formInvestigateDisciplinary.disciplinaryCaseFault = "";
  store.formInvestigateDisciplinary.disciplinaryDate = null;
  store.formInvestigateDisciplinary.dateReceived = null;

  store.formResult.respondentType = "";
  store.formResult.offenseDetails = "";
  store.formResult.disciplinaryFaultLevel = "";
  store.formResult.disciplinaryCaseFault = "";
  store.formResult.disciplinaryDate = null;
  store.formResult.resultDisciplineType = "";
  store.formResult.resultTitleType = "";
  store.formResult.resultOc = "";
  store.formResult.resultYear = null;
}

watchEffect(() => {
  resetForms();
});
</script>
<template>
  <q-btn
    size="12px"
    flat
    round
    color="blue"
    icon="mdi-filter-variant"
    @click="onSearch"
  >
    <q-tooltip>ค้นหาขั้นสูง</q-tooltip>
  </q-btn>

  <q-dialog v-model="modal" persistent>
    <q-card class="col-12" style="width: 400px">
      <q-form greedy @submit.prevent @validation-success="fnSearch">
        <DialogHeader :tittle="'ค้นหาขั้นสูง'" :close="onClose" />
        <q-separator />
        <q-card-section>
          <div
            v-if="route.name == 'disciplineComplaints'"
            class="row q-col-gutter-sm"
          >
            <div class="col-12">
              <datepicker
                v-model="store.formComplaint.dateReceived"
                :locale="'th'"
                autoApply
                borderless
                range
                :enableTimePicker="false"
                week-start="0"
                class=""
                menu-class-name="modalfix"
              >
                <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="
                      store.formComplaint.dateReceived != null
                        ? dateThaiRange(store.formComplaint.dateReceived)
                        : null
                    "
                    :label="`${'วันที่รับเรื่องเริ่มต้น-สิ้นสุด'}`"
                  >
                    <template v-slot:prepend>
                      <q-icon
                        name="event"
                        class="cursor-pointer"
                        style="color: var(--q-primary)"
                      >
                      </q-icon>
                    </template>
                    <template v-slot:append>
                      <q-icon
                        v-if="store.formComplaint.dateReceived !== null"
                        name="clear"
                        class="cursor-pointer"
                        @click.prevent.stop="
                          store.formComplaint.dateReceived = null
                        "
                      >
                      </q-icon>
                    </template>
                  </q-input>
                </template>
              </datepicker>
            </div>
            <div class="col-12">
              <q-select
                v-model="store.formComplaint.respondentType"
                :options="store.complainantoptionsMain"
                option-label="name"
                option-value="id"
                outlined
                dense
                map-options
                emit-value
                clearable
                label="ผู้ถูกร้องเรียน"
              >
              </q-select>
            </div>
            <div class="col-12">
              <q-select
                v-model="store.formComplaint.offenseDetails"
                :options="store.offenseDetailstOptions"
                option-label="name"
                option-value="id"
                outlined
                dense
                map-options
                emit-value
                clearable
                label="ลักษณะความผิด"
              >
              </q-select>
            </div>
            <div class="col-12">
              <q-select
                v-model="store.formComplaint.levelConsideration"
                :options="complainstStore.levelConsiderationtOptions"
                option-label="name"
                option-value="id"
                outlined
                dense
                map-options
                emit-value
                clearable
                label="ระดับการพิจารณา"
              >
              </q-select>
            </div>
            <div class="col-12">
              <datepicker
                v-model="store.formComplaint.dateConsideration"
                :locale="'th'"
                autoApply
                borderless
                range
                :enableTimePicker="false"
                week-start="0"
                menu-class-name="modalfix"
              >
                <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="
                      store.formComplaint.dateConsideration != null
                        ? dateThaiRange(store.formComplaint.dateConsideration)
                        : null
                    "
                    :label="`${'วันที่เริ่มต้น-สิ้นสุดการพิจารณา'}`"
                  >
                    <template v-slot:prepend>
                      <q-icon
                        name="event"
                        class="cursor-pointer"
                        style="color: var(--q-primary)"
                      >
                      </q-icon>
                    </template>
                    <template v-slot:append>
                      <q-icon
                        v-if="store.formComplaint.dateConsideration !== null"
                        name="clear"
                        class="cursor-pointer"
                        @click.prevent.stop="
                          store.formComplaint.dateConsideration = null
                        "
                      >
                      </q-icon>
                    </template>
                  </q-input>
                </template>
              </datepicker>
            </div>
          </div>

          <div
            v-if="route.name == 'disciplineInvestigatefacts'"
            class="row q-col-gutter-sm"
          >
            <div class="col-12">
              <q-select
                v-model="store.formInvestigateFacts.respondentType"
                :options="store.complainantoptionsMain"
                option-label="name"
                option-value="id"
                outlined
                dense
                map-options
                emit-value
                clearable
                label="ผู้ถูกสืบสวน"
              >
              </q-select>
            </div>
            <div class="col-12">
              <q-select
                v-model="store.formInvestigateFacts.offenseDetails"
                :options="store.offenseDetailstOptions"
                option-label="name"
                option-value="id"
                outlined
                dense
                map-options
                emit-value
                clearable
                label="ลักษณะความผิด"
              >
              </q-select>
            </div>
            <div class="col-12">
              <q-select
                v-model="store.formInvestigateFacts.investigationDetail"
                :options="investigateStore.investigationDetailOp"
                option-label="name"
                option-value="id"
                outlined
                dense
                map-options
                emit-value
                clearable
                label="ลักษณะการสืบสวน"
              >
              </q-select>
            </div>

            <div class="col-12">
              <datepicker
                v-model="store.formInvestigateFacts.investigationDate"
                :locale="'th'"
                autoApply
                borderless
                range
                :enableTimePicker="false"
                week-start="0"
                menu-class-name="modalfix"
              >
                <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="
                      store.formInvestigateFacts.investigationDate != null
                        ? dateThaiRange(
                            store.formInvestigateFacts.investigationDate
                          )
                        : null
                    "
                    :label="`${'วันที่สืบสวนเริ่มต้น-สิ้นสุด'}`"
                  >
                    <template v-slot:prepend>
                      <q-icon
                        name="event"
                        class="cursor-pointer"
                        style="color: var(--q-primary)"
                      >
                      </q-icon>
                    </template>
                    <template v-slot:append>
                      <q-icon
                        v-if="
                          store.formInvestigateFacts.investigationDate !== null
                        "
                        name="clear"
                        class="cursor-pointer"
                        @click.prevent.stop="
                          store.formInvestigateFacts.investigationDate = null
                        "
                      >
                      </q-icon>
                    </template>
                  </q-input>
                </template>
              </datepicker>
            </div>
            <div class="col-12">
              <datepicker
                v-model="store.formInvestigateFacts.dateReceived"
                :locale="'th'"
                autoApply
                borderless
                range
                :enableTimePicker="false"
                week-start="0"
                menu-class-name="modalfix"
              >
                <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="
                      store.formInvestigateFacts.dateReceived != null
                        ? dateThaiRange(store.formInvestigateFacts.dateReceived)
                        : null
                    "
                    :label="`${'วันที่รับเรื่องเริ่มต้น-สิ้นสุด'}`"
                  >
                    <template v-slot:prepend>
                      <q-icon
                        name="event"
                        class="cursor-pointer"
                        style="color: var(--q-primary)"
                      >
                      </q-icon>
                    </template>
                    <template v-slot:append>
                      <q-icon
                        v-if="store.formInvestigateFacts.dateReceived !== null"
                        name="clear"
                        class="cursor-pointer"
                        @click.prevent.stop="
                          store.formInvestigateFacts.dateReceived = null
                        "
                      >
                      </q-icon>
                    </template>
                  </q-input>
                </template>
              </datepicker>
            </div>
            <div class="col-12">
              <q-select
                v-model="store.formInvestigateFacts.investigationStatusResult"
                :options="store.statusResultOptions"
                option-label="name"
                option-value="id"
                outlined
                dense
                map-options
                emit-value
                clearable
                label="ผลการสืบสวน"
              >
              </q-select>
            </div>
          </div>

          <div
            v-if="route.name == 'disciplineDisciplinary'"
            class="row q-col-gutter-sm"
          >
            <div class="col-12">
              <q-select
                v-model="store.formInvestigateDisciplinary.respondentType"
                :options="store.complainantoptionsMain"
                option-label="name"
                option-value="id"
                outlined
                dense
                map-options
                emit-value
                clearable
                label="ผู้ถูกสอบสวน"
              >
              </q-select>
            </div>
            <div class="col-12">
              <q-select
                v-model="store.formInvestigateDisciplinary.offenseDetails"
                :options="store.offenseDetailstOptions"
                option-label="name"
                option-value="id"
                outlined
                dense
                map-options
                emit-value
                clearable
                label="ลักษณะความผิด"
              >
              </q-select>
            </div>
            <div class="col-12">
              <q-select
                v-model="
                  store.formInvestigateDisciplinary.disciplinaryFaultLevel
                "
                :options="InvestigateDisStore.optionsfaultLevel"
                option-label="name"
                option-value="id"
                outlined
                dense
                map-options
                emit-value
                clearable
                label="ระดับโทษความผิด"
              >
              </q-select>
            </div>
            <div class="col-12">
              <q-input
                v-model="
                  store.formInvestigateDisciplinary.disciplinaryCaseFault
                "
                dense
                outlined
                label="กรณีความผิด"
              ></q-input>
            </div>
            <div class="col-12">
              <datepicker
                v-model="store.formInvestigateDisciplinary.disciplinaryDate"
                :locale="'th'"
                autoApply
                borderless
                range
                :enableTimePicker="false"
                week-start="0"
                menu-class-name="modalfix"
              >
                <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="
                      store.formInvestigateDisciplinary.disciplinaryDate != null
                        ? dateThaiRange(
                            store.formInvestigateDisciplinary.disciplinaryDate
                          )
                        : null
                    "
                    :label="`${'วันที่สอบสวนเริ่มต้น-สิ้นสุด'}`"
                  >
                    <template v-slot:prepend>
                      <q-icon
                        name="event"
                        class="cursor-pointer"
                        style="color: var(--q-primary)"
                      >
                      </q-icon>
                    </template>
                    <template v-slot:append>
                      <q-icon
                        v-if="
                          store.formInvestigateDisciplinary.disciplinaryDate !==
                          null
                        "
                        name="clear"
                        class="cursor-pointer"
                        @click.prevent.stop="
                          store.formInvestigateDisciplinary.disciplinaryDate =
                            null
                        "
                      >
                      </q-icon>
                    </template>
                  </q-input>
                </template>
              </datepicker>
            </div>
            <div class="col-12">
              <datepicker
                v-model="store.formInvestigateDisciplinary.dateReceived"
                :locale="'th'"
                autoApply
                borderless
                range
                :enableTimePicker="false"
                week-start="0"
                menu-class-name="modalfix"
              >
                <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="
                      store.formInvestigateDisciplinary.dateReceived != null
                        ? dateThaiRange(
                            store.formInvestigateDisciplinary.dateReceived
                          )
                        : null
                    "
                    :label="`${'วันที่รับเรื่องเริ่มต้น-สิ้นสุด'}`"
                  >
                    <template v-slot:prepend>
                      <q-icon
                        name="event"
                        class="cursor-pointer"
                        style="color: var(--q-primary)"
                      >
                      </q-icon>
                    </template>
                    <template v-slot:append>
                      <q-icon
                        v-if="
                          store.formInvestigateDisciplinary.dateReceived !==
                          null
                        "
                        name="clear"
                        class="cursor-pointer"
                        @click.prevent.stop="
                          store.formInvestigateDisciplinary.dateReceived = null
                        "
                      >
                      </q-icon>
                    </template>
                  </q-input>
                </template>
              </datepicker>
            </div>
          </div>
          <div
            v-if="route.name == 'disciplineResult'"
            class="row q-col-gutter-sm"
          >
            <div class="col-12">
              <q-select
                v-model="store.formResult.respondentType"
                :options="store.complainantoptionsMain"
                option-label="name"
                option-value="id"
                outlined
                dense
                map-options
                emit-value
                clearable
                label="ผู้ถูกสอบสวน"
              >
              </q-select>
            </div>
            <div class="col-12">
              <q-select
                v-model="store.formResult.offenseDetails"
                :options="store.offenseDetailstOptions"
                option-label="name"
                option-value="id"
                outlined
                dense
                map-options
                emit-value
                clearable
                label="ลักษณะความผิด"
              >
              </q-select>
            </div>
            <div class="col-12">
              <q-select
                v-model="store.formResult.disciplinaryFaultLevel"
                :options="InvestigateDisStore.optionsfaultLevel"
                option-label="name"
                option-value="id"
                outlined
                dense
                map-options
                emit-value
                clearable
                label="ระดับโทษความผิด"
              >
              </q-select>
            </div>
            <div class="col-12">
              <q-input
                v-model="store.formResult.disciplinaryCaseFault"
                dense
                outlined
                label="กรณีความผิด"
              ></q-input>
            </div>
            <div class="col-12">
              <datepicker
                v-model="store.formResult.disciplinaryDate"
                :locale="'th'"
                autoApply
                borderless
                range
                :enableTimePicker="false"
                week-start="0"
                menu-class-name="modalfix"
              >
                <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="
                      store.formResult.disciplinaryDate != null
                        ? dateThaiRange(store.formResult.disciplinaryDate)
                        : null
                    "
                    :label="`${'วันที่สอบสวนเริ่มต้น-สิ้นสุด'}`"
                  >
                    <template v-slot:prepend>
                      <q-icon
                        name="event"
                        class="cursor-pointer"
                        style="color: var(--q-primary)"
                      >
                      </q-icon>
                    </template>
                    <template v-slot:append>
                      <q-icon
                        v-if="store.formResult.disciplinaryDate !== null"
                        name="clear"
                        class="cursor-pointer"
                        @click.prevent.stop="
                          store.formResult.disciplinaryDate = null
                        "
                      >
                      </q-icon>
                    </template>
                  </q-input>
                </template>
              </datepicker>
            </div>
            <div class="col-12">
              <q-input
                v-model="store.formResult.resultDisciplineType"
                dense
                outlined
                label="ประเภทวินัย"
              ></q-input>
            </div>
            <div class="col-12">
              <q-input
                v-model="store.formResult.resultTitleType"
                dense
                outlined
                label="ประเภทของเรื่อง"
              ></q-input>
            </div>
            <div class="col-12">
              <q-input
                v-model="store.formResult.resultOc"
                dense
                outlined
                label="หน่วยงาน/ส่วนราชการ"
              ></q-input>
            </div>
            <div class="col-12">
              <datepicker
                v-model="store.formResult.resultYear"
                class="col-2"
                :locale="'th'"
                autoApply
                year-picker
                :enableTimePicker="false"
              >
                <template #year="{ year }">{{ year + 543 }}</template>
                <template #year-overlay-value="{ value }">{{
                  parseInt(value + 543)
                }}</template>
                <template #trigger>
                  <q-input
                    dense
                    outlined
                    :model-value="
                      store.formResult.resultYear === null
                        ? null
                        : Number(store.formResult.resultYear) + 543
                    "
                    :label="`${'ปีงบประมาณ'}`"
                  >
                    <template v-slot:prepend>
                      <q-icon
                        name="event"
                        class="cursor-pointer"
                        style="color: var(--q-primary)"
                      >
                      </q-icon>
                    </template>
                    <template v-slot:append>
                      <q-icon
                        v-if="store.formResult.resultYear !== null"
                        name="clear"
                        class="cursor-pointer"
                        @click.prevent.stop="store.formResult.resultYear = null"
                      >
                      </q-icon>
                    </template>
                  </q-input>
                </template>
              </datepicker>
            </div>
          </div>
        </q-card-section>
        <q-separator />
        <q-card-actions align="right">
          <q-btn label="ค้นหา" color="secondary" type="submit"
            ><q-tooltip>ค้นหา</q-tooltip></q-btn
          >
        </q-card-actions>
      </q-form>
    </q-card>
  </q-dialog>
</template>