feat(rule): 编辑和预览组件和知识库显示同步

1.  显示换成 `@/views/knowledge/detail/components/*/AddRule.vue`

src/views/rules/Index.vue

@@ -1,7 +1,8 @@
 <script>
 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 EditPromptRule from '@/views/knowledge/detail/components/words/AddRule.vue'
+import EditSplitRule from '@/views/knowledge/detail/components/split/AddRule.vue'
+
 import AddRules from './components/add-rules/index.vue'
 import Info from './components/info/index.vue'
 
@@ -66,8 +67,7 @@ export default {
         title: '',
         visible: false,
         width: '50%',
-        currentComponent: void 0,
-        currentRow: void 0
+        currentComponent: void 0
       },
       tableData: [],
       // 查询表单
@@ -104,7 +104,8 @@ export default {
   },
   watch: {
     form: {
-      handler() {},
+      handler() {
+      },
       deep: true
     }
   },
@@ -151,19 +152,24 @@ export default {
     },
     // 处理查看规则详情
     handleInfoVisible(row) {
-      this.dialogOptions.title = '查看规则详情'
-      this.dialogOptions.currentComponent = 'Info'
-      this.dialogOptions.visible = true
-      this.dialogOptions.currentRow = row
+      this.handleEdit(row, true)
     },
     // 处理修改规则
-    handleEdit(row) {
-      this.dialogOptions.title = '修改规则'
+    handleEdit(row, isPreview = false) {
+      console.log(`isPreview`, isPreview)
       this.dialogOptions.currentComponent = row.ruleType === 1 ? 'EditSplitRule' : 'EditPromptRule'
-      this.dialogOptions.visible = true
-      this.dialogOptions.currentRow = row
+
+      if (this.dialogOptions.currentComponent === 'EditPromptRule') {
+        this.$nextTick(() => {
+          this.$refs.editPromptRule.init(row.id, { preview: isPreview })
+        })
+      } else if (this.dialogOptions.currentComponent === 'EditSplitRule') {
+        this.$nextTick(() => {
+          this.$refs.editSplitRule.init(row.id, { preview: isPreview })
+        })
+      }
     },
-    // 处理删除规则
+    // 处理删除规则`
     handleDelete(row, index) {
       this.$confirm('此操作将永久删除该规则, 是否继续?', '提示', {
         confirmButtonText: '确定',
@@ -218,11 +224,6 @@ export default {
 <template>
   <div class="rules-container container">
     <el-card shadow="hover">
-      <!-- <template #header>
-        <div class="card-header">
-          <h3>规则管理</h3>
-        </div>
-      </template> -->
       <div class="card-body">
         <el-form :model="form" label-width="100px" size="small">
           <!-- 查询条件 -->
@@ -232,28 +233,23 @@ export default {
               <el-form-item label="规则类型">
                 <el-select v-model="form.ruleType" placeholder="请选择规则类型">
                   <el-option label="全部规则" value="">全部规则</el-option>
-                  <el-option v-for="item in tableConfig.ruleType" :key="item" :label="item" :value="reverseRuleType(item)" />
+                  <el-option v-for="item in tableConfig.ruleType" :key="item" :label="item"
+                             :value="reverseRuleType(item)" />
                 </el-select>
               </el-form-item>
             </el-col>
             <!-- 规则名称 -->
             <el-col :span="8">
               <el-form-item label="规则名称">
-                <el-input v-model="form.ruleName" placeholder="请输入规则名称"></el-input>
+                <el-input v-model="form.ruleName" placeholder="请输入规则名称" />
               </el-form-item>
             </el-col>
             <!-- 创建时间 -->
             <el-col :span="8">
               <el-form-item label="创建时间">
-                <el-date-picker
-                  v-model="form.createdDate"
-                  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>
@@ -271,29 +267,13 @@ export default {
 
       <!-- 下方规则列表 -->
       <div class="p20">
-        <r-table
-          :columns="tableConfig.columns"
-          :data="tableData"
-          :deletion="false"
-          :total="tableConfig.total"
-          @currentChange="handleCurrentChange"
-          @sizeChange="handleSizeChange"
-          :currentPage="tableConfig.currentPage"
-          :pageSize="tableConfig.pageSize"
-        />
+        <r-table :columns="tableConfig.columns" :data="tableData" :deletion="false" :total="tableConfig.total"
+                 @currentChange="handleCurrentChange" @sizeChange="handleSizeChange"
+                 :currentPage="tableConfig.currentPage"
+                 :pageSize="tableConfig.pageSize" />
       </div>
     </el-card>
-    <!-- 规则详情弹窗 -->
-    <el-drawer :visible.sync="dialogOptions.visible" size="50%" :title="dialogOptions.title">
-      <!-- diglog 弹窗内容组件 -->
-      <component
-        class="container"
-        v-if="dialogOptions.visible"
-        :is="dialogOptions.currentComponent"
-        :data="tableData"
-        :columns="columns"
-        :currentRow="dialogOptions.currentRow"
-      />
-    </el-drawer>
+    <edit-prompt-rule ref="editPromptRule" v-if="dialogOptions.currentComponent === 'EditPromptRule'" />
+    <edit-split-rule ref="editSplitRule" v-else-if="dialogOptions.currentComponent === 'EditSplitRule'" />
   </div>
 </template>