feat: 工单执行人直接执行(自动通过) + 审批时间线 + 执行结果展示

后端: - 创建工单时检测是否有审核步骤，无审核步骤直接设为 reviewing - ExecuteTicket 允许 reviewing 状态，自动通过 execute 审批记录再执行 - 验证执行人权限（非执行人返回 403） - 列表 API 返回 has_audit_step/is_executor/is_approver 元信息 - 详情 API 返回 approvals 带 approver_name/actual_approver_name 前端: - 按钮权限精确化：通过/拒绝只对审核人显示，执行只对执行人显示 - 详情弹框加载完整审批数据，展示操作时间线 - 时间线：提交人→每个步骤的指派人+实际操作人+操作时间+备注 - 执行结果文本格式 fallback 显示 - 失败工单显示失败原因
2026-05-31 21:58:52 +08:00
1 parent cdb52aa4a9
commit b4c982d565
@@ -45,6 +45,25 @@ interface TicketItem {
  create_time: string;
  review_time: string | null;
  execute_time: string | null;
+  has_audit_step: boolean;
+  has_execute_step: boolean;
+  is_executor: boolean;
+  is_approver: boolean;
+  approvals?: ApprovalRecord[];
+}
+
+interface ApprovalRecord {
+  id: number;
+  step_number: number;
+  step_name: string | null;
+  step_type: string | null;
+  approver_id: number | null;
+  approver_name: string;
+  actual_approver_id: number | null;
+  actual_approver_name: string;
+  action: string | null;
+  comment: string | null;
+  completed_at: string | null;
 }

 interface TicketListResponse {
@@ -426,11 +445,11 @@ export default function TicketsPage() {
                            {ticket.status === 'success' || ticket.status === 'failed' ? '详情' : '查看'}
                          </button>

-                          {canApprove && (ticket.status === 'pending' || ticket.status === 'reviewing') && (
+                          {canApprove && ticket.is_approver && (ticket.status === 'pending' || ticket.status === 'reviewing') && (
                            <button
                              onClick={async () => {
                                try {
-                                  await ticketApi.review(ticket.id, { action: 'approve', comment: '审批通过' });
+                                  await ticketApi.review(ticket.id, { action: 'approve', comment: '通过' });
                                  fetchTickets(); fetchStats();
                                } catch { /* ignore */ }
                              }}
@@ -441,7 +460,7 @@ export default function TicketsPage() {
                            </button>
                          )}

-                          {canApprove && (ticket.status === 'pending' || ticket.status === 'reviewing') && (
+                          {canApprove && ticket.is_approver && (ticket.status === 'pending' || ticket.status === 'reviewing') && (
                            <button
                              onClick={async () => {
                                try {
@@ -456,7 +475,7 @@ export default function TicketsPage() {
                            </button>
                          )}

-                          {canExecute && ticket.status === 'approved' && (
+                          {canExecute && ticket.is_executor && (ticket.status === 'approved' || ticket.status === 'reviewing') && (
                            <button
                              onClick={async () => {
                                try {
@@ -560,7 +579,7 @@ export default function TicketsPage() {
 /* ------------------------------------------------------------------ */
 /*  Ticket Detail Dialog                                               */
 /* ------------------------------------------------------------------ */
-function TicketDetailDialog({ ticket, onClose, canApprove, canExecute, onActionDone }: {
+function TicketDetailDialog({ ticket: initialTicket, onClose, canApprove, canExecute, onActionDone }: {
  ticket: TicketItem;
  onClose: () => void;
  canApprove: boolean;
@@ -568,6 +587,20 @@ function TicketDetailDialog({ ticket, onClose, canApprove, canExecute, onActionD
  onActionDone: () => void;
 }) {
  const [loading, setLoading] = useState(false);
+  const [ticket, setTicket] = useState<TicketItem>(initialTicket);
+  const [approvals, setApprovals] = useState<ApprovalRecord[]>([]);
+
+  // Load full detail on mount
+  useEffect(() => {
+    (async () => {
+      try {
+        const detail = await ticketApi.get(ticket.id) as any;
+        setTicket(prev => ({ ...prev, ...detail }));
+        setApprovals(detail.approvals || []);
+      } catch { /* ignore */ }
+    })();
+  }, [ticket.id]);
+
  const execResult = parseExecuteResult(ticket.execute_result);

  const currentStepIndex = getStatusIndex(ticket.status);
@@ -609,7 +642,7 @@ function TicketDetailDialog({ ticket, onClose, canApprove, canExecute, onActionD
            </span>
          </div>
          <div className="flex items-center gap-2">
-            {canApprove && (ticket.status === 'pending' || ticket.status === 'reviewing') && (
+            {canApprove && ticket.is_approver && (ticket.status === 'pending' || ticket.status === 'reviewing') && (
              <>
                <button
                  onClick={() => handleReview('approve')}
@@ -627,7 +660,7 @@ function TicketDetailDialog({ ticket, onClose, canApprove, canExecute, onActionD
                </button>
              </>
            )}
-            {canExecute && ticket.status === 'approved' && (
+            {canExecute && ticket.is_executor && (ticket.status === 'approved' || ticket.status === 'reviewing') && (
              <button
                onClick={handleExecute}
                disabled={loading}
@@ -785,8 +818,117 @@ function TicketDetailDialog({ ticket, onClose, canApprove, canExecute, onActionD
              )}
            </div>
          )}
+
+          {/* Execute Result — plain text fallback for non-JSON results */}
+          {!execResult && ticket.execute_result && (
+            <div>
+              <h3 className="text-sm font-medium mb-2 flex items-center gap-1.5">
+                <Play className="w-4 h-4 text-purple-400" /> 执行结果
+              </h3>
+              <div className={`p-3 rounded-lg text-xs font-mono whitespace-pre-wrap ${
+                ticket.status === 'failed' ? 'bg-red-500/5 border border-red-500/20 text-red-400' : 'bg-[var(--dg-bg-tertiary)]'
+              }`}>
+                {ticket.execute_result}
+              </div>
+              {ticket.execute_time && (
+                <div className="text-xs text-[var(--dg-text-muted)] mt-2">
+                  执行时间: {new Date(ticket.execute_time).toLocaleString()}
+                </div>
+              )}
+            </div>
+          )}
+
+          {/* Failure reason for failed/rejected tickets without execute_result */}
+          {(ticket.status === 'failed' || ticket.status === 'rejected') && !ticket.execute_result && (
+            <div>
+              <h3 className="text-sm font-medium mb-2 flex items-center gap-1.5">
+                <AlertTriangle className="w-4 h-4 text-red-400" /> 失败原因
+              </h3>
+              <div className="p-3 bg-red-500/5 border border-red-500/20 rounded-lg text-xs text-red-400">
+                {ticket.status === 'rejected' ? '工单已被拒绝' : '执行失败，请查看审批记录了解详情'}
+              </div>
+            </div>
+          )}
+
+          {/* Timeline — approval history */}
+          {approvals.length > 0 && (
+            <div>
+              <h3 className="text-sm font-medium mb-3 flex items-center gap-1.5">
+                <Clock className="w-4 h-4 text-blue-400" /> 操作时间线
+              </h3>
+              <div className="space-y-0">
+                {/* Submit step */}
+                <div className="flex gap-3 pb-3">
+                  <div className="flex flex-col items-center">
+                    <div className="w-6 h-6 rounded-full bg-green-500/15 text-green-400 flex items-center justify-center">
+                      <FileCode className="w-3 h-3" />
+                    </div>
+                    <div className="w-[2px] flex-1 bg-[var(--dg-border)]" />
+                  </div>
+                  <div className="flex-1 pb-3">
+                    <div className="text-xs font-medium text-green-400">提交申请</div>
+                    <div className="text-xs text-[var(--dg-text-muted)] mt-0.5">
+                      {ticket.applicant_name || `用户#${ticket.applicant_id}`} · {new Date(ticket.create_time).toLocaleString()}
+                    </div>
+                    {ticket.reason && (
+                      <div className="text-xs text-[var(--dg-text-secondary)] mt-1 bg-[var(--dg-bg-tertiary)] rounded px-2 py-1">{ticket.reason}</div>
+                    )}
+                  </div>
+                </div>
+
+                {/* Group approvals by step_number */}
+                {Object.values(
+                  approvals.reduce((acc, a) => {
+                    const key = `${a.step_number}_${a.step_name || ''}`;
+                    if (!acc[key]) acc[key] = { step: a, users: [] };
+                    acc[key].users.push(a);
+                    return acc;
+                  }, {} as Record<string, { step: ApprovalRecord; users: ApprovalRecord[] }>)
+                ).map(({ step, users }, idx, arr) => {
+                  const isCompleted = users.some(u => u.action);
+                  const actor = users.find(u => u.actual_approver_id);
+                  const StepIcon = step.step_type === 'execute' ? Play : Eye;
+                  const isLast = idx === arr.length - 1;
+
+                  return (
+                    <div key={step.id} className="flex gap-3">
+                      <div className="flex flex-col items-center">
+                        <div className={`w-6 h-6 rounded-full flex items-center justify-center ${
+                          isCompleted ? 'bg-green-500/15 text-green-400' :
+                          step.action === 'reject' ? 'bg-red-500/15 text-red-400' :
+                          'bg-blue-500/15 text-blue-400'
+                        }`}>
+                          <StepIcon className="w-3 h-3" />
+                        </div>
+                        {!isLast && <div className="w-[2px] flex-1 bg-[var(--dg-border)]" />}
+                      </div>
+                      <div className={`flex-1 ${!isLast ? 'pb-3' : ''}`}>
+                        <div className={`text-xs font-medium ${
+                          isCompleted ? 'text-green-400' :
+                          step.action === 'reject' ? 'text-red-400' :
+                          'text-blue-400'
+                        }`}>
+                          {step.step_name || (step.step_type === 'execute' ? '执行变更' : '审批')}
+                          {!isCompleted && <span className="text-[var(--dg-text-muted)] font-normal ml-1">（待处理）</span>}
+                        </div>
+                        <div className="text-xs text-[var(--dg-text-muted)] mt-0.5">
+                          指派人: {users.map(u => u.approver_name).filter(Boolean).join(', ') || '-'}
+                        </div>
+                        {actor && actor.completed_at && (
+                          <div className="text-xs text-[var(--dg-text-secondary)] mt-0.5">
+                            {actor.actual_approver_name} · {actor.action === 'approve' ? '通过' : actor.action === 'reject' ? '拒绝' : '执行'} · {new Date(actor.completed_at).toLocaleString()}
+                            {actor.comment && <span className="ml-1 text-[var(--dg-text-muted)]">（{actor.comment}）</span>}
+                          </div>
+                        )}
+                      </div>
+                    </div>
+                  );
+                })}
+              </div>
+            </div>
+          )}
        </div>
      </div>
    </ModalOverlay>
  );
-}
+}