397 lines
14 KiB
Vue
397 lines
14 KiB
Vue
|
<!--
|
|||
|
|
=============================================================================
|
|||
|
|
企微IT智能服务台 — 排除规则新建/编辑表单对话框
|
|||
|
|
=============================================================================
|
|||
|
|
说明：
|
|||
|
|
- 支持 create / edit 两种模式
|
|||
|
|
- 匹配方式切换时，匹配条件输入框动态变化：
|
|||
|
|
keyword → 逗号分隔关键词输入
|
|||
|
|
regex → 正则表达式输入
|
|||
|
|
intent → 意图标识输入
|
|||
|
|
category → 问题分类输入
|
|||
|
|
- 命中动作 transfer_human / transfer_human_with_context 时，
|
|||
|
|
转人工提示语为必填；prompt_transfer 时选填；silent_transfer 时隐藏
|
|||
|
|
- 优先级 P0（最高）→ P3（最低），默认 P2
|
|||
|
|
- match_scope 多选，默认 ai_auto_reply
|
|||
|
|
-->
|
|||
|
|
<template>
|
|||
|
|
<el-dialog
|
|||
|
|
:model-value="visible"
|
|||
|
|
:title="mode === 'create' ? '新建排除规则' : '编辑排除规则'"
|
|||
|
|
width="640px"
|
|||
|
|
destroy-on-close
|
|||
|
|
@update:model-value="$emit('update:visible', $event)"
|
|||
|
|
@open="handleOpen"
|
|||
|
|
>
|
|||
|
|
<el-form
|
|||
|
|
ref="formRef"
|
|||
|
|
:model="formData"
|
|||
|
|
:rules="formRules"
|
|||
|
|
label-position="top"
|
|||
|
|
class="exclusion-form"
|
|||
|
|
>
|
|||
|
|
<!-- 规则名称 -->
|
|||
|
|
<el-form-item label="规则名称" prop="rule_name">
|
|||
|
|
<el-input
|
|||
|
|
v-model="formData.rule_name"
|
|||
|
|
placeholder="请输入规则名称，如：投诉类消息转人工"
|
|||
|
|
maxlength="200"
|
|||
|
|
show-word-limit
|
|||
|
|
/>
|
|||
|
|
</el-form-item>
|
|||
|
|
|
|||
|
|
<!-- 规则描述 -->
|
|||
|
|
<el-form-item label="规则描述">
|
|||
|
|
<el-input
|
|||
|
|
v-model="formData.rule_description"
|
|||
|
|
type="textarea"
|
|||
|
|
:rows="2"
|
|||
|
|
placeholder="可选，描述规则用途和命中场景"
|
|||
|
|
maxlength="500"
|
|||
|
|
/>
|
|||
|
|
</el-form-item>
|
|||
|
|
|
|||
|
|
<!-- 优先级 + 匹配方式 -->
|
|||
|
|
<div class="form-row">
|
|||
|
|
<el-form-item label="优先级" prop="priority" class="form-col">
|
|||
|
|
<el-select v-model="formData.priority" style="width: 100%">
|
|||
|
|
<el-option label="P0（最高）" value="P0" />
|
|||
|
|
<el-option label="P1（高）" value="P1" />
|
|||
|
|
<el-option label="P2（中）" value="P2" />
|
|||
|
|
<el-option label="P3（低）" value="P3" />
|
|||
|
|
</el-select>
|
|||
|
|
</el-form-item>
|
|||
|
|
|
|||
|
|
<el-form-item label="匹配方式" prop="match_type" class="form-col">
|
|||
|
|
<el-select v-model="formData.match_type" style="width: 100%" @change="handleMatchTypeChange">
|
|||
|
|
<el-option label="关键词" value="keyword" />
|
|||
|
|
<el-option label="正则表达式" value="regex" />
|
|||
|
|
<el-option label="意图识别" value="intent" />
|
|||
|
|
<el-option label="分类匹配" value="category" />
|
|||
|
|
</el-select>
|
|||
|
|
</el-form-item>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- 匹配条件 — 根据匹配方式动态展示 -->
|
|||
|
|
<el-form-item label="匹配条件" prop="match_condition">
|
|||
|
|
<!-- 关键词：逗号分隔 -->
|
|||
|
|
<template v-if="formData.match_type === 'keyword'">
|
|||
|
|
<el-input
|
|||
|
|
v-model="formData.match_condition"
|
|||
|
|
type="textarea"
|
|||
|
|
:rows="2"
|
|||
|
|
placeholder="多个关键词用逗号分隔，如：投诉,举报,差评,维权"
|
|||
|
|
/>
|
|||
|
|
<div class="form-hint">多个关键词用英文逗号分隔，消息中包含任一关键词即命中（不区分大小写）</div>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<!-- 正则表达式 -->
|
|||
|
|
<template v-else-if="formData.match_type === 'regex'">
|
|||
|
|
<el-input
|
|||
|
|
v-model="formData.match_condition"
|
|||
|
|
type="textarea"
|
|||
|
|
:rows="2"
|
|||
|
|
placeholder="输入正则表达式，如：^.*(投诉|举报).*$"
|
|||
|
|
/>
|
|||
|
|
<div class="form-hint">使用 Python re 语法，忽略大小写和多行模式。复杂正则设有 2 秒超时保护</div>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<!-- 意图识别 -->
|
|||
|
|
<template v-else-if="formData.match_type === 'intent'">
|
|||
|
|
<el-input
|
|||
|
|
v-model="formData.match_condition"
|
|||
|
|
placeholder="输入意图标识，如：complaint、refund_request"
|
|||
|
|
/>
|
|||
|
|
<div class="form-hint">
|
|||
|
|
系统通过 AI 意图识别模型判断消息意图，匹配此标识即命中。常用意图：complaint / refund_request / cancellation / escalation
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<!-- 分类匹配 -->
|
|||
|
|
<template v-else-if="formData.match_type === 'category'">
|
|||
|
|
<el-input
|
|||
|
|
v-model="formData.match_condition"
|
|||
|
|
placeholder="输入问题分类名称，如：网络故障、账号异常"
|
|||
|
|
/>
|
|||
|
|
<div class="form-hint">
|
|||
|
|
匹配会话最近一次智能分诊的问题分类。若无分诊记录则不命中
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
</el-form-item>
|
|||
|
|
|
|||
|
|
<!-- 匹配范围 -->
|
|||
|
|
<el-form-item label="匹配范围">
|
|||
|
|
<el-select
|
|||
|
|
v-model="formData.match_scope"
|
|||
|
|
multiple
|
|||
|
|
style="width: 100%"
|
|||
|
|
placeholder="选择生效场景"
|
|||
|
|
>
|
|||
|
|
<el-option label="AI自动回复" value="ai_auto_reply" />
|
|||
|
|
<el-option label="AI降级回复" value="ai_fallback" />
|
|||
|
|
</el-select>
|
|||
|
|
<div class="form-hint">选择该排除规则在哪些 AI 回复场景中生效</div>
|
|||
|
|
</el-form-item>
|
|||
|
|
|
|||
|
|
<!-- 命中动作 -->
|
|||
|
|
<el-form-item label="命中后动作" prop="action_type">
|
|||
|
|
<el-radio-group v-model="formData.action_type">
|
|||
|
|
<el-radio value="transfer_human">转人工</el-radio>
|
|||
|
|
<el-radio value="transfer_human_with_context">转人工（带上下文）</el-radio>
|
|||
|
|
<el-radio value="prompt_transfer">提示转人工</el-radio>
|
|||
|
|
<el-radio value="silent_transfer">静默转人工</el-radio>
|
|||
|
|
</el-radio-group>
|
|||
|
|
</el-form-item>
|
|||
|
|
|
|||
|
|
<!-- 转人工提示语 — 条件显示 -->
|
|||
|
|
<el-form-item
|
|||
|
|
v-if="formData.action_type !== 'silent_transfer'"
|
|||
|
|
:label="transferMessageLabel"
|
|||
|
|
:prop="formData.action_type === 'transfer_human' || formData.action_type === 'transfer_human_with_context' ? 'transfer_message' : undefined"
|
|||
|
|
>
|
|||
|
|
<el-input
|
|||
|
|
v-model="formData.transfer_message"
|
|||
|
|
type="textarea"
|
|||
|
|
:rows="2"
|
|||
|
|
:placeholder="transferMessagePlaceholder"
|
|||
|
|
maxlength="500"
|
|||
|
|
/>
|
|||
|
|
<div class="form-hint">{{ transferMessageHint }}</div>
|
|||
|
|
</el-form-item>
|
|||
|
|
</el-form>
|
|||
|
|
|
|||
|
|
<!-- 对话框底部 -->
|
|||
|
|
<template #footer>
|
|||
|
|
<el-button @click="$emit('update:visible', false)">取消</el-button>
|
|||
|
|
<el-button type="primary" :loading="submitting" @click="handleSubmit">
|
|||
|
|
{{ mode === 'create' ? '创建' : '保存' }}
|
|||
|
|
</el-button>
|
|||
|
|
</template>
|
|||
|
|
</el-dialog>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script setup lang="ts">
|
|||
|
|
// ==========================================================================
|
|||
|
|
// 依赖导入
|
|||
|
|
// ==========================================================================
|
|||
|
|
import { ref, reactive, computed, nextTick } from 'vue'
|
|||
|
|
import { ElMessage } from 'element-plus'
|
|||
|
|
import type { FormInstance, FormRules } from 'element-plus'
|
|||
|
|
import {
|
|||
|
|
createExclusionRule,
|
|||
|
|
updateExclusionRule,
|
|||
|
|
} from '@/api/exclusion'
|
|||
|
|
import type { ExclusionRule, ExclusionRuleFormData } from '@/api/exclusion'
|
|||
|
|
|
|||
|
|
// ==========================================================================
|
|||
|
|
// Props & Emits
|
|||
|
|
// ==========================================================================
|
|||
|
|
const props = defineProps<{
|
|||
|
|
visible: boolean
|
|||
|
|
mode: 'create' | 'edit'
|
|||
|
|
rule: ExclusionRule | null
|
|||
|
|
}>()
|
|||
|
|
|
|||
|
|
const emit = defineEmits<{
|
|||
|
|
(e: 'update:visible', value: boolean): void
|
|||
|
|
(e: 'success'): void
|
|||
|
|
}>()
|
|||
|
|
|
|||
|
|
// ==========================================================================
|
|||
|
|
// 表单引用
|
|||
|
|
// ==========================================================================
|
|||
|
|
const formRef = ref<FormInstance>()
|
|||
|
|
const submitting = ref<boolean>(false)
|
|||
|
|
|
|||
|
|
// ==========================================================================
|
|||
|
|
// 表单数据
|
|||
|
|
// ==========================================================================
|
|||
|
|
const formData = reactive<ExclusionRuleFormData>({
|
|||
|
|
rule_name: '',
|
|||
|
|
rule_description: '',
|
|||
|
|
priority: 'P2',
|
|||
|
|
match_type: 'keyword',
|
|||
|
|
match_condition: '',
|
|||
|
|
match_scope: ['ai_auto_reply'],
|
|||
|
|
action_type: 'transfer_human',
|
|||
|
|
transfer_message: '',
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
// ==========================================================================
|
|||
|
|
// 计算属性
|
|||
|
|
// ==========================================================================
|
|||
|
|
|
|||
|
|
/** 转人工提示语标签 */
|
|||
|
|
const transferMessageLabel = computed<string>(() => {
|
|||
|
|
if (formData.action_type === 'prompt_transfer') {
|
|||
|
|
return '提示文案'
|
|||
|
|
}
|
|||
|
|
return '转人工提示语'
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
/** 转人工提示语 placeholder */
|
|||
|
|
const transferMessagePlaceholder = computed<string>(() => {
|
|||
|
|
if (formData.action_type === 'prompt_transfer') {
|
|||
|
|
return '如：检测到您的问题可能需要人工协助，是否转接人工客服？'
|
|||
|
|
}
|
|||
|
|
return '如：您的问题已转接人工客服，请稍候'
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
/** 转人工提示语 hint */
|
|||
|
|
const transferMessageHint = computed<string>(() => {
|
|||
|
|
if (formData.action_type === 'prompt_transfer') {
|
|||
|
|
return '用户看到的提示消息，不会自动转人工'
|
|||
|
|
}
|
|||
|
|
return '命中后发送给用户的转接提示消息'
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
// ==========================================================================
|
|||
|
|
// 表单校验规则
|
|||
|
|
// ==========================================================================
|
|||
|
|
const formRules = reactive<FormRules>({
|
|||
|
|
rule_name: [
|
|||
|
|
{ required: true, message: '请输入规则名称', trigger: 'blur' },
|
|||
|
|
{ min: 1, max: 200, message: '规则名称长度 1-200 字符', trigger: 'blur' },
|
|||
|
|
],
|
|||
|
|
priority: [
|
|||
|
|
{ required: true, message: '请选择优先级', trigger: 'change' },
|
|||
|
|
],
|
|||
|
|
match_type: [
|
|||
|
|
{ required: true, message: '请选择匹配方式', trigger: 'change' },
|
|||
|
|
],
|
|||
|
|
match_condition: [
|
|||
|
|
{ required: true, message: '请输入匹配条件', trigger: 'blur' },
|
|||
|
|
],
|
|||
|
|
action_type: [
|
|||
|
|
{ required: true, message: '请选择命中后动作', trigger: 'change' },
|
|||
|
|
],
|
|||
|
|
transfer_message: [
|
|||
|
|
{
|
|||
|
|
validator: (_rule: any, value: string, callback: (error?: Error) => void) => {
|
|||
|
|
// transfer_human 和 transfer_human_with_context 时必填
|
|||
|
|
if (
|
|||
|
|
(formData.action_type === 'transfer_human' ||
|
|||
|
|
formData.action_type === 'transfer_human_with_context') &&
|
|||
|
|
(!value || !value.trim())
|
|||
|
|
) {
|
|||
|
|
callback(new Error('转人工动作需填写提示语'))
|
|||
|
|
} else {
|
|||
|
|
callback()
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
trigger: 'blur',
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
// ==========================================================================
|
|||
|
|
// 对话框打开 — 初始化表单数据
|
|||
|
|
// ==========================================================================
|
|||
|
|
function handleOpen(): void {
|
|||
|
|
if (props.mode === 'edit' && props.rule) {
|
|||
|
|
// 编辑模式：填充已有数据
|
|||
|
|
formData.rule_name = props.rule.rule_name
|
|||
|
|
formData.rule_description = props.rule.rule_description || ''
|
|||
|
|
formData.priority = props.rule.priority
|
|||
|
|
formData.match_type = props.rule.match_type
|
|||
|
|
formData.match_condition = props.rule.match_condition
|
|||
|
|
formData.match_scope = props.rule.match_scope?.length ? [...props.rule.match_scope] : ['ai_auto_reply']
|
|||
|
|
formData.action_type = props.rule.action_type
|
|||
|
|
formData.transfer_message = props.rule.transfer_message || ''
|
|||
|
|
} else {
|
|||
|
|
// 新建模式：重置为默认值
|
|||
|
|
formData.rule_name = ''
|
|||
|
|
formData.rule_description = ''
|
|||
|
|
formData.priority = 'P2'
|
|||
|
|
formData.match_type = 'keyword'
|
|||
|
|
formData.match_condition = ''
|
|||
|
|
formData.match_scope = ['ai_auto_reply']
|
|||
|
|
formData.action_type = 'transfer_human'
|
|||
|
|
formData.transfer_message = ''
|
|||
|
|
}
|
|||
|
|
// 清除校验状态
|
|||
|
|
nextTick(() => {
|
|||
|
|
formRef.value?.clearValidate()
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// ==========================================================================
|
|||
|
|
// 匹配方式切换 — 清空匹配条件
|
|||
|
|
// ==========================================================================
|
|||
|
|
function handleMatchTypeChange(): void {
|
|||
|
|
formData.match_condition = ''
|
|||
|
|
nextTick(() => {
|
|||
|
|
formRef.value?.clearValidate('match_condition')
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// ==========================================================================
|
|||
|
|
// 提交表单
|
|||
|
|
// ==========================================================================
|
|||
|
|
async function handleSubmit(): Promise<void> {
|
|||
|
|
if (!formRef.value) return
|
|||
|
|
|
|||
|
|
try {
|
|||
|
|
await formRef.value.validate()
|
|||
|
|
} catch {
|
|||
|
|
return // 校验未通过
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
submitting.value = true
|
|||
|
|
try {
|
|||
|
|
// 构建提交数据
|
|||
|
|
const submitData: ExclusionRuleFormData = {
|
|||
|
|
rule_name: formData.rule_name.trim(),
|
|||
|
|
rule_description: formData.rule_description?.trim() || undefined,
|
|||
|
|
priority: formData.priority,
|
|||
|
|
match_type: formData.match_type,
|
|||
|
|
match_condition: formData.match_condition.trim(),
|
|||
|
|
match_scope: formData.match_scope,
|
|||
|
|
action_type: formData.action_type,
|
|||
|
|
transfer_message: formData.transfer_message?.trim() || undefined,
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (props.mode === 'create') {
|
|||
|
|
await createExclusionRule(submitData)
|
|||
|
|
ElMessage.success('规则创建成功')
|
|||
|
|
} else {
|
|||
|
|
await updateExclusionRule(props.rule!.id, submitData)
|
|||
|
|
ElMessage.success('规则更新成功')
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
emit('success')
|
|||
|
|
} catch (error: any) {
|
|||
|
|
// Axios 拦截器已统一弹窗，此处仅记录日志
|
|||
|
|
console.error('提交排除规则失败:', error)
|
|||
|
|
} finally {
|
|||
|
|
submitting.value = false
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style scoped>
|
|||
|
|
.exclusion-form {
|
|||
|
|
max-height: 60vh;
|
|||
|
|
overflow-y: auto;
|
|||
|
|
padding-right: 8px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 双列表单行 */
|
|||
|
|
.form-row {
|
|||
|
|
display: flex;
|
|||
|
|
gap: 16px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.form-col {
|
|||
|
|
flex: 1;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 表单提示文字 */
|
|||
|
|
.form-hint {
|
|||
|
|
font-size: 12px;
|
|||
|
|
color: var(--text-muted, #909399);
|
|||
|
|
line-height: 1.5;
|
|||
|
|
margin-top: 4px;
|
|||
|
|
}
|
|||
|
|
</style>
|