fix(ticket): restore create and tag editing flows

This commit is contained in:
mlogclub
2026-05-02 20:12:01 +08:00
parent 7f867e1699
commit f53a581f5e
2 changed files with 75 additions and 6 deletions
@@ -19,10 +19,14 @@ import {
changeTicketStatus, changeTicketStatus,
createTicketProgress, createTicketProgress,
fetchTicketDetail, fetchTicketDetail,
type CreateTicketPayload,
type TicketDetail, type TicketDetail,
type TicketStatus, type TicketStatus,
type UpdateTicketPayload,
updateTicket,
} from "@/lib/api/ticket" } from "@/lib/api/ticket"
import { cn, formatDateTime } from "@/lib/utils" import { cn, formatDateTime } from "@/lib/utils"
import { EditDialog } from "./edit"
import { TicketAssignDialog } from "./ticket-assign-dialog" import { TicketAssignDialog } from "./ticket-assign-dialog"
import { TicketStatusBadge } from "./ticket-status-badge" import { TicketStatusBadge } from "./ticket-status-badge"
@@ -69,6 +73,8 @@ export function TicketDetailDialog({
const [progressSaving, setProgressSaving] = useState(false) const [progressSaving, setProgressSaving] = useState(false)
const [progressContent, setProgressContent] = useState("") const [progressContent, setProgressContent] = useState("")
const [assignOpen, setAssignOpen] = useState(false) const [assignOpen, setAssignOpen] = useState(false)
const [editOpen, setEditOpen] = useState(false)
const [editSaving, setEditSaving] = useState(false)
const loadDetail = useCallback(async () => { const loadDetail = useCallback(async () => {
if (!open || !ticketId) { if (!open || !ticketId) {
@@ -138,6 +144,25 @@ export function TicketDetailDialog({
onChanged() onChanged()
} }
async function handleUpdateTicket(payload: CreateTicketPayload | UpdateTicketPayload) {
if (!("ticketId" in payload) || payload.ticketId <= 0) {
toast.error("请选择工单")
return
}
setEditSaving(true)
try {
await updateTicket(payload)
toast.success("工单已更新")
setEditOpen(false)
await loadDetail()
onChanged()
} catch (error) {
toast.error(error instanceof Error ? error.message : "更新工单失败")
} finally {
setEditSaving(false)
}
}
const ticket = detail?.ticket const ticket = detail?.ticket
return ( return (
@@ -206,7 +231,12 @@ export function TicketDetailDialog({
</section> </section>
<section className="space-y-2"> <section className="space-y-2">
<div className="text-xs font-medium text-muted-foreground"></div> <div className="flex items-center justify-between gap-2">
<div className="text-xs font-medium text-muted-foreground"></div>
<Button type="button" size="sm" variant="outline" onClick={() => setEditOpen(true)}>
</Button>
</div>
{ticket.tags && ticket.tags.length > 0 ? ( {ticket.tags && ticket.tags.length > 0 ? (
<div className="flex flex-wrap gap-1.5"> <div className="flex flex-wrap gap-1.5">
{ticket.tags.map((tag) => ( {ticket.tags.map((tag) => (
@@ -295,6 +325,13 @@ export function TicketDetailDialog({
onOpenChange={setAssignOpen} onOpenChange={setAssignOpen}
onSuccess={handleAssigned} onSuccess={handleAssigned}
/> />
<EditDialog
open={editOpen}
saving={editSaving}
itemId={ticket?.id ?? null}
onOpenChange={setEditOpen}
onSubmit={handleUpdateTicket}
/>
</> </>
) )
} }
+37 -5
View File
@@ -1,6 +1,6 @@
"use client" "use client"
import { RefreshCcwIcon, SearchXIcon } from "lucide-react" import { PlusIcon, RefreshCcwIcon, SearchXIcon } from "lucide-react"
import { useCallback, useEffect, useMemo, useState } from "react" import { useCallback, useEffect, useMemo, useState } from "react"
import { toast } from "sonner" import { toast } from "sonner"
@@ -24,14 +24,17 @@ import {
type TagTree, type TagTree,
} from "@/lib/api/admin" } from "@/lib/api/admin"
import { import {
createTicket,
fetchTicketSummary, fetchTicketSummary,
fetchTickets, fetchTickets,
type CreateTicketPayload,
type TicketItem, type TicketItem,
type TicketListQuery, type TicketListQuery,
type TicketStatus, type TicketStatus,
type TicketSummary, type TicketSummary,
} from "@/lib/api/ticket" } from "@/lib/api/ticket"
import { cn, formatDateTime } from "@/lib/utils" import { cn, formatDateTime } from "@/lib/utils"
import { EditDialog } from "./_components/edit"
import { TicketAssignDialog } from "./_components/ticket-assign-dialog" import { TicketAssignDialog } from "./_components/ticket-assign-dialog"
import { TicketDetailDialog } from "./_components/ticket-detail-dialog" import { TicketDetailDialog } from "./_components/ticket-detail-dialog"
import { TicketStatusBadge } from "./_components/ticket-status-badge" import { TicketStatusBadge } from "./_components/ticket-status-badge"
@@ -114,6 +117,8 @@ export default function TicketsPage() {
const [batchAssignOpen, setBatchAssignOpen] = useState(false) const [batchAssignOpen, setBatchAssignOpen] = useState(false)
const [selectedTicketId, setSelectedTicketId] = useState<number | null>(null) const [selectedTicketId, setSelectedTicketId] = useState<number | null>(null)
const [detailOpen, setDetailOpen] = useState(false) const [detailOpen, setDetailOpen] = useState(false)
const [createOpen, setCreateOpen] = useState(false)
const [savingCreate, setSavingCreate] = useState(false)
const quickViews = useMemo( const quickViews = useMemo(
() => () =>
@@ -237,6 +242,20 @@ export default function TicketsPage() {
setStaleHours("24") setStaleHours("24")
} }
async function handleCreateTicket(payload: CreateTicketPayload) {
setSavingCreate(true)
try {
await createTicket(payload)
toast.success("工单已创建")
setCreateOpen(false)
await loadData()
} catch (error) {
toast.error(error instanceof Error ? error.message : "创建工单失败")
} finally {
setSavingCreate(false)
}
}
return ( return (
<div className="flex flex-col gap-4 p-6"> <div className="flex flex-col gap-4 p-6">
<div className="flex flex-wrap items-center justify-between gap-3"> <div className="flex flex-wrap items-center justify-between gap-3">
@@ -244,10 +263,16 @@ export default function TicketsPage() {
<h1 className="text-2xl font-semibold tracking-normal"></h1> <h1 className="text-2xl font-semibold tracking-normal"></h1>
<p className="text-sm text-muted-foreground"></p> <p className="text-sm text-muted-foreground"></p>
</div> </div>
<Button type="button" variant="outline" onClick={() => void loadData()} disabled={loading}> <div className="flex items-center gap-2">
<RefreshCcwIcon className={cn("size-4", loading ? "animate-spin" : "")} /> <Button type="button" variant="outline" onClick={() => void loadData()} disabled={loading}>
<RefreshCcwIcon className={cn("size-4", loading ? "animate-spin" : "")} />
</Button>
</Button>
<Button type="button" onClick={() => setCreateOpen(true)}>
<PlusIcon className="size-4" />
</Button>
</div>
</div> </div>
<div className="rounded-lg border bg-background/80 p-2"> <div className="rounded-lg border bg-background/80 p-2">
@@ -431,6 +456,13 @@ export default function TicketsPage() {
onOpenChange={setBatchAssignOpen} onOpenChange={setBatchAssignOpen}
onSuccess={loadData} onSuccess={loadData}
/> />
<EditDialog
open={createOpen}
saving={savingCreate}
itemId={null}
onOpenChange={setCreateOpen}
onSubmit={handleCreateTicket}
/>
<TicketDetailDialog <TicketDetailDialog
open={detailOpen} open={detailOpen}
ticketId={selectedTicketId} ticketId={selectedTicketId}