labsop_scientific_h5/pages/todo/components/document/ProjectChange.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.projectTitle || '-' }}</text>
        </view>
        <view class="info-row">
          <text class="label">变更类型</text>
          <text class="value">{{ getChangeType(form.changeType) }}</text>
        </view>
        <template v-if="form.projectType === '10' || form.projectType === '30'">
          <view class="info-row">
            <text class="label">项目分类</text>
            <text class="value">{{ form.projectClazzName || '-' }}</text>
          </view>
        </template>

        <template v-if="form.projectType === '20'">
          <view class="info-row">
            <text class="label">研究类型</text>
            <text class="value">{{ getDictLabel('sci_pjt_type', form.isClinicalTrial) || '-' }}</text>
          </view>
        </template>
        <view class="info-row">
          <text class="label">项目负责人</text>
          <text class="value">{{ form.projectLeaderName || form.projectHeadName || '-' }}</text>
        </view>
        <view class="info-row" v-if="form.changeType === '50'">
          <text class="label">中止时间</text>
          <text class="value">{{ formatDate(form.abortDate, 'YYYY-MM-DD') || '-' }}</text>
        </view>
        <view class="info-row">
          <text class="label">变更原因</text>
          <text class="value">{{ form.changeReason || '-' }}</text>
        </view>
        <view class="info-row" v-if="form.evidence">
          <text class="label">证明材料</text>
          <text class="value" style="color: #1c9bfd;" @click="previewFile(form.evidence, '证明材料')">查看附件</text>
        </view>
      </view>

      <!-- 变更前信息 -->
      <view class="common-section-card mt20" v-if="form.changeType !== '50'">
        <view class="section-title">变更前信息</view>

        <!-- 成员变更 -->
        <template v-if="form.changeType === '10'">
          <view class="member-list">
            <view class="member-item" v-for="(member, index) in changeDataPre" :key="index">
              <view class="member-header">
                <text class="m-name">{{ member.memberName }}</text>
                <text class="m-tag">{{ getRoleLabel(member.projectRole) }}</text>
              </view>
              <view class="m-body">
                <view class="m-line"><text class="l">工号：</text><text class="v">{{ member.memberNo || '-' }}</text>
                </view>
                <view class="m-line"><text class="l">职称：</text><text class="v">{{ member.technicalTitle || '-' }}</text>
                </view>
                <view class="m-line"><text class="l">学位：</text><text class="v">{{ getDegreeLabel(member.degree)
                }}</text></view>
                <view class="m-line"><text class="l">所属单位：</text><text class="v">{{ member.unit || '-' }}</text></view>
                <view class="m-line"><text class="l">成员类型：</text><text class="v">{{
                  getMemberTypeLabel(member.memberType) }}</text></view>
                <view class="m-line"><text class="l">所属科室：</text><text class="v">{{ member.deptName || '-' }}</text>
                </view>
                <view class="m-line" v-if="member.responsibleContent"><text class="l">负责内容：</text><text class="v">{{
                  member.responsibleContent }}</text></view>
              </view>
            </view>
          </view>
        </template>

        <!-- 延期变更 -->
        <template v-else-if="form.changeType === '30'">
          <view class="info-row">
            <text class="label">开始日期</text>
            <text class="value">{{ changeDataPre && changeDataPre[0] ? formatDate(changeDataPre[0], 'YYYY-MM-DD') : '-'
            }}</text>
          </view>
          <view class="info-row">
            <text class="label">结束日期</text>
            <text class="value">{{ changeDataPre && changeDataPre[1] ? formatDate(changeDataPre[1], 'YYYY-MM-DD') : '-'
            }}</text>
          </view>
        </template>

        <!-- 经费变更 -->
        <template v-else-if="form.changeType === '40'">
          <view class="info-row">
            <text class="label">{{ form.isClinicalTrial === '10' ? '科研经费(万元)' : '合同经费(万元)' }}</text>
            <text class="value red-color">{{ amountUnitTransfer(changeDataPre) }}</text>
          </view>
        </template>

        <!-- 经费调剂 -->
        <template v-else-if="form.changeType === '60'">
          <view class="funds-list">
            <view class="funds-item" v-for="(item, index) in changeDataPre" :key="index">
              <view class="f-row">
                <text class="f-name">{{ item.subjName || '-' }}</text>
                <text class="f-code">编号: {{ item.subjCode || '-' }}</text>
              </view>
              <view class="f-grid">
                <view class="g-item highlight">
                  <text class="gl">剩余金额(元)</text>
                  <text class="gv red-color">{{ item.balanceAmount }}</text>
                </view>
              </view>
            </view>
          </view>
        </template>
      </view>

      <!-- 变更后信息 -->
      <view class="common-section-card mt20" v-if="form.changeType !== '50'">
        <view class="section-title">变更后信息</view>

        <!-- 成员变更 -->
        <template v-if="form.changeType === '10'">
          <view class="member-list">
            <view class="member-item" v-for="(member, index) in changeDataAfter" :key="index">
              <view class="member-header">
                <text class="m-name">{{ member.memberName }}</text>
                <text class="m-tag">{{ getRoleLabel(member.projectRole) }}</text>
              </view>
              <view class="m-body">
                <view class="m-line"><text class="l">工号：</text><text class="v">{{ member.memberNo || '-' }}</text>
                </view>
                <view class="m-line"><text class="l">职称：</text><text class="v">{{ member.technicalTitle || '-' }}</text>
                </view>
                <view class="m-line"><text class="l">学位：</text><text class="v">{{ getDegreeLabel(member.degree)
                }}</text></view>
                <view class="m-line"><text class="l">所属单位：</text><text class="v">{{ member.unit || '-' }}</text></view>
                <view class="m-line"><text class="l">成员类型：</text><text class="v">{{
                  getMemberTypeLabel(member.memberType) }}</text></view>
                <view class="m-line"><text class="l">所属科室：</text><text class="v">{{ member.deptName || '-' }}</text>
                </view>
                <view class="m-line" v-if="member.responsibleContent"><text class="l">负责内容：</text><text class="v">{{
                  member.responsibleContent }}</text></view>
              </view>
            </view>
          </view>
        </template>

        <!-- 延期变更 -->
        <template v-else-if="form.changeType === '30'">
          <view class="info-row">
            <text class="label">开始日期</text>
            <text class="value">{{ changeDataAfter && changeDataAfter[0] ? formatDate(changeDataAfter[0], 'YYYY-MM-DD')
              : '-' }}</text>
          </view>
          <view class="info-row">
            <text class="label">结束日期</text>
            <text class="value">{{ changeDataAfter && changeDataAfter[1] ? formatDate(changeDataAfter[1], 'YYYY-MM-DD')
              : '-' }}</text>
          </view>
        </template>

        <!-- 经费变更 -->
        <template v-else-if="form.changeType === '40'">
          <view class="info-row">
            <text class="label">{{ form.isClinicalTrial === '10' ? '科研经费(万元)' : '合同经费(万元)' }}</text>
            <text class="value red-color">{{ amountUnitTransfer(changeDataAfter) }}</text>
          </view>
        </template>

        <!-- 经费调剂 -->
        <template v-else-if="form.changeType === '60'">
          <view class="funds-list">
            <view class="funds-item" v-for="(item, index) in changeDataAfter" :key="index">
              <view class="f-row">
                <text class="f-name">{{ item.subjName || '-' }}</text>
                <text class="f-code">编号: {{ item.subjCode || '-' }}</text>
              </view>
              <view class="f-grid">
                <view class="g-item highlight">
                  <text class="gl">剩余金额(元)</text>
                  <text class="gv red-color">{{ formatAmount(item.balanceAmount) }}</text>
                </view>
              </view>
            </view>
          </view>
        </template>
      </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 { formatDate } from '@/utils/date';
import { formatAmount } from '@/utils/format';
import { previewFile } from '@/utils/file';
import to from 'await-to-js';

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

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

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

const changeDataPre = computed(() => {
  if (!form.value?.changeDataPre) return null;
  try {
    return JSON.parse(form.value.changeDataPre);
  } catch {
    return null;
  }
});

const changeDataAfter = computed(() => {
  if (!form.value?.changeDataAfter) return null;
  try {
    return JSON.parse(form.value.changeDataAfter);
  } catch {
    return null;
  }
});

const getChangeType = (type: string) => {
  const types: Record<string, string> = {
    '10': '成员变更',
    '20': '预算变更',
    '30': '延期变更',
    '40': '经费变更',
    '50': '中止变更',
    '60': '经费调剂'
  };
  return types[type] || '-';
};

const getRoleLabel = (role: string) => {
  const roles: Record<string, string> = {
    '10': '负责人',
    '20': '主要参与人',
    '30': '一般参与人'
  };
  return roles[role] || '-';
};

const getMemberTypeLabel = (type: string) => {
  const types: Record<string, string> = {
    '10': '本院人员',
    '20': '非本院人员',
    '30': '研究生'
  };
  return types[type] || '-';
};

const getDegreeLabel = (degree: string) => {
  const degrees: Record<string, string> = {
    '10': '无',
    '20': '研究生',
    '30': '博士生'
  };
  return degrees[degree] || '-';
};

const getTrialLabel = (trial: string) => {
  const trials: Record<string, string> = {
    '10': '临床试验',
    '1010': 'GCP',
    '1020': '非GCP',
    '20': '横向其他'
  };
  return trials[trial] || '-';
};

const amountUnitTransfer = (val: any) => {
  if (!val || isNaN(val)) return '0';
  return (Number(val) / 10000).toFixed(2);
};

const fetchData = async () => {
  if (!props.code) return;
  loading.value = true;
  const [err, res] = await to(documentApi.getProjectChangeByCode(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";

.red-color {
  color: #ff4d4f;
  font-weight: bold;
}

.f-code {
  font-size: 24rpx;
  color: #999;
  margin-left: 10rpx;
}

.m-body {
  padding: 10rpx 0;

  .m-line {
    font-size: 26rpx;
    line-height: 1.6;
    display: flex;

    .l {
      color: #888;
      width: 140rpx;
      flex-shrink: 0;
    }

    .v {
      color: #333;
    }
  }
}
</style>