feat:知识库新增

src/views/knowledge/detail/components/preprocessing.vue

@@ -13,7 +13,9 @@
       </el-form-item>
       <!-- 文件上传-->
       <el-form-item label='' required prop='file'>
-        <el-upload drag :action='actionUrl' :headers='headers' class='upload-demo'>
+        <el-upload drag :action='actionUrl' :headers='headers'
+                   class='upload-demo' :on-success="handleUploadSuccess"
+                   :before-upload="handleBeforeUpload">
          <el-empty>
            <template #description>
              <p>点击或将文件拖拽到这里上传</p>
@@ -40,6 +42,32 @@
         </el-form-item>
       </div>
     </el-form>
+
+    <!-- 添加预处理结果预览对话框 -->
+    <el-dialog
+      title="预处理结果预览"
+      :visible.sync="previewDialogVisible"
+      width="80%"
+      :before-close="handleClose">
+      <div class="preview-container">
+        <div class="preview-left">
+          <div class="preview-title">原文件</div>
+          <div class="preview-content">
+            <!-- 原文件内容区域 -->
+          </div>
+        </div>
+        <div class="preview-right">
+          <div class="preview-title">Markdown</div>
+          <div class="preview-content">
+            <!-- Markdown内容区域 -->
+          </div>
+        </div>
+      </div>
+      <div slot="footer" class="dialog-footer">
+        <el-button size="medium" type="primary" @click="previewDialogVisible = false">保存并处理</el-button>
+        <el-button size="medium" @click="previewDialogVisible = false">取 消</el-button>
+      </div>
+    </el-dialog>
   </div>
 </template>
 <script>
@@ -54,7 +82,8 @@ export default {
         fileList:[],
         preprocessing:'1',
         ocr:'1',
-      }
+      },
+      previewDialogVisible: false // 添加对话框显示控制变量
     }
   },
   props: {},
@@ -84,7 +113,26 @@ export default {
     emitForm() {
       this.$emit('getForm', this.$refs.processForm,this.form)
     },
+    handleUploadSuccess(response, file, fileList) {
+      // 显示预处理结果预览对话框
+      this.previewDialogVisible = true;
+    },
+    handleClose(done) {
+      this.$confirm('确认关闭？')
+        .then(_ => {
+          done();
+        })
+        .catch(_ => {});
+    },
+    handleBeforeUpload(file) {
+      // 这里可以添加文件上传前的处理逻辑
+      console.log('开始上传文件:', file);
+      this.previewDialogVisible = true;
+      // 可以在这里进行文件类型、大小等验证
 
+      // 返回 true 继续上传，返回 false 停止上传
+      return true;
+    }
   },
   created() {
   },
@@ -121,4 +169,37 @@ export default {
 }
 #preprocessing-container {
 }
+
+.preview-container {
+  display: flex;
+  height: 500px;
+  border: 1px solid #dcdfe6;
+
+  .preview-left, .preview-right {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    border-right: 1px solid #dcdfe6;
+
+    &:last-child {
+      border-right: none;
+    }
+  }
+
+  .preview-title {
+    padding: 10px;
+    background-color: #f5f7fa;
+    border-bottom: 1px solid #dcdfe6;
+    font-weight: bold;
+  }
+
+  .preview-content {
+    flex: 1;
+    padding: 15px;
+    overflow-y: auto;
+  }
+}
+.dialog-footer{
+  text-align: center;
+}
 </style>