fix(ticket): remove batch assign and restructure detail dialog

This commit is contained in:
mlogclub
2026-05-02 21:22:36 +08:00
parent d1845f9ed4
commit d181ff4947
7 changed files with 162 additions and 313 deletions
@@ -183,21 +183,6 @@ func (c *TicketController) PostAssign() *web.JsonResult {
return web.JsonSuccess()
}
func (c *TicketController) PostBatch_assign() *web.JsonResult {
operator, err := services.AuthService.RequirePermission(c.Ctx, constants.PermissionTicketAssign)
if err != nil {
return web.JsonError(err)
}
req := request.BatchAssignTicketRequest{}
if err := params.ReadJSON(c.Ctx, &req); err != nil {
return web.JsonError(err)
}
if err := services.TicketService.BatchAssignTickets(req, operator); err != nil {
return web.JsonError(err)
}
return web.JsonSuccess()
}
func (c *TicketController) PostChange_status() *web.JsonResult {
operator, err := services.AuthService.RequirePermission(c.Ctx, constants.PermissionTicketChangeStatus)
if err != nil {
@@ -43,12 +43,6 @@ type CreateTicketProgressRequest struct {
Content string `json:"content"`
}
type BatchAssignTicketRequest struct {
TicketIDs []int64 `json:"ticketIds"`
ToUserID int64 `json:"toUserId"`
Reason string `json:"reason"`
}
type SaveTicketViewRequest struct {
ID int64 `json:"id"`
Name string `json:"name"`
-33
View File
@@ -330,39 +330,6 @@ func (s *ticketService) AssignTicket(req request.AssignTicketRequest, operator *
return nil
}
func (s *ticketService) BatchAssignTickets(req request.BatchAssignTicketRequest, operator *dto.AuthPrincipal) error {
if operator == nil {
return errorsx.Unauthorized("未登录或登录已过期")
}
ticketIDs := normalizeInt64IDs(req.TicketIDs)
if len(ticketIDs) == 0 {
return errorsx.InvalidParam("请选择工单")
}
assignedEvents := make([]events.TicketAssignedEvent, 0, len(ticketIDs))
if err := sqls.WithTransaction(func(ctx *sqls.TxContext) error {
for _, ticketID := range ticketIDs {
event, err := s.assignTicketTx(ctx.Tx, request.AssignTicketRequest{
TicketID: ticketID,
ToUserID: req.ToUserID,
Reason: req.Reason,
}, operator)
if err != nil {
return err
}
if event != nil {
assignedEvents = append(assignedEvents, *event)
}
}
return nil
}); err != nil {
return err
}
for i := range assignedEvents {
eventbus.PublishAsync(context.Background(), assignedEvents[i])
}
return nil
}
func (s *ticketService) ChangeStatus(req request.ChangeTicketStatusRequest, operator *dto.AuthPrincipal) error {
if operator == nil {
return errorsx.Unauthorized("未登录或登录已过期")
@@ -21,7 +21,7 @@ import {
fetchAgentProfilesAll,
type AdminAgentProfile,
} from "@/lib/api/admin"
import { assignTicket, batchAssignTickets } from "@/lib/api/ticket"
import { assignTicket } from "@/lib/api/ticket"
const schema = z.object({
toUserId: z.string().trim().min(1, "请选择处理人"),
@@ -44,7 +44,6 @@ const emptyForm: FormValues = {
type TicketAssignDialogProps = {
open: boolean
ticketId: number | null
ticketIds?: number[]
currentAssigneeId?: number
onOpenChange: (open: boolean) => void
onSuccess?: () => Promise<void> | void
@@ -53,7 +52,6 @@ type TicketAssignDialogProps = {
export function TicketAssignDialog({
open,
ticketId,
ticketIds,
currentAssigneeId,
onOpenChange,
onSuccess,
@@ -62,9 +60,8 @@ export function TicketAssignDialog({
<Dialog open={open} onOpenChange={onOpenChange}>
{open ? (
<TicketAssignDialogBody
key={ticketId ?? ticketIds?.join(",") ?? "ticket-assign"}
key={ticketId ?? "ticket-assign"}
ticketId={ticketId}
ticketIds={ticketIds}
currentAssigneeId={currentAssigneeId}
onOpenChange={onOpenChange}
onSuccess={onSuccess}
@@ -76,7 +73,6 @@ export function TicketAssignDialog({
function TicketAssignDialogBody({
ticketId,
ticketIds,
currentAssigneeId,
onOpenChange,
onSuccess,
@@ -140,34 +136,21 @@ function TicketAssignDialogBody({
}, [])
async function onFormSubmit(values: FormValues) {
const validTicketIds = (ticketIds ?? []).filter((item) => item > 0)
if (!ticketId && validTicketIds.length === 0) {
if (!ticketId) {
toast.error("请选择工单")
return
}
setSaving(true)
try {
if (validTicketIds.length > 0) {
await batchAssignTickets({
ticketIds: validTicketIds,
toUserId: Number(values.toUserId),
reason: values.reason.trim() || undefined,
})
if (!activeRef.current) {
return
}
toast.success(`已批量指派 ${validTicketIds.length} 张工单`)
} else {
await assignTicket({
ticketId: ticketId!,
toUserId: Number(values.toUserId),
reason: values.reason.trim() || undefined,
})
if (!activeRef.current) {
return
}
toast.success("处理人已更新")
await assignTicket({
ticketId,
toUserId: Number(values.toUserId),
reason: values.reason.trim() || undefined,
})
if (!activeRef.current) {
return
}
toast.success("处理人已更新")
if (!activeRef.current) {
return
}
@@ -188,7 +171,7 @@ function TicketAssignDialogBody({
return (
<DialogContent className="max-w-lg gap-0 p-0 sm:max-w-lg">
<DialogHeader className="px-6 pt-6">
<DialogTitle>{ticketIds?.length ? `批量指派工单(${ticketIds.length}` : "指派工单"}</DialogTitle>
<DialogTitle></DialogTitle>
</DialogHeader>
<form onSubmit={handleSubmit(onFormSubmit)}>
<div className="space-y-4 p-6">
@@ -4,15 +4,9 @@ import { useCallback, useEffect, useRef, useState } from "react"
import { MessageSquareTextIcon, RefreshCcwIcon, SendIcon, UserRoundIcon } from "lucide-react"
import { toast } from "sonner"
import { ProjectDialog } from "@/components/project-dialog"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import {
Dialog,
DialogContent,
DialogHeader,
DialogTitle,
} from "@/components/ui/dialog"
import { ScrollArea } from "@/components/ui/scroll-area"
import { Separator } from "@/components/ui/separator"
import { Textarea } from "@/components/ui/textarea"
import {
@@ -247,156 +241,163 @@ export function TicketDetailDialog({
return (
<>
<Dialog open={open} onOpenChange={onOpenChange}>
<DialogContent className="max-h-[88vh] gap-0 p-0 sm:max-w-3xl">
<DialogHeader className="border-b px-6 py-4">
<DialogTitle className="flex min-w-0 items-center gap-2 text-base">
<span className="truncate">{ticket?.title ?? "工单详情"}</span>
{ticket ? <TicketStatusBadge status={ticket.status} /> : null}
</DialogTitle>
{ticket ? (
<div className="mt-2 flex flex-wrap items-center gap-2 text-xs text-muted-foreground">
<span className="font-mono">{ticket.ticketNo}</span>
<span>{sourceLabel(ticket.source)}</span>
<span>{metadataValue(ticket.createdByName || ticket.createdBy)}</span>
</div>
) : null}
</DialogHeader>
<ProjectDialog
open={open}
onOpenChange={onOpenChange}
title={
<div className="flex min-w-0 items-center gap-2 pr-16 text-base">
<span className="truncate">{ticket?.title ?? "工单详情"}</span>
{ticket ? <TicketStatusBadge status={ticket.status} /> : null}
</div>
}
description={
ticket ? (
<div className="flex flex-wrap items-center gap-2 text-xs">
<span className="font-mono">{ticket.ticketNo}</span>
<span>{sourceLabel(ticket.source)}</span>
<span>{metadataValue(ticket.createdByName || ticket.createdBy)}</span>
</div>
) : undefined
}
size="xl"
allowFullscreen
bodyScrollable={false}
contentClassName="sm:max-w-5xl"
bodyClassName="overflow-hidden"
>
{loading && !ticket ? (
<div className="flex h-[520px] items-center justify-center gap-2 text-sm text-muted-foreground">
<RefreshCcwIcon className="size-4 animate-spin" />
...
</div>
) : ticket ? (
<div className="grid h-[min(72vh,680px)] min-h-0 grid-cols-1 overflow-hidden lg:grid-cols-[minmax(0,1fr)_380px]">
<div className="min-h-0 space-y-5 overflow-y-auto border-b p-6 lg:border-r lg:border-b-0">
<section className="space-y-2">
<div className="text-xs font-medium text-muted-foreground"></div>
<div className="whitespace-pre-wrap rounded-md border bg-muted/30 px-3 py-2 text-sm leading-6">
{ticket.description || "暂无描述"}
</div>
</section>
<ScrollArea className="max-h-[calc(88vh-74px)]">
{loading && !ticket ? (
<div className="flex items-center justify-center gap-2 px-6 py-12 text-sm text-muted-foreground">
<RefreshCcwIcon className="size-4 animate-spin" />
...
</div>
) : ticket ? (
<div className="space-y-5 p-6">
<section className="space-y-2">
<div className="text-xs font-medium text-muted-foreground"></div>
<div className="whitespace-pre-wrap rounded-md border bg-muted/30 px-3 py-2 text-sm leading-6">
{ticket.description || "暂无描述"}
</div>
</section>
<section className="grid gap-4 md:grid-cols-[minmax(0,1fr)_220px]">
<div className="space-y-2">
<div className="text-xs font-medium text-muted-foreground"></div>
<div className="flex flex-wrap gap-2">
{statusOptions.map((option) => (
<Button
key={option.value}
type="button"
size="sm"
variant={ticket.status === option.value ? "default" : "outline"}
disabled={!!statusSaving}
onClick={() => void handleStatusChange(option.value)}
>
{statusSaving === option.value ? "更新中..." : option.label}
</Button>
))}
</div>
</div>
<div className="space-y-2">
<div className="text-xs font-medium text-muted-foreground"></div>
<div className="flex items-center justify-between gap-2 rounded-md border px-3 py-2">
<div className="flex min-w-0 items-center gap-2 text-sm">
<UserRoundIcon className="size-4 shrink-0 text-muted-foreground" />
<span className="truncate">{ticket.currentAssigneeName || "未分配"}</span>
</div>
<Button type="button" size="sm" variant="outline" onClick={() => setAssignOpen(true)}>
<section className="grid gap-4 md:grid-cols-[minmax(0,1fr)_220px]">
<div className="space-y-2">
<div className="text-xs font-medium text-muted-foreground"></div>
<div className="flex flex-wrap gap-2">
{statusOptions.map((option) => (
<Button
key={option.value}
type="button"
size="sm"
variant={ticket.status === option.value ? "default" : "outline"}
disabled={!!statusSaving}
onClick={() => void handleStatusChange(option.value)}
>
{statusSaving === option.value ? "更新中..." : option.label}
</Button>
</div>
))}
</div>
</section>
<section className="space-y-2">
<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)}>
</div>
<div className="space-y-2">
<div className="text-xs font-medium text-muted-foreground"></div>
<div className="flex items-center justify-between gap-2 rounded-md border px-3 py-2">
<div className="flex min-w-0 items-center gap-2 text-sm">
<UserRoundIcon className="size-4 shrink-0 text-muted-foreground" />
<span className="truncate">{ticket.currentAssigneeName || "未分配"}</span>
</div>
<Button type="button" size="sm" variant="outline" onClick={() => setAssignOpen(true)}>
</Button>
</div>
{ticket.tags && ticket.tags.length > 0 ? (
<div className="flex flex-wrap gap-1.5">
{ticket.tags.map((tag) => (
<Badge key={tag.id} variant="outline">
{tag.name}
</Badge>
))}
</div>
) : (
<div className="text-sm text-muted-foreground"></div>
)}
</section>
</div>
</section>
<section className="grid gap-3 rounded-md border p-3 text-sm sm:grid-cols-2">
<MetadataItem label="客户" value={ticket.customer?.name || ticket.customerId} />
<MetadataItem label="联系方式" value={ticket.customer?.primaryMobile || ticket.customer?.primaryEmail} />
<MetadataItem label="来源" value={sourceLabel(ticket.source)} />
<MetadataItem label="渠道" value={ticket.channel} />
<MetadataItem label="会话 ID" value={ticket.conversationId || undefined} />
<MetadataItem label="最后更新" value={ticket.updatedAt ? formatDateTime(ticket.updatedAt) : undefined} />
</section>
<Separator />
<section className="space-y-3">
<div className="flex items-center gap-2 text-sm font-medium">
<MessageSquareTextIcon className="size-4 text-muted-foreground" />
</div>
<div className="space-y-2">
<Textarea
rows={3}
placeholder="记录本次处理进展"
value={progressContent}
onChange={(event) => setProgressContent(event.target.value)}
/>
<div className="flex justify-end">
<Button type="button" size="sm" disabled={progressSaving} onClick={() => void handleCreateProgress()}>
<SendIcon className="size-3.5" />
{progressSaving ? "提交中..." : "添加进展"}
</Button>
</div>
<section className="space-y-2">
<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 ? (
<div className="flex flex-wrap gap-1.5">
{ticket.tags.map((tag) => (
<Badge key={tag.id} variant="outline">
{tag.name}
</Badge>
))}
</div>
) : (
<div className="text-sm text-muted-foreground"></div>
)}
</section>
{detail.progresses && detail.progresses.length > 0 ? (
<div className="space-y-3">
{detail.progresses.map((progress, index) => (
<div key={progress.id} className="flex gap-3">
<div className="flex flex-col items-center">
<span className="mt-1 size-2 rounded-full bg-primary" />
<span
className={cn(
"mt-1 w-px flex-1 bg-border",
index === detail.progresses!.length - 1 ? "opacity-0" : "opacity-100",
)}
/>
</div>
<div className="min-w-0 flex-1 pb-3">
<div className="flex flex-wrap items-center gap-2 text-xs text-muted-foreground">
<span>{progress.authorName || `用户#${progress.authorId}`}</span>
<span>{progress.createdAt ? formatDateTime(progress.createdAt) : "-"}</span>
</div>
<div className="mt-1 whitespace-pre-wrap text-sm leading-6">{progress.content}</div>
</div>
</div>
))}
</div>
) : (
<div className="rounded-md border border-dashed px-3 py-6 text-center text-sm text-muted-foreground">
</div>
)}
</section>
<section className="grid gap-3 rounded-md border p-3 text-sm sm:grid-cols-2">
<MetadataItem label="客户" value={ticket.customer?.name || ticket.customerId} />
<MetadataItem label="联系方式" value={ticket.customer?.primaryMobile || ticket.customer?.primaryEmail} />
<MetadataItem label="来源" value={sourceLabel(ticket.source)} />
<MetadataItem label="渠道" value={ticket.channel} />
<MetadataItem label="会话 ID" value={ticket.conversationId || undefined} />
<MetadataItem label="最后更新" value={ticket.updatedAt ? formatDateTime(ticket.updatedAt) : undefined} />
</section>
</div>
<aside className="flex min-h-0 flex-col p-6">
<div className="flex items-center gap-2 text-sm font-medium">
<MessageSquareTextIcon className="size-4 text-muted-foreground" />
</div>
) : (
<div className="px-6 py-12 text-center text-sm text-muted-foreground"></div>
)}
</ScrollArea>
</DialogContent>
</Dialog>
<div className="mt-3 space-y-2">
<Textarea
rows={3}
placeholder="记录本次处理进展"
value={progressContent}
onChange={(event) => setProgressContent(event.target.value)}
/>
<div className="flex justify-end">
<Button type="button" size="sm" disabled={progressSaving} onClick={() => void handleCreateProgress()}>
<SendIcon className="size-3.5" />
{progressSaving ? "提交中..." : "添加进展"}
</Button>
</div>
</div>
<Separator className="my-4" />
<div className="min-h-0 flex-1 overflow-y-auto pr-1">
{detail.progresses && detail.progresses.length > 0 ? (
<div className="space-y-3">
{detail.progresses.map((progress, index) => (
<div key={progress.id} className="flex gap-3">
<div className="flex flex-col items-center">
<span className="mt-1 size-2 rounded-full bg-primary" />
<span
className={cn(
"mt-1 w-px flex-1 bg-border",
index === detail.progresses!.length - 1 ? "opacity-0" : "opacity-100",
)}
/>
</div>
<div className="min-w-0 flex-1 pb-3">
<div className="flex flex-wrap items-center gap-2 text-xs text-muted-foreground">
<span>{progress.authorName || `用户#${progress.authorId}`}</span>
<span>{progress.createdAt ? formatDateTime(progress.createdAt) : "-"}</span>
</div>
<div className="mt-1 whitespace-pre-wrap text-sm leading-6">{progress.content}</div>
</div>
</div>
))}
</div>
) : (
<div className="rounded-md border border-dashed px-3 py-6 text-center text-sm text-muted-foreground">
</div>
)}
</div>
</aside>
</div>
) : (
<div className="flex h-[360px] items-center justify-center text-sm text-muted-foreground"></div>
)}
</ProjectDialog>
<TicketAssignDialog
open={assignOpen}
+1 -71
View File
@@ -8,7 +8,6 @@ import { toast } from "sonner"
import { OptionCombobox, type ComboboxOption } from "@/components/option-combobox"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import { Checkbox } from "@/components/ui/checkbox"
import { Input } from "@/components/ui/input"
import {
Table,
@@ -36,7 +35,6 @@ import {
} from "@/lib/api/ticket"
import { cn, formatDateTime } from "@/lib/utils"
import { EditDialog } from "./_components/edit"
import { TicketAssignDialog } from "./_components/ticket-assign-dialog"
import { TicketDetailDialog } from "./_components/ticket-detail-dialog"
import { TicketStatusBadge } from "./_components/ticket-status-badge"
@@ -115,8 +113,6 @@ export default function TicketsPage() {
const [assigneeOptions, setAssigneeOptions] = useState<ComboboxOption[]>([assigneeAllOption])
const [tagOptions, setTagOptions] = useState<ComboboxOption[]>([tagAllOption])
const [loading, setLoading] = useState(false)
const [selectedTicketIds, setSelectedTicketIds] = useState<Set<number>>(new Set())
const [batchAssignOpen, setBatchAssignOpen] = useState(false)
const [selectedTicketId, setSelectedTicketId] = useState<number | null>(null)
const [detailOpen, setDetailOpen] = useState(false)
const [createOpen, setCreateOpen] = useState(false)
@@ -137,9 +133,6 @@ export default function TicketsPage() {
[summary],
)
const selectedIds = useMemo(() => Array.from(selectedTicketIds), [selectedTicketIds])
const allPageSelected = tickets.length > 0 && tickets.every((ticket) => selectedTicketIds.has(ticket.id))
const loadData = useCallback(async () => {
const seq = loadSeqRef.current + 1
loadSeqRef.current = seq
@@ -176,7 +169,6 @@ export default function TicketsPage() {
}
setTickets(Array.isArray(ticketData.results) ? ticketData.results : [])
setSummary(summaryData ?? emptySummary)
setSelectedTicketIds(new Set())
} catch (error) {
if (loadSeqRef.current !== seq) {
return
@@ -229,32 +221,6 @@ export default function TicketsPage() {
}
}, [])
function toggleTicket(ticketId: number, checked: boolean) {
setSelectedTicketIds((current) => {
const next = new Set(current)
if (checked) {
next.add(ticketId)
} else {
next.delete(ticketId)
}
return next
})
}
function togglePage(checked: boolean) {
setSelectedTicketIds((current) => {
const next = new Set(current)
tickets.forEach((ticket) => {
if (checked) {
next.add(ticket.id)
} else {
next.delete(ticket.id)
}
})
return next
})
}
function resetFilters() {
setQuickView("all")
setKeyword("")
@@ -366,32 +332,10 @@ export default function TicketsPage() {
</Button>
</div>
<div className="flex min-h-8 flex-wrap items-center justify-between gap-2">
<div className="text-sm text-muted-foreground">
<span className="font-medium text-foreground">{selectedTicketIds.size}</span>
</div>
<Button
type="button"
size="sm"
variant="outline"
disabled={selectedTicketIds.size === 0}
onClick={() => setBatchAssignOpen(true)}
>
</Button>
</div>
<div className="overflow-hidden rounded-lg border border-border">
<Table>
<TableHeader>
<TableRow>
<TableHead className="w-10">
<Checkbox
checked={allPageSelected}
onCheckedChange={(checked) => togglePage(!!checked)}
aria-label="选择当前页工单"
/>
</TableHead>
<TableHead></TableHead>
<TableHead className="w-28"></TableHead>
<TableHead className="w-36"></TableHead>
@@ -402,20 +346,13 @@ export default function TicketsPage() {
<TableBody>
{tickets.length === 0 ? (
<TableRow>
<TableCell colSpan={6} className="py-12 text-center text-sm text-muted-foreground">
<TableCell colSpan={5} className="py-12 text-center text-sm text-muted-foreground">
{loading ? "加载中..." : "暂无工单"}
</TableCell>
</TableRow>
) : (
tickets.map((ticket) => (
<TableRow key={ticket.id}>
<TableCell>
<Checkbox
checked={selectedTicketIds.has(ticket.id)}
onCheckedChange={(checked) => toggleTicket(ticket.id, !!checked)}
aria-label={`选择工单 ${ticket.ticketNo}`}
/>
</TableCell>
<TableCell>
<div className="min-w-0 space-y-1">
<div className="truncate text-sm font-medium">{ticket.title}</div>
@@ -470,13 +407,6 @@ export default function TicketsPage() {
</Table>
</div>
<TicketAssignDialog
open={batchAssignOpen}
ticketId={null}
ticketIds={selectedIds}
onOpenChange={setBatchAssignOpen}
onSuccess={loadData}
/>
<EditDialog
open={createOpen}
saving={savingCreate}
-11
View File
@@ -186,17 +186,6 @@ export function assignTicket(payload: {
})
}
export function batchAssignTickets(payload: {
ticketIds: number[]
toUserId: number
reason?: string
}) {
return request<void>("/api/dashboard/ticket/batch_assign", {
method: "POST",
body: JSON.stringify(payload),
})
}
export function changeTicketStatus(payload: {
ticketId: number
status: TicketStatus