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

<script setup>
import { ref } from 'vue'
import { onLoad, onShow, onReachBottom } from '@dcloudio/uni-app'
import {
  listPendingReimburse,
  listPendingAdvance,
  approveReimburse,
  rejectReimburse,
  approveAdvance,
  rejectAdvance
} from '@/api/bx'
import { bxStatusLabel, formatMoney, dash } from '@/utils/bxLabels'
import { PAGE_PATHS } from '@/config/api'

/** type: reimburse | advance */
const bizType = ref('reimburse')
const list = ref([])
const page = ref(1)
const total = ref(0)
const loading = ref(false)
const finished = ref(false)
const pageSize = 20

const titleText = ref('报销审批')

const goBack = () => {
  uni.navigateBack({
    fail: () => uni.switchTab({ url: PAGE_PATHS.workbench })
  })
}

const goDetail = (row) => {
  if (bizType.value === 'advance') {
    uni.navigateTo({ url: `${PAGE_PATHS.bxAdvanceDetail}?id=${row.id}` })
  } else {
    uni.navigateTo({ url: `${PAGE_PATHS.bxReimburseDetail}?id=${row.id}` })
  }
}

const loadList = async (reset = false) => {
  if (loading.value) return
  if (reset) {
    page.value = 1
    finished.value = false
    list.value = []
  }
  if (finished.value) return
  loading.value = true
  try {
    const q = { page: page.value, pageSize }
    const res =
      bizType.value === 'advance'
        ? await listPendingAdvance(q)
        : await listPendingReimburse(q)
    const rows = res.rows || []
    list.value = reset ? rows : list.value.concat(rows)
    total.value = res.total || 0
    if (list.value.length >= total.value || rows.length < pageSize) finished.value = true
    else page.value += 1
  } catch (e) {
    uni.showToast({ title: e.message || '加载失败', icon: 'none' })
  } finally {
    loading.value = false
  }
}

const doApprove = (row, pass) => {
  uni.showModal({
    title: pass ? '通过' : '驳回',
    editable: !pass,
    placeholderText: '驳回意见',
    success: async (r) => {
      if (!r.confirm) return
      try {
        const op = r.content || (pass ? '同意' : '驳回')
        if (bizType.value === 'advance') {
          if (pass) await approveAdvance(row.id, op)
          else await rejectAdvance(row.id, op)
        } else if (pass) await approveReimburse(row.id, op)
        else await rejectReimburse(row.id, op)
        uni.showToast({ title: '操作成功', icon: 'success' })
        loadList(true)
      } catch (e) {
        uni.showToast({ title: e.message || '操作失败', icon: 'none' })
      }
    }
  })
}

onLoad((q) => {
  bizType.value = q?.type === 'advance' ? 'advance' : 'reimburse'
  titleText.value = bizType.value === 'advance' ? '借款审批' : '报销审批'
})
onShow(() => loadList(true))
onReachBottom(() => loadList(false))
</script>

<template>
  <view class="mp-page mp-page--sub">
    <view class="mp-header mp-header--bx">
      <text class="mp-subpage-back" @click="goBack">← 工作台</text>
      <text class="mp-header__title" style="margin-top: 16rpx">{{ titleText }}</text>
    </view>

    <view class="mp-section">
      <mp-empty v-if="!list.length && !loading" title="暂无待审批" />
      <view v-else class="mp-list">
        <view v-for="row in list" :key="row.id" class="mp-card" @click="goDetail(row)">
          <view class="mp-card__head">
            <view>
              <text class="mp-card__title">{{ dash(row.applyCode) }}</text>
              <text class="mp-card__sub">
                {{ bizType === 'advance' ? dash(row.reason) : dash(row.expenseName || row.title) }}
              </text>
            </view>
            <text class="mp-tag" :class="'mp-tag--' + bxStatusLabel(row.status).tag">
              {{ bxStatusLabel(row.status).text }}
            </text>
          </view>
          <view class="mp-card__row">
            <text>申请人</text>
            <text class="mp-card__row-val">{{ dash(row.applicantName) }}</text>
          </view>
          <view class="mp-card__foot">
            <text class="mp-card__amount">{{ formatMoney(row.amount) }}</text>
            <view style="display: flex; gap: 16rpx" @click.stop>
              <view class="mp-btn mp-btn--danger mp-btn--sm" @click="doApprove(row, false)">驳回</view>
              <view class="mp-btn mp-btn--primary mp-btn--sm" @click="doApprove(row, true)">通过</view>
            </view>
          </view>
        </view>
      </view>
      <view v-if="loading" class="mp-list-loading">加载中…</view>
      <view v-else-if="finished && list.length" class="mp-list-end">已加载全部</view>
    </view>
  </view>
</template>