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" :show-file-list="false" :data="form">
          <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="beMinerU">
          <el-radio-group v-model="form.beMinerU" size="medium">
            <el-radio :label="true" size="medium">是</el-radio>
            <el-radio :label="false" size="medium">否</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="是否ocr协助处理：" required prop="beOcr">
          <el-radio-group v-model="form.beOcr" size="medium">
            <el-radio :label="true" size="medium">是</el-radio>
            <el-radio :label="false" size="medium">否</el-radio>
          </el-radio-group>
        </el-form-item>
      </div>
    </el-form>

    <!-- 添加预处理结果预览对话框 -->
    <el-drawer :visible.sync="previewDialogVisible" size="80%" title="预处理结果预览" :before-close="handleClose">
      <div style="height:calc(100% - 55px);">
        <r-miner-u :documentId="documentId"></r-miner-u>
      </div>
    </el-drawer>
  </div>
</template>
<script>
import { uploadFileByCustom } from '@/api/generatedApi/index'
export default {
  name: 'preprocessing',
  data() {
    return {
      actionUrl: uploadFileByCustom(),

      headers: {},
      form: {
        radio: '1',
        beMinerU: false,
        beOcr: false,
        datasetId: this.$route.query.datasetId
      },
      previewDialogVisible: false, // 添加对话框显示控制变量
      documentId: null
    }
  },
  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) {
      console.log(response)
      if (response.content.result === '0') {
        this.$message({
          type: 'success',
          message: '上传成功'
        })
        // 如果是预处理
        if (this.form.beMinerU) {
          this.previewDialogVisible = true
        }
        this.documentId = response.content.content.id
        // 向上导入documentId
        this.$emit('getDocumentId', this.documentId)
        this.$emit('getUploadDetail', response.content.content)
      } else {
        this.$message({
          type: 'error',
          message: response.content.resultMessage
        })
      }
      // 显示预处理结果预览对话框
      // 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>