R56 A1-A6：费用标准管控
这个提交包含在：
@@ -0,0 +1,521 @@
|
||||
import { useEffect, useMemo, useState } from "react";
|
||||
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
|
||||
import { toast } from "sonner";
|
||||
import { fetchDepartments } from "../api/departments";
|
||||
import { mapApiErrorMessage } from "../api/errorMessages";
|
||||
import { fetchExpenseTypes } from "../api/expenseTypes";
|
||||
import {
|
||||
createExpenseStandard,
|
||||
deleteExpenseStandard,
|
||||
fetchExpenseStandards,
|
||||
updateExpenseStandard,
|
||||
type ExpenseStandard,
|
||||
type ExpenseStandardControlMode,
|
||||
type ExpenseStandardPerUnit,
|
||||
type ExpenseStandardScopeType,
|
||||
} from "../api/expenseStandards";
|
||||
import { isApiError } from "../api/types";
|
||||
import { PageHeader } from "../components/common/PageHeader";
|
||||
import { TableSkeleton } from "../components/common/TableSkeleton";
|
||||
import { ConfirmDialog } from "../components/common/ConfirmDialog";
|
||||
import { Button } from "../components/ui/button";
|
||||
import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from "../components/ui/dialog";
|
||||
import { Input } from "../components/ui/input";
|
||||
import { Label } from "../components/ui/label";
|
||||
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "../components/ui/table";
|
||||
|
||||
type FilterEnabled = "all" | "enabled" | "disabled";
|
||||
type FormState = {
|
||||
expenseTypeId: string;
|
||||
name: string;
|
||||
maxAmount: string;
|
||||
perUnit: ExpenseStandardPerUnit;
|
||||
controlMode: ExpenseStandardControlMode;
|
||||
scopeType: ExpenseStandardScopeType;
|
||||
scopeKey: string;
|
||||
enabled: boolean;
|
||||
note: string;
|
||||
};
|
||||
|
||||
const PER_UNIT_OPTIONS: Array<{ value: ExpenseStandardPerUnit; label: string }> = [
|
||||
{ value: "item", label: "每项" },
|
||||
{ value: "day", label: "每天" },
|
||||
{ value: "trip", label: "每次" },
|
||||
];
|
||||
|
||||
const CONTROL_MODE_OPTIONS: Array<{ value: ExpenseStandardControlMode; label: string }> = [
|
||||
{ value: "warn", label: "预警" },
|
||||
{ value: "block", label: "阻断" },
|
||||
];
|
||||
|
||||
function emptyForm(expenseTypeId = ""): FormState {
|
||||
return {
|
||||
expenseTypeId,
|
||||
name: "",
|
||||
maxAmount: "",
|
||||
perUnit: "item",
|
||||
controlMode: "warn",
|
||||
scopeType: "global",
|
||||
scopeKey: "",
|
||||
enabled: true,
|
||||
note: "",
|
||||
};
|
||||
}
|
||||
|
||||
function toForm(item: ExpenseStandard): FormState {
|
||||
return {
|
||||
expenseTypeId: item.expenseTypeId,
|
||||
name: item.name,
|
||||
maxAmount: item.maxAmount,
|
||||
perUnit: item.perUnit,
|
||||
controlMode: item.controlMode,
|
||||
scopeType: item.scopeType,
|
||||
scopeKey: item.scopeKey ?? "",
|
||||
enabled: item.enabled,
|
||||
note: item.note ?? "",
|
||||
};
|
||||
}
|
||||
|
||||
function resolveErrorMessage(error: unknown) {
|
||||
if (isApiError(error)) {
|
||||
return `${error.code}: ${mapApiErrorMessage(error.code, error.details, error.message)}`;
|
||||
}
|
||||
if (error instanceof Error) {
|
||||
return error.message;
|
||||
}
|
||||
return "请求失败，请稍后重试";
|
||||
}
|
||||
|
||||
function toneClassForControlMode(mode: ExpenseStandardControlMode) {
|
||||
return mode === "block"
|
||||
? "border-red-200 bg-red-50 text-red-700"
|
||||
: "border-amber-200 bg-amber-50 text-amber-700";
|
||||
}
|
||||
|
||||
export function ExpenseStandardsPage() {
|
||||
const queryClient = useQueryClient();
|
||||
const [error, setError] = useState("");
|
||||
const [selectedExpenseTypeId, setSelectedExpenseTypeId] = useState("");
|
||||
const [enabledFilter, setEnabledFilter] = useState<FilterEnabled>("all");
|
||||
const [dialogOpen, setDialogOpen] = useState(false);
|
||||
const [editingItem, setEditingItem] = useState<ExpenseStandard | null>(null);
|
||||
const [form, setForm] = useState<FormState>(emptyForm());
|
||||
const [confirmDelete, setConfirmDelete] = useState<ExpenseStandard | null>(null);
|
||||
|
||||
const expenseTypesQuery = useQuery({
|
||||
queryKey: ["expense-types", "expense-standards"],
|
||||
queryFn: () => fetchExpenseTypes(),
|
||||
});
|
||||
|
||||
const departmentsQuery = useQuery({
|
||||
queryKey: ["departments", "expense-standards", "active"],
|
||||
queryFn: () => fetchDepartments({ includeArchived: false }),
|
||||
});
|
||||
|
||||
const standardsQuery = useQuery({
|
||||
queryKey: ["expense-standards", selectedExpenseTypeId, enabledFilter],
|
||||
queryFn: () =>
|
||||
fetchExpenseStandards({
|
||||
expenseTypeId: selectedExpenseTypeId || undefined,
|
||||
enabled:
|
||||
enabledFilter === "all"
|
||||
? undefined
|
||||
: enabledFilter === "enabled",
|
||||
}),
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
if (!dialogOpen) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (editingItem) {
|
||||
setForm(toForm(editingItem));
|
||||
return;
|
||||
}
|
||||
|
||||
const fallbackExpenseTypeId = selectedExpenseTypeId || expenseTypesQuery.data?.items?.[0]?.id || "";
|
||||
setForm(emptyForm(fallbackExpenseTypeId));
|
||||
}, [dialogOpen, editingItem, expenseTypesQuery.data?.items, selectedExpenseTypeId]);
|
||||
|
||||
const saveMutation = useMutation({
|
||||
mutationFn: async () => {
|
||||
const payload = {
|
||||
expenseTypeId: form.expenseTypeId,
|
||||
name: form.name.trim(),
|
||||
maxAmount: form.maxAmount.trim(),
|
||||
perUnit: form.perUnit,
|
||||
controlMode: form.controlMode,
|
||||
scopeType: form.scopeType,
|
||||
scopeKey: form.scopeType === "department" ? form.scopeKey || null : null,
|
||||
enabled: form.enabled,
|
||||
note: form.note.trim() || null,
|
||||
};
|
||||
|
||||
if (editingItem) {
|
||||
return updateExpenseStandard(editingItem.id, payload);
|
||||
}
|
||||
|
||||
return createExpenseStandard(payload);
|
||||
},
|
||||
onSuccess: async () => {
|
||||
await queryClient.invalidateQueries({ queryKey: ["expense-standards"] });
|
||||
setDialogOpen(false);
|
||||
setEditingItem(null);
|
||||
setError("");
|
||||
toast.success(editingItem ? "标准已更新" : "标准已创建");
|
||||
},
|
||||
onError: (error) => {
|
||||
const message = resolveErrorMessage(error);
|
||||
setError(message);
|
||||
toast.error(message);
|
||||
},
|
||||
});
|
||||
|
||||
const deleteMutation = useMutation({
|
||||
mutationFn: (standardId: string) => deleteExpenseStandard(standardId),
|
||||
onSuccess: async () => {
|
||||
await queryClient.invalidateQueries({ queryKey: ["expense-standards"] });
|
||||
setConfirmDelete(null);
|
||||
setError("");
|
||||
toast.success("标准已停用");
|
||||
},
|
||||
onError: (error) => {
|
||||
const message = resolveErrorMessage(error);
|
||||
setError(message);
|
||||
toast.error(message);
|
||||
},
|
||||
});
|
||||
|
||||
const items = standardsQuery.data?.items ?? [];
|
||||
const expenseTypeOptions = expenseTypesQuery.data?.items ?? [];
|
||||
const departmentOptions = departmentsQuery.data?.items ?? [];
|
||||
const canSubmit =
|
||||
form.expenseTypeId.trim().length > 0 &&
|
||||
form.name.trim().length > 0 &&
|
||||
form.maxAmount.trim().length > 0 &&
|
||||
(form.scopeType !== "department" || form.scopeKey.trim().length > 0);
|
||||
|
||||
const selectedExpenseTypeName = useMemo(() => {
|
||||
return expenseTypeOptions.find((item) => item.id === selectedExpenseTypeId)?.name ?? "全部费用类型";
|
||||
}, [expenseTypeOptions, selectedExpenseTypeId]);
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<PageHeader
|
||||
title="费用标准管理"
|
||||
subtitle="维护费用类型的通用报销上限与 warn/block 管控模式。"
|
||||
actions={
|
||||
<Button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
setEditingItem(null);
|
||||
setDialogOpen(true);
|
||||
}}
|
||||
>
|
||||
新增标准
|
||||
</Button>
|
||||
}
|
||||
/>
|
||||
|
||||
{error ? (
|
||||
<p className="rounded-lg border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-600">{error}</p>
|
||||
) : null}
|
||||
|
||||
<div className="card-std space-y-4 p-6">
|
||||
<div className="grid gap-3 md:grid-cols-2 xl:grid-cols-4">
|
||||
<div className="space-y-1">
|
||||
<Label htmlFor="expense-standard-filter-type">费用类型</Label>
|
||||
<select
|
||||
id="expense-standard-filter-type"
|
||||
className="select-std"
|
||||
value={selectedExpenseTypeId}
|
||||
onChange={(event) => setSelectedExpenseTypeId(event.target.value)}
|
||||
>
|
||||
<option value="">全部费用类型</option>
|
||||
{expenseTypeOptions.map((item) => (
|
||||
<option key={item.id} value={item.id}>
|
||||
{item.name}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div className="space-y-1">
|
||||
<Label htmlFor="expense-standard-filter-enabled">启用状态</Label>
|
||||
<select
|
||||
id="expense-standard-filter-enabled"
|
||||
className="select-std"
|
||||
value={enabledFilter}
|
||||
onChange={(event) => setEnabledFilter(event.target.value as FilterEnabled)}
|
||||
>
|
||||
<option value="all">全部</option>
|
||||
<option value="enabled">启用</option>
|
||||
<option value="disabled">停用</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="text-sm text-zinc-500">
|
||||
当前筛选：{selectedExpenseTypeName} / {enabledFilter === "all" ? "全部状态" : enabledFilter === "enabled" ? "仅启用" : "仅停用"}
|
||||
</div>
|
||||
|
||||
{standardsQuery.isLoading ? (
|
||||
<TableSkeleton rows={5} />
|
||||
) : standardsQuery.isError ? (
|
||||
<p className="text-sm text-red-600">费用标准加载失败，请刷新页面重试。</p>
|
||||
) : (
|
||||
<div className="rounded-lg border border-zinc-200">
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead>费用类型</TableHead>
|
||||
<TableHead>标准名称</TableHead>
|
||||
<TableHead>上限金额</TableHead>
|
||||
<TableHead>计量单位</TableHead>
|
||||
<TableHead>管控模式</TableHead>
|
||||
<TableHead>适用范围</TableHead>
|
||||
<TableHead>启用状态</TableHead>
|
||||
<TableHead className="w-32">操作</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{items.length ? (
|
||||
items.map((item) => (
|
||||
<TableRow key={item.id}>
|
||||
<TableCell>
|
||||
<div className="font-medium text-zinc-900">{item.expenseTypeName ?? item.expenseTypeId}</div>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<div className="font-medium text-zinc-900">{item.name}</div>
|
||||
<div className="text-xs text-zinc-500">{item.note || "-"}</div>
|
||||
</TableCell>
|
||||
<TableCell>¥{item.maxAmount}</TableCell>
|
||||
<TableCell>{PER_UNIT_OPTIONS.find((option) => option.value === item.perUnit)?.label ?? item.perUnit}</TableCell>
|
||||
<TableCell>
|
||||
<span className={`inline-flex rounded-full border px-2 py-0.5 text-xs font-medium ${toneClassForControlMode(item.controlMode)}`}>
|
||||
{item.controlMode === "block" ? "阻断" : "预警"}
|
||||
</span>
|
||||
</TableCell>
|
||||
<TableCell>{item.scopeLabel}</TableCell>
|
||||
<TableCell>{item.enabled ? "启用" : "停用"}</TableCell>
|
||||
<TableCell>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
<Button
|
||||
size="sm"
|
||||
type="button"
|
||||
variant="secondary"
|
||||
onClick={() => {
|
||||
setEditingItem(item);
|
||||
setDialogOpen(true);
|
||||
}}
|
||||
>
|
||||
编辑
|
||||
</Button>
|
||||
<Button
|
||||
size="sm"
|
||||
type="button"
|
||||
variant="secondary"
|
||||
onClick={() => setConfirmDelete(item)}
|
||||
>
|
||||
删除
|
||||
</Button>
|
||||
</div>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))
|
||||
) : (
|
||||
<TableRow>
|
||||
<TableCell colSpan={8} className="py-6 text-center text-sm text-zinc-500">
|
||||
当前筛选下暂无费用标准。
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
)}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<Dialog
|
||||
open={dialogOpen}
|
||||
onOpenChange={(open) => {
|
||||
setDialogOpen(open);
|
||||
if (!open) {
|
||||
setEditingItem(null);
|
||||
setError("");
|
||||
}
|
||||
}}
|
||||
>
|
||||
<DialogContent className="max-w-2xl">
|
||||
<DialogHeader>
|
||||
<DialogTitle>{editingItem ? "编辑费用标准" : "新增费用标准"}</DialogTitle>
|
||||
<DialogDescription>维护单条明细的金额上限，以及超标后是预警还是阻断提交。</DialogDescription>
|
||||
</DialogHeader>
|
||||
|
||||
<div className="grid gap-4 md:grid-cols-2">
|
||||
<div className="space-y-1">
|
||||
<Label htmlFor="expense-standard-type">费用类型</Label>
|
||||
<select
|
||||
id="expense-standard-type"
|
||||
className="select-std"
|
||||
value={form.expenseTypeId}
|
||||
onChange={(event) => setForm((current) => ({ ...current, expenseTypeId: event.target.value }))}
|
||||
disabled={Boolean(editingItem)}
|
||||
>
|
||||
<option value="">请选择费用类型</option>
|
||||
{expenseTypeOptions.map((item) => (
|
||||
<option key={item.id} value={item.id}>
|
||||
{item.name}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div className="space-y-1">
|
||||
<Label htmlFor="expense-standard-name">标准名称</Label>
|
||||
<Input
|
||||
id="expense-standard-name"
|
||||
value={form.name}
|
||||
onChange={(event) => setForm((current) => ({ ...current, name: event.target.value }))}
|
||||
placeholder="例如：日常交通费上限"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-1">
|
||||
<Label htmlFor="expense-standard-amount">上限金额</Label>
|
||||
<Input
|
||||
id="expense-standard-amount"
|
||||
value={form.maxAmount}
|
||||
onChange={(event) => setForm((current) => ({ ...current, maxAmount: event.target.value }))}
|
||||
placeholder="例如 100.00"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-1">
|
||||
<Label htmlFor="expense-standard-per-unit">计量单位</Label>
|
||||
<select
|
||||
id="expense-standard-per-unit"
|
||||
className="select-std"
|
||||
value={form.perUnit}
|
||||
onChange={(event) => setForm((current) => ({ ...current, perUnit: event.target.value as ExpenseStandardPerUnit }))}
|
||||
>
|
||||
{PER_UNIT_OPTIONS.map((item) => (
|
||||
<option key={item.value} value={item.value}>
|
||||
{item.label}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div className="space-y-1">
|
||||
<Label htmlFor="expense-standard-control-mode">管控模式</Label>
|
||||
<select
|
||||
id="expense-standard-control-mode"
|
||||
className="select-std"
|
||||
value={form.controlMode}
|
||||
onChange={(event) => setForm((current) => ({ ...current, controlMode: event.target.value as ExpenseStandardControlMode }))}
|
||||
>
|
||||
{CONTROL_MODE_OPTIONS.map((item) => (
|
||||
<option key={item.value} value={item.value}>
|
||||
{item.label}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div className="space-y-1">
|
||||
<Label htmlFor="expense-standard-scope-type">适用范围</Label>
|
||||
<select
|
||||
id="expense-standard-scope-type"
|
||||
className="select-std"
|
||||
value={form.scopeType}
|
||||
onChange={(event) =>
|
||||
setForm((current) => ({
|
||||
...current,
|
||||
scopeType: event.target.value as ExpenseStandardScopeType,
|
||||
scopeKey: event.target.value === "department" ? current.scopeKey : "",
|
||||
}))
|
||||
}
|
||||
>
|
||||
<option value="global">全局</option>
|
||||
<option value="department">指定部门</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{form.scopeType === "department" ? (
|
||||
<div className="space-y-1">
|
||||
<Label htmlFor="expense-standard-department">部门</Label>
|
||||
<select
|
||||
id="expense-standard-department"
|
||||
className="select-std"
|
||||
value={form.scopeKey}
|
||||
onChange={(event) => setForm((current) => ({ ...current, scopeKey: event.target.value }))}
|
||||
>
|
||||
<option value="">请选择部门</option>
|
||||
{departmentOptions.map((item) => (
|
||||
<option key={item.id} value={item.id}>
|
||||
{item.name}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
<div className="space-y-1 md:col-span-2">
|
||||
<Label htmlFor="expense-standard-note">备注</Label>
|
||||
<Input
|
||||
id="expense-standard-note"
|
||||
value={form.note}
|
||||
onChange={(event) => setForm((current) => ({ ...current, note: event.target.value }))}
|
||||
placeholder="可选填写规则说明"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-1 md:col-span-2">
|
||||
<Label htmlFor="expense-standard-enabled">启用状态</Label>
|
||||
<select
|
||||
id="expense-standard-enabled"
|
||||
className="select-std max-w-xs"
|
||||
value={form.enabled ? "true" : "false"}
|
||||
onChange={(event) => setForm((current) => ({ ...current, enabled: event.target.value === "true" }))}
|
||||
>
|
||||
<option value="true">启用</option>
|
||||
<option value="false">停用</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<DialogFooter>
|
||||
<Button type="button" variant="secondary" onClick={() => setDialogOpen(false)}>
|
||||
取消
|
||||
</Button>
|
||||
<Button type="button" disabled={!canSubmit || saveMutation.isPending} onClick={() => saveMutation.mutate()}>
|
||||
{saveMutation.isPending ? "保存中..." : editingItem ? "保存修改" : "创建标准"}
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
|
||||
<ConfirmDialog
|
||||
open={Boolean(confirmDelete)}
|
||||
onOpenChange={(open) => {
|
||||
if (!open) {
|
||||
setConfirmDelete(null);
|
||||
}
|
||||
}}
|
||||
title="确认删除该费用标准？"
|
||||
description={confirmDelete ? `删除后会将“${confirmDelete.name}”停用，不会物理移除历史记录。` : undefined}
|
||||
confirmLabel="删除"
|
||||
variant="destructive"
|
||||
onConfirm={async () => {
|
||||
if (confirmDelete) {
|
||||
await deleteMutation.mutateAsync(confirmDelete.id);
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default ExpenseStandardsPage;
|
||||
在新工单中引用
屏蔽一个用户