smart-bid-web/src/views/template/templateInfo/components/TemplateHistory.vue

<template>
  <div class="app-container">
    <!-- 页面头部：仅保留返回按钮 -->
    <div class="content-header">
      <div class="header-actions">
        <el-button class="reset-btn" @click="handleBack()" >返回</el-button>
      </div>
    </div>

    <!-- 页面主体：分两个区域 -->
    <div class="content-body">
      <!-- 区域1：模板信息 -->
      <div class="section-pane template-info-pane">
        <TemplateInfo ref="templateInfoRef" />
      </div>

      <!-- 区域2：版本内容（新增）- 修复：添加v-if控制渲染时机，确保templateId有值 -->
      <div class="section-pane version-content-pane" v-if="templateId">
        <!-- 将获取到的 analysisLabelId 通过 props 传递下去 -->
        <VersionContent
          :version-list="versionList"
          :analysis-label-id="analysisLabelId"
          :template-id="templateId"
        />
      </div>
    </div>
  </div>
</template>

<script>
import { decryptWithSM4 } from '@/utils/sm'
import TemplateInfo from './child/TemplateInfo.vue'
import VersionContent from './child/VersionContent.vue'
import { getTemplateInfoDetail, getTemplateHistoryVersions } from '@/api/template/templateInfo/templateInfo'

export default {
  name: 'TemplateHistory',
  components: {
    TemplateInfo,
    VersionContent
  },
  data() {
    return {
      templateId: null,
      versionList: [],
      analysisLabelId: '' // 新增：用于存储从模板详情中获取的标签组ID
    }
  },
  methods: {
    // 返回上一页
    handleBack() {
      const obj = { path: "/templateInfo/index" };
      this.$tab.closeOpenPage(obj);
    },

    // 加载模板历史数据
    async loadTemplateHistoryData() {
      if (!this.templateId) return

      try {
        // 并行调用两个接口
        const [templateInfoRes, versionListRes] = await Promise.all([
          getTemplateInfoDetail({ templateId: this.templateId }),
          getTemplateHistoryVersions(this.templateId)
        ])

        const templateInfo = templateInfoRes.data || {}
        this.versionList = versionListRes.data || []

        // 从模板详情中获取 analysisLabelId
        // 注意：这里的字段名需要根据你实际的API返回结构来确定
        this.analysisLabelId = templateInfo.analysisLabelId || ''

        console.log('模板详情:', templateInfo)
        console.log('版本列表:', this.versionList)
        console.log('获取到的 analysisLabelId:', this.analysisLabelId)

        // 将数据传递给 TemplateInfo 子组件
        if (this.$refs.templateInfoRef) {
          this.$refs.templateInfoRef.setFormData(templateInfo)
        }

      } catch (error) {
        console.error('加载模板历史失败：', error)
        this.$message.error('加载数据失败，请刷新页面重试。')
      }
    }
  },
  mounted() {
    // 从路由参数解析 templateId
    const { templateId: encryptedTemplateId } = this.$route.query
    if (encryptedTemplateId) {
      try {
        this.templateId = decryptWithSM4(encryptedTemplateId)
        // 修复：确保templateId是字符串或数字类型
        if (this.templateId === 'null' || this.templateId === 'undefined') {
          this.templateId = null
        } else {
          // 加载模板历史数据
          this.loadTemplateHistoryData()
        }
      } catch (e) {
        console.error('解析 templateId 失败：', e)
        this.$message.error('参数错误，无法加载数据')
      }
    }
  }
}
</script>

<style scoped lang="scss">
/* 样式部分保持不变 */
.app-container {
  padding: 24px;
  background: linear-gradient(180deg, #F1F6FF 20%, #E5EFFF 100%);
  min-height: 100vh;
  overflow: hidden;
}

.content-header {
  display: flex;
  justify-content: right;
  align-items: center;
  margin-bottom: 20px;
  flex-wrap: wrap;
  gap: 15px;
}

.header-actions {
  display: flex;
  gap: 12px;
}

.content-body {
  display: flex;
  flex-direction: column;
  gap: 24px;
  height: calc(100vh + 120px);
  overflow-y: auto;
  padding-right: 8px;
}

.section-pane {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0px 4px 20px rgba(31, 35, 55, 0.08);
  padding: 24px;
}

.reset-btn {
  background: #fff;
  border: 1px solid #dcdfe6;
  color: #606266;
  padding: 12px 24px;
  border-radius: 6px;
  box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;

  &:hover {
    background: #f5f7fa;
    color: #409EFF;
  }
}

.template-info-pane {
  max-height: 240px; // 根据业务调整固定高度
  overflow-y: auto;
  scrollbar-width: thin; // 美化滚动条（可选）
  scrollbar-color: #409EFF #f5f5f5;
}

// 版本内容区域：限制高度，超出滚动
.version-content-pane {
  flex: 1; // 占满剩余高度
  min-height: 400px; // 最小高度，避免过短
  overflow: hidden; // 内部子组件自己滚动，父容器不滚动
}

</style>