Web/admin.ui.plus-master/src/views/admin/authorize/softwarePackageManagement/components/search-history.vue

<template>
  <div class="layout-pd">
    <el-card shadow="hover">
      <div class="page-header">
        <el-breadcrumb separator="/">
          <el-breadcrumb-item :to="{ path: '/software-management' }">软件包管理</el-breadcrumb-item>
          <el-breadcrumb-item>历史版本记录</el-breadcrumb-item>
        </el-breadcrumb>
        <el-button 
          type="primary" 
          icon="ele-ArrowLeft" 
          @click="handleBack"
          class="back-button"
        >
          返回列表
        </el-button>
      </div>

      <el-form :model="formData.editData" ref="formRef" v-loading="formData.loading" size="default" label-width="120px">
        <el-row :gutter="35">
          <!-- 项目基本信息 -->
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
            <el-form-item label="项目名称:" prop="projectName">
              <span>{{formData.editData.projectName || '暂无数据'}}</span>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
            <el-form-item label="项目编码:" prop="projectCode">
              <span>{{formData.editData.projectCode || '暂无数据'}}</span>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
            <el-form-item label="项目介绍:" prop="projectDescription">
              <span>{{formData.editData.projectDescription || '暂无数据'}}</span>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
            <el-form-item label="项目版本:" prop="version">
              <span>{{formData.editData.version || '暂无数据'}}</span>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
            <el-form-item label="项目上线时间:" prop="projectLaunchDate">
              <span>{{formData.editData.createdTime || '暂无数据'}}</span>
            </el-form-item>
          </el-col>
          
          <!-- 软件相关信息 -->
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
            <el-form-item label="设备类型:" prop="equipmentType">
              <span>{{formData.editData.equipmentType || '暂无数据'}}</span>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
            <el-form-item label="软件类型:" prop="softwareType">
              <span>{{formData.editData.softwareType || '暂无数据'}}</span>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
            <el-form-item label="软件包名称:" prop="softwareName">
              <span>{{formData.editData.softwareName || '暂无数据'}}</span>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
            <el-form-item label="软件说明:" prop="explain">
              <span>{{formData.editData.explain || '暂无数据'}}</span>
            </el-form-item>
          </el-col>
          
          <!-- 统计信息 -->
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
            <el-form-item label="下载次数:" prop="downNum">
              <span>{{formData.editData.numberOfDownloads || 0}}</span>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
            <el-form-item label="状态:" prop="state">
              <span>{{getStateText(formData.editData.state) || '暂无数据'}}</span>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
            <el-form-item label="发布时间:" prop="pubDate">
              <span>{{formatDate(formData.editData.pubDate) || '暂无数据'}}</span>
            </el-form-item>
          </el-col>
          
          <!-- 历史版本时间线 -->
          <el-col :xs="24" class="mb20">
            <el-form-item label="历史版本记录:">
              <div v-if="formData.loading">
                <el-skeleton :rows="5" animated></el-skeleton>
              </div>
              <div v-else-if="formData.editData.softVersions.length === 0">
                <el-empty description="暂无历史版本记录" />
              </div>
              <el-timeline v-else style="max-width: 100%; margin-left: 0;">
                <el-timeline-item
                  v-for="(version, index) in formData.editData.softVersions"
                  :key="index"
                >
                    <el-card>
                      <h4> {{version.version}}</h4>
                    <p>{{version.explain || '无更新说明'}}</p>
                  </el-card>
                </el-timeline-item>
              </el-timeline>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref, watch } from "vue";
import { useRouter, useRoute } from "vue-router";
import { ElMessage, ElEmpty, ElSkeleton, ElTimeline, ElTimelineItem, ElCard } from "element-plus";
import { FormRules } from "element-plus";
import { HistoricalVersionRecordDto } from "/@/api/admin/productionManagement/slelistDto";
import { Api } from "/@/api/admin/productionManagement/slelist";

// 路由实例
const router = useRouter()
const route = useRoute()

/**数据对象 */
const formData = reactive({
  loading: false,
  editData: {
    guid: 0, // 接口返回的ID（数值类型）
    projectName: '',
    projectCode: '',
    projectDescription: '',
    projectLaunchDate: '',
    equipmentType: '',
    softwareType: '',
    softwareName: '',
    version: '',
    explain: '',
    remark: '',
    downNum: 0,
    downloadUrl: '',
    fileName: '',
    state: 0,
    operatorTime: '',
    pubDate: '',
    createdTime: '',
    numberOfDownloads: 0,
    softVersions: []
  } as HistoricalVersionRecordDto,
  fileValue: null
});

/**
 * 移除了不必要的表单校验规则
 * 历史版本页面主要用于查看，无需校验逻辑
 */
const rules = reactive<FormRules>({});

/** 表单引用 */
const formRef = ref();

/** 页面挂载时加载数据 */
onMounted(() => {
  // 从路由参数获取guid
  const guid = route.query.guid
  if (guid) {
    formData.editData.guid = Number(guid)
    fetchHistoricalVersion()
  } else {
    ElMessage.warning('未获取到软件包信息')
    router.push('/software-management')
  }
})

/** 获取历史版本数据 */
const fetchHistoricalVersion = async () => {
  if (!formData.editData.guid) {
    ElMessage.warning('未获取到软件包ID');
    return;
  }

  formData.loading = true;
  try {
    const api = new Api();
    const res = await api.getHistory(formData.editData.guid);
    
    if (res.success) {
      formData.editData = res.data;
    } else {
      ElMessage.error(res.msg || '获取历史版本失败');
    }
  } catch (error: any) {
    console.error('获取历史版本数据失败', error);
    ElMessage.error(error.message || '获取历史版本失败');
  } finally {
    formData.loading = false;
  }
};

/** 状态码转文本 */
const getStateText = (state: number): string => {
  const stateMap = {
    0: '待发布',
    1: '已发布',
    2: '已失效'
  };
  return stateMap[state] || '未知状态';
};

/** 日期格式化 */
const formatDate = (dateStr: string): string => {
  if (!dateStr) return '-';
  try {
    const date = new Date(dateStr);
    return date.toLocaleString();
  } catch (error) {
    return dateStr;
  }
};

/** 返回列表页 */
const handleBack = () => {
  router.push('/product/softwarePackageManagement')
}

</script>

<style scoped lang="scss">
.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid #eee;
}

.back-button {
  margin-top: 10px;
}

:deep(.el-form-item__label) {
  width: 120px !important;
  text-align: right;
  justify-content: flex-end;
  padding-right: 12px;
}

.el-timeline {
  margin-left: 20px;
}

.el-timeline-item {
  margin-bottom: 20px;
}

.el-card {
  margin-bottom: 10px;
  padding: 10px;
}
</style>