labsop_scientific_h5/pages/project/components/detail/ProjectAchievements.vue

<template>
  <view class="module-container">
    <uv-empty v-if="projectStore.fetchAchievementLoading" mode="list" text="加载中..."></uv-empty>
    <view v-else-if="isEmpty" class="empty-wrap">
       <uv-empty mode="data" text="暂无科研成果"></uv-empty>
    </view>
    <view v-else class="list-wrapper">
      
      <!-- 标签页切换 -->
      <view class="tabs-wrapper">
        <uv-tabs :list="achievementTabs" :current="currentTab" @click="handleTabClick" lineColor="#1c9bfd" activeColor="#1c9bfd" inactiveColor="#666"></uv-tabs>
      </view>

      <!-- 学术论文 -->
      <view class="section" v-show="currentTab === 0">
        <uv-empty v-if="!projectStore.paperData || projectStore.paperData.length === 0" mode="data" text="暂无学术论文"></uv-empty>
        <template v-else>
          <CommonListCard 
            v-for="(item, index) in projectStore.paperData" 
            :key="index" 
            :title="(index + 1) + '. ' + (item.paperName || '未知论文')"
            @click="handleItemClick(item, 0)"
          >
            <CommonInfoRow label="论文编号" :value="item.paperCode" />
            <CommonInfoRow label="发表时间" :value="item.publicationDate ? formatDate(item.publicationDate) : '--'" noBorder />
          </CommonListCard>
        </template>
      </view>

      <!-- 学术著作 -->
      <view class="section" v-show="currentTab === 1">
        <uv-empty v-if="!projectStore.workData || projectStore.workData.length === 0" mode="data" text="暂无学术著作"></uv-empty>
        <template v-else>
          <CommonListCard 
            v-for="(item, index) in projectStore.workData" 
            :key="index" 
            :title="(index + 1) + '. ' + (item.workName || '未知著作')"
            @click="handleItemClick(item, 1)"
          >
            <CommonInfoRow label="著作编号" :value="item.workCode" />
            <CommonInfoRow label="出版时间" :value="item.workPublicationDate ? formatDate(item.workPublicationDate) : '--'" noBorder />
          </CommonListCard>
        </template>
      </view>

      <!-- 学术专利 -->
      <view class="section" v-show="currentTab === 2">
        <uv-empty v-if="!projectStore.patentData || projectStore.patentData.length === 0" mode="data" text="暂无学术专利"></uv-empty>
        <template v-else>
          <CommonListCard 
            v-for="(item, index) in projectStore.patentData" 
            :key="index" 
            :title="(index + 1) + '. ' + (item.patentName || '未知专利')"
            @click="handleItemClick(item, 2)"
          >
            <CommonInfoRow label="专利编号" :value="item.patentCode" />
            <CommonInfoRow label="专利类型" :value="getLabel(patentClassOptions, item.patentClass)" noBorder />
          </CommonListCard>
        </template>
      </view>

      <!-- 奖项荣誉 -->
      <view class="section" v-show="currentTab === 3">
        <uv-empty v-if="!projectStore.awardData || projectStore.awardData.length === 0" mode="data" text="暂无奖项荣誉"></uv-empty>
        <template v-else>
          <CommonListCard 
            v-for="(item, index) in projectStore.awardData" 
            :key="index" 
            :title="(index + 1) + '. ' + (item.awardName || '未知奖项')"
            @click="handleItemClick(item, 3)"
          >
            <CommonInfoRow label="获奖编号" :value="item.awardCode" />
            <CommonInfoRow label="获奖日期" :value="item.awardDate ? formatDate(item.awardDate) : '--'" noBorder />
          </CommonListCard>
        </template>
      </view>

    </view>

    <!-- 详情弹窗 -->
    <uv-popup ref="detailPopup" mode="bottom" round="20" bgColor="#f8f9fc">
      <view class="detail-popup-content">
        <view class="popup-header">
          <text class="title">业绩详情</text>
          <uv-icon name="close" @click="closePopup" color="#999" size="20"></uv-icon>
        </view>
        <scroll-view scroll-y class="detail-scroll">
          <view class="detail-list">
            <view class="detail-item" v-for="(field, idx) in currentFields" :key="idx">
              <text class="label">{{ field.label }}</text>
              <view class="value-wrap">
                <text class="value">{{ formatFieldValue(field) }}</text>
              </view>
            </view>
          </view>
        </scroll-view>
      </view>
    </uv-popup>
  </view>
</template>

<script setup lang="ts">
import { onMounted, computed, watch, ref } from 'vue';
import { useProjectStore } from '@/store/modules/project';
import { formatDate } from '@/utils/date';
import { 
  paperTypeOptions, 
  workClassOptions, 
  patentClassOptions, 
  awardLevelOptions, 
  awardGradeOptions, 
  awardClassOptions, 
  awardTypeOptions, 
  cooperationTypeOptions 
} from '@/constants';
import CommonListCard from '@/components/ui/CommonListCard.vue';
import CommonInfoRow from '@/components/ui/CommonInfoRow.vue';

/**
 * 接收来自父组件的属性
 * projectId: 项目内码
 * projectType: 项目分类标识
 * projectData: 包含 projectCode 的项目基本信息
 */
const props = defineProps<{
  projectId: number;
  projectType: string;
  projectData: any;
}>();

const projectStore = useProjectStore();

// 当前激活的子 Tab 索引 (学术论文/著作/专利/奖项)
const currentTab = ref(0);
const detailPopup = ref();
const activeItem = ref<any>(null);
const activeTabType = ref(0);

// 详情字段配置
const fieldConfigs = {
  paper: [
    { label: '论文名称', key: 'paperName' },
    { label: '论文编号', key: 'paperCode' },
    { label: '发表/出版时间', key: 'publicationDate', isDate: true },
    { label: '发表/刊物论文集', key: 'publicationName' },
    { label: '论文类型', key: 'paperType', options: paperTypeOptions },
  ],
  work: [
    { label: '著作名称', key: 'workName' },
    { label: '著作编号', key: 'workCode' },
    { label: '著作类别', key: 'workClass', options: workClassOptions },
    { label: '出版单位', key: 'workPublisher' },
    { label: '出版时间', key: 'workPublicationDate', isDate: true },
    { label: '所属单位', key: 'deptName' },
  ],
  patent: [
    { label: '专利名称', key: 'patentName' },
    { label: '专利编号', key: 'patentCode' },
    { label: '所属单位', key: 'deptName' },
    { label: '专利类型', key: 'patentClass', options: patentClassOptions },
    { label: '专利简介', key: 'patentDesc' },
    { label: '申请人', key: 'applicantName' },
  ],
  award: [
    { label: '奖励名称', key: 'awardName' },
    { label: '获奖编号', key: 'awardCode' },
    { label: '成果名称', key: 'resultName' },
    { label: '奖励类型', key: 'awardType', options: awardTypeOptions },
    { label: '发证机关', key: 'awardIssueAuthority' },
    { label: '获奖级别', key: 'awardLevel', options: awardLevelOptions },
    { label: '获奖等级', key: 'awardGrade', options: awardGradeOptions },
    { label: '奖励类别', key: 'awardClass', options: awardClassOptions },
    { label: '获奖日期', key: 'awardDate', isDate: true },
    { label: '成果形式', key: 'resultForm' },
    { label: '所属单位', key: 'deptName' },
    { label: '合作类型', key: 'cooperationType', options: cooperationTypeOptions },
    { label: '项目来源', key: 'projectSource' },
  ]
};

const currentFields = computed(() => {
  if (activeTabType.value === 0) return fieldConfigs.paper;
  if (activeTabType.value === 1) return fieldConfigs.work;
  if (activeTabType.value === 2) return fieldConfigs.patent;
  return fieldConfigs.award;
});

const formatFieldValue = (field: any) => {
  if (!activeItem.value) return '--';
  const val = activeItem.value[field.key];
  if (field.isDate) return val ? formatDate(val) : '--';
  if (field.options) return getLabel(field.options, val);
  return val || '--';
};

/**
 * 详情点击显示
 */
const handleItemClick = (item: any, type: number) => {
  activeItem.value = item;
  activeTabType.value = type;
  detailPopup.value.open();
};

const closePopup = () => {
  detailPopup.value.close();
};

const achievementTabs = ref([
  { name: '学术论文' },
  { name: '学术著作' },
  { name: '学术专利' },
  { name: '奖项荣誉' }
]);

/**
 * 切换子 Tab 处理
 */
const handleTabClick = (item: any) => {
  currentTab.value = item.index;
};

/**
 * 计算属性：检查所有成果数据是否都为空
 * 用于触发全局暂无数据的占位图展示
 */
const isEmpty = computed(() => {
  return (
    (!projectStore.paperData || projectStore.paperData.length === 0) &&
    (!projectStore.workData || projectStore.workData.length === 0) &&
    (!projectStore.patentData || projectStore.patentData.length === 0) &&
    (!projectStore.awardData || projectStore.awardData.length === 0)
  );
});

/**
 * 监听项目代码变化，联动发起成果数据查询
 */
watch(() => props.projectData?.projectCode, (code) => {
  if (code) {
    projectStore.fetchAchievements(code, props.projectType);
  }
}, { immediate: true });

/**
 * 通用方法：根据字典值获取对应的展示文本
 * @param options 常量字典数组 (包含 dictLabel 和 dictValue)
 * @param value 待匹配的代码值
 * @returns 匹配到的中文名称，未匹配到返回 '--'
 */
const getLabel = (options: any[], value: string | number) => {
  if (!value) return '--';
  const match = options.find((item) => item.dictValue == value);
  return match ? match.dictLabel : '--';
};

</script>

<style lang="scss" scoped>
.module-container {
  min-height: 400rpx;
  position: relative;
}

.empty-wrap {
  min-height: 300rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}

.tabs-wrapper {
  background-color: #fff;
  border-radius: 16rpx;
  overflow: hidden;
  box-shadow: 0 4rpx 16rpx rgba(0,0,0,0.03);
  margin-bottom: 24rpx;
}

.section {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}

.detail-popup-content {
  padding: 40rpx 30rpx;
  max-height: 85vh;
  display: flex;
  flex-direction: column;

  .popup-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 40rpx;
    padding: 0 10rpx;

    .title {
      font-size: 34rpx;
      font-weight: bold;
      color: #333;
    }
  }

  .detail-scroll {
    flex: 1;
    overflow: hidden;
  }

  .detail-list {
    display: flex;
    flex-direction: column;
    gap: 30rpx;

    .detail-item {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      padding-bottom: 24rpx;
      border-bottom: 1rpx solid #efefef;

      .label {
        font-size: 28rpx;
        color: #909399;
        flex-shrink: 0;
        margin-right: 30rpx;
      }

      .value-wrap {
        display: flex;
        align-items: baseline;
        justify-content: flex-end;
        flex: 1;

        .value {
          font-size: 28rpx;
          color: #333;
          text-align: right;
          word-break: break-all;
        }
      }
    }
  }
}
</style>