feat:新增规则优化

src/views/knowledge/detail/components/split/AddRule.vue

@@ -1,11 +1,7 @@
 <template>
   <div>
     <!-- 添加预处理结果预览对话框 -->
-    <el-drawer
-      :title="currentId ? '编辑知识拆分规则' : '新增知识拆分规则'"
-      :visible.sync="dialogVisible"
-      size="40%"
-      :before-close="handleClose">
+    <el-drawer :title="currentId ? '编辑知识拆分规则' : '新增知识拆分规则'" :visible.sync="dialogVisible" size="40%" :before-close="handleClose">
       <div class="content">
         <el-form ref="ruleForm" :model="form" :rules="rules" label-width="100px">
           <div class="form-section">
@@ -17,9 +13,13 @@
                 </el-form-item>
               </el-col>
               <el-col :span="12">
-                <el-select v-model="form.ruleName" placeholder="查询并导入现有规则" class="w100">
-                  <el-option label="选项1" value="1"></el-option>
-                  <el-option label="选项2" value="2"></el-option>
+                <el-select v-model="searchValue" @change="queryExistingRules" filterable clearable placeholder="查询并导入现有规则">
+                  <el-option
+                    v-for="item in ruleList"
+                    :key="item.id"
+                    :label="item.ruleName"
+                    :value="item.id">
+                  </el-option>
                 </el-select>
               </el-col>
             </el-row>
@@ -28,17 +28,13 @@
 
           <div class="form-section" v-for="(rule, index) in form.ruleList" :key="index">
             <div class="section-title">
-              拆分规则 {{index + 1}}
-              <el-button
-                v-if="form.ruleList.length > 1"
-                type="text"
-                class="delete-btn"
-                @click="removeRule(index)">
+              拆分规则 {{ index + 1 }}
+              <el-button v-if="form.ruleList.length > 1" type="text" class="delete-btn" @click="removeRule(index)">
                 <i class="el-icon-delete"></i> 删除
               </el-button>
             </div>
             <el-form-item label="样式" :prop="'ruleList.' + index + '.titleLevel'">
-              <el-select v-model="rule.titleLevel" placeholder="请选择标题级别" >
+              <el-select v-model="rule.titleLevel" placeholder="请选择标题级别">
                 <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
               </el-select>
             </el-form-item>
@@ -54,9 +50,7 @@
           </div>
 
           <div class="add-rule-btn">
-            <el-button type="primary" size="medium" @click="addSplitRule">
-              <i class="el-icon-plus"></i> 新增拆分规则
-            </el-button>
+            <el-button type="primary" size="medium" @click="addSplitRule"> <i class="el-icon-plus"></i> 新增拆分规则 </el-button>
           </div>
         </el-form>
       </div>
@@ -69,7 +63,7 @@
 </template>
 
 <script>
-import { addRuleSplit, getRuleDetail, updateRuleSplit } from '@/api/generatedApi'
+import { addRuleSplit, getRuleDetail, updateRuleSplit, getRulesList } from '@/api/generatedApi'
 
 export default {
   name: 'AddRule',
@@ -88,6 +82,8 @@ export default {
           }
         ]
       },
+      ruleList: [],
+      searchValue: '',
       options: [
         {
           value: 1,
@@ -121,14 +117,14 @@ export default {
           { pattern: /^(?!_)[a-zA-Z0-9\u4e00-\u9fa5_]+$/, message: '支持中文、英文、数字、下划线(_)，不能以下划线为开头', trigger: 'blur' }
         ],
         'ruleList.0.titleLevel': [{ required: true, message: '请选择标题级别' }],
-        'ruleList.0.ruleRegex': [{ required: true, message: '请输入关键词', trigger: 'blur' }
-        ],
+        'ruleList.0.ruleRegex': [{ required: true, message: '请输入关键词', trigger: 'blur' }]
       }
     }
   },
   methods: {
     init(id) {
       this.dialogVisible = true
+      this.getRuleList()
       this.currentId = id
       // 如果有id，则获取详情
       if (id) {
@@ -137,21 +133,50 @@ export default {
         // 重置表单
         this.$nextTick(() => {
           this.$refs.ruleForm && this.$refs.ruleForm.resetFields()
+          this.form = {
+            ruleName: '',
+            ruleType: 1,
+            ruleList: [
+              {
+                titleLevel: '',
+                ruleRegex: '',
+                description: ''
+              }
+            ]
+          }
         })
       }
     },
+    async getRuleList(){
+      let res = await getRulesList({ ruleType: 1 })
+      console.log(res);
+      this.ruleList = res.content.content
+    },
     // 获取详情
     getDetail(id) {
       getRuleDetail(id).then(res => {
         this.form = res.content.content
+        // !this.currentId即新增
+        if (!this.currentId) {
+          this.form.ruleList.forEach(item => {
+            Object.keys(item).forEach(key => {
+              if (key !== 'titleLevel' && key !== 'ruleRegex' && key !== 'description') {
+                delete item[key]
+              }
+            })
+          })
+        }
         // 为每个规则项添加验证规则
         this.form.ruleList.forEach((_, index) => {
           this.addValidationRules(index)
         })
       })
     },
-    queryExistingRules() {
-      // 查询并导入现有规则的逻辑
+    queryExistingRules(val) {
+      console.log(val);
+      if (val){
+        this.getDetail(val)
+      }
     },
     // 动态添加验证规则
     addValidationRules(index) {
@@ -180,18 +205,19 @@ export default {
     },
     removeRule(index) {
       this.form.ruleList.splice(index, 1)
-      // 重新生成验证规则
-      const newRules = { ...this.rules }
-      delete newRules[`ruleList.${index}.titleLevel`]
-      delete newRules[`ruleList.${index}.ruleRegex`]
+      // 重新生成所有验证规则
+      const newRules = {
+        ruleName: this.rules.ruleName
+      }
+      // 为剩余的每条规则重新生成验证规则
+      this.form.ruleList.forEach((_, newIndex) => {
+        newRules[`ruleList.${newIndex}.titleLevel`] = [{ required: true, message: '请选择样式', trigger: 'change' }]
+        newRules[`ruleList.${newIndex}.ruleRegex`] = [{ required: true, message: '请输入关键词', trigger: 'blur' }]
+      })
       this.rules = newRules
     },
-    deleteSplitRule() {
-      // 删除拆分规则的逻辑
-      console.log('删除拆分规则')
-    },
     handleSubmit() {
-      this.$refs.ruleForm.validate((valid) => {
+      this.$refs.ruleForm.validate(valid => {
         if (valid) {
           // 表单验证通过，根据是否有id调用新增还是编辑接口
           const api = this.currentId ? updateRuleSplit : addRuleSplit
@@ -215,6 +241,8 @@ export default {
       })
     },
     handleClose() {
+      this.searchValue = ''
+      this.$refs.ruleForm.resetFields()
       this.dialogVisible = false
     }
   }
@@ -242,18 +270,18 @@ export default {
       align-items: center;
 
       .delete-btn {
-        color: #F56C6C;
+        color: #f56c6c;
         font-size: 14px;
 
         &:hover {
-          color: #F78989;
+          color: #f78989;
         }
       }
     }
   }
 
   .tips {
-    font-size: 14px;
+    font-size: 12px;
     color: #999;
     margin-left: 100px;
     margin-bottom: 20px;