1812 lines
62 KiB
TypeScript
1812 lines
62 KiB
TypeScript
import {
|
||
CheckCircleOutlined,
|
||
PlusOutlined,
|
||
ReloadOutlined,
|
||
SwapOutlined,
|
||
WalletOutlined,
|
||
} from '@ant-design/icons'
|
||
import { useQuery, useQueryClient } from '@tanstack/react-query'
|
||
import {
|
||
Alert,
|
||
App,
|
||
Button,
|
||
Card,
|
||
Checkbox,
|
||
Col,
|
||
DatePicker,
|
||
Descriptions,
|
||
Drawer,
|
||
Form,
|
||
Input,
|
||
InputNumber,
|
||
Modal,
|
||
Row,
|
||
Select,
|
||
Space,
|
||
Statistic,
|
||
Tabs,
|
||
Tag,
|
||
Typography,
|
||
} from 'antd'
|
||
import PercentTable from '@/components/common/PercentTable'
|
||
import type { TableColumnsType } from 'antd'
|
||
import dayjs from 'dayjs'
|
||
import type { Dayjs } from 'dayjs'
|
||
import { useState } from 'react'
|
||
|
||
import { PlatformCreditPanel } from './PlatformCreditPanel'
|
||
import ImagePreviewList from '@/components/files/ImagePreviewList'
|
||
import ImageUpload from '@/components/files/ImageUpload'
|
||
import PageHeader from '@/components/admin/PageHeader'
|
||
import {
|
||
confirmAdminFundReconciliation,
|
||
createAdminFundAccount,
|
||
createAdminFundExpense,
|
||
createAdminFundFunding,
|
||
createAdminFundIssue,
|
||
createAdminFundReconciliation,
|
||
createAdminFundReturn,
|
||
ensureAdminFundAgentAccounts,
|
||
fetchAdminFundAccountDetail,
|
||
fetchAdminFundAccounts,
|
||
fetchAdminFundExpenses,
|
||
fetchAdminFundOverview,
|
||
fetchAdminFundReconciliations,
|
||
fetchAdminFundSetupOptions,
|
||
updateAdminFundAccount,
|
||
} from '@/services/admin'
|
||
import type {
|
||
AdminFundAccount,
|
||
AdminFundEntry,
|
||
AdminFundExpense,
|
||
AdminFundExpenseCategory,
|
||
AdminFundPayeeType,
|
||
AdminFundReconciliation,
|
||
AdminFundSetupUser,
|
||
} from '@/types/admin'
|
||
import type { UploadedFile } from '@/types/worker-platform'
|
||
import { formatAdminDateTime } from '@/utils/admin-time'
|
||
import { buildAdminTablePagination } from '@/utils/admin-pagination'
|
||
import {
|
||
FUND_ACCOUNT_STATUS_LABELS,
|
||
FUND_CATEGORY_LABELS,
|
||
FUND_ENTRY_COLORS,
|
||
FUND_ENTRY_LABELS,
|
||
FUND_PAYEE_LABELS,
|
||
FUND_RECONCILIATION_STATUS_COLORS,
|
||
FUND_RECONCILIATION_STATUS_LABELS,
|
||
formatFundAmount,
|
||
fromFen,
|
||
toFen,
|
||
} from './fund-labels'
|
||
|
||
type ManagementRole = 'admin' | 'operator' | 'finance'
|
||
|
||
type IssueFormValues = {
|
||
agentAccountId: number
|
||
supervisorAccountId?: number
|
||
amountYuan: number
|
||
occurredAt: Dayjs
|
||
evidence: UploadedFile[]
|
||
note?: string
|
||
}
|
||
|
||
type FundingFormValues = {
|
||
supervisorAccountId: number
|
||
amountYuan: number
|
||
occurredAt: Dayjs
|
||
evidence: UploadedFile[]
|
||
note?: string
|
||
}
|
||
|
||
type ExpenseFormValues = {
|
||
agentAccountId: number
|
||
amountYuan: number
|
||
category: AdminFundExpenseCategory
|
||
payeeType: AdminFundPayeeType
|
||
payeeName: string
|
||
payeeAccount?: string
|
||
platformName?: string
|
||
platformAccount?: string
|
||
orderId?: number
|
||
paidAt: Dayjs
|
||
evidence: UploadedFile[]
|
||
note?: string
|
||
allowDuplicate?: boolean
|
||
}
|
||
|
||
type ReturnFormValues = {
|
||
agentAccountId: number
|
||
supervisorAccountId?: number
|
||
amountYuan: number
|
||
occurredAt: Dayjs
|
||
evidence: UploadedFile[]
|
||
note?: string
|
||
}
|
||
|
||
type ReconcileFormValues = {
|
||
accountId: number
|
||
period: [Dayjs, Dayjs]
|
||
actualBalanceYuan: number
|
||
reason?: string
|
||
evidence: UploadedFile[]
|
||
}
|
||
|
||
type ConfirmReconcileFormValues = {
|
||
reason?: string
|
||
evidence: UploadedFile[]
|
||
}
|
||
|
||
type CreateAccountFormValues = {
|
||
accountType: 'supervisor' | 'agent'
|
||
ownerAdminUserId: number
|
||
responsibleSupervisorAccountId?: number
|
||
openingBalanceYuan?: number
|
||
}
|
||
|
||
type BulkAgentsFormValues = {
|
||
responsibleSupervisorAccountId: number
|
||
openingBalanceYuan?: number
|
||
}
|
||
|
||
export default function FundManagementView({ role }: { role: ManagementRole }) {
|
||
const { message } = App.useApp()
|
||
const queryClient = useQueryClient()
|
||
const isAdmin = role === 'admin'
|
||
const canIssue = role === 'admin' || role === 'operator'
|
||
const canReconcile = role === 'admin' || role === 'operator' || role === 'finance'
|
||
const canExpense = role === 'admin'
|
||
const canManageCredits = role === 'admin' || role === 'finance'
|
||
|
||
const [activeTab, setActiveTab] = useState('overview')
|
||
const [submitting, setSubmitting] = useState(false)
|
||
const [issueOpen, setIssueOpen] = useState(false)
|
||
const [fundingOpen, setFundingOpen] = useState(false)
|
||
const [expenseOpen, setExpenseOpen] = useState(false)
|
||
const [returnOpen, setReturnOpen] = useState(false)
|
||
const [reconcileOpen, setReconcileOpen] = useState(false)
|
||
const [confirmReconcileOpen, setConfirmReconcileOpen] = useState(false)
|
||
const [createAccountOpen, setCreateAccountOpen] = useState(false)
|
||
const [bulkAgentsOpen, setBulkAgentsOpen] = useState(false)
|
||
const [detailAccount, setDetailAccount] = useState<AdminFundAccount | null>(null)
|
||
const [confirmReconciliation, setConfirmReconciliation] =
|
||
useState<AdminFundReconciliation | null>(null)
|
||
|
||
const [expensePage, setExpensePage] = useState(1)
|
||
const [expensePageSize, setExpensePageSize] = useState(20)
|
||
const [expenseKeyword, setExpenseKeyword] = useState('')
|
||
const [expenseCategory, setExpenseCategory] = useState('')
|
||
const [expenseRange, setExpenseRange] = useState<[Dayjs, Dayjs] | null>(null)
|
||
|
||
const [reconciliationPage, setReconciliationPage] = useState(1)
|
||
const [reconciliationPageSize, setReconciliationPageSize] = useState(20)
|
||
const [reconciliationStatus, setReconciliationStatus] = useState('')
|
||
|
||
const [issueForm] = Form.useForm<IssueFormValues>()
|
||
const [fundingForm] = Form.useForm<FundingFormValues>()
|
||
const [expenseForm] = Form.useForm<ExpenseFormValues>()
|
||
const [returnForm] = Form.useForm<ReturnFormValues>()
|
||
const [reconcileForm] = Form.useForm<ReconcileFormValues>()
|
||
const [confirmReconcileForm] = Form.useForm<ConfirmReconcileFormValues>()
|
||
const [createAccountForm] = Form.useForm<CreateAccountFormValues>()
|
||
const [bulkAgentsForm] = Form.useForm<BulkAgentsFormValues>()
|
||
|
||
const createAccountType = Form.useWatch('accountType', createAccountForm) || 'agent'
|
||
|
||
const overviewQuery = useQuery({
|
||
queryKey: ['admin-fund-overview'],
|
||
queryFn: fetchAdminFundOverview,
|
||
})
|
||
const agentsQuery = useQuery({
|
||
queryKey: ['admin-fund-accounts', 'agent'],
|
||
queryFn: () => fetchAdminFundAccounts({ accountType: 'agent', pageSize: 100 }),
|
||
})
|
||
const supervisorsQuery = useQuery({
|
||
queryKey: ['admin-fund-accounts', 'supervisor'],
|
||
queryFn: () => fetchAdminFundAccounts({ accountType: 'supervisor', pageSize: 100 }),
|
||
})
|
||
const expensesQuery = useQuery({
|
||
queryKey: [
|
||
'admin-fund-expenses',
|
||
expensePage,
|
||
expensePageSize,
|
||
expenseKeyword,
|
||
expenseCategory,
|
||
expenseRange?.[0]?.format('YYYY-MM-DD HH:mm:ss') || '',
|
||
expenseRange?.[1]?.format('YYYY-MM-DD HH:mm:ss') || '',
|
||
],
|
||
queryFn: () =>
|
||
fetchAdminFundExpenses({
|
||
page: expensePage,
|
||
pageSize: expensePageSize,
|
||
keyword: expenseKeyword || undefined,
|
||
category: expenseCategory || undefined,
|
||
dateFrom: expenseRange?.[0]?.format('YYYY-MM-DD HH:mm:ss'),
|
||
dateTo: expenseRange?.[1]?.format('YYYY-MM-DD HH:mm:ss'),
|
||
}),
|
||
})
|
||
const reconciliationsQuery = useQuery({
|
||
queryKey: [
|
||
'admin-fund-reconciliations',
|
||
reconciliationPage,
|
||
reconciliationPageSize,
|
||
reconciliationStatus,
|
||
],
|
||
queryFn: () =>
|
||
fetchAdminFundReconciliations({
|
||
page: reconciliationPage,
|
||
pageSize: reconciliationPageSize,
|
||
status: reconciliationStatus || undefined,
|
||
}),
|
||
})
|
||
const setupQuery = useQuery({
|
||
queryKey: ['admin-fund-options'],
|
||
queryFn: fetchAdminFundSetupOptions,
|
||
enabled: isAdmin,
|
||
})
|
||
const detailQuery = useQuery({
|
||
queryKey: ['admin-fund-account-detail', detailAccount?.id],
|
||
queryFn: () => fetchAdminFundAccountDetail(detailAccount!.id, { page: 1, pageSize: 100 }),
|
||
enabled: Boolean(detailAccount?.id),
|
||
})
|
||
|
||
const overview = overviewQuery.data?.data
|
||
const agentAccounts = agentsQuery.data?.data.items || []
|
||
const supervisorAccounts = supervisorsQuery.data?.data.items || []
|
||
const expenses = expensesQuery.data?.data.items || []
|
||
const expensePagination = expensesQuery.data?.data.pagination
|
||
const reconciliations = reconciliationsQuery.data?.data.items || []
|
||
const reconciliationPagination = reconciliationsQuery.data?.data.pagination
|
||
const setup = setupQuery.data?.data
|
||
|
||
const agentOptions = agentAccounts.map((account) => ({
|
||
value: account.id,
|
||
label: `${account.ownerName}（余额 ${formatFundAmount(account.balanceFen)}）`,
|
||
}))
|
||
const supervisorOptions = supervisorAccounts.map((account) => ({
|
||
value: account.id,
|
||
label: `${account.ownerName}（余额 ${formatFundAmount(account.balanceFen)}）`,
|
||
}))
|
||
|
||
function refreshAll() {
|
||
void queryClient.invalidateQueries({ queryKey: ['admin-fund-overview'] })
|
||
void queryClient.invalidateQueries({ queryKey: ['admin-fund-accounts'] })
|
||
void queryClient.invalidateQueries({ queryKey: ['admin-fund-expenses'] })
|
||
void queryClient.invalidateQueries({ queryKey: ['admin-fund-reconciliations'] })
|
||
void queryClient.invalidateQueries({ queryKey: ['admin-fund-account-detail'] })
|
||
void queryClient.invalidateQueries({ queryKey: ['admin-fund-options'] })
|
||
void queryClient.invalidateQueries({ queryKey: ['admin-fund-my'] })
|
||
}
|
||
|
||
function openIssue(account?: AdminFundAccount) {
|
||
issueForm.resetFields()
|
||
issueForm.setFieldsValue({
|
||
agentAccountId:
|
||
account?.accountType === 'agent'
|
||
? account.id
|
||
: (agentAccounts[0]?.id as number | undefined),
|
||
supervisorAccountId:
|
||
account?.accountType === 'supervisor'
|
||
? account.id
|
||
: (supervisorAccounts[0]?.id as number | undefined),
|
||
occurredAt: dayjs(),
|
||
evidence: [],
|
||
})
|
||
setIssueOpen(true)
|
||
}
|
||
|
||
function openFunding(account?: AdminFundAccount) {
|
||
fundingForm.resetFields()
|
||
fundingForm.setFieldsValue({
|
||
supervisorAccountId: account?.id || (supervisorAccounts[0]?.id as number | undefined),
|
||
occurredAt: dayjs(),
|
||
evidence: [],
|
||
})
|
||
setFundingOpen(true)
|
||
}
|
||
|
||
function openExpense(account?: AdminFundAccount) {
|
||
expenseForm.resetFields()
|
||
expenseForm.setFieldsValue({
|
||
agentAccountId:
|
||
account?.accountType === 'agent'
|
||
? account.id
|
||
: (agentAccounts[0]?.id as number | undefined),
|
||
category: 'platform_recharge',
|
||
payeeType: 'platform',
|
||
paidAt: dayjs(),
|
||
evidence: [],
|
||
allowDuplicate: false,
|
||
})
|
||
setExpenseOpen(true)
|
||
}
|
||
|
||
function openReturn(account?: AdminFundAccount) {
|
||
returnForm.resetFields()
|
||
returnForm.setFieldsValue({
|
||
agentAccountId:
|
||
account?.accountType === 'agent'
|
||
? account.id
|
||
: (agentAccounts[0]?.id as number | undefined),
|
||
supervisorAccountId:
|
||
account?.accountType === 'supervisor'
|
||
? account.id
|
||
: (supervisorAccounts[0]?.id as number | undefined),
|
||
occurredAt: dayjs(),
|
||
evidence: [],
|
||
})
|
||
setReturnOpen(true)
|
||
}
|
||
|
||
function openReconcile(account?: AdminFundAccount) {
|
||
reconcileForm.resetFields()
|
||
reconcileForm.setFieldsValue({
|
||
accountId:
|
||
account?.accountType === 'agent'
|
||
? account.id
|
||
: (agentAccounts[0]?.id as number | undefined),
|
||
period: [dayjs().subtract(7, 'day'), dayjs()],
|
||
actualBalanceYuan: account ? fromFen(account.balanceFen) : 0,
|
||
evidence: [],
|
||
})
|
||
setReconcileOpen(true)
|
||
}
|
||
|
||
function openConfirmReconcile(reconciliation: AdminFundReconciliation) {
|
||
setConfirmReconciliation(reconciliation)
|
||
confirmReconcileForm.resetFields()
|
||
confirmReconcileForm.setFieldsValue({
|
||
reason: reconciliation.reason || '',
|
||
evidence: [],
|
||
})
|
||
setConfirmReconcileOpen(true)
|
||
}
|
||
|
||
async function submitIssue(values: IssueFormValues) {
|
||
setSubmitting(true)
|
||
try {
|
||
await createAdminFundIssue(values.agentAccountId, {
|
||
agentAccountId: values.agentAccountId,
|
||
supervisorAccountId: values.supervisorAccountId,
|
||
amountFen: toFen(values.amountYuan),
|
||
occurredAt: values.occurredAt.toISOString(),
|
||
evidence: values.evidence || [],
|
||
note: values.note || '',
|
||
})
|
||
message.success('备用金已发放')
|
||
setIssueOpen(false)
|
||
refreshAll()
|
||
} catch (error) {
|
||
message.error(error instanceof Error ? error.message : '发放备用金失败')
|
||
} finally {
|
||
setSubmitting(false)
|
||
}
|
||
}
|
||
|
||
async function submitFunding(values: FundingFormValues) {
|
||
setSubmitting(true)
|
||
try {
|
||
await createAdminFundFunding(values.supervisorAccountId, {
|
||
supervisorAccountId: values.supervisorAccountId,
|
||
amountFen: toFen(values.amountYuan),
|
||
occurredAt: values.occurredAt.toISOString(),
|
||
evidence: values.evidence || [],
|
||
note: values.note || '',
|
||
})
|
||
message.success('主管资金池已拨付')
|
||
setFundingOpen(false)
|
||
refreshAll()
|
||
} catch (error) {
|
||
message.error(error instanceof Error ? error.message : '拨付失败')
|
||
} finally {
|
||
setSubmitting(false)
|
||
}
|
||
}
|
||
|
||
async function submitExpense(values: ExpenseFormValues) {
|
||
setSubmitting(true)
|
||
try {
|
||
await createAdminFundExpense(values.agentAccountId, {
|
||
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)
|
||
refreshAll()
|
||
} catch (error) {
|
||
message.error(error instanceof Error ? error.message : '登记支出失败')
|
||
} finally {
|
||
setSubmitting(false)
|
||
}
|
||
}
|
||
|
||
async function submitReturn(values: ReturnFormValues) {
|
||
setSubmitting(true)
|
||
try {
|
||
await createAdminFundReturn(values.agentAccountId, {
|
||
agentAccountId: values.agentAccountId,
|
||
supervisorAccountId: values.supervisorAccountId,
|
||
amountFen: toFen(values.amountYuan),
|
||
occurredAt: values.occurredAt.toISOString(),
|
||
evidence: values.evidence || [],
|
||
note: values.note || '',
|
||
})
|
||
message.success('备用金已缴回')
|
||
setReturnOpen(false)
|
||
refreshAll()
|
||
} catch (error) {
|
||
message.error(error instanceof Error ? error.message : '缴回失败')
|
||
} finally {
|
||
setSubmitting(false)
|
||
}
|
||
}
|
||
|
||
async function submitReconcile(values: ReconcileFormValues) {
|
||
setSubmitting(true)
|
||
try {
|
||
await createAdminFundReconciliation({
|
||
accountId: values.accountId,
|
||
periodStart: values.period[0].toISOString(),
|
||
periodEnd: values.period[1].toISOString(),
|
||
actualBalanceFen: toFen(values.actualBalanceYuan),
|
||
reason: values.reason || '',
|
||
evidence: values.evidence || [],
|
||
})
|
||
message.success('对账已发起')
|
||
setReconcileOpen(false)
|
||
refreshAll()
|
||
} catch (error) {
|
||
message.error(error instanceof Error ? error.message : '发起对账失败')
|
||
} finally {
|
||
setSubmitting(false)
|
||
}
|
||
}
|
||
|
||
async function submitConfirmReconcile(values: ConfirmReconcileFormValues) {
|
||
if (!confirmReconciliation) return
|
||
setSubmitting(true)
|
||
try {
|
||
await confirmAdminFundReconciliation(confirmReconciliation.id, {
|
||
reason: values.reason || '',
|
||
evidence: values.evidence || [],
|
||
})
|
||
message.success('对账已确认')
|
||
setConfirmReconcileOpen(false)
|
||
setConfirmReconciliation(null)
|
||
refreshAll()
|
||
} catch (error) {
|
||
message.error(error instanceof Error ? error.message : '确认对账失败')
|
||
} finally {
|
||
setSubmitting(false)
|
||
}
|
||
}
|
||
|
||
async function submitCreateAccount(values: CreateAccountFormValues) {
|
||
setSubmitting(true)
|
||
try {
|
||
await createAdminFundAccount({
|
||
accountType: values.accountType,
|
||
ownerAdminUserId: values.ownerAdminUserId,
|
||
responsibleSupervisorAccountId: values.responsibleSupervisorAccountId,
|
||
openingBalanceFen: toFen(values.openingBalanceYuan || 0),
|
||
})
|
||
message.success('备用金账户已创建')
|
||
setCreateAccountOpen(false)
|
||
refreshAll()
|
||
} catch (error) {
|
||
message.error(error instanceof Error ? error.message : '创建账户失败')
|
||
} finally {
|
||
setSubmitting(false)
|
||
}
|
||
}
|
||
|
||
async function submitBulkAgents(values: BulkAgentsFormValues) {
|
||
setSubmitting(true)
|
||
try {
|
||
const result = await ensureAdminFundAgentAccounts({
|
||
responsibleSupervisorAccountId: values.responsibleSupervisorAccountId,
|
||
openingBalanceFen: toFen(values.openingBalanceYuan || 0),
|
||
})
|
||
message.success(`已创建 ${result.data.createdCount} 个客服账户`)
|
||
setBulkAgentsOpen(false)
|
||
refreshAll()
|
||
} catch (error) {
|
||
message.error(error instanceof Error ? error.message : '批量初始化失败')
|
||
} finally {
|
||
setSubmitting(false)
|
||
}
|
||
}
|
||
|
||
async function toggleAccountStatus(account: AdminFundAccount) {
|
||
setSubmitting(true)
|
||
try {
|
||
await updateAdminFundAccount(account.id, {
|
||
status: account.status === 'active' ? 'frozen' : 'active',
|
||
})
|
||
message.success(account.status === 'active' ? '账户已冻结' : '账户已启用')
|
||
refreshAll()
|
||
} catch (error) {
|
||
message.error(error instanceof Error ? error.message : '更新账户状态失败')
|
||
} finally {
|
||
setSubmitting(false)
|
||
}
|
||
}
|
||
|
||
function buildAccountColumns(type: 'agent' | 'supervisor'): TableColumnsType<AdminFundAccount> {
|
||
return [
|
||
{ title: '账户编号', dataIndex: 'accountNo', width: 150 },
|
||
{ title: '姓名', dataIndex: 'ownerName', width: 120 },
|
||
...(type === 'agent'
|
||
? [
|
||
{
|
||
title: '责任主管',
|
||
dataIndex: 'responsibleSupervisorName',
|
||
width: 120,
|
||
render: (value: string) => value || '-',
|
||
},
|
||
]
|
||
: []),
|
||
{
|
||
title: '当前余额',
|
||
dataIndex: 'balanceFen',
|
||
width: 130,
|
||
render: (value: number) => (
|
||
<Typography.Text strong>{formatFundAmount(value)}</Typography.Text>
|
||
),
|
||
},
|
||
{
|
||
title: '本月流入',
|
||
dataIndex: 'monthInFen',
|
||
width: 120,
|
||
render: (value: number) => formatFundAmount(value),
|
||
},
|
||
{
|
||
title: '本月流出',
|
||
dataIndex: 'monthOutFen',
|
||
width: 120,
|
||
render: (value: number) => formatFundAmount(value),
|
||
},
|
||
{
|
||
title: '最后流水',
|
||
dataIndex: 'lastEntryAt',
|
||
width: 170,
|
||
render: (value: string | null) => (value ? formatAdminDateTime(value) : '-'),
|
||
},
|
||
{
|
||
title: '最后对账',
|
||
dataIndex: 'lastReconciledAt',
|
||
width: 170,
|
||
render: (value: string | null) => (value ? formatAdminDateTime(value) : '-'),
|
||
},
|
||
{
|
||
title: '状态',
|
||
dataIndex: 'status',
|
||
width: 90,
|
||
render: (value: string) => (
|
||
<Tag color={value === 'active' ? 'green' : value === 'frozen' ? 'orange' : 'default'}>
|
||
{FUND_ACCOUNT_STATUS_LABELS[value] || value}
|
||
</Tag>
|
||
),
|
||
},
|
||
{
|
||
title: '操作',
|
||
key: 'actions',
|
||
width: 260,
|
||
fixed: 'right',
|
||
render: (_value, record) => (
|
||
<Space size={4} wrap>
|
||
<Button size="small" onClick={() => setDetailAccount(record)}>
|
||
详情
|
||
</Button>
|
||
{isAdmin && type === 'supervisor' ? (
|
||
<Button size="small" onClick={() => openFunding(record)}>
|
||
拨付
|
||
</Button>
|
||
) : null}
|
||
{canIssue ? (
|
||
<Button size="small" onClick={() => openIssue(record)}>
|
||
发放
|
||
</Button>
|
||
) : null}
|
||
{type === 'agent' && canIssue ? (
|
||
<Button size="small" onClick={() => openReturn(record)}>
|
||
缴回
|
||
</Button>
|
||
) : null}
|
||
{type === 'agent' && canReconcile ? (
|
||
<Button size="small" onClick={() => openReconcile(record)}>
|
||
对账
|
||
</Button>
|
||
) : null}
|
||
{isAdmin ? (
|
||
<Button
|
||
size="small"
|
||
danger={record.status === 'active'}
|
||
onClick={() => toggleAccountStatus(record)}
|
||
>
|
||
{record.status === 'active' ? '冻结' : '启用'}
|
||
</Button>
|
||
) : null}
|
||
</Space>
|
||
),
|
||
},
|
||
]
|
||
}
|
||
|
||
const expenseColumns: TableColumnsType<AdminFundExpense> = [
|
||
{
|
||
title: '付款时间',
|
||
dataIndex: 'paidAt',
|
||
width: 170,
|
||
render: (value: string) => formatAdminDateTime(value),
|
||
},
|
||
{ title: '支出单号', dataIndex: 'expenseNo', width: 150 },
|
||
{ title: '客服', dataIndex: 'agentName', width: 110 },
|
||
{
|
||
title: '分类',
|
||
dataIndex: 'category',
|
||
width: 110,
|
||
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: 100,
|
||
render: (value: number | null) => (value ? `#${value}` : '-'),
|
||
},
|
||
{
|
||
title: '金额',
|
||
dataIndex: 'amountFen',
|
||
width: 120,
|
||
render: (value: number) => (
|
||
<Typography.Text type="danger">{formatFundAmount(value)}</Typography.Text>
|
||
),
|
||
},
|
||
{
|
||
title: '凭证',
|
||
dataIndex: 'evidence',
|
||
width: 100,
|
||
render: (value: UploadedFile[]) => (
|
||
<ImagePreviewList files={value} size={36} maxVisible={2} />
|
||
),
|
||
},
|
||
{ title: '说明', dataIndex: 'note', render: (value: string) => value || '-' },
|
||
]
|
||
|
||
const reconciliationColumns: TableColumnsType<AdminFundReconciliation> = [
|
||
{
|
||
title: '对账区间',
|
||
dataIndex: 'periodStart',
|
||
width: 230,
|
||
render: (_value: string, row) =>
|
||
`${formatAdminDateTime(row.periodStart)} ~ ${formatAdminDateTime(row.periodEnd)}`,
|
||
},
|
||
{ title: '对账单号', dataIndex: 'reconciliationNo', width: 150 },
|
||
{ title: '客服', dataIndex: 'agentName', width: 110 },
|
||
{
|
||
title: '系统余额',
|
||
dataIndex: 'systemBalanceFen',
|
||
width: 120,
|
||
render: (value: number) => formatFundAmount(value),
|
||
},
|
||
{
|
||
title: '实际余额',
|
||
dataIndex: 'actualBalanceFen',
|
||
width: 120,
|
||
render: (value: number) => formatFundAmount(value),
|
||
},
|
||
{
|
||
title: '差异',
|
||
dataIndex: 'differenceFen',
|
||
width: 120,
|
||
render: (value: number) => (
|
||
<Typography.Text type={value === 0 ? 'success' : 'danger'}>
|
||
{formatFundAmount(value, true)}
|
||
</Typography.Text>
|
||
),
|
||
},
|
||
{
|
||
title: '状态',
|
||
dataIndex: 'status',
|
||
width: 100,
|
||
render: (value: AdminFundReconciliation['status']) => (
|
||
<Tag color={FUND_RECONCILIATION_STATUS_COLORS[value]}>
|
||
{FUND_RECONCILIATION_STATUS_LABELS[value]}
|
||
</Tag>
|
||
),
|
||
},
|
||
{
|
||
title: '原因',
|
||
dataIndex: 'reason',
|
||
render: (value: string) => value || '-',
|
||
},
|
||
{
|
||
title: '确认人',
|
||
dataIndex: 'confirmedByUsername',
|
||
width: 110,
|
||
render: (value: string, row) =>
|
||
value
|
||
? `${value}${row.confirmedAt ? ` · ${formatAdminDateTime(row.confirmedAt)}` : ''}`
|
||
: '-',
|
||
},
|
||
{
|
||
title: '操作',
|
||
key: 'actions',
|
||
width: 100,
|
||
fixed: 'right',
|
||
render: (_value, row) =>
|
||
row.status === 'confirmed' ? (
|
||
<Tag color="green">已确认</Tag>
|
||
) : (
|
||
<Button size="small" type="primary" onClick={() => openConfirmReconcile(row)}>
|
||
确认
|
||
</Button>
|
||
),
|
||
},
|
||
]
|
||
|
||
const detailEntries = detailQuery.data?.data.items || []
|
||
|
||
const detailEntryColumns: 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: 120,
|
||
render: (value: number) => (
|
||
<Typography.Text type={value >= 0 ? 'success' : 'danger'}>
|
||
{formatFundAmount(value, true)}
|
||
</Typography.Text>
|
||
),
|
||
},
|
||
{
|
||
title: '余额',
|
||
dataIndex: 'balanceAfterFen',
|
||
width: 120,
|
||
render: (value: number) => formatFundAmount(value),
|
||
},
|
||
{
|
||
title: '对方账户',
|
||
dataIndex: 'counterpartyName',
|
||
width: 130,
|
||
render: (value: string) => value || '-',
|
||
},
|
||
{
|
||
title: '凭证',
|
||
dataIndex: 'evidence',
|
||
width: 100,
|
||
render: (value: UploadedFile[]) => (
|
||
<ImagePreviewList files={value} size={36} maxVisible={2} />
|
||
),
|
||
},
|
||
{ title: '说明', dataIndex: 'note', render: (value: string) => value || '-' },
|
||
]
|
||
|
||
const setupSupportUsersWithoutAccount =
|
||
setup?.users.filter(
|
||
(user) =>
|
||
user.role === 'support' &&
|
||
!setup.agentAccounts.some((account) => account.ownerAdminUserId === user.id),
|
||
) || []
|
||
const setupSupervisorUsersWithoutAccount =
|
||
setup?.users.filter(
|
||
(user) =>
|
||
(user.role === 'operator' || user.role === 'admin') &&
|
||
!setup.supervisorAccounts.some((account) => account.ownerAdminUserId === user.id),
|
||
) || []
|
||
|
||
function openCreateAccount(prefill?: Partial<CreateAccountFormValues>) {
|
||
createAccountForm.resetFields()
|
||
createAccountForm.setFieldsValue({
|
||
accountType: 'agent',
|
||
openingBalanceYuan: 0,
|
||
...prefill,
|
||
})
|
||
setCreateAccountOpen(true)
|
||
}
|
||
|
||
function openBulkAgents() {
|
||
bulkAgentsForm.resetFields()
|
||
bulkAgentsForm.setFieldsValue({
|
||
responsibleSupervisorAccountId: supervisorAccounts[0]?.id,
|
||
openingBalanceYuan: 0,
|
||
})
|
||
setBulkAgentsOpen(true)
|
||
}
|
||
|
||
const createAccountUserOptions =
|
||
createAccountType === 'supervisor'
|
||
? (setup?.users || []).filter(
|
||
(user) =>
|
||
(user.role === 'operator' || user.role === 'admin') &&
|
||
!setup?.supervisorAccounts.some((account) => account.ownerAdminUserId === user.id),
|
||
)
|
||
: (setup?.users || []).filter(
|
||
(user) =>
|
||
user.role === 'support' &&
|
||
!setup?.agentAccounts.some((account) => account.ownerAdminUserId === user.id),
|
||
)
|
||
|
||
return (
|
||
<section className="page-stack">
|
||
<PageHeader
|
||
title="钱包管理"
|
||
description="统管客服的南航 / 乐玩 / ROCK 积分钱包与备用金现金；可分配积分、发放现金、查看流水与对账。"
|
||
extra={
|
||
<Button icon={<ReloadOutlined />} loading={overviewQuery.isFetching} onClick={refreshAll}>
|
||
刷新
|
||
</Button>
|
||
}
|
||
/>
|
||
|
||
{overviewQuery.error ? (
|
||
<Alert
|
||
type="error"
|
||
showIcon
|
||
message={
|
||
overviewQuery.error instanceof Error
|
||
? overviewQuery.error.message
|
||
: '读取备用金总览失败'
|
||
}
|
||
/>
|
||
) : null}
|
||
|
||
<Tabs
|
||
activeKey={activeTab}
|
||
onChange={setActiveTab}
|
||
items={[
|
||
{
|
||
key: 'overview',
|
||
label: '钱包总览',
|
||
children: (
|
||
<Space direction="vertical" size={16} style={{ width: '100%' }}>
|
||
<Row gutter={[16, 16]}>
|
||
<Col xs={24} sm={12} lg={6}>
|
||
<Card>
|
||
<Statistic
|
||
title="备用金总额"
|
||
value={(overview?.totalBalanceFen || 0) / 100}
|
||
precision={2}
|
||
prefix="￥"
|
||
suffix={<WalletOutlined />}
|
||
/>
|
||
</Card>
|
||
</Col>
|
||
<Col xs={24} sm={12} lg={6}>
|
||
<Card>
|
||
<Statistic
|
||
title="主管池余额"
|
||
value={(overview?.supervisorBalanceFen || 0) / 100}
|
||
precision={2}
|
||
prefix="￥"
|
||
/>
|
||
</Card>
|
||
</Col>
|
||
<Col xs={24} sm={12} lg={6}>
|
||
<Card>
|
||
<Statistic
|
||
title="客服余额"
|
||
value={(overview?.agentBalanceFen || 0) / 100}
|
||
precision={2}
|
||
prefix="￥"
|
||
/>
|
||
</Card>
|
||
</Col>
|
||
<Col xs={24} sm={12} lg={6}>
|
||
<Card>
|
||
<Statistic
|
||
title="本月支出"
|
||
value={(overview?.monthExpenseFen || 0) / 100}
|
||
precision={2}
|
||
prefix="￥"
|
||
/>
|
||
</Card>
|
||
</Col>
|
||
<Col xs={24} sm={12} lg={6}>
|
||
<Card>
|
||
<Statistic
|
||
title="本月发放"
|
||
value={(overview?.monthIssuedFen || 0) / 100}
|
||
precision={2}
|
||
prefix="￥"
|
||
/>
|
||
</Card>
|
||
</Col>
|
||
<Col xs={24} sm={12} lg={6}>
|
||
<Card>
|
||
<Statistic
|
||
title="本月缴回"
|
||
value={(overview?.monthReturnedFen || 0) / 100}
|
||
precision={2}
|
||
prefix="￥"
|
||
/>
|
||
</Card>
|
||
</Col>
|
||
<Col xs={24} sm={12} lg={6}>
|
||
<Card>
|
||
<Statistic
|
||
title="待对账"
|
||
value={overview?.pendingReconciliationCount || 0}
|
||
suffix="笔"
|
||
/>
|
||
</Card>
|
||
</Col>
|
||
<Col xs={24} sm={12} lg={6}>
|
||
<Card>
|
||
<Statistic
|
||
title="对账差异"
|
||
value={overview?.discrepancyCount || 0}
|
||
suffix="笔"
|
||
valueStyle={{
|
||
color: (overview?.discrepancyCount || 0) > 0 ? '#cf1322' : undefined,
|
||
}}
|
||
/>
|
||
</Card>
|
||
</Col>
|
||
</Row>
|
||
|
||
<Card title="快捷操作">
|
||
<Space wrap>
|
||
{canIssue ? (
|
||
<Button type="primary" icon={<SwapOutlined />} onClick={() => openIssue()}>
|
||
发放备用金
|
||
</Button>
|
||
) : null}
|
||
{canManageCredits ? (
|
||
<Button
|
||
icon={<WalletOutlined />}
|
||
onClick={() => setActiveTab('platform-credits')}
|
||
>
|
||
分配客服积分
|
||
</Button>
|
||
) : null}
|
||
{canExpense ? (
|
||
<Button icon={<PlusOutlined />} onClick={() => openExpense()}>
|
||
登记支出
|
||
</Button>
|
||
) : null}
|
||
{canReconcile ? (
|
||
<Button
|
||
icon={<CheckCircleOutlined />}
|
||
onClick={() => setActiveTab('reconciliations')}
|
||
>
|
||
对账中心
|
||
</Button>
|
||
) : null}
|
||
{isAdmin ? <Button onClick={() => openFunding()}>公司拨付</Button> : null}
|
||
</Space>
|
||
</Card>
|
||
|
||
{(overview?.unreconciledAgentCount || 0) > 0 ? (
|
||
<Alert
|
||
type="warning"
|
||
showIcon
|
||
message={`有 ${overview?.unreconciledAgentCount} 个客服超过 7 天未对账`}
|
||
description="请在“对账”页签发起对账，确认系统余额与实际余额是否一致。"
|
||
/>
|
||
) : null}
|
||
</Space>
|
||
),
|
||
},
|
||
{
|
||
key: 'agents',
|
||
label: '客服现金钱包',
|
||
children: (
|
||
<Card
|
||
title="客服备用金账户"
|
||
extra={
|
||
canIssue ? (
|
||
<Button type="primary" onClick={() => openIssue()}>
|
||
发放备用金
|
||
</Button>
|
||
) : null
|
||
}
|
||
>
|
||
<PercentTable<AdminFundAccount>
|
||
rowKey="id"
|
||
size="small"
|
||
columns={buildAccountColumns('agent')}
|
||
dataSource={agentAccounts}
|
||
loading={agentsQuery.isLoading}
|
||
pagination={false}
|
||
scroll={{ x: 1250 }}
|
||
/>
|
||
</Card>
|
||
),
|
||
},
|
||
{
|
||
key: 'supervisors',
|
||
label: '现金资金池',
|
||
children: (
|
||
<Card
|
||
title="主管资金池"
|
||
extra={
|
||
isAdmin ? (
|
||
<Button type="primary" onClick={() => openFunding()}>
|
||
公司拨付
|
||
</Button>
|
||
) : null
|
||
}
|
||
>
|
||
<PercentTable<AdminFundAccount>
|
||
rowKey="id"
|
||
size="small"
|
||
columns={buildAccountColumns('supervisor')}
|
||
dataSource={supervisorAccounts}
|
||
loading={supervisorsQuery.isLoading}
|
||
pagination={false}
|
||
scroll={{ x: 1150 }}
|
||
/>
|
||
</Card>
|
||
),
|
||
},
|
||
{
|
||
key: 'platform-credits',
|
||
label: '客服积分钱包',
|
||
children: <PlatformCreditPanel />,
|
||
},
|
||
{
|
||
key: 'expenses',
|
||
label: '现金支出',
|
||
children: (
|
||
<Card
|
||
title="备用金支出"
|
||
extra={
|
||
canExpense ? (
|
||
<Button type="primary" onClick={() => openExpense()}>
|
||
登记支出
|
||
</Button>
|
||
) : null
|
||
}
|
||
>
|
||
<Space wrap style={{ marginBottom: 16 }}>
|
||
<Input
|
||
allowClear
|
||
placeholder="支出单号/收款方/平台/客服/订单"
|
||
value={expenseKeyword}
|
||
onChange={(event) => {
|
||
setExpensePage(1)
|
||
setExpenseKeyword(event.target.value)
|
||
}}
|
||
style={{ width: 260 }}
|
||
/>
|
||
<Select
|
||
allowClear
|
||
placeholder="支出分类"
|
||
value={expenseCategory || undefined}
|
||
onChange={(value) => {
|
||
setExpensePage(1)
|
||
setExpenseCategory(value || '')
|
||
}}
|
||
style={{ width: 140 }}
|
||
options={Object.entries(FUND_CATEGORY_LABELS).map(([value, label]) => ({
|
||
value,
|
||
label,
|
||
}))}
|
||
/>
|
||
<DatePicker.RangePicker
|
||
showTime
|
||
value={expenseRange}
|
||
onChange={(value) => {
|
||
setExpensePage(1)
|
||
setExpenseRange(value as [Dayjs, Dayjs] | null)
|
||
}}
|
||
/>
|
||
</Space>
|
||
<PercentTable<AdminFundExpense>
|
||
rowKey="id"
|
||
size="small"
|
||
columns={expenseColumns}
|
||
dataSource={expenses}
|
||
loading={expensesQuery.isLoading}
|
||
pagination={buildAdminTablePagination({
|
||
current: expensePage,
|
||
pageSize: expensePageSize,
|
||
total: expensePagination?.total || 0,
|
||
onChange: (page, pageSize) => {
|
||
setExpensePage(page || 1)
|
||
setExpensePageSize(pageSize || 20)
|
||
},
|
||
})}
|
||
scroll={{ x: 1250 }}
|
||
/>
|
||
</Card>
|
||
),
|
||
},
|
||
{
|
||
key: 'reconciliations',
|
||
label: '对账中心',
|
||
children: (
|
||
<Card
|
||
title="现金对账"
|
||
extra={
|
||
canReconcile ? (
|
||
<Button type="primary" onClick={() => openReconcile()}>
|
||
发起对账
|
||
</Button>
|
||
) : null
|
||
}
|
||
>
|
||
<Space wrap style={{ marginBottom: 16 }}>
|
||
<Select
|
||
allowClear
|
||
placeholder="对账状态"
|
||
value={reconciliationStatus || undefined}
|
||
onChange={(value) => {
|
||
setReconciliationPage(1)
|
||
setReconciliationStatus(value || '')
|
||
}}
|
||
style={{ width: 140 }}
|
||
options={Object.entries(FUND_RECONCILIATION_STATUS_LABELS).map(
|
||
([value, label]) => ({ value, label }),
|
||
)}
|
||
/>
|
||
</Space>
|
||
<PercentTable<AdminFundReconciliation>
|
||
rowKey="id"
|
||
size="small"
|
||
columns={reconciliationColumns}
|
||
dataSource={reconciliations}
|
||
loading={reconciliationsQuery.isLoading}
|
||
pagination={buildAdminTablePagination({
|
||
current: reconciliationPage,
|
||
pageSize: reconciliationPageSize,
|
||
total: reconciliationPagination?.total || 0,
|
||
onChange: (page, pageSize) => {
|
||
setReconciliationPage(page || 1)
|
||
setReconciliationPageSize(pageSize || 20)
|
||
},
|
||
})}
|
||
scroll={{ x: 1250 }}
|
||
/>
|
||
</Card>
|
||
),
|
||
},
|
||
...(isAdmin
|
||
? [
|
||
{
|
||
key: 'setup',
|
||
label: '账户初始化',
|
||
children: (
|
||
<Space direction="vertical" size={16} style={{ width: '100%' }}>
|
||
<Card
|
||
title="主管资金池"
|
||
extra={
|
||
<Space>
|
||
<Button
|
||
onClick={() => openCreateAccount({ accountType: 'supervisor' })}
|
||
>
|
||
新增主管账户
|
||
</Button>
|
||
</Space>
|
||
}
|
||
>
|
||
<PercentTable<AdminFundAccount>
|
||
rowKey="id"
|
||
size="small"
|
||
columns={buildAccountColumns('supervisor')}
|
||
dataSource={setup?.supervisorAccounts || []}
|
||
loading={setupQuery.isLoading}
|
||
pagination={false}
|
||
scroll={{ x: 1150 }}
|
||
/>
|
||
{setupSupervisorUsersWithoutAccount.length > 0 ? (
|
||
<Alert
|
||
style={{ marginTop: 12 }}
|
||
type="info"
|
||
showIcon
|
||
message={`还有 ${setupSupervisorUsersWithoutAccount.length} 个运营/管理员未开通主管资金池`}
|
||
description={setupSupervisorUsersWithoutAccount
|
||
.map((user) => user.displayName || user.username)
|
||
.join('、')}
|
||
/>
|
||
) : null}
|
||
</Card>
|
||
|
||
<Card
|
||
title="客服备用金账户"
|
||
extra={
|
||
<Space>
|
||
<Button onClick={() => openCreateAccount({ accountType: 'agent' })}>
|
||
新增客服账户
|
||
</Button>
|
||
<Button type="primary" onClick={openBulkAgents}>
|
||
批量初始化客服
|
||
</Button>
|
||
</Space>
|
||
}
|
||
>
|
||
<PercentTable<AdminFundAccount>
|
||
rowKey="id"
|
||
size="small"
|
||
columns={buildAccountColumns('agent')}
|
||
dataSource={setup?.agentAccounts || []}
|
||
loading={setupQuery.isLoading}
|
||
pagination={false}
|
||
scroll={{ x: 1250 }}
|
||
/>
|
||
{setupSupportUsersWithoutAccount.length > 0 ? (
|
||
<Alert
|
||
style={{ marginTop: 12 }}
|
||
type="warning"
|
||
showIcon
|
||
message={`还有 ${setupSupportUsersWithoutAccount.length} 个客服未开通备用金账户`}
|
||
description={setupSupportUsersWithoutAccount
|
||
.map((user) => user.displayName || user.username)
|
||
.join('、')}
|
||
/>
|
||
) : null}
|
||
</Card>
|
||
</Space>
|
||
),
|
||
},
|
||
]
|
||
: []),
|
||
]}
|
||
/>
|
||
|
||
<Modal
|
||
title="发放备用金"
|
||
open={issueOpen}
|
||
onCancel={() => setIssueOpen(false)}
|
||
onOk={() => issueForm.submit()}
|
||
confirmLoading={submitting}
|
||
destroyOnHidden
|
||
width={720}
|
||
>
|
||
<Form<IssueFormValues> form={issueForm} layout="vertical" onFinish={submitIssue}>
|
||
<Row gutter={16}>
|
||
<Col span={12}>
|
||
<Form.Item
|
||
name="agentAccountId"
|
||
label="客服备用金账户"
|
||
rules={[{ required: true, message: '请选择客服账户' }]}
|
||
>
|
||
<Select options={agentOptions} showSearch optionFilterProp="label" />
|
||
</Form.Item>
|
||
</Col>
|
||
{isAdmin ? (
|
||
<Col span={12}>
|
||
<Form.Item
|
||
name="supervisorAccountId"
|
||
label="发放主管"
|
||
rules={[{ required: true, message: '请选择主管资金池' }]}
|
||
>
|
||
<Select options={supervisorOptions} showSearch optionFilterProp="label" />
|
||
</Form.Item>
|
||
</Col>
|
||
) : null}
|
||
<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="occurredAt"
|
||
label="发放时间"
|
||
rules={[{ required: true, message: '请选择时间' }]}
|
||
>
|
||
<DatePicker showTime style={{ width: '100%' }} />
|
||
</Form.Item>
|
||
</Col>
|
||
<Col span={24}>
|
||
<Form.Item name="evidence" label="转账/交接凭证">
|
||
<ImageUpload scene="admin_fund_issue" scope="admin" maxCount={4} />
|
||
</Form.Item>
|
||
</Col>
|
||
<Col span={24}>
|
||
<Form.Item name="note" label="备注">
|
||
<Input.TextArea rows={2} placeholder="发放说明；无凭证时请填写交接说明" />
|
||
</Form.Item>
|
||
</Col>
|
||
</Row>
|
||
</Form>
|
||
</Modal>
|
||
|
||
<Modal
|
||
title="公司拨付主管资金池"
|
||
open={fundingOpen}
|
||
onCancel={() => setFundingOpen(false)}
|
||
onOk={() => fundingForm.submit()}
|
||
confirmLoading={submitting}
|
||
destroyOnHidden
|
||
>
|
||
<Form<FundingFormValues> form={fundingForm} layout="vertical" onFinish={submitFunding}>
|
||
<Form.Item
|
||
name="supervisorAccountId"
|
||
label="主管资金池"
|
||
rules={[{ required: true, message: '请选择主管资金池' }]}
|
||
>
|
||
<Select options={supervisorOptions} showSearch optionFilterProp="label" />
|
||
</Form.Item>
|
||
<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="转账/交接凭证">
|
||
<ImageUpload scene="admin_fund_funding" scope="admin" maxCount={4} />
|
||
</Form.Item>
|
||
<Form.Item name="note" label="备注">
|
||
<Input.TextArea rows={2} placeholder="公司拨付说明" />
|
||
</Form.Item>
|
||
</Form>
|
||
</Modal>
|
||
|
||
<Modal
|
||
title="登记备用金支出"
|
||
open={expenseOpen}
|
||
onCancel={() => setExpenseOpen(false)}
|
||
onOk={() => expenseForm.submit()}
|
||
confirmLoading={submitting}
|
||
destroyOnHidden
|
||
width={760}
|
||
>
|
||
<Form<ExpenseFormValues> form={expenseForm} layout="vertical" onFinish={submitExpense}>
|
||
<Row gutter={16}>
|
||
<Col span={12}>
|
||
<Form.Item
|
||
name="agentAccountId"
|
||
label="客服备用金账户"
|
||
rules={[{ required: true, message: '请选择客服账户' }]}
|
||
>
|
||
<Select options={agentOptions} showSearch optionFilterProp="label" />
|
||
</Form.Item>
|
||
</Col>
|
||
<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="例如：给订单充值、赔偿客户、补差价" />
|
||
</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
|
||
width={680}
|
||
>
|
||
<Form<ReturnFormValues> form={returnForm} layout="vertical" onFinish={submitReturn}>
|
||
<Row gutter={16}>
|
||
<Col span={12}>
|
||
<Form.Item
|
||
name="agentAccountId"
|
||
label="客服备用金账户"
|
||
rules={[{ required: true, message: '请选择客服账户' }]}
|
||
>
|
||
<Select options={agentOptions} showSearch optionFilterProp="label" />
|
||
</Form.Item>
|
||
</Col>
|
||
{isAdmin ? (
|
||
<Col span={12}>
|
||
<Form.Item name="supervisorAccountId" label="收回主管">
|
||
<Select
|
||
allowClear
|
||
options={supervisorOptions}
|
||
showSearch
|
||
optionFilterProp="label"
|
||
placeholder="默认该客服责任主管"
|
||
/>
|
||
</Form.Item>
|
||
</Col>
|
||
) : null}
|
||
<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="occurredAt"
|
||
label="缴回时间"
|
||
rules={[{ required: true, message: '请选择时间' }]}
|
||
>
|
||
<DatePicker showTime style={{ width: '100%' }} />
|
||
</Form.Item>
|
||
</Col>
|
||
<Col span={24}>
|
||
<Form.Item name="evidence" label="转账/交接凭证">
|
||
<ImageUpload scene="admin_fund_return" scope="admin" maxCount={4} />
|
||
</Form.Item>
|
||
</Col>
|
||
<Col span={24}>
|
||
<Form.Item name="note" label="备注">
|
||
<Input.TextArea rows={2} placeholder="缴回原因或交接说明" />
|
||
</Form.Item>
|
||
</Col>
|
||
</Row>
|
||
</Form>
|
||
</Modal>
|
||
|
||
<Modal
|
||
title="发起备用金对账"
|
||
open={reconcileOpen}
|
||
onCancel={() => setReconcileOpen(false)}
|
||
onOk={() => reconcileForm.submit()}
|
||
confirmLoading={submitting}
|
||
destroyOnHidden
|
||
width={680}
|
||
>
|
||
<Form<ReconcileFormValues>
|
||
form={reconcileForm}
|
||
layout="vertical"
|
||
onFinish={submitReconcile}
|
||
>
|
||
<Form.Item
|
||
name="accountId"
|
||
label="客服备用金账户"
|
||
rules={[{ required: true, message: '请选择账户' }]}
|
||
>
|
||
<Select options={agentOptions} showSearch optionFilterProp="label" />
|
||
</Form.Item>
|
||
<Form.Item
|
||
name="period"
|
||
label="对账区间"
|
||
rules={[{ required: true, message: '请选择对账区间' }]}
|
||
>
|
||
<DatePicker.RangePicker showTime style={{ width: '100%' }} />
|
||
</Form.Item>
|
||
<Form.Item
|
||
name="actualBalanceYuan"
|
||
label="实际余额（元）"
|
||
rules={[{ required: true, message: '请输入实际余额' }]}
|
||
>
|
||
<InputNumber min={0} precision={2} style={{ width: '100%' }} />
|
||
</Form.Item>
|
||
<Form.Item name="reason" label="差异原因">
|
||
<Input.TextArea rows={2} placeholder="有差异时必填；无差异可留空" />
|
||
</Form.Item>
|
||
<Form.Item name="evidence" label="盘点/差异凭证">
|
||
<ImageUpload scene="admin_fund_reconcile" scope="admin" maxCount={4} />
|
||
</Form.Item>
|
||
</Form>
|
||
</Modal>
|
||
|
||
<Modal
|
||
title="确认对账"
|
||
open={confirmReconcileOpen}
|
||
onCancel={() => {
|
||
setConfirmReconcileOpen(false)
|
||
setConfirmReconciliation(null)
|
||
}}
|
||
onOk={() => confirmReconcileForm.submit()}
|
||
confirmLoading={submitting}
|
||
destroyOnHidden
|
||
>
|
||
{confirmReconciliation ? (
|
||
<Descriptions column={1} size="small" style={{ marginBottom: 16 }}>
|
||
<Descriptions.Item label="客服">{confirmReconciliation.agentName}</Descriptions.Item>
|
||
<Descriptions.Item label="系统余额">
|
||
{formatFundAmount(confirmReconciliation.systemBalanceFen)}
|
||
</Descriptions.Item>
|
||
<Descriptions.Item label="实际余额">
|
||
{formatFundAmount(confirmReconciliation.actualBalanceFen)}
|
||
</Descriptions.Item>
|
||
<Descriptions.Item label="差异">
|
||
<Typography.Text
|
||
type={confirmReconciliation.differenceFen === 0 ? 'success' : 'danger'}
|
||
>
|
||
{formatFundAmount(confirmReconciliation.differenceFen, true)}
|
||
</Typography.Text>
|
||
</Descriptions.Item>
|
||
</Descriptions>
|
||
) : null}
|
||
<Form<ConfirmReconcileFormValues>
|
||
form={confirmReconcileForm}
|
||
layout="vertical"
|
||
onFinish={submitConfirmReconcile}
|
||
>
|
||
<Form.Item name="reason" label="差异原因/确认说明">
|
||
<Input.TextArea rows={2} placeholder="有差异时必填，确认后生成调整流水" />
|
||
</Form.Item>
|
||
<Form.Item name="evidence" label="差异凭证">
|
||
<ImageUpload scene="admin_fund_reconcile_confirm" scope="admin" maxCount={4} />
|
||
</Form.Item>
|
||
</Form>
|
||
</Modal>
|
||
|
||
<Modal
|
||
title="新增备用金账户"
|
||
open={createAccountOpen}
|
||
onCancel={() => setCreateAccountOpen(false)}
|
||
onOk={() => createAccountForm.submit()}
|
||
confirmLoading={submitting}
|
||
destroyOnHidden
|
||
>
|
||
<Form<CreateAccountFormValues>
|
||
form={createAccountForm}
|
||
layout="vertical"
|
||
onFinish={submitCreateAccount}
|
||
>
|
||
<Form.Item
|
||
name="accountType"
|
||
label="账户类型"
|
||
rules={[{ required: true, message: '请选择账户类型' }]}
|
||
>
|
||
<Select
|
||
options={[
|
||
{ value: 'supervisor', label: '主管资金池' },
|
||
{ value: 'agent', label: '客服备用金账户' },
|
||
]}
|
||
onChange={() => createAccountForm.setFieldsValue({ ownerAdminUserId: undefined })}
|
||
/>
|
||
</Form.Item>
|
||
<Form.Item
|
||
name="ownerAdminUserId"
|
||
label={createAccountType === 'supervisor' ? '主管账号' : '客服账号'}
|
||
rules={[{ required: true, message: '请选择账号' }]}
|
||
>
|
||
<Select
|
||
showSearch
|
||
optionFilterProp="label"
|
||
options={createAccountUserOptions.map((user: AdminFundSetupUser) => ({
|
||
value: user.id,
|
||
label: `${user.displayName || user.username}（${user.username} · ${user.role}）`,
|
||
}))}
|
||
/>
|
||
</Form.Item>
|
||
{createAccountType === 'agent' ? (
|
||
<Form.Item
|
||
name="responsibleSupervisorAccountId"
|
||
label="责任主管"
|
||
rules={[{ required: true, message: '请选择责任主管' }]}
|
||
>
|
||
<Select options={supervisorOptions} showSearch optionFilterProp="label" />
|
||
</Form.Item>
|
||
) : null}
|
||
<Form.Item name="openingBalanceYuan" label="期初余额（元）">
|
||
<InputNumber min={0} precision={2} style={{ width: '100%' }} />
|
||
</Form.Item>
|
||
</Form>
|
||
</Modal>
|
||
|
||
<Modal
|
||
title="批量初始化客服备用金账户"
|
||
open={bulkAgentsOpen}
|
||
onCancel={() => setBulkAgentsOpen(false)}
|
||
onOk={() => bulkAgentsForm.submit()}
|
||
confirmLoading={submitting}
|
||
destroyOnHidden
|
||
>
|
||
<Alert
|
||
type="info"
|
||
showIcon
|
||
style={{ marginBottom: 16 }}
|
||
message="会给所有未开户的 support 角色客服创建账户"
|
||
description="已开户的客服不会被覆盖；期初余额由主管确认后填写。"
|
||
/>
|
||
<Form<BulkAgentsFormValues>
|
||
form={bulkAgentsForm}
|
||
layout="vertical"
|
||
onFinish={submitBulkAgents}
|
||
>
|
||
<Form.Item
|
||
name="responsibleSupervisorAccountId"
|
||
label="责任主管"
|
||
rules={[{ required: true, message: '请选择责任主管' }]}
|
||
>
|
||
<Select options={supervisorOptions} showSearch optionFilterProp="label" />
|
||
</Form.Item>
|
||
<Form.Item name="openingBalanceYuan" label="统一期初余额（元）">
|
||
<InputNumber min={0} precision={2} style={{ width: '100%' }} />
|
||
</Form.Item>
|
||
</Form>
|
||
</Modal>
|
||
|
||
<Drawer
|
||
title={detailAccount ? `备用金账户 · ${detailAccount.ownerName}` : '备用金账户'}
|
||
open={Boolean(detailAccount)}
|
||
onClose={() => setDetailAccount(null)}
|
||
width={1000}
|
||
destroyOnHidden
|
||
>
|
||
{detailQuery.data?.data.account ? (
|
||
<>
|
||
<Descriptions column={2} size="small" bordered>
|
||
<Descriptions.Item label="账户编号">
|
||
{detailQuery.data.data.account.accountNo}
|
||
</Descriptions.Item>
|
||
<Descriptions.Item label="类型">
|
||
{detailQuery.data.data.account.accountType === 'supervisor'
|
||
? '主管资金池'
|
||
: '客服备用金'}
|
||
</Descriptions.Item>
|
||
<Descriptions.Item label="当前余额">
|
||
{formatFundAmount(detailQuery.data.data.account.balanceFen)}
|
||
</Descriptions.Item>
|
||
<Descriptions.Item label="责任主管">
|
||
{detailQuery.data.data.account.responsibleSupervisorName || '-'}
|
||
</Descriptions.Item>
|
||
<Descriptions.Item label="本月流入">
|
||
{formatFundAmount(detailQuery.data.data.account.monthInFen)}
|
||
</Descriptions.Item>
|
||
<Descriptions.Item label="本月流出">
|
||
{formatFundAmount(detailQuery.data.data.account.monthOutFen)}
|
||
</Descriptions.Item>
|
||
<Descriptions.Item label="最后流水">
|
||
{detailQuery.data.data.account.lastEntryAt
|
||
? formatAdminDateTime(detailQuery.data.data.account.lastEntryAt)
|
||
: '-'}
|
||
</Descriptions.Item>
|
||
<Descriptions.Item label="最后对账">
|
||
{detailQuery.data.data.account.lastReconciledAt
|
||
? formatAdminDateTime(detailQuery.data.data.account.lastReconciledAt)
|
||
: '-'}
|
||
</Descriptions.Item>
|
||
</Descriptions>
|
||
<Card title="资金流水" style={{ marginTop: 16 }}>
|
||
<PercentTable<AdminFundEntry>
|
||
rowKey="id"
|
||
size="small"
|
||
columns={detailEntryColumns}
|
||
dataSource={detailEntries}
|
||
loading={detailQuery.isLoading}
|
||
pagination={false}
|
||
scroll={{ x: 1000 }}
|
||
/>
|
||
</Card>
|
||
</>
|
||
) : null}
|
||
</Drawer>
|
||
</section>
|
||
)
|
||
}
|