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

<template>
  <view class="document-form">
    <uv-loading-icon v-if="loading" mode="circle" text="正在加载经费下拨详情..."></uv-loading-icon>
    <template v-else-if="form">
      <!-- 基本信息 -->
      <CommonSection title="基本信息" :isFirst="true">
        <CommonInfoRow label="项目名称" :value="form.projectName" />
        <CommonInfoRow label="项目负责人" :value="form.projectIncharge" />
        <CommonInfoRow label="项目类型" :value="formatterProjectType(form.projectType)" />
        <CommonInfoRow label="项目时间" :value="formatDate(form.startDate) + ' 至 ' + formatDate(form.endDate)" />
        <CommonInfoRow label="外拨金额" :value="'￥' + (form.externalAllotAmount || 0)" isAmount />
        <CommonInfoRow label="申请外拨日期" :value="form.applyTime ? formatDate(form.applyTime) : '-'" />
        <CommonInfoRow label="摘要" :value="form.remark" isColumn />
      </CommonSection>

      <!-- 外拨明细 -->
      <view class="common-section-card mt20" v-if="form.detail?.length">
        <view class="section-title">外拨明细</view>
        <view class="member-list">
          <view class="member-item" v-for="(row, index) in form.detail" :key="index">
            <view class="member-header">
              <text class="m-name">{{ row.unit }}</text>
              <text class="m-amount">￥{{ row.amount || 0 }}</text>
            </view>
            <view class="m-body">
              <view class="m-line"><text class="l">开户行：</text><text class="v">{{ row.bankName || '-' }}</text></view>
              <view class="m-line"><text class="l">银行账号：</text><text class="v">{{ row.bankNo || '-' }}</text></view>
            </view>
          </view>
        </view>
      </view>

      <!-- 附件信息 -->
      <AttachmentList :list="mergedFileList" title="电子附件" />
    </template>
    <uv-empty v-else mode="data" text="暂无数据"></uv-empty>
  </view>
</template>

<script setup lang="ts">
import { ref, onMounted, watch, computed } from 'vue';
import { useDocumentApi } from '@/api/document';
import { formatDate } from '@/utils/date';
import to from 'await-to-js';
import AttachmentList from './AttachmentList.vue';
import CommonSection from '@/components/ui/CommonSection.vue';
import CommonInfoRow from '@/components/ui/CommonInfoRow.vue';

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

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

const formatterProjectType = (val: string) => {
  const map: any = { '10': '纵向项目', '20': '横向项目', '30': '内部项目', '40': '重点学科' };
  return map[val] || val;
};

const mergedFileList = computed(() => {
  if (!form.value || !form.value.attachmentUrl) return [];
  try {
    const file = JSON.parse(form.value.attachmentUrl);
    return [{ fileName: file.name || '附件', fileUrl: file.url, fileType: '申请附件' }];
  } catch (e) {
    return [];
  }
});

const fetchData = async () => {
  if (!props.code) return;
  loading.value = true;
  const [err, res] = await to(documentApi.getExternalAllotByCode(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";
.m-amount {
  color: #ff4d4f;
  font-weight: bold;
  font-size: 28rpx;
}
</style>