shanxia2.0/miniprogram/pages/bx/mine/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="fab-add" @click="onFabAdd">
      <view class="fab-add__bar fab-add__bar--h" />
      <view class="fab-add__bar fab-add__bar--v" />
    </view>

    <view class="mine-type-tabs stat-scroll">
      <view
        class="stat-card"
        :class="{ active: activeBiz === 'advance' }"
        @click="onBizChange('advance')"
      >
        <text class="label">备用金</text>
      </view>
      <view
        class="stat-card"
        :class="{ active: activeBiz === 'reimburse' }"
        @click="onBizChange('reimburse')"
      >
        <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="onRefresh"
        />
        <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: statusFilter === opt.value }"
            @click="onStatusChange(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="!list.length && !loading" class="empty-state empty-state--fill">
        <text>{{ activeBiz === 'advance' ? '暂无备用金申请' : '暂无报销申请' }}</text>
      </view>

      <!-- 备用金卡片 -->
      <template v-if="activeBiz === 'advance'">
        <view
          v-for="item in list"
          :key="'adv-' + item.id"
          class="expense-card"
          @click="goDetail(item, 'advance')"
        >
          <view class="ec-top">
            <view class="ec-type">
              <text class="advance-list-card__title">{{ advanceCardTitle(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="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 || item.code || '—' }}</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.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>
          <view class="ec-meta">
            <text>{{ formatApplyDateTime(item) }}</text>
          </view>
          <view class="ec-bottom" @click.stop>
            <view v-if="item.status === 'draft'" class="op-actions">
              <button class="btn btn-sm btn-danger" @click="handleDelete(item, 'advance')">
                删除
              </button>
              <button class="btn btn-sm btn-primary" @click="handleSubmit(item, 'advance')">
                提交
              </button>
            </view>
            <view v-else-if="item.status === 'rejected'" class="op-actions">
              <button class="btn btn-sm btn-primary" @click="goDetail(item, 'advance')">
                查看
              </button>
              <button class="btn btn-sm btn-primary" @click="handleSubmit(item, 'advance')">
                重新提交
              </button>
            </view>
            <view v-else class="op-actions">
              <button class="btn btn-sm btn-primary" @click="goDetail(item, 'advance')">
                查看
              </button>
            </view>
          </view>
        </view>
      </template>

      <!-- 报销卡片 -->
      <template v-else>
        <view
          v-for="item in list"
          :key="'reim-' + item.id"
          class="expense-card"
          @click="goDetail(item, 'reimburse')"
        >
          <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 || item.code || '—' }}</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="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 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 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>
          <view class="ec-meta">
            <text>{{ formatApplyDateTime(item) }}</text>
          </view>
          <view class="ec-bottom" @click.stop>
            <view v-if="item.status === 'draft'" class="op-actions">
              <button class="btn btn-sm btn-danger" @click="handleDelete(item, 'reimburse')">
                删除
              </button>
              <button class="btn btn-sm btn-primary" @click="handleSubmit(item, 'reimburse')">
                提交
              </button>
            </view>
            <view v-else-if="item.status === 'rejected'" class="op-actions">
              <button class="btn btn-sm btn-primary" @click="goDetail(item, 'reimburse')">
                查看
              </button>
              <button class="btn btn-sm btn-primary" @click="handleSubmit(item, 'reimburse')">
                重新提交
              </button>
            </view>
            <view v-else class="op-actions">
              <button class="btn btn-sm btn-primary" @click="goDetail(item, 'reimburse')">
                查看
              </button>
            </view>
          </view>
        </view>
      </template>

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

<script setup>
import { ref } from 'vue'
import { onShow } from '@dcloudio/uni-app'
import { PAGE_PATHS } from '@/config/api'
import { advanceApi, reimburseApi, expenseItemApi } from '@/api/bx'
import {
  statusLabel,
  workflowListStatusTagClass,
  formatAmount,
  formatApplyDateTime,
  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 activeBiz = ref('advance')
const keyword = ref('')
const statusFilter = ref('')
const list = ref([])
const loading = ref(false)
const finished = ref(false)
const refreshing = ref(false)
const currentPage = ref(1)
const pageSize = 20
const listHeight = ref('55vh')
const flatList = ref([])

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

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 fetchPage() {
  if (loading.value && !refreshing.value) return
  loading.value = true
  try {
    const params = {
      page: currentPage.value,
      pageSize
    }
    if (statusFilter.value) params.status = statusFilter.value
    if (keyword.value.trim()) params.keyword = keyword.value.trim()
    const api = activeBiz.value === 'advance' ? advanceApi : reimburseApi
    const res = await api.my(params)
    const rows = res.data?.rows || res.data?.items || []
    const total = res.data?.total || 0
    if (currentPage.value === 1) {
      list.value = rows
    } else {
      list.value = list.value.concat(rows)
    }
    currentPage.value += 1
    finished.value = rows.length < pageSize || list.value.length >= total
  } catch (e) {
    finished.value = true
  } finally {
    loading.value = false
    refreshing.value = false
  }
}

function onRefresh() {
  currentPage.value = 1
  finished.value = false
  loading.value = false
  list.value = []
  fetchPage()
}

function onPullRefresh() {
  refreshing.value = true
  currentPage.value = 1
  finished.value = false
  fetchPage()
}

function onLoadMore() {
  if (finished.value || loading.value) return
  fetchPage()
}

function onBizChange(biz) {
  if (activeBiz.value === biz) return
  activeBiz.value = biz
  onRefresh()
}

function onStatusChange(value) {
  statusFilter.value = value
  onRefresh()
}

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

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

function onFabAdd() {
  uni.showActionSheet({
    itemList: ['备用金申请', '报销申请'],
    success: (res) => {
      if (res.tapIndex === 0) {
        uni.navigateTo({ url: PAGE_PATHS.bxAdvanceApplyForm })
      } else if (res.tapIndex === 1) {
        uni.navigateTo({ url: PAGE_PATHS.bxReimburseApplyForm })
      }
    }
  })
}

function goDetail(item, biz) {
  const path =
    biz === 'advance' ? PAGE_PATHS.bxAdvanceDetail : PAGE_PATHS.bxReimburseDetail
  uni.navigateTo({ url: `${path}?id=${item.id}` })
}

async function handleSubmit(item, biz) {
  try {
    const api = biz === 'advance' ? advanceApi : reimburseApi
    await api.submit(item.id)
    uni.showToast({ title: '提交成功', icon: 'success' })
    onRefresh()
  } catch (e) {
    // toasted
  }
}

function handleDelete(item, biz) {
  uni.showModal({
    title: '删除确认',
    content: '确定要删除该申请单吗？删除后不可恢复。',
    confirmText: '确定删除',
    confirmColor: '#ef4444',
    success: async (res) => {
      if (!res.confirm) return
      try {
        const api = biz === 'advance' ? advanceApi : reimburseApi
        await api.delete(item.id)
        uni.showToast({ title: '删除成功', icon: 'success' })
        onRefresh()
      } catch (e) {
        // toasted
      }
    }
  })
}

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

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

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