shanxia2.0/miniprogram/pages/bx/reimburse/detail.vue

<script setup>
import { ref, computed } from 'vue'
import { onLoad, onShow } from '@dcloudio/uni-app'
import {
  getReimburse,
  submitReimburse,
  approveReimburse,
  rejectReimburse,
  getReimburseApprovalHistory,
  listAttachments,
  previewAttachment
} from '@/api/bx'
import { bxStatusLabel, formatMoney, dash } from '@/utils/bxLabels'
import { PAGE_PATHS } from '@/config/api'

const id = ref('')
const detail = ref(null)
const history = ref([])
const attachUrls = ref([])
const acting = ref(false)

const isDraft = computed(() => detail.value?.status === 'draft')
const isPending = computed(() => detail.value?.status === 'pending')

const goBack = () => {
  uni.navigateBack({
    fail: () => uni.navigateTo({ url: PAGE_PATHS.bxReimburseList })
  })
}

const load = async () => {
  if (!id.value) return
  try {
    detail.value = await getReimburse(id.value)
    history.value = await getReimburseApprovalHistory(id.value)
    const files = await listAttachments('reimburse_apply', id.value)
    const urls = []
    for (const f of files) {
      try {
        const prev = await previewAttachment(f.id)
        if (prev?.url) urls.push(prev.url)
      } catch {
        /* skip */
      }
    }
    attachUrls.value = urls
  } catch (e) {
    uni.showToast({ title: e.message || '加载失败', icon: 'none' })
  }
}

const onSubmit = () => {
  uni.showModal({
    title: '提交审批',
    content: '确认提交该报销单？',
    success: async (r) => {
      if (!r.confirm) return
      acting.value = true
      try {
        await submitReimburse(id.value)
        uni.showToast({ title: '已提交', icon: 'success' })
        load()
      } catch (e) {
        uni.showToast({ title: e.message || '提交失败', icon: 'none' })
      } finally {
        acting.value = false
      }
    }
  })
}

const doApprove = (pass) => {
  uni.showModal({
    title: pass ? '审批通过' : '审批驳回',
    editable: true,
    placeholderText: '审批意见（可选）',
    success: async (r) => {
      if (!r.confirm) return
      acting.value = true
      try {
        const op = r.content || (pass ? '同意' : '驳回')
        if (pass) await approveReimburse(id.value, op)
        else await rejectReimburse(id.value, op)
        uni.showToast({ title: '操作成功', icon: 'success' })
        load()
      } catch (e) {
        uni.showToast({ title: e.message || '操作失败', icon: 'none' })
      } finally {
        acting.value = false
      }
    }
  })
}

const preview = (url) => {
  uni.previewImage({ urls: attachUrls.value, current: url })
}

onLoad((q) => {
  id.value = q?.id || ''
})
onShow(() => load())
</script>

<template>
  <view class="mp-page mp-page--sub mp-page--with-bottom">
    <view class="mp-header mp-header--bx">
      <text class="mp-subpage-back" @click="goBack">← 返回</text>
      <text class="mp-header__title" style="margin-top: 16rpx">报销详情</text>
    </view>

    <view v-if="detail" class="mp-detail-hero">
      <view class="mp-detail-hero__top">
        <view>
          <text class="mp-detail-hero__title">{{ dash(detail.applyCode) }}</text>
          <text class="mp-detail-hero__sub">{{ dash(detail.title) }}</text>
        </view>
        <text class="mp-tag" :class="'mp-tag--' + bxStatusLabel(detail.status).tag">
          {{ bxStatusLabel(detail.status).text }}
        </text>
      </view>
      <view class="mp-detail-hero__meta">
        <text class="mp-detail-hero__chip">{{ formatMoney(detail.amount) }}</text>
        <text class="mp-detail-hero__chip">{{ dash(detail.applicantName) }}</text>
      </view>
    </view>

    <view class="mp-block">
      <text class="mp-block__title">基本信息</text>
      <view class="mp-block__panel">
        <view class="mp-kv"><text class="mp-kv__label">费用项目</text><text class="mp-kv__value">{{ dash(detail?.expenseName) }}</text></view>
        <view class="mp-kv"><text class="mp-kv__label">报销日期</text><text class="mp-kv__value">{{ dash(detail?.reimburseDate) }}</text></view>
        <view class="mp-kv"><text class="mp-kv__label">申请时间</text><text class="mp-kv__value">{{ dash(detail?.applyTime) }}</text></view>
        <view class="mp-kv"><text class="mp-kv__label">当前节点</text><text class="mp-kv__value">{{ dash(detail?.currentNode) }}</text></view>
        <view class="mp-kv"><text class="mp-kv__label">备注</text><text class="mp-kv__value">{{ dash(detail?.remark) }}</text></view>
      </view>
    </view>

    <view v-if="detail?.details?.length" class="mp-block">
      <text class="mp-block__title">明细</text>
      <view class="mp-list">
        <view v-for="d in detail.details" :key="d.id" class="mp-card">
          <view class="mp-card__head">
            <text class="mp-card__title">{{ dash(d.expenseName) }}</text>
            <text class="mp-card__amount">{{ formatMoney(d.amount) }}</text>
          </view>
          <text style="font-size: 24rpx; color: var(--mp-muted)">{{ dash(d.remark) }}</text>
        </view>
      </view>
    </view>

    <view v-if="attachUrls.length" class="mp-block">
      <text class="mp-block__title">票据</text>
      <view class="mp-photo-row" style="padding: 0 0 8rpx">
        <view v-for="(url, i) in attachUrls" :key="i" class="mp-photo-item" @click="preview(url)">
          <image :src="url" mode="aspectFill" />
        </view>
      </view>
    </view>

    <view v-if="history.length" class="mp-block">
      <text class="mp-block__title">审批记录</text>
      <view class="mp-block__panel">
        <view v-for="h in history" :key="h.id" class="mp-kv">
          <text class="mp-kv__label">{{ dash(h.approverName || h.nodeName) }}</text>
          <text class="mp-kv__value">{{ dash(h.approvalStatus) }} · {{ dash(h.approvalOpinion) }}</text>
        </view>
      </view>
    </view>

    <view class="mp-bottom-bar">
      <view v-if="isDraft" class="mp-btn mp-btn--primary" @click="onSubmit">
        {{ acting ? '…' : '提交审批' }}
      </view>
      <template v-if="isPending">
        <view class="mp-btn mp-btn--danger" @click="doApprove(false)">驳回</view>
        <view class="mp-btn mp-btn--primary" @click="doApprove(true)">通过</view>
      </template>
    </view>
  </view>
</template>