feat[knowledge]: 知识拆分预览

- 现在可以查看知识自定义拆分预览

src/views/knowledge/detail/components/split/AddRule.vue

@@ -1,55 +1,67 @@
 <template>
   <div>
     <!-- 添加预处理结果预览对话框 -->
-    <el-drawer :title="currentId ? '编辑知识拆分规则' : '新增知识拆分规则'" :visible.sync="dialogVisible" size="40%" :before-close="handleClose">
+    <el-drawer :title="currentId ? (isPreview? '预览' : '编辑')+'知识拆分规则' : '新增知识拆分规则'"
+               :visible.sync="dialogVisible" size="40%" :before-close="handleClose">
       <div class="content">
         <el-form ref="ruleForm" :model="form" :rules="rules" label-width="100px">
           <div class="form-section">
             <div class="section-title">基本信息</div>
             <el-row :gutter="20">
-              <el-col :span="12">
+              <el-col :span="isPreview? 24 : 12">
                 <el-form-item label="规则名称" prop="ruleName">
-                  <el-input v-model="form.ruleName" placeholder="请输入规则名称"></el-input>
+                  <el-input :disabled="isPreview" v-model="form.ruleName" placeholder="请输入规则名称" />
                 </el-form-item>
               </el-col>
-              <el-col :span="12">
+              <el-col v-if="!isPreview" :span="12">
-                <el-select v-model="searchValue" @change="queryExistingRules" filterable clearable placeholder="查询并导入现有规则">
+                <el-select v-model="searchValue" @change="queryExistingRules" filterable clearable
-                  <el-option v-for="item in ruleList" :key="item.id" :label="item.ruleName" :value="item.id"> </el-option>
+                           placeholder="查询并导入现有规则">
+                  <el-option v-for="item in ruleList" :key="item.id" :label="item.ruleName"
+                             :value="item.id" />
                 </el-select>
               </el-col>
             </el-row>
-            <p class="tips">支持中文、英文、数字、下划线(_)，50个字符以内，不能以下划线为开头</p>
+            <p v-if="!isPreview" class="tips">支持中文、英文、数字、下划线(_)，50个字符以内，不能以下划线为开头</p>
           </div>
 
           <div class="form-section" v-for="(rule, index) in form.ruleList" :key="index">
             <div class="section-title">
               拆分规则 {{ index + 1 }}
-              <el-button v-if="form.ruleList.length > 1" type="text" class="delete-btn" @click="removeRule(index)">
+              <el-button v-if="!isPreview && form.ruleList.length > 1" type="text" class="delete-btn"
+                         @click="removeRule(index)">
                 <i class="el-icon-delete"></i> 删除
               </el-button>
             </div>
             <el-form-item label="样式" :prop="'ruleList.' + index + '.titleLevel'">
-              <el-select v-model="rule.titleLevel" placeholder="请选择标题级别">
+              <el-select :disabled="isPreview" v-model="rule.titleLevel" placeholder="请选择标题级别">
-                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
+                <el-option v-for="item in options" :key="item.value" :label="item.label"
+                           :value="item.value"></el-option>
               </el-select>
             </el-form-item>
             <el-form-item label="关键词" :prop="'ruleList.' + index + '.ruleRegex'">
-              <el-input type="textarea" v-model="rule.ruleRegex" placeholder="请输入规则表达式"></el-input>
+              <el-input :disabled="isPreview" type="textarea" v-model="rule.ruleRegex"
+                        placeholder="请输入规则表达式"></el-input>
             </el-form-item>
             <el-form-item label="备注" :prop="'ruleList.' + index + '.description'">
-              <el-input type="textarea" v-model="rule.description" placeholder="请输入规则备注"></el-input>
+              <el-input :disabled="isPreview" type="textarea" v-model="rule.description"
+                        placeholder="请输入规则备注"></el-input>
             </el-form-item>
             <div class="text-right mb20">
-              <el-button type="primary" size="medium" @click="copyRule(index)">复制拆分规则</el-button>
+              <el-button v-if="!isPreview" type="primary" size="medium" @click="copyRule(index)">
+                复制拆分规则
+              </el-button>
             </div>
           </div>
 
           <div class="add-rule-btn">
-            <el-button type="primary" size="medium" @click="addSplitRule"> <i class="el-icon-plus"></i> 新增拆分规则 </el-button>
+            <el-button v-if="!isPreview" type="primary" size="medium" @click="addSplitRule">
+              <i class="el-icon-plus"></i>
+              新增拆分规则
+            </el-button>
           </div>
         </el-form>
       </div>
-      <div class="drawer-footer">
+      <div class="drawer-footer" v-if="!isPreview">
         <el-button size="medium" @click="handleClose">取 消</el-button>
         <el-button type="primary" size="medium" @click="handleSubmit">保 存</el-button>
       </div>
@@ -58,12 +70,13 @@
 </template>
 
 <script>
-import { addRuleSplit, getRuleDetail, updateRuleSplit, getRulesList } from '@/api/generatedApi'
+import { addRuleSplit, getRuleDetail, getRulesList, updateRuleSplit } from '@/api/generatedApi'
 
 export default {
   name: 'AddRule',
   data() {
     return {
+      isPreview: false,
       dialogVisible: false,
       currentId: null, // 当前编辑的规则ID
       form: {
@@ -109,7 +122,11 @@ export default {
         ruleName: [
           { required: true, message: '请输入规则名称', trigger: 'blur' },
           { max: 50, message: '长度不能超过50个字符', trigger: 'blur' },
-          { pattern: /^(?!_)[a-zA-Z0-9\u4e00-\u9fa5_]+$/, message: '支持中文、英文、数字、下划线(_)，不能以下划线为开头', trigger: 'blur' }
+          {
+            pattern: /^(?!_)[a-zA-Z0-9\u4e00-\u9fa5_]+$/,
+            message: '支持中文、英文、数字、下划线(_)，不能以下划线为开头',
+            trigger: 'blur'
+          }
         ],
         'ruleList.0.titleLevel': [{ required: true, message: '请选择标题级别' }],
         'ruleList.0.ruleRegex': [{ required: true, message: '请输入关键词', trigger: 'blur' }]
@@ -117,7 +134,9 @@ export default {
     }
   },
   methods: {
-    init(id) {
+    init(id, options = { preview: false }) {
+      this.isPreview = options.preview
+
       this.dialogVisible = true
       this.getRuleList()
       this.currentId = id

src/views/knowledge/detail/components/split/CustomSplitDialog.vue

@@ -5,7 +5,7 @@
       <el-row>
         <el-col :span="8">
           <el-form-item label="知识拆分规则">
-            <el-input v-model="form.ruleName" size="medium" placeholder="请输入知识拆分规则"></el-input>
+            <el-input size="small" v-model="form.ruleName" placeholder="请输入知识拆分规则"></el-input>
           </el-form-item>
         </el-col>
         <el-col :span="8">
@@ -14,7 +14,8 @@
       </el-row>
       <!-- 其他表单项 -->
     </el-form>
-    <r-table :columns="columns" :data="tableData" :isSelectOnly="true" :deletion="false" @selection-change="getCheckData"></r-table>
+    <r-table :columns="columns" :data="tableData" :isSelectOnly="true" :deletion="false"
+             @selection-change="getCheckData"></r-table>
     <!-- 添加 AddRule 组件 -->
     <add-rule ref="addRule" :ruleList="tableData" @getDataList="getDataList"></add-rule>
 
@@ -33,13 +34,13 @@
 </template>
 
 <script>
-import AddRule from './AddRule.vue' // 导入 AddRule 组件
+import addRule from './AddRule.vue' // 导入 AddRule 组件
 import { getRulesPage } from '@/api/generatedApi/index'
 
 export default {
   name: 'CustomSplitDialog',
   components: {
-    AddRule // 注册 AddRule 组件
+    addRule: addRule // 注册 AddRule 组件
   },
   props: {},
   data() {
@@ -79,9 +80,11 @@ export default {
       this.visible = false
     },
     handlePreview(row) {
+      this.$refs.addRule.init(row.id, { preview: true })
+      // return
       // 预览逻辑
-      console.log('Preview', row)
+      // console.log('Preview', row)
-      this.previewDialogVisible = true // 显示预览弹窗
+      // this.previewDialogVisible = true // 显示预览弹窗
     },
     handleEdit(row) {
       // 修改逻辑
@@ -99,7 +102,8 @@ export default {
         .then(_ => {
           done()
         })
-        .catch(_ => {})
+        .catch(_ => {
+        })
     }
   },
   computed: {