<template>
|
<div class="rule-selector">
|
<el-autocomplete v-model="inputValue" :fetch-suggestions="querySearch" placeholder="请输入任务描述"
|
:trigger-on-focus="true" value-key="fileName" @select="handleSelect" @blur="handleBlur" clearable
|
class="rule-input">
|
<template slot-scope="{ item }">
|
<div class="rule-item">
|
<!-- <div v-if="item.iconUrl" class="rule-icon">
|
<img :src="item.iconUrl" alt="icon" />
|
</div> -->
|
<div class="rule-text" v-html="highlightMatch(item.fileName)"></div>
|
</div>
|
</template>
|
</el-autocomplete>
|
</div>
|
</template>
|
|
<script>
|
export default {
|
name: 'RuleSelector',
|
props: {
|
selectedRule: {
|
type: Object,
|
default: null
|
},
|
// 初始化的规则列表
|
initialRules: {
|
type: Array,
|
default: () => [
|
]
|
}
|
},
|
data() {
|
return {
|
inputValue: this.selectedRule ? this.selectedRule.fileName : '', // 输入框的值
|
rules: [], // 规则列表（包含系统内置和新增）
|
searchTimeout: null,
|
currentQuery: ''
|
};
|
},
|
watch: {
|
selectedRule: {
|
immediate: true,
|
handler(newRule) {
|
if (newRule && newRule.fileName) {
|
this.inputValue = newRule.fileName;
|
} else {
|
this.inputValue = '';
|
}
|
}
|
},
|
initialRules: {
|
immediate: true,
|
handler(newVal) {
|
this.rules = [...newVal];
|
}
|
}
|
},
|
methods: {
|
// 查询匹配的规则
|
querySearch(queryString, cb) {
|
this.currentQuery = queryString;
|
clearTimeout(this.searchTimeout);
|
|
// 同步处理空查询场景
|
if (!queryString.trim()) {
|
cb([...this.rules]);
|
return;
|
}
|
|
// 仅对实际输入进行防抖
|
this.searchTimeout = setTimeout(() => {
|
const results = this.rules.filter(this.filterRule.bind(this, queryString));
|
cb(results);
|
}, 300);
|
},
|
|
// 过滤规则
|
filterRule(queryString, rule) {
|
return rule.warningRules.toLowerCase().includes(queryString.toLowerCase());
|
},
|
|
// 高亮匹配文本
|
highlightMatch(text) {
|
if (!this.currentQuery) return text;
|
|
const escapedQuery = this.currentQuery.replace(
|
/[.*+?^${}()|[\]\\]/g, '\\$&'
|
);
|
const regex = new RegExp(`(${escapedQuery})`, 'gi');
|
|
return text.replace(regex, '<span class="highlight">$1</span>');
|
},
|
|
// 选择规则
|
handleSelect(item) {
|
this.$emit('rule-selected', item);
|
},
|
|
// 处理输入框失焦
|
handleBlur() {
|
if (!this.inputValue) return;
|
|
// 检查是否已有相同规则
|
const existingRule = this.rules.find(
|
rule => rule.warningRules === this.inputValue
|
);
|
|
if (existingRule) {
|
this.handleSelect(existingRule);
|
return;
|
}
|
|
// 添加新规则
|
const newRule = {
|
ruleId: Date.now(), // 临时ID（实际应由服务器生成）
|
// fileName: `自定义规则-${new Date().toLocaleDateString()}`,
|
fileName: this.inputValue,
|
warningRules: this.inputValue,
|
iconUrl: '',
|
rangeValue: 50,
|
createTime: new Date().toISOString(),
|
createUser: 1 // 假设当前用户ID为1
|
};
|
|
this.rules.push(newRule);
|
this.$emit('rule-created', newRule);
|
}
|
}
|
};
|
</script>
|
|
<style scoped>
|
.rule-selector {
|
width: 100%;
|
}
|
|
.rule-input {
|
width: 100%;
|
}
|
|
.rule-item {
|
text-align: left;
|
display: flex;
|
align-items: center;
|
padding: 8px 0;
|
}
|
|
.rule-icon {
|
margin-right: 10px;
|
}
|
|
.rule-icon img {
|
width: 24px;
|
height: 24px;
|
border-radius: 4px;
|
object-fit: cover;
|
}
|
|
.rule-text {
|
flex: 1;
|
}
|
</style>
|
|
<style>
|
.highlight {
|
color: blue;
|
font-weight: bold;
|
}
|
</style>
|
