labsop_scientific_h5/pages/todo/components/document/VerticalForm.vue

<template>
  <view class="document-form">
    <uv-loading-icon v-if="loading" mode="circle" text="正在加载纵向项目详情..."></uv-loading-icon>
    <template v-else-if="form">
      <!-- 基本信息 -->
      <view class="common-section-card">
        <view class="section-title">基本信息</view>
        <view class="info-row">
          <text class="label">项目名称</text>
          <text class="value">{{ form.projectName || '-' }}</text>
        </view>
        <view class="info-row">
          <text class="label">项目分类</text>
          <text class="value">{{ form.projectClazzName || '-' }}</text>
        </view>
        <view class="info-row">
          <text class="label">项目级别</text>
          <text class="value">{{ getDictLabel('sci_pjt_level', form.projectLevel) }}</text>
        </view>
        <view class="info-row">
          <text class="label">项目来源</text>
          <text class="value">{{ form.projectSource || '-' }}</text>
        </view>
        <view class="info-row">
          <text class="label">统计年度</text>
          <text class="value">{{ form.statisticalYear || '-' }}</text>
        </view>
        <view class="info-row">
          <text class="label">项目执行期</text>
          <text class="value">{{ form.planStartDate || '-' }} 至 {{ form.planEndDate || '-' }}</text>
        </view>
        <view class="info-row">
          <text class="label">研究类型</text>
          <text class="value">{{ getDictLabel('sci_pjt_type', form.studyType) }}</text>
        </view>
        <view class="info-row">
          <text class="label">所属科室</text>
          <text class="value">{{ form.deptName || '-' }}</text>
        </view>
        <view class="info-row">
          <text class="label">负责人</text>
          <text class="value">{{ form.projectLeaderName || '-' }}</text>
        </view>
        <view class="info-row">
          <text class="label">负责人电话</text>
          <text class="value">{{ form.projectLeaderPhone || '-' }}</text>
        </view>
        <view class="info-row">
          <text class="label">负责人邮箱</text>
          <text class="value">{{ form.projectLeaderMail || '-' }}</text>
        </view>
        <view class="info-row">
          <text class="label">是否中医药</text>
          <text class="value">{{ form.isMedicine === '10' ? '是' : '否' }}</text>
        </view>
        <view class="info-row">
          <text class="label">包干制项目</text>
          <text class="value">{{ form.isLumpSum === '10' ? '是' : '否' }}</text>
        </view>
      </view>

      <!-- 立项信息 -->
      <view class="common-section-card mt20">
        <view class="section-title">立项信息</view>
        <view class="info-row"><text class="label">获批时间</text><text class="value">{{ form.approvalDate || '-' }}</text></view>
        <view class="info-row"><text class="label">获批编号</text><text class="value">{{ form.projectNo || '-' }}</text></view>
        <view class="info-row">
          <text class="label">财政拨款</text>
          <view class="amount-val">
            <text class="num">{{ formatAmount(form.approvedFunds) }}</text>
            <text class="unit">万元</text>
          </view>
        </view>
        <view class="info-row">
          <text class="label">匹配经费</text>
          <view class="amount-val">
            <text class="num">{{ formatAmount(form.supportFunds) }}</text>
            <text class="unit">万元</text>
          </view>
        </view>
        <view class="info-row">
          <text class="label">自筹经费</text>
          <view class="amount-val">
            <text class="num">{{ formatAmount(form.selfFunds) }}</text>
            <text class="unit">万元</text>
          </view>
        </view>
        <view class="info-row">
          <text class="label">总经费</text>
          <view class="amount-val primary">
            <text class="num">{{ formatAmount(form.totalAmount) }}</text>
            <text class="unit">万元</text>
          </view>
        </view>
      </view>

      <!-- 成员信息 -->
      <view class="common-section-card mt20" v-if="form.memberList?.length">
        <view class="section-title">成员信息</view>
        <view class="member-list">
          <view class="member-item" v-for="(row, index) in form.memberList" :key="index">
            <view class="member-header">
              <view class="name-box">
                <text class="m-name">{{ row.memberName }}</text>
                <text class="m-tag leader" v-if="row.projectRole === '10'">负责人</text>
                <text class="m-tag" v-else-if="row.projectRole === '20'">主要参与人</text>
                <text class="m-tag" v-else>一般参与人</text>
              </view>
              <text class="m-type-tag" v-if="row.memberType">{{ row.memberType === '10' ? '本院人员' : row.memberType === '20' ? '非本院人员' : '研究生' }}</text>
            </view>
            <view class="m-body">
              <view class="m-line" v-if="row.deptName"><text class="l">所属科室：</text><text class="v">{{ row.deptName }}</text></view>
              <view class="m-line" v-if="row.technicalTitle"><text class="l">职称：</text><text class="v">{{ row.technicalTitle }}</text></view>
              <view class="m-line" v-if="row.degree"><text class="l">学位：</text><text class="v">{{ getDictLabel('sci_academic_degree', row.degree) }}</text></view>
              <view class="m-line column" v-if="row.responsibleContent">
                <text class="l">负责内容：</text>
                <text class="v remark">{{ row.responsibleContent }}</text>
              </view>
            </view>
          </view>
        </view>
      </view>

      <!-- 附件信息 -->
      <AttachmentList :list="form.fileList" />
    </template>
    <uv-empty v-else mode="data" text="暂无数据"></uv-empty>
  </view>
</template>

<script setup lang="ts">
import { ref, onMounted, watch } from 'vue';
import { useDict } from '@/hooks/useDict';
import { useDocumentApi } from '@/api/document';
import { formatAmount } from '@/utils/format';
import to from 'await-to-js';
import AttachmentList from './AttachmentList.vue';

const props = defineProps<{
  code: string;
}>();

const { getDictLabel } = useDict('sci_pjt_level', 'sci_pjt_type', 'sci_academic_degree');
const documentApi = useDocumentApi();

const form = ref<any>(null);
const loading = ref(false);

const fetchData = async () => {
  if (!props.code) return;
  loading.value = true;
  const [err, res] = await to(documentApi.getVerticalByCode(props.code));
  if (!err && res?.data) {
    form.value = res.data;
  }
  loading.value = false;
};

onMounted(() => {
  fetchData();
});

watch(() => props.code, () => {
  fetchData();
});
</script>

<style lang="scss" scoped>
@import "./common.scss";

.amount-val {
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  
  .num {
    font-size: 30rpx;
    font-weight: bold;
    color: #444;
  }
  
  .unit {
    font-size: 22rpx;
    color: #999;
    margin-left: 4rpx;
  }
  
  &.primary .num {
    color: #1c9bfd;
    font-size: 34rpx;
  }
}

.member-item {
  background-color: #fcfdfe;
  border: 1rpx solid #eff3f8;
  border-radius: 12rpx;
  padding: 24rpx;
  margin-bottom: 20rpx;
  
  .member-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20rpx;
    padding-bottom: 16rpx;
    border-bottom: 1rpx solid #f1f5f9;
    
    .name-box {
      display: flex;
      align-items: center;
      
      .m-name {
        font-size: 30rpx;
        font-weight: 600;
        color: #333;
      }
      
      .m-tag {
        font-size: 20rpx;
        padding: 2rpx 12rpx;
        border-radius: 4rpx;
        margin-left: 12rpx;
        background-color: #f1f5f9;
        color: #64748b;
        
        &.leader {
          background-color: #eff6ff;
          color: #1c9bfd;
        }
      }
    }
    
    .m-type-tag {
      font-size: 22rpx;
      color: #94a3b8;
    }
  }
  
  .m-body {
    .m-line {
      display: flex;
      font-size: 26rpx;
      margin-bottom: 8rpx;
      
      &.column {
        flex-direction: column;
        .l { margin-bottom: 8rpx; }
      }
      
      .l {
        color: #94a3b8;
        width: 140rpx;
        flex-shrink: 0;
      }
      
      .v {
        color: #475569;
        flex: 1;
        
        &.remark {
          background-color: #f8fafc;
          padding: 16rpx;
          border-radius: 8rpx;
          font-size: 24rpx;
          color: #64748b;
          line-height: 1.5;
        }
      }
    }
  }
}

.file-info {
  display: flex;
  align-items: center;
  padding: 20rpx;
  background-color: #f8fbfd;
  border-radius: 12rpx;
  border: 1rpx solid #eef2f7;
  margin-bottom: 16rpx;
  
  .file-text-box {
    margin-left: 16rpx;
    flex: 1;
    display: flex;
    flex-direction: column;
    
    .file-name {
      font-size: 26rpx;
      color: #1c9bfd;
      word-break: break-all;
    }
    
    .file-tag {
      font-size: 20rpx;
      color: #94a3b8;
      margin-top: 4rpx;
    }
  }
}
</style>