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">
        <div
          @click="createFiled"
          @dragover.prevent="handleDragOver"
          @dragleave.prevent="handleDragLeave"
          @drop.prevent="handleDrop"
          class="upload-demo"
          :class="{ 'drag-over': isDragOver }"
        >
          <el-empty v-if="!filed">
            <template #description>
              <p>点击或将文件拖拽到这里上传</p>
              <p>支持扩展名：.xlsx .doc .docx .pdf .txt...</p>
            </template>
          </el-empty>
          <el-result
            v-else
            icon="success"
            title="文件上传成功"
            :sub-title="`已上传文件：${filed.name}`"
            style="height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center;"
          >
            <template slot="extra">
              <el-button type="primary" size="medium" @click.stop="createFiled">重新上传</el-button>
            </template>
          </el-result>
        </div>
      </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协助处理：" v-if="form.beMinerU" 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'
import { downloadKnowledgeTemplate } from '@/api/knowledge/task-page'

export default {
  name: 'preprocessing',
  data() {
    return {
      filed: null,
      uploadLoading: false,
      headers: {},
      fieldList: [],
      form: {
        radio: '1',
        beMinerU: false,
        beOcr: false,
        datasetId: this.$route.query.datasetId
      },
      previewDialogVisible: false, // 添加对话框显示控制变量
      documentId: '',
      isDragOver: false
    }
  },
  props: {},
  watch: {
    'form.beMinerU': {
      handler(value) {
        console.log(`是否进行预处理：${value}`)
        // 如果不进行预处理，不进行ocr
        if (!value) {
          this.form.beOcr = false
        }
      },
      deep: true
    }
  },
  components: {},
  filters: {},
  methods: {
    getFileType() {
      this.$emit('getFileType', this.form.radio)
    },
    downloadTemplate() {
      console.log(`下载模板的链接是:${downloadKnowledgeTemplate().url}`)
      window.open(downloadKnowledgeTemplate().url, '_blank')
    },

    // 生成filed
    createFiled() {
      let input = document.createElement('input')
      input.type = 'file'

      // 对文件的类型做出限制
      input.accept = '.xlsx,.doc,.docx,.pdf,.txt'

      input.onchange = e => {
        // this.$emit('getFile', e.target.files[0])
        this.filed = e.target.files[0]
        console.log(this.filed.name)
      }
      input.click()
    },

    uploadFiled() {
      if (!this.filed) {
        this.$message({
          type: 'error',
          message: '请上传文件'
        })
        return
      }
      let formData = new FormData()
      formData.append('file', this.filed)
      formData.append('datasetId', this.form.datasetId)
      let api = this.form.radio === '1' ? uploadFileByCustom : uploadFileByTemplate
      if (this.form.radio === '1') {
        formData.append('beMinerU', this.form.beMinerU)
        formData.append('beOcr', this.form.beOcr)
      }
      api(formData).then(response => {
        this.documentId = response.content.content
        // 向上导入documentId
        this.$emit('getDocumentId', this.documentId)
        // 文件内容
        this.$emit('getUploadDetail', response.content.content)
        // 表单内容
        this.$emit('getForm', this.form, this.$refs.processForm)
        if (this.form.beMinerU) {
          this.$emit('beMinerU', true)
        }
      })
    },
    handleDragOver() {
      this.isDragOver = true
    },

    handleDragLeave() {
      this.isDragOver = false
    },

    handleDrop(event) {
      this.isDragOver = false
      const files = event.dataTransfer.files
      this.filed = files[0]
    },
    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)
        }
        console.log(response.content.content)
        this.documentId = response.content.content
        // 向上导入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;
  }

  &.drag-over {
    border-color: #409eff;
    background-color: #ecf5ff;
  }

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

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

.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>