feat: 新增客服备用金台账与后台用户中文显示名

- 新增备用金账户、流水、支出、对账与权限
- 后台用户支持中文显示名并同步备用金姓名
- 审计、登录记录、任务及工单操作人优先展示中文名
- 补充备用金与人工支出方案文档
This commit is contained in:
yml2213
2026-10-18 13:55:24 +08:00
parent 7bacb7d5eb
commit 7542d547bf
55 changed files with 6557 additions and 105 deletions
File diff suppressed because it is too large Load Diff
@@ -0,0 +1,564 @@
import { PlusOutlined, ReloadOutlined, RollbackOutlined } from '@ant-design/icons'
import { useQuery, useQueryClient } from '@tanstack/react-query'
import {
Alert,
App,
Button,
Card,
Checkbox,
Col,
DatePicker,
Descriptions,
Divider,
Form,
Input,
InputNumber,
Modal,
Row,
Select,
Space,
Statistic,
Table,
Tabs,
Tag,
Typography,
} from 'antd'
import type { TableColumnsType } from 'antd'
import dayjs from 'dayjs'
import { useState } from 'react'
import ImagePreviewList from '@/components/files/ImagePreviewList'
import ImageUpload from '@/components/files/ImageUpload'
import PageHeader from '@/components/admin/PageHeader'
import {
createAdminFundExpense,
createAdminFundReturn,
fetchAdminFundMyAccount,
} from '@/services/admin'
import type {
AdminFundEntry,
AdminFundExpense,
AdminFundExpenseCategory,
AdminFundPayeeType,
} from '@/types/admin'
import type { UploadedFile } from '@/types/worker-platform'
import { formatAdminDateTime } from '@/utils/admin-time'
import {
FUND_ACCOUNT_STATUS_LABELS,
FUND_CATEGORY_LABELS,
FUND_ENTRY_COLORS,
FUND_ENTRY_LABELS,
FUND_PAYEE_LABELS,
formatFundAmount,
toFen,
} from './fund-labels'
type ExpenseFormValues = {
amountYuan: number
category: AdminFundExpenseCategory
payeeType: AdminFundPayeeType
payeeName: string
payeeAccount?: string
platformName?: string
platformAccount?: string
orderId?: number
paidAt: dayjs.Dayjs
evidence: UploadedFile[]
note?: string
allowDuplicate?: boolean
}
type ReturnFormValues = {
amountYuan: number
occurredAt: dayjs.Dayjs
evidence: UploadedFile[]
note?: string
}
export default function FundSupportView() {
const { message } = App.useApp()
const queryClient = useQueryClient()
const [expenseOpen, setExpenseOpen] = useState(false)
const [returnOpen, setReturnOpen] = useState(false)
const [submitting, setSubmitting] = useState(false)
const [expenseForm] = Form.useForm<ExpenseFormValues>()
const [returnForm] = Form.useForm<ReturnFormValues>()
const myQuery = useQuery({
queryKey: ['admin-fund-my'],
queryFn: fetchAdminFundMyAccount,
})
const data = myQuery.data?.data
const account = data?.account || null
const entries = data?.entries || []
const expenses = data?.expenses || []
function refresh() {
void queryClient.invalidateQueries({ queryKey: ['admin-fund-my'] })
void queryClient.invalidateQueries({ queryKey: ['admin-fund-overview'] })
void queryClient.invalidateQueries({ queryKey: ['admin-fund-accounts'] })
void queryClient.invalidateQueries({ queryKey: ['admin-fund-expenses'] })
}
function openExpense() {
expenseForm.resetFields()
expenseForm.setFieldsValue({
category: 'platform_recharge',
payeeType: 'platform',
paidAt: dayjs(),
evidence: [],
allowDuplicate: false,
})
setExpenseOpen(true)
}
function openReturn() {
returnForm.resetFields()
returnForm.setFieldsValue({
occurredAt: dayjs(),
evidence: [],
})
setReturnOpen(true)
}
async function submitExpense(values: ExpenseFormValues) {
if (!account) return
setSubmitting(true)
try {
await createAdminFundExpense(account.id, {
amountFen: toFen(values.amountYuan),
category: values.category,
payeeType: values.payeeType,
payeeName: values.payeeName,
payeeAccount: values.payeeAccount || '',
platformName: values.platformName || '',
platformAccount: values.platformAccount || '',
orderId: values.orderId || null,
paidAt: values.paidAt.toISOString(),
evidence: values.evidence || [],
note: values.note || '',
allowDuplicate: values.allowDuplicate === true,
})
message.success('支出已登记')
setExpenseOpen(false)
refresh()
} catch (error) {
message.error(error instanceof Error ? error.message : '登记支出失败')
} finally {
setSubmitting(false)
}
}
async function submitReturn(values: ReturnFormValues) {
if (!account) return
setSubmitting(true)
try {
await createAdminFundReturn(account.id, {
amountFen: toFen(values.amountYuan),
occurredAt: values.occurredAt.toISOString(),
evidence: values.evidence || [],
note: values.note || '',
})
message.success('缴回已提交')
setReturnOpen(false)
refresh()
} catch (error) {
message.error(error instanceof Error ? error.message : '缴回失败')
} finally {
setSubmitting(false)
}
}
const entryColumns: TableColumnsType<AdminFundEntry> = [
{
title: '时间',
dataIndex: 'occurredAt',
width: 170,
render: (value: string) => formatAdminDateTime(value),
},
{
title: '类型',
dataIndex: 'entryType',
width: 110,
render: (value: AdminFundEntry['entryType']) => (
<Tag color={FUND_ENTRY_COLORS[value]}>{FUND_ENTRY_LABELS[value]}</Tag>
),
},
{
title: '金额',
dataIndex: 'amountFen',
width: 130,
render: (value: number) => (
<Typography.Text type={value >= 0 ? 'success' : 'danger'}>
{formatFundAmount(value, true)}
</Typography.Text>
),
},
{
title: '余额',
dataIndex: 'balanceAfterFen',
width: 130,
render: (value: number) => formatFundAmount(value),
},
{
title: '凭证',
dataIndex: 'evidence',
width: 120,
render: (value: UploadedFile[]) => (
<ImagePreviewList files={value} size={36} maxVisible={2} />
),
},
{
title: '说明',
dataIndex: 'note',
render: (value: string) => value || '-',
},
]
const expenseColumns: TableColumnsType<AdminFundExpense> = [
{
title: '付款时间',
dataIndex: 'paidAt',
width: 170,
render: (value: string) => formatAdminDateTime(value),
},
{ title: '支出单号', dataIndex: 'expenseNo', width: 150 },
{
title: '分类',
dataIndex: 'category',
width: 120,
render: (value: AdminFundExpenseCategory) => FUND_CATEGORY_LABELS[value] || value,
},
{
title: '收款方',
dataIndex: 'payeeName',
width: 180,
render: (_value: string, row) => (
<Space direction="vertical" size={0}>
<span>{row.payeeName}</span>
<Typography.Text type="secondary" style={{ fontSize: 12 }}>
{FUND_PAYEE_LABELS[row.payeeType]}
{row.payeeAccount ? ` · ${row.payeeAccount}` : ''}
</Typography.Text>
</Space>
),
},
{
title: '平台/账号',
dataIndex: 'platformName',
width: 180,
render: (_value: string, row) =>
row.platformName || row.platformAccount
? `${row.platformName || '-'}${row.platformAccount ? ` / ${row.platformAccount}` : ''}`
: '-',
},
{
title: '关联订单',
dataIndex: 'orderId',
width: 110,
render: (value: number | null) => (value ? `#${value}` : '-'),
},
{
title: '金额',
dataIndex: 'amountFen',
width: 130,
render: (value: number) => (
<Typography.Text type="danger">{formatFundAmount(value)}</Typography.Text>
),
},
{
title: '凭证',
dataIndex: 'evidence',
width: 120,
render: (value: UploadedFile[]) => (
<ImagePreviewList files={value} size={36} maxVisible={2} />
),
},
{ title: '说明', dataIndex: 'note', render: (value: string) => value || '-' },
]
return (
<section className="page-stack">
<PageHeader
title="我的备用金"
description="查看当前余额、登记每一笔支出;余额由流水自动计算,不能手工修改。"
extra={
<Button icon={<ReloadOutlined />} loading={myQuery.isFetching} onClick={refresh}>
刷新
</Button>
}
/>
{myQuery.error ? (
<Alert
type="error"
showIcon
message={myQuery.error instanceof Error ? myQuery.error.message : '读取我的备用金失败'}
/>
) : null}
{!account && !myQuery.isLoading ? (
<Alert
type="warning"
showIcon
message="还没有备用金账户"
description="请联系主管或管理员为你开通客服备用金账户。"
/>
) : null}
{account ? (
<>
<Row gutter={[16, 16]}>
<Col xs={24} sm={12} lg={6}>
<Card>
<Statistic
title="当前余额"
value={account.balanceFen / 100}
precision={2}
prefix="¥"
/>
</Card>
</Col>
<Col xs={24} sm={12} lg={6}>
<Card>
<Statistic
title="本月发放"
value={account.monthInFen / 100}
precision={2}
prefix="¥"
/>
</Card>
</Col>
<Col xs={24} sm={12} lg={6}>
<Card>
<Statistic
title="本月支出/缴回"
value={account.monthOutFen / 100}
precision={2}
prefix="¥"
/>
</Card>
</Col>
<Col xs={24} sm={12} lg={6}>
<Card>
<Statistic
title="最近对账"
value={
account.lastReconciledAt
? formatAdminDateTime(account.lastReconciledAt)
: '未对账'
}
valueStyle={{ fontSize: 18 }}
/>
</Card>
</Col>
</Row>
<Card>
<Descriptions column={2} size="small">
<Descriptions.Item label="账户编号">{account.accountNo}</Descriptions.Item>
<Descriptions.Item label="责任主管">
{account.responsibleSupervisorName || '-'}
</Descriptions.Item>
<Descriptions.Item label="账户状态">
{FUND_ACCOUNT_STATUS_LABELS[account.status] || account.status}
</Descriptions.Item>
<Descriptions.Item label="最近流水">
{account.lastEntryAt ? formatAdminDateTime(account.lastEntryAt) : '-'}
</Descriptions.Item>
</Descriptions>
<Divider />
<Space wrap>
<Button type="primary" icon={<PlusOutlined />} onClick={openExpense}>
登记支出
</Button>
<Button icon={<RollbackOutlined />} onClick={openReturn}>
缴回备用金
</Button>
</Space>
</Card>
<Card>
<Tabs
items={[
{
key: 'entries',
label: '资金流水',
children: (
<Table<AdminFundEntry>
rowKey="id"
size="small"
columns={entryColumns}
dataSource={entries}
pagination={false}
scroll={{ x: 900 }}
/>
),
},
{
key: 'expenses',
label: '我的支出',
children: (
<Table<AdminFundExpense>
rowKey="id"
size="small"
columns={expenseColumns}
dataSource={expenses}
pagination={false}
scroll={{ x: 1100 }}
/>
),
},
]}
/>
</Card>
</>
) : null}
<Modal
title="登记备用金支出"
open={expenseOpen}
onCancel={() => setExpenseOpen(false)}
onOk={() => expenseForm.submit()}
confirmLoading={submitting}
destroyOnHidden
width={720}
>
<Form<ExpenseFormValues> form={expenseForm} layout="vertical" onFinish={submitExpense}>
<Row gutter={16}>
<Col span={12}>
<Form.Item
name="amountYuan"
label="支出金额(元)"
rules={[{ required: true, message: '请输入支出金额' }]}
>
<InputNumber min={0.01} precision={2} style={{ width: '100%' }} />
</Form.Item>
</Col>
<Col span={12}>
<Form.Item
name="category"
label="支出分类"
rules={[{ required: true, message: '请选择分类' }]}
>
<Select
options={Object.entries(FUND_CATEGORY_LABELS).map(([value, label]) => ({
value,
label,
}))}
/>
</Form.Item>
</Col>
<Col span={12}>
<Form.Item
name="payeeType"
label="收款方类型"
rules={[{ required: true, message: '请选择收款方类型' }]}
>
<Select
options={Object.entries(FUND_PAYEE_LABELS).map(([value, label]) => ({
value,
label,
}))}
/>
</Form.Item>
</Col>
<Col span={12}>
<Form.Item
name="payeeName"
label="收款方名称"
rules={[{ required: true, message: '请填写收款方' }]}
>
<Input placeholder="平台/供应商/客户名称" />
</Form.Item>
</Col>
<Col span={12}>
<Form.Item name="payeeAccount" label="收款账号">
<Input placeholder="微信号/支付宝/银行卡/平台账号" />
</Form.Item>
</Col>
<Col span={12}>
<Form.Item name="platformName" label="充值/消费平台">
<Input placeholder="例如:91卡券、快手、游戏平台" />
</Form.Item>
</Col>
<Col span={12}>
<Form.Item name="platformAccount" label="平台账号">
<Input placeholder="充值时填写" />
</Form.Item>
</Col>
<Col span={12}>
<Form.Item name="orderId" label="关联订单 ID(可选)">
<InputNumber min={1} precision={0} style={{ width: '100%' }} />
</Form.Item>
</Col>
<Col span={12}>
<Form.Item
name="paidAt"
label="付款时间"
rules={[{ required: true, message: '请选择付款时间' }]}
>
<DatePicker showTime style={{ width: '100%' }} />
</Form.Item>
</Col>
<Col span={24}>
<Form.Item
name="evidence"
label="付款凭证"
rules={[{ required: true, message: '请上传付款截图' }]}
>
<ImageUpload scene="admin_fund_expense" scope="admin" maxCount={6} showPasteHint />
</Form.Item>
</Col>
<Col span={24}>
<Form.Item name="note" label="用途/原因">
<Input.TextArea rows={2} placeholder="例如:给订单 123 充值、赔偿客户、补差价" />
</Form.Item>
</Col>
<Col span={24}>
<Form.Item name="allowDuplicate" valuePropName="checked">
<Checkbox>我已确认这不是重复支出(同一客服、金额、收款方 24 小时内)</Checkbox>
</Form.Item>
</Col>
</Row>
</Form>
</Modal>
<Modal
title="缴回备用金"
open={returnOpen}
onCancel={() => setReturnOpen(false)}
onOk={() => returnForm.submit()}
confirmLoading={submitting}
destroyOnHidden
>
<Form<ReturnFormValues> form={returnForm} layout="vertical" onFinish={submitReturn}>
<Form.Item
name="amountYuan"
label="缴回金额(元)"
rules={[{ required: true, message: '请输入缴回金额' }]}
>
<InputNumber min={0.01} precision={2} style={{ width: '100%' }} />
</Form.Item>
<Form.Item
name="occurredAt"
label="缴回时间"
rules={[{ required: true, message: '请选择时间' }]}
>
<DatePicker showTime style={{ width: '100%' }} />
</Form.Item>
<Form.Item
name="evidence"
label="转账/交接凭证"
rules={[{ required: true, message: '请上传凭证' }]}
>
<ImageUpload scene="admin_fund_return" scope="admin" maxCount={4} />
</Form.Item>
<Form.Item name="note" label="备注">
<Input.TextArea rows={2} placeholder="缴回原因或交接说明" />
</Form.Item>
</Form>
</Modal>
</section>
)
}
@@ -0,0 +1,77 @@
import type {
AdminFundEntryType,
AdminFundExpenseCategory,
AdminFundPayeeType,
AdminFundReconciliationStatus,
} from '@/types/admin'
export const FUND_ENTRY_LABELS: Record<AdminFundEntryType, string> = {
opening: '期初',
funding: '公司拨付',
issue: '发放',
expense: '支出',
return: '缴回',
adjustment: '调整',
}
export const FUND_ENTRY_COLORS: Record<AdminFundEntryType, string> = {
opening: 'default',
funding: 'blue',
issue: 'green',
expense: 'red',
return: 'orange',
adjustment: 'purple',
}
export const FUND_CATEGORY_LABELS: Record<AdminFundExpenseCategory, string> = {
platform_recharge: '平台充值',
purchase: '采购/拿货',
compensation: '客户赔偿',
freight: '运费',
other: '其他',
}
export const FUND_PAYEE_LABELS: Record<AdminFundPayeeType, string> = {
platform: '平台',
supplier: '供应商',
customer: '客户',
other: '其他',
}
export const FUND_ACCOUNT_STATUS_LABELS: Record<string, string> = {
active: '正常',
frozen: '冻结',
closed: '关闭',
}
export const FUND_RECONCILIATION_STATUS_LABELS: Record<AdminFundReconciliationStatus, string> = {
pending: '待确认',
confirmed: '已对平',
discrepancy: '有差异',
}
export const FUND_RECONCILIATION_STATUS_COLORS: Record<AdminFundReconciliationStatus, string> = {
pending: 'gold',
confirmed: 'green',
discrepancy: 'red',
}
export function formatFundAmount(amountFen: number, withSign = false) {
const value = Number(amountFen || 0) / 100
const absolute = Math.abs(value).toFixed(2)
if (withSign) {
if (value > 0) return `+¥${absolute}`
if (value < 0) return `-¥${absolute}`
}
return value < 0 ? `-¥${absolute}` : `¥${absolute}`
}
export function toFen(value: unknown) {
const yuan = Number(value)
return Number.isFinite(yuan) ? Math.round(yuan * 100) : 0
}
export function fromFen(value: unknown) {
const fen = Number(value)
return Number.isFinite(fen) ? fen / 100 : 0
}