fix: search component & data
This commit is contained in:
puri-ph4tt
Methapon2001
parent
6e77d30236
commit
231b203a23
2 changed files with 228 additions and 282 deletions
|
|
@ -1,7 +1,11 @@
|
|||
divdivdivdivdivdiv
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import { storeToRefs } from 'pinia'
|
||||
|
||||
const isAdvncSearchClick = ref<boolean>(false)
|
||||
import { useSearchDataStore } from '@/stores/searched-data'
|
||||
|
||||
const { isAdvSearchCall } = storeToRefs(useSearchDataStore())
|
||||
const optionsField = [
|
||||
{ label: 'ชื่อเรื่อง (title)', value: 'title' },
|
||||
{ label: 'คำสำคัญ (keyword)', value: 'keyword' },
|
||||
|
|
@ -10,23 +14,32 @@ const optionsOp = [
|
|||
{ label: 'และ', value: 'AND' },
|
||||
{ label: 'หรือ', value: 'OR' },
|
||||
]
|
||||
const advSearchData = ref<
|
||||
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<{
|
||||
field: string
|
||||
value: string
|
||||
keyword?: string
|
||||
description?: string
|
||||
searchSubmit: Function
|
||||
submitSearchData: {
|
||||
AND: {
|
||||
field?: string
|
||||
value?: string
|
||||
field: string
|
||||
value: string
|
||||
}[]
|
||||
OR: {
|
||||
field: string
|
||||
|
|
@ -36,185 +49,164 @@ const props = defineProps<{
|
|||
}>()
|
||||
|
||||
defineExpose({
|
||||
clearAdvData,
|
||||
advSearchData,
|
||||
advSearchDataRow,
|
||||
advSearchDataField,
|
||||
})
|
||||
|
||||
defineEmits([
|
||||
'update:field',
|
||||
'update:value',
|
||||
'update:keyword',
|
||||
'update:description',
|
||||
])
|
||||
|
||||
function addSearchData() {
|
||||
advSearchData.value.push({
|
||||
function addAdvSearchData() {
|
||||
advSearchDataRow.value.push({
|
||||
op: 'AND',
|
||||
field: 'title',
|
||||
value: '',
|
||||
})
|
||||
}
|
||||
|
||||
function clearAdvData() {
|
||||
advSearchData.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
|
||||
outline
|
||||
flat
|
||||
color="primary"
|
||||
icon="mdi-tools"
|
||||
label="ค้นหาขั้นสูง"
|
||||
@click="() => (isAdvncSearchClick = true)"
|
||||
class="q-mt-sm"
|
||||
style="width: 148px"
|
||||
v-if="isAdvSearchCall === false"
|
||||
@click="() => (isAdvSearchCall = true)"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<q-dialog v-model="isAdvncSearchClick">
|
||||
<q-card style="width: 1000px; max-width: 80vw">
|
||||
<q-toolbar class="bg-grey-1 q-py-sm q-px-lg">
|
||||
<q-toolbar-title>
|
||||
<span class="text-weight-bold">ค้นหาขั้นสูง</span>
|
||||
</q-toolbar-title>
|
||||
<q-btn flat round dense icon="close" v-close-popup color="red" />
|
||||
</q-toolbar>
|
||||
<q-separator />
|
||||
<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="col">
|
||||
<q-card-section class="row q-mt-sm">
|
||||
<div class="col">
|
||||
<div class="row q-col-gutter-md q-mb-md items-center">
|
||||
<div class="col-12 col-md-3">
|
||||
<q-select
|
||||
dense
|
||||
outlined
|
||||
emit-value
|
||||
map-options
|
||||
:options="optionsField"
|
||||
:model-value="props.field"
|
||||
@update:model-value="(value) => $emit('update:field', value)"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-12 col-md-8">
|
||||
<q-input
|
||||
dense
|
||||
outlined
|
||||
placeholder="เอกสาร"
|
||||
:model-value="props.value"
|
||||
@update:model-value="(value) => $emit('update:value', value)"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-1">
|
||||
<q-btn
|
||||
dense
|
||||
color="teal"
|
||||
icon="mdi-plus"
|
||||
v-if="advSearchData.length === 0"
|
||||
@click="addSearchData"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="row q-col-gutter-md q-mb-md items-center"
|
||||
v-for="(_, index) in advSearchData"
|
||||
>
|
||||
<div class="col-4 col-md-2">
|
||||
<q-select
|
||||
dense
|
||||
outlined
|
||||
emit-value
|
||||
map-options
|
||||
v-model="advSearchData[index].op"
|
||||
:options="optionsOp"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-8 col-md-3">
|
||||
<q-select
|
||||
dense
|
||||
outlined
|
||||
emit-value
|
||||
map-options
|
||||
v-model="advSearchData[index].field"
|
||||
:options="optionsField"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-12 col-md-6">
|
||||
<q-input
|
||||
dense
|
||||
outlined
|
||||
v-model="advSearchData[index].value"
|
||||
placeholder="เอกสาร"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-1">
|
||||
<q-btn
|
||||
dense
|
||||
color="teal"
|
||||
icon="mdi-plus"
|
||||
v-if="index === advSearchData.length - 1"
|
||||
@click="addSearchData"
|
||||
/>
|
||||
<q-btn
|
||||
dense
|
||||
flat
|
||||
icon="mdi-minus"
|
||||
color="red"
|
||||
v-if="index === advSearchData.length - 1"
|
||||
@click="() => advSearchData.pop()"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</q-card-section>
|
||||
|
||||
<q-card-section class="row q-mb-md">
|
||||
<div class="col">
|
||||
<span>อื่น ๆ</span>
|
||||
<q-separator class="q-mb-lg" />
|
||||
<div class="row q-col-gutter-md">
|
||||
<div class="col-12 col-md-3 q-gutter-y-sm">
|
||||
<span class="text-weight-bold">คำสำคัญ</span>
|
||||
<q-input
|
||||
dense
|
||||
outlined
|
||||
placeholder="กรอกคำสำคัญ"
|
||||
:model-value="props.keyword"
|
||||
@update:model-value="
|
||||
(value) => $emit('update:keyword', value)
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-12 col-md-4 q-gutter-y-sm">
|
||||
<span class="text-weight-bold">รายละเอียดของเอกสาร</span>
|
||||
<q-input
|
||||
dense
|
||||
outlined
|
||||
placeholder="กรอกรายละเอียด"
|
||||
:model-value="props.description"
|
||||
@update:model-value="
|
||||
(value) => $emit('update:description', value)
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</q-card-section>
|
||||
<q-separator />
|
||||
|
||||
<q-toolbar class="row justify-end">
|
||||
<div class="q-py-md">
|
||||
<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
|
||||
color="primary"
|
||||
label="ค้นหา"
|
||||
icon="mdi-magnify"
|
||||
v-close-popup
|
||||
@click="() => props.searchSubmit()"
|
||||
dense
|
||||
color="teal"
|
||||
icon="mdi-plus"
|
||||
v-if="index === advSearchDataRow.length - 1"
|
||||
@click="addAdvSearchData"
|
||||
/>
|
||||
</div>
|
||||
</q-toolbar>
|
||||
<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>
|
||||
</q-card>
|
||||
</q-dialog>
|
||||
</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>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue