208 lines
6.7 KiB
Vue
208 lines
6.7 KiB
Vue
<script setup>
|
|
import { ref } from 'vue'
|
|
import { onShow, onReachBottom } from '@dcloudio/uni-app'
|
|
import {
|
|
listPendingReimburse,
|
|
listPendingAdvance,
|
|
listMyReimburse,
|
|
listMyAdvance,
|
|
listApprovedByMeReimburse,
|
|
listApprovedByMeAdvance,
|
|
approveReimburse,
|
|
rejectReimburse,
|
|
approveAdvance,
|
|
rejectAdvance
|
|
} from '@/api/bx'
|
|
import { bxStatusLabel, formatMoney, dash } from '@/utils/bxLabels'
|
|
import { PAGE_PATHS } from '@/config/api'
|
|
|
|
const tabs = [
|
|
{ key: 'pending', label: '待审批' },
|
|
{ key: 'mine', label: '我的申请' },
|
|
{ key: 'done', label: '已办' }
|
|
]
|
|
|
|
const activeTab = ref('pending')
|
|
const list = ref([])
|
|
const loading = ref(false)
|
|
const finished = ref(false)
|
|
const page = ref(1)
|
|
const pageSize = 10
|
|
|
|
const goBack = () => {
|
|
uni.navigateBack({
|
|
fail: () => uni.switchTab({ url: PAGE_PATHS.workbench })
|
|
})
|
|
}
|
|
|
|
const goApply = () => {
|
|
uni.showActionSheet({
|
|
itemList: ['报销申请', '借款申请'],
|
|
success: (res) => {
|
|
if (res.tapIndex === 0) uni.navigateTo({ url: PAGE_PATHS.bxReimburseForm })
|
|
if (res.tapIndex === 1) uni.navigateTo({ url: PAGE_PATHS.bxAdvanceForm })
|
|
}
|
|
})
|
|
}
|
|
|
|
const goDetail = (row) => {
|
|
if (row._biz === 'advance') {
|
|
uni.navigateTo({ url: `${PAGE_PATHS.bxAdvanceDetail}?id=${row.id}` })
|
|
} else {
|
|
uni.navigateTo({ url: `${PAGE_PATHS.bxReimburseDetail}?id=${row.id}` })
|
|
}
|
|
}
|
|
|
|
const markBiz = (rows, biz) =>
|
|
(rows || []).map((r) => ({
|
|
...r,
|
|
_biz: biz,
|
|
_title: biz === 'advance' ? `借款单 ${r.applyCode || ''}` : `报销单 ${r.applyCode || ''}`,
|
|
_sub:
|
|
biz === 'advance'
|
|
? dash(r.reason || r.purpose)
|
|
: dash(r.expenseName || r.title)
|
|
}))
|
|
|
|
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 }
|
|
let rows = []
|
|
if (activeTab.value === 'pending') {
|
|
const [a, b] = await Promise.all([listPendingReimburse(q), listPendingAdvance(q)])
|
|
rows = markBiz(a.rows, 'reimburse').concat(markBiz(b.rows, 'advance'))
|
|
rows.sort((x, y) => String(y.applyTime || '').localeCompare(String(x.applyTime || '')))
|
|
finished.value = true
|
|
} else if (activeTab.value === 'mine') {
|
|
const [a, b] = await Promise.all([listMyReimburse(q), listMyAdvance(q)])
|
|
rows = markBiz(a.rows, 'reimburse').concat(markBiz(b.rows, 'advance'))
|
|
rows.sort((x, y) => String(y.applyTime || '').localeCompare(String(x.applyTime || '')))
|
|
const total = (a.total || 0) + (b.total || 0)
|
|
list.value = reset ? rows : list.value.concat(rows)
|
|
if (list.value.length >= total || (a.rows.length < pageSize && b.rows.length < pageSize)) {
|
|
finished.value = true
|
|
} else page.value += 1
|
|
return
|
|
} else {
|
|
const [a, b] = await Promise.all([
|
|
listApprovedByMeReimburse(q),
|
|
listApprovedByMeAdvance(q)
|
|
])
|
|
rows = markBiz(a.rows, 'reimburse').concat(markBiz(b.rows, 'advance'))
|
|
rows.sort((x, y) => String(y.applyTime || '').localeCompare(String(x.applyTime || '')))
|
|
finished.value = true
|
|
}
|
|
list.value = reset ? rows : list.value.concat(rows)
|
|
} catch (e) {
|
|
uni.showToast({ title: e.message || '加载失败', icon: 'none' })
|
|
} finally {
|
|
loading.value = false
|
|
}
|
|
}
|
|
|
|
const switchTab = (key) => {
|
|
if (activeTab.value === key) return
|
|
activeTab.value = key
|
|
loadList(true)
|
|
}
|
|
|
|
const doApprove = (row, pass) => {
|
|
const title = pass ? '通过' : '驳回'
|
|
uni.showModal({
|
|
title: `确认${title}`,
|
|
editable: !pass,
|
|
placeholderText: pass ? '' : '驳回意见（可选）',
|
|
success: async (r) => {
|
|
if (!r.confirm) return
|
|
try {
|
|
const opinion = r.content || (pass ? '同意' : '驳回')
|
|
if (row._biz === 'advance') {
|
|
if (pass) await approveAdvance(row.id, opinion)
|
|
else await rejectAdvance(row.id, opinion)
|
|
} else {
|
|
if (pass) await approveReimburse(row.id, opinion)
|
|
else await rejectReimburse(row.id, opinion)
|
|
}
|
|
uni.showToast({ title: `${title}成功`, icon: 'success' })
|
|
loadList(true)
|
|
} catch (e) {
|
|
uni.showToast({ title: e.message || '操作失败', icon: 'none' })
|
|
}
|
|
}
|
|
})
|
|
}
|
|
|
|
onShow(() => loadList(true))
|
|
onReachBottom(() => {
|
|
if (activeTab.value === 'mine') loadList(false)
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<view class="mp-page mp-page--sub">
|
|
<view class="mp-header mp-header--bx">
|
|
<view class="mp-header__row">
|
|
<text class="mp-subpage-back" @click="goBack">← 工作台</text>
|
|
<view class="mp-header__action" @click="goApply">+ 申请</view>
|
|
</view>
|
|
<text class="mp-header__title" style="margin-top: 16rpx">待办任务</text>
|
|
</view>
|
|
|
|
<view class="mp-section" style="padding-bottom: 0">
|
|
<scroll-view scroll-x class="mp-tabs">
|
|
<view
|
|
v-for="t in tabs"
|
|
:key="t.key"
|
|
class="mp-tab"
|
|
:class="{ 'mp-tab--active': activeTab === t.key }"
|
|
@click="switchTab(t.key)"
|
|
>
|
|
{{ t.label }}
|
|
</view>
|
|
</scroll-view>
|
|
</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._biz + '-' + row.id" class="mp-card" @click="goDetail(row)">
|
|
<view class="mp-card__head">
|
|
<view>
|
|
<text class="mp-card__title">{{ row._title }}</text>
|
|
<text class="mp-card__sub">{{ row._sub }}</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__row">
|
|
<text>申请时间</text>
|
|
<text class="mp-card__row-val">{{ dash(row.applyTime) }}</text>
|
|
</view>
|
|
<view class="mp-card__foot">
|
|
<text class="mp-card__amount">{{ formatMoney(row.amount) }}</text>
|
|
<view v-if="activeTab === 'pending'" 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>
|