ebiz-ai-knowledge-manage/src/views/knowledge/detail/components/preprocessing.vue

<template>
  <div id='preprocessing-container '  class='mt20'>
    <el-form label-width='150px' :model='form' ref='processForm'>
      <el-form-item label='数据来源：' required prop='radio'>
        <el-radio-group v-model='form.radio' size='medium'>
          <el-radio-button label='1' size='medium'>使用本地文件</el-radio-button>
          <el-radio-button label='2' size='medium'>使用通用知识文件模板</el-radio-button>
        </el-radio-group>

        <div  class='mt10' v-if='form.radio==="2"'>
          <el-button type='primary' size='medium' class='fs14' >下载知识文件模板</el-button>
        </div>
      </el-form-item>
      <!-- 文件上传-->
      <el-form-item label='' required prop='file'>
        <el-upload drag :action='actionUrl' :headers='headers'
                   class='upload-demo' :on-success="handleUploadSuccess"
                   :before-upload="handleBeforeUpload">
         <el-empty>
           <template #description>
             <p>点击或将文件拖拽到这里上传</p>
             <p>支持扩展名：.xlsx .doc .docx .pdf .txt...</p>
           </template>
         </el-empty>
        </el-upload>
      </el-form-item>

      <!-- 本地文件 -->
      <div v-if='form.radio==="1"'>
        <el-form-item label='是否进行预处理：' required prop='preprocessing'>
          <el-radio-group v-model='form.preprocessing' size='medium'>
            <el-radio label='1' size='medium'>是</el-radio>
            <el-radio label='2' size='medium'>否</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label='是否ocr协助处理：' required prop='ocr'>
          <el-radio-group v-model='form.ocr' size='medium'>
            <el-radio label='1' size='medium'>是</el-radio>
            <el-radio label='2' size='medium'>否</el-radio>
          </el-radio-group>
        </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>
export default {
  name: 'preprocessing',
  data() {
    return {
      actionUrl:'',
      headers:{},
      form:{
        radio:'1',
        fileList:[],
        preprocessing:'1',
        ocr:'1',
      },
      previewDialogVisible: false // 添加对话框显示控制变量
    }
  },
  props: {},
  watch: {},
  components: {},
  filters: {},
  methods: {
    handleSuccess(response, file, fileList) {
      console.log(response, file, fileList)
    },
    handleError(err, file, fileList) {
      console.log(err, file, fileList)
    },
    beforeUpload(file) {
      console.log(file)
      return true
    },
    handleChange(file, fileList) {
      console.log(file, fileList)
    },
    handleRemove(file, fileList) {
      console.log(file, fileList)
    },
    handlePreview(file) {
      console.log(file)
    },
    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() {
  },
  mounted() {
  },
  computed: {}
}
</script>
<style scoped lang='scss'>
.upload-demo{
  //dashed 间隔大一点
  border-radius: 6px;
  border-style: dashed;
  border-width: 2px;
  border-color: #d9d9d9;
  height: 330px;
  width:50%;
  text-align: center;
  &:hover{
    border-color: #409EFF;
  }

   /deep/ .el-upload{
    width:100%;
     height: 100%;

     & .el-upload-dragger{
       width:100%;
       border:unset;
       height: 100%;

     }
  }
}
#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>