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

<template>
  <view class="setup-wrapper">
    <!-- 立项概览 -->
    <CommonSection title="立项概览" isFirst>
      <CommonInfoRow label="项目编号" :value="projectData?.projectCode" />
      <CommonInfoRow label="项目名称" :value="projectData?.projectName" />
      <CommonInfoRow label="项目学科分类" :value="getDictLabel('project_class', projectData?.disciplineFirstName)" />
      <CommonInfoRow label="负责人类型" :value="getDictLabel('sci_leader_type', projectData?.projectLeaderType)" />
      
      <CommonInfoRow v-if="projectData?.isClinicalTrial === '20'" label="项目类别"
        :value="getDictLabel('sci_pjt_class', projectData?.projectClass)" />
        
      <CommonInfoRow label="合同类别" :value="getDictLabel('contract_type', projectData?.contractType)" />
      <CommonInfoRow label="项目状态" :value="getStatusLabel(horizontalProjectStatusOptions, projectData?.projectStatus)" />
      <CommonInfoRow label="签订日期" :value="projectData?.signDate ? formatDate(projectData.signDate) : '--'" />
      <CommonInfoRow label="统计年度" :value="projectData?.statisticalYear" />
      
      <CommonInfoRow label="开始日期" :value="projectData?.planStartDate ? formatDate(projectData.planStartDate) : '--'" />
      <CommonInfoRow label="结束日期" :value="projectData?.planEndDate ? formatDate(projectData.planEndDate) : '--'" />
      
      <CommonInfoRow label="承接部门" :value="projectData?.deptName" />
      <CommonInfoRow label="负责人" :value="projectData?.projectLeaderName" />
      <CommonInfoRow label="负责人电话" :value="projectData?.projectLeaderPhone" />

      <CommonInfoRow label="合同经费(元)" :value="amountUnitFormatter(projectData?.contractFunds)" isAmount />
      <CommonInfoRow label="配套经费(元)" :value="amountUnitFormatter(projectData?.supportFunds)" isAmount />
      <CommonInfoRow label="总金额(元)" :value="amountUnitFormatter(projectData?.totalAmount)" isAmount />
      
      <CommonInfoRow label="到账金额(元)" :value="amountUnitFormatter(projectData?.arrivalFunds)" isAmount />
      <CommonInfoRow label="到账日期" :value="projectData?.arrivalDate ? formatDate(projectData.arrivalDate) : '--'" />

      <!-- 所属平台 -->
      <CommonInfoRow label="所属平台">
        <view class="platform-tags" v-if="platformList.length > 0">
          <view v-for="(item, index) in platformList" :key="index" class="platform-tag">
            {{ item.platformName === '其他' ? item.platformName : `${item.platformName} (${item.platformType})` }}
          </view>
        </view>
        <text v-else>--</text>
      </CommonInfoRow>

      <CommonInfoRow label="所属团队" :value="projectData?.belongTeam" noBorder />
    </CommonSection>
  </view>
</template>

<script setup lang="ts">
import { computed } from 'vue';
import { useDict } from '@/hooks/useDict';
import { formatDate } from '@/utils/date';
import { formatWithComma } from '@/utils/format';
import { horizontalProjectStatusOptions, getStatusLabel } from '@/constants/index';
import CommonSection from '@/components/ui/CommonSection.vue';
import CommonInfoRow from '@/components/ui/CommonInfoRow.vue';

const props = defineProps<{
  projectData: any;
}>();

const { getDictLabel } = useDict(
  'project_class', 
  'sci_leader_type', 
  'sci_pjt_class', 
  'contract_type'
);

/**
 * 计算属性：所属平台解析
 */
const platformList = computed(() => {
  const belong = props.projectData?.belongPlatform;
  if (belong) {
    if (belong === '其他') return [{ platformName: '其他' }];
    try {
      const data = JSON.parse(belong);
      return Array.isArray(data) ? data : [];
    } catch (e) {
      return [{ platformName: belong }];
    }
  }
  return [];
});

/**
 * 平台信息显示转换
 */
const platformDisplay = computed(() => {
  const belong = props.projectData?.belongPlatform;
  if (belong) {
    if (belong === '其他') return '其他';
    try {
      const data = JSON.parse(belong);
      if (Array.isArray(data)) {
        return data.map((item: any) => item.platformName === '其他' ? item.platformName : `${item.platformName} (${item.platformType})`).join(', ');
      }
    } catch (e) {
      return belong;
    }
  }
  return '--';
});

const amountUnitFormatter = (num: any) => {
  return formatWithComma(num);
};
</script>

<style lang="scss" scoped>
.setup-wrapper {
  width: 100%;
  padding-bottom: 20px;
}

.platform-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8rpx;
  justify-content: flex-end;
}

.platform-tag {
  font-size: 24rpx;
  background-color: #e6f7ff;
  color: #1a9cff;
  padding: 4rpx 16rpx;
  border-radius: 6rpx;
  border: 1px solid #bae7ff;
}

.party-card {
  background-color: #f7f9fc;
  border-radius: 12rpx;
  padding: 24rpx;
  margin-bottom: 20rpx;

  &:last-child {
    margin-bottom: 0;
  }

  .party-title {
    font-size: 28rpx;
    font-weight: bold;
    color: #1c9bfd;
    margin-bottom: 16rpx;
    border-bottom: 2rpx solid rgba(#1c9bfd, 0.1);
    padding-bottom: 12rpx;
  }
}
</style>