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

<template>
  <div id="preprocessing-container " class="mt20">
    <el-form label-width="170px" :model="form" ref="processForm">
      <el-form-item label="数据来源：" required prop="radio">
        <el-radio-group v-model="form.radio" size="medium" @change="getFileType">
          <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" @click="downloadTemplate">下载知识文件模板</el-button>
        </div>
      </el-form-item>
      <!-- 文件上传-->
      <el-form-item label="" required prop="file">
        <el-upload
          drag
          :action="form.radio === '1' ? uploadFileByCustom() : uploadFileByTemplate()"
          :headers="headers"
          class="upload-demo"
          :on-success="handleUploadSuccess"
          :before-upload="handleBeforeUpload"
          :show-file-list="false"
          :file-list="fieldList"
          :data="form"
        >
          <el-empty v-if="!uploadLoading">
            <template #description>
              <p>点击或将文件拖拽到这里上传</p>
              <p>支持扩展名：.xlsx .doc .docx .pdf .txt...</p>
            </template>
          </el-empty>
          <div v-else v-loading="uploadLoading" :element-loading-text="'文件上传中...'" style="height: 100%"></div>
        </el-upload>
      </el-form-item>

      <!-- 本地文件 -->
      <div v-if="form.radio === '1'">
        <el-form-item label="是否进行预处理：" required prop="beMinerU">
          <template slot="label">
            是否进行预处理
            <el-tooltip class="item" effect="dark" content="通过整合最先进的文档解析模型来提高内容提取质量" placement="top">
              <i class="el-icon-info ml5" style="color: #909399;"></i>
            </el-tooltip>
            ：
          </template>
          <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">
          <template slot="label">
            是否ocr协助处理
            <el-tooltip class="item" effect="dark" content="能更好的协助处理图片、表格类数据" placement="top">
              <i class="el-icon-info ml5" style="color: #909399;"></i>
            </el-tooltip>
            ：
          </template>
          <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>

    <!--    &lt;!&ndash; 添加预处理结果预览对话框 &ndash;&gt;-->
    <!--    <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, uploadFileByTemplate } from '@/api/generatedApi/index'
export default {
  name: 'preprocessing',
  data() {
    return {
      uploadFileByCustom,
      uploadFileByTemplate,
      uploadLoading: false,
      headers: {},
      fieldList: [],
      form: {
        radio: '1',
        beMinerU: false,
        beOcr: false,
        datasetId: this.$route.query.datasetId
      },
      previewDialogVisible: false, // 添加对话框显示控制变量
      documentId: null
    }
  },
  props: {},
  watch: {},
  components: {},
  filters: {},
  methods: {
    getFileType() {
      this.$emit('getFileType', this.form.radio)
    },
    downloadTemplate() {},
    handleUploadSuccess(response, file) {
      this.fieldList = [file]
      this.uploadLoading = false
      if (response.content.result === '0') {
        this.$message({
          type: 'success',
          message: '上传成功'
        })
        // 如果是预处理
        if (this.form.beMinerU) {
          this.$emit('beMinerU', true)
        }
        this.documentId = response.content.content.id
        // 向上导入documentId
        this.$emit('getDocumentId', this.documentId)
        // 文件内容
        this.$emit('getUploadDetail', response.content.content)
        // 表单内容
        this.$emit('getForm', this.$refs.processForm, this.form)
      } else {
        this.$message({
          type: 'error',
          message: response.content.resultMessage
        })
      }
      // 显示预处理结果预览对话框
      // this.previewDialogVisible = true
    },
    handleBeforeUpload(file) {
      // 这里可以添加文件上传前的处理逻辑
      this.uploadLoading = 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>