ebiz-ai-knowledge-manage/src/views/knowledge/detail/create.vue

<template>
  <div class="render-container">
    <div slot="header" class="clearfix flex">
      <div class="hover-back  mr5">
        <el-icon
          class="el-icon-arrow-left"
          style="font-size: 24px;cursor: pointer"
          @click.native="$router.history.go(-1)"
        ></el-icon>
      </div>
      <h3>上传知识</h3>
    </div>
    <div class="card-body mt20">
      <el-steps
        :active="active"
        simple
        finish-status="success"
        class="render-steps"
      >
        <el-step title="文件上传/预处理">
          <template slot="icon">
            <div class="icon-text" v-if="active === 0">STEP1</div>
            <div class="icon-text" v-else>1</div>
          </template>
        </el-step>
        <el-step title="文件拆分配置">
          <template slot="icon">
            <div class="icon-text" v-if="active === 1">STEP2</div>
            <div class="icon-text" v-else>2</div>
          </template>
        </el-step>
        <el-step title="题词拆分配置">
          <template slot="icon">
            <div class="icon-text" v-if="active === 2">STEP3</div>
            <div class="icon-text" v-else>3</div>
          </template>
        </el-step>
      </el-steps>

      <div class="components">
        <transition name="slide" appear mode="out-in">
          <div v-if="active === 0">
            <step-preprocessing
              ref="stepPreProcessing"
              v-if="!isMd"
              @getForm="getForm"
              @getDocumentId="getDocumentId"
            ></step-preprocessing>

            <r-miner-u
              class="mt10"
              v-else
              :documentId="documentId"
              :documentList="this.documentList"
              @saveMarkDown="saveMarkDown"
            ></r-miner-u>
          </div>

          <step-split-config
            ref="splitConfig"
            v-if="active === 1"
            :documentList="this.documentList"
            @previewConfirmed="handlePreviewConfirm"
            @handleReUpload="handleReUpload"
            :documentId="documentId"
          ></step-split-config>
          <step-words
            ref="words"
            v-if="active === 2"
            :documentList="this.documentList"
          ></step-words>
        </transition>
      </div>
    </div>
    <div class="card-bottom text-right">
      <el-button size="medium" @click="$router.history.go(-1)">取消</el-button>
      <el-button size="medium" @click="active--" v-if="active > 1"
        >上一步</el-button
      >
      <el-button
        type="primary"
        size="medium"
        @click="nextStep"
        v-if="active < 2 && !this.isMd"
        >下一步</el-button
      >
      <el-button
        type="primary"
        size="medium"
        @click="nextStep"
        v-if="active === 2"
        >确定</el-button
      >
      <el-button
        v-if="active === 0 && !this.isMd"
        type="primary"
        size="medium"
        class="line-button"
        @click="oneClickAction"
      >
        <img :src="magic" alt="" style="width: 12px;" />
        一键处理
      </el-button>
    </div>

    <!-- 添加预处理结果预览对话框 -->
    <el-drawer
      :visible.sync="visible"
      size="75%"
      title="预处理结果预览"
      :wrapperClosable="false"
      :destroy-on-close="true"
    >
      <div style="height:calc(100% - 35px);">
        <r-miner-u
          :documentId="documentId"
          @saveMarkDown="saveMarkDown"
          :visible="visible"
        ></r-miner-u>
      </div>
    </el-drawer>
  </div>
</template>
<script>
import StepPreprocessing from './components/preprocessing.vue'
import SplitConfig from '@/views/knowledge/detail/components/split/Index.vue'
import Words from '@/views/knowledge/detail/components/words/Index.vue'
import magic from '@/assets/images/konwledge/magic.png'
import { datasetDocumentEx, directEmbedding } from '@/api/generatedApi'
// import StepC
export default {
  name: 'create',
  data() {
    return {
      magic,
      visible: false,
      active: 0,
      documentId: '1365038001244180480',
      isMd: false,
      documentList: []
    }
  },
  props: {},
  watch: {},
  components: {
    StepSplitConfig: SplitConfig,
    StepPreprocessing,
    StepWords: Words
  },
  filters: {},
  methods: {
    saveMarkDown() {
      this.visible = false
      this.active++
      this.isMd = false
    },
    beMinerU() {
      setTimeout(() => {
        this.visible = true
      })
    },
    getForm(form) {
      if (form.radio === '2') {
        this.$router.go(-1)
        sessionStorage.setItem('documentId', this.documentId)
      } else if (form.beMinerU) {
        this.beMinerU()
      } else {
        this.saveMarkDown()
      }
    },
    oneClickAction() {
      this.$refs.stepPreProcessing.uploadFiled(e => {
        if (e) {
          this.$router.push({
            path: '/knowledge/reviewKnowledge',
            query: {
              documentId: e,
              datasetId: this.$route.query.datasetId,
              active: '0'
            }
          })

          // directEmbedding({ documentId: e }).then(res => {
          //   if (res) {
          //     this.$message.success('处理成功')
          //     this.$router.go(-1)
          //   }
          // })
        } else {
          this.$message.error('上传失败,请重试')
        }
      })
    },
    async getDocumentId(id) {
      this.documentId = id

      let splitDocIds = this.documentId.split(',')

      for (let i = 0; i < splitDocIds.length; i++) {
        let content = await this.getFileDetail(splitDocIds[i])
        this.documentList.push({
          name: content.knowledgeName,
          id: content.id
        })
      }
    },

    // 获取文件详情  主要是名字与ID
    async getFileDetail(documentId) {
      const res = await datasetDocumentEx({ documentId })
      if (res.content.result !== '0') {
        const errorMsg =
          '获取文件详情失败: ' + (res.content.resultMessage || '未知错误')
        this.$message.error(errorMsg)
        throw new Error(errorMsg)
      }
      return res.content.content
    },

    async nextStep() {
      if (this.active === 0) {
        this.$refs.stepPreProcessing.uploadFiled()
      } else if (this.active === 1) {
        await this.$refs.splitConfig.nextStep(this.documentId)
      } else if (this.active === 2) {
        await this.$refs.words.nextStep(this.documentId)
      }
    },
    // 预览完成
    handlePreviewConfirm() {
      this.active = 2
    },
    // 重新上传
    handleReUpload() {
      if (this.$route.query.activeLevel) {
        this.$router.replace(
          `/knowledge/detail/create?datasetId=${this.$route.query.datasetId}`
        )
        this.active = 0
      } else {
        this.active = 0
      }

      this.documentList = []
    }
  },
  created() {},
  async mounted() {
    let { documentId, datasetId, activeLevel, isMd } = this.$route.query
    if (documentId) {
      // 继续处理时 调用接口查询文件信息
      this.documentId = documentId
      await this.getDocumentId(documentId)
    }
    if (activeLevel !== undefined) {
      this.active = Number(activeLevel)
      switch (this.active) {
        case '0':
        case 0:
          if (isMd) {
            this.isMd = isMd
          }
          break
        case '1':
        case 1:
          setTimeout(() => {
            if (isMd) {
              this.$refs.splitConfig.previewOperation(documentId)
            }
          }, 1000)
          break
        case '2':
        case 2:
          setTimeout(() => {
            if (isMd) {
              this.$refs.words.getExtractResultOperation(documentId)
            }
          }, 1000)
          break
        default:
          break
      }
    }
  },
  computed: {},
  beforeRouteLeave(to, form, next) {
    this.visible = false
    next()
  }
}
</script>
<style scoped lang="scss">
/deep/ .card-bottom {
  position: relative;
  width: 100%;
  padding-top: 10px;

  &::after {
    content: '';
    //border-top: 1px solid #ebeef5;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
  }
}

.slide-enter-active {
  animation: slide-in 0.5s;
}
.slide-leave-active {
  animation: slide-in 0.5s reverse;
}

//slide-in
// 向左淡入淡出
@-webkit-keyframes slide-in {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
  }
}
.hover-back {
  padding: 1.5px 3px;
  &:hover {
    background: rgba(87, 104, 161, 0.2);
    border-radius: 5px;
  }
}
</style>