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

<template>
  <div class="split-preview">
    <r-dialog title="拆分结果预览" :visible.sync="visible" width="60%" :before-close="handleClose">
      <div v-loading="loading" class="preview-content">
        <template v-if="!loading && previewData">
          <el-tree class="tree" :data="previewData" :props="defaultProps" default-expand-all @node-click="handleNodeClick"></el-tree>
        </template>
        <el-empty v-else-if="!loading && !previewData" description="暂无预览数据"></el-empty>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button size="medium" @click="handleReUpload">重新上传</el-button>
        <el-button size="medium" type="primary" @click="handleConfirm">下一步</el-button>
        <el-button size="medium" type="primary" @click="emitKnowledgeDataset">直接上传至知识库</el-button>
      </span>
    </r-dialog>
  </div>
</template>

<script>
import { embedding } from '@/api/generatedApi'

export default {
  name: 'SplitPreview',
  props: {
    documentId: {
      type: String,
      default: ''
    },
    visible: {
      type: Boolean,
      default: false
    },
    previewData: {
      type: Array
    },
    isAutoSplit: {
      type: Boolean,
      default: true
    },
    loading: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      defaultProps: {
        children: 'children',
        label: 'paragraphTitle'
      }
    }
  },
  methods: {
    emitKnowledgeDataset() {
      embedding({ documentId: this.documentId }).then(res => {
        if (res) {
          this.$router.push({
            path: '/knowledge/detail/segments',
            query: {
              documentId: this.documentId,
              datasetId: this.$route.query.datasetId
            }
          })
        }
      })
    },
    handleNodeClick() {},
    handleClose() {
      this.$emit('update:visible', false)
    },
    handleReUpload() {
      this.$emit('handleReUpload')
    },
    handleConfirm() {
      this.$emit('confirm')
    }
  }
}
</script>

<style lang="scss" scoped>
.split-preview {
  .preview-content {
    min-height: 200px;
    overflow-y: auto;
  }

  .preview-list {
    .preview-item {
      margin-bottom: 16px;
      border: 1px solid #ebeef5;
      border-radius: 4px;

      .item-header {
        padding: 8px 16px;
        background-color: #f5f7fa;
        border-bottom: 1px solid #ebeef5;
        display: flex;
        justify-content: space-between;

        .item-title {
          font-weight: bold;
        }

        .item-info {
          color: #909399;
        }
      }

      .item-content {
        padding: 16px;
        white-space: pre-wrap;
        max-height: 200px;
        overflow-y: auto;
      }
    }
  }

  .stat-info {
    padding: 16px;
  }
}
</style>