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>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue