feat: build collaboration workspaces
This commit is contained in:
325
modules/devices/components/DevicesWorkspaceClient.tsx
Normal file
325
modules/devices/components/DevicesWorkspaceClient.tsx
Normal file
@@ -0,0 +1,325 @@
|
||||
"use client";
|
||||
|
||||
import { FormEvent, useMemo, useState } from "react";
|
||||
import { AlertTriangle, CheckCircle2, Search, Wrench, XCircle } from "lucide-react";
|
||||
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import { Dialog } from "@/components/ui/dialog";
|
||||
import { Input, Textarea } from "@/components/ui/input";
|
||||
import { Select } from "@/components/ui/select";
|
||||
import { Table } from "@/components/ui/table";
|
||||
import type { ApiResult } from "@/modules/core/server/api";
|
||||
import type { DeviceAsset, DeviceAssetInput, DeviceAssetStatus, DeviceOperationsData, MaintenanceTicket, MaintenanceTicketInput, MaintenanceTicketPriority, MaintenanceTicketStatus } from "@/modules/devices/types";
|
||||
import { DEVICE_ASSET_STATUS_LABELS, DEVICE_ASSET_STATUS_VALUES, MAINTENANCE_TICKET_PRIORITY_LABELS, MAINTENANCE_TICKET_PRIORITY_VALUES, MAINTENANCE_TICKET_STATUS_LABELS, MAINTENANCE_TICKET_STATUS_VALUES } from "@/modules/devices/types";
|
||||
|
||||
type DevicesWorkspaceClientProps = {
|
||||
canManage: boolean;
|
||||
initialData: DeviceOperationsData;
|
||||
};
|
||||
|
||||
type DialogState =
|
||||
| { kind: "device"; mode: "create"; value: DeviceAssetInput }
|
||||
| { kind: "device"; mode: "edit"; id: string; value: DeviceAssetInput }
|
||||
| { kind: "ticket"; mode: "create"; value: MaintenanceTicketInput }
|
||||
| { kind: "ticket"; mode: "edit"; id: string; value: MaintenanceTicketInput };
|
||||
|
||||
const emptyDevice: DeviceAssetInput = {
|
||||
name: "",
|
||||
code: "",
|
||||
category: "",
|
||||
location: "",
|
||||
status: "active",
|
||||
lastInspectedAt: undefined,
|
||||
notes: "",
|
||||
};
|
||||
|
||||
const emptyTicket: MaintenanceTicketInput = {
|
||||
deviceId: undefined,
|
||||
title: "",
|
||||
description: "",
|
||||
priority: "normal",
|
||||
status: "open",
|
||||
assigneeLabel: "",
|
||||
resolutionNotes: "",
|
||||
};
|
||||
|
||||
function formatDateTime(value: string | undefined): string {
|
||||
return value ? new Date(value).toLocaleString("zh-CN") : "-";
|
||||
}
|
||||
|
||||
function deviceToInput(device: DeviceAsset): DeviceAssetInput {
|
||||
return {
|
||||
name: device.name,
|
||||
code: device.code,
|
||||
category: device.category,
|
||||
location: device.location,
|
||||
status: device.status,
|
||||
lastInspectedAt: device.lastInspectedAt,
|
||||
notes: device.notes,
|
||||
};
|
||||
}
|
||||
|
||||
function ticketToInput(ticket: MaintenanceTicket): MaintenanceTicketInput {
|
||||
return {
|
||||
deviceId: ticket.deviceId,
|
||||
title: ticket.title,
|
||||
description: ticket.description,
|
||||
priority: ticket.priority,
|
||||
status: ticket.status,
|
||||
assigneeLabel: ticket.assigneeLabel,
|
||||
resolutionNotes: ticket.resolutionNotes,
|
||||
};
|
||||
}
|
||||
|
||||
function badgeVariant(status: string): "danger" | "secondary" | "success" | "warning" {
|
||||
if (status === "active" || status === "resolved" || status === "closed") {
|
||||
return "success";
|
||||
}
|
||||
if (status === "maintenance" || status === "open" || status === "assigned" || status === "urgent") {
|
||||
return "warning";
|
||||
}
|
||||
if (status === "disabled" || status === "retired" || status === "cancelled") {
|
||||
return "danger";
|
||||
}
|
||||
return "secondary";
|
||||
}
|
||||
|
||||
export function DevicesWorkspaceClient({ canManage, initialData }: DevicesWorkspaceClientProps): React.ReactElement {
|
||||
const [data, setData] = useState(initialData);
|
||||
const [query, setQuery] = useState("");
|
||||
const [deviceStatus, setDeviceStatus] = useState<"all" | DeviceAssetStatus>("all");
|
||||
const [ticketStatus, setTicketStatus] = useState<"all" | MaintenanceTicketStatus>("all");
|
||||
const [dialog, setDialog] = useState<DialogState | undefined>();
|
||||
const [message, setMessage] = useState("");
|
||||
const [isPending, setIsPending] = useState(false);
|
||||
const normalizedQuery = query.trim().toLowerCase();
|
||||
|
||||
const filteredDevices = useMemo(
|
||||
() =>
|
||||
data.devices.filter((device) => {
|
||||
const matchesQuery = !normalizedQuery || [device.name, device.code, device.category, device.location, device.notes].join(" ").toLowerCase().includes(normalizedQuery);
|
||||
const matchesStatus = deviceStatus === "all" || device.status === deviceStatus;
|
||||
return matchesQuery && matchesStatus;
|
||||
}),
|
||||
[data.devices, deviceStatus, normalizedQuery],
|
||||
);
|
||||
const filteredTickets = useMemo(
|
||||
() =>
|
||||
data.tickets.filter((ticket) => {
|
||||
const matchesQuery = !normalizedQuery || [ticket.title, ticket.description, ticket.deviceName, ticket.assigneeLabel].join(" ").toLowerCase().includes(normalizedQuery);
|
||||
const matchesStatus = ticketStatus === "all" || ticket.status === ticketStatus;
|
||||
return matchesQuery && matchesStatus;
|
||||
}),
|
||||
[data.tickets, normalizedQuery, ticketStatus],
|
||||
);
|
||||
|
||||
async function refreshData(): Promise<void> {
|
||||
const response = await fetch("/api/devices/assets");
|
||||
const result = (await response.json()) as ApiResult<{ data: DeviceOperationsData }>;
|
||||
if (result.success) {
|
||||
setData(result.data);
|
||||
}
|
||||
}
|
||||
|
||||
async function submitDialog(event: FormEvent<HTMLFormElement>): Promise<void> {
|
||||
event.preventDefault();
|
||||
if (!dialog || !canManage) {
|
||||
setMessage("当前角色无权维护设备运维");
|
||||
return;
|
||||
}
|
||||
|
||||
const isCreate = dialog.mode === "create";
|
||||
const path =
|
||||
dialog.kind === "device"
|
||||
? isCreate
|
||||
? "/api/devices/assets"
|
||||
: `/api/devices/assets/${dialog.id}`
|
||||
: isCreate
|
||||
? "/api/devices/tickets"
|
||||
: `/api/devices/tickets/${dialog.id}`;
|
||||
setIsPending(true);
|
||||
const response = await fetch(path, {
|
||||
method: isCreate ? "POST" : "PATCH",
|
||||
headers: { "content-type": "application/json" },
|
||||
body: JSON.stringify(dialog.value),
|
||||
});
|
||||
const result = (await response.json()) as ApiResult<Record<string, unknown>>;
|
||||
setIsPending(false);
|
||||
setMessage(result.reason);
|
||||
if (result.success) {
|
||||
setDialog(undefined);
|
||||
await refreshData();
|
||||
}
|
||||
}
|
||||
|
||||
async function remove(kind: "device" | "ticket", id: string): Promise<void> {
|
||||
if (!canManage) {
|
||||
setMessage("当前角色无权删除设备运维记录");
|
||||
return;
|
||||
}
|
||||
const path = kind === "device" ? `/api/devices/assets/${id}` : `/api/devices/tickets/${id}`;
|
||||
setIsPending(true);
|
||||
const response = await fetch(path, { method: "DELETE" });
|
||||
const result = (await response.json()) as ApiResult<Record<string, unknown>>;
|
||||
setIsPending(false);
|
||||
setMessage(result.reason);
|
||||
if (result.success) {
|
||||
await refreshData();
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="mx-auto flex w-full max-w-7xl flex-col gap-5">
|
||||
<section className="grid gap-4 md:grid-cols-2 xl:grid-cols-4">
|
||||
<MetricCard icon={CheckCircle2} label="运行设备" value={data.metrics.activeDevices} />
|
||||
<MetricCard icon={Wrench} label="维护中设备" value={data.metrics.maintenanceDevices} />
|
||||
<MetricCard icon={AlertTriangle} label="待处理工单" value={data.metrics.openTickets} />
|
||||
<MetricCard icon={XCircle} label="紧急工单" value={data.metrics.urgentTickets} />
|
||||
</section>
|
||||
|
||||
<section className="flex flex-col gap-3 border-b pb-4 xl:flex-row xl:items-center xl:justify-between">
|
||||
<div>
|
||||
<h1 className="text-3xl font-semibold tracking-normal">设备运维</h1>
|
||||
<p className="mt-2 text-sm text-muted-foreground">维护设备台账、维修工单和运行状态。</p>
|
||||
</div>
|
||||
<div className="grid gap-2 sm:grid-cols-2 xl:flex xl:items-center">
|
||||
<label className="relative block sm:col-span-2 xl:col-span-1">
|
||||
<Search className="pointer-events-none absolute left-3 top-1/2 size-4 -translate-y-1/2 text-muted-foreground" />
|
||||
<Input className="w-full pl-9 xl:w-72" onChange={(event) => setQuery(event.target.value)} placeholder="搜索设备、工单或位置" value={query} />
|
||||
</label>
|
||||
<Select aria-label="设备状态" onValueChange={(value) => setDeviceStatus(value as "all" | DeviceAssetStatus)} options={[{ value: "all", label: "全部设备状态" }, ...DEVICE_ASSET_STATUS_VALUES.map((value) => ({ value, label: DEVICE_ASSET_STATUS_LABELS[value] }))]} value={deviceStatus} />
|
||||
<Select aria-label="工单状态" onValueChange={(value) => setTicketStatus(value as "all" | MaintenanceTicketStatus)} options={[{ value: "all", label: "全部工单状态" }, ...MAINTENANCE_TICKET_STATUS_VALUES.map((value) => ({ value, label: MAINTENANCE_TICKET_STATUS_LABELS[value] }))]} value={ticketStatus} />
|
||||
<Button disabled={!canManage} onClick={() => setDialog({ kind: "device", mode: "create", value: emptyDevice })} type="button">新增设备</Button>
|
||||
<Button disabled={!canManage} onClick={() => setDialog({ kind: "ticket", mode: "create", value: emptyTicket })} type="button" variant="outline">新增工单</Button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{message ? <p className="rounded-md bg-secondary px-3 py-2 text-sm text-secondary-foreground" role="status">{message}</p> : null}
|
||||
|
||||
<Card>
|
||||
<CardHeader><CardTitle>设备台账</CardTitle></CardHeader>
|
||||
<CardContent className="overflow-x-auto">
|
||||
<Table className="w-full min-w-[900px] text-sm">
|
||||
<Table.Header className="bg-secondary text-left text-xs text-muted-foreground">
|
||||
<Table.Row>
|
||||
<Table.Head className="px-4 py-3">设备</Table.Head>
|
||||
<Table.Head className="px-4 py-3">分类</Table.Head>
|
||||
<Table.Head className="px-4 py-3">位置</Table.Head>
|
||||
<Table.Head className="px-4 py-3">状态</Table.Head>
|
||||
<Table.Head className="px-4 py-3">最近巡检</Table.Head>
|
||||
<Table.Head className="px-4 py-3 text-right">操作</Table.Head>
|
||||
</Table.Row>
|
||||
</Table.Header>
|
||||
<Table.Body className="divide-y bg-card">
|
||||
{filteredDevices.map((device) => (
|
||||
<Table.Row key={device.id}>
|
||||
<Table.Cell className="px-4 py-3"><p className="font-medium">{device.name}</p><p className="text-xs text-muted-foreground">{device.code} / {device.notes || "-"}</p></Table.Cell>
|
||||
<Table.Cell className="px-4 py-3 text-muted-foreground">{device.category || "-"}</Table.Cell>
|
||||
<Table.Cell className="px-4 py-3 text-muted-foreground">{device.location || "-"}</Table.Cell>
|
||||
<Table.Cell className="px-4 py-3"><Badge variant={badgeVariant(device.status)}>{DEVICE_ASSET_STATUS_LABELS[device.status]}</Badge></Table.Cell>
|
||||
<Table.Cell className="px-4 py-3 text-muted-foreground">{formatDateTime(device.lastInspectedAt)}</Table.Cell>
|
||||
<Table.Cell className="px-4 py-3"><div className="flex justify-end gap-2"><Button disabled={!canManage || isPending} onClick={() => setDialog({ kind: "device", mode: "edit", id: device.id, value: deviceToInput(device) })} size="sm" type="button" variant="outline">编辑</Button><Button disabled={!canManage || isPending} onClick={() => remove("device", device.id)} size="sm" type="button" variant="outline">删除</Button></div></Table.Cell>
|
||||
</Table.Row>
|
||||
))}
|
||||
{filteredDevices.length === 0 ? <Table.Row><Table.Cell className="px-4 py-8 text-center text-muted-foreground" colSpan={6}>暂无设备</Table.Cell></Table.Row> : null}
|
||||
</Table.Body>
|
||||
</Table>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader><CardTitle>维修工单</CardTitle></CardHeader>
|
||||
<CardContent className="overflow-x-auto">
|
||||
<Table className="w-full min-w-[980px] text-sm">
|
||||
<Table.Header className="bg-secondary text-left text-xs text-muted-foreground">
|
||||
<Table.Row>
|
||||
<Table.Head className="px-4 py-3">工单</Table.Head>
|
||||
<Table.Head className="px-4 py-3">设备</Table.Head>
|
||||
<Table.Head className="px-4 py-3">优先级</Table.Head>
|
||||
<Table.Head className="px-4 py-3">状态</Table.Head>
|
||||
<Table.Head className="px-4 py-3">负责人</Table.Head>
|
||||
<Table.Head className="px-4 py-3">更新时间</Table.Head>
|
||||
<Table.Head className="px-4 py-3 text-right">操作</Table.Head>
|
||||
</Table.Row>
|
||||
</Table.Header>
|
||||
<Table.Body className="divide-y bg-card">
|
||||
{filteredTickets.map((ticket) => (
|
||||
<Table.Row key={ticket.id}>
|
||||
<Table.Cell className="px-4 py-3"><p className="font-medium">{ticket.title}</p><p className="text-xs text-muted-foreground">{ticket.description || ticket.resolutionNotes || "-"}</p></Table.Cell>
|
||||
<Table.Cell className="px-4 py-3 text-muted-foreground">{ticket.deviceName || "-"}</Table.Cell>
|
||||
<Table.Cell className="px-4 py-3"><Badge variant={badgeVariant(ticket.priority)}>{MAINTENANCE_TICKET_PRIORITY_LABELS[ticket.priority]}</Badge></Table.Cell>
|
||||
<Table.Cell className="px-4 py-3"><Badge variant={badgeVariant(ticket.status)}>{MAINTENANCE_TICKET_STATUS_LABELS[ticket.status]}</Badge></Table.Cell>
|
||||
<Table.Cell className="px-4 py-3 text-muted-foreground">{ticket.assigneeLabel || "-"}</Table.Cell>
|
||||
<Table.Cell className="px-4 py-3 text-muted-foreground">{formatDateTime(ticket.updatedAt)}</Table.Cell>
|
||||
<Table.Cell className="px-4 py-3"><div className="flex justify-end gap-2"><Button disabled={!canManage || isPending} onClick={() => setDialog({ kind: "ticket", mode: "edit", id: ticket.id, value: ticketToInput(ticket) })} size="sm" type="button" variant="outline">编辑</Button><Button disabled={!canManage || isPending} onClick={() => remove("ticket", ticket.id)} size="sm" type="button" variant="outline">删除</Button></div></Table.Cell>
|
||||
</Table.Row>
|
||||
))}
|
||||
{filteredTickets.length === 0 ? <Table.Row><Table.Cell className="px-4 py-8 text-center text-muted-foreground" colSpan={7}>暂无维修工单</Table.Cell></Table.Row> : null}
|
||||
</Table.Body>
|
||||
</Table>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Dialog onClose={() => setDialog(undefined)} open={dialog !== undefined} title={dialog?.kind === "device" ? "设备台账" : "维修工单"} width="lg">
|
||||
{dialog ? (
|
||||
<form className="grid gap-3" onSubmit={submitDialog}>
|
||||
{dialog.kind === "device" ? <DeviceForm dialog={dialog} setDialog={setDialog} /> : <TicketForm devices={data.devices} dialog={dialog} setDialog={setDialog} />}
|
||||
<div className="flex flex-col-reverse gap-2 sm:flex-row sm:justify-end">
|
||||
<Button disabled={isPending} onClick={() => setDialog(undefined)} type="button" variant="outline">取消</Button>
|
||||
<Button disabled={isPending || !canManage} type="submit">保存</Button>
|
||||
</div>
|
||||
</form>
|
||||
) : null}
|
||||
</Dialog>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function DeviceForm({ dialog, setDialog }: { dialog: Extract<DialogState, { kind: "device" }>; setDialog: (dialog: DialogState) => void }): React.ReactElement {
|
||||
const value = dialog.value;
|
||||
function update(next: Partial<DeviceAssetInput>): void {
|
||||
setDialog({ ...dialog, value: { ...value, ...next } });
|
||||
}
|
||||
return (
|
||||
<>
|
||||
<Input label="设备名称" onChange={(event) => update({ name: event.target.value })} required value={value.name} />
|
||||
<Input label="设备编号" onChange={(event) => update({ code: event.target.value })} required value={value.code} />
|
||||
<Input label="分类" onChange={(event) => update({ category: event.target.value })} value={value.category} />
|
||||
<Input label="位置" onChange={(event) => update({ location: event.target.value })} value={value.location} />
|
||||
<Select aria-label="设备状态" onValueChange={(status) => update({ status: status as DeviceAssetStatus })} options={DEVICE_ASSET_STATUS_VALUES.map((status) => ({ value: status, label: DEVICE_ASSET_STATUS_LABELS[status] }))} value={value.status} />
|
||||
<Input label="最近巡检时间" onChange={(event) => update({ lastInspectedAt: event.target.value || undefined })} type="datetime-local" value={value.lastInspectedAt ? value.lastInspectedAt.slice(0, 16) : ""} />
|
||||
<Textarea label="备注" onChange={(event) => update({ notes: event.target.value })} value={value.notes} />
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
function TicketForm({ devices, dialog, setDialog }: { devices: DeviceAsset[]; dialog: Extract<DialogState, { kind: "ticket" }>; setDialog: (dialog: DialogState) => void }): React.ReactElement {
|
||||
const value = dialog.value;
|
||||
function update(next: Partial<MaintenanceTicketInput>): void {
|
||||
setDialog({ ...dialog, value: { ...value, ...next } });
|
||||
}
|
||||
return (
|
||||
<>
|
||||
<Select aria-label="关联设备" onValueChange={(deviceId) => update({ deviceId: deviceId || undefined })} options={[{ value: "", label: "不关联设备" }, ...devices.map((device) => ({ value: device.id, label: `${device.name} / ${device.code}` }))]} value={value.deviceId ?? ""} />
|
||||
<Input label="工单标题" onChange={(event) => update({ title: event.target.value })} required value={value.title} />
|
||||
<Textarea label="问题描述" onChange={(event) => update({ description: event.target.value })} value={value.description} />
|
||||
<Select aria-label="优先级" onValueChange={(priority) => update({ priority: priority as MaintenanceTicketPriority })} options={MAINTENANCE_TICKET_PRIORITY_VALUES.map((priority) => ({ value: priority, label: MAINTENANCE_TICKET_PRIORITY_LABELS[priority] }))} value={value.priority} />
|
||||
<Select aria-label="工单状态" onValueChange={(status) => update({ status: status as MaintenanceTicketStatus })} options={MAINTENANCE_TICKET_STATUS_VALUES.map((status) => ({ value: status, label: MAINTENANCE_TICKET_STATUS_LABELS[status] }))} value={value.status} />
|
||||
<Input label="负责人" onChange={(event) => update({ assigneeLabel: event.target.value })} value={value.assigneeLabel} />
|
||||
<Textarea label="处理记录" onChange={(event) => update({ resolutionNotes: event.target.value })} value={value.resolutionNotes} />
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
function MetricCard({ icon: Icon, label, value }: { icon: React.ComponentType<{ "aria-hidden"?: boolean; className?: string }>; label: string; value: number }): React.ReactElement {
|
||||
return (
|
||||
<Card>
|
||||
<CardHeader className="flex flex-row items-center justify-between p-4">
|
||||
<div><p className="text-sm text-muted-foreground">{label}</p><CardTitle className="mt-2 text-3xl">{value}</CardTitle></div>
|
||||
<Icon className="size-5 text-primary" aria-hidden={true} />
|
||||
</CardHeader>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user