220 lines
6 KiB
Vue
220 lines
6 KiB
Vue
divdivdivdivdivdiv
|
|
<script setup lang="ts">
|
|
import { storeToRefs } from 'pinia'
|
|
|
|
import { useSearchDataStore } from '@/stores/searched-data'
|
|
|
|
const { isAdvSearchCall, advSearchDataRow, advSearchDataField } =
|
|
storeToRefs(useSearchDataStore())
|
|
const optionsField = [
|
|
{ label: 'ชื่อเรื่อง (title)', value: 'title' },
|
|
{ label: 'คำสำคัญ (keyword)', value: 'keyword' },
|
|
{ label: 'หมวดหมู่ (category)', value: 'category' },
|
|
{ label: 'เนื้อหาในไฟล์ (content)', value: 'attachment.content' },
|
|
]
|
|
const optionsOp = [
|
|
{ label: 'และ', value: 'AND' },
|
|
{ label: 'หรือ', value: 'OR' },
|
|
]
|
|
const props = defineProps<{
|
|
searchSubmit: Function
|
|
submitSearchData: {
|
|
AND: {
|
|
field: string
|
|
value: string
|
|
}[]
|
|
OR: {
|
|
field: string
|
|
value: string
|
|
}[]
|
|
}
|
|
}>()
|
|
|
|
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"
|
|
id="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-5"
|
|
icon="mdi-plus"
|
|
v-if="index === advSearchDataRow.length - 1"
|
|
@click="addAdvSearchData"
|
|
id="addAdvSearchData"
|
|
/>
|
|
</div>
|
|
<div class="col-4 col-md-2">
|
|
<q-select
|
|
id="advSearchOp"
|
|
dense
|
|
outlined
|
|
emit-value
|
|
map-options
|
|
v-model="item.op"
|
|
:options="optionsOp"
|
|
/>
|
|
</div>
|
|
<div class="col-grow col-md-3">
|
|
<q-select
|
|
id="advSearchField"
|
|
dense
|
|
outlined
|
|
emit-value
|
|
map-options
|
|
v-model="item.field"
|
|
:options="optionsField"
|
|
/>
|
|
</div>
|
|
<div class="col-grow">
|
|
<q-input
|
|
id="advSearchValue"
|
|
dense
|
|
outlined
|
|
v-model="item.value"
|
|
placeholder="เอกสาร"
|
|
@keydown.enter.prevent="searchSubmit()"
|
|
><template v-slot:append>
|
|
<q-icon
|
|
v-if="item.value"
|
|
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)"
|
|
id="delAdvSearchData"
|
|
>
|
|
<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-select
|
|
outlined
|
|
dense
|
|
v-model="advSearchDataField.keyword"
|
|
use-input
|
|
use-chips
|
|
multiple
|
|
hide-dropdown-icon
|
|
input-debounce="0"
|
|
new-value-mode="add-unique"
|
|
><template v-slot:prepend
|
|
><span class="text-subtitle2">คำสำคัญ:</span></template
|
|
></q-select
|
|
>
|
|
</div>
|
|
<div class="col-12 col-md-grow">
|
|
<q-input
|
|
id="advSearchDes"
|
|
dense
|
|
outlined
|
|
@keydown.enter.prevent="searchSubmit()"
|
|
v-model="advSearchDataField.description"
|
|
><template v-slot:prepend
|
|
><span class="text-subtitle2">รายละเอียด:</span></template
|
|
><template v-slot:append>
|
|
<q-icon
|
|
v-if="advSearchDataField.description"
|
|
name="close"
|
|
@click="() => (advSearchDataField.description = '')"
|
|
class="cursor-pointer"
|
|
/> </template
|
|
></q-input>
|
|
</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()"
|
|
id="advSearchSubmit"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</template>
|