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

<template>
  <div class="container create-container">
    <el-card shadow="hover">
      <div slot="header" class="clearfix">
        <h3>创建知识库</h3>
      </div>
      <div class="card-body">
        <el-steps :active="active" simple finish-status="success">
          <el-step title="文件上传/预处理"></el-step>
          <el-step title="拆分配置"></el-step>
          <el-step title="题词配置"></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"
            ></step-split-config>
            <step-words ref="words" v-if="active === 2"></step-words>
          </transition>
        </div>
      </div>
      <div class="card-bottom">
        <el-button v-if="active === 0" type="primary" size="medium" @click="fetchApi">
          一键处理
        </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 type="primary" size="medium" @click="$router.history.go(-1)">取消</el-button>
      </div>
    </el-card>

    <!-- 添加预处理结果预览对话框 -->
    <el-drawer :visible.sync="visible" size="80%" title="预处理结果预览">
      <div style="height:calc(100% - 55px);">
        <r-miner-u :documentId="documentId" @saveMarkDown="saveMarkDown"></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 StepC
export default {
  name: 'create',
  data() {
    return {
      visible: false,
      active: 0,
      documentId: '1362161577009188864'
    }
  },
  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()
      }
    },
    fetchApi() {},
    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() {},
  mounted() {},
  computed: {}
}
</script>
<style scoped lang="scss">
/deep/ .el-drawer__header {
  margin-bottom: unset;
  border-bottom: 1px solid #eee;
  padding-bottom: 20px;
}

/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;
}

@keyframes slide-in {
  0% {
    transform: scale(0);
  }
  50% {
    transform: scale(1.25);
  }
  100% {
    transform: scale(1);
  }
}
</style>