feat(规则模型): 添加模型条件和关键词选择功能

- 新增模型条件表单验证和关键词选择功能
- 优化模型条件编辑和删除逻辑
- 添加模型名称和规则时效的必填项提示
- 修复模型列表选择和条件保存的bug

src/views/rules/models.vue

         <div class="mb-4">
           <div class="relative">
             <input type="text" v-model="searchQuery" placeholder="搜索模型"
-              class="w-full pl-10 pr-4 py-2 text-sm border rounded-lg focus:outline-none focus:border-blue-500" @keydown.enter="doSearch"/>
+              class="w-full pl-10 pr-4 py-2 text-sm border rounded-lg focus:outline-none focus:border-blue-500"
+              @keydown.enter="doSearch" />
             <el-icon class="absolute left-3 top-2.5 text-gray-400" style="position: absolute;">
               <Search />
             </el-icon>
         </div>
         <div v-if="modelList.length" class="h-[calc(100vh-180px)] overflow-y-auto" ref="cardListRef" @scroll="doScroll">
           <div v-for="(model, index) in modelList" :key="index" :class="[
-              'p-3 mb-2 rounded-lg cursor-pointer relative group',
-              selectedModel === index
-                ? 'bg-blue-50 border border-blue-500'
-                : 'hover:bg-gray-50',
-            ]" @click="selectModel(index)">
+            'p-3 mb-2 rounded-lg cursor-pointer relative group',
+            selectedModel === index
+              ? 'bg-blue-50 border border-blue-500'
+              : 'hover:bg-gray-50',
+          ]" @click="selectModel(index)">
             <div class="text-sm font-medium">{{ model.ruleName }}</div>
             <div class="text-xs text-gray-500 mt-1">
               最后更新: {{ model.updatedAt }}
               </el-icon>
               <template #dropdown>
                 <el-dropdown-menu>
-                  <el-dropdown-item style="color: red;">删除</el-dropdown-item>
+                  <el-dropdown-item style="color: red;" @click="deleteModel(model)">删除</el-dropdown-item>
                   <!-- <el-dropdown-item>The Action 2st</el-dropdown-item>
                   <el-dropdown-item>The Action 3st</el-dropdown-item> -->
                 </el-dropdown-menu>
       <!-- 右侧添加条件抽屉 -->
       <div class="flex-1 overflow-hidden">
         <el-drawer v-model="showConditionDrawer" title="添加条件" size="40%">
-          <el-form :model="conditionForm" label-width="100px">
-            <el-form-item label="条件分类">
+          <el-form :model="conditionForm" :rules="formRules" label-width="100px" ref="conditionFormRef">
+            <el-form-item label="条件分类" prop="type">
               <el-select v-model="conditionForm.type" placeholder="请选择条件分类">
-                <el-option label="基础检测" value="基础检测" />
-                <el-option label="通话质量检测" value="通话质量检测" />
+                <el-option v-for="item in conditionTypes" :key="item.name" :label="item.name" :value="item.name" />
               </el-select>
             </el-form-item>
-            <el-form-item label="条件名称">
+            <el-form-item label="条件名称" prop="name">
               <el-select v-model="conditionForm.name" placeholder="请选择条件名称">
-                <el-option label="开场白" value="开场白" />
-                <el-option label="结束语" value="结束语" />
-                <el-option label="音量" value="音量" />
+                <el-option v-for="item in conditionOptions" :key="item" :label="item" :value="item" />
               </el-select>
             </el-form-item>
-            <el-form-item label="开场白">
-              <div v-for="(greeting, index) in conditionForm.greetings" :key="index" class="mb-2">
-                <div class="flex items-center">
-                  <el-input v-model="conditionForm.greetings[index]" :placeholder="`请输入开场白${index + 1}`" class="flex-1" style="width: 500px;"/>
-                  <el-button type="danger" @click="removeGreeting(index)" :icon="Delete" circle class="ml-2" />
-                  <el-button v-if="index === conditionForm.greetings.length - 1" @click="addGreeting" :icon="Plus" circle class="ml-2" />
-                </div>
-              </div>
-              <!-- <el-button type="primary" @click="addGreeting">添加开场白</el-button> -->
+
+            <el-form-item label="关键词" prop="keywords">
+              <el-select v-model="conditionForm.keywords" multiple filterable placeholder="请选择关键词"
+                style="width: 500px;">
+                <el-option v-for="item in keywordOptions" :key="item.id" :label="item.term" :value="item.id" />
+              </el-select>
             </el-form-item>
-            <el-form-item label="分值">
+            <el-form-item label="分值" prop="score">
               <div class="flex items-center">
-                <el-slider v-model="conditionForm.score" :max="100" class="flex-1 mr-4" style="width: 400px;"/>
+                <el-slider v-model="conditionForm.score" :max="100" class="flex-1 mr-4" style="width: 400px;" />
                 <el-input-number v-model="conditionForm.score" :min="0" :max="100" />
               </div>
             </el-form-item>
-            <el-form-item label="加减类型">
+            <el-form-item label="加减类型" prop="operation">
               <el-select v-model="conditionForm.operation" placeholder="请选择加减类型">
-                <el-option label="加分项" value="加分项" />
-                <el-option label="减分项" value="减分项" />
+                <el-option label="加分项" value="0" />
+                <el-option label="减分项" value="1" />
               </el-select>
             </el-form-item>
+            <el-form-item label="加减分频次" prop="frequency">
+              <el-input v-model="conditionForm.frequency" style="max-width: 600px" placeholder="请输入数字，0表示仅一次">
+                <template #prepend>每出现</template>
+                <template #append>
+                  {{ `${conditionForm.operation === '1' ? '减' : '加'}${conditionForm.score || 0}分`
+                  }}
+                </template>
+              </el-input>
+            </el-form-item>
+            <el-form-item v-if="conditionForm.name === '音量'" label="正常音量">
+              <el-slider v-model="conditionForm.volumeRange" range :min="100" :max="500" style="width: 400px;"
+                :marks="volumeMarks" />
+            </el-form-item>
+            <el-form-item v-if="conditionForm.name === '语速'" label="正常语速">
+              <el-slider v-model="conditionForm.speedRange" range :min="100" :max="500" style="width: 400px;"
+                :marks="speedMarks" />
+            </el-form-item>
             <el-form-item label="是否预警">
               <el-switch v-model="conditionForm.warning" />
             </el-form-item>
             <el-form-item label="是否致命">
-              <el-switch v-model="conditionForm.warning" />
+              <el-switch v-model="conditionForm.fatal" />
             </el-form-item>
           </el-form>
           <div class="flex justify-end mt-4">
             <el-button type="primary" @click="saveCondition">保存</el-button>
           </div>
         </el-drawer>
-        <div class="bg-white rounded-lg shadow-sm p-6 h-full overflow-y-auto">
+        <div v-if="selectedModel >= 0" class="bg-white rounded-lg shadow-sm p-6 h-full overflow-y-auto">
           <!-- 操作按钮 -->
           <div class="absolute mt-6 right-8">
-            <el-button @click="cancel">取消</el-button>
-            <el-button type="primary" @click="save">保存</el-button>
+            <!-- <el-button @click="cancel">取消</el-button> -->
+            <el-button type="primary" @click="submit">保存</el-button>
           </div>
           <!-- 基本信息 -->
           <div class="mb-6">
             </div>
             <div class="flex items-center gap-6 mb-4">
               <div class="flex-1">
-                <label class="block text-sm mb-2">模型名称</label>
-                <el-input v-model="currentModel.ruleName" placeholder="请输入模型名称" />
+                <label class="block text-sm mb-2"><span class="text-red-500">*</span>模型名称</label>
+                <el-input v-model="currentModel.ruleName" placeholder="请输入模型名称" clearable @blur="changeRuleName"/>
               </div>
               <div class="flex-1">
-                <label class="block text-sm mb-2">规则时效</label>
+                <label class="block text-sm mb-2"><span class="text-red-500">*</span>规则时效</label>
                 <el-date-picker v-model="currentModel.effectiveDate" type="daterange" range-separator="至"
-                  start-placeholder="开始日期" end-placeholder="结束日期" class="w-full" />
+                  start-placeholder="开始日期" end-placeholder="结束日期" class="w-full" clearable/>
               </div>
             </div>
           </div>
+
           <!-- 模型条件 -->
           <div>
             <div class="flex items-center justify-between mb-4">
-              <h2 class="text-lg font-medium">模型条件</h2>
+              <h2 class="text-lg font-medium"><span class="text-red-500">*</span>模型条件</h2>
               <el-button type="primary" @click="addCondition">
                 <el-icon class="mr-1">
                   <Plus />
             <el-table :data="currentModel.conditions" stripe>
               <el-table-column prop="type" label="条件分类" width="140" />
               <el-table-column prop="name" label="条件名称" />
-              <el-table-column prop="operation" label="加减分项" width="140" />
-              <el-table-column prop="warning" label="是否预警" width="140" />
-              <el-table-column prop="fatal" label="是否致命" width="140" />
-              <el-table-column prop="frequency" label="加减分频次" width="140" />
+              <el-table-column prop="operation" label="加减分项" width="140">
+                <template #default="{ row }">
+                  <span :class="row.operation? 'text-red-500' : 'text-gray-500'">
+                    {{ row.operation? '减分项' : '加分项' }}
+                  </span>
+                </template>
+              </el-table-column>
+              <el-table-column prop="warning" label="是否预警" width="140">
+                <template #default="{ row }">
+                  <span :class="row.warning ? 'text-red-500' : 'text-gray-500'">
+                    {{ row.warning ? '预警' : '非预警' }}
+                  </span>
+                </template>
+              </el-table-column>
+              <el-table-column prop="fatal" label="是否致命" width="140">
+                <template #default="{ row }">
+                  <span :class="row.fatal ? 'text-red-500' : 'text-gray-500'">
+                    {{ row.f ? '致命' : '非致命' }}
+                  </span>
+                </template>
+              </el-table-column>
+              <el-table-column prop="frequency" label="加减分频次" width="140">
+                <template #default="{ row }">
+                  <span>
+                    {{ row.frequency ? `每出现${row.frequency}次${row.operation === '1' ? '减' : '加'}${row.score || 0}分` :
+                    `出现多次仅${row.operation === '1' ? '减' : '加'}${row.score || 0}分`
+                    }}
+                  </span>
+                </template>
+              </el-table-column>
               <el-table-column prop="score" label="分值" width="100" />
               <el-table-column label="操作" fixed="right" width="120">
-                <template #default="{ row }">
+                <template #default="{ row, $index }">
                   <el-button type="primary" :icon="Edit" circle class="mr-2" @click="editCondition(row)" />
-                  <el-button type="danger" :icon="Delete" circle @click="deleteCondition(row)" />
+                  <el-button type="danger" :icon="Delete" circle @click="deleteCondition($index, row)" />
                 </template>
               </el-table-column>
             </el-table>
-            <!-- <div class="mt-4 text-sm text-gray-500">
-              <span>共 {{ currentModel.conditions.length }} 条</span>
-            </div> -->
           </div>
 
-          
+
+        </div>
+
+        <div v-else class="h-[calc(100vh-180px)]">
+          <el-empty :image-size="200" description="请选择模型"/>
         </div>
 
       </div>
   </div>
 </template>
 <script lang="ts" setup name="RuleModel">
-import { ref, onMounted } from 'vue';
+import { ref, onMounted, watch, nextTick } from 'vue';
 import { Edit, Delete, Search, Plus, MoreFilled } from '@element-plus/icons-vue';
 import moment from 'moment';
 import { createPageData, getPageListData, editPageData, deletePageData } from '@/api/main/system/system';
+import { ElMessage, ElMessageBox } from 'element-plus';
 
 const searchQuery = ref('');
-const selectedModel = ref(0);
+const selectedModel = ref(-1);
 const currentPage = ref(1);
 const pageSize = 10;
 const cardListRef = ref(null);
 const modelList: any = ref([]);
+const volumeMarks = {
+  260: '标准',
+}
+const speedMarks = {
+  260: '标准',
+}
 const currentModel: any = ref({
   id: 0,
   ruleName: '',
   conditions: [],
 });
 const selectModel = (index: number) => {
+  if (!modelList.value?.length) return;
   selectedModel.value = index;
+  currentModel.value = modelList.value[index];
+  currentModel.value.conditions = [];
+  if (currentModel.value.startTime && currentModel.value.endTime) {
+    currentModel.value.effectiveDate = [
+      moment(currentModel.value.startTime),
+      moment(currentModel.value.endTime)
+    ];
+  }
+
+  getCases();
 };
+
+// 获取条件
+const getCases = async () => {
+  if (selectedModel.value < 0) return;
+  // 获取模型案例逻辑
+  const res = await getPageListData(`/quality/scoringCriteria`, {
+    rulesId: currentModel.value.id,
+  });
+  if (res?.data?.length) {
+    console.log('模型案例', res.data)
+    currentModel.value.conditions = res.data.map((item: any) => {
+      return {
+        id: item.id,
+        rulesId: item.rulesId,
+        type: item.conditionCategory,
+        name: item.conditionName,
+        score: item.score,
+        frequency: item.frequency,
+        keywords: item.content,
+        operation: item.scoreType + '',
+        warning: item.isAlert === 1,
+        fatal: item.isCritical === 1,
+        speedRange: [item.minValue, item.maxValue],
+        volumeRange: [item.minValue, item.maxValue],
+      }
+    });
+  }
+}
+
 const showConditionDrawer = ref(false);
 
 const addGreeting = () => {
   conditionForm.value.greetings.splice(index, 1);
 };
 
-const getModelCases = async () => {
+const getModelCases = async (name = '') => {
+  if (conditionTypes.value?.length) return;
   // 获取模型案例逻辑
   const res = await getPageListData(`/quality/qcresult/getInspectionRulesType`, {});
   if (res?.data?.length) {
     console.log('模型案例', res.data)
+    conditionTypes.value = res.data;
+    if (conditionTypes.value.length) {
+      const selectedType = conditionTypes.value.find(item => name ? item.name === res.data[0].name : item.name === name);
+      conditionOptions.value = selectedType ? selectedType.Condition : [];
+    }
+    
+  }
+
+}
+
+const getWords = async () => {
+  if (keywordOptions.value?.length) return;
+  // 获取模型案例逻辑
+  const res = await getPageListData(`/quality/searchLexicon`, {
+    type: 1,
+  });
+  if (res?.data?.length) {
+    keywordOptions.value = res.data;
   }
-  
 }
 
-const conditionForm: any = ref({});
+const conditionFormRef = ref();
+const formRules = {
+  type: [{ required: true, message: '请选择条件分类', trigger: 'change' }],
+  name: [{ required: true, message: '请选择条件名称', trigger: 'change' }],
+  keywords: [{ required: true, message: '请选择关键词', trigger: 'change' }],
+  score: [{ required: true, message: '请设置分值', trigger: 'change' }],
+  operation: [{ required: true, message: '请选择加减类型', trigger: 'change' }]
+};
+const conditionForm: any = ref({
+  volumeRange: [250, 300],
+});
 
 const addCondition = async () => {
+  getModelCases();
+  getWords();
   showConditionDrawer.value = true;
-
-  // 获取可用条件列表
-  await getModelCases();
   conditionForm.value = {
     type: '',
     name: '',
-    greetings: [''] as string[],
     score: 0,
-    operation: '',
-    warning: false
+    operation: '1',
+    warning: false,
+    fatal: false,
+    // min: 0,
+    // max: 100,
+    frequency: 1,
+    volumeRange: [250, 300],
+    speedRange: [250, 300],
+    keywords: [],
   };
 };
-const editCondition = (row: any) => {
-  // 编辑条件逻辑
+const editCondition = async (row: any) => {
+  console.log('editCondition', row)
+  await getWords();
+  
+  await getModelCases(row.type);
+  nextTick(() => {
+    showConditionDrawer.value = true;
+    conditionForm.value = row;
+    console.log('conditionForm.value', row)
+    conditionForm.value.keywords = row.keywords?.length ? row.keywords.split(',').map(o => Number(o)) : [];
+  })
+  
 };
 
 const getPageList = async () => {
     pageNum: currentPage.value,
     pageSize: pageSize,
   };
-  const {data} = await getPageListData(`/quality/inspectionRules`, params);
+  const { data } = await getPageListData(`/quality/inspectionmodel`, params);
   if (data?.length) {
     modelList.value = modelList.value.concat(data);
+
+    if (selectedModel.value === -1 && modelList.value.length) {
+      // selectedModel.value = 0;
+      // currentModel.value = modelList.value[0];
+      selectModel(0);
+    }
   }
 }
 
 
 const addModel = () => {
   const time = moment().format('YYYY-MM-DD HH:mm:ss');
+
+  // 判断是否存在新模型
+  const index = modelList.value.findIndex((item: any) => item.ruleName === '新模型');
+  if (index >=0) {
+    ElMessage.error('请先保存之前的新模型');
+    return;
+  }
   modelList.value.unshift({
     ruleName: '新模型',
     updatedAt: time,
   });
+
+  selectedModel.value = 0;
   currentModel.value = {
     ruleName: '新模型',
-  createdAt: time,
-  effectiveDate: [],
-  conditions: [
-    {
-      type: '基础检测',
-      name: '开场白',
-      operation: '减分项',
-      warning: '预警',
-      fatal: '致命',
-      frequency: '触发多次加减分一次',
-      score: 5,
-    },
-    {
-      type: '基础检测',
-      name: '结束语',
-      operation: '减分项',
-      warning: '不预警',
-      fatal: '不致命',
-      frequency: '触发多次加减分一次',
-      score: 5,
-    },
-    {
-      type: '通话质量检测',
-      name: '音量',
-      operation: '减分项',
-      warning: '不预警',
-      fatal: '不致命',
-      frequency: '触发多次加减分一次',
-      score: 5,
-    },
-  ],
+    createdAt: time,
+    effectiveDate: [],
+    conditions: [
+      
+    ],
   }
 }
 
 onMounted(() => {
   getPageList()
 })
+const conditionTypes = ref([
+  // {
+  //   Condition: ["开场白", "结束语"],
+  //   name: "基础检测"
+  // },
+  // {
+  //   Condition: ["清晰度", "打断客户", "答复不清", "脏话辱骂"],
+  //   name: "服务态度检测"
+  // },
+  // {
+  //   Condition: ["音量", "语速"],
+  //   name: "通话质量检测"
+  // }
+]);
+
+const conditionOptions = ref<string[]>([]);
+
+// 监听条件分类变化
+watch(() => conditionForm.value.type, (newVal) => {
+  const selectedType = conditionTypes.value.find(item => item.name === newVal);
+  conditionOptions.value = selectedType ? selectedType.Condition : [];
+  if (conditionForm.value.name && !conditionOptions.value.includes(conditionForm.value.name)) {
+    conditionForm.value.name = ''; // 重置条件名称
+  }
+});
+
+const saveCondition = async () => {
+  try {
+    await conditionFormRef.value.validate();
+    const condition = {
+      id: conditionForm.value.id || '',
+      type: conditionForm.value.type,
+      name: conditionForm.value.name,
+      keywords: conditionForm.value.keywords.join(','), // 将id数组转为逗号分隔的字符串
+      // 如果需要同时保存关键词文本，可以添加：
+      keywordTerms: conditionForm.value.keywords.map(
+        id => keywordOptions.value.find(item => item.id === id)?.term || ''
+      ).join(','),
+      operation: conditionForm.value.operation,
+      warning: conditionForm.value.warning,
+      fatal: conditionForm.value.fatal,
+      frequency: conditionForm.value.frequency,
+      score: conditionForm.value.score,
+    };
+
+    // 如果是编辑模式，找到原条件并更新
+    const existingIndex = currentModel.value.conditions.findIndex(
+      (item: any) =>
+        item.type === conditionForm.value.type &&
+        item.name === conditionForm.value.name
+    );
+
+    if (existingIndex !== -1) {
+      currentModel.value.conditions[existingIndex] = condition;
+    } else {
+      currentModel.value.conditions.push(condition);
+    }
+
+    showConditionDrawer.value = false;
+  } catch (error) {
+    console.log('表单验证失败:', error);
+    return;
+  }
+};
+const deleteCondition = async (index: number, row: any) => {
+  
+  if (row.id) {
+    const res: any = await deletePageData(`/quality/scoringCriteria/${row.id}`);
+    console.log('删除', res)
+    if (res.state !== 'success') return;
+  }
+console.log('deleteCondition', index, row)
+  if (index !== -1) {
+    currentModel.value.conditions.splice(index, 1);
+  }
+  ElMessage.success('删除成功');
+};
+// 关键词选项数据 - 修改为 id/term 格式
+const keywordOptions = ref([
+  // { id: 1, term: '关键词1' },
+  // { id: 2, term: '关键词2' },
+  // { id: 3, term: '关键词3' },
+  // { id: 4, term: '关键词4' },
+]);
+
+const submit = async () => {
+  // 提交逻辑
+  console.log('提交', currentModel.value)
+  
+  const params: any = {
+    ruleName: currentModel.value.ruleName,
+    // effectiveDate: currentModel.value.effectiveDate,
+    scoringCriteria: [],
+  }
+
+  if (currentModel.value.effectiveDate && currentModel.value.effectiveDate.length === 2) {
+    params.startTime = moment(currentModel.value.effectiveDate[0]).format('YYYY-MM-DD HH:mm:ss');
+    params.endTime = moment(currentModel.value.effectiveDate[1]).format('YYYY-MM-DD HH:mm:ss');
+  }
+
+  if (!currentModel.value.conditions?.length) {
+    // 提示添加
+    ElMessage.error('请添加模型条件');
+    return;
+  }
+
+  for (const info of currentModel.value.conditions) {
+    const newInfo: any = {
+      id: info.id,
+      conditionCategory: info.type,
+      conditionName: info.name,
+      operation: info.operation,
+      isAlert: info.warning ? 1 : 0,
+      isCritical: info.fatal ? 1 : 0,
+      // rulesId: info.rulesId,
+      frequency: info.frequency,
+      score: info.score,
+      content: info.keywords,
+      type: 1,
+    };
+    if (info.name === '音量' && info.volumeRange && info.volumeRange.length === 2) {
+      newInfo.minValue = info.volumeRange[0];
+      newInfo.maxValue = info.volumeRange[1];   
+    }
+
+    if (info.name === '语速' && info.speedRange && info.speedRange.length === 2) {
+      newInfo.minValue = info.speedRange[0];
+      newInfo.maxValue = info.speedRange[1];
+    }
+    params.scoringCriteria.push(newInfo)
+  }
+  console.log('提交', params)
+
+  if (currentModel.value.id) {
+    params.id = currentModel.value.id;
+    const res: any = await editPageData(`/quality/inspectionmodel`, params);
+    if (res?.state === 'success') {
+      ElMessage.success('修改成功');
+      currentModel.value.updatedAt = moment().format('YYYY-MM-DD HH:mm:ss');
+      getCases();
+    }
+  } else {
+    const res: any = await createPageData(`/quality/inspectionmodel`, params);
+    console.log('提交', res)
+    if (res?.state === 'success') {
+      ElMessage.success('提交成功');
+      currentModel.value.id = res?.data.id;
+      currentModel.value.updatedAt = moment().format('YYYY-MM-DD HH:mm:ss');
+      getCases();
+    }
+  }
+  
+}
+
+const changeRuleName = () => {
+  // 更改左侧列表的名字
+  const index = modelList.value.findIndex((item: any) => item.id === currentModel.value.id);
+  if (index >= 0) {
+    modelList.value[index].ruleName = currentModel.value.ruleName;
+  }
+}
+
+const deleteModel = async (model) => {
+
+  ElMessageBox.confirm('确认删除该模型吗？', '提示', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning'
+  }).then(async () => {
+    if (model.id) {
+      const res: any = await deletePageData(`/quality/inspectionmodel/${model.id}`);
+      console.log('删除', res)
+      if (res.state !== 'success') return;
+    }
+    const index = modelList.value.findIndex((item: any) => item.id === model.id);
+    if (index >= 0) {
+      modelList.value.splice(index, 1);
+      
+      selectModel(0);
+      ElMessage.success('删除成功');
+    }
+  })
+  
+}
+
 </script>
 <style scoped>
 .el-input :deep(.el-input__wrapper) {