R19/R20: 项目主域进 OA 并打通报销差旅周报待办
这个提交包含在：
@@ -0,0 +1,760 @@
|
||||
import { useEffect, useState } from "react";
|
||||
import { Link, useParams } from "react-router-dom";
|
||||
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
|
||||
import { fetchEmployees } from "../api/employees";
|
||||
import { createConfidentialDocumentRef, createProjectDelivery, createProjectMember, createProjectMilestone, createProjectRisk, createProjectTask, fetchProject, fetchProjectDeliveries, fetchProjectDocumentRefs, fetchProjectExpensesSummary, fetchProjectMembers, fetchProjectMilestones, fetchProjectRisks, fetchProjectTasks, fetchProjectTravelSummary, fetchProjectWeeklyReports, patchProject, patchProjectMember, patchProjectMilestone, patchProjectRisk, patchProjectTask, archiveProject, type ConfidentialityLevel, type DocumentStorageType, type ProjectDeliveryRecordType, type ProjectMilestoneStatus, type ProjectRiskLevel, type ProjectStatus, type ProjectTaskPriority, type ProjectTaskStatus } from "../api/projects";
|
||||
import { fetchContractsRegistry } from "../api/contractsRegistry";
|
||||
import { mapApiErrorMessage } from "../api/errorMessages";
|
||||
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 { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "../components/ui/table";
|
||||
import { Textarea } from "../components/ui/textarea";
|
||||
import { toast } from "sonner";
|
||||
|
||||
const PROJECT_STATUS_OPTIONS: ProjectStatus[] = ["draft", "active", "paused", "completed", "archived"];
|
||||
const MEMBER_ROLE_OPTIONS = ["owner", "manager", "member", "observer"] as const;
|
||||
const MILESTONE_STATUS_OPTIONS: ProjectMilestoneStatus[] = ["pending", "in_progress", "done", "delayed", "cancelled"];
|
||||
const TASK_STATUS_OPTIONS: ProjectTaskStatus[] = ["todo", "doing", "blocked", "done", "cancelled"];
|
||||
const TASK_PRIORITY_OPTIONS: ProjectTaskPriority[] = ["low", "normal", "high", "urgent"];
|
||||
const RISK_LEVEL_OPTIONS: ProjectRiskLevel[] = ["low", "medium", "high"];
|
||||
const RISK_STATUS_OPTIONS = ["open", "monitoring", "mitigating", "closed"];
|
||||
const DELIVERY_TYPE_OPTIONS: ProjectDeliveryRecordType[] = ["kickoff", "onsite", "stage_acceptance", "final_acceptance", "handover"];
|
||||
const CONFIDENTIALITY_OPTIONS: ConfidentialityLevel[] = ["public", "internal", "confidential", "restricted"];
|
||||
const STORAGE_TYPE_OPTIONS: DocumentStorageType[] = ["oa_link", "nas", "internal_share", "offline_archive"];
|
||||
|
||||
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 storageTypeLabel(value: DocumentStorageType) {
|
||||
if (value === "oa_link") return "OA 链接";
|
||||
if (value === "nas") return "NAS";
|
||||
if (value === "internal_share") return "内网共享";
|
||||
return "离线档案";
|
||||
}
|
||||
|
||||
function recordTypeLabel(value: ProjectDeliveryRecordType) {
|
||||
if (value === "kickoff") return "启动";
|
||||
if (value === "onsite") return "现场";
|
||||
if (value === "stage_acceptance") return "阶段验收";
|
||||
if (value === "final_acceptance") return "最终验收";
|
||||
return "交接";
|
||||
}
|
||||
|
||||
export function ProjectDetailPage() {
|
||||
const { projectId = "" } = useParams();
|
||||
const queryClient = useQueryClient();
|
||||
|
||||
const detailQuery = useQuery({
|
||||
enabled: Boolean(projectId),
|
||||
queryKey: ["projects", "detail", projectId],
|
||||
queryFn: () => fetchProject(projectId),
|
||||
});
|
||||
const employeesQuery = useQuery({
|
||||
enabled: Boolean(projectId),
|
||||
queryKey: ["employees", "project-detail"],
|
||||
queryFn: () => fetchEmployees({ page: 1, pageSize: 100, status: "active" }),
|
||||
});
|
||||
const expensesQuery = useQuery({ enabled: Boolean(projectId), queryKey: ["projects", projectId, "expenses"], queryFn: () => fetchProjectExpensesSummary(projectId) });
|
||||
const travelQuery = useQuery({ enabled: Boolean(projectId), queryKey: ["projects", projectId, "travel"], queryFn: () => fetchProjectTravelSummary(projectId) });
|
||||
const weeklyQuery = useQuery({ enabled: Boolean(projectId), queryKey: ["projects", projectId, "weekly"], queryFn: () => fetchProjectWeeklyReports(projectId) });
|
||||
const deliveriesQuery = useQuery({ enabled: Boolean(projectId), queryKey: ["projects", projectId, "deliveries"], queryFn: () => fetchProjectDeliveries(projectId) });
|
||||
const docsQuery = useQuery({ enabled: Boolean(projectId), queryKey: ["projects", projectId, "document-refs"], queryFn: () => fetchProjectDocumentRefs(projectId) });
|
||||
const contractsQuery = useQuery({ enabled: Boolean(projectId), queryKey: ["contracts-registry", projectId], queryFn: () => fetchContractsRegistry(projectId) });
|
||||
const membersQuery = useQuery({ enabled: Boolean(projectId), queryKey: ["projects", projectId, "members"], queryFn: () => fetchProjectMembers(projectId) });
|
||||
const milestonesQuery = useQuery({ enabled: Boolean(projectId), queryKey: ["projects", projectId, "milestones"], queryFn: () => fetchProjectMilestones(projectId) });
|
||||
const tasksQuery = useQuery({ enabled: Boolean(projectId), queryKey: ["projects", projectId, "tasks"], queryFn: () => fetchProjectTasks(projectId) });
|
||||
const risksQuery = useQuery({ enabled: Boolean(projectId), queryKey: ["projects", projectId, "risks"], queryFn: () => fetchProjectRisks(projectId) });
|
||||
|
||||
const employeeOptions = employeesQuery.data?.items ?? [];
|
||||
const detail = detailQuery.data?.item ?? null;
|
||||
|
||||
const [projectForm, setProjectForm] = useState({
|
||||
name: "",
|
||||
clientName: "",
|
||||
clientAlias: "",
|
||||
status: "draft" as ProjectStatus,
|
||||
startsAt: "",
|
||||
targetEndAt: "",
|
||||
actualEndAt: "",
|
||||
managerEmployeeId: "",
|
||||
summary: "",
|
||||
isConfidential: false,
|
||||
});
|
||||
|
||||
const [memberEmployeeId, setMemberEmployeeId] = useState("");
|
||||
const [memberRole, setMemberRole] = useState<(typeof MEMBER_ROLE_OPTIONS)[number]>("member");
|
||||
|
||||
const [milestoneTitle, setMilestoneTitle] = useState("");
|
||||
const [milestoneDueDate, setMilestoneDueDate] = useState("");
|
||||
const [milestoneStatus, setMilestoneStatus] = useState<ProjectMilestoneStatus>("pending");
|
||||
|
||||
const [taskTitle, setTaskTitle] = useState("");
|
||||
const [taskDueDate, setTaskDueDate] = useState("");
|
||||
const [taskAssigneeId, setTaskAssigneeId] = useState("");
|
||||
const [taskPriority, setTaskPriority] = useState<ProjectTaskPriority>("normal");
|
||||
|
||||
const [riskTitle, setRiskTitle] = useState("");
|
||||
const [riskDetail, setRiskDetail] = useState("");
|
||||
const [riskLevel, setRiskLevel] = useState<ProjectRiskLevel>("medium");
|
||||
const [riskOwnerId, setRiskOwnerId] = useState("");
|
||||
|
||||
const [deliveryTitle, setDeliveryTitle] = useState("");
|
||||
const [deliverySummary, setDeliverySummary] = useState("");
|
||||
const [deliveryType, setDeliveryType] = useState<ProjectDeliveryRecordType>("onsite");
|
||||
const [deliveryOccurredAt, setDeliveryOccurredAt] = useState("");
|
||||
|
||||
const [docTitle, setDocTitle] = useState("");
|
||||
const [docNo, setDocNo] = useState("");
|
||||
const [docStoragePath, setDocStoragePath] = useState("");
|
||||
const [docOfflineArchiveNo, setDocOfflineArchiveNo] = useState("");
|
||||
const [docConfidentiality, setDocConfidentiality] = useState<ConfidentialityLevel>("internal");
|
||||
const [docStorageType, setDocStorageType] = useState<DocumentStorageType>("nas");
|
||||
|
||||
useEffect(() => {
|
||||
if (!detail) return;
|
||||
setProjectForm({
|
||||
name: detail.name,
|
||||
clientName: detail.clientName,
|
||||
clientAlias: detail.clientAlias ?? "",
|
||||
status: detail.status,
|
||||
startsAt: detail.startsAt ?? "",
|
||||
targetEndAt: detail.targetEndAt ?? "",
|
||||
actualEndAt: detail.actualEndAt ?? "",
|
||||
managerEmployeeId: detail.managerEmployeeId ?? "",
|
||||
summary: detail.summary ?? "",
|
||||
isConfidential: detail.isConfidential,
|
||||
});
|
||||
}, [detail]);
|
||||
|
||||
const refreshProject = async () => {
|
||||
await Promise.all([
|
||||
queryClient.invalidateQueries({ queryKey: ["projects"] }),
|
||||
queryClient.invalidateQueries({ queryKey: ["projects", "detail", projectId] }),
|
||||
queryClient.invalidateQueries({ queryKey: ["projects", projectId] }),
|
||||
queryClient.invalidateQueries({ queryKey: ["portal-home"] }),
|
||||
queryClient.invalidateQueries({ queryKey: ["global-search"] }),
|
||||
queryClient.invalidateQueries({ queryKey: ["contracts-registry", projectId] }),
|
||||
]);
|
||||
};
|
||||
|
||||
const saveProjectMutation = useMutation({
|
||||
mutationFn: () => patchProject(projectId, {
|
||||
name: projectForm.name.trim(),
|
||||
clientName: projectForm.clientName.trim(),
|
||||
clientAlias: projectForm.clientAlias.trim() || null,
|
||||
status: projectForm.status,
|
||||
startsAt: projectForm.startsAt || null,
|
||||
targetEndAt: projectForm.targetEndAt || null,
|
||||
actualEndAt: projectForm.actualEndAt || null,
|
||||
managerEmployeeId: projectForm.managerEmployeeId || null,
|
||||
summary: projectForm.summary.trim() || null,
|
||||
isConfidential: projectForm.isConfidential,
|
||||
}),
|
||||
onSuccess: async () => {
|
||||
await refreshProject();
|
||||
toast.success("项目主档已更新");
|
||||
},
|
||||
onError: (error) => toast.error(resolveError(error, "保存项目失败")),
|
||||
});
|
||||
|
||||
const archiveProjectMutation = useMutation({
|
||||
mutationFn: () => archiveProject(projectId),
|
||||
onSuccess: async () => {
|
||||
await refreshProject();
|
||||
toast.success("项目已归档");
|
||||
},
|
||||
onError: (error) => toast.error(resolveError(error, "归档项目失败")),
|
||||
});
|
||||
|
||||
const addMemberMutation = useMutation({
|
||||
mutationFn: () => createProjectMember(projectId, { employeeId: memberEmployeeId, role: memberRole }),
|
||||
onSuccess: async () => {
|
||||
setMemberEmployeeId("");
|
||||
setMemberRole("member");
|
||||
await Promise.all([
|
||||
refreshProject(),
|
||||
queryClient.invalidateQueries({ queryKey: ["projects", projectId, "members"] }),
|
||||
]);
|
||||
toast.success("项目成员已添加");
|
||||
},
|
||||
onError: (error) => toast.error(resolveError(error, "添加成员失败")),
|
||||
});
|
||||
|
||||
const patchMemberMutation = useMutation({
|
||||
mutationFn: ({ memberId, role, leftAt }: { memberId: string; role?: (typeof MEMBER_ROLE_OPTIONS)[number]; leftAt?: string | null }) =>
|
||||
patchProjectMember(projectId, memberId, { ...(role ? { role } : {}), ...(leftAt !== undefined ? { leftAt } : {}) }),
|
||||
onSuccess: async () => {
|
||||
await Promise.all([
|
||||
refreshProject(),
|
||||
queryClient.invalidateQueries({ queryKey: ["projects", projectId, "members"] }),
|
||||
]);
|
||||
toast.success("成员已更新");
|
||||
},
|
||||
onError: (error) => toast.error(resolveError(error, "更新成员失败")),
|
||||
});
|
||||
|
||||
const addMilestoneMutation = useMutation({
|
||||
mutationFn: () => createProjectMilestone(projectId, { title: milestoneTitle.trim(), dueDate: milestoneDueDate || null, status: milestoneStatus }),
|
||||
onSuccess: async () => {
|
||||
setMilestoneTitle("");
|
||||
setMilestoneDueDate("");
|
||||
setMilestoneStatus("pending");
|
||||
await Promise.all([
|
||||
refreshProject(),
|
||||
queryClient.invalidateQueries({ queryKey: ["projects", projectId, "milestones"] }),
|
||||
]);
|
||||
toast.success("里程碑已创建");
|
||||
},
|
||||
onError: (error) => toast.error(resolveError(error, "创建里程碑失败")),
|
||||
});
|
||||
|
||||
const patchMilestoneMutation = useMutation({
|
||||
mutationFn: ({ milestoneId, status }: { milestoneId: string; status: ProjectMilestoneStatus }) => patchProjectMilestone(projectId, milestoneId, { status }),
|
||||
onSuccess: async () => {
|
||||
await Promise.all([
|
||||
refreshProject(),
|
||||
queryClient.invalidateQueries({ queryKey: ["projects", projectId, "milestones"] }),
|
||||
]);
|
||||
toast.success("里程碑状态已更新");
|
||||
},
|
||||
onError: (error) => toast.error(resolveError(error, "更新里程碑失败")),
|
||||
});
|
||||
|
||||
const addTaskMutation = useMutation({
|
||||
mutationFn: () => createProjectTask(projectId, { title: taskTitle.trim(), dueDate: taskDueDate || null, assigneeEmployeeId: taskAssigneeId || null, priority: taskPriority, status: "todo" }),
|
||||
onSuccess: async () => {
|
||||
setTaskTitle("");
|
||||
setTaskDueDate("");
|
||||
setTaskAssigneeId("");
|
||||
setTaskPriority("normal");
|
||||
await Promise.all([
|
||||
refreshProject(),
|
||||
queryClient.invalidateQueries({ queryKey: ["projects", projectId, "tasks"] }),
|
||||
]);
|
||||
toast.success("项目任务已创建");
|
||||
},
|
||||
onError: (error) => toast.error(resolveError(error, "创建任务失败")),
|
||||
});
|
||||
|
||||
const patchTaskMutation = useMutation({
|
||||
mutationFn: ({ taskId, payload }: { taskId: string; payload: Partial<{ status: ProjectTaskStatus; priority: ProjectTaskPriority; assigneeEmployeeId: string | null }> }) =>
|
||||
patchProjectTask(projectId, taskId, payload),
|
||||
onSuccess: async () => {
|
||||
await Promise.all([
|
||||
refreshProject(),
|
||||
queryClient.invalidateQueries({ queryKey: ["projects", projectId, "tasks"] }),
|
||||
]);
|
||||
toast.success("任务已更新");
|
||||
},
|
||||
onError: (error) => toast.error(resolveError(error, "更新任务失败")),
|
||||
});
|
||||
|
||||
const addRiskMutation = useMutation({
|
||||
mutationFn: () => createProjectRisk(projectId, { title: riskTitle.trim(), detail: riskDetail.trim(), level: riskLevel, ownerEmployeeId: riskOwnerId || null, status: "open" }),
|
||||
onSuccess: async () => {
|
||||
setRiskTitle("");
|
||||
setRiskDetail("");
|
||||
setRiskLevel("medium");
|
||||
setRiskOwnerId("");
|
||||
await Promise.all([
|
||||
refreshProject(),
|
||||
queryClient.invalidateQueries({ queryKey: ["projects", projectId, "risks"] }),
|
||||
]);
|
||||
toast.success("项目风险已登记");
|
||||
},
|
||||
onError: (error) => toast.error(resolveError(error, "创建风险失败")),
|
||||
});
|
||||
|
||||
const patchRiskMutation = useMutation({
|
||||
mutationFn: ({ riskId, status }: { riskId: string; status: string }) => patchProjectRisk(projectId, riskId, { status }),
|
||||
onSuccess: async () => {
|
||||
await Promise.all([
|
||||
refreshProject(),
|
||||
queryClient.invalidateQueries({ queryKey: ["projects", projectId, "risks"] }),
|
||||
]);
|
||||
toast.success("风险状态已更新");
|
||||
},
|
||||
onError: (error) => toast.error(resolveError(error, "更新风险失败")),
|
||||
});
|
||||
|
||||
const addDeliveryMutation = useMutation({
|
||||
mutationFn: () => createProjectDelivery(projectId, { title: deliveryTitle.trim(), summary: deliverySummary.trim(), recordType: deliveryType, occurredAt: `${deliveryOccurredAt || new Date().toISOString().slice(0, 10)}T00:00:00.000Z` }),
|
||||
onSuccess: async () => {
|
||||
setDeliveryTitle("");
|
||||
setDeliverySummary("");
|
||||
setDeliveryType("onsite");
|
||||
setDeliveryOccurredAt("");
|
||||
await Promise.all([
|
||||
refreshProject(),
|
||||
queryClient.invalidateQueries({ queryKey: ["projects", projectId, "deliveries"] }),
|
||||
]);
|
||||
toast.success("交付记录已创建");
|
||||
},
|
||||
onError: (error) => toast.error(resolveError(error, "创建交付记录失败")),
|
||||
});
|
||||
|
||||
const addDocRefMutation = useMutation({
|
||||
mutationFn: () => createConfidentialDocumentRef({ projectId, title: docTitle.trim(), documentNo: docNo.trim() || null, confidentialityLevel: docConfidentiality, storageType: docStorageType, storagePath: docStoragePath.trim(), offlineArchiveNo: docOfflineArchiveNo.trim() || null }),
|
||||
onSuccess: async () => {
|
||||
setDocTitle("");
|
||||
setDocNo("");
|
||||
setDocStoragePath("");
|
||||
setDocOfflineArchiveNo("");
|
||||
setDocConfidentiality("internal");
|
||||
setDocStorageType("nas");
|
||||
await Promise.all([
|
||||
refreshProject(),
|
||||
queryClient.invalidateQueries({ queryKey: ["projects", projectId, "document-refs"] }),
|
||||
]);
|
||||
toast.success("涉密资料引用已登记");
|
||||
},
|
||||
onError: (error) => toast.error(resolveError(error, "登记资料引用失败")),
|
||||
});
|
||||
|
||||
const counts = detail?.counts;
|
||||
|
||||
if (!projectId) {
|
||||
return <div className="card-std p-6 text-sm text-red-600">缺少 projectId 参数。</div>;
|
||||
}
|
||||
|
||||
if (detailQuery.isLoading) {
|
||||
return <div className="card-std p-6 text-sm text-zinc-500">加载项目详情中...</div>;
|
||||
}
|
||||
|
||||
if (detailQuery.isError || !detail) {
|
||||
return (
|
||||
<div className="card-std space-y-3 p-6">
|
||||
<div className="text-sm text-red-600">{resolveError(detailQuery.error, "加载项目详情失败")}</div>
|
||||
<Button asChild variant="secondary" type="button">
|
||||
<Link to="/projects">返回项目列表</Link>
|
||||
</Button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const memberItems = membersQuery.data?.items ?? detail.members;
|
||||
const milestoneItems = milestonesQuery.data?.items ?? detail.milestones;
|
||||
const taskItems = tasksQuery.data?.items ?? detail.tasks;
|
||||
const riskItems = risksQuery.data?.items ?? detail.risks;
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<PageHeader
|
||||
title={`${detail.projectNo} · ${detail.name}`}
|
||||
subtitle="项目主档、成员、里程碑、任务、风险、费用、周报与资料引用统一查看。"
|
||||
actions={
|
||||
<div className="flex flex-wrap gap-2">
|
||||
<Button asChild variant="secondary" type="button">
|
||||
<Link to="/projects">返回项目</Link>
|
||||
</Button>
|
||||
<Button asChild variant="secondary" type="button">
|
||||
<Link to={`/contracts-registry?projectId=${detail.id}`}>合同台账</Link>
|
||||
</Button>
|
||||
<Button type="button" variant="secondary" disabled={archiveProjectMutation.isPending || detail.status === "archived"} onClick={() => archiveProjectMutation.mutate()}>
|
||||
{archiveProjectMutation.isPending ? "归档中..." : "归档项目"}
|
||||
</Button>
|
||||
</div>
|
||||
}
|
||||
/>
|
||||
|
||||
<div className="grid gap-4 md:grid-cols-2 xl:grid-cols-6">
|
||||
<div className="card-std p-4"><div className="text-sm text-zinc-500">成员</div><div className="mt-2 text-2xl font-bold">{counts?.members ?? 0}</div></div>
|
||||
<div className="card-std p-4"><div className="text-sm text-zinc-500">里程碑</div><div className="mt-2 text-2xl font-bold">{counts?.milestones ?? 0}</div></div>
|
||||
<div className="card-std p-4"><div className="text-sm text-zinc-500">任务</div><div className="mt-2 text-2xl font-bold">{counts?.tasks ?? 0}</div></div>
|
||||
<div className="card-std p-4"><div className="text-sm text-zinc-500">风险</div><div className="mt-2 text-2xl font-bold">{counts?.risks ?? 0}</div></div>
|
||||
<div className="card-std p-4"><div className="text-sm text-zinc-500">报销合计</div><div className="mt-2 text-2xl font-bold">{expensesQuery.data?.totalAmount ?? "0.00"}</div></div>
|
||||
<div className="card-std p-4"><div className="text-sm text-zinc-500">差旅合计</div><div className="mt-2 text-2xl font-bold">{travelQuery.data?.totalAmount ?? "0.00"}</div></div>
|
||||
</div>
|
||||
|
||||
<div className="grid gap-6 xl:grid-cols-[minmax(0,1.2fr),minmax(0,0.8fr)]">
|
||||
<div className="card-std space-y-4 p-6">
|
||||
<div className="flex items-center gap-3">
|
||||
<h3 className="text-base font-semibold text-zinc-900">项目主档</h3>
|
||||
<StatusBadge status={detail.status} />
|
||||
{detail.isConfidential ? <span className="rounded-full bg-amber-100 px-2 py-1 text-xs text-amber-700">涉密项目</span> : null}
|
||||
</div>
|
||||
<div className="grid gap-4 md:grid-cols-2">
|
||||
<div className="space-y-2">
|
||||
<Label>项目名称</Label>
|
||||
<Input value={projectForm.name} onChange={(event) => setProjectForm((prev) => ({ ...prev, name: event.target.value }))} />
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label>客户名称</Label>
|
||||
<Input value={projectForm.clientName} onChange={(event) => setProjectForm((prev) => ({ ...prev, clientName: event.target.value }))} />
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label>客户简称</Label>
|
||||
<Input value={projectForm.clientAlias} onChange={(event) => setProjectForm((prev) => ({ ...prev, clientAlias: event.target.value }))} />
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label>状态</Label>
|
||||
<select className="select-std" value={projectForm.status} onChange={(event) => setProjectForm((prev) => ({ ...prev, status: event.target.value as ProjectStatus }))}>
|
||||
{PROJECT_STATUS_OPTIONS.map((item) => <option key={item} value={item}>{item}</option>)}
|
||||
</select>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label>开始日期</Label>
|
||||
<Input type="date" value={projectForm.startsAt} onChange={(event) => setProjectForm((prev) => ({ ...prev, startsAt: event.target.value }))} />
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label>目标完成</Label>
|
||||
<Input type="date" value={projectForm.targetEndAt} onChange={(event) => setProjectForm((prev) => ({ ...prev, targetEndAt: event.target.value }))} />
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label>实际完成</Label>
|
||||
<Input type="date" value={projectForm.actualEndAt} onChange={(event) => setProjectForm((prev) => ({ ...prev, actualEndAt: event.target.value }))} />
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label>项目经理</Label>
|
||||
<select className="select-std" value={projectForm.managerEmployeeId} onChange={(event) => setProjectForm((prev) => ({ ...prev, managerEmployeeId: event.target.value }))}>
|
||||
<option value="">未指定</option>
|
||||
{employeeOptions.map((item) => <option key={item.id} value={item.id}>{item.name} · {item.employeeNo}</option>)}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label>项目摘要</Label>
|
||||
<Textarea value={projectForm.summary} onChange={(event) => setProjectForm((prev) => ({ ...prev, summary: event.target.value }))} />
|
||||
</div>
|
||||
<label className="flex items-center gap-2 text-sm text-zinc-700">
|
||||
<input type="checkbox" checked={projectForm.isConfidential} onChange={(event) => setProjectForm((prev) => ({ ...prev, isConfidential: event.target.checked }))} />
|
||||
项目包含涉密资料，正文与附件保持离线管理
|
||||
</label>
|
||||
<div className="flex justify-end">
|
||||
<Button type="button" disabled={saveProjectMutation.isPending} onClick={() => saveProjectMutation.mutate()}>
|
||||
{saveProjectMutation.isPending ? "保存中..." : "保存主档"}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="card-std space-y-3 p-6 text-sm">
|
||||
<h3 className="text-base font-semibold text-zinc-900">项目摘要</h3>
|
||||
<div>负责人：{detail.owner?.name ?? "-"}</div>
|
||||
<div>项目经理：{detail.manager?.name ?? "-"}</div>
|
||||
<div>周报关联：{counts?.weeklyReports ?? 0}</div>
|
||||
<div>合同台账：{counts?.contracts ?? 0}</div>
|
||||
<div>交付记录：{counts?.deliveries ?? 0}</div>
|
||||
<div>资料引用：{counts?.documentRefs ?? 0}</div>
|
||||
<div className="rounded-lg border border-zinc-200 p-3 text-zinc-600">
|
||||
项目相关的出差、报销、待办、周报都可以在当前项目下汇总查看；涉密正文与附件仍不进 OA。
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid gap-6 xl:grid-cols-2">
|
||||
<div className="card-std space-y-4 p-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<h3 className="text-base font-semibold text-zinc-900">成员</h3>
|
||||
<div className="text-sm text-zinc-500">当前 {memberItems.length} 人</div>
|
||||
</div>
|
||||
<div className="grid gap-3 md:grid-cols-[minmax(0,1fr),160px,120px]">
|
||||
<select className="select-std" value={memberEmployeeId} onChange={(event) => setMemberEmployeeId(event.target.value)}>
|
||||
<option value="">选择成员</option>
|
||||
{employeeOptions.map((item) => <option key={item.id} value={item.id}>{item.name} · {item.employeeNo}</option>)}
|
||||
</select>
|
||||
<select className="select-std" value={memberRole} onChange={(event) => setMemberRole(event.target.value as (typeof MEMBER_ROLE_OPTIONS)[number])}>
|
||||
{MEMBER_ROLE_OPTIONS.map((item) => <option key={item} value={item}>{item}</option>)}
|
||||
</select>
|
||||
<Button type="button" disabled={addMemberMutation.isPending || !memberEmployeeId} onClick={() => addMemberMutation.mutate()}>
|
||||
添加成员
|
||||
</Button>
|
||||
</div>
|
||||
<Table>
|
||||
<TableHeader><TableRow><TableHead>成员</TableHead><TableHead>角色</TableHead><TableHead>加入时间</TableHead><TableHead>操作</TableHead></TableRow></TableHeader>
|
||||
<TableBody>
|
||||
{memberItems.map((item) => (
|
||||
<TableRow key={item.id}>
|
||||
<TableCell>{item.employee?.name ?? item.employeeId}</TableCell>
|
||||
<TableCell>
|
||||
<select className="select-std h-9" value={item.role} onChange={(event) => patchMemberMutation.mutate({ memberId: item.id, role: event.target.value as (typeof MEMBER_ROLE_OPTIONS)[number] })}>
|
||||
{MEMBER_ROLE_OPTIONS.map((role) => <option key={role} value={role}>{role}</option>)}
|
||||
</select>
|
||||
</TableCell>
|
||||
<TableCell>{item.joinedAt ? item.joinedAt.slice(0, 10) : "-"}</TableCell>
|
||||
<TableCell>
|
||||
{item.leftAt ? "已移出" : (
|
||||
<Button size="sm" variant="secondary" type="button" onClick={() => patchMemberMutation.mutate({ memberId: item.id, leftAt: new Date().toISOString().slice(0, 10) })}>移出</Button>
|
||||
)}
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</div>
|
||||
|
||||
<div className="card-std space-y-4 p-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<h3 className="text-base font-semibold text-zinc-900">里程碑</h3>
|
||||
<div className="text-sm text-zinc-500">逾期请及时调整状态</div>
|
||||
</div>
|
||||
<div className="grid gap-3 md:grid-cols-[minmax(0,1fr),160px,160px,120px]">
|
||||
<Input value={milestoneTitle} onChange={(event) => setMilestoneTitle(event.target.value)} placeholder="里程碑标题" />
|
||||
<Input type="date" value={milestoneDueDate} onChange={(event) => setMilestoneDueDate(event.target.value)} />
|
||||
<select className="select-std" value={milestoneStatus} onChange={(event) => setMilestoneStatus(event.target.value as ProjectMilestoneStatus)}>
|
||||
{MILESTONE_STATUS_OPTIONS.map((item) => <option key={item} value={item}>{item}</option>)}
|
||||
</select>
|
||||
<Button type="button" disabled={addMilestoneMutation.isPending || !milestoneTitle.trim()} onClick={() => addMilestoneMutation.mutate()}>新增</Button>
|
||||
</div>
|
||||
<Table>
|
||||
<TableHeader><TableRow><TableHead>标题</TableHead><TableHead>截止日期</TableHead><TableHead>状态</TableHead></TableRow></TableHeader>
|
||||
<TableBody>
|
||||
{milestoneItems.map((item) => (
|
||||
<TableRow key={item.id}>
|
||||
<TableCell>{item.title}</TableCell>
|
||||
<TableCell>{item.dueDate ?? "-"}</TableCell>
|
||||
<TableCell>
|
||||
<select className="select-std h-9" value={item.status} onChange={(event) => patchMilestoneMutation.mutate({ milestoneId: item.id, status: event.target.value as ProjectMilestoneStatus })}>
|
||||
{MILESTONE_STATUS_OPTIONS.map((option) => <option key={option} value={option}>{option}</option>)}
|
||||
</select>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid gap-6 xl:grid-cols-2">
|
||||
<div className="card-std space-y-4 p-6">
|
||||
<div className="flex items-center justify-between"><h3 className="text-base font-semibold text-zinc-900">任务</h3><div className="text-sm text-zinc-500">支持高优先级与阻塞状态</div></div>
|
||||
<div className="grid gap-3 md:grid-cols-[minmax(0,1fr),160px,160px,160px,120px]">
|
||||
<Input value={taskTitle} onChange={(event) => setTaskTitle(event.target.value)} placeholder="任务标题" />
|
||||
<select className="select-std" value={taskAssigneeId} onChange={(event) => setTaskAssigneeId(event.target.value)}>
|
||||
<option value="">未指派</option>
|
||||
{employeeOptions.map((item) => <option key={item.id} value={item.id}>{item.name}</option>)}
|
||||
</select>
|
||||
<select className="select-std" value={taskPriority} onChange={(event) => setTaskPriority(event.target.value as ProjectTaskPriority)}>
|
||||
{TASK_PRIORITY_OPTIONS.map((item) => <option key={item} value={item}>{item}</option>)}
|
||||
</select>
|
||||
<Input type="date" value={taskDueDate} onChange={(event) => setTaskDueDate(event.target.value)} />
|
||||
<Button type="button" disabled={addTaskMutation.isPending || !taskTitle.trim()} onClick={() => addTaskMutation.mutate()}>新增</Button>
|
||||
</div>
|
||||
<Table>
|
||||
<TableHeader><TableRow><TableHead>任务</TableHead><TableHead>负责人</TableHead><TableHead>优先级</TableHead><TableHead>状态</TableHead></TableRow></TableHeader>
|
||||
<TableBody>
|
||||
{taskItems.map((item) => (
|
||||
<TableRow key={item.id}>
|
||||
<TableCell>
|
||||
<div className="font-medium text-zinc-900">{item.title}</div>
|
||||
<div className="text-xs text-zinc-500">截止：{item.dueDate ?? "-"}</div>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<select className="select-std h-9" value={item.assigneeEmployeeId ?? ""} onChange={(event) => patchTaskMutation.mutate({ taskId: item.id, payload: { assigneeEmployeeId: event.target.value || null } })}>
|
||||
<option value="">未指派</option>
|
||||
{employeeOptions.map((employee) => <option key={employee.id} value={employee.id}>{employee.name}</option>)}
|
||||
</select>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<select className="select-std h-9" value={item.priority} onChange={(event) => patchTaskMutation.mutate({ taskId: item.id, payload: { priority: event.target.value as ProjectTaskPriority } })}>
|
||||
{TASK_PRIORITY_OPTIONS.map((option) => <option key={option} value={option}>{option}</option>)}
|
||||
</select>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<select className="select-std h-9" value={item.status} onChange={(event) => patchTaskMutation.mutate({ taskId: item.id, payload: { status: event.target.value as ProjectTaskStatus } })}>
|
||||
{TASK_STATUS_OPTIONS.map((option) => <option key={option} value={option}>{option}</option>)}
|
||||
</select>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</div>
|
||||
|
||||
<div className="card-std space-y-4 p-6">
|
||||
<div className="flex items-center justify-between"><h3 className="text-base font-semibold text-zinc-900">风险</h3><div className="text-sm text-zinc-500">问题与阻塞统一留痕</div></div>
|
||||
<div className="space-y-3">
|
||||
<Input value={riskTitle} onChange={(event) => setRiskTitle(event.target.value)} placeholder="风险标题" />
|
||||
<Textarea value={riskDetail} onChange={(event) => setRiskDetail(event.target.value)} placeholder="风险详情、影响与当前处理动作" />
|
||||
<div className="grid gap-3 md:grid-cols-[160px,160px,minmax(0,1fr),120px]">
|
||||
<select className="select-std" value={riskLevel} onChange={(event) => setRiskLevel(event.target.value as ProjectRiskLevel)}>
|
||||
{RISK_LEVEL_OPTIONS.map((item) => <option key={item} value={item}>{item}</option>)}
|
||||
</select>
|
||||
<select className="select-std" value={riskOwnerId} onChange={(event) => setRiskOwnerId(event.target.value)}>
|
||||
<option value="">未指定责任人</option>
|
||||
{employeeOptions.map((item) => <option key={item.id} value={item.id}>{item.name}</option>)}
|
||||
</select>
|
||||
<div className="text-sm text-zinc-500 flex items-center">高优项目建议每个风险都指定责任人。</div>
|
||||
<Button type="button" disabled={addRiskMutation.isPending || !riskTitle.trim() || !riskDetail.trim()} onClick={() => addRiskMutation.mutate()}>登记</Button>
|
||||
</div>
|
||||
</div>
|
||||
<Table>
|
||||
<TableHeader><TableRow><TableHead>风险</TableHead><TableHead>等级</TableHead><TableHead>责任人</TableHead><TableHead>状态</TableHead></TableRow></TableHeader>
|
||||
<TableBody>
|
||||
{riskItems.map((item) => (
|
||||
<TableRow key={item.id}>
|
||||
<TableCell>
|
||||
<div className="font-medium text-zinc-900">{item.title}</div>
|
||||
<div className="text-xs text-zinc-500">{item.detail}</div>
|
||||
</TableCell>
|
||||
<TableCell>{item.level}</TableCell>
|
||||
<TableCell>{item.owner?.name ?? "-"}</TableCell>
|
||||
<TableCell>
|
||||
<select className="select-std h-9" value={item.status} onChange={(event) => patchRiskMutation.mutate({ riskId: item.id, status: event.target.value })}>
|
||||
{RISK_STATUS_OPTIONS.map((option) => <option key={option} value={option}>{option}</option>)}
|
||||
</select>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid gap-6 xl:grid-cols-2">
|
||||
<div className="card-std space-y-4 p-6">
|
||||
<div className="flex items-center justify-between"><h3 className="text-base font-semibold text-zinc-900">执行面板</h3><div className="text-sm text-zinc-500">人、事、费、周报统一查看</div></div>
|
||||
<div className="grid gap-4 md:grid-cols-2">
|
||||
<div className="rounded-lg border border-zinc-200 p-4">
|
||||
<div className="text-sm text-zinc-500">报销</div>
|
||||
<div className="mt-1 text-xl font-semibold text-zinc-900">{expensesQuery.data?.totalAmount ?? "0.00"}</div>
|
||||
<div className="mt-2 space-y-2 text-sm">
|
||||
{(expensesQuery.data?.items ?? []).slice(0, 5).map((item) => (
|
||||
<Link key={item.id} to={`/reimbursements/${item.id}`} className="block rounded-lg border border-zinc-100 px-3 py-2 hover:bg-zinc-50">
|
||||
{item.formNumber} · {item.totalAmount}
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<div className="rounded-lg border border-zinc-200 p-4">
|
||||
<div className="text-sm text-zinc-500">差旅</div>
|
||||
<div className="mt-1 text-xl font-semibold text-zinc-900">{travelQuery.data?.totalAmount ?? "0.00"}</div>
|
||||
<div className="mt-2 space-y-2 text-sm">
|
||||
{(travelQuery.data?.items ?? []).slice(0, 5).map((item) => (
|
||||
<Link key={item.id} to={`/travel-requests?tab=requests&id=${item.id}`} className="block rounded-lg border border-zinc-100 px-3 py-2 hover:bg-zinc-50">
|
||||
{item.requestNo} · {item.estimatedAmount}
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<div className="rounded-lg border border-zinc-200 p-4">
|
||||
<div className="text-sm text-zinc-500">项目周报</div>
|
||||
<div className="mt-1 text-xl font-semibold text-zinc-900">{weeklyQuery.data?.items.length ?? 0}</div>
|
||||
<div className="mt-2 space-y-2 text-sm">
|
||||
{(weeklyQuery.data?.items ?? []).slice(0, 5).map((item) => (
|
||||
<Link key={item.id} to="/weekly-reports" className="block rounded-lg border border-zinc-100 px-3 py-2 hover:bg-zinc-50">
|
||||
{item.employee?.name ?? "成员"} · {item.weekStart ?? "-"}
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<div className="rounded-lg border border-zinc-200 p-4">
|
||||
<div className="text-sm text-zinc-500">合同台账</div>
|
||||
<div className="mt-1 text-xl font-semibold text-zinc-900">{contractsQuery.data?.items.length ?? 0}</div>
|
||||
<div className="mt-2 space-y-2 text-sm">
|
||||
{(contractsQuery.data?.items ?? []).slice(0, 5).map((item) => (
|
||||
<div key={item.id} className="rounded-lg border border-zinc-100 px-3 py-2">
|
||||
{item.contractNo} · {item.counterpartyName}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="card-std space-y-4 p-6">
|
||||
<div className="flex items-center justify-between"><h3 className="text-base font-semibold text-zinc-900">交付记录</h3><div className="text-sm text-zinc-500">现场、验收、交接留痕</div></div>
|
||||
<div className="space-y-3">
|
||||
<Input value={deliveryTitle} onChange={(event) => setDeliveryTitle(event.target.value)} placeholder="记录标题" />
|
||||
<Textarea value={deliverySummary} onChange={(event) => setDeliverySummary(event.target.value)} placeholder="记录摘要" />
|
||||
<div className="grid gap-3 md:grid-cols-[180px,180px,120px]">
|
||||
<select className="select-std" value={deliveryType} onChange={(event) => setDeliveryType(event.target.value as ProjectDeliveryRecordType)}>
|
||||
{DELIVERY_TYPE_OPTIONS.map((item) => <option key={item} value={item}>{recordTypeLabel(item)}</option>)}
|
||||
</select>
|
||||
<Input type="date" value={deliveryOccurredAt} onChange={(event) => setDeliveryOccurredAt(event.target.value)} />
|
||||
<Button type="button" disabled={addDeliveryMutation.isPending || !deliveryTitle.trim() || !deliverySummary.trim()} onClick={() => addDeliveryMutation.mutate()}>新增</Button>
|
||||
</div>
|
||||
</div>
|
||||
<Table>
|
||||
<TableHeader><TableRow><TableHead>标题</TableHead><TableHead>类型</TableHead><TableHead>时间</TableHead><TableHead>责任人</TableHead></TableRow></TableHeader>
|
||||
<TableBody>
|
||||
{(deliveriesQuery.data?.items ?? []).map((item) => (
|
||||
<TableRow key={item.id}>
|
||||
<TableCell>
|
||||
<div className="font-medium text-zinc-900">{item.title}</div>
|
||||
<div className="text-xs text-zinc-500">{item.summary}</div>
|
||||
</TableCell>
|
||||
<TableCell>{recordTypeLabel(item.recordType)}</TableCell>
|
||||
<TableCell>{item.occurredAt ? item.occurredAt.slice(0, 10) : "-"}</TableCell>
|
||||
<TableCell>{item.owner?.name ?? "-"}</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid gap-6 xl:grid-cols-[minmax(0,1fr),minmax(0,1fr)]">
|
||||
<div className="card-std space-y-4 p-6">
|
||||
<div className="flex items-center justify-between"><h3 className="text-base font-semibold text-zinc-900">涉密资料引用</h3><div className="text-sm text-zinc-500">只登记目录 / 链接 / 归档位置</div></div>
|
||||
<div className="space-y-3">
|
||||
<Input value={docTitle} onChange={(event) => setDocTitle(event.target.value)} placeholder="资料标题" />
|
||||
<div className="grid gap-3 md:grid-cols-2">
|
||||
<Input value={docNo} onChange={(event) => setDocNo(event.target.value)} placeholder="文档编号（可选）" />
|
||||
<Input value={docOfflineArchiveNo} onChange={(event) => setDocOfflineArchiveNo(event.target.value)} placeholder="离线档案号（可选）" />
|
||||
</div>
|
||||
<Input value={docStoragePath} onChange={(event) => setDocStoragePath(event.target.value)} placeholder="NAS / Git / 文件盘路径或引用地址" />
|
||||
<div className="grid gap-3 md:grid-cols-[180px,180px,120px]">
|
||||
<select className="select-std" value={docConfidentiality} onChange={(event) => setDocConfidentiality(event.target.value as ConfidentialityLevel)}>
|
||||
{CONFIDENTIALITY_OPTIONS.map((item) => <option key={item} value={item}>{confidentialityLabel(item)}</option>)}
|
||||
</select>
|
||||
<select className="select-std" value={docStorageType} onChange={(event) => setDocStorageType(event.target.value as DocumentStorageType)}>
|
||||
{STORAGE_TYPE_OPTIONS.map((item) => <option key={item} value={item}>{storageTypeLabel(item)}</option>)}
|
||||
</select>
|
||||
<Button type="button" disabled={addDocRefMutation.isPending || !docTitle.trim() || !docStoragePath.trim()} onClick={() => addDocRefMutation.mutate()}>登记</Button>
|
||||
</div>
|
||||
</div>
|
||||
<Table>
|
||||
<TableHeader><TableRow><TableHead>资料</TableHead><TableHead>密级</TableHead><TableHead>存储</TableHead><TableHead>路径</TableHead></TableRow></TableHeader>
|
||||
<TableBody>
|
||||
{(docsQuery.data?.items ?? []).map((item) => (
|
||||
<TableRow key={item.id}>
|
||||
<TableCell>
|
||||
<div className="font-medium text-zinc-900">{item.title}</div>
|
||||
<div className="text-xs text-zinc-500">{item.documentNo ?? item.offlineArchiveNo ?? "无编号"}</div>
|
||||
</TableCell>
|
||||
<TableCell>{confidentialityLabel(item.confidentialityLevel)}</TableCell>
|
||||
<TableCell>{storageTypeLabel(item.storageType)}</TableCell>
|
||||
<TableCell className="max-w-[280px] truncate">{item.storagePath}</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</div>
|
||||
|
||||
<div className="card-std space-y-4 p-6">
|
||||
<div className="flex items-center justify-between"><h3 className="text-base font-semibold text-zinc-900">项目周报关联</h3><div className="text-sm text-zinc-500">按项目查看每周进展</div></div>
|
||||
<Table>
|
||||
<TableHeader><TableRow><TableHead>成员</TableHead><TableHead>周起始</TableHead><TableHead>进展</TableHead><TableHead>下一步</TableHead></TableRow></TableHeader>
|
||||
<TableBody>
|
||||
{(weeklyQuery.data?.items ?? []).map((item) => (
|
||||
<TableRow key={item.id}>
|
||||
<TableCell>{item.employee?.name ?? "-"}</TableCell>
|
||||
<TableCell>{item.weekStart ?? "-"}</TableCell>
|
||||
<TableCell>{item.progressText || item.riskText || "-"}</TableCell>
|
||||
<TableCell>{item.nextStepText || "-"}</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default ProjectDetailPage;
|
||||
在新工单中引用
屏蔽一个用户