CN-1479 fix: 搜索组件text和tag模式交互添加枚举
This commit is contained in:
刘洪洪
@@ -40,7 +40,25 @@
|
||||
<div v-if="meta.operator.value === 'has'" class="condition__operator" style="color: #000C18">({{meta.column.label}},</div>
|
||||
<!-- 值 -->
|
||||
<div class="condition__value">
|
||||
<div v-if="meta.value.isEditing">
|
||||
<div v-if="meta.value.isEditing && meta.doc">
|
||||
<el-select
|
||||
allow-create
|
||||
filterable
|
||||
size="mini"
|
||||
v-model="meta.value.value"
|
||||
ref="columnValue"
|
||||
:placeholder="meta.value.value || ' '"
|
||||
@change="(value) => selectValue(value, meta)"
|
||||
>
|
||||
<el-option
|
||||
v-for="(code, i) in meta.doc.data"
|
||||
:key="i"
|
||||
:label="code.code"
|
||||
:value="code.code"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</div>
|
||||
<div v-if="meta.value.isEditing && !meta.doc">
|
||||
<!--避免blur事件和keyup.enter重复执行-->
|
||||
<el-input
|
||||
ref="valueInput"
|
||||
@@ -119,6 +137,7 @@ import _ from 'lodash'
|
||||
import { handleErrorTip } from '@/components/advancedSearch/meta/error'
|
||||
import Parser, { stringInQuot } from '@/components/advancedSearch/meta/parser'
|
||||
import { overwriteUrl, urlParamsHandler } from '@/utils/tools'
|
||||
import { enumerateData } from '@/utils/static-data'
|
||||
export default {
|
||||
name: 'TagMode',
|
||||
props: {
|
||||
@@ -222,6 +241,15 @@ export default {
|
||||
}, 200)
|
||||
}
|
||||
},
|
||||
selectValue (value, meta) {
|
||||
const isWrapped = this.isSingleQuoteWrapping(value)
|
||||
meta.value.value = isWrapped && meta.column.type === columnType.string ? value : `'${value}'`
|
||||
meta.value.label = isWrapped && meta.column.type === columnType.string ? value : `'${value}'`
|
||||
setTimeout(() => {
|
||||
meta.column.isEditing = false
|
||||
meta.value.isEditing = false
|
||||
}, 100)
|
||||
},
|
||||
selectConnection (value, meta) {
|
||||
meta.isEditing = false
|
||||
},
|
||||
@@ -279,6 +307,10 @@ export default {
|
||||
// 处理搜索值
|
||||
meta.value.isEditing = true
|
||||
meta.value.show = true
|
||||
const obj = enumerateData.find(d => d.name === meta.column.label)
|
||||
if (obj) {
|
||||
meta.doc = obj
|
||||
}
|
||||
// 若是in或not in，column的type要改成array，否则是string
|
||||
if (operator.toLowerCase().indexOf('in') > -1) {
|
||||
meta.column.type = columnType.array
|
||||
@@ -292,9 +324,16 @@ export default {
|
||||
}
|
||||
}
|
||||
this.$nextTick(() => {
|
||||
const selectList = this.$refs.valueInput
|
||||
if (selectList && selectList.length > 0) {
|
||||
this.$refs.valueInput[selectList.length - 1].focus() // 在for循环里生成的dom，所以是数组
|
||||
if (meta.doc) {
|
||||
const selectList = this.$refs.columnValue
|
||||
if (selectList && selectList.length > 0) {
|
||||
this.$refs.columnValue[selectList.length - 1].focus() // 在for循环里生成的dom，所以是数组
|
||||
}
|
||||
} else {
|
||||
const selectList = this.$refs.valueInput
|
||||
if (selectList && selectList.length > 0) {
|
||||
this.$refs.valueInput[selectList.length - 1].focus() // 在for循环里生成的dom，所以是数组
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
@@ -322,7 +322,7 @@ export default {
|
||||
}
|
||||
},
|
||||
_initComponent () {
|
||||
getDataset(this, this.queryParams || {}).then((dataset, dataDisposeFun) => {
|
||||
getDataset(this, this.queryParams || {}, this.columnList).then((dataset, dataDisposeFun) => {
|
||||
this.dataset = Object.freeze(dataset)
|
||||
}).catch(err => {
|
||||
console.error(err)
|
||||
|
||||
@@ -75,7 +75,7 @@ export default {
|
||||
const fields = this.getDataset().sourceData.fields
|
||||
const obj = fields.find(d => d.label === hintSearch)
|
||||
if (obj) {
|
||||
hintSearch = obj.name
|
||||
hintSearch = obj.label
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -221,7 +221,9 @@ export class Dataset {
|
||||
keywords = (keywords.trim && keywords.trim()) || keywords
|
||||
const fieldInfo = {}
|
||||
const matchItem = this.sourceData.filtersList.find((item) => {
|
||||
const itemName = item.name && item.name.toLowerCase()
|
||||
// const itemName = item.name && item.name.toLowerCase()
|
||||
// 左侧面板的options值，即枚举的值
|
||||
const itemName = item.label && item.label.toLowerCase()
|
||||
return keywords.toLowerCase() === itemName
|
||||
})
|
||||
if (!matchItem) {
|
||||
@@ -276,9 +278,9 @@ export class Dataset {
|
||||
}
|
||||
|
||||
// 获取数据集
|
||||
export function getDataset (component, params) {
|
||||
export function getDataset (component, params, list) {
|
||||
return new Promise((resolve, reject) => {
|
||||
const schemeInstance = new Scheme(component, params)
|
||||
const schemeInstance = new Scheme(component, params, list)
|
||||
schemeInstance.getFormatedData((schemeData) => {
|
||||
const dataset = new Dataset(schemeData)
|
||||
resolve(dataset, () => {
|
||||
|
||||
@@ -1,14 +1,74 @@
|
||||
// import vm from '@/main.js'
|
||||
import { getSchemaInfo } from '@/utils/timeQueryApi'
|
||||
import { cacheData } from '@/components/advancedSearch/showhint/packages/service/mockData'
|
||||
// import {cacheData} from "@/components/common/search/packages/service/oldMockData";
|
||||
|
||||
export class Scheme {
|
||||
constructor (context, params) {
|
||||
constructor (context, params, list) {
|
||||
// 先从缓存获取数据
|
||||
this.queryparams = params
|
||||
this.context = context
|
||||
this.columnList = list
|
||||
this.schemeData = null
|
||||
this.myCacheData = {
|
||||
doc: {
|
||||
functions: {
|
||||
aggregation: [],
|
||||
date: [],
|
||||
operator: [
|
||||
{
|
||||
name: '=',
|
||||
label: '=',
|
||||
function: 'expr = value'
|
||||
},
|
||||
{
|
||||
name: 'has',
|
||||
label: 'HAS',
|
||||
function: 'has(expr, value)'
|
||||
},
|
||||
{
|
||||
name: 'in',
|
||||
label: 'IN',
|
||||
function: 'expr in (values)'
|
||||
},
|
||||
{
|
||||
name: 'like',
|
||||
label: 'LIKE',
|
||||
function: 'expr like value'
|
||||
}
|
||||
]
|
||||
},
|
||||
schema_query: {
|
||||
references: {
|
||||
aggregation: [
|
||||
{
|
||||
type: 'int',
|
||||
functions: ''
|
||||
},
|
||||
{
|
||||
type: 'string',
|
||||
functions: ''
|
||||
},
|
||||
{
|
||||
type: 'array',
|
||||
functions: ''
|
||||
}
|
||||
],
|
||||
operator: [
|
||||
{
|
||||
type: 'int',
|
||||
functions: '=,in,like,has'
|
||||
},
|
||||
{
|
||||
type: 'string',
|
||||
functions: '=,in,like,has'
|
||||
},
|
||||
{
|
||||
type: 'array',
|
||||
functions: '=,in,like,has'
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
filterQueryData (list) {
|
||||
@@ -76,41 +136,12 @@ export class Scheme {
|
||||
return formatedData
|
||||
}
|
||||
|
||||
getRemoteOptions () {
|
||||
// query 查询地址 key 关键字(唯一标识) value 值就是label 用于展示
|
||||
this.schemeData.filtersList.forEach((item) => {
|
||||
if (item.doc && item.doc.data) {
|
||||
return
|
||||
}
|
||||
if (item.doc && item.doc.dict_location) {
|
||||
const { path, key, value } = item.doc.dict_location
|
||||
return vm.$get(path, { pageSize: 500, pageNo: 1 }).then((res) => {
|
||||
if (res.code === 200) {
|
||||
const dataList = res.data.list
|
||||
if (res.data.total > 500) {
|
||||
// 超出500条 直接不处理了 ,没缓存
|
||||
return
|
||||
}
|
||||
localStorage.setItem(`${this.context.$route.path}_${item.name}`, JSON.stringify(res.data.list))
|
||||
const data = dataList.map(item => {
|
||||
return {
|
||||
code: item[key],
|
||||
value: item[value]
|
||||
}
|
||||
})
|
||||
item.doc.data = data
|
||||
}
|
||||
}).catch((err) => {
|
||||
console.error(err)
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
async getFormatedData (callback) {
|
||||
const cacheDat = cacheData
|
||||
if (cacheDat) {
|
||||
this.schemeData = this.formatSchemaData(cacheDat)
|
||||
const cacheData = this.myCacheData
|
||||
cacheData.fields = this.columnList
|
||||
|
||||
if (this.columnList) {
|
||||
this.schemeData = this.formatSchemaData(cacheData)
|
||||
// this.getRemoteOptions()
|
||||
callback && callback(this.schemeData)
|
||||
return
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user