From e526faff430c8b113e39b25ba4b99f592f844c0c Mon Sep 17 00:00:00 2001
From: Huangzhe <huang.ze@ebiz-digits.com>
Date: Fri, 11 Apr 2025 17:05:02 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E8=B0=83=E6=95=B4=E6=8E=A5=E5=8F=A3?=
 =?UTF-8?q?=EF=BC=8C=E5=A2=9E=E5=8A=A0=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 增加筛选功能
- 增加相应的api
- 增加一些模板
-
---
 src/api/rules/index.js                        |  84 ++++++
 src/api/rules/template/prompt-rule.json5      |  20 ++
 src/api/rules/template/splite.json5           |  16 ++
 src/views/rules/Index.vue                     | 270 +++++++++++-------
 .../components/edit-prompt-rule/Index.vue     | 153 ++++++----
 .../components/edit-split-rule/Index.vue      | 128 +++++++--
 src/views/rules/components/info/index.vue     | 119 +++++---
 src/views/track/Index.vue                     |  77 +++--
 8 files changed, 609 insertions(+), 258 deletions(-)
 create mode 100644 src/api/rules/index.js
 create mode 100644 src/api/rules/template/prompt-rule.json5
 create mode 100644 src/api/rules/template/splite.json5

diff --git a/src/api/rules/index.js b/src/api/rules/index.js
new file mode 100644
index 0000000..a045165
--- /dev/null
+++ b/src/api/rules/index.js
@@ -0,0 +1,84 @@
+
+import request from '@/assets/js/utils/request'
+import getUrl from '@/assets/js/utils/get-url'
+
+
+/**
+ * 获取所有的规则列表
+ */
+export function getRuleList() {
+  return request({
+    url: getUrl('/rules/page'),
+    method: 'post',
+    data: {}
+  })
+}
+/**
+ * 查看规则明细
+ * @param {string} id - 规则id
+ */
+export function getRuleDetail(id) {
+  return request({
+    url: getUrl('/rulesEx/query'),
+    method: 'get',
+    params: { id }
+  })
+}
+
+/**
+ * 删除规则
+ * @param {string[]} id - 规则id
+ */
+export function deleteRule(id) {
+  return request({
+    url: getUrl('/rules/delete'),
+    method: 'post',
+    data: id
+  })
+}
+
+/**
+ * 拆分规则新增
+ */
+export function addSplitRule(data) {
+  return request({
+    url: getUrl('/ruleDocSplitEx/create'),
+    method: 'post',
+    data
+  })
+}
+
+/**
+ * 拆分规则更新
+ */
+export function updateSplitRule(data) {
+  return request({
+    url: getUrl('/ruleDocSplitEx/update'),
+    method: 'post',
+    data
+  })
+}
+
+
+/**
+ * 提示词规则新增
+ */
+export function addPromptRule(data) {
+  return request({
+    url: getUrl('/rulesEx/add'),
+    method: 'post',
+    data
+  })
+}
+
+/**
+ * 提示词规则更新
+ * @param {Object} data - 更新数据
+ */
+export function updatePromptRule(data) {
+  return request({
+    url: getUrl('/ruleAttributeExtractEx/update'),
+    method: 'post',
+    data
+  })
+}
\ No newline at end of file
diff --git a/src/api/rules/template/prompt-rule.json5 b/src/api/rules/template/prompt-rule.json5
new file mode 100644
index 0000000..48cea4c
--- /dev/null
+++ b/src/api/rules/template/prompt-rule.json5
@@ -0,0 +1,20 @@
+{
+    "ruleName": "修改题词规则",
+    "ruleType": 2,
+    "ruleList": [
+        {
+            "attribute": "属性1-1",
+            "attributeDesc": "秒送",
+            "keyword": "keyword",
+            "example": "example",
+            "prompt": "prompt"
+        },
+        {
+            "attribute": "属性22",
+            "attributeDesc": "秒送",
+            "keyword": "keyword",
+            "example": "example",
+            "prompt": "prompt"
+        }
+    ]
+}
\ No newline at end of file
diff --git a/src/api/rules/template/splite.json5 b/src/api/rules/template/splite.json5
new file mode 100644
index 0000000..5a3763f
--- /dev/null
+++ b/src/api/rules/template/splite.json5
@@ -0,0 +1,16 @@
+{
+  "ruleName": "规则-修改",
+  "ruleType": 1,
+  "ruleList": [
+      {
+          "titleLevel": 1,
+          "ruleRegex": "规则1",
+          "description": "描述22"
+      },
+      {
+          "titleLevel": 3,
+          "ruleRegex": "规则2",
+          "description": "新增"
+      }
+  ]
+}
\ No newline at end of file
diff --git a/src/views/rules/Index.vue b/src/views/rules/Index.vue
index b25ce70..f0d2bed 100644
--- a/src/views/rules/Index.vue
+++ b/src/views/rules/Index.vue
@@ -1,83 +1,173 @@
 <script>
-import { getRuleList } from "@/api/knowledge/task-page";
+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 Info from "./components/info/index.vue";
+import { h } from "vue";
+import { watch } from "vue";
 
 export default {
-  name: 'rules',
+  name: "rules",
   data() {
     return {
-            // visibleDialog: {
-            //     info: false,
-            //     edit: false,
-            //     add: false
-            // },
-            diglogOptions: {
-                title: '',
-                visible: false,
-                width: '50%',
-                currentComponent: void 0,
-            },
+      columns: [],
+      // 弹窗配置
+      diglogOptions: {
+        title: "",
+        visible: false,
+        width: "50%",
+        currentComponent: void 0,
+        currentRow: void 0
+      },
+      // 分页配置
       currentPage: 1,
       tableData: [],
-
+      // 查询表单
       form: {
+        query: true,
         pickerOptions: void 0,
-        ruleType: '',
-        ruleName: '',
-        value2: []
+        ruleType: "",
+        ruleName: "",
+        createdDate: []
       }
-    }
+    };
+  },
+  provide() {
+    return {
+      diglogOptions: this.diglogOptions
+    };
+  },
+  components: {
+    EditPromptRule,
+    EditSplitRule,
+    Info
   },
-    components: {
-        EditPromptRule,
-        EditSplitRule,
-        Info
-    },
   computed: {
     // 当前的分页数据
     currentTableDate() {
-      const start = (this.currentPage - 1) * 10
-      const end = this.currentPage * 10
-      return this.tableData.slice(start, end)
+      let filteredData;
+      // 过滤 table 列表,如果 form 相关项是空的，就不过滤
+      if (this.form.query) {
+        // 过滤 ruleType
+        const map = {
+          1: "提示词规则",
+          2: "知识拆分规则"
+        };
+        filteredData = this.tableData.filter(item => {
+          if (!this.form.ruleType) return true;
+          return map[item.ruleType] === this.form.ruleType;
+        });
+
+        // 过滤 ruleName
+        filteredData = filteredData.filter(item => {
+          if (!this.form.ruleName) return true;
+          return item.ruleName === this.form.ruleName;
+        });
+
+        // 过滤 createdDate
+        filteredData = filteredData.filter(item => {
+          if (!this.form.createdDate.length) return true;
+          return item.createdDate >= this.form.createdDate[0] && item.createdDate <= this.form.createdDate[1];
+        });
+
+      } else {
+        filteredData = this.tableData;
+      }
+
+
+      // TODO: 分页数据
+      const start = (this.currentPage - 1) * 10;
+      const end = this.currentPage * 10;
+      return filteredData.slice(start, end);
+    },
+    // 查询表单的 ruleTypeOptions
+    ruleTypeOptions() {
+      const map = {
+        1: "提示词规则",
+        2: "知识拆分规则"
+      };
+      // 去重所有 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;
+    }
+  },
+  watch: {
+    form: {
+      handler() {
+        },
+      deep: true
     }
   },
   beforeMount() {
     getRuleList().then(res => {
-      const { content } = res.content
-      console.log(content)
+      console.log(res);
 
-      this.tableData = content
-    })
+      const { content } = res.content;
+      console.log(content);
+
+      this.tableData = content.list;
+    });
   },
   methods: {
     handleCurrentChange(val) {
-      console.log(`current page: ${val}`)
-
-            this.currentPage = val;
-        },
-        // 处理查看规则详情
-        handleInfoVisiable(row) {
-            this.diglogOptions.title = '查看规则详情';
-            this.diglogOptions.currentComponent = 'Info';
-            this.diglogOptions.visible = true;
-            console.log(row);
-            this.form = row;
-        },
-        // 处理修改规则
-        handleEdit(row, index) {
-            this.diglogOptions.title = '修改规则';
-            this.diglogOptions.currentComponent = 'EditPromptRule';
-            this.diglogOptions.visible = true;
-            console.log(row, index);
-        },
-        // 处理删除规则
-        handleDelete(row, index) {
-            console.log(row, index);
-        }
+      console.log(`current page: ${val}`);
+      this.currentPage = val;
+    },
+    // 处理查看规则详情
+    handleInfoVisiable(row) {
+      this.diglogOptions.title = "查看规则详情";
+      this.diglogOptions.currentComponent = "Info";
+      this.diglogOptions.visible = true;
+      this.diglogOptions.currentRow = row;
+    },
+    // 处理修改规则
+    handleEdit(row, index) {
+      this.diglogOptions.title = "修改规则";
+      this.diglogOptions.currentComponent = row.ruleType === 1 ? "EditSplitRule" : "EditPromptRule";
+      this.diglogOptions.visible = true;
+      this.diglogOptions.currentRow = row;
+    },
+    // 处理删除规则
+    handleDelete(row, index) {
+      console.log(row, index);
+      deleteRule([row.id]).then(() => {
+        this.tableData.splice(index, 1);
+      }).catch(err => {
+        this.$notify.error({
+          title: "删除失败",
+          message: h("i", { style: "color: teal" }, "删除时出现错误，稍后再试" + err)
+        });
+      });
+    },
+    // 处理查询
+    handleQuery() {
+      this.form.query = true;
+    },
+    // 处理重置
+    handleReset() {
+      this.form = {
+        query: true,
+        pickerOptions: void 0,
+        ruleType: "",
+        ruleName: "",
+        createdDate: []
+      };
+    },
+    // 处理新增
+    handleAdd() {
+      console.log("handleAdd");
     }
-}
+  }
+
+};
 </script>
 
 <template>
@@ -96,9 +186,8 @@ export default {
             <el-col :span="8">
               <el-form-item label="规则类型">
                 <el-select v-model="form.ruleType" placeholder="请选择规则类型">
-                  <!-- <el-option v-for="item in ruleTypeOptions" :key="item.value" :label="item.label"
-                                :value="item.value">
-                            </el-option> -->
+                  <el-option v-for="item in ruleTypeOptions" :key="item" :label="item" :value="item">
+                  </el-option>
                 </el-select>
               </el-form-item>
             </el-col>
@@ -106,24 +195,16 @@ export default {
             <el-col :span="8">
               <el-form-item label="规则名称">
                 <el-select v-model="form.ruleName" placeholder="请选择规则名称">
-                  <!-- <el-option v-for="item in ruleNameOptions" :key="item.value" :label="item.label" -->
-                  <!-- :value="item.value"> -->
-                  <!-- </el-option> -->
+                  <el-option v-for="item in ruleNameOptions" :key="item" :label="item" :value="item">
+                  </el-option>
                 </el-select>
               </el-form-item>
             </el-col>
             <!-- 创建时间 -->
             <el-col :span="8">
               <el-form-item label="创建时间">
-                <el-date-picker
-                  v-model="form.value2"
-                  type="daterange"
-                  unlink-panels
-                  range-separator="至"
-                  start-placeholder="开始日期"
-                  end-placeholder="结束日期"
-                  :picker-options="form.pickerOptions"
-                >
+                <el-date-picker v-model="form.createdDate" type="daterange" unlink-panels range-separator="至"
+                  start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="form.pickerOptions">
                 </el-date-picker>
               </el-form-item>
             </el-col>
@@ -131,9 +212,9 @@ export default {
           <!-- 功能按钮组： 查询、重置、新增规则 -->
           <el-row class="p25">
             <el-col :span="16">
-              <el-button type="primary">查询</el-button>
-              <el-button type="info">重置</el-button>
-              <el-button type="primary">新增规则</el-button>
+              <el-button type="primary" @click="handleQuery">查询</el-button>
+              <el-button type="info" @click="handleReset">重置</el-button>
+              <el-button type="primary" @click="handleAdd">新增规则</el-button>
             </el-col>
           </el-row>
         </el-form>
@@ -143,14 +224,18 @@ export default {
       <!-- <r-table :data="tableData"></r-table> -->
       <div class="p20">
         <el-table :data="currentTableDate">
-          <el-table-column prop="attribute" label="规则名称"></el-table-column>
-          <el-table-column prop="category" label="规则类型"></el-table-column>
+          <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="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>
@@ -159,30 +244,17 @@ export default {
       <!-- 分页 -->
       <el-row>
         <el-col :span="24" class="flex" style="justify-content: right;">
-          <el-pagination
-            background
-            layout="prev, pager, next"
-            @current-change="handleCurrentChange"
-            :current-page="currentPage"
-            :hide-on-single-page="true"
-            :total="tableData.length"
-          >
+          <el-pagination background layout="prev, pager, next" @current-change="handleCurrentChange"
+            :current-page="currentPage" :hide-on-single-page="true" :total="tableData.length">
           </el-pagination>
         </el-col>
       </el-row>
     </el-card>
-        <!-- 规则详情弹窗 -->
-        <el-dialog :visible.sync="diglogOptions.visible" width="50%" :title="diglogOptions.title">
-            <!-- diglog 弹窗内容组件 -->
-            <component :is="diglogOptions.currentComponent" :data="tableData" :columns="columns"/>
-            <div slot="footer" class="dialog-footer">
-                <el-button @click="diglogOptions.visible = false">取 消</el-button>
-                <el-button type="primary" @click="diglogOptions.visible = false">确 定</el-button>
-            </div>
-        </el-dialog>
+    <!-- 规则详情弹窗 -->
+    <el-drawer :visible.sync="diglogOptions.visible" size="50%" :title="diglogOptions.title">
+      <!-- diglog 弹窗内容组件 -->
+      <component v-if="diglogOptions.visible" :is="diglogOptions.currentComponent" :data="tableData" :columns="columns"
+        :currentRow="diglogOptions.currentRow" />
+    </el-drawer>
   </div>
-</template>
-
-
-
-<style lang="scss" scoped></style>
+</template>
\ No newline at end of file
diff --git a/src/views/rules/components/edit-prompt-rule/Index.vue b/src/views/rules/components/edit-prompt-rule/Index.vue
index c84556c..f96a2dc 100644
--- a/src/views/rules/components/edit-prompt-rule/Index.vue
+++ b/src/views/rules/components/edit-prompt-rule/Index.vue
@@ -1,59 +1,116 @@
 <script>
-export default {
-    name: 'EditPromptRule',
-    data() {
-        return {
-            // 规则名称、属性、属性描述、关键词、题词示例、提示词
-            form: {
-                ruleName: '',
-                ruleAttribute: '',
-                ruleAttributeDesc: '',
-                ruleKeyword: '',
-                ruleExample: '',
-                rulePrompt: '',
-                ruleRemark: ''
-            }
-        }
-    },
-    methods: {
-        save() {
+import { getRuleDetail } from "@/api/rules/index";
+import { updatePromptRule } from "@/api/rules/index";
 
-        }
+export default {
+  name: 'EditPromptRule',
+  inject: ['diglogOptions'],
+  data() {
+    return {
+      // 规则名称、属性、属性描述、关键词、题词示例、提示词
+      form: {
+        id: '',
+        ruleName: '',
+        createdDate: '',
+        ruleType: '',
+        ruleList: []
+      }
     }
+  },
+  methods: {
+    handleAdd() {
+      const payload = {
+        attribute: '',
+        attributeDesc: '',
+        keyword: '',
+        example: '',
+        prompt: ''
+      };
+
+      this.form.ruleList.push(payload);
+    },
+    handleDelete() {
+      if (this.form.ruleList.length > 0) {
+        this.form.ruleList.pop();
+      }
+    },
+    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('保存失败');
+      });
+    }
+  },
+  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 || currentRow.id,
+        ruleType: content.ruleType,
+        ruleName: content.ruleName,
+        createdDate: content.createdDate,
+        ruleList: Array.isArray(content.ruleList) ? content.ruleList : []
+      };
+    }).catch(err => {
+      console.error('获取规则详情失败:', err);
+    });
+  }
 }
 </script>
 
 <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.ruleAttribute"></el-input>
-            </el-form-item>
-            <el-form-item label="属性描述">
-                <el-input v-model="form.ruleAttributeDesc"></el-input>
-            </el-form-item>
-            <el-form-item label="关键词">
-                <el-input v-model="form.ruleKeyword"></el-input>
-            </el-form-item>
-            <el-form-item label="题词示例">
-                <el-input v-model="form.ruleExample"></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-row class="flex" style="justify-content: right;">
-            <el-button type="primary" @click="save">+ 新增拆分规则</el-button>
-            <el-button type="primary" @click="save">- 删除拆分规则</el-button>
-        </el-row>
+  <div>
+    <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.attribute"></el-input>
+        </el-form-item>
+        <el-form-item label="属性描述">
+          <el-input v-model="item.attributeDesc"></el-input>
+        </el-form-item>
+        <el-form-item label="关键词">
+          <el-input v-model="item.keyword"></el-input>
+        </el-form-item>
+        <el-form-item label="题词示例">
+          <el-input v-model="item.example"></el-input>
+        </el-form-item>
+        <el-form-item label="提示词">
+          <el-input v-model="item.prompt"></el-input>
+        </el-form-item>
+        <el-form-item label="备注">
+          <el-input type="textarea" v-model="item.attributeDesc"></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="save">确 定</el-button>
+      </div>
     </div>
+  </div>
 </template>
 
 <style lang="css" scoped></style>
\ No newline at end of file
diff --git a/src/views/rules/components/edit-split-rule/Index.vue b/src/views/rules/components/edit-split-rule/Index.vue
index da726f9..14eebcf 100644
--- a/src/views/rules/components/edit-split-rule/Index.vue
+++ b/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>
\ No newline at end of file
+<style lang="css" scoped></style>
diff --git a/src/views/rules/components/info/index.vue b/src/views/rules/components/info/index.vue
index a3abced..6cfecff 100644
--- a/src/views/rules/components/info/index.vue
+++ b/src/views/rules/components/info/index.vue
@@ -1,51 +1,90 @@
 <script>
+import { getRuleDetail } from "@/api/rules/index";
 
 export default {
-    name: 'Info',
-    props:{
-        data: {
-            type: Object,
-            default: () => {}
-        },
-        columns: {
-            type: Array,
-            default: () => []
-        }
-    },
-    data() {
-        return {
-            // 规则名称、创建时间
-            form: {
-                ruleName: '',
-            }
-        }
-    },
-    methods: {
-        save() {    
-
-        }
+  name: 'Info',
+  props: {
+    // data: {
+    //   type: Object,
+    //   default: () => { }
+    // },
+    // columns: {
+    //   type: Array,
+    //   default: () => []
+    // }
+  },
+  inject: ['diglogOptions'],
+  data() {
+    return {
+      tableDate: {
+        data: [],
+        columns: []
+      },
+      // 规则名称、创建时间
+      form: {
+        ruleName: '',
+        createdDate: ''
+      }
     }
+  },
+  methods: {
+    save() {
+
+    }
+  },
+  beforeMount() {
+    // 获取规则详情
+    getRuleDetail(this.diglogOptions.currentRow.id).then(res => {
+      const { content } = res.content;
+      console.log('origin query request', content);
+      // 设置表单数据
+      this.form.ruleName = content.ruleName;
+      this.form.createdDate = content.createdDate;
+      // 设置表格数据
+      this.tableDate.data = content.ruleList;
+      // 设置表格列， 有两种方式
+
+      // 1. 是 提示词规则
+      if (content.ruleType.toString() === '1') {
+        this.tableDate.columns = [
+          { prop: 'titleLevel', key: '样式' },
+          { prop: 'ruleRegex', key: '提示词' },
+          { prop: 'description', key: '备注' }
+        ]
+      }
+      // 2. 是 拆分规则
+      else if (content.ruleType.toString() === '2') {
+        this.tableDate.columns = [
+          { prop: 'attribute', key: '属性' },
+          { prop: 'attributeDesc', key: '属性描述' },
+          { prop: 'keyword', key: '关键词' },
+          { prop: 'example', key: '题词示例' },
+          { prop: 'prompt', key: '提示词' }
+        ]
+      }
+    })
+  }
 }
 </script>
 
 <template>
-    <div>
-        <!-- 开头的 form 表格 -->
-        <el-form :model="form" label-width="100px">
-            <el-col :span="12">
-                <el-form-item label="规则名称">
-                    <el-input v-model="form.ruleName"></el-input>
-                </el-form-item>
-            </el-col>
-            <el-col :span="12">
-                <el-form-item label="创建时间">
-                    <el-input v-model="form.ruleName"></el-input>
-                </el-form-item>
-            </el-col>
-        </el-form>
-        <!-- 规则详情列表 -->
-        <r-table :deletion="false"></r-table>
-    </div>
+  <div>
+    <!-- 开头的 form 表格 -->
+    <el-form :model="form" label-width="100px">
+      <el-col :span="12">
+        <el-form-item label="规则名称">
+          <el-input v-model="form.ruleName"></el-input>
+        </el-form-item>
+      </el-col>
+      <el-col :span="12">
+        <el-form-item label="创建时间">
+          <el-input v-model="form.createdDate"></el-input>
+        </el-form-item>
+      </el-col>
+    </el-form>
+    <!-- 规则详情列表 -->
+    <r-table :deletion="false" :data="tableDate.data" :columns="tableDate.columns"></r-table>
+  </div>
 </template>
 
 <style lang="css" scoped></style>
\ No newline at end of file
diff --git a/src/views/track/Index.vue b/src/views/track/Index.vue
index 8776896..ab2e7db 100644
--- a/src/views/track/Index.vue
+++ b/src/views/track/Index.vue
@@ -53,46 +53,44 @@ export default {
   <div class="track-container">
     <el-card>
       <!-- 知识库信息 -->
-      <div>
-        <el-form>
-          <el-row>
-            <el-col :span="8">
-              <el-form-item label="知识库">
-                <el-select v-model="form.knowledge">
-                </el-select>
-              </el-form-item>
-            </el-col>
+      <el-form :model="form" label-width="100px">
+        <el-row>
+          <el-col :span="8">
+            <el-form-item label="知识库">
+              <el-select v-model="form.knowledge">
+              </el-select>
+            </el-form-item>
+          </el-col>
 
-            <el-col :span="8">
-              <el-form-item label="知识文件名称">
-                <el-select v-model="form.knowledgeName">
-                </el-select>
-              </el-form-item>
-            </el-col>
+          <el-col :span="8">
+            <el-form-item label="知识文件名称">
+              <el-select v-model="form.knowledgeName">
+              </el-select>
+            </el-form-item>
+          </el-col>
 
-            <el-col :span="8">
-              <el-form-item label="上传用户">
-                <el-select v-model="form.uploadUser">
-                </el-select>
-              </el-form-item>
-            </el-col>
+          <el-col :span="8">
+            <el-form-item label="上传用户">
+              <el-select v-model="form.uploadUser">
+              </el-select>
+            </el-form-item>
+          </el-col>
 
-            <el-col :span="8">
-              <el-form-item label="任务状态">
-                <el-select v-model="form.taskStatus">
-                </el-select>
-              </el-form-item>
-            </el-col>
-            <el-col :span="8">
-              <el-form-item label="任务时间">
-                <el-date-picker v-model="form.taskTime" type="daterange" unlink-panels
-                                range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
-                </el-date-picker>
-              </el-form-item>
-            </el-col>
-          </el-row>
-        </el-form>
-      </div>
+          <el-col :span="8">
+            <el-form-item label="任务状态">
+              <el-select v-model="form.taskStatus">
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="任务时间">
+              <el-date-picker v-model="form.taskTime" type="daterange" unlink-panels range-separator="至"
+                start-placeholder="开始日期" end-placeholder="结束日期">
+              </el-date-picker>
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </el-form>
 
       <!-- 任务列表 -->
       <div>
@@ -117,7 +115,7 @@ export default {
         </el-table>
         <!-- 弹出提示框， 里面是各种详情内容 -->
         <el-dialog title="上传任务详情" :visible.sync="infoDialogVisible" width="50%"
-                   :before-close="() => infoDialogVisible = false">
+          :before-close="() => infoDialogVisible = false">
           <knowledge-info :form="activeForm"></knowledge-info>
         </el-dialog>
       </div>
@@ -126,8 +124,7 @@ export default {
 </template>
 
 <style lang="scss" scoped>
-
 .track-container {
- padding: 20px 20px; 
+  padding: 20px 20px;
 }
 </style>