hrms-edm/Services/client/src/modules/01_user/components/AdvancedSearch.vue

divdivdivdivdivdiv
<script setup lang="ts">
import { ref } from 'vue'
import { storeToRefs } from 'pinia'

import { useSearchDataStore } from '@/stores/searched-data'

const { isAdvSearchCall } = storeToRefs(useSearchDataStore())
const optionsField = [
  { label: 'ชื่อเรื่อง (title)', value: 'title' },
  { label: 'คำสำคัญ (keyword)', value: 'keyword' },
]
const optionsOp = [
  { label: 'และ', value: 'AND' },
  { label: 'หรือ', value: 'OR' },
]
const advSearchDataRow = ref<
  {
    op: 'AND' | 'OR'
    field: 'title' | 'keyword'
    value: string
  }[]
>([
  {
    op: 'AND',
    field: 'title',
    value: '',
  },
])
const advSearchDataField = ref<{
  keyword: string
  description: string
}>({
  keyword: '',
  description: '',
})
const props = defineProps<{
  searchSubmit: Function
  submitSearchData: {
    AND: {
      field: string
      value: string
    }[]
    OR: {
      field: string
      value: string
    }[]
  }
}>()

defineExpose({
  advSearchDataRow,
  advSearchDataField,
})

function addAdvSearchData() {
  advSearchDataRow.value.push({
    op: 'AND',
    field: 'title',
    value: '',
  })
}
function delAdvSearchData(index: number) {
  advSearchDataRow.value.length > 1 && advSearchDataRow.value.splice(index, 1)
}
function clearAdvSearchData() {
  isAdvSearchCall.value = false
  advSearchDataRow.value = [
    {
      op: 'AND',
      field: 'title',
      value: '',
    },
  ]
  advSearchDataField.value = {
    keyword: '',
    description: '',
  }
}
</script>

<template>
  <div>
    <q-btn
      flat
      color="primary"
      icon="mdi-tools"
      label="ค้นหาขั้นสูง"
      class="q-mt-sm"
      style="width: 148px"
      v-if="isAdvSearchCall === false"
      @click="() => (isAdvSearchCall = true)"
    />
  </div>

  <div v-if="isAdvSearchCall === true">
    <div class="column bg-white q-pa-sm">
      <div class="row items-center justify-between q-pb-md">
        <span class="text-primary text-weight-medium q-pl-md q-pt-xs"
          ><q-icon name="mdi-tools" class="q-pr-sm" size="sm" />
          ค้นหาขั้นสูง</span
        >
        <q-btn
          flat
          dense
          color="red"
          icon="close"
          @click="clearAdvSearchData"
        />
      </div>

      <div class="column q-px-lg">
        <div
          class="row items-center q-pb-xs q-col-gutter-md"
          v-for="(item, index) in advSearchDataRow"
          :key="index"
        >
          <div class="row items-center" style="width: 45px; height: 45px">
            <q-btn
              dense
              color="teal"
              icon="mdi-plus"
              v-if="index === advSearchDataRow.length - 1"
              @click="addAdvSearchData"
            />
          </div>
          <div class="col-4 col-md-2">
            <q-select
              dense
              outlined
              emit-value
              map-options
              v-model="item.op"
              :options="optionsOp"
            />
          </div>
          <div class="col-grow col-md-3">
            <q-select
              dense
              outlined
              emit-value
              map-options
              v-model="item.field"
              :options="optionsField"
            />
          </div>
          <div class="col-grow">
            <q-input dense outlined v-model="item.value" placeholder="เอกสาร"
              ><template v-slot:append>
                <q-icon
                  name="close"
                  @click="() => (item.value = '')"
                  class="cursor-pointer"
                />
              </template>
            </q-input>
          </div>
          <div>
            <q-btn
              dense
              flat
              icon="mdi-trash-can-outline"
              color="red"
              @click="() => delAdvSearchData(index)"
            >
              <q-tooltip
                class="bg-red"
                anchor="top middle"
                self="bottom middle"
                :offset="[10, 10]"
                v-if="advSearchDataRow.length === 1"
              >
                <strong>ไม่สามารถลบได้</strong>
              </q-tooltip>
            </q-btn>
          </div>
        </div>

        <q-separator class="q-mb-md q-mt-sm" />

        <div class="row q-col-gutter-md q-pb-md">
          <div class="col-12 col-md-5">
            <q-input
              dense
              outlined
              placeholder="คำสำคัญ:"
              v-model="advSearchDataField.keyword"
            />
          </div>
          <div class="col-12 col-md-grow">
            <q-input
              dense
              outlined
              placeholder="รายละเอียด:"
              v-model="advSearchDataField.description"
            />
          </div>
        </div>
      </div>
    </div>
    <div class="row justify-end">
      <q-btn
        class="q-mt-md"
        style="width: 150px"
        color="primary"
        label="ค้นหา"
        icon="mdi-magnify"
        @click="() => props.searchSubmit()"
      />
    </div>
  </div>
</template>