shanxia2.0/miniprogram/pages/bx/all/list.vue

<template>
  <view class="bx-page">
    <view class="topbar" :style="safeAreaStyle">
      <view class="topbar-left">
        <text class="topbar-back" @click="goBack">←</text>
        <text class="topbar-title">全部申请单</text>
      </view>
      <view class="topbar-right" />
    </view>

    <view class="mine-type-tabs stat-scroll mine-type-tabs--triple">
      <view
        class="stat-card"
        :class="{ active: activeTab === 0 }"
        @click="onBizTab(0)"
      >
        <text class="label">全部</text>
      </view>
      <view
        class="stat-card"
        :class="{ active: activeTab === 1 }"
        @click="onBizTab(1)"
      >
        <text class="label">备用金</text>
      </view>
      <view
        class="stat-card"
        :class="{ active: activeTab === 2 }"
        @click="onBizTab(2)"
      >
        <text class="label">报销申请</text>
      </view>
    </view>

    <view class="search-wrap">
      <view class="search-box">
        <input
          class="search-input"
          v-model="keyword"
          placeholder="搜索单号 / 申请人"
          confirm-type="search"
          @confirm="reload"
        />
        <view v-if="keyword.trim()" class="search-box__clear" @click="clearKeyword">×</view>
      </view>
    </view>

    <view class="search-wrap" style="padding-top: 0">
      <scroll-view scroll-x class="search-filter-scroll" :show-scrollbar="false">
        <view class="search-filter">
          <view
            v-for="opt in statusFilters"
            :key="opt.value === '' ? '__all' : opt.value"
            class="filter-tag"
            :class="{ active: filterStatus === opt.value }"
            @click="onStatusFilter(opt.value)"
          >
            {{ opt.label }}
          </view>
        </view>
      </scroll-view>
    </view>

    <scroll-view
      class="page-padded list-scroll"
      scroll-y
      :style="{ height: listHeight }"
      refresher-enabled
      :refresher-triggered="refreshing"
      @refresherrefresh="onPullRefresh"
      @scrolltolower="onLoadMore"
    >
      <view v-if="!loading && !displayList.length" class="empty-state empty-state--fill">
        <text>暂无记录</text>
      </view>

      <view
        v-for="item in displayList"
        :key="item.id + '-' + item.bizType"
        class="expense-card"
        @click="goDetail(item)"
      >
        <template v-if="item.bizType === '备用金'">
          <view class="ec-top">
            <view class="ec-type">
              <text class="advance-list-card__title">{{ advanceCardTitle(item) }}</text>
            </view>
            <text class="advance-ticket-status" :class="ticketHeaderStatusToneClass(item.status)">
              {{ statusLabel(item.status) }}
            </text>
          </view>
          <view class="ec-amount-label">申请金额</view>
          <view class="ec-amount">{{ formatAmount(item.amount) }}</view>
          <view class="advance-card-subs">
            <view class="advance-card-sub-row">
              <text class="k">实际发放金额</text>
              <text class="v">¥ {{ actualIssuedDisplay(item) }}</text>
            </view>
            <view class="advance-card-sub-row">
              <text class="k">实际冲抵</text>
              <text class="v">¥ {{ formatAmount(advanceOffsetTotal(item)) }}</text>
            </view>
          </view>
          <view class="list-card-kv">
            <view class="list-card-kv__row">
              <text class="list-card-kv__k">申请单号</text>
              <text class="list-card-kv__v">{{ item.applyCode || '—' }}</text>
            </view>
            <view class="list-card-kv__row">
              <text class="list-card-kv__k">申请人</text>
              <text class="list-card-kv__v">{{ item.applicantName || '-' }}</text>
            </view>
            <view v-if="item.departmentName" class="list-card-kv__row">
              <text class="list-card-kv__k">部门</text>
              <text class="list-card-kv__v">{{ item.departmentName }}</text>
            </view>
            <view v-if="item.currentNode" class="list-card-kv__row">
              <text class="list-card-kv__k">当前环节</text>
              <text class="list-card-kv__v">{{ item.currentNode }}</text>
            </view>
            <view v-if="item.remark" class="list-card-kv__row">
              <text class="list-card-kv__k">备注</text>
              <text class="list-card-kv__v">{{ item.remark }}</text>
            </view>
          </view>
        </template>
        <template v-else>
          <view class="ec-top">
            <view class="ec-type">
              <text class="reimburse-list-card__title">{{ reimburseCardTitle(item) }}</text>
            </view>
            <text class="status-tag" :class="workflowListStatusTagClass(item.status)">
              {{ statusLabel(item.status) }}
            </text>
          </view>
          <view class="ec-amount-label">报销金额</view>
          <view class="ec-amount">{{ formatAmount(item.amount) }}</view>
          <view class="reimburse-card-subs">
            <view class="reimburse-card-sub-row">
              <text class="k">冲抵金额</text>
              <text class="v">¥ {{ moneyOrDash(item.offsetAmount ?? item.offset_amount) }}</text>
            </view>
            <view class="reimburse-card-sub-row">
              <text class="k">实付金额</text>
              <text class="v">
                ¥ {{ moneyOrDash(item.payAmount ?? item.actualAmount ?? item.actual_amount) }}
              </text>
            </view>
          </view>
          <view class="list-card-kv">
            <view class="list-card-kv__row">
              <text class="list-card-kv__k">申请单号</text>
              <text class="list-card-kv__v">{{ item.applyCode || '—' }}</text>
            </view>
            <view class="list-card-kv__row">
              <text class="list-card-kv__k">申请人</text>
              <text class="list-card-kv__v">{{ item.applicantName || '-' }}</text>
            </view>
            <view v-if="item.departmentName" class="list-card-kv__row">
              <text class="list-card-kv__k">部门</text>
              <text class="list-card-kv__v">{{ item.departmentName }}</text>
            </view>
            <view v-if="item.currentNode" class="list-card-kv__row">
              <text class="list-card-kv__k">当前环节</text>
              <text class="list-card-kv__v">{{ item.currentNode }}</text>
            </view>
            <view
              v-if="resolveExpenseDisplay(item, flatList) !== '-'"
              class="list-card-kv__row"
            >
              <text class="list-card-kv__k">费用项目</text>
              <text class="list-card-kv__v">{{ resolveExpenseDisplay(item, flatList) }}</text>
            </view>
            <view class="list-card-kv__row">
              <text class="list-card-kv__k">发票 / 附件</text>
              <text class="list-card-kv__v">
                {{ item.invoiceCount ?? 0 }} 张 · {{ item.attachCount ?? 0 }} 个
              </text>
            </view>
            <view v-if="item.remark" class="list-card-kv__row">
              <text class="list-card-kv__k">备注</text>
              <text class="list-card-kv__v">{{ item.remark }}</text>
            </view>
          </view>
        </template>
        <view class="ec-meta">
          <text>{{ formatApplyDateTime(item) }}</text>
        </view>
        <view class="ec-bottom all-list-card__bottom" @click.stop>
          <view class="op-actions">
            <button class="btn btn-sm btn-primary" @click="goDetail(item)">查看</button>
          </view>
        </view>
      </view>

      <view v-if="displayList.length" class="list-footer-tip">
        {{ finished ? '没有更多了' : loading ? '加载中...' : '上拉加载更多' }}
      </view>
    </scroll-view>
  </view>
</template>

<script setup>
import { ref, computed } from 'vue'
import { onShow } from '@dcloudio/uni-app'
import { PAGE_PATHS } from '@/config/api'
import { advanceApi, reimburseApi, expenseItemApi } from '@/api/bx'
import {
  statusLabel,
  ticketHeaderStatusToneClass,
  workflowListStatusTagClass,
  formatAmount,
  formatApplyDateTime,
  pickApplyTime,
  flattenExpenseTree,
  normalizeExpenseItem,
  resolveExpenseDisplay
} from '@/utils/bxFormat'
import { getSafeAreaStyle } from '@/utils/safeArea'

const safeAreaStyle = getSafeAreaStyle()

const statusFilters = [
  { label: '全部', value: '' },
  { label: '待提交', value: 'draft' },
  { label: '审批中', value: 'pending' },
  { label: '已通过', value: 'approved' },
  { label: '已驳回', value: 'rejected' },
  { label: '已发放', value: 'issued' },
  { label: '已支付', value: 'paid' },
  { label: '已冲抵', value: 'offset' }
]

const activeTab = ref(0)
const keyword = ref('')
const filterStatus = ref('')
const allRows = ref([])
const loading = ref(false)
const refreshing = ref(false)
const finished = ref(false)
const displayPage = ref(1)
const displayPageSize = 20
const listHeight = ref('55vh')
const flatList = ref([])

const displayList = computed(() => {
  const end = displayPage.value * displayPageSize
  return allRows.value.slice(0, end)
})

function computeListHeight() {
  try {
    const sys = uni.getSystemInfoSync()
    const h = (sys.windowHeight || 600) - 260
    listHeight.value = `${Math.max(h, 280)}px`
  } catch (e) {
    listHeight.value = '55vh'
  }
}

function advanceCardTitle(item) {
  const r = (item.reason ?? '').toString().trim()
  if (r) return r
  const p = (item.purpose ?? '').toString().trim()
  return p || '—'
}

function reimburseCardTitle(item) {
  const t = (item.title ?? '').toString().trim()
  if (t) return t
  const ex = resolveExpenseDisplay(item, flatList.value)
  return ex !== '-' ? ex : '—'
}

function actualIssuedDisplay(item) {
  const raw = item.actualAmount ?? item.actual_amount
  if (raw == null || raw === '') return '—'
  const n = typeof raw === 'string' ? parseFloat(raw) : Number(raw)
  if (Number.isNaN(n)) return '—'
  return formatAmount(n)
}

function advanceOffsetTotal(item) {
  const raw = item.offsetAmount ?? item.offset_amount ?? 0
  const n = typeof raw === 'string' ? parseFloat(raw) : Number(raw)
  return Number.isNaN(n) ? 0 : n
}

function moneyOrDash(raw) {
  if (raw == null || raw === '') return '—'
  const n = typeof raw === 'string' ? parseFloat(raw) : Number(raw)
  if (Number.isNaN(n) || n === 0) return '—'
  return formatAmount(n)
}

function mapAdvances(rows) {
  return (rows || []).map((r) => ({
    ...r,
    bizType: '备用金',
    applyCode: r.applyCode || r.code,
    applicantName: r.applicantName || r.user
  }))
}

function mapReimburses(rows) {
  return (rows || []).map((r) => ({
    ...r,
    bizType: '报销申请',
    applyCode: r.applyCode || r.code,
    applicantName: r.applicantName || r.user
  }))
}

function extractRows(res) {
  return res?.data?.rows || res?.data?.items || []
}

function syncFinished() {
  finished.value = displayList.value.length >= allRows.value.length
}

async function ensureExpenseFlat() {
  if (flatList.value.length) return
  try {
    const res = await expenseItemApi.tree()
    const tree = (res.data || []).map(normalizeExpenseItem)
    flatList.value = flattenExpenseTree(tree)
  } catch (e) {
    flatList.value = []
  }
}

async function loadAllData() {
  const kw = keyword.value.trim()
  const params = { page: 1, pageSize: 280 }
  if (filterStatus.value) params.status = filterStatus.value
  if (kw) params.keyword = kw

  loading.value = true
  try {
    if (activeTab.value === 1) {
      const advRes = await advanceApi.list(params)
      allRows.value = mapAdvances(extractRows(advRes))
      return
    }
    if (activeTab.value === 2) {
      const reimRes = await reimburseApi.list(params)
      allRows.value = mapReimburses(extractRows(reimRes))
      return
    }
    const [advRes, reimRes] = await Promise.all([
      advanceApi.list(params),
      reimburseApi.list(params)
    ])
    const merged = [
      ...mapAdvances(extractRows(advRes)),
      ...mapReimburses(extractRows(reimRes))
    ]
    merged.sort((a, b) => {
      const tA = new Date(pickApplyTime(a) || 0).getTime()
      const tB = new Date(pickApplyTime(b) || 0).getTime()
      return tB - tA
    })
    allRows.value = merged
  } catch (e) {
    allRows.value = []
  } finally {
    loading.value = false
    refreshing.value = false
  }
}

async function reload() {
  displayPage.value = 1
  await loadAllData()
  syncFinished()
}

function onPullRefresh() {
  refreshing.value = true
  reload()
}

function onLoadMore() {
  if (finished.value || loading.value) return
  if (displayList.value.length < allRows.value.length) {
    displayPage.value += 1
    syncFinished()
  } else {
    finished.value = true
  }
}

async function onBizTab(tab) {
  if (activeTab.value === tab) return
  activeTab.value = tab
  await reload()
}

async function onStatusFilter(value) {
  filterStatus.value = value
  await reload()
}

function clearKeyword() {
  keyword.value = ''
  reload()
}

function goBack() {
  uni.navigateBack({ fail: () => uni.reLaunch({ url: PAGE_PATHS.workbench }) })
}

function goDetail(item) {
  const path =
    item.bizType === '备用金' ? PAGE_PATHS.bxAdvanceDetail : PAGE_PATHS.bxReimburseDetail
  uni.navigateTo({ url: `${path}?id=${item.id}` })
}

onShow(async () => {
  computeListHeight()
  await ensureExpenseFlat()
  await reload()
})
</script>

<style lang="scss">
@import '@/styles/bx-theme.scss';

.list-scroll {
  box-sizing: border-box;
}
</style>