1006 lines
41 KiB
JavaScript
1006 lines
41 KiB
JavaScript
import { useCallback, useEffect, useMemo, useState } from "react";
|
||
import Dialog from "@mui/material/Dialog";
|
||
import DialogContent from "@mui/material/DialogContent";
|
||
import DialogTitle from "@mui/material/DialogTitle";
|
||
import {
|
||
approveFinanceApplication,
|
||
approveFinanceWithdrawalApplication,
|
||
createFinanceApplication,
|
||
createFinanceCoinSellerRechargeOrder,
|
||
exportFinanceRechargeBills,
|
||
fetchFinanceApplicationOptions,
|
||
fetchFinanceRechargeApps,
|
||
fetchFinanceRechargeOverview,
|
||
fetchFinanceRechargeSummaries,
|
||
fetchFinanceSession,
|
||
filterOperationsByPermissions,
|
||
grantFinanceCoinSellerRechargeOrder,
|
||
listFinanceApplications,
|
||
listFinanceCoinSellerRechargeOrders,
|
||
listFinanceRechargeDetails,
|
||
listFinanceRechargeRegions,
|
||
listMyFinanceApplications,
|
||
listFinanceWithdrawalApplications,
|
||
refreshFinanceGoogleRechargePaid,
|
||
rejectFinanceApplication,
|
||
rejectFinanceWithdrawalApplication,
|
||
verifyFinanceCoinSellerRechargeReceipt,
|
||
verifyFinanceCoinSellerRechargeOrder,
|
||
} from "./api.js";
|
||
import { FinanceApplicationForm } from "./components/FinanceApplicationForm.jsx";
|
||
import { FinanceApplicationList } from "./components/FinanceApplicationList.jsx";
|
||
import { FinanceAuditDialog } from "./components/FinanceAuditDialog.jsx";
|
||
import { FinanceCoinSellerRechargeOrderList } from "./components/FinanceCoinSellerRechargeOrderList.jsx";
|
||
import { FinanceMyApplicationList } from "./components/FinanceMyApplicationList.jsx";
|
||
import { FinanceOverview } from "./components/FinanceOverview.jsx";
|
||
import { FinanceReconciliation } from "./components/FinanceReconciliation.jsx";
|
||
import { FinanceRechargeDetailList } from "./components/FinanceRechargeDetailList.jsx";
|
||
import { FinanceShell } from "./components/FinanceShell.jsx";
|
||
import { FinanceWithdrawalApplicationList } from "./components/FinanceWithdrawalApplicationList.jsx";
|
||
import { DEFAULT_APPLICATION_FORM } from "./constants.js";
|
||
import {
|
||
EMPTY_RECHARGE_OVERVIEW,
|
||
EMPTY_RECHARGE_SUMMARY,
|
||
buildApplicationPayload,
|
||
validateApplicationPayload,
|
||
} from "./format.js";
|
||
import { downloadCsv } from "@/shared/api/download";
|
||
import { TimeRangeFilter } from "@/shared/ui/TimeRangeFilter.jsx";
|
||
import { useToast } from "@/shared/ui/ToastProvider.jsx";
|
||
|
||
const emptyOptions = { apps: [], operations: [], walletIdentities: [] };
|
||
const pageSize = 50;
|
||
const DAY_MS = 86_400_000;
|
||
const CHINA_OFFSET_MS = 8 * 3_600_000;
|
||
const FINANCE_VIEWS = new Set(["overview", "rechargeDetails", "recon"]);
|
||
|
||
function chinaDayStart(timestamp) {
|
||
return Math.floor((timestamp + CHINA_OFFSET_MS) / DAY_MS) * DAY_MS - CHINA_OFFSET_MS;
|
||
}
|
||
|
||
function timePresets() {
|
||
const now = Date.now();
|
||
const todayStart = chinaDayStart(now);
|
||
const chinaNow = new Date(now + CHINA_OFFSET_MS);
|
||
const monthStart = Date.UTC(chinaNow.getUTCFullYear(), chinaNow.getUTCMonth(), 1) - CHINA_OFFSET_MS;
|
||
return [
|
||
{ key: "today", label: "今天", range: { endMs: todayStart + DAY_MS, startMs: todayStart } },
|
||
{ key: "7d", label: "近7天", range: { endMs: todayStart + DAY_MS, startMs: todayStart - 6 * DAY_MS } },
|
||
{ key: "30d", label: "近30天", range: { endMs: todayStart + DAY_MS, startMs: todayStart - 29 * DAY_MS } },
|
||
{ key: "month", label: "本月", range: { endMs: todayStart + DAY_MS, startMs: monthStart } },
|
||
{ key: "all", label: "不限", range: { endMs: "", startMs: "" } },
|
||
];
|
||
}
|
||
|
||
function reconMonthMeta(offset) {
|
||
const chinaNow = new Date(Date.now() + CHINA_OFFSET_MS);
|
||
const year = chinaNow.getUTCFullYear();
|
||
const month = chinaNow.getUTCMonth() + offset;
|
||
const startMs = Date.UTC(year, month, 1) - CHINA_OFFSET_MS;
|
||
const endMs = Date.UTC(year, month + 1, 1) - CHINA_OFFSET_MS;
|
||
const startDate = new Date(startMs + CHINA_OFFSET_MS);
|
||
return {
|
||
endMs,
|
||
isCurrent: offset === 0,
|
||
label: `${startDate.getUTCFullYear()}年${startDate.getUTCMonth() + 1}月`,
|
||
startMs,
|
||
};
|
||
}
|
||
|
||
export function FinanceApp() {
|
||
const { showToast } = useToast();
|
||
const [sessionState, setSessionState] = useState({ error: "", loading: true, session: null });
|
||
const [optionsState, setOptionsState] = useState({ data: emptyOptions, error: "", loading: false });
|
||
const [rechargeDetailsState, setRechargeDetailsState] = useState({
|
||
data: { items: [], page: 1, pageSize, total: 0 },
|
||
error: "",
|
||
loading: false,
|
||
});
|
||
const [rechargeSummaryState, setRechargeSummaryState] = useState({
|
||
merged: EMPTY_RECHARGE_SUMMARY,
|
||
loading: false,
|
||
perApp: [],
|
||
prev: null,
|
||
});
|
||
const [rechargeOverviewState, setRechargeOverviewState] = useState({
|
||
data: EMPTY_RECHARGE_OVERVIEW,
|
||
loading: false,
|
||
});
|
||
const [rechargeRegionsState, setRechargeRegionsState] = useState({ byApp: {}, loading: false });
|
||
const [rechargeAppsState, setRechargeAppsState] = useState({ items: [], loaded: false });
|
||
const [googlePaidRefreshing, setGooglePaidRefreshing] = useState(false);
|
||
const [reconMonthOffset, setReconMonthOffset] = useState(0);
|
||
const [reconState, setReconState] = useState({
|
||
loading: false,
|
||
overview: EMPTY_RECHARGE_OVERVIEW,
|
||
summary: EMPTY_RECHARGE_SUMMARY,
|
||
});
|
||
const [myApplicationsState, setMyApplicationsState] = useState({
|
||
data: { items: [], page: 1, pageSize, total: 0 },
|
||
error: "",
|
||
loading: false,
|
||
});
|
||
const [applicationsState, setApplicationsState] = useState({
|
||
data: { items: [], page: 1, pageSize, total: 0 },
|
||
error: "",
|
||
loading: false,
|
||
});
|
||
const [withdrawalsState, setWithdrawalsState] = useState({
|
||
data: { items: [], page: 1, pageSize, total: 0 },
|
||
error: "",
|
||
loading: false,
|
||
});
|
||
const [coinSellerRechargeOrdersState, setCoinSellerRechargeOrdersState] = useState({
|
||
data: { items: [], page: 1, pageSize, total: 0 },
|
||
error: "",
|
||
loading: false,
|
||
});
|
||
const [coinSellerRechargeOrderActionLoading, setCoinSellerRechargeOrderActionLoading] = useState("");
|
||
const [activeView, setActiveView] = useState("create");
|
||
const [rechargeDetailFilters, setRechargeDetailFilters] = useState(() => ({
|
||
appCode: "",
|
||
currency: "usd",
|
||
keyword: "",
|
||
page: 1,
|
||
paidState: "",
|
||
rechargeType: "",
|
||
regionId: "",
|
||
timeRange: timePresets().find((preset) => preset.key === "30d").range,
|
||
}));
|
||
const [rechargeExporting, setRechargeExporting] = useState(false);
|
||
const [myFilters, setMyFilters] = useState({ appCode: "", keyword: "", operation: "", page: 1, status: "" });
|
||
const [filters, setFilters] = useState({ appCode: "", keyword: "", operation: "", page: 1, status: "pending" });
|
||
const [withdrawalFilters, setWithdrawalFilters] = useState({ appCode: "", keyword: "", page: 1 });
|
||
const [coinSellerRechargeOrderFilters, setCoinSellerRechargeOrderFilters] = useState({
|
||
appCode: "",
|
||
grantStatus: "",
|
||
keyword: "",
|
||
page: 1,
|
||
providerCode: "",
|
||
status: "",
|
||
verifyStatus: "",
|
||
});
|
||
const [form, setForm] = useState(DEFAULT_APPLICATION_FORM);
|
||
const [createDialogOpen, setCreateDialogOpen] = useState(false);
|
||
const [submitting, setSubmitting] = useState(false);
|
||
const [auditTarget, setAuditTarget] = useState(null);
|
||
const [auditLoading, setAuditLoading] = useState(false);
|
||
const [withdrawalAuditTarget, setWithdrawalAuditTarget] = useState(null);
|
||
const [withdrawalAuditLoading, setWithdrawalAuditLoading] = useState(false);
|
||
|
||
useEffect(() => {
|
||
let mounted = true;
|
||
fetchFinanceSession()
|
||
.then((session) => {
|
||
if (!mounted) {
|
||
return;
|
||
}
|
||
setSessionState({ error: "", loading: false, session });
|
||
setActiveView(
|
||
session.canViewAppRechargeDetails
|
||
? "overview"
|
||
: session.canViewCoinSellerRechargeOrders
|
||
? "coinSellerRechargeOrders"
|
||
: session.canAuditApplication
|
||
? "applications"
|
||
: session.canCreateApplication
|
||
? "create"
|
||
: "withdrawals",
|
||
);
|
||
})
|
||
.catch((err) => {
|
||
if (mounted) {
|
||
setSessionState({ error: err.message || "登录已失效", loading: false, session: null });
|
||
}
|
||
});
|
||
return () => {
|
||
mounted = false;
|
||
};
|
||
}, []);
|
||
|
||
const session = sessionState.session;
|
||
const canLoadOptions = Boolean(session?.canAccessFinance);
|
||
const canViewFinance = Boolean(session?.canViewAppRechargeDetails);
|
||
|
||
// 财务三页（概览/流水/对账）共享同一套 App × 时间 × 计价 全局筛选。
|
||
const rechargeBaseQuery = useMemo(
|
||
() => ({
|
||
app_code: rechargeDetailFilters.appCode,
|
||
end_at_ms: rechargeDetailFilters.timeRange.endMs,
|
||
keyword: rechargeDetailFilters.keyword,
|
||
recharge_type: rechargeDetailFilters.rechargeType,
|
||
region_id: rechargeDetailFilters.appCode ? rechargeDetailFilters.regionId : "",
|
||
start_at_ms: rechargeDetailFilters.timeRange.startMs,
|
||
stat_tz: "Asia/Shanghai",
|
||
status: "succeeded",
|
||
}),
|
||
[rechargeDetailFilters],
|
||
);
|
||
const rechargeDetailQuery = useMemo(
|
||
() => ({
|
||
...rechargeBaseQuery,
|
||
page: rechargeDetailFilters.page,
|
||
page_size: pageSize,
|
||
paid_state: rechargeDetailFilters.paidState,
|
||
}),
|
||
[rechargeBaseQuery, rechargeDetailFilters.page, rechargeDetailFilters.paidState],
|
||
);
|
||
const myApplicationQuery = useMemo(
|
||
() => ({
|
||
app_code: myFilters.appCode,
|
||
keyword: myFilters.keyword,
|
||
operation: myFilters.operation,
|
||
page: myFilters.page,
|
||
page_size: pageSize,
|
||
status: myFilters.status,
|
||
}),
|
||
[myFilters],
|
||
);
|
||
const applicationQuery = useMemo(
|
||
() => ({
|
||
app_code: filters.appCode,
|
||
keyword: filters.keyword,
|
||
operation: filters.operation,
|
||
page: filters.page,
|
||
page_size: pageSize,
|
||
status: filters.status,
|
||
}),
|
||
[filters],
|
||
);
|
||
const withdrawalQuery = useMemo(
|
||
() => ({
|
||
app_code: withdrawalFilters.appCode,
|
||
keyword: withdrawalFilters.keyword,
|
||
page: withdrawalFilters.page,
|
||
page_size: pageSize,
|
||
}),
|
||
[withdrawalFilters],
|
||
);
|
||
const coinSellerRechargeOrderQuery = useMemo(
|
||
() => ({
|
||
app_code: coinSellerRechargeOrderFilters.appCode,
|
||
grant_status: coinSellerRechargeOrderFilters.grantStatus,
|
||
keyword: coinSellerRechargeOrderFilters.keyword,
|
||
page: coinSellerRechargeOrderFilters.page,
|
||
page_size: pageSize,
|
||
provider_code: coinSellerRechargeOrderFilters.providerCode,
|
||
status: coinSellerRechargeOrderFilters.status,
|
||
verify_status: coinSellerRechargeOrderFilters.verifyStatus,
|
||
}),
|
||
[coinSellerRechargeOrderFilters],
|
||
);
|
||
|
||
const loadOptions = useCallback(async () => {
|
||
if (!canLoadOptions) {
|
||
return;
|
||
}
|
||
setOptionsState((current) => ({ ...current, error: "", loading: true }));
|
||
try {
|
||
const data = await fetchFinanceApplicationOptions();
|
||
setOptionsState({ data, error: "", loading: false });
|
||
} catch (err) {
|
||
setOptionsState({ data: emptyOptions, error: err.message || "加载财务选项失败", loading: false });
|
||
}
|
||
}, [canLoadOptions]);
|
||
|
||
const loadMyApplications = useCallback(async () => {
|
||
if (!session?.canCreateApplication) {
|
||
return;
|
||
}
|
||
setMyApplicationsState((current) => ({ ...current, error: "", loading: true }));
|
||
try {
|
||
const data = await listMyFinanceApplications(myApplicationQuery);
|
||
setMyApplicationsState({ data, error: "", loading: false });
|
||
} catch (err) {
|
||
setMyApplicationsState((current) => ({
|
||
...current,
|
||
error: err.message || "加载我的申请列表失败",
|
||
loading: false,
|
||
}));
|
||
}
|
||
}, [myApplicationQuery, session?.canCreateApplication]);
|
||
|
||
// 充值详情的 App 目录来自 recharge-apps（含 Yumi/Aslan 等 legacy 外部账单源）；接口未就绪时回退到财务通用 App 列表。
|
||
const rechargeApps = useMemo(
|
||
() =>
|
||
rechargeAppsState.loaded && rechargeAppsState.items.length
|
||
? rechargeAppsState.items
|
||
: optionsState.data.apps,
|
||
[optionsState.data.apps, rechargeAppsState],
|
||
);
|
||
|
||
const loadRechargeApps = useCallback(async () => {
|
||
if (!canViewFinance) {
|
||
return;
|
||
}
|
||
try {
|
||
const items = await fetchFinanceRechargeApps();
|
||
setRechargeAppsState({ items, loaded: true });
|
||
} catch {
|
||
setRechargeAppsState({ items: [], loaded: false });
|
||
}
|
||
}, [canViewFinance]);
|
||
|
||
const loadRechargeDetails = useCallback(async () => {
|
||
if (!canViewFinance) {
|
||
return;
|
||
}
|
||
setRechargeDetailsState((current) => ({ ...current, error: "", loading: true }));
|
||
try {
|
||
const data = await listFinanceRechargeDetails(rechargeDetailQuery, rechargeApps);
|
||
setRechargeDetailsState({ data, error: "", loading: false });
|
||
} catch (err) {
|
||
setRechargeDetailsState((current) => ({
|
||
...current,
|
||
error: err.message || "加载充值流水失败",
|
||
loading: false,
|
||
}));
|
||
}
|
||
}, [canViewFinance, rechargeApps, rechargeDetailQuery]);
|
||
|
||
const loadRechargeSummary = useCallback(async () => {
|
||
if (!canViewFinance) {
|
||
return;
|
||
}
|
||
setRechargeSummaryState((current) => ({ ...current, loading: true }));
|
||
try {
|
||
const { merged, perApp } = await fetchFinanceRechargeSummaries(rechargeBaseQuery, rechargeApps);
|
||
// 环比：把当前时间范围整体前移一个周期再查一次；未选时间范围时不算环比。
|
||
let prev = null;
|
||
const { endMs, startMs } = rechargeDetailFilters.timeRange;
|
||
if (startMs && endMs && endMs > startMs) {
|
||
const length = endMs - startMs;
|
||
const prevQuery = { ...rechargeBaseQuery, end_at_ms: startMs, start_at_ms: startMs - length };
|
||
prev = (await fetchFinanceRechargeSummaries(prevQuery, rechargeApps)).merged;
|
||
}
|
||
setRechargeSummaryState({ merged, loading: false, perApp, prev });
|
||
} catch {
|
||
setRechargeSummaryState((current) => ({ ...current, loading: false }));
|
||
}
|
||
}, [canViewFinance, rechargeApps, rechargeBaseQuery, rechargeDetailFilters.timeRange]);
|
||
|
||
const loadRechargeOverview = useCallback(async () => {
|
||
if (!canViewFinance) {
|
||
return;
|
||
}
|
||
setRechargeOverviewState((current) => ({ ...current, loading: true }));
|
||
try {
|
||
const data = await fetchFinanceRechargeOverview(rechargeBaseQuery, rechargeApps);
|
||
setRechargeOverviewState({ data, loading: false });
|
||
} catch {
|
||
setRechargeOverviewState((current) => ({ ...current, loading: false }));
|
||
}
|
||
}, [canViewFinance, rechargeApps, rechargeBaseQuery]);
|
||
|
||
const loadRecon = useCallback(async () => {
|
||
if (!canViewFinance || activeView !== "recon") {
|
||
return;
|
||
}
|
||
const month = reconMonthMeta(reconMonthOffset);
|
||
const query = {
|
||
...rechargeBaseQuery,
|
||
end_at_ms: month.endMs,
|
||
keyword: "",
|
||
recharge_type: "",
|
||
start_at_ms: month.startMs,
|
||
};
|
||
setReconState((current) => ({ ...current, loading: true }));
|
||
try {
|
||
const [{ merged }, overview] = await Promise.all([
|
||
fetchFinanceRechargeSummaries(query, rechargeApps),
|
||
fetchFinanceRechargeOverview(query, rechargeApps),
|
||
]);
|
||
setReconState({ loading: false, overview, summary: merged });
|
||
} catch {
|
||
setReconState((current) => ({ ...current, loading: false }));
|
||
}
|
||
}, [activeView, canViewFinance, rechargeApps, rechargeBaseQuery, reconMonthOffset]);
|
||
|
||
const rechargeAppCode = rechargeDetailFilters.appCode;
|
||
// 一次拉齐所有 App 的区域目录：区域筛选下拉用当前 App 的，流水区域列在“全部 App”下要跨 App 显示名称。
|
||
const loadRechargeRegions = useCallback(async () => {
|
||
if (!canViewFinance || !rechargeApps.length) {
|
||
return;
|
||
}
|
||
setRechargeRegionsState((current) => ({ ...current, loading: true }));
|
||
try {
|
||
const entries = await Promise.all(
|
||
rechargeApps.map(async (app) => {
|
||
try {
|
||
return [app.appCode, await listFinanceRechargeRegions(app.appCode)];
|
||
} catch {
|
||
return [app.appCode, []];
|
||
}
|
||
}),
|
||
);
|
||
setRechargeRegionsState({ byApp: Object.fromEntries(entries), loading: false });
|
||
} catch {
|
||
setRechargeRegionsState((current) => ({ ...current, loading: false }));
|
||
}
|
||
}, [canViewFinance, rechargeApps]);
|
||
|
||
const refreshGooglePaid = useCallback(
|
||
async (transactionIds) => {
|
||
if (!rechargeAppCode || !transactionIds?.length || googlePaidRefreshing) {
|
||
return;
|
||
}
|
||
setGooglePaidRefreshing(true);
|
||
try {
|
||
const results = await refreshFinanceGoogleRechargePaid(rechargeAppCode, transactionIds);
|
||
const failed = results.filter((item) => item.error).length;
|
||
const succeeded = results.length - failed;
|
||
showToast(
|
||
failed
|
||
? `谷歌实付同步完成：成功 ${succeeded} 笔，失败 ${failed} 笔`
|
||
: `谷歌实付同步完成：${succeeded} 笔`,
|
||
failed ? "warning" : "success",
|
||
);
|
||
await Promise.all([loadRechargeDetails(), loadRechargeOverview()]);
|
||
} catch (err) {
|
||
showToast(err.message || "查询谷歌实付失败", "error");
|
||
} finally {
|
||
setGooglePaidRefreshing(false);
|
||
}
|
||
},
|
||
[googlePaidRefreshing, loadRechargeDetails, loadRechargeOverview, rechargeAppCode, showToast],
|
||
);
|
||
|
||
const exportRechargeBills = useCallback(async () => {
|
||
if (!rechargeAppCode || rechargeExporting) {
|
||
return;
|
||
}
|
||
setRechargeExporting(true);
|
||
try {
|
||
const timestamp = new Date()
|
||
.toLocaleString("sv-SE", { timeZone: "Asia/Shanghai" })
|
||
.replaceAll(/[: ]/g, "-");
|
||
await downloadCsv(
|
||
() => exportFinanceRechargeBills(rechargeAppCode, rechargeDetailQuery),
|
||
`充值明细-${rechargeAppCode}-${timestamp}.csv`,
|
||
);
|
||
showToast("充值明细已导出", "success");
|
||
} catch (err) {
|
||
showToast(err.message || "导出充值明细失败", "error");
|
||
} finally {
|
||
setRechargeExporting(false);
|
||
}
|
||
}, [rechargeAppCode, rechargeDetailQuery, rechargeExporting, showToast]);
|
||
|
||
const loadApplications = useCallback(async () => {
|
||
if (!session?.canAuditApplication) {
|
||
return;
|
||
}
|
||
setApplicationsState((current) => ({ ...current, error: "", loading: true }));
|
||
try {
|
||
const data = await listFinanceApplications(applicationQuery);
|
||
setApplicationsState({ data, error: "", loading: false });
|
||
} catch (err) {
|
||
setApplicationsState((current) => ({
|
||
...current,
|
||
error: err.message || "加载申请列表失败",
|
||
loading: false,
|
||
}));
|
||
}
|
||
}, [applicationQuery, session?.canAuditApplication]);
|
||
|
||
const loadWithdrawals = useCallback(async () => {
|
||
if (!session?.canViewWithdrawalApplications) {
|
||
return;
|
||
}
|
||
setWithdrawalsState((current) => ({ ...current, error: "", loading: true }));
|
||
try {
|
||
const data = await listFinanceWithdrawalApplications(withdrawalQuery);
|
||
setWithdrawalsState({ data, error: "", loading: false });
|
||
} catch (err) {
|
||
setWithdrawalsState((current) => ({
|
||
...current,
|
||
error: err.message || "加载提现申请列表失败",
|
||
loading: false,
|
||
}));
|
||
}
|
||
}, [session?.canViewWithdrawalApplications, withdrawalQuery]);
|
||
|
||
const loadCoinSellerRechargeOrders = useCallback(async () => {
|
||
if (!session?.canViewCoinSellerRechargeOrders) {
|
||
return;
|
||
}
|
||
setCoinSellerRechargeOrdersState((current) => ({ ...current, error: "", loading: true }));
|
||
try {
|
||
const data = await listFinanceCoinSellerRechargeOrders(coinSellerRechargeOrderQuery);
|
||
setCoinSellerRechargeOrdersState({ data, error: "", loading: false });
|
||
} catch (err) {
|
||
setCoinSellerRechargeOrdersState((current) => ({
|
||
...current,
|
||
error: err.message || "加载币商充值订单失败",
|
||
loading: false,
|
||
}));
|
||
}
|
||
}, [coinSellerRechargeOrderQuery, session?.canViewCoinSellerRechargeOrders]);
|
||
|
||
useEffect(() => {
|
||
loadOptions();
|
||
}, [loadOptions]);
|
||
|
||
useEffect(() => {
|
||
loadMyApplications();
|
||
}, [loadMyApplications]);
|
||
|
||
useEffect(() => {
|
||
loadRechargeApps();
|
||
}, [loadRechargeApps]);
|
||
|
||
useEffect(() => {
|
||
loadRechargeDetails();
|
||
}, [loadRechargeDetails]);
|
||
|
||
useEffect(() => {
|
||
loadRechargeSummary();
|
||
}, [loadRechargeSummary]);
|
||
|
||
useEffect(() => {
|
||
loadRechargeOverview();
|
||
}, [loadRechargeOverview]);
|
||
|
||
useEffect(() => {
|
||
loadRecon();
|
||
}, [loadRecon]);
|
||
|
||
useEffect(() => {
|
||
loadRechargeRegions();
|
||
}, [loadRechargeRegions]);
|
||
|
||
useEffect(() => {
|
||
loadApplications();
|
||
}, [loadApplications]);
|
||
|
||
useEffect(() => {
|
||
loadWithdrawals();
|
||
}, [loadWithdrawals]);
|
||
|
||
useEffect(() => {
|
||
loadCoinSellerRechargeOrders();
|
||
}, [loadCoinSellerRechargeOrders]);
|
||
|
||
const operationOptions = useMemo(
|
||
() => filterOperationsByPermissions(optionsState.data.operations, session?.permissions || []),
|
||
[optionsState.data.operations, session?.permissions],
|
||
);
|
||
|
||
const submitApplication = async (event) => {
|
||
event.preventDefault();
|
||
if (!session?.canCreateApplication) {
|
||
showToast("无发起财务申请权限", "error");
|
||
return;
|
||
}
|
||
|
||
const payload = buildApplicationPayload(form);
|
||
const validationMessage = validateApplicationPayload(payload);
|
||
if (validationMessage) {
|
||
showToast(validationMessage, "warning");
|
||
return;
|
||
}
|
||
|
||
setSubmitting(true);
|
||
try {
|
||
const result = await createFinanceApplication(cleanPayload(payload));
|
||
setForm({ ...DEFAULT_APPLICATION_FORM, appCode: payload.appCode });
|
||
setCreateDialogOpen(false);
|
||
showToast(
|
||
result?.dingTalkNotified === false ? "申请已提交，钉钉通知未确认" : "申请已提交并通知财务",
|
||
"success",
|
||
);
|
||
await loadMyApplications();
|
||
if (session.canAuditApplication) {
|
||
await loadApplications();
|
||
}
|
||
} catch (err) {
|
||
showToast(err.message || "发起申请失败", "error");
|
||
} finally {
|
||
setSubmitting(false);
|
||
}
|
||
};
|
||
|
||
const submitAudit = async ({ decision, remark }) => {
|
||
if (!auditTarget?.id || !session?.canAuditApplication) {
|
||
return;
|
||
}
|
||
setAuditLoading(true);
|
||
try {
|
||
const submitter = decision === "approved" ? approveFinanceApplication : rejectFinanceApplication;
|
||
await submitter(auditTarget.id, { auditRemark: remark });
|
||
showToast(decision === "approved" ? "申请已通过" : "申请已拒绝", "success");
|
||
setAuditTarget(null);
|
||
await loadApplications();
|
||
} catch (err) {
|
||
showToast(err.message || "审核失败", "error");
|
||
} finally {
|
||
setAuditLoading(false);
|
||
}
|
||
};
|
||
|
||
const submitWithdrawalAudit = async ({ auditImageUrl, decision, remark }) => {
|
||
if (!withdrawalAuditTarget?.id || !session?.canAuditWithdrawalApplications) {
|
||
return;
|
||
}
|
||
setWithdrawalAuditLoading(true);
|
||
try {
|
||
const submitter =
|
||
decision === "approved" ? approveFinanceWithdrawalApplication : rejectFinanceWithdrawalApplication;
|
||
await submitter(withdrawalAuditTarget.id, cleanPayload({ auditImageUrl, auditRemark: remark }));
|
||
showToast(decision === "approved" ? "提现申请已通过" : "提现申请已拒绝", "success");
|
||
setWithdrawalAuditTarget(null);
|
||
await loadWithdrawals();
|
||
} catch (err) {
|
||
showToast(err.message || "审核提现申请失败", "error");
|
||
} finally {
|
||
setWithdrawalAuditLoading(false);
|
||
}
|
||
};
|
||
|
||
const submitCoinSellerRechargeOrder = async (payload) => {
|
||
if (!session?.canCreateCoinSellerRechargeOrder) {
|
||
showToast("无创建币商充值订单权限", "error");
|
||
return null;
|
||
}
|
||
setCoinSellerRechargeOrderActionLoading("create");
|
||
try {
|
||
const order = await createFinanceCoinSellerRechargeOrder(cleanPayload(payload));
|
||
showToast("币商充值订单已创建", "success");
|
||
await loadCoinSellerRechargeOrders();
|
||
return order;
|
||
} catch (err) {
|
||
showToast(err.message || "创建币商充值订单失败", "error");
|
||
return null;
|
||
} finally {
|
||
setCoinSellerRechargeOrderActionLoading("");
|
||
}
|
||
};
|
||
|
||
const verifyCoinSellerRechargeReceipt = async (payload) => {
|
||
if (!session?.canVerifyCoinSellerRechargeOrder) {
|
||
showToast("无校验币商充值订单权限", "error");
|
||
return null;
|
||
}
|
||
try {
|
||
const verification = await verifyFinanceCoinSellerRechargeReceipt(cleanPayload(payload));
|
||
showToast(verification?.verified ? "订单号校验通过" : verification?.failureReason || "订单号校验未通过", verification?.verified ? "success" : "error");
|
||
return verification;
|
||
} catch (err) {
|
||
showToast(err.message || "校验订单号失败", "error");
|
||
return null;
|
||
}
|
||
};
|
||
|
||
const verifyCoinSellerRechargeOrder = async (order) => {
|
||
if (!order?.id || !session?.canVerifyCoinSellerRechargeOrder) {
|
||
return;
|
||
}
|
||
setCoinSellerRechargeOrderActionLoading(`verify:${order.id}`);
|
||
try {
|
||
await verifyFinanceCoinSellerRechargeOrder(order.id);
|
||
showToast("订单校验已完成", "success");
|
||
await loadCoinSellerRechargeOrders();
|
||
} catch (err) {
|
||
showToast(err.message || "校验币商充值订单失败", "error");
|
||
} finally {
|
||
setCoinSellerRechargeOrderActionLoading("");
|
||
}
|
||
};
|
||
|
||
const grantCoinSellerRechargeOrder = async (order) => {
|
||
if (!order?.id || !session?.canGrantCoinSellerRechargeOrder) {
|
||
return;
|
||
}
|
||
setCoinSellerRechargeOrderActionLoading(`grant:${order.id}`);
|
||
try {
|
||
await grantFinanceCoinSellerRechargeOrder(order.id);
|
||
showToast("币商充值已发放", "success");
|
||
await loadCoinSellerRechargeOrders();
|
||
} catch (err) {
|
||
showToast(err.message || "发放币商充值失败", "error");
|
||
} finally {
|
||
setCoinSellerRechargeOrderActionLoading("");
|
||
}
|
||
};
|
||
|
||
const updateFilters = (nextFilters) => {
|
||
setFilters((current) => ({ ...current, ...nextFilters, page: nextFilters.page || 1 }));
|
||
};
|
||
|
||
const updateRechargeDetailFilters = (nextFilters) => {
|
||
setRechargeDetailFilters((current) => ({ ...current, ...nextFilters, page: nextFilters.page || 1 }));
|
||
};
|
||
|
||
const updateMyFilters = (nextFilters) => {
|
||
setMyFilters((current) => ({ ...current, ...nextFilters, page: nextFilters.page || 1 }));
|
||
};
|
||
|
||
const updateWithdrawalFilters = (nextFilters) => {
|
||
setWithdrawalFilters((current) => ({ ...current, ...nextFilters, page: nextFilters.page || 1 }));
|
||
};
|
||
|
||
const updateCoinSellerRechargeOrderFilters = (nextFilters) => {
|
||
setCoinSellerRechargeOrderFilters((current) => ({ ...current, ...nextFilters, page: nextFilters.page || 1 }));
|
||
};
|
||
|
||
const closeCreateDialog = (_, reason) => {
|
||
if (submitting || reason === "backdropClick") {
|
||
return;
|
||
}
|
||
setCreateDialogOpen(false);
|
||
};
|
||
|
||
if (sessionState.loading) {
|
||
return <StateScreen title="正在进入财务系统" />;
|
||
}
|
||
|
||
if (sessionState.error) {
|
||
return <StateScreen actionHref="/login" actionText="重新登录" title={sessionState.error} />;
|
||
}
|
||
|
||
if (!session?.canAccessFinance) {
|
||
return <StateScreen title="无财务系统权限" />;
|
||
}
|
||
|
||
const presets = timePresets();
|
||
const activePreset = presets.find(
|
||
(preset) =>
|
||
String(preset.range.startMs || "") === String(rechargeDetailFilters.timeRange.startMs || "") &&
|
||
String(preset.range.endMs || "") === String(rechargeDetailFilters.timeRange.endMs || ""),
|
||
);
|
||
const isFinanceView = FINANCE_VIEWS.has(activeView);
|
||
const financeToolbar =
|
||
isFinanceView && session.canViewAppRechargeDetails ? (
|
||
<>
|
||
<div className="finance-seg" role="group" aria-label="时间范围">
|
||
{presets.map((preset) => (
|
||
<button
|
||
className={activePreset?.key === preset.key ? "is-on" : ""}
|
||
key={preset.key}
|
||
type="button"
|
||
onClick={() => updateRechargeDetailFilters({ timeRange: preset.range })}
|
||
>
|
||
{preset.label}
|
||
</button>
|
||
))}
|
||
</div>
|
||
<TimeRangeFilter
|
||
label="自定义 · 中国时区"
|
||
value={rechargeDetailFilters.timeRange}
|
||
onChange={(timeRange) => updateRechargeDetailFilters({ timeRange })}
|
||
/>
|
||
<div className="finance-seg" role="group" aria-label="计价单位">
|
||
{[
|
||
["usd", "USD"],
|
||
["coin", "金币"],
|
||
].map(([value, label]) => (
|
||
<button
|
||
className={rechargeDetailFilters.currency === value ? "is-on" : ""}
|
||
key={value}
|
||
type="button"
|
||
onClick={() =>
|
||
updateRechargeDetailFilters({ currency: value, page: rechargeDetailFilters.page })
|
||
}
|
||
>
|
||
{label}
|
||
</button>
|
||
))}
|
||
</div>
|
||
</>
|
||
) : null;
|
||
|
||
const appBar =
|
||
isFinanceView && session.canViewAppRechargeDetails ? (
|
||
<div className="finance-appbar">
|
||
<button
|
||
className={["finance-appchip", rechargeDetailFilters.appCode === "" ? "is-on" : ""]
|
||
.filter(Boolean)
|
||
.join(" ")}
|
||
type="button"
|
||
onClick={() => updateRechargeDetailFilters({ appCode: "", regionId: "" })}
|
||
>
|
||
全部 App
|
||
</button>
|
||
{rechargeApps.map((app) => (
|
||
<button
|
||
className={["finance-appchip", rechargeDetailFilters.appCode === app.appCode ? "is-on" : ""]
|
||
.filter(Boolean)
|
||
.join(" ")}
|
||
key={app.appCode}
|
||
type="button"
|
||
onClick={() => updateRechargeDetailFilters({ appCode: app.appCode, regionId: "" })}
|
||
>
|
||
{app.appName || app.appCode}
|
||
</button>
|
||
))}
|
||
</div>
|
||
) : null;
|
||
|
||
return (
|
||
<FinanceShell
|
||
activeView={activeView}
|
||
appBar={appBar}
|
||
canAudit={session.canAuditApplication}
|
||
canCreate={session.canCreateApplication}
|
||
canViewCoinSellerRechargeOrders={session.canViewCoinSellerRechargeOrders}
|
||
canViewRechargeDetails={session.canViewAppRechargeDetails}
|
||
canViewWithdrawals={session.canViewWithdrawalApplications}
|
||
loading={
|
||
optionsState.loading ||
|
||
rechargeDetailsState.loading ||
|
||
myApplicationsState.loading ||
|
||
applicationsState.loading ||
|
||
withdrawalsState.loading ||
|
||
coinSellerRechargeOrdersState.loading
|
||
}
|
||
session={session}
|
||
toolbar={financeToolbar}
|
||
onViewChange={setActiveView}
|
||
>
|
||
{activeView === "overview" && session.canViewAppRechargeDetails ? (
|
||
<FinanceOverview
|
||
apps={rechargeApps}
|
||
currency={rechargeDetailFilters.currency}
|
||
filters={rechargeDetailFilters}
|
||
loading={rechargeSummaryState.loading || rechargeOverviewState.loading}
|
||
overview={rechargeOverviewState.data}
|
||
perAppSummaries={rechargeSummaryState.perApp}
|
||
prevSummary={rechargeSummaryState.prev}
|
||
regions={rechargeOverviewState.data.regions}
|
||
summary={rechargeSummaryState.merged}
|
||
onFiltersChange={updateRechargeDetailFilters}
|
||
onGoUnsynced={() => {
|
||
updateRechargeDetailFilters({ paidState: "unsynced", rechargeType: "" });
|
||
setActiveView("rechargeDetails");
|
||
}}
|
||
onOpenApp={(appCode) => {
|
||
updateRechargeDetailFilters({ appCode, regionId: "" });
|
||
setActiveView("rechargeDetails");
|
||
}}
|
||
onOpenWithdrawals={() => setActiveView("withdrawals")}
|
||
/>
|
||
) : activeView === "coinSellerRechargeOrders" && session.canViewCoinSellerRechargeOrders ? (
|
||
<FinanceCoinSellerRechargeOrderList
|
||
actionLoading={coinSellerRechargeOrderActionLoading}
|
||
apps={rechargeApps}
|
||
canCreate={session.canCreateCoinSellerRechargeOrder}
|
||
canGrant={session.canGrantCoinSellerRechargeOrder}
|
||
canVerify={session.canVerifyCoinSellerRechargeOrder}
|
||
error={coinSellerRechargeOrdersState.error}
|
||
filters={coinSellerRechargeOrderFilters}
|
||
loading={coinSellerRechargeOrdersState.loading}
|
||
orders={coinSellerRechargeOrdersState.data}
|
||
onCreate={submitCoinSellerRechargeOrder}
|
||
onFiltersChange={updateCoinSellerRechargeOrderFilters}
|
||
onGrant={grantCoinSellerRechargeOrder}
|
||
onReload={loadCoinSellerRechargeOrders}
|
||
onVerify={verifyCoinSellerRechargeOrder}
|
||
onVerifyReceipt={verifyCoinSellerRechargeReceipt}
|
||
/>
|
||
) : activeView === "recon" && session.canViewAppRechargeDetails ? (
|
||
<FinanceReconciliation
|
||
loading={reconState.loading}
|
||
month={reconMonthMeta(reconMonthOffset)}
|
||
overview={reconState.overview}
|
||
summary={reconState.summary}
|
||
onMonthChange={(delta) => setReconMonthOffset((current) => Math.min(0, current + delta))}
|
||
/>
|
||
) : activeView === "rechargeDetails" && session.canViewAppRechargeDetails ? (
|
||
<FinanceRechargeDetailList
|
||
apps={rechargeApps}
|
||
bills={rechargeDetailsState.data}
|
||
currency={rechargeDetailFilters.currency}
|
||
error={rechargeDetailsState.error}
|
||
exporting={rechargeExporting}
|
||
filters={rechargeDetailFilters}
|
||
googlePaidRefreshing={googlePaidRefreshing}
|
||
loading={rechargeDetailsState.loading}
|
||
regions={rechargeRegionsState.byApp[rechargeAppCode] || []}
|
||
regionsByApp={rechargeRegionsState.byApp}
|
||
summary={rechargeSummaryState.merged}
|
||
onExport={exportRechargeBills}
|
||
onFiltersChange={updateRechargeDetailFilters}
|
||
onRefreshGooglePaid={refreshGooglePaid}
|
||
onReload={() => {
|
||
loadRechargeDetails();
|
||
loadRechargeSummary();
|
||
loadRechargeOverview();
|
||
}}
|
||
/>
|
||
) : activeView === "applications" && session.canAuditApplication ? (
|
||
<FinanceApplicationList
|
||
applications={applicationsState.data}
|
||
error={applicationsState.error}
|
||
filters={filters}
|
||
loading={applicationsState.loading}
|
||
operations={optionsState.data.operations}
|
||
options={optionsState.data}
|
||
onAudit={setAuditTarget}
|
||
onFiltersChange={updateFilters}
|
||
onReload={loadApplications}
|
||
/>
|
||
) : activeView === "withdrawals" && session.canViewWithdrawalApplications ? (
|
||
<FinanceWithdrawalApplicationList
|
||
applications={withdrawalsState.data}
|
||
canAudit={session.canAuditWithdrawalApplications}
|
||
error={withdrawalsState.error}
|
||
filters={withdrawalFilters}
|
||
loading={withdrawalsState.loading}
|
||
options={optionsState.data}
|
||
onAudit={setWithdrawalAuditTarget}
|
||
onFiltersChange={updateWithdrawalFilters}
|
||
onReload={loadWithdrawals}
|
||
/>
|
||
) : (
|
||
<FinanceMyApplicationList
|
||
applications={myApplicationsState.data}
|
||
error={myApplicationsState.error}
|
||
filters={myFilters}
|
||
loading={myApplicationsState.loading}
|
||
operations={optionsState.data.operations}
|
||
options={optionsState.data}
|
||
onCreate={() => setCreateDialogOpen(true)}
|
||
onFiltersChange={updateMyFilters}
|
||
onReload={loadMyApplications}
|
||
/>
|
||
)}
|
||
<Dialog
|
||
fullWidth
|
||
maxWidth="md"
|
||
open={createDialogOpen}
|
||
slotProps={{ paper: { className: "finance-create-dialog-paper" } }}
|
||
onClose={closeCreateDialog}
|
||
>
|
||
<DialogTitle>发起申请</DialogTitle>
|
||
<DialogContent className="finance-create-dialog">
|
||
<FinanceApplicationForm
|
||
apps={optionsState.data.apps}
|
||
disabled={!session.canCreateApplication}
|
||
error={optionsState.error}
|
||
form={form}
|
||
loading={optionsState.loading || submitting}
|
||
operations={operationOptions}
|
||
walletIdentities={optionsState.data.walletIdentities}
|
||
onCancel={closeCreateDialog}
|
||
onChange={setForm}
|
||
onSubmit={submitApplication}
|
||
/>
|
||
</DialogContent>
|
||
</Dialog>
|
||
<FinanceAuditDialog
|
||
application={auditTarget}
|
||
loading={auditLoading}
|
||
operations={optionsState.data.operations}
|
||
open={Boolean(auditTarget)}
|
||
onClose={() => setAuditTarget(null)}
|
||
onSubmit={submitAudit}
|
||
/>
|
||
<FinanceAuditDialog
|
||
application={withdrawalAuditTarget}
|
||
loading={withdrawalAuditLoading}
|
||
operations={optionsState.data.operations}
|
||
open={Boolean(withdrawalAuditTarget)}
|
||
requireApprovalImage
|
||
requireRejectRemark
|
||
onClose={() => setWithdrawalAuditTarget(null)}
|
||
onSubmit={submitWithdrawalAudit}
|
||
/>
|
||
</FinanceShell>
|
||
);
|
||
}
|
||
|
||
function StateScreen({ actionHref = "", actionText = "", title }) {
|
||
return (
|
||
<main className="finance-state-screen">
|
||
<section className="finance-state-panel">
|
||
<h1>{title}</h1>
|
||
{actionHref ? <a href={actionHref}>{actionText}</a> : null}
|
||
</section>
|
||
</main>
|
||
);
|
||
}
|
||
|
||
function cleanPayload(payload) {
|
||
return Object.fromEntries(Object.entries(payload).filter(([, value]) => value !== ""));
|
||
}
|