
javascript
<!--每个意愿最少5个字-->
<el-form-item label="客户意愿">
<el-select
style="width: 340px;"
multiple
v-model="form.intentionTags"
clearable
filterable
placeholder="请输入品牌名称"
@keyup.enter.native="handleEnterKey"
:loading="loading"
>
<el-option
v-for="item in dynamicOptions"
:key="item.id"
:label="item.tagContent"
:value="item.id">
</el-option>
</el-select>
<span style="margin-left: 10px; font-size: 12px; color: red;">(输入值后点击Enter可新增标签)</span>
</el-form-item>
/*标签部分-start*/
handleEnterKey(event) {
const inputValue = event.target.value.trim();
if (!inputValue) return;
if(inputValue.length < 5){
this.$message.warning('新增的标签至少5个字符');
return
}else if(inputValue.length > 15){
this.$message.warning('新增的标签最多15个字符');
return
}
// 检查是否已存在相同标签
const exists = this.dynamicOptions.some(
item => item.tagContent == inputValue
);
if (exists) {
this.$message.warning('该标签已存在');
event.target.value = ''; // 清空输入框
return;
}
// 调用新增标签接口
this.addNewTag(inputValue);
event.target.value = ''; // 清空输入框
},
async addNewTag(val){
try {
const response = await cxxxCreate({ tagContent: val});
if (response.data.code == '0') {
const newTag = response.data.data;
this.dynamicOptions.unshift(newTag);
this.$nextTick(function(){
this.form.intentionTags.unshift(newTag.id);
})
this.$message.success('标签添加成功');
} else {
this.$message.error(response.data.msg || '标签添加失败');
}
} catch (error) {
this.$message.error('标签添加失败');
}
},
loadBrandOptions(query) {
let params = {
tagContent: query
}
cxxxTagList(params).then(
response => {
this.dynamicOptions = response.data.data
}
);
},
/*标签部分-end*/