fix(ticket): remove batch assign and restructure detail dialog
This commit is contained in:
@@ -183,21 +183,6 @@ func (c *TicketController) PostAssign() *web.JsonResult {
|
|||||||
return web.JsonSuccess()
|
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 {
|
func (c *TicketController) PostChange_status() *web.JsonResult {
|
||||||
operator, err := services.AuthService.RequirePermission(c.Ctx, constants.PermissionTicketChangeStatus)
|
operator, err := services.AuthService.RequirePermission(c.Ctx, constants.PermissionTicketChangeStatus)
|
||||||
if err != nil {
|
if err != nil {
|
||||||
|
|||||||
@@ -43,12 +43,6 @@ type CreateTicketProgressRequest struct {
|
|||||||
Content string `json:"content"`
|
Content string `json:"content"`
|
||||||
}
|
}
|
||||||
|
|
||||||
type BatchAssignTicketRequest struct {
|
|
||||||
TicketIDs []int64 `json:"ticketIds"`
|
|
||||||
ToUserID int64 `json:"toUserId"`
|
|
||||||
Reason string `json:"reason"`
|
|
||||||
}
|
|
||||||
|
|
||||||
type SaveTicketViewRequest struct {
|
type SaveTicketViewRequest struct {
|
||||||
ID int64 `json:"id"`
|
ID int64 `json:"id"`
|
||||||
Name string `json:"name"`
|
Name string `json:"name"`
|
||||||
|
|||||||
@@ -330,39 +330,6 @@ func (s *ticketService) AssignTicket(req request.AssignTicketRequest, operator *
|
|||||||
return nil
|
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 {
|
func (s *ticketService) ChangeStatus(req request.ChangeTicketStatusRequest, operator *dto.AuthPrincipal) error {
|
||||||
if operator == nil {
|
if operator == nil {
|
||||||
return errorsx.Unauthorized("未登录或登录已过期")
|
return errorsx.Unauthorized("未登录或登录已过期")
|
||||||
|
|||||||
@@ -21,7 +21,7 @@ import {
|
|||||||
fetchAgentProfilesAll,
|
fetchAgentProfilesAll,
|
||||||
type AdminAgentProfile,
|
type AdminAgentProfile,
|
||||||
} from "@/lib/api/admin"
|
} from "@/lib/api/admin"
|
||||||
import { assignTicket, batchAssignTickets } from "@/lib/api/ticket"
|
import { assignTicket } from "@/lib/api/ticket"
|
||||||
|
|
||||||
const schema = z.object({
|
const schema = z.object({
|
||||||
toUserId: z.string().trim().min(1, "请选择处理人"),
|
toUserId: z.string().trim().min(1, "请选择处理人"),
|
||||||
@@ -44,7 +44,6 @@ const emptyForm: FormValues = {
|
|||||||
type TicketAssignDialogProps = {
|
type TicketAssignDialogProps = {
|
||||||
open: boolean
|
open: boolean
|
||||||
ticketId: number | null
|
ticketId: number | null
|
||||||
ticketIds?: number[]
|
|
||||||
currentAssigneeId?: number
|
currentAssigneeId?: number
|
||||||
onOpenChange: (open: boolean) => void
|
onOpenChange: (open: boolean) => void
|
||||||
onSuccess?: () => Promise<void> | void
|
onSuccess?: () => Promise<void> | void
|
||||||
@@ -53,7 +52,6 @@ type TicketAssignDialogProps = {
|
|||||||
export function TicketAssignDialog({
|
export function TicketAssignDialog({
|
||||||
open,
|
open,
|
||||||
ticketId,
|
ticketId,
|
||||||
ticketIds,
|
|
||||||
currentAssigneeId,
|
currentAssigneeId,
|
||||||
onOpenChange,
|
onOpenChange,
|
||||||
onSuccess,
|
onSuccess,
|
||||||
@@ -62,9 +60,8 @@ export function TicketAssignDialog({
|
|||||||
<Dialog open={open} onOpenChange={onOpenChange}>
|
<Dialog open={open} onOpenChange={onOpenChange}>
|
||||||
{open ? (
|
{open ? (
|
||||||
<TicketAssignDialogBody
|
<TicketAssignDialogBody
|
||||||
key={ticketId ?? ticketIds?.join(",") ?? "ticket-assign"}
|
key={ticketId ?? "ticket-assign"}
|
||||||
ticketId={ticketId}
|
ticketId={ticketId}
|
||||||
ticketIds={ticketIds}
|
|
||||||
currentAssigneeId={currentAssigneeId}
|
currentAssigneeId={currentAssigneeId}
|
||||||
onOpenChange={onOpenChange}
|
onOpenChange={onOpenChange}
|
||||||
onSuccess={onSuccess}
|
onSuccess={onSuccess}
|
||||||
@@ -76,7 +73,6 @@ export function TicketAssignDialog({
|
|||||||
|
|
||||||
function TicketAssignDialogBody({
|
function TicketAssignDialogBody({
|
||||||
ticketId,
|
ticketId,
|
||||||
ticketIds,
|
|
||||||
currentAssigneeId,
|
currentAssigneeId,
|
||||||
onOpenChange,
|
onOpenChange,
|
||||||
onSuccess,
|
onSuccess,
|
||||||
@@ -140,34 +136,21 @@ function TicketAssignDialogBody({
|
|||||||
}, [])
|
}, [])
|
||||||
|
|
||||||
async function onFormSubmit(values: FormValues) {
|
async function onFormSubmit(values: FormValues) {
|
||||||
const validTicketIds = (ticketIds ?? []).filter((item) => item > 0)
|
if (!ticketId) {
|
||||||
if (!ticketId && validTicketIds.length === 0) {
|
|
||||||
toast.error("请选择工单")
|
toast.error("请选择工单")
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
setSaving(true)
|
setSaving(true)
|
||||||
try {
|
try {
|
||||||
if (validTicketIds.length > 0) {
|
await assignTicket({
|
||||||
await batchAssignTickets({
|
ticketId,
|
||||||
ticketIds: validTicketIds,
|
toUserId: Number(values.toUserId),
|
||||||
toUserId: Number(values.toUserId),
|
reason: values.reason.trim() || undefined,
|
||||||
reason: values.reason.trim() || undefined,
|
})
|
||||||
})
|
if (!activeRef.current) {
|
||||||
if (!activeRef.current) {
|
return
|
||||||
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("处理人已更新")
|
|
||||||
}
|
}
|
||||||
|
toast.success("处理人已更新")
|
||||||
if (!activeRef.current) {
|
if (!activeRef.current) {
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
@@ -188,7 +171,7 @@ function TicketAssignDialogBody({
|
|||||||
return (
|
return (
|
||||||
<DialogContent className="max-w-lg gap-0 p-0 sm:max-w-lg">
|
<DialogContent className="max-w-lg gap-0 p-0 sm:max-w-lg">
|
||||||
<DialogHeader className="px-6 pt-6">
|
<DialogHeader className="px-6 pt-6">
|
||||||
<DialogTitle>{ticketIds?.length ? `批量指派工单(${ticketIds.length})` : "指派工单"}</DialogTitle>
|
<DialogTitle>指派工单</DialogTitle>
|
||||||
</DialogHeader>
|
</DialogHeader>
|
||||||
<form onSubmit={handleSubmit(onFormSubmit)}>
|
<form onSubmit={handleSubmit(onFormSubmit)}>
|
||||||
<div className="space-y-4 p-6">
|
<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 { MessageSquareTextIcon, RefreshCcwIcon, SendIcon, UserRoundIcon } from "lucide-react"
|
||||||
import { toast } from "sonner"
|
import { toast } from "sonner"
|
||||||
|
|
||||||
|
import { ProjectDialog } from "@/components/project-dialog"
|
||||||
import { Badge } from "@/components/ui/badge"
|
import { Badge } from "@/components/ui/badge"
|
||||||
import { Button } from "@/components/ui/button"
|
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 { Separator } from "@/components/ui/separator"
|
||||||
import { Textarea } from "@/components/ui/textarea"
|
import { Textarea } from "@/components/ui/textarea"
|
||||||
import {
|
import {
|
||||||
@@ -247,156 +241,163 @@ export function TicketDetailDialog({
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<Dialog open={open} onOpenChange={onOpenChange}>
|
<ProjectDialog
|
||||||
<DialogContent className="max-h-[88vh] gap-0 p-0 sm:max-w-3xl">
|
open={open}
|
||||||
<DialogHeader className="border-b px-6 py-4">
|
onOpenChange={onOpenChange}
|
||||||
<DialogTitle className="flex min-w-0 items-center gap-2 text-base">
|
title={
|
||||||
<span className="truncate">{ticket?.title ?? "工单详情"}</span>
|
<div className="flex min-w-0 items-center gap-2 pr-16 text-base">
|
||||||
{ticket ? <TicketStatusBadge status={ticket.status} /> : null}
|
<span className="truncate">{ticket?.title ?? "工单详情"}</span>
|
||||||
</DialogTitle>
|
{ticket ? <TicketStatusBadge status={ticket.status} /> : null}
|
||||||
{ticket ? (
|
</div>
|
||||||
<div className="mt-2 flex flex-wrap items-center gap-2 text-xs text-muted-foreground">
|
}
|
||||||
<span className="font-mono">{ticket.ticketNo}</span>
|
description={
|
||||||
<span>{sourceLabel(ticket.source)}</span>
|
ticket ? (
|
||||||
<span>创建人:{metadataValue(ticket.createdByName || ticket.createdBy)}</span>
|
<div className="flex flex-wrap items-center gap-2 text-xs">
|
||||||
</div>
|
<span className="font-mono">{ticket.ticketNo}</span>
|
||||||
) : null}
|
<span>{sourceLabel(ticket.source)}</span>
|
||||||
</DialogHeader>
|
<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)]">
|
<section className="grid gap-4 md:grid-cols-[minmax(0,1fr)_220px]">
|
||||||
{loading && !ticket ? (
|
<div className="space-y-2">
|
||||||
<div className="flex items-center justify-center gap-2 px-6 py-12 text-sm text-muted-foreground">
|
<div className="text-xs font-medium text-muted-foreground">状态</div>
|
||||||
<RefreshCcwIcon className="size-4 animate-spin" />
|
<div className="flex flex-wrap gap-2">
|
||||||
加载中...
|
{statusOptions.map((option) => (
|
||||||
</div>
|
<Button
|
||||||
) : ticket ? (
|
key={option.value}
|
||||||
<div className="space-y-5 p-6">
|
type="button"
|
||||||
<section className="space-y-2">
|
size="sm"
|
||||||
<div className="text-xs font-medium text-muted-foreground">描述</div>
|
variant={ticket.status === option.value ? "default" : "outline"}
|
||||||
<div className="whitespace-pre-wrap rounded-md border bg-muted/30 px-3 py-2 text-sm leading-6">
|
disabled={!!statusSaving}
|
||||||
{ticket.description || "暂无描述"}
|
onClick={() => void handleStatusChange(option.value)}
|
||||||
</div>
|
>
|
||||||
</section>
|
{statusSaving === option.value ? "更新中..." : option.label}
|
||||||
|
|
||||||
<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)}>
|
|
||||||
指派
|
|
||||||
</Button>
|
</Button>
|
||||||
</div>
|
))}
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</div>
|
||||||
|
<div 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="flex items-center justify-between gap-2 rounded-md border px-3 py-2">
|
||||||
<div className="text-xs font-medium text-muted-foreground">标签</div>
|
<div className="flex min-w-0 items-center gap-2 text-sm">
|
||||||
<Button type="button" size="sm" variant="outline" onClick={() => setEditOpen(true)}>
|
<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>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
{ticket.tags && ticket.tags.length > 0 ? (
|
</div>
|
||||||
<div className="flex flex-wrap gap-1.5">
|
</section>
|
||||||
{ticket.tags.map((tag) => (
|
|
||||||
<Badge key={tag.id} variant="outline">
|
|
||||||
{tag.name}
|
|
||||||
</Badge>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
) : (
|
|
||||||
<div className="text-sm text-muted-foreground">暂无标签</div>
|
|
||||||
)}
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<section className="grid gap-3 rounded-md border p-3 text-sm sm:grid-cols-2">
|
<section className="space-y-2">
|
||||||
<MetadataItem label="客户" value={ticket.customer?.name || ticket.customerId} />
|
<div className="flex items-center justify-between gap-2">
|
||||||
<MetadataItem label="联系方式" value={ticket.customer?.primaryMobile || ticket.customer?.primaryEmail} />
|
<div className="text-xs font-medium text-muted-foreground">标签</div>
|
||||||
<MetadataItem label="来源" value={sourceLabel(ticket.source)} />
|
<Button type="button" size="sm" variant="outline" onClick={() => setEditOpen(true)}>
|
||||||
<MetadataItem label="渠道" value={ticket.channel} />
|
编辑
|
||||||
<MetadataItem label="会话 ID" value={ticket.conversationId || undefined} />
|
</Button>
|
||||||
<MetadataItem label="最后更新" value={ticket.updatedAt ? formatDateTime(ticket.updatedAt) : undefined} />
|
</div>
|
||||||
</section>
|
{ticket.tags && ticket.tags.length > 0 ? (
|
||||||
|
<div className="flex flex-wrap gap-1.5">
|
||||||
<Separator />
|
{ticket.tags.map((tag) => (
|
||||||
|
<Badge key={tag.id} variant="outline">
|
||||||
<section className="space-y-3">
|
{tag.name}
|
||||||
<div className="flex items-center gap-2 text-sm font-medium">
|
</Badge>
|
||||||
<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>
|
|
||||||
</div>
|
</div>
|
||||||
|
) : (
|
||||||
|
<div className="text-sm text-muted-foreground">暂无标签</div>
|
||||||
|
)}
|
||||||
|
</section>
|
||||||
|
|
||||||
{detail.progresses && detail.progresses.length > 0 ? (
|
<section className="grid gap-3 rounded-md border p-3 text-sm sm:grid-cols-2">
|
||||||
<div className="space-y-3">
|
<MetadataItem label="客户" value={ticket.customer?.name || ticket.customerId} />
|
||||||
{detail.progresses.map((progress, index) => (
|
<MetadataItem label="联系方式" value={ticket.customer?.primaryMobile || ticket.customer?.primaryEmail} />
|
||||||
<div key={progress.id} className="flex gap-3">
|
<MetadataItem label="来源" value={sourceLabel(ticket.source)} />
|
||||||
<div className="flex flex-col items-center">
|
<MetadataItem label="渠道" value={ticket.channel} />
|
||||||
<span className="mt-1 size-2 rounded-full bg-primary" />
|
<MetadataItem label="会话 ID" value={ticket.conversationId || undefined} />
|
||||||
<span
|
<MetadataItem label="最后更新" value={ticket.updatedAt ? formatDateTime(ticket.updatedAt) : undefined} />
|
||||||
className={cn(
|
</section>
|
||||||
"mt-1 w-px flex-1 bg-border",
|
</div>
|
||||||
index === detail.progresses!.length - 1 ? "opacity-0" : "opacity-100",
|
|
||||||
)}
|
<aside className="flex min-h-0 flex-col p-6">
|
||||||
/>
|
<div className="flex items-center gap-2 text-sm font-medium">
|
||||||
</div>
|
<MessageSquareTextIcon className="size-4 text-muted-foreground" />
|
||||||
<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>
|
|
||||||
</div>
|
</div>
|
||||||
) : (
|
<div className="mt-3 space-y-2">
|
||||||
<div className="px-6 py-12 text-center text-sm text-muted-foreground">请选择工单</div>
|
<Textarea
|
||||||
)}
|
rows={3}
|
||||||
</ScrollArea>
|
placeholder="记录本次处理进展"
|
||||||
</DialogContent>
|
value={progressContent}
|
||||||
</Dialog>
|
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
|
<TicketAssignDialog
|
||||||
open={assignOpen}
|
open={assignOpen}
|
||||||
|
|||||||
@@ -8,7 +8,6 @@ import { toast } from "sonner"
|
|||||||
import { OptionCombobox, type ComboboxOption } from "@/components/option-combobox"
|
import { OptionCombobox, type ComboboxOption } from "@/components/option-combobox"
|
||||||
import { Badge } from "@/components/ui/badge"
|
import { Badge } from "@/components/ui/badge"
|
||||||
import { Button } from "@/components/ui/button"
|
import { Button } from "@/components/ui/button"
|
||||||
import { Checkbox } from "@/components/ui/checkbox"
|
|
||||||
import { Input } from "@/components/ui/input"
|
import { Input } from "@/components/ui/input"
|
||||||
import {
|
import {
|
||||||
Table,
|
Table,
|
||||||
@@ -36,7 +35,6 @@ import {
|
|||||||
} 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 { EditDialog } from "./_components/edit"
|
||||||
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"
|
||||||
|
|
||||||
@@ -115,8 +113,6 @@ export default function TicketsPage() {
|
|||||||
const [assigneeOptions, setAssigneeOptions] = useState<ComboboxOption[]>([assigneeAllOption])
|
const [assigneeOptions, setAssigneeOptions] = useState<ComboboxOption[]>([assigneeAllOption])
|
||||||
const [tagOptions, setTagOptions] = useState<ComboboxOption[]>([tagAllOption])
|
const [tagOptions, setTagOptions] = useState<ComboboxOption[]>([tagAllOption])
|
||||||
const [loading, setLoading] = useState(false)
|
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 [selectedTicketId, setSelectedTicketId] = useState<number | null>(null)
|
||||||
const [detailOpen, setDetailOpen] = useState(false)
|
const [detailOpen, setDetailOpen] = useState(false)
|
||||||
const [createOpen, setCreateOpen] = useState(false)
|
const [createOpen, setCreateOpen] = useState(false)
|
||||||
@@ -137,9 +133,6 @@ export default function TicketsPage() {
|
|||||||
[summary],
|
[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 loadData = useCallback(async () => {
|
||||||
const seq = loadSeqRef.current + 1
|
const seq = loadSeqRef.current + 1
|
||||||
loadSeqRef.current = seq
|
loadSeqRef.current = seq
|
||||||
@@ -176,7 +169,6 @@ export default function TicketsPage() {
|
|||||||
}
|
}
|
||||||
setTickets(Array.isArray(ticketData.results) ? ticketData.results : [])
|
setTickets(Array.isArray(ticketData.results) ? ticketData.results : [])
|
||||||
setSummary(summaryData ?? emptySummary)
|
setSummary(summaryData ?? emptySummary)
|
||||||
setSelectedTicketIds(new Set())
|
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
if (loadSeqRef.current !== seq) {
|
if (loadSeqRef.current !== seq) {
|
||||||
return
|
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() {
|
function resetFilters() {
|
||||||
setQuickView("all")
|
setQuickView("all")
|
||||||
setKeyword("")
|
setKeyword("")
|
||||||
@@ -366,32 +332,10 @@ export default function TicketsPage() {
|
|||||||
</Button>
|
</Button>
|
||||||
</div>
|
</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">
|
<div className="overflow-hidden rounded-lg border border-border">
|
||||||
<Table>
|
<Table>
|
||||||
<TableHeader>
|
<TableHeader>
|
||||||
<TableRow>
|
<TableRow>
|
||||||
<TableHead className="w-10">
|
|
||||||
<Checkbox
|
|
||||||
checked={allPageSelected}
|
|
||||||
onCheckedChange={(checked) => togglePage(!!checked)}
|
|
||||||
aria-label="选择当前页工单"
|
|
||||||
/>
|
|
||||||
</TableHead>
|
|
||||||
<TableHead>工单</TableHead>
|
<TableHead>工单</TableHead>
|
||||||
<TableHead className="w-28">状态</TableHead>
|
<TableHead className="w-28">状态</TableHead>
|
||||||
<TableHead className="w-36">负责人</TableHead>
|
<TableHead className="w-36">负责人</TableHead>
|
||||||
@@ -402,20 +346,13 @@ export default function TicketsPage() {
|
|||||||
<TableBody>
|
<TableBody>
|
||||||
{tickets.length === 0 ? (
|
{tickets.length === 0 ? (
|
||||||
<TableRow>
|
<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 ? "加载中..." : "暂无工单"}
|
{loading ? "加载中..." : "暂无工单"}
|
||||||
</TableCell>
|
</TableCell>
|
||||||
</TableRow>
|
</TableRow>
|
||||||
) : (
|
) : (
|
||||||
tickets.map((ticket) => (
|
tickets.map((ticket) => (
|
||||||
<TableRow key={ticket.id}>
|
<TableRow key={ticket.id}>
|
||||||
<TableCell>
|
|
||||||
<Checkbox
|
|
||||||
checked={selectedTicketIds.has(ticket.id)}
|
|
||||||
onCheckedChange={(checked) => toggleTicket(ticket.id, !!checked)}
|
|
||||||
aria-label={`选择工单 ${ticket.ticketNo}`}
|
|
||||||
/>
|
|
||||||
</TableCell>
|
|
||||||
<TableCell>
|
<TableCell>
|
||||||
<div className="min-w-0 space-y-1">
|
<div className="min-w-0 space-y-1">
|
||||||
<div className="truncate text-sm font-medium">{ticket.title}</div>
|
<div className="truncate text-sm font-medium">{ticket.title}</div>
|
||||||
@@ -470,13 +407,6 @@ export default function TicketsPage() {
|
|||||||
</Table>
|
</Table>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<TicketAssignDialog
|
|
||||||
open={batchAssignOpen}
|
|
||||||
ticketId={null}
|
|
||||||
ticketIds={selectedIds}
|
|
||||||
onOpenChange={setBatchAssignOpen}
|
|
||||||
onSuccess={loadData}
|
|
||||||
/>
|
|
||||||
<EditDialog
|
<EditDialog
|
||||||
open={createOpen}
|
open={createOpen}
|
||||||
saving={savingCreate}
|
saving={savingCreate}
|
||||||
|
|||||||
@@ -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: {
|
export function changeTicketStatus(payload: {
|
||||||
ticketId: number
|
ticketId: number
|
||||||
status: TicketStatus
|
status: TicketStatus
|
||||||
|
|||||||
Reference in New Issue
Block a user