feat: ค้นหาตรงตัว
This commit is contained in:
puri-ph4tt
parent
65b05737fb
commit
2e54da99e1
2 changed files with 152 additions and 115 deletions
|
|
@ -1,4 +1,3 @@
|
|||
divdivdivdivdivdiv
|
||||
<script setup lang="ts">
|
||||
import { storeToRefs } from 'pinia'
|
||||
|
||||
|
|
@ -22,10 +21,12 @@ const props = defineProps<{
|
|||
AND: {
|
||||
field: string
|
||||
value: string
|
||||
exact: boolean
|
||||
}[]
|
||||
OR: {
|
||||
field: string
|
||||
value: string
|
||||
exact: boolean
|
||||
}[]
|
||||
}
|
||||
}>()
|
||||
|
|
@ -35,6 +36,7 @@ function addAdvSearchData() {
|
|||
op: 'AND',
|
||||
field: 'title',
|
||||
value: '',
|
||||
exact: false,
|
||||
})
|
||||
}
|
||||
function delAdvSearchData(index: number) {
|
||||
|
|
@ -47,6 +49,7 @@ function clearAdvSearchData() {
|
|||
op: 'AND',
|
||||
field: 'title',
|
||||
value: '',
|
||||
exact: false,
|
||||
},
|
||||
]
|
||||
advSearchDataField.value = {
|
||||
|
|
@ -71,7 +74,7 @@ function clearAdvSearchData() {
|
|||
</div>
|
||||
|
||||
<div v-if="isAdvSearchCall === true">
|
||||
<div class="column bg-white q-pa-sm">
|
||||
<div class="col 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" />
|
||||
|
|
@ -87,112 +90,123 @@ function clearAdvSearchData() {
|
|||
/>
|
||||
</div>
|
||||
|
||||
<div class="column q-px-lg">
|
||||
<div
|
||||
class="row q-px-lg items-center justify-start q-pb-md q-col-gutter-md"
|
||||
v-for="(item, index) in advSearchDataRow"
|
||||
:key="index"
|
||||
>
|
||||
<div
|
||||
class="row items-center q-pb-xs q-col-gutter-md"
|
||||
v-for="(item, index) in advSearchDataRow"
|
||||
:key="index"
|
||||
class="col-md-1 col-1 row content-center"
|
||||
style="width: 45px; height: 45px"
|
||||
>
|
||||
<div class="row content-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="submitSearch()"
|
||||
><template v-slot:append>
|
||||
<q-icon
|
||||
v-if="item.value"
|
||||
name="close"
|
||||
@click="() => (item.value = '')"
|
||||
class="cursor-pointer"
|
||||
/>
|
||||
</template>
|
||||
</q-input>
|
||||
</div>
|
||||
<div class="row content-center" style="width: 45px; height: 45px">
|
||||
<q-btn
|
||||
dense
|
||||
flat
|
||||
icon="mdi-trash-can-outline"
|
||||
v-if="advSearchDataRow.length > 1"
|
||||
color="red"
|
||||
@click="() => delAdvSearchData(index)"
|
||||
id="delAdvSearchData"
|
||||
/>
|
||||
</div>
|
||||
<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-md-grow col-grow">
|
||||
<q-input
|
||||
id="advSearchValue"
|
||||
dense
|
||||
outlined
|
||||
v-model="item.value"
|
||||
placeholder="เอกสาร"
|
||||
@keydown.enter.prevent="submitSearch()"
|
||||
><template v-slot:append>
|
||||
<q-icon
|
||||
v-if="item.value"
|
||||
name="close"
|
||||
@click="() => (item.value = '')"
|
||||
class="cursor-pointer"
|
||||
/>
|
||||
</template>
|
||||
</q-input>
|
||||
</div>
|
||||
<div class="col-md-1 q-mr-xl">
|
||||
<q-checkbox
|
||||
id="specificBox"
|
||||
style="width: 200%"
|
||||
v-model="item.exact"
|
||||
label="ค้นหาตรงตัว"
|
||||
color="grey"
|
||||
keep-color
|
||||
/>
|
||||
</div>
|
||||
<div class="row content-center">
|
||||
<q-btn
|
||||
dense
|
||||
flat
|
||||
icon="mdi-trash-can-outline"
|
||||
v-if="advSearchDataRow.length > 1"
|
||||
color="red"
|
||||
@click="() => delAdvSearchData(index)"
|
||||
id="delAdvSearchData"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<q-separator class="q-mb-md q-mt-sm" />
|
||||
<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="submitSearch()"
|
||||
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 class="row q-col-gutter-md q-pb-md q-pt-sm">
|
||||
<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="submitSearch()"
|
||||
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>
|
||||
|
|
|
|||
|
|
@ -16,6 +16,7 @@ const loaderStore = useLoader()
|
|||
const { isFilePreview } = storeToRefs(useFileInfoStore())
|
||||
const {
|
||||
foundFile,
|
||||
isExact,
|
||||
isSearch,
|
||||
isAdvSearchCall,
|
||||
isActFoundFile,
|
||||
|
|
@ -31,8 +32,8 @@ const optionsField = [
|
|||
{ label: 'เนื้อหาในไฟล์ (content)', value: 'attachment.content' },
|
||||
]
|
||||
const submitSearchData = ref<{
|
||||
AND: { field: string; value: string }[]
|
||||
OR: { field: string; value: string }[]
|
||||
AND: { field: string; value: string; exact: boolean }[]
|
||||
OR: { field: string; value: string; exact: boolean }[]
|
||||
}>({
|
||||
AND: [],
|
||||
OR: [],
|
||||
|
|
@ -40,7 +41,6 @@ const submitSearchData = ref<{
|
|||
const props = defineProps<{
|
||||
mode: 'admin' | 'user'
|
||||
}>()
|
||||
|
||||
const socket = io(import.meta.env.VITE_API_HOST)
|
||||
|
||||
socket.on('FileUpdate', (data: StorageFile) =>
|
||||
|
|
@ -68,36 +68,47 @@ async function submitSearch() {
|
|||
submitSearchData.value.OR.push({
|
||||
field: option.value,
|
||||
value: searchData.value.value,
|
||||
exact: true,
|
||||
})
|
||||
})
|
||||
submitSearchData.value.OR.push({
|
||||
field: 'fileName',
|
||||
value: searchData.value.value,
|
||||
exact: true,
|
||||
})
|
||||
submitSearchData.value.OR.push({
|
||||
field: 'fileType',
|
||||
value: mime.getType(searchData.value.value) || '',
|
||||
exact: true,
|
||||
})
|
||||
} else {
|
||||
submitSearchData.value.OR.push({
|
||||
field: searchData.value.field,
|
||||
value: searchData.value.value,
|
||||
exact: isExact.value,
|
||||
})
|
||||
if (isAdvSearchCall.value) {
|
||||
let advField = advSearchDataField.value
|
||||
let advRow = advSearchDataRow.value
|
||||
|
||||
advRow.forEach((d: { field: string; value: string; op: string }) => {
|
||||
if (d.field && d.value.trim() !== '') {
|
||||
const op = d.op === 'AND' ? 'AND' : 'OR'
|
||||
submitSearchData.value[op].push({ field: d.field, value: d.value })
|
||||
}
|
||||
})
|
||||
advRow.forEach(
|
||||
(d: { field: string; value: string; op: string; exact: boolean }) => {
|
||||
if (d.field && d.value.trim() !== '') {
|
||||
const op = d.op === 'AND' ? 'AND' : 'OR'
|
||||
submitSearchData.value[op].push({
|
||||
field: d.field,
|
||||
value: d.value,
|
||||
exact: d.exact,
|
||||
})
|
||||
}
|
||||
},
|
||||
)
|
||||
if (advField.keyword.length > 0) {
|
||||
for (let i = 0; i < advField.keyword.length; i++) {
|
||||
submitSearchData.value.AND.push({
|
||||
field: 'keyword',
|
||||
value: advField.keyword[i],
|
||||
exact: true,
|
||||
})
|
||||
}
|
||||
}
|
||||
|
|
@ -105,6 +116,7 @@ async function submitSearch() {
|
|||
submitSearchData.value.AND.push({
|
||||
field: 'description',
|
||||
value: advField.description,
|
||||
exact: true,
|
||||
})
|
||||
}
|
||||
}
|
||||
|
|
@ -116,6 +128,7 @@ async function submitSearch() {
|
|||
`${import.meta.env.VITE_API_ENDPOINT}/search`,
|
||||
submitSearchData.value,
|
||||
)
|
||||
|
||||
getFoundFile(res.data)
|
||||
isSearch.value = true
|
||||
} catch (error) {
|
||||
|
|
@ -133,7 +146,7 @@ watch(
|
|||
submitSearch()
|
||||
setTimeout(() => {
|
||||
isActFoundFile.value = false
|
||||
}, 300)
|
||||
}, 1000)
|
||||
}
|
||||
},
|
||||
)
|
||||
|
|
@ -206,11 +219,20 @@ watch(
|
|||
</template>
|
||||
</q-input>
|
||||
</div>
|
||||
<div>
|
||||
<q-checkbox
|
||||
id="specificBox"
|
||||
v-model="isExact"
|
||||
label="ค้นหาตรงตัว"
|
||||
color="grey"
|
||||
keep-color
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="column">
|
||||
<div class="col">
|
||||
<div class="row items-center justify-between q-gutter-y-md q-pt-sm">
|
||||
<div class="column col-grow">
|
||||
<div class="col-grow">
|
||||
<advanced-search
|
||||
:submitSearch="submitSearch"
|
||||
:submit-search-data="submitSearchData"
|
||||
|
|
@ -221,6 +243,7 @@ watch(
|
|||
style="width: 150px"
|
||||
color="primary"
|
||||
label="ค้นหา"
|
||||
class="q-mt-sm"
|
||||
icon="mdi-magnify"
|
||||
@click="submitSearch"
|
||||
id="submitSearch"
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue