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">
      <!-- 到款信息 -->
      <CommonSection title="到款信息" :isFirst="true">
        <CommonInfoRow label="项目到款" :value="form.projectName" />
        <CommonInfoRow label="到款金额" :value="netAmount" isAmount />
        <CommonInfoRow label="到款日期" :value="formatDate(paymentForm?.date)" />
        <CommonInfoRow label="到款类型" :value="getDictLabel('PaymentReceivedType', paymentForm?.type)" />
        <CommonInfoRow label="打款单位" :value="paymentForm?.unit" />
        <CommonInfoRow label="管理费" :value="paymentForm?.proportion + '% (￥' + formatAmount(paymentForm?.manageAmount) + ')'" />
        <CommonInfoRow label="税费" :value="paymentForm?.taxAmount" isAmount />
      </CommonSection>

      <!-- 认领详情 -->
      <CommonSection title="认领经费" v-if="form.detail?.length">
        <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>
      </CommonSection>
    </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 { formatAmount } from '@/utils/format';
import to from 'await-to-js';
import CommonSection from '@/components/ui/CommonSection.vue';
import CommonInfoRow from '@/components/ui/CommonInfoRow.vue';

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 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>