labsop_scientific_h5/pages/todo/components/document/ClaimForm.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 red-color">￥{{ formatAmount(netAmount) }} 元</text>
        </view>
        <view class="info-row">
          <text class="label">到款日期</text>
          <text class="value">{{ formatDate(paymentForm?.date) }}</text>
        </view>
        <view class="info-row">
          <text class="label">到款类型</text>
          <text class="value">{{ getDictLabel('PaymentReceivedType', paymentForm?.type) }}</text>
        </view>
        <view class="info-row">
          <text class="label">打款单位</text>
          <text class="value">{{ paymentForm?.unit || '-' }}</text>
        </view>
        <view class="info-row">
          <text class="label">管理费</text>
          <text class="value red-color">{{ paymentForm?.proportion || 0 }}% (￥{{ formatAmount(paymentForm?.manageAmount) }} 元)</text>
        </view>
        <view class="info-row">
          <text class="label">税费</text>
          <text class="value red-color">￥{{ formatAmount(paymentForm?.taxAmount) }} 元</text>
        </view>
      </view>

      <!-- 认领详情 -->
      <view class="common-section-card mt20" v-if="form.detail?.length">
        <view class="section-title">认领经费</view>
        <view class="funds-list">
          <view class="funds-item" v-for="(item, index) in form.detail" :key="index">
            <view class="f-row">
              <text class="f-name">{{ item.subjName }}</text>
              <text class="f-class">{{ item.subjCode }}</text>
            </view>
            <view class="f-grid">
              <view class="g-item highlight">
                <text class="gl">本次入账</text>
                <text class="gv red-color">￥{{ formatAmount(item.amount) }} 元</text>
              </view>
            </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 { useDocumentApi } from '@/api/document';
import { useDict } from '@/hooks/useDict';
import { formatDate } from '@/utils/date';
import to from 'await-to-js';

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

const { getDictLabel } = useDict('PaymentReceivedType');
const documentApi = useDocumentApi();
const form = ref<any>(null);
const paymentForm = ref<any>(null);
const loading = ref(false);

// 计算纯到款金额 (总额 - 税费 - 管理费)
const netAmount = computed(() => {
  if (!paymentForm.value) return 0;
  const amount = Number(paymentForm.value.amount || 0);
  const tax = Number(paymentForm.value.taxAmount || 0);
  const manage = Number(paymentForm.value.manageAmount || 0);
  return amount - tax - manage;
});

const formatAmount = (num: number | string) => {
  if (!num && num !== 0) return '0.00';
  return Number(num).toLocaleString('zh-CN', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
};

const fetchData = async () => {
  if (!props.code) return;
  loading.value = true;
  
  // 1. 获取认领申请详情
  const [err, res] = await to(documentApi.getFundClaimById(props.code));
  if (!err && res?.data) {
    form.value = res.data;
    
    // 2. 如果有关联的财务到账ID，获取原始到账详情
    if (form.value.fundId) {
      const [fErr, fRes] = await to(documentApi.getFundById(form.value.fundId));
      if (!fErr && fRes?.data) {
        paymentForm.value = fRes.data;
      }
    }
  }
  
  loading.value = false;
};

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

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

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