94 lines
2.4 KiB
Vue
94 lines
2.4 KiB
Vue
<template>
|
||
<el-select
|
||
v-model="innerValue"
|
||
:placeholder="placeholder"
|
||
:clearable="clearable"
|
||
:filterable="filterable"
|
||
:remote="remote"
|
||
:remote-method="remoteSearch"
|
||
:loading="loading"
|
||
:disabled="disabled"
|
||
style="width: 100%"
|
||
@change="handleChange"
|
||
>
|
||
<el-option
|
||
v-for="item in optionList"
|
||
:key="item[valueKey]"
|
||
:label="formatLabel(item)"
|
||
:value="item[valueKey]"
|
||
/>
|
||
</el-select>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
name: 'PlatformEntitySelect',
|
||
props: {
|
||
value: { type: [String, Number], default: null },
|
||
loader: { type: Function, required: true },
|
||
placeholder: { type: String, default: '请选择' },
|
||
valueKey: { type: String, default: 'id' },
|
||
labelKey: { type: String, default: 'name' },
|
||
subLabelKey: { type: String, default: '' },
|
||
query: { type: Object, default: () => ({}) },
|
||
clearable: { type: Boolean, default: true },
|
||
filterable: { type: Boolean, default: true },
|
||
remote: { type: Boolean, default: true },
|
||
disabled: { type: Boolean, default: false },
|
||
},
|
||
data() {
|
||
return {
|
||
innerValue: this.value,
|
||
loading: false,
|
||
optionList: [],
|
||
};
|
||
},
|
||
watch: {
|
||
value(value) {
|
||
this.innerValue = value;
|
||
},
|
||
query: {
|
||
deep: true,
|
||
handler() {
|
||
this.loadOptions();
|
||
},
|
||
},
|
||
},
|
||
created() {
|
||
this.loadOptions();
|
||
},
|
||
methods: {
|
||
loadOptions(keyword) {
|
||
this.loading = true;
|
||
const params = Object.assign({ pageNum: 1, pageSize: 100 }, this.query);
|
||
if (keyword) {
|
||
params.keyword = keyword;
|
||
params.name = keyword;
|
||
params.platformName = keyword;
|
||
params.channelName = keyword;
|
||
params.flowName = keyword;
|
||
}
|
||
this.loader(params).then(response => {
|
||
this.optionList = response.rows || response.data || [];
|
||
this.loading = false;
|
||
}).catch(() => {
|
||
this.loading = false;
|
||
});
|
||
},
|
||
remoteSearch(keyword) {
|
||
this.loadOptions(keyword);
|
||
},
|
||
formatLabel(item) {
|
||
const main = item[this.labelKey] || item.name || item.label || item[this.valueKey];
|
||
const sub = this.subLabelKey ? item[this.subLabelKey] : '';
|
||
return sub ? `${main}（${sub}）` : main;
|
||
},
|
||
handleChange(value) {
|
||
const selected = this.optionList.find(item => item[this.valueKey] === value);
|
||
this.$emit('input', value);
|
||
this.$emit('change', value, selected);
|
||
},
|
||
},
|
||
};
|
||
</script>
|