统一业务列表 Ant Design 风格（05-31-unify-business-list-ant-design）
这个提交包含在：
@@ -26,8 +26,19 @@ import { PageHeader } from "../components/common/PageHeader";
|
||||
import { StatusBadge } from "../components/common/StatusBadge";
|
||||
import { DateTextInput } from "../components/common/DateTextInput";
|
||||
import { WorkspaceNotice } from "../components/patterns/ListWorkspace";
|
||||
import {
|
||||
BusinessListToolbar,
|
||||
BusinessMobileList,
|
||||
BusinessTable,
|
||||
} from "../components/patterns/BusinessListTemplate";
|
||||
import { PageScaffold } from "../components/patterns/PageScaffold";
|
||||
import { Button } from "../components/ui/button";
|
||||
import {
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuTrigger,
|
||||
} from "../components/ui/dropdown-menu";
|
||||
import { Input } from "../components/ui/input";
|
||||
import { Label } from "../components/ui/label";
|
||||
import { Textarea } from "../components/ui/textarea";
|
||||
@@ -206,6 +217,7 @@ export function ContractsRegistryPage() {
|
||||
const [showExpiring, setShowExpiring] = useState(false);
|
||||
const [showTrialData, setShowTrialData] = useState(false);
|
||||
const [showLedgerTools, setShowLedgerTools] = useState(false);
|
||||
const [showEditor, setShowEditor] = useState(false);
|
||||
const [confirmExportFormat, setConfirmExportFormat] = useState<ContractRegistryExportFormat | null>(null);
|
||||
const [confirmStatusTarget, setConfirmStatusTarget] = useState<ContractRegistryItem | null>(null);
|
||||
|
||||
@@ -264,9 +276,9 @@ export function ContractsRegistryPage() {
|
||||
};
|
||||
|
||||
const openEditor = (item: ContractRegistryItem) => {
|
||||
setShowLedgerTools(true);
|
||||
setEditorId(item.id);
|
||||
setEditor(loadEditorFromItem(item));
|
||||
setShowEditor(true);
|
||||
};
|
||||
|
||||
const saveMutation = useMutation({
|
||||
@@ -279,6 +291,7 @@ export function ContractsRegistryPage() {
|
||||
},
|
||||
onSuccess: async () => {
|
||||
await refreshAll();
|
||||
setShowEditor(false);
|
||||
resetEditor();
|
||||
toast.success(editorId ? "合同台账已更新" : "合同台账已创建");
|
||||
},
|
||||
@@ -323,10 +336,19 @@ export function ContractsRegistryPage() {
|
||||
actions={
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{initialProjectId ? (
|
||||
<Button asChild variant="secondary" type="button">
|
||||
<Link to="/projects">返回项目</Link>
|
||||
</Button>
|
||||
<Button asChild variant="secondary" type="button">
|
||||
<Link to="/projects">返回项目</Link>
|
||||
</Button>
|
||||
) : null}
|
||||
<Button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
resetEditor();
|
||||
setShowEditor(true);
|
||||
}}
|
||||
>
|
||||
新增合同
|
||||
</Button>
|
||||
<Button type="button" variant={showLedgerTools ? "default" : "secondary"} onClick={() => setShowLedgerTools((value) => !value)}>
|
||||
台账工具
|
||||
</Button>
|
||||
@@ -399,21 +421,34 @@ export function ContractsRegistryPage() {
|
||||
) : null}
|
||||
|
||||
<div className="grid gap-6">
|
||||
{showLedgerTools || editorId ? (
|
||||
<div className="card-std space-y-4 p-6" data-testid="contracts-editor-panel">
|
||||
<div className="flex items-start justify-between gap-3">
|
||||
<div>
|
||||
<h3 className="text-base font-semibold text-zinc-900">{editorId ? "编辑合同台账" : "新建合同台账"}</h3>
|
||||
<p className="mt-1 text-sm text-zinc-500">
|
||||
补齐合同类型、金额、签署/生效/到期日期，续约将自动创建新的草稿合同。
|
||||
</p>
|
||||
{showEditor ? (
|
||||
<div className="card-std space-y-4 p-6" data-testid="contracts-editor-panel">
|
||||
<div className="flex items-start justify-between gap-3">
|
||||
<div>
|
||||
<h3 className="text-base font-semibold text-zinc-900">{editorId ? "编辑合同台账" : "新建合同台账"}</h3>
|
||||
<p className="mt-1 text-sm text-zinc-500">
|
||||
补齐合同类型、金额、签署/生效/到期日期，续约将自动创建新的草稿合同。
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{editorId ? (
|
||||
<Button type="button" variant="secondary" size="sm" onClick={resetEditor}>
|
||||
切换到新建
|
||||
</Button>
|
||||
) : null}
|
||||
<Button
|
||||
type="button"
|
||||
variant="secondary"
|
||||
size="sm"
|
||||
onClick={() => {
|
||||
setShowEditor(false);
|
||||
resetEditor();
|
||||
}}
|
||||
>
|
||||
关闭
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
{editorId ? (
|
||||
<Button type="button" variant="secondary" size="sm" onClick={resetEditor}>
|
||||
切换到新建
|
||||
</Button>
|
||||
) : null}
|
||||
</div>
|
||||
|
||||
{editingItem?.status === "expired" ? (
|
||||
<div className="rounded-lg border border-amber-200 bg-amber-50 px-3 py-2 text-sm text-amber-900">
|
||||
@@ -646,103 +681,96 @@ export function ContractsRegistryPage() {
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
<div className="card-std space-y-4 p-6">
|
||||
<div className="flex flex-col gap-4 xl:flex-row xl:items-start xl:justify-between">
|
||||
<div>
|
||||
<h3 className="text-base font-semibold text-zinc-900">台账列表</h3>
|
||||
<div className="mt-1 text-sm text-zinc-500">{filters.projectId ? "已按项目过滤" : "显示全部可见合同"}</div>
|
||||
</div>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{!showLedgerTools && !editorId ? (
|
||||
<Button type="button" variant="secondary" onClick={() => setShowLedgerTools(true)}>
|
||||
新建合同
|
||||
<>
|
||||
<BusinessListToolbar
|
||||
actions={
|
||||
<>
|
||||
<Button
|
||||
type="button"
|
||||
variant="secondary"
|
||||
onClick={() => {
|
||||
setFilters({
|
||||
projectId: initialProjectId,
|
||||
status: "",
|
||||
contractType: "",
|
||||
counterpartyName: "",
|
||||
expiryDateFrom: "",
|
||||
expiryDateTo: "",
|
||||
});
|
||||
setShowEditor(false);
|
||||
setEditorId(null);
|
||||
setEditor(buildEmptyEditor(initialProjectId));
|
||||
}}
|
||||
>
|
||||
重置筛选
|
||||
</Button>
|
||||
) : null}
|
||||
<Button
|
||||
type="button"
|
||||
variant="secondary"
|
||||
onClick={() => {
|
||||
setFilters({
|
||||
projectId: initialProjectId,
|
||||
status: "",
|
||||
contractType: "",
|
||||
counterpartyName: "",
|
||||
expiryDateFrom: "",
|
||||
expiryDateTo: "",
|
||||
});
|
||||
setEditorId(null);
|
||||
setEditor(buildEmptyEditor(initialProjectId));
|
||||
}}
|
||||
>
|
||||
重置筛选
|
||||
</Button>
|
||||
{showLedgerTools ? (
|
||||
<Button type="button" variant={showTrialData ? "default" : "secondary"} onClick={() => setShowTrialData((value) => !value)}>
|
||||
{showTrialData ? "隐藏测试数据" : "显示测试数据"}
|
||||
</Button>
|
||||
) : null}
|
||||
</div>
|
||||
</div>
|
||||
{showLedgerTools ? (
|
||||
<Button type="button" variant={showTrialData ? "default" : "secondary"} onClick={() => setShowTrialData((value) => !value)}>
|
||||
{showTrialData ? "隐藏测试数据" : "显示测试数据"}
|
||||
</Button>
|
||||
) : null}
|
||||
</>
|
||||
}
|
||||
>
|
||||
<div className="grid gap-3 xl:grid-cols-[minmax(180px,1fr)_160px_160px_minmax(220px,1fr)]">
|
||||
<div>
|
||||
<select
|
||||
className="select-std"
|
||||
aria-label="项目"
|
||||
value={filters.projectId}
|
||||
onChange={(event) => setFilters((current) => ({ ...current, projectId: event.target.value }))}
|
||||
>
|
||||
<option value="">全部项目</option>
|
||||
{projectOptions.map((item) => (
|
||||
<option key={item.id} value={item.id}>
|
||||
{item.projectNo} · {item.name}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div className="grid gap-3 xl:grid-cols-[minmax(180px,1fr)_160px_160px_minmax(220px,1fr)]">
|
||||
<div>
|
||||
<select
|
||||
className="select-std"
|
||||
aria-label="项目"
|
||||
value={filters.projectId}
|
||||
onChange={(event) => setFilters((current) => ({ ...current, projectId: event.target.value }))}
|
||||
>
|
||||
<option value="">全部项目</option>
|
||||
{projectOptions.map((item) => (
|
||||
<option key={item.id} value={item.id}>
|
||||
{item.projectNo} · {item.name}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<select
|
||||
className="select-std"
|
||||
aria-label="状态"
|
||||
value={filters.status}
|
||||
onChange={(event) => setFilters((current) => ({ ...current, status: event.target.value as FiltersState["status"] }))}
|
||||
>
|
||||
<option value="">全部状态</option>
|
||||
{FILTER_STATUS_OPTIONS.map((item) => (
|
||||
<option key={item.value} value={item.value}>
|
||||
{item.label}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<select
|
||||
className="select-std"
|
||||
aria-label="状态"
|
||||
value={filters.status}
|
||||
onChange={(event) => setFilters((current) => ({ ...current, status: event.target.value as FiltersState["status"] }))}
|
||||
>
|
||||
<option value="">全部状态</option>
|
||||
{FILTER_STATUS_OPTIONS.map((item) => (
|
||||
<option key={item.value} value={item.value}>
|
||||
{item.label}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<select
|
||||
className="select-std"
|
||||
aria-label="合同类型"
|
||||
value={filters.contractType}
|
||||
onChange={(event) => setFilters((current) => ({ ...current, contractType: event.target.value as FiltersState["contractType"] }))}
|
||||
>
|
||||
<option value="">全部类型</option>
|
||||
{CONTRACT_TYPE_OPTIONS.map((item) => (
|
||||
<option key={item} value={item}>
|
||||
{contractTypeLabel(item)}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<select
|
||||
className="select-std"
|
||||
aria-label="合同类型"
|
||||
value={filters.contractType}
|
||||
onChange={(event) => setFilters((current) => ({ ...current, contractType: event.target.value as FiltersState["contractType"] }))}
|
||||
>
|
||||
<option value="">全部类型</option>
|
||||
{CONTRACT_TYPE_OPTIONS.map((item) => (
|
||||
<option key={item} value={item}>
|
||||
{contractTypeLabel(item)}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
<div>
|
||||
<Input
|
||||
aria-label="相对方"
|
||||
value={filters.counterpartyName}
|
||||
onChange={(event) => setFilters((current) => ({ ...current, counterpartyName: event.target.value }))}
|
||||
placeholder="搜索相对方"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Input
|
||||
aria-label="相对方"
|
||||
value={filters.counterpartyName}
|
||||
onChange={(event) => setFilters((current) => ({ ...current, counterpartyName: event.target.value }))}
|
||||
placeholder="搜索相对方"
|
||||
/>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</BusinessListToolbar>
|
||||
|
||||
{contractsQuery.isLoading ? <div className="text-sm text-zinc-500">加载中...</div> : null}
|
||||
{contractsQuery.isError ? (
|
||||
@@ -755,79 +783,114 @@ export function ContractsRegistryPage() {
|
||||
</WorkspaceNotice>
|
||||
) : null}
|
||||
|
||||
<div className="space-y-3">
|
||||
<BusinessMobileList>
|
||||
{visibleContracts.map((item) => (
|
||||
<div key={item.id} className="detail-evidence-card bg-white" data-testid="contracts-registry-row">
|
||||
<div className="flex flex-col gap-4 md:flex-row md:items-start md:justify-between">
|
||||
<div className="space-y-2">
|
||||
<div className="flex flex-wrap items-center gap-3">
|
||||
<div className="font-semibold text-zinc-900">{item.contractNo}</div>
|
||||
<StatusBadge status={item.status} label={contractStatusLabel(item.status)} />
|
||||
<span className="rounded-full bg-zinc-100 px-2 py-1 text-xs text-zinc-600">
|
||||
{confidentialityLabel(item.confidentialityLevel)}
|
||||
</span>
|
||||
</div>
|
||||
<div className="text-sm text-zinc-900">{item.counterpartyName}</div>
|
||||
<div className="text-sm text-zinc-600">{item.summary}</div>
|
||||
<div className="text-xs text-zinc-500">
|
||||
{contractTypeLabel(item.contractType)}
|
||||
{item.amount ? ` · ${item.amount} ${item.currency}` : " · 金额未录入"}
|
||||
{item.expiryDate ? ` · 到期日 ${formatDisplayDate(item.expiryDate)}` : " · 未设置到期日"}
|
||||
</div>
|
||||
<div className="text-xs text-zinc-500">
|
||||
项目：{item.project ? `${item.project.projectNo} · ${item.project.name}` : "未关联"} · 责任人：
|
||||
{item.owner?.name ?? "-"}
|
||||
</div>
|
||||
<div className="text-xs text-zinc-500">
|
||||
签署：{formatDisplayDate(item.signedDate)} · 生效：{formatDisplayDate(item.effectiveDate)} · 归档：{item.archiveLocation}
|
||||
{item.offlineArchiveNo ? ` · 离线档案号 ${item.offlineArchiveNo}` : ""}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-wrap gap-2 md:max-w-[260px] md:justify-end">
|
||||
<Button
|
||||
type="button"
|
||||
size="sm"
|
||||
variant="secondary"
|
||||
onClick={() => {
|
||||
openEditor(item);
|
||||
}}
|
||||
>
|
||||
编辑
|
||||
</Button>
|
||||
<Button
|
||||
type="button"
|
||||
size="sm"
|
||||
variant="secondary"
|
||||
disabled={renewMutation.isPending || !["active", "expired"].includes(item.status)}
|
||||
onClick={() => renewMutation.mutate(item)}
|
||||
>
|
||||
续约
|
||||
</Button>
|
||||
{item.project ? (
|
||||
<Button asChild size="sm" variant="secondary" type="button">
|
||||
<Link to={`/projects/${item.project.id}`}>查看项目</Link>
|
||||
</Button>
|
||||
) : null}
|
||||
<Button
|
||||
type="button"
|
||||
size="sm"
|
||||
variant="secondary"
|
||||
disabled={toggleStatusMutation.isPending}
|
||||
onClick={() => setConfirmStatusTarget(item)}
|
||||
>
|
||||
{item.persistedStatus === "archived" ? "恢复生效" : "归档"}
|
||||
</Button>
|
||||
<article key={item.id} className="rounded-lg border border-zinc-200 bg-white p-3 text-sm" data-testid="contracts-registry-row">
|
||||
<div className="flex items-start justify-between gap-3">
|
||||
<div className="min-w-0">
|
||||
<div className="truncate font-semibold text-zinc-900">{item.contractNo}</div>
|
||||
<div className="mt-1 truncate text-zinc-600">{item.counterpartyName}</div>
|
||||
</div>
|
||||
<StatusBadge status={item.status} label={contractStatusLabel(item.status)} />
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-2 text-xs text-zinc-500">
|
||||
{contractTypeLabel(item.contractType)}
|
||||
{item.amount ? ` · ${item.amount} ${item.currency}` : ""}
|
||||
{item.expiryDate ? ` · ${formatDisplayDate(item.expiryDate)}` : ""}
|
||||
</div>
|
||||
<Button className="mt-3" type="button" size="sm" variant="secondary" onClick={() => openEditor(item)}>
|
||||
编辑
|
||||
</Button>
|
||||
</article>
|
||||
))}
|
||||
|
||||
{!contractsQuery.isLoading && !visibleContracts.length ? (
|
||||
<div className="text-sm text-zinc-500">暂无符合筛选条件的合同台账。</div>
|
||||
<div className="rounded-lg border border-zinc-200 bg-white p-4 text-sm text-zinc-500">暂无合同台账</div>
|
||||
) : null}
|
||||
</div>
|
||||
</div>
|
||||
</BusinessMobileList>
|
||||
|
||||
<BusinessTable testId="contracts-registry-table">
|
||||
<thead className="table-header">
|
||||
<tr>
|
||||
<th className="table-th">合同</th>
|
||||
<th className="table-th">相对方</th>
|
||||
<th className="table-th">项目 / 责任人</th>
|
||||
<th className="table-th">金额 / 日期</th>
|
||||
<th className="table-th">状态</th>
|
||||
<th className="table-th w-32">操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-zinc-50">
|
||||
{visibleContracts.length ? (
|
||||
visibleContracts.map((item) => (
|
||||
<tr key={item.id} className="table-row" data-testid="contracts-registry-row">
|
||||
<td className="table-td">
|
||||
<div className="font-semibold text-zinc-900">{item.contractNo}</div>
|
||||
<div className="text-xs text-zinc-500">{contractTypeLabel(item.contractType)}</div>
|
||||
<div className="text-xs text-zinc-500">{confidentialityLabel(item.confidentialityLevel)}</div>
|
||||
</td>
|
||||
<td className="table-td">
|
||||
<div className="font-medium text-zinc-900">{item.counterpartyName}</div>
|
||||
<div className="line-clamp-2 text-xs text-zinc-500">{item.summary}</div>
|
||||
</td>
|
||||
<td className="table-td">
|
||||
<div className="font-medium text-zinc-900">
|
||||
{item.project ? `${item.project.projectNo} · ${item.project.name}` : "-"}
|
||||
</div>
|
||||
<div className="text-xs text-zinc-500">{item.owner?.name ?? "-"}</div>
|
||||
</td>
|
||||
<td className="table-td">
|
||||
<div className="font-semibold text-zinc-900">{item.amount ? `${item.amount} ${item.currency}` : "-"}</div>
|
||||
<div className="text-xs text-zinc-500">到期 {formatDisplayDate(item.expiryDate)}</div>
|
||||
<div className="text-xs text-zinc-500">签署 {formatDisplayDate(item.signedDate)}</div>
|
||||
</td>
|
||||
<td className="table-td">
|
||||
<StatusBadge status={item.status} label={contractStatusLabel(item.status)} />
|
||||
</td>
|
||||
<td className="table-td">
|
||||
<div className="flex flex-wrap gap-2">
|
||||
<Button type="button" size="sm" variant="secondary" onClick={() => openEditor(item)}>
|
||||
编辑
|
||||
</Button>
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button type="button" size="sm" variant="secondary">
|
||||
更多
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="end">
|
||||
<DropdownMenuItem
|
||||
disabled={renewMutation.isPending || !["active", "expired"].includes(item.status)}
|
||||
onSelect={() => renewMutation.mutate(item)}
|
||||
>
|
||||
续约
|
||||
</DropdownMenuItem>
|
||||
{item.project ? (
|
||||
<DropdownMenuItem asChild>
|
||||
<Link to={`/projects/${item.project.id}`}>查看项目</Link>
|
||||
</DropdownMenuItem>
|
||||
) : null}
|
||||
<DropdownMenuItem
|
||||
disabled={toggleStatusMutation.isPending}
|
||||
onSelect={() => setConfirmStatusTarget(item)}
|
||||
>
|
||||
{item.persistedStatus === "archived" ? "恢复生效" : "归档"}
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
))
|
||||
) : (
|
||||
<tr>
|
||||
<td className="py-8 text-center text-sm text-zinc-500" colSpan={6}>
|
||||
暂无合同台账
|
||||
</td>
|
||||
</tr>
|
||||
)}
|
||||
</tbody>
|
||||
</BusinessTable>
|
||||
</>
|
||||
</div>
|
||||
<ActionConfirmDialog
|
||||
open={Boolean(confirmExportFormat)}
|
||||
|
||||
在新工单中引用
屏蔽一个用户