feat: 规则管理功能优化与问题修复

1. 修复了规则修改功能中组件显示错误问题
  - 更新handleEdit函数中的条件判断逻辑，使其根据字符串类型的ruleType正确判断应显示哪个编辑组件
  - 解决了无论规则类型如何都显示同一个组件的问题

2. 新增规则添加功能
  - 添加add-rules组件，支持新增规则功能

3. 优化规则详情查看功能
   - 完善Info组件，提升用户体验

4. 更新API配置
   - 将API地址更新为生产环境地址

src/api/rules/index.js

@@ -59,10 +59,11 @@ export function updateSplitRule(data) {
 
 /**
  * 提示词规则新增
+ * @param {Object} data - 新增数据
  */
 export function addPromptRule(data) {
   return request({
-    url: getUrl('/rulesEx/add'),
+    url: getUrl('/ruleAttributeExtractEx/create'),
     method: 'post',
     data
   })

src/views/rules/Index.vue

@@ -2,6 +2,7 @@
 import { deleteRule, getRuleList } from '@/api/rules/index'
 import EditPromptRule from './components/edit-prompt-rule/Index.vue'
 import EditSplitRule from './components/edit-split-rule/Index.vue'
+import AddRules from './components/add-rules/index.vue'
 import Info from './components/info/index.vue'
 import { h } from 'vue'
 
@@ -28,7 +29,7 @@ export default {
         ]
       },
       // 弹窗配置
-      diglogOptions: {
+      dialogOptions: {
         title: '',
         visible: false,
         width: '50%',
@@ -37,6 +38,7 @@ export default {
       },
       // 分页配置
       currentPage: 1,
+      dirtyTable: { status: false },
       tableData: [],
       // 查询表单
       form: {
@@ -50,12 +52,14 @@ export default {
   },
   provide() {
     return {
-      diglogOptions: this.diglogOptions
+      dialogOptions: this.dialogOptions,
+      tableData: this.tableData
     }
   },
   components: {
     EditPromptRule,
     EditSplitRule,
+    AddRules,
     Info
   },
   computed: {
@@ -93,7 +97,6 @@ export default {
       const start = (this.currentPage - 1) * 10
       const end = this.currentPage * 10
 
-      console.log(`filteredData`, filteredData)
       return filteredData.slice(start, end)
     },
     getTableData() {
@@ -111,14 +114,11 @@ export default {
       }
       // 去重所有 ruleType， 然后映射成 option
       const res = [...new Set(this.tableData.map(item => item.ruleType))].map(type => map[type])
-      console.log(res)
-
       return res
     },
     // 查询表单的 ruleNameOptions
     ruleNameOptions() {
       const res = [...new Set(this.tableData.map(item => item.ruleName))]
-      console.log(res)
       return res
     }
   },
@@ -130,37 +130,31 @@ export default {
   },
   beforeMount() {
     getRuleList().then(res => {
-      console.log(res)
-
       const { content } = res.content
-      console.log(content)
 
       this.tableData = content.list
     })
   },
   methods: {
     handleCurrentChange(val) {
-      console.log(`current page: ${val}`)
       this.currentPage = val
     },
     // 处理查看规则详情
     handleInfoVisiable(row) {
-      console.log(row)
-      this.diglogOptions.title = '查看规则详情'
-      this.diglogOptions.currentComponent = 'Info'
-      this.diglogOptions.visible = true
-      this.diglogOptions.currentRow = row
+      this.dialogOptions.title = '查看规则详情'
+      this.dialogOptions.currentComponent = 'Info'
+      this.dialogOptions.visible = true
+      this.dialogOptions.currentRow = row
     },
     // 处理修改规则
     handleEdit(row, index) {
-      this.diglogOptions.title = '修改规则'
-      this.diglogOptions.currentComponent = row.ruleType === 1 ? 'EditSplitRule' : 'EditPromptRule'
-      this.diglogOptions.visible = true
-      this.diglogOptions.currentRow = row
+      this.dialogOptions.title = '修改规则'
+      this.dialogOptions.currentComponent = row.ruleType === '知识拆分规则' ? 'EditPromptRule' : 'EditSplitRule'
+      this.dialogOptions.visible = true
+      this.dialogOptions.currentRow = row
     },
     // 处理删除规则
     handleDelete(row, index) {
-      console.log(row, index)
       deleteRule([row.id])
         .then(() => {
           this.tableData.splice(index, 1)
@@ -188,7 +182,9 @@ export default {
     },
     // 处理新增
     handleAdd() {
-      console.log('handleAdd')
+      this.dialogOptions.title = '新增规则'
+      this.dialogOptions.visible = true
+      this.dialogOptions.currentComponent = "AddRules"
     }
   }
 }
@@ -252,23 +248,6 @@ export default {
       <!-- 下方规则列表 -->
       <div class="p20">
         <r-table :columns="tableConfig.columns" :data="getTableData" :deletion="false"></r-table>
-        <!-- 备用 table 方案 -->
-        <!-- <el-table :data="currentTableDate">
-          <el-table-column prop="ruleName" label="规则名称"></el-table-column>
-          <el-table-column prop="ruleType" label="规则类型">
-            <template #default="scope">
-              {{ scope.row.ruleType && scope.row.ruleType === 1 ? '提示词规则' : '知识拆分规则' }}
-            </template>
-          </el-table-column>
-          <el-table-column prop="createdDate" label="创建时间"></el-table-column>
-          <el-table-column label="操作">
-            <template #default="scope">
-              <el-button type="primary" size="mini" plain @click="handleInfoVisiable(scope.row)">查看规则详情 </el-button>
-              <el-button type="primary" size="mini" plain @click="handleEdit(scope.row, scope.$index)">修改</el-button>
-              <el-button type="danger" size="mini" plain @click="handleDelete(scope.row, scope.$index)">删除</el-button>
-            </template>
-          </el-table-column>
-        </el-table> -->
       </div>
       <!-- 分页 -->
       <el-row>
@@ -286,15 +265,15 @@ export default {
       </el-row>
     </el-card>
     <!-- 规则详情弹窗 -->
-    <el-drawer :visible.sync="diglogOptions.visible" size="50%" :title="diglogOptions.title">
+    <el-drawer :visible.sync="dialogOptions.visible" size="50%" :title="dialogOptions.title">
       <!-- diglog 弹窗内容组件 -->
       <component
         class="container"
-        v-if="diglogOptions.visible"
-        :is="diglogOptions.currentComponent"
+        v-if="dialogOptions.visible"
+        :is="dialogOptions.currentComponent"
         :data="tableData"
-        :columns="columns"
-        :currentRow="diglogOptions.currentRow"
+                 :columns="columns"
+        :currentRow="dialogOptions.currentRow"
       />
     </el-drawer>
   </div>

src/views/rules/components/add-rules/index.vue

@@ -0,0 +1,34 @@
+<template>
+  <el-tabs v-model="activeName" @tab-click="handleClick">
+    <el-tab-pane label="提词规则" name="first">
+      <edit-prompt-rule type="add"></edit-prompt-rule>
+    </el-tab-pane>
+    <el-tab-pane label="拆分规则" name="second">
+      <edit-split-rule type="add"></edit-split-rule>
+    </el-tab-pane>
+  </el-tabs>
+</template>
+<script>
+import EditPromptRule from '../edit-prompt-rule/Index.vue'
+import EditSplitRule from '../edit-split-rule/Index.vue'
+
+export default {
+  components: {
+    EditPromptRule,
+    EditSplitRule
+  },
+  data() {
+    return {
+      activeName: 'first'
+    };
+  },
+  methods: {
+    handleClick(tab, event) {
+      console.log(tab, event);
+    }
+  },
+  beforeMount() {
+    console.log('add-rules beforeMount');
+  }
+};
+</script>

src/views/rules/components/edit-prompt-rule/Index.vue

@@ -1,10 +1,9 @@
 <script>
 import { getRuleDetail } from '@/api/rules/index'
-import { updatePromptRule } from '@/api/rules/index'
+import { addPromptRule, updatePromptRule } from '@/api/rules/index'
 
 export default {
   name: 'EditPromptRule',
-  inject: ['diglogOptions'],
   data() {
     return {
       // 规则名称、属性、属性描述、关键词、题词示例、提示词
@@ -12,11 +11,18 @@ export default {
         id: '',
         ruleName: '',
         createdDate: '',
-        ruleType: '',
+        ruleType: 2,
         ruleList: []
       }
     }
   },
+  props: {
+    type: {
+      type: String,
+      default: 'edit'
+    }
+  },
+  inject: ['dialogOptions', 'tableData'],
   methods: {
     handleAdd() {
       const payload = {
@@ -30,6 +36,7 @@ export default {
       this.form.ruleList.push(payload)
     },
     handleDelete() {
+      // TODO: 删除数据到后端
       if (this.form.ruleList.length > 0) {
         this.form.ruleList.pop()
       }
@@ -37,23 +44,54 @@ export default {
     save() {
       console.log('save this form ', this.form)
 
-      updatePromptRule(this.form)
-        .then(() => {
-          console.log('update prompt rule success')
-          this.diglogOptions.visible = false
-          // 可以添加成功提示
-          this.$message && this.$message.success('保存成功')
-        })
-        .catch(err => {
-          console.error(`update prompt rule failed: ${err}`)
-          // 可以添加错误提示
-          this.$message && this.$message.error('保存失败')
-        })
+      // 判断是新增还是更新，新增调用 addPromptRule，更新调用 updatePromptRule
+      if (this.type === 'add') {
+        // 配置对应表单
+        // 添加时，需要删除 id
+        delete this.form.id;
+        // 删除 createdDate
+        delete this.form.createdDate;
+        // 更新ruleType
+        this.form.ruleType = 2;
+
+        addPromptRule(this.form)
+          .then(() => {
+            console.log('add prompt rule success')
+            this.dialogOptions.visible = false
+            // 可以添加成功提示
+            this.$message && this.$message.success('保存成功')
+
+            // 向 tableData 最上面添加数据
+            this.tableData.unshift(this.form)
+          })
+          .catch(err => {
+            console.error(`add prompt rule failed: ${err}`)
+            // 可以添加错误提示
+            this.$message && this.$message.error('保存失败')
+          })
+      } else {
+        updatePromptRule(this.form)
+          .then(() => {
+            console.log('update prompt rule success')
+            this.dialogOptions.visible = false
+            // 可以添加成功提示
+            this.$message && this.$message.success('保存成功')
+          })
+          .catch(err => {
+            console.error(`update prompt rule failed: ${err}`)
+            // 可以添加错误提示
+            this.$message && this.$message.error('保存失败')
+          })
+      }
     }
   },
   beforeMount() {
+    // 如果是新增，不去请求接口
+    if (this.type === 'add') {
+      return
+    }
     // 获取当前行数据
-    const { currentRow } = this.diglogOptions
+    const { currentRow } = this.dialogOptions
 
     // 获取规则详情
     getRuleDetail(currentRow.id)
@@ -110,11 +148,10 @@ export default {
         <el-button type="info" @click="handleDelete">- 删除题词</el-button>
       </div>
       <div>
-        <el-button @click="diglogOptions.visible = false">取 消</el-button>
+        <el-button @click="dialogOptions.visible = false">取 消</el-button>
         <el-button type="primary" @click="save">确 定</el-button>
       </div>
     </div>
   </div>
 </template>
 
-<style lang="css" scoped></style>

src/views/rules/components/edit-split-rule/Index.vue

@@ -1,80 +1,117 @@
 <script>
-import { getRuleDetail } from '@/api/rules/index'
-import { updateSplitRule } from '@/api/rules/index'
+import { addSplitRule, getRuleDetail, updateSplitRule } from "@/api/rules/index";
 
 export default {
-  name: 'sEditSplitRule',
+  name: "EditSplitRule",
   data() {
     return {
       // 表单数据有：规则名称、样式、提示词、备注
       form: {
-        id: '',
-        ruleName: '',
-        ruleType: '',
+        id: "",
+        ruleName: "",
+        ruleType: 1,
         ruleList: []
       }
+    };
+  },
+  props: {
+    type: {
+      type: String,
+      default: "edit"
     }
   },
-  inject: ['diglogOptions'],
+  inject: ["dialogOptions", "tableData"],
   beforeMount() {
+    // 如果是新增，不去请求接口
+    if (this.type === "add") {
+      return;
+    }
     // 获取当前行数据
-    const { currentRow } = this.diglogOptions
+    const { currentRow } = this.dialogOptions;
 
     // 获取规则详情
     getRuleDetail(currentRow.id)
       .then(res => {
-        const { content } = res.content
-        console.log('origin query request', content)
+        const { content } = res.content;
+        console.log("origin query request", content);
         // 一次性设置表单数据，确保响应式更新
         this.form = {
           id: content.id,
           ruleName: content.ruleName,
           ruleType: content.ruleType,
           ruleList: Array.isArray(content.ruleList) ? content.ruleList : []
-        }
+        };
       })
       .catch(err => {
-        console.error('获取规则详情失败:', err)
-      })
+        console.error("获取规则详情失败:", err);
+      });
   },
 
   methods: {
     handleAdd() {
       // TODO: 新增数据到后端
       const payload = {
-        titleLevel: '',
-        ruleRegex: '',
-        description: ''
-      }
+        titleLevel: "",
+        ruleRegex: "",
+        description: ""
+      };
 
       // 使用数组方法添加元素，确保响应式更新
-      this.form.ruleList.push(payload)
+      this.form.ruleList.push(payload);
     },
     handleDelete() {
       // TODO: 删除数据到后端
       if (this.form.ruleList.length > 0) {
-        this.form.ruleList.pop()
+        this.form.ruleList.pop();
       }
     },
     handleSave() {
       // 使用正确的API保存数据到后端
-      console.log(`this.form`, this.form)
+      console.log(`this.form`, this.form);
 
-      updateSplitRule(this.form)
-        .then(() => {
-          console.log('update split rule success')
-          this.diglogOptions.visible = false
-          // 可以添加成功提示
-          this.$message && this.$message.success('保存成功')
-        })
-        .catch(err => {
-          console.error(`update split rule failed: ${err}`)
-          // 可以添加错误提示
-          this.$message && this.$message.error('保存失败')
-        })
+      // 判断是新增还是更新，新增调用 addSplitRule，更新调用 updateSplitRule
+      if (this.type === "add") {
+
+        // 配置对应表单
+        // 添加时，需要删除 id
+        delete this.form.id;
+        // 更新ruleType
+        this.form.ruleType = 1;
+
+        addSplitRule(this.form)
+          .then((res) => {
+            this.dialogOptions.visible = false;
+
+            // if (res.code >= 300) return;
+
+            // 可以添加成功提示
+            this.$message && this.$message.success("保存成功");
+            // 向 tableData 最上面添加数据
+            this.tableData.unshift(this.form)
+          })
+          .catch(err => {
+            console.error(`add split rule failed: ${err}`);
+            // 可以添加错误提示
+            this.$message && this.$message.error("保存失败");
+          });
+      } else {
+        updateSplitRule(this.form)
+          .then(() => {
+            console.log("update split rule success");
+            this.dialogOptions.visible = false;
+            // 可以添加成功提示
+            this.$message && this.$message.success("保存成功");
+          })
+          .catch(err => {
+            console.error(`update split rule failed: ${err}`);
+            // 可以添加错误提示
+            this.$message && this.$message.error("保存失败");
+          });
+      }
     }
+
   }
-}
+};
 </script>
 
 <template>
@@ -102,7 +139,7 @@ export default {
         <el-button type="info" @click="handleDelete">- 删除拆分</el-button>
       </div>
       <div>
-        <el-button @click="diglogOptions.visible = false">取 消</el-button>
+        <el-button @click="dialogOptions.visible = false">取 消</el-button>
         <el-button type="primary" @click="handleSave">确 定</el-button>
       </div>
     </div>

src/views/rules/components/info/index.vue

@@ -4,16 +4,12 @@ import { getRuleDetail } from '@/api/rules/index'
 export default {
   name: 'Info',
   props: {
-    // data: {
-    //   type: Object,
-    //   default: () => { }
-    // },
-    // columns: {
-    //   type: Array,
-    //   default: () => []
-    // }
+    type: {
+      type: String,
+      default: 'edit'
+    }
   },
-  inject: ['diglogOptions'],
+  inject: ['dialogOptions'],
   data() {
     return {
       tableDate: {
@@ -32,7 +28,7 @@ export default {
   },
   beforeMount() {
     // 获取规则详情
-    getRuleDetail(this.diglogOptions.currentRow.id).then(res => {
+    getRuleDetail(this.dialogOptions.currentRow.id).then(res => {
       const { content } = res.content
       console.log('origin query request', content)
       // 设置表单数据
@@ -40,7 +36,6 @@ export default {
       this.form.createdDate = content.createdDate
       // 设置表格数据
       this.tableDate.data = content.ruleList
-      // 设置表格列， 有两种方式
 
       // 1. 是 提示词规则
       if (content.ruleType.toString() === '1') {