feat: 调整接口，增加功能

- 增加筛选功能
- 增加相应的api
- 增加一些模板
-

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

@@ -1,42 +1,108 @@
-<script>
-import { Form } from 'element-ui';
+  <script>
+  import { getRuleDetail } from "@/api/rules/index";
+  import { updateSplitRule } from "@/api/rules/index";
 
-export default {
+  export default {
     name: 'sEditSplitRule',
     data() {
-        return {
-            // 表单数据有：规则名称、样式、提示词、备注
-            form:{
-                ruleName: '',
-                ruleStyle: '',
-                rulePrompt: '',
-                ruleRemark: ''
-            }
+      return {
+        // 表单数据有：规则名称、样式、提示词、备注
+        form: {
+          id: '',
+          ruleName: '',
+          ruleType: '',
+          ruleList: []
         }
+      }
     },
+    inject: ['diglogOptions'],
+    beforeMount() {
+      // 获取当前行数据
+      const { currentRow } = this.diglogOptions;
+
+      // 获取规则详情
+      getRuleDetail(currentRow.id).then(res => {
+        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);
+      });
+    },
+
     methods: {
-        
-    }   
-}
+      handleAdd() {
+        // TODO: 新增数据到后端
+        const payload = {
+          titleLevel: '',
+          ruleRegex: '',
+          description: ''
+        };
+
+        // 使用数组方法添加元素，确保响应式更新
+        this.form.ruleList.push(payload);
+      },
+      handleDelete() {
+        // TODO: 删除数据到后端
+        if (this.form.ruleList.length > 0) {
+          this.form.ruleList.pop();
+        }
+      },
+      handleSave() {
+        // 使用正确的API保存数据到后端
+        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('保存失败');
+        });
+      }
+    }
+  }
 </script>
 
-<template>
+  <template>
     <div>
-        <el-form :model="form" label-width="100px">
-            <el-form-item label="规则名称">
-                <el-input v-model="form.ruleName"></el-input>
-            </el-form-item>
-            <el-form-item label="样式">
-                <el-input v-model="form.ruleStyle"></el-input>
-            </el-form-item>
-            <el-form-item label="提示词">
-                <el-input v-model="form.rulePrompt"></el-input>
-            </el-form-item>
-            <el-form-item label="备注">
-                <el-input type="textarea" v-model="form.ruleRemark"></el-input>
-            </el-form-item>
-        </el-form>
+      <el-form :model="form" label-width="100px">
+        <el-form-item label="规则名称">
+          <el-input v-model="form.ruleName"></el-input>
+        </el-form-item>
+        <el-card v-for="(item, index) in form.ruleList" :key="index">
+          <el-form-item label="样式">
+            <el-input v-model="item.titleLevel"></el-input>
+          </el-form-item>
+          <el-form-item label="规则">
+            <el-input v-model="item.ruleRegex"></el-input>
+          </el-form-item>
+          <el-form-item label="备注">
+            <el-input type="textarea" v-model="item.description"></el-input>
+          </el-form-item>
+        </el-card>
+      </el-form>
+      <div slot="footer" class="dialog-footer flex" style="justify-content: space-between;">
+        <!-- 只有当点击保存的时候才能和服务端通信新增和删除 -->
+        <div>
+          <el-button type="primary" @click="handleAdd">+ 新增拆分</el-button>
+          <el-button type="info" @click="handleDelete">- 删除拆分</el-button>
+        </div>
+        <div>
+          <el-button @click="diglogOptions.visible = false">取 消</el-button>
+          <el-button type="primary" @click="handleSave">确 定</el-button>
+        </div>
+      </div>
     </div>
-</template>
+  </template>
 
-<style lang="css" scoped></style>
+<style lang="css" scoped></style>