|
|
|
@ -11,13 +11,31 @@ |
|
|
|
|
:disabled="isDisabled" |
|
|
|
|
@change="change" |
|
|
|
|
> |
|
|
|
|
<el-option |
|
|
|
|
v-for="(item, index) in list" |
|
|
|
|
:key="item.id + index" |
|
|
|
|
:label="item[config.labelKey]" |
|
|
|
|
:value="item[config.valueKey]" |
|
|
|
|
> |
|
|
|
|
</el-option> |
|
|
|
|
<template v-if="labelIsMore"> |
|
|
|
|
<el-option |
|
|
|
|
v-for="(item, index) in list" |
|
|
|
|
:key="item.id + index" |
|
|
|
|
:label=" |
|
|
|
|
item[config.labelKey[0]] + |
|
|
|
|
'(' + |
|
|
|
|
item[config.labelKey[1]] + |
|
|
|
|
'-' + |
|
|
|
|
item[config.labelKey[2]] + |
|
|
|
|
')' |
|
|
|
|
" |
|
|
|
|
:value="item[config.valueKey]" |
|
|
|
|
> |
|
|
|
|
</el-option> |
|
|
|
|
</template> |
|
|
|
|
<template> |
|
|
|
|
<el-option |
|
|
|
|
v-for="(item, index) in list" |
|
|
|
|
:key="index" |
|
|
|
|
:label="item[config.labelKey]" |
|
|
|
|
:value="item[config.valueKey]" |
|
|
|
|
> |
|
|
|
|
</el-option> |
|
|
|
|
</template> |
|
|
|
|
</el-select> |
|
|
|
|
</template> |
|
|
|
|
|
|
|
|
@ -37,6 +55,8 @@ export default { |
|
|
|
|
data() { |
|
|
|
|
return { |
|
|
|
|
text: "", |
|
|
|
|
labelIsMore: false, |
|
|
|
|
// labelKeyArr:[], |
|
|
|
|
list: [], |
|
|
|
|
isDisabled: false, |
|
|
|
|
}; |
|
|
|
@ -44,48 +64,68 @@ export default { |
|
|
|
|
watch: { |
|
|
|
|
"config.echoId": { |
|
|
|
|
handler(nval, oval) { |
|
|
|
|
this.list = []; |
|
|
|
|
// this.isDisabled = !!this.config.isDisabled; |
|
|
|
|
if (nval) { |
|
|
|
|
this.remoteMethod(this.config.echoName); |
|
|
|
|
let resultName = this.config.echoName.replace(/\s*/g, ""); |
|
|
|
|
if (!resultName) return; |
|
|
|
|
this.remoteMethod(resultName); |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
deep: true, |
|
|
|
|
immediate: true, |
|
|
|
|
}, |
|
|
|
|
"config.isDisabled": { |
|
|
|
|
handler(nval, oval) { |
|
|
|
|
let type = this.$utils.typeJudgment(nval); |
|
|
|
|
if (["Boolean", "String"].includes(type)) { |
|
|
|
|
this.isDisabled = !!this.config.isDisabled; |
|
|
|
|
} |
|
|
|
|
this.isDisabled = !!this.config.isDisabled; |
|
|
|
|
}, |
|
|
|
|
deep: true, |
|
|
|
|
immediate: true, |
|
|
|
|
}, |
|
|
|
|
}, |
|
|
|
|
created() { |
|
|
|
|
let { labelKey } = this.config; |
|
|
|
|
let type = this.$utils.typeJudgment(labelKey); |
|
|
|
|
// console.log(type); |
|
|
|
|
if (type === "Array") { |
|
|
|
|
// let |
|
|
|
|
this.labelIsMore = true; |
|
|
|
|
// console.log(this.labelIsMore); |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
methods: { |
|
|
|
|
// 远程搜索 |
|
|
|
|
remoteMethod(query) { |
|
|
|
|
if (query !== "") { |
|
|
|
|
this.loading = true; |
|
|
|
|
let params = {}; |
|
|
|
|
let type = this.$utils.typeJudgment(this.config.autocompleteKey); |
|
|
|
|
if (!type.includes("Object") && !type.includes("String")) return; |
|
|
|
|
|
|
|
|
|
if (type.includes("Object")) { |
|
|
|
|
let params = {}; |
|
|
|
|
if (["Object"].includes(type)) { |
|
|
|
|
params[this.config.autocompleteKey.key] = query; |
|
|
|
|
params["enableMark"] = this.config.autocompleteKey.enableMark; |
|
|
|
|
} |
|
|
|
|
if (type.includes("String")) { |
|
|
|
|
if (["String", "Undefined", "Null"].includes(type)) { |
|
|
|
|
// 接口为get类型时需将autocompleteKey值设为空 |
|
|
|
|
this.config.autocompleteKey |
|
|
|
|
? (params[this.config.autocompleteKey] = query) |
|
|
|
|
: (params["queryTypeGet"] = query); |
|
|
|
|
: (params = query); |
|
|
|
|
} |
|
|
|
|
this.config.serveTarget(params).then((res) => { |
|
|
|
|
let timeInstance = setTimeout(() => { |
|
|
|
|
this.loading = false; |
|
|
|
|
clearTimeout(timeInstance); |
|
|
|
|
if (res.data.length) { |
|
|
|
|
this.list = res.data; |
|
|
|
|
} else this.list = []; |
|
|
|
|
}, 1000 * Math.random()); |
|
|
|
|
this.loading = false; |
|
|
|
|
if (res.data.length) { |
|
|
|
|
this.list = res.data; |
|
|
|
|
} else this.list = []; |
|
|
|
|
}); |
|
|
|
|
} else { |
|
|
|
|
this.list = []; |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
change(val) { |
|
|
|
|
this.$emit("change", val); |
|
|
|
|
this.$emit("change", val, this.list); |
|
|
|
|
}, |
|
|
|
|
}, |
|
|
|
|
}; |
|
|
|
|