104 lines
2.6 KiB
Vue
104 lines
2.6 KiB
Vue
<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"
|
|
>
|
|
<el-option
|
|
v-for="(item, index) in list"
|
|
:key="item.id + index"
|
|
:label="item[config.labelKey]"
|
|
:value="item[config.valueKey]"
|
|
>
|
|
</el-option>
|
|
</el-select>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
props: {
|
|
params: Object,
|
|
config: Object,
|
|
// config: {
|
|
// serveTarget: {}, // 远程搜索接口
|
|
// autocompleteKey: "", //远程搜索接口参数名
|
|
// labelKey: "", //接口返回数据label名
|
|
// valueKey: "", //接口返回数据唯一值
|
|
// querykey: "", //查询接口参数名
|
|
// },
|
|
},
|
|
data() {
|
|
return {
|
|
text: "",
|
|
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,
|
|
},
|
|
},
|
|
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 (type.includes("Object")) {
|
|
params[this.config.autocompleteKey.key] = query;
|
|
params["enableMark"] = this.config.autocompleteKey.enableMark;
|
|
}
|
|
if (
|
|
type.includes("String") ||
|
|
type.includes("Undefined") ||
|
|
type.includes("Null")
|
|
) {
|
|
// 接口为get类型时需将autocompleteKey值设为空
|
|
console.log();
|
|
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);
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped></style>
|