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

<template>
  <div class="render-container">
    <div slot="header" class="clearfix">
      <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">
          <step-preprocessing
            ref="stepPreProcessing"
            v-if="active === 0"
            @getForm="getForm"
            @getDocumentId="getDocumentId"
          ></step-preprocessing>
          <step-split-config
            ref="splitConfig"
            v-if="active === 1"
            @previewConfirmed="handlePreviewConfirm"
            @handleReUpload="handleReUpload"
            :documentId="documentId"
          ></step-split-config>
          <step-words ref="words" v-if="active === 2"></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"
        >下一步</el-button
      >
      <el-button
        type="primary"
        size="medium"
        @click="nextStep"
        v-if="active === 2"
        >确定</el-button
      >
      <el-button
        v-if="active === 0"
        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 { directEmbedding } from '@/api/generatedApi'
// import StepC
export default {
  name: 'create',
  data() {
    return {
      magic,
      visible: false,
      active: 0,
      documentId: '1365038001244180480'
    }
  },
  props: {},
  watch: {},
  components: {
    StepSplitConfig: SplitConfig,
    StepPreprocessing,
    StepWords: Words
  },
  filters: {},
  methods: {
    saveMarkDown() {
      this.visible = false
      this.active++
    },
    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) {
          directEmbedding({ documentId: e }).then(res => {
            if (res) {
              this.$message.success('处理成功')
              this.$router.go(-1)
            }
          })
        } else {
          this.$message.error('上传失败,请重试')
        }
      })
    },
    getDocumentId(id) {
      this.documentId = id
    },
    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() {
      this.active = 0
    }
  },
  created() {
    let { documentId, datasetId, activeLevel } = this.$route.query
    if (documentId) {
      this.documentId = documentId
    }
    if (activeLevel) {
      this.active = activeLevel
    }
  },
  mounted() {},
  computed: {}
}
</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);
  }
}
</style>