138 lines
3.5 KiB
138 lines
3.5 KiB
<template> |
|
<el-select |
|
v-model="params[config.querykey]" |
|
filterable |
|
remote |
|
clearable |
|
reserve-keyword |
|
:placeholder="config.placeholder" |
|
:remote-method="remoteMethod" |
|
@clear="list = []" |
|
:disabled="isDisabled" |
|
@change="change" |
|
> |
|
<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="item.id + index" |
|
:label="item[config.labelKey]" |
|
:value="item[config.valueKey]" |
|
> |
|
</el-option> |
|
</template> |
|
</el-select> |
|
</template> |
|
|
|
<script> |
|
export default { |
|
props: { |
|
params: Object, |
|
config: Object, |
|
// config: { |
|
// serveTarget: {}, // 远程搜索接口 |
|
// autocompleteKey: "", //远程搜索接口参数名 |
|
// labelKey: "", //接口返回数据label名 |
|
// valueKey: "", //接口返回数据唯一值 |
|
// querykey: "", //查询接口参数名 |
|
// }, |
|
}, |
|
data() { |
|
return { |
|
text: "", |
|
labelIsMore: false, |
|
// labelKeyArr:[], |
|
list: [], |
|
isDisabled: false, |
|
}; |
|
}, |
|
watch: { |
|
"config.echoId": { |
|
handler(nval, oval) { |
|
this.list = []; |
|
// this.isDisabled = !!this.config.isDisabled; |
|
if (nval) { |
|
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; |
|
} |
|
}, |
|
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 type = this.$utils.typeJudgment(this.config.autocompleteKey); |
|
// if (!type.includes("Object") && !type.includes("String")) { |
|
// this.loading = false; |
|
// this.$message.warning("config.autocompleteKey格式有误"); |
|
// return; |
|
// } |
|
let params = {}; |
|
if (["Object"].includes(type)) { |
|
params[this.config.autocompleteKey.key] = query; |
|
params["enableMark"] = this.config.autocompleteKey.enableMark; |
|
} |
|
if (["String", "Undefined", "Null"].includes(type)) { |
|
// 接口为get类型时需将autocompleteKey值设为空 |
|
this.config.autocompleteKey |
|
? (params[this.config.autocompleteKey] = query) |
|
: (params = query); |
|
} |
|
this.config.serveTarget(params).then((res) => { |
|
this.loading = false; |
|
if (res.data.length) { |
|
this.list = res.data; |
|
} else this.list = []; |
|
}); |
|
} else { |
|
this.list = []; |
|
} |
|
}, |
|
change(val) { |
|
this.$emit("change", val, this.list); |
|
}, |
|
}, |
|
}; |
|
</script> |
|
|
|
<style lang="scss" scoped></style>
|
|
|