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

<template>
  <view class="setup-wrapper">
    <CommonSection title="立项概览" isFirst>
      <CommonInfoRow label="项目名称" :value="projectData?.projectName" />
      <CommonInfoRow label="学科类型" :value="getDictLabel('project_class', projectData?.projectClass)" />
      <CommonInfoRow label="项目来源单位" :value="projectData?.projectSource" />
      <CommonInfoRow label="负责人" :value="projectData?.projectLeaderName" />
      <CommonInfoRow label="负责人类型" :value="getDictLabel('sci_leader_type', projectData?.projectLeaderType)" />
      <CommonInfoRow label="项目级别" :value="getDictLabel('sci_pjt_level', projectData?.projectLevel)" />
      <CommonInfoRow label="项目分类" :value="projectData?.projectClazzName" />
      <CommonInfoRow label="立项日期" :value="projectData?.approvalDate ? formatDate(projectData.approvalDate) : '--'" />
      <CommonInfoRow label="开始日期" :value="projectData?.planStartDate ? formatDate(projectData.planStartDate) : '--'" />
      <CommonInfoRow label="计划结题日期" :value="projectData?.planEndDate ? formatDate(projectData.planEndDate) : '--'" />
      <CommonInfoRow label="合同经费(元)" :value="amountUnitFormatter(projectData?.contractFunds)" isAmount />
      <CommonInfoRow label="批准经费(元)" :value="amountUnitFormatter(projectData?.approvedFunds)" isAmount />
      <CommonInfoRow label="配套经费(元)" :value="amountUnitFormatter(projectData?.supportFunds)" isAmount />
      <CommonInfoRow label="外拨经费(元)" :value="amountUnitFormatter(projectData?.outsourcedFunds)" isAmount />
      <CommonInfoRow label="所属年度" :value="projectData?.statisticalYear || '--'" />
      <CommonInfoRow label="所属平台" :value="platformNames || '--'" />
      <CommonInfoRow label="所属团队" :value="projectData?.belongTeam || '--'" />
      <CommonInfoRow label="到账日期" :value="projectData?.arrivalDate ? formatDate(projectData.arrivalDate) : '--'" />
      <CommonInfoRow label="到账金额(元)" :value="projectData?.arrivalFunds || '--'" />
      <CommonInfoRow label="备注" :value="projectData?.remark || '--'" 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 CommonSection from '@/components/ui/CommonSection.vue';
import CommonInfoRow from '@/components/ui/CommonInfoRow.vue';

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

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

const platformNames = computed(() => {
  if (props.projectData?.belongPlatform) {
    try {
      const data = JSON.parse(props.projectData.belongPlatform)
      if (Array.isArray(data)) {
        return data.map(item => `${item.platformName} (${item.platformType})`).join(', ')
      }
    } catch (e) {
      return ''
    }
  }
  return ''
})

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

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