labsop_scientific_h5/pages/todo/components/document/SafetyForm.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.projectCode || '-' }}</text></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">{{ getDictLabel('project_class', form.disciplineFirstName) }}</text>
        </view>
        <view class="info-row">
          <text class="label">负责人类型</text>
          <text class="value">{{ form.projectLeaderType === '10' ? '教师' : form.projectLeaderType === '20' ? '学生' : '校外人员' }}</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">{{ getDictLabel('contract_type', form.contractType) }}</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.signDate || '-' }}</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 num-color">￥{{ formatAmount(form.contractFunds) }}</text>
        </view>
        <view class="info-row">
          <text class="label">配套经费(元)</text>
          <text class="value num-color">￥{{ formatAmount(form.supportFunds) }}</text>
        </view>
        <view class="info-row">
          <text class="label">到账金额(元)</text>
          <text class="value primary-color">￥{{ formatAmount(form.arrivalFunds) }}</text>
        </view>
        <view class="info-row"><text class="label">到账时间</text><text class="value">{{ form.arrivalDate || '-' }}</text></view>
        
        <view class="info-row">
          <text class="label">所属平台</text>
          <view class="platform-tags">
            <template v-if="platformList.length > 0">
              <view class="p-tag" v-for="(item, index) in platformList" :key="index">
                {{ item.platformName }} ({{ item.platformType }})
              </view>
            </template>
            <text v-else>-</text>
          </view>
        </view>
        <view class="info-row"><text class="label">所属团队</text><text class="value">{{ form.belongTeam || '-' }}</text></view>
        <view class="info-row column">
          <text class="label mb10">备注</text>
          <text class="value remark">{{ form.remark || '无' }}</text>
        </view>
      </view>

      <!-- 合作单位 -->
      <view class="common-section-card mt20" v-if="form.companyList?.length">
        <view class="section-title">合作单位</view>
        <view class="company-list">
          <view class="company-item" v-for="(comp, index) in form.companyList" :key="index">
            <view class="comp-header">
              <text class="c-name">{{ comp.compName }}</text>
              <text class="c-tag">{{ getDictLabel('project_company_type', comp.contractParty) }}</text>
            </view>
            <view class="c-body">
              <view class="c-line"><text class="l">单位级别：</text><text class="v">{{ getDictLabel('sci_tripartite_type', comp.compType) }}</text></view>
              <view class="c-line"><text class="l">联系人：</text><text class="v">{{ comp.compContact || '-' }} ({{ comp.compPhoneNum || '-' }})</text></view>
            </view>
          </view>
        </view>
      </view>

      <!-- 成员信息 -->
      <view class="common-section-card mt20" v-if="form.member?.length">
        <view class="section-title">成员信息</view>
        <view class="member-list">
          <view class="member-item" v-for="(row, index) in form.member" :key="index">
            <view class="member-header">
              <text class="m-name">{{ row.memberName }}</text>
              <text class="m-tag leader" v-if="row.projectRole === '10'">负责人</text>
              <text class="m-tag参与人 v-else">参与人</text>
              <text class="m-rate" v-if="row.contributionRate">贡献率: {{ row.contributionRate }}%</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" v-if="row.responsibleContent"><text class="l">负责内容：</text><text class="v">{{ row.responsibleContent }}</text></view>
            </view>
          </view>
        </view>
      </view>

      <!-- 预算信息 -->
      <view class="common-section-card mt20" v-if="form.budget?.length">
        <view class="section-title">预算信息</view>
        <view class="budget-list">
          <view class="budget-item" v-for="(item, index) in form.budget" :key="index">
            <view class="b-header">
              <text class="b-name">{{ item.fundsSubjName }}</text>
              <text class="b-tag">{{ item.fundsClass === '10' ? '直接费用' : '间接费用/管理费' }}</text>
            </view>
            <view class="b-grid">
              <view class="g-item"><text class="l">财政拨款</text><text class="v">￥{{ item.projectFundsAmount || 0 }}</text></view>
              <view class="g-item"><text class="l">匹配经费</text><text class="v">￥{{ item.otherFundsAmount || 0 }}</text></view>
              <view class="g-item"><text class="l">自筹经费</text><text class="v">￥{{ item.raiseFundsAmount || 0 }}</text></view>
              <view class="g-item total"><text class="l">预算金额</text><text class="v">￥{{ item.totalFundsAmount || 0 }}</text></view>
            </view>
          </view>
        </view>
      </view>

      <!-- 附件信息 -->
      <view class="common-section-card mt20" v-if="form.files?.length">
        <view class="section-title">附件资料</view>
        <view class="attachment-list">
          <view class="file-item" v-for="(file, index) in form.files" :key="index" @click="previewFile(file.fileUrl, file.fileName)">
            <view class="file-info-box">
              <text class="f-name">{{ file.fileName }}</text>
              <text class="f-type">{{ file.fileType || '附件' }}</text>
            </view>
          </view>
        </view>
      </view>
    </template>
    <uv-empty v-else mode="data" text="暂无数据"></uv-empty>
  </view>
</template>

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

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

const { getDictLabel } = useDict('project_class', 'contract_type', 'project_company_type', 'sci_tripartite_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.getSafetyByCode(props.code));
  if (!err && res?.data) {
    form.value = res.data;
  }
  loading.value = false;
};

const platformList = computed(() => {
  if (form.value?.belongPlatform) {
    try {
      const data = JSON.parse(form.value.belongPlatform);
      return Array.isArray(data) ? data : [];
    } catch (e) {
      return [];
    }
  }
  return [];
});

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

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

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

.platform-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10rpx;
  justify-content: flex-end;
  flex: 1;
  .p-tag {
    font-size: 22rpx;
    background-color: #f0f7ff;
    color: #007aff;
    padding: 4rpx 12rpx;
    border-radius: 4rpx;
  }
}

.num-color {
  color: #666;
  font-weight: 500;
}

.company-item, .budget-item {
  background-color: #fcfdfe;
  border: 1rpx solid #eff3f8;
  border-radius: 12rpx;
  padding: 24rpx;
  margin-bottom: 20rpx;
  
  .comp-header, .b-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16rpx;
    padding-bottom: 12rpx;
    border-bottom: 1rpx solid #f1f5f9;
    
    .c-name, .b-name {
      font-size: 28rpx;
      font-weight: 600;
      color: #333;
    }
    
    .c-tag, .b-tag {
      font-size: 20rpx;
      padding: 2rpx 12rpx;
      border-radius: 4rpx;
      background-color: #f8fafc;
      color: #64748b;
    }
  }
  
  .c-body {
    .c-line {
      display: flex;
      font-size: 24rpx;
      margin-bottom: 8rpx;
      .l { color: #94a3b8; width: 140rpx; }
      .v { color: #475569; }
    }
  }
  
  .b-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12rpx;
    
    .g-item {
      display: flex;
      flex-direction: column;
      background-color: #f8fafc;
      padding: 12rpx;
      border-radius: 8rpx;
      
      .l { font-size: 20rpx; color: #94a3b8; margin-bottom: 4rpx; }
      .v { font-size: 24rpx; color: #475569; font-weight: 500; }
      
      &.total {
        background-color: #f0f7ff;
        .v { color: #1c9bfd; font-weight: bold; }
      }
    }
  }
}

.attachment-list {
  .file-item {
    display: flex;
    align-items: center;
    padding: 20rpx;
    background-color: #f8fbfd;
    border-radius: 12rpx;
    border: 1rpx solid #eef2f7;
    margin-bottom: 16rpx;
    
    .file-info-box {
      flex: 1;
      display: flex;
      flex-direction: column;
      
      .f-name {
        font-size: 26rpx;
        color: #1c9bfd;
        word-break: break-all;
      }
      
      .f-type {
        font-size: 20rpx;
        color: #94a3b8;
        margin-top: 4rpx;
      }
    }
  }
}

.m-rate {
  font-size: 22rpx;
  color: #94a3b8;
  margin-left: auto;
}
</style>