feat: 增加规则管理页面

- 增加查看规则详情页面、修改拆分规则、修改题词规则
- package.json 增加高版本兼容

package.json

@@ -4,7 +4,7 @@
   "description": "A vue admin template with Element UI & axios & iconfont & permission control & lint",
   "author": "ebiz-digits",
   "scripts": {
-    "serve": "vue-cli-service serve",
+    "serve": "NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service serve",
     "build": "vue-cli-service build",
     "build:dev": "vue-cli-service build --mode dev",
     "dev": "vue-cli-service serve --mode dev",

src/router/generatedRouter/index.js

@@ -85,7 +85,7 @@ export default [
       {
         path: "/knowledge/track",
         name: "track",
-        component: () => import("@/views/knowledge/track/Index.vue"),
+        component: () => import("@/views/track/Index.vue"),
         meta: {
           breadcrumb: false,
           title: "任务轨迹",
@@ -94,7 +94,7 @@ export default [
       }, {
         path: "/rules",
         name: "rules",
-        component: () => import("@/views/knowledge/rules/Index.vue"),
+        component: () => import("@/views/rules/Index.vue"),
         meta: {
           title: "规则管理",
           icon: "el-icon-s-home"

src/views/rules/Index.vue

@@ -1,11 +1,24 @@
 <script>
-import { getRuleList } from '@/api/knowledge/task-page'
+import { getRuleList } from "@/api/knowledge/task-page";
-import { computed } from 'vue'
+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";
 
 export default {
     name: 'rules',
     data() {
         return {
+            // visibleDialog: {
+            //     info: false,
+            //     edit: false,
+            //     add: false
+            // },
+            diglogOptions: {
+                title: '',
+                visible: false,
+                width: '50%',
+                currentComponent: void 0,
+            },
             currentPage: 1,
             tableData: [],
 
@@ -17,6 +30,11 @@ export default {
             }
         }
     },
+    components: {
+        EditPromptRule,
+        EditSplitRule,
+        Info
+    },
     computed: {
         // 当前的分页数据
         currentTableDate() {
@@ -39,11 +57,23 @@ export default {
 
             this.currentPage = val;
         },
-
+        // 处理查看规则详情
-        edit(row, index) {
+        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);
         },
-        del(row, index) {
+        // 处理删除规则
+        handleDelete(row, index) {
             console.log(row, index);
         }
     }
@@ -113,9 +143,11 @@ export default {
                     <el-table-column label="操作">
                         <template #default="scope">
                             <el-button type="primary" size="mini" plain
-                                @click="edit(scope.row, scope.$index)">编辑</el-button>
+                                @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="del(scope.row, scope.$index)">删除</el-button>
+                                @click="handleDelete(scope.row, scope.$index)">删除</el-button>
                         </template>
                     </el-table-column>
                 </el-table>
@@ -129,7 +161,18 @@ export default {
                 </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>
     </div>
 </template>
 
+
+
 <style lang="scss" scoped></style>

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

@@ -0,0 +1,59 @@
+<script>
+export default {
+    name: 'EditPromptRule',
+    data() {
+        return {
+            // 规则名称、属性、属性描述、关键词、题词示例、提示词
+            form: {
+                ruleName: '',
+                ruleAttribute: '',
+                ruleAttributeDesc: '',
+                ruleKeyword: '',
+                ruleExample: '',
+                rulePrompt: '',
+                ruleRemark: ''
+            }
+        }
+    },
+    methods: {
+        save() {
+
+        }
+    }
+}
+</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>
+</template>
+
+<style lang="css" scoped></style>

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

@@ -0,0 +1,42 @@
+<script>
+import { Form } from 'element-ui';
+
+export default {
+    name: 'sEditSplitRule',
+    data() {
+        return {
+            // 表单数据有：规则名称、样式、提示词、备注
+            form:{
+                ruleName: '',
+                ruleStyle: '',
+                rulePrompt: '',
+                ruleRemark: ''
+            }
+        }
+    },
+    methods: {
+        
+    }   
+}
+</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.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>
+    </div>
+</template>
+
+<style lang="css" scoped></style>

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

@@ -0,0 +1,51 @@
+<script>
+
+export default {
+    name: 'Info',
+    props:{
+        data: {
+            type: Object,
+            default: () => {}
+        },
+        columns: {
+            type: Array,
+            default: () => []
+        }
+    },
+    data() {
+        return {
+            // 规则名称、创建时间
+            form: {
+                ruleName: '',
+            }
+        }
+    },
+    methods: {
+        save() {    
+
+        }
+    }
+}
+</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>
+</template>
+
+<style lang="css" scoped></style>

src/views/track/Index.vue

@@ -1,6 +1,6 @@
 <script>
 import { getDocByPage } from "@/api/knowledge/task-page";
-import KnowledgeInfo from "@/views/knowledge/track/views/knowledge-info/Index.vue";
+import KnowledgeInfo from "@/views/track/views/knowledge-info/Index.vue";
 
 export default {
   components: {