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

<template>
  <view class="setup-wrapper">
    <!-- 立项概览 -->
    <CommonSection title="立项概览" isFirst>
      <CommonInfoRow label="院内项目编号" :value="projectData?.projectNo" />
      <CommonInfoRow label="项目名称" :value="projectData?.projectName" />
      <CommonInfoRow label="研究类型"
        :value="projectData?.isClinicalTrial === '10' ? '临床试验' : (projectData?.isClinicalTrial === '20' ? '横向其他' : (projectData?.isClinicalTrial === '1010' ? 'GCP' : (projectData?.isClinicalTrial === '1020' ? '非GCP' : '--')))" />
      <CommonInfoRow label="项目来源" :value="projectData?.projectSource" />

      <CommonInfoRow v-if="projectData?.isClinicalTrial === '10'" label="项目级别"
        :value="getDictLabel('sci_proj_type', projectData?.projectClass)" />
      <CommonInfoRow v-if="projectData?.isClinicalTrial === '20'" label="项目类别"
        :value="getDictLabel('sci_pjt_class', projectData?.projectClass)" />

      <CommonInfoRow label="签订时间" :value="projectData?.signDate ? formatDate(projectData.signDate) : '--'" />
      <CommonInfoRow label="院内合同编号" :value="projectData?.contractCode" />
      <CommonInfoRow label="项目时间"
        :value="formatDate(projectData?.startDate) + ' ~ ' + formatDate(projectData?.endDate)" />
      <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?.approvedFunds)" isAmount />
      <CommonInfoRow label="匹配经费(元)" :value="amountUnitFormatter(projectData?.supportFunds)" isAmount />
      <CommonInfoRow label="自筹经费(元)" :value="amountUnitFormatter(projectData?.selfFunds)" isAmount />
      <CommonInfoRow label="总金额(元)"
        :value="amountUnitFormatter((Number(projectData?.contractFunds || 0) + Number(projectData?.approvedFunds || 0) + Number(projectData?.selfFunds || 0)))"
        isAmount />
      <CommonInfoRow label="承担单位排名"
        :value="projectData?.unitRank == '10' ? '第一单位' : (projectData?.unitRank == '20' ? '非第一单位' : '--')" />
      <CommonInfoRow v-if="['10', '1010', '1020'].includes(projectData?.isClinicalTrial)" label="招募人数"
        :value="projectData?.memberNum || '0'" noBorder />
    </CommonSection>
  </view>
</template>

<script setup lang="ts">
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_tripartite_type', 'sci_pjt_class', 'sci_proj_type', 'compType', 'project_company_type');

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

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

.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>