feat: 搜索优化

This commit is contained in:
junjie 2021-08-02 19:26:28 +08:00
parent ac8f71577b
commit ab891386ce
5 changed files with 65 additions and 19 deletions

View File

@ -1256,8 +1256,8 @@ export default {
fieldFilter(val) { fieldFilter(val) {
if (val && val !== '') { if (val && val !== '') {
this.dimensionData = JSON.parse(JSON.stringify(this.dimension.filter(ele => { return ele.name.includes(val) }))) this.dimensionData = JSON.parse(JSON.stringify(this.dimension.filter(ele => { return ele.name.toLocaleLowerCase().includes(val.toLocaleLowerCase()) })))
this.quotaData = JSON.parse(JSON.stringify(this.quota.filter(ele => { return ele.name.includes(val) }))) this.quotaData = JSON.parse(JSON.stringify(this.quota.filter(ele => { return ele.name.toLocaleLowerCase().includes(val.toLocaleLowerCase()) })))
} else { } else {
this.dimensionData = JSON.parse(JSON.stringify(this.dimension)) this.dimensionData = JSON.parse(JSON.stringify(this.dimension))
this.quotaData = JSON.parse(JSON.stringify(this.quota)) this.quotaData = JSON.parse(JSON.stringify(this.quota))

View File

@ -33,7 +33,7 @@
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item class="form-item" v-if="mode === '1'"> <el-form-item v-if="mode === '1'" class="form-item">
<el-select v-model="syncType" filterable :placeholder="$t('dataset.connect_mode')" size="mini"> <el-select v-model="syncType" filterable :placeholder="$t('dataset.connect_mode')" size="mini">
<el-option :label="$t('dataset.sync_now')" value="sync_now" /> <el-option :label="$t('dataset.sync_now')" value="sync_now" />
<el-option :label="$t('dataset.sync_latter')" value="sync_latter" /> <el-option :label="$t('dataset.sync_latter')" value="sync_latter" />
@ -100,7 +100,7 @@ export default {
}, },
searchTable(val) { searchTable(val) {
if (val && val !== '') { if (val && val !== '') {
this.tableData = JSON.parse(JSON.stringify(this.tables.filter(ele => { return ele.name.includes(val) }))) this.tableData = JSON.parse(JSON.stringify(this.tables.filter(ele => { return ele.name.toLocaleLowerCase().includes(val.toLocaleLowerCase()) })))
} else { } else {
this.tableData = JSON.parse(JSON.stringify(this.tables)) this.tableData = JSON.parse(JSON.stringify(this.tables))
} }

View File

@ -202,7 +202,7 @@ export default {
}, },
search(val) { search(val) {
if (val && val !== '') { if (val && val !== '') {
this.tableData = JSON.parse(JSON.stringify(this.tables.filter(ele => { return ele.name.includes(val) }))) this.tableData = JSON.parse(JSON.stringify(this.tables.filter(ele => { return ele.name.toLocaleLowerCase().includes(val.toLocaleLowerCase()) })))
} else { } else {
this.tableData = JSON.parse(JSON.stringify(this.tables)) this.tableData = JSON.parse(JSON.stringify(this.tables))
} }

View File

@ -55,19 +55,26 @@
</el-row> </el-row>
</el-col> </el-col>
<el-col :span="10" style="height: 100%;border-left: 1px solid #E6E6E6;"> <el-col :span="10" style="height: 100%;border-left: 1px solid #E6E6E6;">
<el-col :span="12" style="height: 100%"> <el-col :span="12" style="height: 100%" class="padding-lr">
<span>{{ $t('dataset.click_ref_field') }}</span> <span>{{ $t('dataset.click_ref_field') }}</span>
<div class="padding-lr field-height"> <el-input
v-model="searchField"
size="mini"
:placeholder="$t('dataset.search')"
prefix-icon="el-icon-search"
clearable
/>
<div class="field-height">
<span>{{ $t('chart.dimension') }}</span> <span>{{ $t('chart.dimension') }}</span>
<draggable <draggable
v-model="tableFields.dimensionList" v-model="dimensionData"
:options="{group:{name: 'drag',pull:'clone'},sort: true}" :options="{group:{name: 'drag',pull:'clone'},sort: true}"
animation="300" animation="300"
class="drag-list" class="drag-list"
:disabled="true" :disabled="true"
> >
<transition-group> <transition-group>
<span v-for="item in tableFields.dimensionList.filter(ele => ele.extField === 0)" :key="item.id" class="item-dimension" :title="item.name" @click="insertParamToCodeMirror('['+item.id+']')"> <span v-for="item in dimensionData" :key="item.id" class="item-dimension" :title="item.name" @click="insertParamToCodeMirror('['+item.id+']')">
<svg-icon v-if="item.deType === 0" icon-class="field_text" class="field-icon-text" /> <svg-icon v-if="item.deType === 0" icon-class="field_text" class="field-icon-text" />
<svg-icon v-if="item.deType === 1" icon-class="field_time" class="field-icon-time" /> <svg-icon v-if="item.deType === 1" icon-class="field_time" class="field-icon-time" />
<svg-icon v-if="item.deType === 2 || item.deType === 3" icon-class="field_value" class="field-icon-value" /> <svg-icon v-if="item.deType === 2 || item.deType === 3" icon-class="field_value" class="field-icon-value" />
@ -77,17 +84,17 @@
</transition-group> </transition-group>
</draggable> </draggable>
</div> </div>
<div class="padding-lr field-height"> <div class="field-height">
<span>{{ $t('chart.quota') }}</span> <span>{{ $t('chart.quota') }}</span>
<draggable <draggable
v-model="tableFields.quotaList" v-model="quotaData"
:options="{group:{name: 'drag',pull:'clone'},sort: true}" :options="{group:{name: 'drag',pull:'clone'},sort: true}"
animation="300" animation="300"
class="drag-list" class="drag-list"
:disabled="true" :disabled="true"
> >
<transition-group> <transition-group>
<span v-for="item in tableFields.quotaList.filter(ele => ele.extField === 0)" :key="item.id" class="item-quota" :title="item.name" @click="insertParamToCodeMirror('['+item.id+']')"> <span v-for="item in quotaData" :key="item.id" class="item-quota" :title="item.name" @click="insertParamToCodeMirror('['+item.id+']')">
<svg-icon v-if="item.deType === 0" icon-class="field_text" class="field-icon-text" /> <svg-icon v-if="item.deType === 0" icon-class="field_text" class="field-icon-text" />
<svg-icon v-if="item.deType === 1" icon-class="field_time" class="field-icon-time" /> <svg-icon v-if="item.deType === 1" icon-class="field_time" class="field-icon-time" />
<svg-icon v-if="item.deType === 2 || item.deType === 3" icon-class="field_value" class="field-icon-value" /> <svg-icon v-if="item.deType === 2 || item.deType === 3" icon-class="field_value" class="field-icon-value" />
@ -98,11 +105,18 @@
</draggable> </draggable>
</div> </div>
</el-col> </el-col>
<el-col :span="12" style="height: 100%"> <el-col :span="12" style="height: 100%" class="padding-lr">
<span>{{ $t('dataset.click_ref_function') }}</span> <span>{{ $t('dataset.click_ref_function') }}</span>
<el-row class="padding-lr function-height"> <el-input
v-model="searchFunction"
size="mini"
:placeholder="$t('dataset.search')"
prefix-icon="el-icon-search"
clearable
/>
<el-row class="function-height">
<el-popover <el-popover
v-for="(item,index) in functions" v-for="(item,index) in functionData"
:key="index" :key="index"
class="function-pop" class="function-pop"
placement="right" placement="right"
@ -205,7 +219,12 @@ export default {
{ label: this.$t('dataset.value') + '(' + this.$t('dataset.float') + ')', value: 3 }, { label: this.$t('dataset.value') + '(' + this.$t('dataset.float') + ')', value: 3 },
{ label: this.$t('dataset.location'), value: 5 } { label: this.$t('dataset.location'), value: 5 }
], ],
functions: [] functions: [],
searchField: '',
searchFunction: '',
dimensionData: [],
quotaData: [],
functionData: []
} }
}, },
computed: { computed: {
@ -222,6 +241,26 @@ export default {
this.initField() this.initField()
}, },
deep: true deep: true
},
'tableFields': function() {
this.dimensionData = JSON.parse(JSON.stringify(this.tableFields.dimensionList)).filter(ele => ele.extField === 0)
this.quotaData = JSON.parse(JSON.stringify(this.tableFields.quotaList)).filter(ele => ele.extField === 0)
},
'searchField': function(val) {
if (val && val !== '') {
this.dimensionData = JSON.parse(JSON.stringify(this.tableFields.dimensionList.filter(ele => ele.name.toLocaleLowerCase().includes(val.toLocaleLowerCase()) && ele.extField === 0)))
this.quotaData = JSON.parse(JSON.stringify(this.tableFields.quotaList.filter(ele => ele.name.toLocaleLowerCase().includes(val.toLocaleLowerCase()) && ele.extField === 0)))
} else {
this.dimensionData = JSON.parse(JSON.stringify(this.tableFields.dimensionList)).filter(ele => ele.extField === 0)
this.quotaData = JSON.parse(JSON.stringify(this.tableFields.quotaList)).filter(ele => ele.extField === 0)
}
},
'searchFunction': function(val) {
if (val && val !== '') {
this.functionData = JSON.parse(JSON.stringify(this.functions.filter(ele => { return ele.func.toLocaleLowerCase().includes(val.toLocaleLowerCase()) })))
} else {
this.functionData = JSON.parse(JSON.stringify(this.functions))
}
} }
}, },
mounted() { mounted() {
@ -230,6 +269,8 @@ export default {
}) })
this.initFunctions() this.initFunctions()
this.initField() this.initField()
this.dimensionData = JSON.parse(JSON.stringify(this.tableFields.dimensionList)).filter(ele => ele.extField === 0)
this.quotaData = JSON.parse(JSON.stringify(this.tableFields.quotaList)).filter(ele => ele.extField === 0)
}, },
methods: { methods: {
onCmReady(cm) { onCmReady(cm) {
@ -253,6 +294,7 @@ export default {
initFunctions() { initFunctions() {
post('/dataset/function/listByTableId/' + this.param.id, null).then(response => { post('/dataset/function/listByTableId/' + this.param.id, null).then(response => {
this.functions = response.data this.functions = response.data
this.functionData = JSON.parse(JSON.stringify(this.functions))
}) })
}, },
@ -292,6 +334,10 @@ export default {
size: 0, size: 0,
extField: 2 extField: 2
} }
this.dimensionData = []
this.quotaData = []
this.searchField = ''
this.searchFunction = ''
} }
} }
} }
@ -322,7 +368,7 @@ export default {
} }
.padding-lr { .padding-lr {
padding: 0 6px; padding: 0 4px;
} }
.field-height{ .field-height{
height: calc(50% - 20px); height: calc(50% - 20px);

View File

@ -354,8 +354,8 @@ export default {
filterField(val) { filterField(val) {
if (val && val !== '') { if (val && val !== '') {
this.tableFields.dimensionListData = JSON.parse(JSON.stringify(this.tableFields.dimensionListData.filter(ele => { return ele.name.includes(val) }))) this.tableFields.dimensionListData = JSON.parse(JSON.stringify(this.tableFields.dimensionListData.filter(ele => { return ele.name.toLocaleLowerCase().includes(val.toLocaleLowerCase()) })))
this.tableFields.quotaListData = JSON.parse(JSON.stringify(this.tableFields.quotaList.filter(ele => { return ele.name.includes(val) }))) this.tableFields.quotaListData = JSON.parse(JSON.stringify(this.tableFields.quotaList.filter(ele => { return ele.name.toLocaleLowerCase().includes(val.toLocaleLowerCase()) })))
} else { } else {
this.tableFields.dimensionListData = JSON.parse(JSON.stringify(this.tableFields.dimensionList)) this.tableFields.dimensionListData = JSON.parse(JSON.stringify(this.tableFields.dimensionList))
this.tableFields.quotaListData = JSON.parse(JSON.stringify(this.tableFields.quotaList)) this.tableFields.quotaListData = JSON.parse(JSON.stringify(this.tableFields.quotaList))