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 || '未知论文')"
          >
            <CommonInfoRow label="论文编号" :value="item.paperCode" />
            <CommonInfoRow label="发表/出版时间" :value="item.publicationDate ? formatDate(item.publicationDate) : '--'" />
            <CommonInfoRow label="发表/刊物论文集" :value="item.publicationName" />
            <CommonInfoRow label="论文类型" :value="getLabel(paperTypeOptions, item.paperType)" 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 || '未知著作')"
          >
            <CommonInfoRow label="著作编号" :value="item.workCode" />
            <CommonInfoRow label="著作类别" :value="getLabel(workClassOptions, item.workClass)" />
            <CommonInfoRow label="出版单位" :value="item.workPublisher" />
            <CommonInfoRow label="出版时间" :value="item.workPublicationDate ? formatDate(item.workPublicationDate) : '--'" />
            <CommonInfoRow label="所属单位" :value="item.deptName" 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 || '未知专利')"
          >
            <CommonInfoRow label="专利编号" :value="item.patentCode" />
            <CommonInfoRow label="所属单位" :value="item.deptName" />
            <CommonInfoRow label="专利类型" :value="getLabel(patentClassOptions, item.patentClass)" />
            <CommonInfoRow label="专利简介" :value="item.patentDesc" />
            <CommonInfoRow label="申请人" :value="item.applicantName" 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 || '未知奖项')"
          >
            <CommonInfoRow label="获奖编号" :value="item.awardCode" />
            <CommonInfoRow label="成果名称" :value="item.resultName" />
            <CommonInfoRow label="奖励类型" :value="getLabel(awardTypeOptions, item.awardType)" />
            <CommonInfoRow label="发证机关" :value="item.awardIssueAuthority" />
            <CommonInfoRow label="获奖级别" :value="getLabel(awardLevelOptions, item.awardLevel)" />
            <CommonInfoRow label="获奖等级" :value="getLabel(awardGradeOptions, item.awardGrade)" />
            <CommonInfoRow label="奖励类别" :value="getLabel(awardClassOptions, item.awardClass)" />
            <CommonInfoRow label="获奖日期" :value="item.awardDate ? formatDate(item.awardDate) : '--'" />
            <CommonInfoRow label="成果形式" :value="item.resultForm" />
            <CommonInfoRow label="所属单位" :value="item.deptName" />
            <CommonInfoRow label="合作类型" :value="getLabel(cooperationTypeOptions, item.cooperationType)" />
            <CommonInfoRow label="项目来源" :value="item.projectSource" noBorder />
          </CommonListCard>
        </template>
      </view>

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