feat(csms): 充电桩添加 deviceName 字段，区别于 identifier 用于区分设备
This commit is contained in:
@@ -77,6 +77,7 @@ function relativeTime(iso: string): string {
|
||||
// ── Edit form type ─────────────────────────────────────────────────────────
|
||||
|
||||
type EditForm = {
|
||||
deviceName: string;
|
||||
chargePointVendor: string;
|
||||
chargePointModel: string;
|
||||
registrationStatus: "Accepted" | "Pending" | "Rejected";
|
||||
@@ -96,6 +97,7 @@ export default function ChargePointDetailPage({ params }: { params: Promise<{ id
|
||||
const [editOpen, setEditOpen] = useState(false);
|
||||
const [editBusy, setEditBusy] = useState(false);
|
||||
const [editForm, setEditForm] = useState<EditForm>({
|
||||
deviceName: "",
|
||||
chargePointVendor: "",
|
||||
chargePointModel: "",
|
||||
registrationStatus: "Pending",
|
||||
@@ -122,6 +124,7 @@ export default function ChargePointDetailPage({ params }: { params: Promise<{ id
|
||||
const openEdit = () => {
|
||||
if (!cp) return;
|
||||
setEditForm({
|
||||
deviceName: cp.deviceName ?? "",
|
||||
chargePointVendor: cp.chargePointVendor ?? "",
|
||||
chargePointModel: cp.chargePointModel ?? "",
|
||||
registrationStatus: cp.registrationStatus as EditForm["registrationStatus"],
|
||||
@@ -142,6 +145,7 @@ export default function ChargePointDetailPage({ params }: { params: Promise<{ id
|
||||
registrationStatus: editForm.registrationStatus,
|
||||
pricingMode: editForm.pricingMode,
|
||||
feePerKwh: editForm.pricingMode === "fixed" ? fee : 0,
|
||||
deviceName: editForm.deviceName.trim() || null,
|
||||
});
|
||||
await cpQuery.refetch();
|
||||
setEditOpen(false);
|
||||
@@ -202,9 +206,12 @@ export default function ChargePointDetailPage({ params }: { params: Promise<{ id
|
||||
<div className="flex flex-wrap items-start justify-between gap-4">
|
||||
<div className="space-y-1.5">
|
||||
<div className="flex flex-wrap items-center gap-2">
|
||||
<h1 className="font-mono text-2xl font-semibold text-foreground">
|
||||
{cp.chargePointIdentifier}
|
||||
<h1 className="text-2xl font-semibold text-foreground">
|
||||
{cp.deviceName ?? <span className="font-mono">{cp.chargePointIdentifier}</span>}
|
||||
</h1>
|
||||
{isAdmin && cp.deviceName && (
|
||||
<span className="font-mono text-sm text-muted">{cp.chargePointIdentifier}</span>
|
||||
)}
|
||||
<Chip
|
||||
color={registrationColorMap[cp.registrationStatus] ?? "warning"}
|
||||
size="sm"
|
||||
@@ -561,6 +568,16 @@ export default function ChargePointDetailPage({ params }: { params: Promise<{ id
|
||||
<Modal.Heading>编辑充电桩</Modal.Heading>
|
||||
</Modal.Header>
|
||||
<Modal.Body className="space-y-3">
|
||||
<TextField fullWidth>
|
||||
<Label className="text-sm font-medium">设备名称</Label>
|
||||
<Input
|
||||
placeholder="1号楼A区01号桩"
|
||||
value={editForm.deviceName}
|
||||
onChange={(e) =>
|
||||
setEditForm((f) => ({ ...f, deviceName: e.target.value }))
|
||||
}
|
||||
/>
|
||||
</TextField>
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
<TextField fullWidth>
|
||||
<Label className="text-sm font-medium">品牌</Label>
|
||||
|
||||
@@ -97,6 +97,7 @@ const registrationColorMap: Record<string, "success" | "warning" | "danger"> = {
|
||||
|
||||
type FormData = {
|
||||
chargePointIdentifier: string;
|
||||
deviceName: string;
|
||||
chargePointVendor: string;
|
||||
chargePointModel: string;
|
||||
registrationStatus: "Accepted" | "Pending" | "Rejected";
|
||||
@@ -106,6 +107,7 @@ type FormData = {
|
||||
|
||||
const EMPTY_FORM: FormData = {
|
||||
chargePointIdentifier: "",
|
||||
deviceName: "",
|
||||
chargePointVendor: "",
|
||||
chargePointModel: "",
|
||||
registrationStatus: "Pending",
|
||||
@@ -141,6 +143,7 @@ export default function ChargePointsPage() {
|
||||
setFormTarget(cp);
|
||||
setFormData({
|
||||
chargePointIdentifier: cp.chargePointIdentifier,
|
||||
deviceName: cp.deviceName ?? "",
|
||||
chargePointVendor: cp.chargePointVendor ?? "",
|
||||
chargePointModel: cp.chargePointModel ?? "",
|
||||
registrationStatus: cp.registrationStatus as FormData["registrationStatus"],
|
||||
@@ -163,6 +166,7 @@ export default function ChargePointsPage() {
|
||||
registrationStatus: formData.registrationStatus,
|
||||
pricingMode: formData.pricingMode,
|
||||
feePerKwh: formData.pricingMode === "fixed" ? fee : 0,
|
||||
deviceName: formData.deviceName.trim() || null,
|
||||
});
|
||||
} else {
|
||||
// Create
|
||||
@@ -173,6 +177,7 @@ export default function ChargePointsPage() {
|
||||
registrationStatus: formData.registrationStatus,
|
||||
pricingMode: formData.pricingMode,
|
||||
feePerKwh: formData.pricingMode === "fixed" ? fee : 0,
|
||||
deviceName: formData.deviceName.trim() || undefined,
|
||||
});
|
||||
}
|
||||
await refetchList();
|
||||
@@ -258,8 +263,18 @@ export default function ChargePointsPage() {
|
||||
}
|
||||
/>
|
||||
</TextField>
|
||||
<TextField fullWidth>
|
||||
<Label className="text-sm font-medium">设备名称</Label>
|
||||
<Input
|
||||
placeholder="1号楼A区01号桩"
|
||||
value={formData.deviceName}
|
||||
onChange={(e) =>
|
||||
setFormData((f) => ({ ...f, deviceName: e.target.value }))
|
||||
}
|
||||
/>
|
||||
</TextField>
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
<TextField fullWidth>
|
||||
<TextField fullWidth isReadOnly={isEdit}>
|
||||
<Label className="text-sm font-medium">品牌</Label>
|
||||
<Input
|
||||
placeholder="ABB"
|
||||
@@ -269,7 +284,7 @@ export default function ChargePointsPage() {
|
||||
}
|
||||
/>
|
||||
</TextField>
|
||||
<TextField fullWidth>
|
||||
<TextField fullWidth isReadOnly={isEdit}>
|
||||
<Label className="text-sm font-medium">型号</Label>
|
||||
<Input
|
||||
placeholder="Terra AC"
|
||||
@@ -381,7 +396,9 @@ export default function ChargePointsPage() {
|
||||
<Modal.Dialog className="sm:max-w-lg">
|
||||
<Modal.CloseTrigger />
|
||||
<Modal.Header>
|
||||
<Modal.Heading>{qrTarget?.chargePointIdentifier} — 充电二维码</Modal.Heading>
|
||||
<Modal.Heading>
|
||||
{qrTarget?.deviceName ?? qrTarget?.chargePointIdentifier} — 充电二维码
|
||||
</Modal.Heading>
|
||||
</Modal.Header>
|
||||
<Modal.Body className="space-y-4">
|
||||
<p className="text-sm text-muted">
|
||||
@@ -431,7 +448,7 @@ export default function ChargePointsPage() {
|
||||
<Table.ScrollContainer>
|
||||
<Table.Content aria-label="充电桩列表" className="min-w-200">
|
||||
<Table.Header>
|
||||
<Table.Column isRowHeader>标识符</Table.Column>
|
||||
<Table.Column isRowHeader>设备名称</Table.Column>
|
||||
{isAdmin && <Table.Column>品牌 / 型号</Table.Column>}
|
||||
{isAdmin && <Table.Column>注册状态</Table.Column>}
|
||||
<Table.Column>计费模式</Table.Column>
|
||||
@@ -469,12 +486,19 @@ export default function ChargePointsPage() {
|
||||
: "bg-gray-300"
|
||||
}`}
|
||||
/>
|
||||
<Link
|
||||
href={`/dashboard/charge-points/${cp.id}`}
|
||||
className="font-medium text-accent"
|
||||
>
|
||||
{cp.chargePointIdentifier}
|
||||
</Link>
|
||||
<div className="flex flex-col">
|
||||
<Link
|
||||
href={`/dashboard/charge-points/${cp.id}`}
|
||||
className="font-medium text-accent"
|
||||
>
|
||||
{cp.deviceName ?? cp.chargePointIdentifier}
|
||||
</Link>
|
||||
{isAdmin && cp.deviceName && (
|
||||
<span className="font-mono text-xs text-muted">
|
||||
{cp.chargePointIdentifier}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</Tooltip.Trigger>
|
||||
<Tooltip.Content placement="start">
|
||||
@@ -594,9 +618,14 @@ export default function ChargePointsPage() {
|
||||
<Modal.Body>
|
||||
<p className="text-sm text-muted">
|
||||
将删除充电桩{" "}
|
||||
<span className="font-mono font-medium text-foreground">
|
||||
{cp.chargePointIdentifier}
|
||||
<span className="font-medium text-foreground">
|
||||
{cp.deviceName ?? cp.chargePointIdentifier}
|
||||
</span>
|
||||
{cp.deviceName && (
|
||||
<span className="font-mono ml-1 text-xs text-muted">
|
||||
({cp.chargePointIdentifier})
|
||||
</span>
|
||||
)}
|
||||
及其所有连接器和充电记录，此操作不可恢复。
|
||||
</p>
|
||||
</Modal.Body>
|
||||
|
||||
Reference in New Issue
Block a user