forked from github/dataease
feat: 搜索优化
This commit is contained in:
parent
ac8f71577b
commit
ab891386ce
@ -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))
|
||||||
|
@ -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))
|
||||||
}
|
}
|
||||||
|
@ -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))
|
||||||
}
|
}
|
||||||
|
@ -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);
|
||||||
|
@ -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))
|
||||||
|
Loading…
Reference in New Issue
Block a user