759 行
29 KiB
TypeScript
759 行
29 KiB
TypeScript
import { useState } from "react";
|
|
import { Link, useSearchParams } from "react-router-dom";
|
|
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
|
|
import {
|
|
createContractRegistry,
|
|
exportContractsRegistry,
|
|
fetchContractsRegistry,
|
|
fetchExpiringContracts,
|
|
patchContractRegistry,
|
|
renewContractRegistry,
|
|
type ContractRegistryExportFormat,
|
|
type ContractRegistryFilters,
|
|
type ContractRegistryItem,
|
|
type ContractRegistryPersistedStatus,
|
|
type ContractRegistryStatus,
|
|
type ContractRegistryType,
|
|
} from "../api/contractsRegistry";
|
|
import { fetchEmployees } from "../api/employees";
|
|
import { mapApiErrorMessage } from "../api/errorMessages";
|
|
import { fetchProjects, type ConfidentialityLevel } from "../api/projects";
|
|
import { isApiError } from "../api/types";
|
|
import { PageHeader } from "../components/common/PageHeader";
|
|
import { StatusBadge } from "../components/common/StatusBadge";
|
|
import { Button } from "../components/ui/button";
|
|
import { Input } from "../components/ui/input";
|
|
import { Label } from "../components/ui/label";
|
|
import { Textarea } from "../components/ui/textarea";
|
|
import { downloadBlob } from "../lib/download";
|
|
import { toast } from "sonner";
|
|
|
|
const CONFIDENTIALITY_OPTIONS: ConfidentialityLevel[] = ["public", "internal", "confidential", "restricted"];
|
|
const CONTRACT_TYPE_OPTIONS: ContractRegistryType[] = ["purchase", "sales", "service", "framework", "other"];
|
|
const FILTER_STATUS_OPTIONS: Array<{ value: ContractRegistryStatus; label: string }> = [
|
|
{ value: "active", label: "生效中" },
|
|
{ value: "expired", label: "已过期" },
|
|
{ value: "draft", label: "草稿" },
|
|
{ value: "archived", label: "已归档" },
|
|
];
|
|
const EDITOR_STATUS_OPTIONS: Array<{ value: ContractRegistryPersistedStatus; label: string }> = [
|
|
{ value: "active", label: "active" },
|
|
{ value: "draft", label: "draft" },
|
|
{ value: "archived", label: "archived" },
|
|
];
|
|
const AMOUNT_PATTERN = /^\d{1,12}(\.\d{1,2})?$/;
|
|
const EXPIRING_DAYS = 30;
|
|
|
|
type FiltersState = {
|
|
projectId: string;
|
|
status: "" | ContractRegistryStatus;
|
|
contractType: "" | ContractRegistryType;
|
|
counterpartyName: string;
|
|
expiryDateFrom: string;
|
|
expiryDateTo: string;
|
|
};
|
|
|
|
type EditorState = {
|
|
contractNo: string;
|
|
projectId: string;
|
|
contractType: ContractRegistryType;
|
|
counterpartyName: string;
|
|
summary: string;
|
|
amount: string;
|
|
currency: string;
|
|
signedDate: string;
|
|
effectiveDate: string;
|
|
expiryDate: string;
|
|
confidentialityLevel: ConfidentialityLevel;
|
|
archiveLocation: string;
|
|
offlineArchiveNo: string;
|
|
ownerEmployeeId: string;
|
|
status: ContractRegistryPersistedStatus;
|
|
};
|
|
|
|
function resolveError(error: unknown, fallback = "操作失败") {
|
|
if (isApiError(error)) {
|
|
return `${error.code}: ${mapApiErrorMessage(error.code, error.details, error.message)}`;
|
|
}
|
|
return error instanceof Error ? error.message : fallback;
|
|
}
|
|
|
|
function confidentialityLabel(value: ConfidentialityLevel) {
|
|
if (value === "public") return "公开";
|
|
if (value === "internal") return "内部";
|
|
if (value === "confidential") return "机密";
|
|
return "限制";
|
|
}
|
|
|
|
function contractTypeLabel(value: ContractRegistryType) {
|
|
if (value === "purchase") return "采购合同";
|
|
if (value === "sales") return "销售合同";
|
|
if (value === "service") return "服务合同";
|
|
if (value === "framework") return "框架协议";
|
|
return "其他";
|
|
}
|
|
|
|
function buildEmptyEditor(projectId = ""): EditorState {
|
|
return {
|
|
contractNo: "",
|
|
projectId,
|
|
contractType: "other",
|
|
counterpartyName: "",
|
|
summary: "",
|
|
amount: "",
|
|
currency: "CNY",
|
|
signedDate: "",
|
|
effectiveDate: "",
|
|
expiryDate: "",
|
|
confidentialityLevel: "internal",
|
|
archiveLocation: "",
|
|
offlineArchiveNo: "",
|
|
ownerEmployeeId: "",
|
|
status: "active",
|
|
};
|
|
}
|
|
|
|
function buildFiltersPayload(filters: FiltersState): ContractRegistryFilters {
|
|
return {
|
|
...(filters.projectId ? { projectId: filters.projectId } : {}),
|
|
...(filters.status ? { status: filters.status } : {}),
|
|
...(filters.contractType ? { contractType: filters.contractType } : {}),
|
|
...(filters.counterpartyName.trim() ? { counterpartyName: filters.counterpartyName.trim() } : {}),
|
|
...(filters.expiryDateFrom ? { expiryDateFrom: filters.expiryDateFrom } : {}),
|
|
...(filters.expiryDateTo ? { expiryDateTo: filters.expiryDateTo } : {}),
|
|
};
|
|
}
|
|
|
|
function buildSavePayload(form: EditorState) {
|
|
return {
|
|
contractNo: form.contractNo.trim(),
|
|
projectId: form.projectId || null,
|
|
contractType: form.contractType,
|
|
counterpartyName: form.counterpartyName.trim(),
|
|
summary: form.summary.trim(),
|
|
amount: form.amount.trim() ? form.amount.trim() : null,
|
|
currency: form.currency.trim().toUpperCase(),
|
|
signedDate: form.signedDate || null,
|
|
effectiveDate: form.effectiveDate || null,
|
|
expiryDate: form.expiryDate || null,
|
|
confidentialityLevel: form.confidentialityLevel,
|
|
archiveLocation: form.archiveLocation.trim(),
|
|
offlineArchiveNo: form.offlineArchiveNo.trim() || null,
|
|
ownerEmployeeId: form.ownerEmployeeId || undefined,
|
|
status: form.status,
|
|
};
|
|
}
|
|
|
|
function loadEditorFromItem(item: ContractRegistryItem): EditorState {
|
|
return {
|
|
contractNo: item.contractNo,
|
|
projectId: item.projectId ?? "",
|
|
contractType: item.contractType,
|
|
counterpartyName: item.counterpartyName,
|
|
summary: item.summary,
|
|
amount: item.amount ?? "",
|
|
currency: item.currency,
|
|
signedDate: item.signedDate ?? "",
|
|
effectiveDate: item.effectiveDate ?? "",
|
|
expiryDate: item.expiryDate ?? "",
|
|
confidentialityLevel: item.confidentialityLevel,
|
|
archiveLocation: item.archiveLocation,
|
|
offlineArchiveNo: item.offlineArchiveNo ?? "",
|
|
ownerEmployeeId: item.ownerEmployeeId,
|
|
status: item.persistedStatus,
|
|
};
|
|
}
|
|
|
|
function nextPersistedStatus(item: ContractRegistryItem): ContractRegistryPersistedStatus {
|
|
return item.persistedStatus === "archived" ? "active" : "archived";
|
|
}
|
|
|
|
export function ContractsRegistryPage() {
|
|
const queryClient = useQueryClient();
|
|
const [searchParams] = useSearchParams();
|
|
const initialProjectId = searchParams.get("projectId") ?? "";
|
|
|
|
const [filters, setFilters] = useState<FiltersState>({
|
|
projectId: initialProjectId,
|
|
status: "",
|
|
contractType: "",
|
|
counterpartyName: "",
|
|
expiryDateFrom: "",
|
|
expiryDateTo: "",
|
|
});
|
|
const [editorId, setEditorId] = useState<string | null>(null);
|
|
const [editor, setEditor] = useState<EditorState>(() => buildEmptyEditor(initialProjectId));
|
|
const [showExpiring, setShowExpiring] = useState(false);
|
|
|
|
const filterPayload = buildFiltersPayload(filters);
|
|
const contractsQuery = useQuery({
|
|
queryKey: ["contracts-registry", filterPayload],
|
|
queryFn: () => fetchContractsRegistry(filterPayload),
|
|
});
|
|
const expiringQuery = useQuery({
|
|
queryKey: ["contracts-registry", "expiring", EXPIRING_DAYS],
|
|
queryFn: () => fetchExpiringContracts(EXPIRING_DAYS),
|
|
});
|
|
const projectsQuery = useQuery({
|
|
queryKey: ["projects", "contracts-page"],
|
|
queryFn: () => fetchProjects({}),
|
|
});
|
|
const employeesQuery = useQuery({
|
|
queryKey: ["employees", "contracts-page"],
|
|
queryFn: () => fetchEmployees({ page: 1, pageSize: 100, status: "active" }),
|
|
});
|
|
|
|
const projectOptions = projectsQuery.data?.items ?? [];
|
|
const employeeOptions = employeesQuery.data?.items ?? [];
|
|
const contracts = contractsQuery.data?.items ?? [];
|
|
const expiringItems = expiringQuery.data?.items ?? [];
|
|
const editingItem = editorId ? contracts.find((item) => item.id === editorId) ?? null : null;
|
|
const amountInvalid = Boolean(editor.amount.trim()) && !AMOUNT_PATTERN.test(editor.amount.trim());
|
|
|
|
const refreshAll = async () => {
|
|
await Promise.all([
|
|
queryClient.invalidateQueries({ queryKey: ["contracts-registry"] }),
|
|
queryClient.invalidateQueries({ queryKey: ["projects"] }),
|
|
]);
|
|
};
|
|
|
|
const resetEditor = () => {
|
|
setEditorId(null);
|
|
setEditor(buildEmptyEditor(filters.projectId));
|
|
};
|
|
|
|
const saveMutation = useMutation({
|
|
mutationFn: async () => {
|
|
if (editorId) {
|
|
return patchContractRegistry(editorId, buildSavePayload(editor));
|
|
}
|
|
return createContractRegistry(buildSavePayload(editor));
|
|
},
|
|
onSuccess: async () => {
|
|
await refreshAll();
|
|
resetEditor();
|
|
toast.success(editorId ? "合同台账已更新" : "合同台账已创建");
|
|
},
|
|
onError: (error) => toast.error(resolveError(error, editorId ? "更新合同台账失败" : "创建合同台账失败")),
|
|
});
|
|
|
|
const toggleStatusMutation = useMutation({
|
|
mutationFn: (item: ContractRegistryItem) => patchContractRegistry(item.id, { status: nextPersistedStatus(item) }),
|
|
onSuccess: async () => {
|
|
await refreshAll();
|
|
toast.success("合同状态已更新");
|
|
},
|
|
onError: (error) => toast.error(resolveError(error, "更新合同状态失败")),
|
|
});
|
|
|
|
const renewMutation = useMutation({
|
|
mutationFn: (item: ContractRegistryItem) => renewContractRegistry(item.id),
|
|
onSuccess: async () => {
|
|
await refreshAll();
|
|
toast.success("合同已续约，新的草稿合同已创建");
|
|
},
|
|
onError: (error) => toast.error(resolveError(error, "续约合同失败")),
|
|
});
|
|
|
|
const exportMutation = useMutation({
|
|
mutationFn: (format: ContractRegistryExportFormat) =>
|
|
exportContractsRegistry({
|
|
...filterPayload,
|
|
format,
|
|
}),
|
|
onSuccess: (response, format) => {
|
|
downloadBlob(response.blob, response.filename ?? `contracts-registry.${format}`);
|
|
toast.success(`合同台账已导出为 ${format.toUpperCase()}`);
|
|
},
|
|
onError: (error) => toast.error(resolveError(error, "导出合同台账失败")),
|
|
});
|
|
|
|
return (
|
|
<div className="space-y-6">
|
|
<PageHeader
|
|
title="合同台账"
|
|
subtitle="维护合同元数据、生命周期、到期预警与导出，不在 OA 存放涉密正文附件。"
|
|
actions={
|
|
<div className="flex flex-wrap gap-2">
|
|
<Button
|
|
type="button"
|
|
variant="secondary"
|
|
disabled={exportMutation.isPending}
|
|
onClick={() => exportMutation.mutate("csv")}
|
|
>
|
|
导出 CSV
|
|
</Button>
|
|
<Button
|
|
type="button"
|
|
variant="secondary"
|
|
disabled={exportMutation.isPending}
|
|
onClick={() => exportMutation.mutate("xlsx")}
|
|
>
|
|
导出 Excel
|
|
</Button>
|
|
<Button asChild variant="secondary" type="button">
|
|
<Link to="/projects">返回项目</Link>
|
|
</Button>
|
|
</div>
|
|
}
|
|
/>
|
|
|
|
<div className="card-std space-y-4 p-6">
|
|
<div className="flex flex-col gap-4 lg:flex-row lg:items-start lg:justify-between">
|
|
<div>
|
|
<div className="text-sm text-zinc-500">到期预警</div>
|
|
<div className="mt-1 text-3xl font-semibold text-zinc-900">{expiringQuery.data?.total ?? 0}</div>
|
|
<div className="text-sm text-zinc-600">份合同将在 {EXPIRING_DAYS} 天内到期</div>
|
|
</div>
|
|
<div className="flex flex-wrap gap-2">
|
|
<Button
|
|
type="button"
|
|
variant="secondary"
|
|
disabled={expiringQuery.isLoading}
|
|
onClick={() => setShowExpiring((value) => !value)}
|
|
>
|
|
{showExpiring ? "收起到期列表" : "展开到期列表"}
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
|
|
{expiringQuery.isError ? (
|
|
<div className="text-sm text-red-600">{resolveError(expiringQuery.error, "加载到期预警失败")}</div>
|
|
) : null}
|
|
|
|
{showExpiring ? (
|
|
<div className="space-y-3 border-t border-zinc-200 pt-4">
|
|
{expiringItems.map((item) => (
|
|
<div
|
|
key={item.id}
|
|
className="flex flex-col gap-2 rounded-lg border border-amber-200 bg-amber-50/70 p-4 lg:flex-row lg:items-center lg:justify-between"
|
|
>
|
|
<div>
|
|
<div className="font-medium text-zinc-900">
|
|
{item.contractNo} · {item.counterpartyName}
|
|
</div>
|
|
<div className="mt-1 text-sm text-zinc-600">
|
|
{contractTypeLabel(item.contractType)} · 到期日 {item.expiryDate ?? "-"} · 责任人 {item.owner?.name ?? "-"}
|
|
</div>
|
|
</div>
|
|
<div className="flex gap-2">
|
|
<Button
|
|
type="button"
|
|
size="sm"
|
|
variant="secondary"
|
|
onClick={() => {
|
|
setEditorId(item.id);
|
|
setEditor(loadEditorFromItem(item));
|
|
}}
|
|
>
|
|
编辑
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
))}
|
|
{!expiringQuery.isLoading && !expiringItems.length ? (
|
|
<div className="text-sm text-zinc-500">未来 {EXPIRING_DAYS} 天内暂无即将到期合同。</div>
|
|
) : null}
|
|
</div>
|
|
) : null}
|
|
</div>
|
|
|
|
<div className="grid gap-6 xl:grid-cols-[400px,minmax(0,1fr)]">
|
|
<div className="card-std space-y-4 p-6">
|
|
<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>
|
|
{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">
|
|
当前合同因到期日已过，列表状态显示为“已过期”；保存时仍以数据库状态 {editingItem.persistedStatus} 持久化。
|
|
</div>
|
|
) : null}
|
|
|
|
<div className="space-y-2">
|
|
<Label>合同编号</Label>
|
|
<Input
|
|
value={editor.contractNo}
|
|
onChange={(event) => setEditor((current) => ({ ...current, contractNo: event.target.value }))}
|
|
placeholder="例如 HT-2026-001"
|
|
/>
|
|
</div>
|
|
|
|
<div className="grid gap-3 md:grid-cols-2">
|
|
<div className="space-y-2">
|
|
<Label>合同类型</Label>
|
|
<select
|
|
className="select-std"
|
|
value={editor.contractType}
|
|
onChange={(event) => setEditor((current) => ({ ...current, contractType: event.target.value as ContractRegistryType }))}
|
|
>
|
|
{CONTRACT_TYPE_OPTIONS.map((item) => (
|
|
<option key={item} value={item}>
|
|
{contractTypeLabel(item)}
|
|
</option>
|
|
))}
|
|
</select>
|
|
</div>
|
|
<div className="space-y-2">
|
|
<Label>状态</Label>
|
|
<select
|
|
className="select-std"
|
|
value={editor.status}
|
|
onChange={(event) => setEditor((current) => ({ ...current, status: event.target.value as ContractRegistryPersistedStatus }))}
|
|
>
|
|
{EDITOR_STATUS_OPTIONS.map((item) => (
|
|
<option key={item.value} value={item.value}>
|
|
{item.label}
|
|
</option>
|
|
))}
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<Label>关联项目</Label>
|
|
<select
|
|
className="select-std"
|
|
value={editor.projectId}
|
|
onChange={(event) => setEditor((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="space-y-2">
|
|
<Label>相对方</Label>
|
|
<Input
|
|
value={editor.counterpartyName}
|
|
onChange={(event) => setEditor((current) => ({ ...current, counterpartyName: event.target.value }))}
|
|
placeholder="合同对方名称"
|
|
/>
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<Label>摘要</Label>
|
|
<Textarea
|
|
value={editor.summary}
|
|
onChange={(event) => setEditor((current) => ({ ...current, summary: event.target.value }))}
|
|
placeholder="只写最小必要摘要，不录入涉密正文"
|
|
/>
|
|
</div>
|
|
|
|
<div className="grid gap-3 md:grid-cols-2">
|
|
<div className="space-y-2">
|
|
<Label>合同金额</Label>
|
|
<Input
|
|
value={editor.amount}
|
|
onChange={(event) => setEditor((current) => ({ ...current, amount: event.target.value }))}
|
|
placeholder="例如 100000.00"
|
|
/>
|
|
</div>
|
|
<div className="space-y-2">
|
|
<Label>币种</Label>
|
|
<Input
|
|
value={editor.currency}
|
|
onChange={(event) => setEditor((current) => ({ ...current, currency: event.target.value.toUpperCase() }))}
|
|
placeholder="CNY"
|
|
/>
|
|
</div>
|
|
</div>
|
|
{amountInvalid ? <div className="text-xs text-red-600">合同金额需为最多 12 位整数、最多 2 位小数。</div> : null}
|
|
|
|
<div className="grid gap-3 md:grid-cols-3">
|
|
<div className="space-y-2">
|
|
<Label>签署日期</Label>
|
|
<Input
|
|
type="date"
|
|
value={editor.signedDate}
|
|
onChange={(event) => setEditor((current) => ({ ...current, signedDate: event.target.value }))}
|
|
/>
|
|
</div>
|
|
<div className="space-y-2">
|
|
<Label>生效日期</Label>
|
|
<Input
|
|
type="date"
|
|
value={editor.effectiveDate}
|
|
onChange={(event) => setEditor((current) => ({ ...current, effectiveDate: event.target.value }))}
|
|
/>
|
|
</div>
|
|
<div className="space-y-2">
|
|
<Label>到期日期</Label>
|
|
<Input
|
|
type="date"
|
|
value={editor.expiryDate}
|
|
onChange={(event) => setEditor((current) => ({ ...current, expiryDate: event.target.value }))}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<Label>归档位置</Label>
|
|
<Input
|
|
value={editor.archiveLocation}
|
|
onChange={(event) => setEditor((current) => ({ ...current, archiveLocation: event.target.value }))}
|
|
placeholder="NAS/文件柜/共享盘路径"
|
|
/>
|
|
</div>
|
|
|
|
<div className="grid gap-3 md:grid-cols-2">
|
|
<div className="space-y-2">
|
|
<Label>离线档案号</Label>
|
|
<Input
|
|
value={editor.offlineArchiveNo}
|
|
onChange={(event) => setEditor((current) => ({ ...current, offlineArchiveNo: event.target.value }))}
|
|
placeholder="可选"
|
|
/>
|
|
</div>
|
|
<div className="space-y-2">
|
|
<Label>密级</Label>
|
|
<select
|
|
className="select-std"
|
|
value={editor.confidentialityLevel}
|
|
onChange={(event) => setEditor((current) => ({ ...current, confidentialityLevel: event.target.value as ConfidentialityLevel }))}
|
|
>
|
|
{CONFIDENTIALITY_OPTIONS.map((item) => (
|
|
<option key={item} value={item}>
|
|
{confidentialityLabel(item)}
|
|
</option>
|
|
))}
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<Label>责任人</Label>
|
|
<select
|
|
className="select-std"
|
|
value={editor.ownerEmployeeId}
|
|
onChange={(event) => setEditor((current) => ({ ...current, ownerEmployeeId: event.target.value }))}
|
|
>
|
|
<option value="">默认当前用户</option>
|
|
{employeeOptions.map((item) => (
|
|
<option key={item.id} value={item.id}>
|
|
{item.name} · {item.employeeNo}
|
|
</option>
|
|
))}
|
|
</select>
|
|
</div>
|
|
|
|
<Button
|
|
type="button"
|
|
disabled={
|
|
saveMutation.isPending ||
|
|
amountInvalid ||
|
|
!editor.contractNo.trim() ||
|
|
!editor.counterpartyName.trim() ||
|
|
!editor.summary.trim() ||
|
|
!editor.archiveLocation.trim() ||
|
|
!editor.currency.trim()
|
|
}
|
|
onClick={() => saveMutation.mutate()}
|
|
>
|
|
{saveMutation.isPending ? (editorId ? "保存中..." : "创建中...") : editorId ? "保存修改" : "创建合同台账"}
|
|
</Button>
|
|
</div>
|
|
|
|
<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>
|
|
<Button
|
|
type="button"
|
|
variant="secondary"
|
|
onClick={() => {
|
|
setFilters({
|
|
projectId: initialProjectId,
|
|
status: "",
|
|
contractType: "",
|
|
counterpartyName: "",
|
|
expiryDateFrom: "",
|
|
expiryDateTo: "",
|
|
});
|
|
setEditorId(null);
|
|
setEditor(buildEmptyEditor(initialProjectId));
|
|
}}
|
|
>
|
|
重置筛选
|
|
</Button>
|
|
</div>
|
|
|
|
<div className="grid gap-3 md:grid-cols-2 xl:grid-cols-3">
|
|
<div className="space-y-2">
|
|
<Label>项目</Label>
|
|
<select
|
|
className="select-std"
|
|
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="space-y-2">
|
|
<Label>状态</Label>
|
|
<select
|
|
className="select-std"
|
|
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 className="space-y-2">
|
|
<Label>合同类型</Label>
|
|
<select
|
|
className="select-std"
|
|
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 className="space-y-2">
|
|
<Label>相对方模糊筛选</Label>
|
|
<Input
|
|
value={filters.counterpartyName}
|
|
onChange={(event) => setFilters((current) => ({ ...current, counterpartyName: event.target.value }))}
|
|
placeholder="输入相对方名称关键字"
|
|
/>
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<Label>到期日开始</Label>
|
|
<Input
|
|
type="date"
|
|
value={filters.expiryDateFrom}
|
|
onChange={(event) => setFilters((current) => ({ ...current, expiryDateFrom: event.target.value }))}
|
|
/>
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<Label>到期日结束</Label>
|
|
<Input
|
|
type="date"
|
|
value={filters.expiryDateTo}
|
|
onChange={(event) => setFilters((current) => ({ ...current, expiryDateTo: event.target.value }))}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
{contractsQuery.isLoading ? <div className="text-sm text-zinc-500">加载中...</div> : null}
|
|
{contractsQuery.isError ? (
|
|
<div className="text-sm text-red-600">{resolveError(contractsQuery.error, "加载合同台账失败")}</div>
|
|
) : null}
|
|
|
|
<div className="space-y-3">
|
|
{contracts.map((item) => (
|
|
<div key={item.id} className="rounded-lg border border-zinc-200 p-4">
|
|
<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} />
|
|
<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 ? ` · 到期日 ${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">
|
|
签署：{item.signedDate ?? "-"} · 生效：{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={() => {
|
|
setEditorId(item.id);
|
|
setEditor(loadEditorFromItem(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={() => toggleStatusMutation.mutate(item)}
|
|
>
|
|
{item.persistedStatus === "archived" ? "恢复为 active" : "归档"}
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
|
|
{!contractsQuery.isLoading && !contracts.length ? (
|
|
<div className="text-sm text-zinc-500">暂无符合筛选条件的合同台账。</div>
|
|
) : null}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default ContractsRegistryPage;
|