labsop_scientific_h5/pages/todo/components/document/SciFundReverse.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">{{ getFundType(form.type) }}</text>
        </view>
        <view class="info-row"><text class="label">项目负责人</text><text class="value">{{ form.projectIncharge || '-' }}</text></view>
        <view class="info-row"><text class="label">所属科室</text><text class="value">{{ form.projectDeptName || '-' }}</text></view>
        <view class="info-row">
          <text class="label">到账总额(元)</text>
          <text class="value red-color">￥{{ formatMoney(projectInfo?.amount) }}</text>
        </view>
        <view class="info-row">
          <text class="label">结余金额(元)</text>
          <text class="value red-color">￥{{ formatMoney(projectInfo?.balanceAmount) }}</text>
        </view>
      </view>

      <!-- 报销经费 -->
      <view class="common-section-card mt20">
        <view class="section-title">报销经费</view>
        <view class="info-row"><text class="label">费用科目</text><text class="value">{{ form.subjName || '-' }}</text></view>
        <view class="info-row">
          <text class="label">入账金额(元)</text>
          <text class="value red-color">￥{{ formatMoney(subjAmount?.amount) }}</text>
        </view>
        <view class="info-row">
          <text class="label">可用金额(元)</text>
          <text class="value red-color">￥{{ formatMoney(subjAmount?.balanceAmount) }}</text>
        </view>
        <view class="info-row">
          <text class="label">冲销金额(元)</text>
          <text class="value red-color">￥{{ formatMoney(form.amount) }}</text>
        </view>
        <view class="info-row"><text class="label">冲销日期</text><text class="value">{{ form.reverseTime || '-' }}</text></view>
        <view class="info-row"><text class="label">冲销人</text><text class="value">{{ form.reverse || '-' }}</text></view>
        <view class="info-row"><text class="label">操作人</text><text class="value">{{ form.operator || '-' }}</text></view>
        <view class="info-row"><text class="label">记录人</text><text class="value">{{ form.record || '-' }}</text></view>
      </view>

      <!-- 备注 -->
      <view class="common-section-card mt20" v-if="form.remark">
        <view class="section-title">备注</view>
        <view class="remark-content">{{ form.remark }}</view>
      </view>
    </template>
    <uv-empty v-else mode="data" text="暂无数据"></uv-empty>
  </view>
</template>

<script setup lang="ts">
import { ref, onMounted, watch } from 'vue';
import { useDocumentApi } from '@/api/document';
import to from 'await-to-js';

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

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

const getFundType = (type: string) => {
  const types: Record<string, string> = {
    '10': '上级拨款',
    '20': '匹配经费',
    '30': '横向经费'
  };
  return types[type] || '-';
};

const formatMoney = (val: any) => {
  if (val === undefined || val === null) return '0.00';
  return Number(val).toLocaleString('zh-CN', { minimumFractionDigits: 2 });
};

const fetchData = async () => {
  if (!props.code) return;
  loading.value = true;
  const [err, res] = await to(documentApi.getFundReverseByCode(props.code));
  if (!err && res?.data) {
    form.value = res.data;
    // 同步 PC 逻辑：获取额外信息
    await Promise.all([
      getCardDetails(form.value.cardId),
      getAmountInfo(form.value)
    ]);
  }
  loading.value = false;
};

const getCardDetails = async (cardId: any) => {
  if (!cardId) return;
  const [err, res] = await to(documentApi.getFundCardById(cardId));
  if (!err && res?.data) {
    projectInfo.value = res.data;
  }
};

const getAmountInfo = async (f: any) => {
  if (!f.projectId || !f.subjCode) return;
  const params = {
    projectId: f.projectId,
    projectType: f.projectType,
    subjCode: f.subjCode,
    type: f.type,
  };
  const [err, res] = await to(documentApi.getSubjAmount(params));
  if (!err && res?.data) {
    subjAmount.value = res.data;
  }
};

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

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

<style lang="scss" scoped>
@import "./common.scss";
.remark-content {
  font-size: 28rpx;
  color: #333;
  line-height: 1.6;
  padding: 10rpx 0;
}
</style>