825 lines
37 KiB
TypeScript
825 lines
37 KiB
TypeScript
import { useState, useEffect, useCallback } from 'react';
|
|
import {
|
|
Plus, Edit2, Eye, ToggleLeft, ToggleRight, GitBranch, Users, CheckCircle,
|
|
ArrowRight, Shield, Trash2, X, ChevronDown, ChevronUp,
|
|
Save, Play, Copy, Loader2, Star, ArrowUp, ArrowDown, UserPlus,
|
|
} from 'lucide-react';
|
|
import { Card, CardContent } from '@/components/ui/card';
|
|
import { workflowApi } from '@/api/workflow';
|
|
import { userApi } from '@/api/user';
|
|
import { ConfirmDialog } from '@/components/ConfirmDialog';
|
|
|
|
/* ------------------------------------------------------------------ */
|
|
/* Types */
|
|
/* ------------------------------------------------------------------ */
|
|
|
|
interface WorkflowStep {
|
|
id?: number;
|
|
workflow_id?: number;
|
|
step_number: number;
|
|
name: string;
|
|
step_type: string;
|
|
approver_role: string | null;
|
|
approver_ids: string | null;
|
|
is_required: boolean;
|
|
timeout_hours: number;
|
|
auto_approve_on_timeout: boolean;
|
|
}
|
|
|
|
interface WorkflowDetail {
|
|
id: number;
|
|
name: string;
|
|
description: string | null;
|
|
is_default: boolean;
|
|
is_active: boolean;
|
|
created_at: string | null;
|
|
steps: WorkflowStep[];
|
|
}
|
|
|
|
interface UserItem {
|
|
id: number;
|
|
username: string;
|
|
display_name: string | null;
|
|
role: string;
|
|
}
|
|
|
|
interface StepDraft {
|
|
name: string;
|
|
step_type: 'submit' | 'audit' | 'execute';
|
|
approver_ids: number[];
|
|
}
|
|
|
|
const STEP_TYPE_LABELS: Record<string, string> = {
|
|
submit: '提交阶段',
|
|
serial: '串行审批',
|
|
parallel: '并行审批',
|
|
any_one: '任一审批',
|
|
audit: '审核阶段',
|
|
execute: '执行阶段',
|
|
};
|
|
|
|
const STEP_TYPE_COLORS: Record<string, string> = {
|
|
submit: 'bg-blue-500/15 text-blue-400 border-blue-500/30',
|
|
serial: 'bg-purple-500/15 text-purple-400 border-purple-500/30',
|
|
parallel: 'bg-orange-500/15 text-orange-400 border-orange-500/30',
|
|
any_one: 'bg-green-500/15 text-green-400 border-green-500/30',
|
|
audit: 'bg-purple-500/15 text-purple-400 border-purple-500/30',
|
|
execute: 'bg-green-500/15 text-green-400 border-green-500/30',
|
|
};
|
|
|
|
const STEP_TYPE_ICONS: Record<string, React.ElementType> = {
|
|
submit: Users,
|
|
serial: Shield,
|
|
parallel: Users,
|
|
any_one: CheckCircle,
|
|
audit: Shield,
|
|
execute: Play,
|
|
};
|
|
|
|
const STEP_TYPES = [
|
|
{ value: 'submit' as const, label: '提交阶段', desc: '工单提交人' },
|
|
{ value: 'audit' as const, label: '审核阶段', desc: '审核人员审批' },
|
|
{ value: 'execute' as const, label: '执行阶段', desc: '执行人员操作' },
|
|
];
|
|
|
|
/* ------------------------------------------------------------------ */
|
|
/* UserDropdown — 下拉多选用户 */
|
|
/* ------------------------------------------------------------------ */
|
|
|
|
interface UserDropdownProps {
|
|
users: UserItem[];
|
|
selectedIds: number[];
|
|
label: string;
|
|
onToggle: (uid: number) => void;
|
|
onToggleAll: () => void;
|
|
onClear: () => void;
|
|
getUserName: (uid: number) => string;
|
|
}
|
|
|
|
function UserDropdown({ users, selectedIds, label, onToggle, onToggleAll, onClear, getUserName }: UserDropdownProps) {
|
|
const [open, setOpen] = useState(false);
|
|
const ids = Array.isArray(selectedIds) ? selectedIds : [];
|
|
const allSelected = ids.length === users.length && users.length > 0;
|
|
|
|
return (
|
|
<div className="relative">
|
|
{/* Trigger */}
|
|
<button
|
|
type="button"
|
|
onClick={() => setOpen(!open)}
|
|
className={`w-full flex items-center justify-between px-3 py-2 rounded-lg text-sm transition-colors ${
|
|
selectedIds.length === 0
|
|
? 'bg-[var(--dg-bg-tertiary)] border border-red-500/40 text-[var(--dg-text-muted)]'
|
|
: 'bg-[var(--dg-bg-tertiary)] border border-[var(--dg-border)] text-[var(--dg-text-primary)]'
|
|
}`}
|
|
>
|
|
<span className="truncate">
|
|
{ids.length === 0
|
|
? `${label} * 请选择`
|
|
: ids.length === 1
|
|
? getUserName(ids[0])
|
|
: `${label} (${ids.length}人)`
|
|
}
|
|
</span>
|
|
<ChevronDown className={`w-4 h-4 text-[var(--dg-text-muted)] transition-transform ${open ? 'rotate-180' : ''}`} />
|
|
</button>
|
|
|
|
{/* Selected tags */}
|
|
{ids.length > 1 && (
|
|
<div className="flex flex-wrap gap-1 mt-1.5">
|
|
{ids.map((uid) => (
|
|
<span
|
|
key={uid}
|
|
className="inline-flex items-center gap-1 px-1.5 py-0.5 rounded text-[11px] bg-blue-500/15 text-blue-400"
|
|
>
|
|
{getUserName(uid)}
|
|
<button onClick={() => onToggle(uid)} className="hover:text-red-400 transition-colors">
|
|
<X className="w-3 h-3" />
|
|
</button>
|
|
</span>
|
|
))}
|
|
</div>
|
|
)}
|
|
|
|
{/* Dropdown */}
|
|
{open && (
|
|
<>
|
|
<div className="fixed inset-0 z-40" onClick={() => setOpen(false)} />
|
|
<div className="absolute left-0 right-0 top-full mt-1 z-50 bg-[var(--dg-bg-secondary)] border border-[var(--dg-border)] rounded-lg shadow-xl max-h-52 overflow-y-auto">
|
|
{/* Select all / Clear */}
|
|
<div className="flex items-center justify-between px-3 py-2 border-b border-[var(--dg-border)]">
|
|
<button
|
|
onClick={onToggleAll}
|
|
className="text-[11px] text-blue-400 hover:text-blue-300 transition-colors"
|
|
>
|
|
{allSelected ? '取消全选' : '全选'}
|
|
</button>
|
|
{selectedIds.length > 0 && (
|
|
<button onClick={onClear} className="text-[11px] text-red-400 hover:text-red-300 transition-colors">
|
|
清空
|
|
</button>
|
|
)}
|
|
</div>
|
|
{/* User list */}
|
|
{users.map((u) => {
|
|
const checked = selectedIds.includes(u.id);
|
|
return (
|
|
<div
|
|
key={u.id}
|
|
onClick={() => onToggle(u.id)}
|
|
className="flex items-center gap-2.5 px-3 py-2 cursor-pointer hover:bg-[var(--dg-bg-hover)] transition-colors"
|
|
>
|
|
<div className={`w-4 h-4 rounded border flex items-center justify-center flex-shrink-0 ${
|
|
checked
|
|
? 'bg-blue-500 border-blue-500'
|
|
: 'border-[var(--dg-border)]'
|
|
}`}>
|
|
{checked && <CheckCircle className="w-3 h-3 text-white" />}
|
|
</div>
|
|
<span className={`text-sm flex-1 ${checked ? 'text-[var(--dg-text-primary)]' : 'text-[var(--dg-text-secondary)]'}`}>
|
|
{u.display_name || u.username}
|
|
</span>
|
|
<span className="text-[10px] text-[var(--dg-text-muted)] px-1.5 py-0.5 rounded bg-[var(--dg-bg-tertiary)]">
|
|
{u.role}
|
|
</span>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
</>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
/* ------------------------------------------------------------------ */
|
|
/* WorkflowEditorModal — 创建/编辑流程弹框 */
|
|
/* ------------------------------------------------------------------ */
|
|
|
|
interface EditorProps {
|
|
workflow?: WorkflowDetail | null;
|
|
users: UserItem[];
|
|
onClose: () => void;
|
|
onSaved: () => void;
|
|
}
|
|
|
|
function WorkflowEditorModal({ workflow, users, onClose, onSaved }: EditorProps) {
|
|
const isEdit = !!workflow;
|
|
const [name, setName] = useState(workflow?.name || '');
|
|
const [description, setDescription] = useState(workflow?.description || '');
|
|
const [steps, setSteps] = useState<StepDraft[]>([]);
|
|
const [submitting, setSubmitting] = useState(false);
|
|
const [error, setError] = useState('');
|
|
|
|
// 初始化步骤
|
|
useEffect(() => {
|
|
if (workflow?.steps?.length) {
|
|
setSteps(
|
|
workflow.steps.map((s) => ({
|
|
name: s.name,
|
|
step_type: (s.step_type === 'serial' || s.step_type === 'parallel' || s.step_type === 'any_one')
|
|
? 'audit' as const
|
|
: s.step_type as 'submit' | 'audit' | 'execute',
|
|
approver_ids: Array.isArray(s.approver_ids) ? s.approver_ids : (s.approver_ids ? ((): number[] => { try { const p = JSON.parse(s.approver_ids as string); return Array.isArray(p) ? p : []; } catch { return []; } })() : []),
|
|
}))
|
|
);
|
|
} else {
|
|
// 新建默认：提交→执行
|
|
setSteps([
|
|
{ name: '提交阶段', step_type: 'submit', approver_ids: [] },
|
|
{ name: '执行阶段', step_type: 'execute', approver_ids: [] },
|
|
]);
|
|
}
|
|
}, [workflow]);
|
|
|
|
const addStep = (type: 'submit' | 'audit' | 'execute') => {
|
|
const labels: Record<string, string> = { submit: '提交阶段', audit: '审核阶段', execute: '执行阶段' };
|
|
const count = steps.filter((s) => s.step_type === type).length;
|
|
const suffix = count > 0 ? ` ${count + 1}` : '';
|
|
setSteps([...steps, { name: `${labels[type]}${suffix}`, step_type: type, approver_ids: [] }]);
|
|
};
|
|
|
|
const removeStep = (idx: number) => setSteps(steps.filter((_, i) => i !== idx));
|
|
|
|
const moveStep = (idx: number, dir: -1 | 1) => {
|
|
const target = idx + dir;
|
|
if (target < 0 || target >= steps.length) return;
|
|
const next = [...steps];
|
|
[next[idx], next[target]] = [next[target], next[idx]];
|
|
setSteps(next);
|
|
};
|
|
|
|
const updateStep = (idx: number, patch: Partial<StepDraft>) => {
|
|
setSteps(steps.map((s, i) => (i === idx ? { ...s, ...patch } : s)));
|
|
};
|
|
|
|
const toggleUser = (idx: number, uid: number) => {
|
|
const step = steps[idx];
|
|
const has = step.approver_ids.includes(uid);
|
|
updateStep(idx, {
|
|
approver_ids: has ? step.approver_ids.filter((id) => id !== uid) : [...step.approver_ids, uid],
|
|
});
|
|
};
|
|
|
|
const toggleAllUsers = (idx: number) => {
|
|
const step = steps[idx];
|
|
if (step.approver_ids.length === users.length) {
|
|
updateStep(idx, { approver_ids: [] });
|
|
} else {
|
|
updateStep(idx, { approver_ids: users.map((u) => u.id) });
|
|
}
|
|
};
|
|
|
|
const handleSubmit = async () => {
|
|
if (!name.trim()) { setError('请输入流程名称'); return; }
|
|
if (steps.length === 0) { setError('请至少添加一个步骤'); return; }
|
|
// 验证非 submit 步骤至少有一个人员
|
|
for (let i = 0; i < steps.length; i++) {
|
|
if (steps[i].step_type !== 'submit' && steps[i].approver_ids.length === 0) {
|
|
setError(`步骤"${steps[i].name}"需要关联至少一个人员`);
|
|
return;
|
|
}
|
|
}
|
|
|
|
setSubmitting(true);
|
|
setError('');
|
|
try {
|
|
const payload = {
|
|
name: name.trim(),
|
|
description: description.trim() || null,
|
|
steps: steps.map((s, i) => ({
|
|
step_number: i + 1,
|
|
name: s.name,
|
|
step_type: s.step_type,
|
|
approver_ids: s.approver_ids.length > 0 ? JSON.stringify(s.approver_ids) : null,
|
|
is_required: true,
|
|
timeout_hours: 24,
|
|
auto_approve_on_timeout: false,
|
|
})),
|
|
};
|
|
|
|
if (isEdit && workflow) {
|
|
await workflowApi.update(workflow.id, payload);
|
|
} else {
|
|
await workflowApi.create(payload);
|
|
}
|
|
onSaved();
|
|
} catch (e: unknown) {
|
|
const msg = (e as { response?: { data?: { detail?: string } } })?.response?.data?.detail || '保存失败';
|
|
setError(msg);
|
|
} finally {
|
|
setSubmitting(false);
|
|
}
|
|
};
|
|
|
|
const getUserName = (uid: number) => {
|
|
const u = users.find((u) => u.id === uid);
|
|
return u ? (u.display_name || u.username) : `#${uid}`;
|
|
};
|
|
|
|
const inputCls = 'w-full px-3 py-2 bg-[var(--dg-bg-tertiary)] border border-[var(--dg-border)] rounded-lg text-sm focus:border-blue-400 focus:outline-none transition-colors';
|
|
|
|
return (
|
|
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm">
|
|
<div
|
|
className="bg-[var(--dg-bg-secondary)] rounded-xl shadow-2xl w-full max-w-2xl max-h-[90vh] overflow-y-auto"
|
|
onClick={(e) => e.stopPropagation()}
|
|
>
|
|
{/* Header */}
|
|
<div className="flex items-center justify-between px-5 py-4">
|
|
<h2 className="text-base font-semibold">{isEdit ? '编辑审批流程' : '新建审批流程'}</h2>
|
|
<button onClick={onClose} className="p-1.5 rounded-lg hover:bg-[var(--dg-bg-hover)] text-[var(--dg-text-secondary)] transition-colors">
|
|
<X className="w-4 h-4" />
|
|
</button>
|
|
</div>
|
|
|
|
{/* Body */}
|
|
<div className="px-5 pb-5 space-y-4">
|
|
{error && <div className="px-3 py-2 text-sm text-red-400 bg-red-500/10 rounded-lg">{error}</div>}
|
|
|
|
<div>
|
|
<label className="block text-xs font-medium text-[var(--dg-text-secondary)] mb-1">流程名称 *</label>
|
|
<input className={inputCls} value={name} onChange={(e) => setName(e.target.value)} placeholder="输入流程名称" />
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-xs font-medium text-[var(--dg-text-secondary)] mb-1">描述</label>
|
|
<input className={inputCls} value={description} onChange={(e) => setDescription(e.target.value)} placeholder="可选" />
|
|
</div>
|
|
|
|
{/* Steps */}
|
|
<div>
|
|
<div className="flex items-center justify-between mb-2">
|
|
<label className="text-xs font-medium text-[var(--dg-text-secondary)]">流程步骤</label>
|
|
<div className="flex items-center gap-1">
|
|
{STEP_TYPES.map((t) => (
|
|
<button
|
|
key={t.value}
|
|
onClick={() => addStep(t.value)}
|
|
className="flex items-center gap-1 px-2 py-1 text-[11px] font-medium bg-blue-500/10 text-blue-400 hover:bg-blue-500/20 rounded transition-colors"
|
|
>
|
|
<Plus className="w-3 h-3" />
|
|
{t.label}
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
{steps.map((step, idx) => {
|
|
const typeConf = STEP_TYPES.find((t) => t.value === step.step_type)!;
|
|
const colorCls = STEP_TYPE_COLORS[step.step_type];
|
|
const Icon = STEP_TYPE_ICONS[step.step_type] || Shield;
|
|
return (
|
|
<div key={idx} className="p-3 bg-[var(--dg-bg-primary)] rounded-lg border border-[var(--dg-border)]">
|
|
{/* Step header */}
|
|
<div className="flex items-center gap-2 mb-2">
|
|
<div className={`w-7 h-7 rounded-md flex items-center justify-center flex-shrink-0 ${colorCls.split(' ')[0]}`}>
|
|
<Icon className={`w-3.5 h-3.5 ${colorCls.split(' ')[1]}`} />
|
|
</div>
|
|
<input
|
|
className="flex-1 px-2 py-1 bg-[var(--dg-bg-tertiary)] border border-[var(--dg-border)] rounded text-sm focus:border-blue-400 focus:outline-none"
|
|
value={step.name}
|
|
onChange={(e) => updateStep(idx, { name: e.target.value })}
|
|
placeholder="步骤名称"
|
|
/>
|
|
<span className={`text-[10px] px-1.5 py-0.5 rounded ${colorCls}`}>
|
|
{typeConf.label}
|
|
</span>
|
|
<div className="flex items-center gap-0.5 ml-1">
|
|
<button
|
|
onClick={() => moveStep(idx, -1)}
|
|
disabled={idx === 0}
|
|
className="p-1 rounded hover:bg-[var(--dg-bg-hover)] text-[var(--dg-text-muted)] disabled:opacity-20 transition-colors"
|
|
title="上移"
|
|
>
|
|
<ArrowUp className="w-3.5 h-3.5" />
|
|
</button>
|
|
<button
|
|
onClick={() => moveStep(idx, 1)}
|
|
disabled={idx === steps.length - 1}
|
|
className="p-1 rounded hover:bg-[var(--dg-bg-hover)] text-[var(--dg-text-muted)] disabled:opacity-20 transition-colors"
|
|
title="下移"
|
|
>
|
|
<ArrowDown className="w-3.5 h-3.5" />
|
|
</button>
|
|
<button
|
|
onClick={() => removeStep(idx)}
|
|
className="p-1 rounded hover:bg-red-500/10 text-[var(--dg-text-muted)] hover:text-red-400 transition-colors"
|
|
title="删除"
|
|
>
|
|
<Trash2 className="w-3.5 h-3.5" />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* User selection — submit 步骤不需要选人 */}
|
|
{step.step_type !== 'submit' && (
|
|
<div className="pl-9 mt-2">
|
|
<UserDropdown
|
|
users={users}
|
|
selectedIds={step.approver_ids}
|
|
label={step.step_type === 'audit' ? '审核人员' : '执行人员'}
|
|
onToggle={(uid) => toggleUser(idx, uid)}
|
|
onToggleAll={() => toggleAllUsers(idx)}
|
|
onClear={() => updateStep(idx, { approver_ids: [] })}
|
|
getUserName={getUserName}
|
|
/>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
|
|
{steps.length === 0 && (
|
|
<div className="text-center py-4 text-sm text-[var(--dg-text-muted)]">
|
|
请点击上方按钮添加流程步骤
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Footer */}
|
|
<div className="flex items-center justify-end gap-3 px-5 py-4">
|
|
<button onClick={onClose} className="px-4 py-2 text-sm text-[var(--dg-text-secondary)] hover:bg-[var(--dg-bg-hover)] rounded-lg transition-colors">
|
|
取消
|
|
</button>
|
|
<button
|
|
onClick={handleSubmit}
|
|
disabled={submitting}
|
|
className="flex items-center gap-2 px-4 py-2 text-sm font-medium text-white bg-blue-500 hover:bg-blue-600 disabled:opacity-50 rounded-lg transition-colors"
|
|
>
|
|
{submitting && <Loader2 className="w-4 h-4 animate-spin" />}
|
|
{isEdit ? '保存' : '创建'}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
/* ------------------------------------------------------------------ */
|
|
/* Main Page */
|
|
/* ------------------------------------------------------------------ */
|
|
|
|
export default function WorkflowPage() {
|
|
const [items, setItems] = useState<WorkflowDetail[]>([]);
|
|
const [users, setUsers] = useState<UserItem[]>([]);
|
|
const [loading, setLoading] = useState(true);
|
|
const [error, setError] = useState<string | null>(null);
|
|
const [expandedId, setExpandedId] = useState<number | null>(null);
|
|
const [previewWorkflow, setPreviewWorkflow] = useState<WorkflowDetail | null>(null);
|
|
const [editorWorkflow, setEditorWorkflow] = useState<WorkflowDetail | null | undefined>(undefined);
|
|
const [deleteConfirm, setDeleteConfirm] = useState<{msg: string; onConfirm: () => void} | null>(null);
|
|
|
|
const fetchWorkflows = useCallback(async () => {
|
|
try {
|
|
setLoading(true);
|
|
setError(null);
|
|
const data = await workflowApi.list();
|
|
const normalized = (Array.isArray(data) ? data : []).map((w: any) => ({ ...w, steps: w.steps || [] }));
|
|
setItems(normalized);
|
|
} catch (err: unknown) {
|
|
const msg = (err as { response?: { data?: { detail?: string } } })?.response?.data?.detail || '获取审批流程失败';
|
|
setError(msg);
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
}, []);
|
|
|
|
const fetchUsers = useCallback(async () => {
|
|
try {
|
|
const data = await userApi.list();
|
|
setUsers(Array.isArray(data) ? data : []);
|
|
} catch {}
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
fetchWorkflows();
|
|
fetchUsers();
|
|
}, [fetchWorkflows, fetchUsers]);
|
|
|
|
const toggleWorkflow = useCallback(async (wf: WorkflowDetail) => {
|
|
try {
|
|
await workflowApi.update(wf.id, { is_active: !wf.is_active });
|
|
setItems((prev) => prev.map((w) => (w.id === wf.id ? { ...w, is_active: !w.is_active } : w)));
|
|
} catch {}
|
|
}, []);
|
|
|
|
const handleDelete = useCallback(async (id: number) => {
|
|
setDeleteConfirm({msg: '确认删除该审批流程？', onConfirm: async () => {
|
|
try {
|
|
await workflowApi.delete(id);
|
|
setItems((prev) => prev.filter((w) => w.id !== id));
|
|
} catch {}
|
|
}});
|
|
return;
|
|
}, []);
|
|
|
|
const setDefault = useCallback(async (id: number) => {
|
|
try {
|
|
await workflowApi.setDefault(id);
|
|
setItems((prev) => prev.map((w) => ({ ...w, is_default: w.id === id })));
|
|
} catch {}
|
|
}, []);
|
|
|
|
const handleClone = useCallback(async (id: number) => {
|
|
try {
|
|
await workflowApi.clone(id);
|
|
await fetchWorkflows();
|
|
} catch {}
|
|
}, [fetchWorkflows]);
|
|
|
|
const getUserName = useCallback(
|
|
(uid: number) => {
|
|
const u = users.find((u) => u.id === uid);
|
|
return u ? (u.display_name || u.username) : `#${uid}`;
|
|
},
|
|
[users]
|
|
);
|
|
|
|
if (loading) {
|
|
return (
|
|
<div className="flex items-center justify-center h-64">
|
|
<Loader2 className="w-8 h-8 animate-spin text-blue-400" />
|
|
</div>
|
|
);
|
|
}
|
|
|
|
if (error) {
|
|
return (
|
|
<div className="flex flex-col items-center justify-center h-64 text-[var(--dg-text-muted)]">
|
|
<p className="text-sm">{error}</p>
|
|
<button onClick={fetchWorkflows} className="mt-3 px-4 py-2 bg-blue-500/15 text-blue-400 rounded-lg text-sm hover:bg-blue-500/25 transition-colors">
|
|
重试
|
|
</button>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="space-y-5">
|
|
{/* Header */}
|
|
<div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3">
|
|
<div>
|
|
<h1 className="text-2xl font-semibold">审批流程配置</h1>
|
|
<p className="text-sm text-[var(--dg-text-secondary)] mt-1">配置多级审批流程，支持审核阶段叠加和多人执行</p>
|
|
</div>
|
|
<button
|
|
onClick={() => setEditorWorkflow(null)}
|
|
className="flex items-center gap-2 px-4 py-2.5 bg-blue-500 text-white rounded-lg text-sm font-medium hover:bg-blue-600 transition-colors"
|
|
>
|
|
<Plus className="w-4 h-4" />
|
|
新建流程
|
|
</button>
|
|
</div>
|
|
|
|
{items.length === 0 ? (
|
|
<div className="dg-card p-12 text-center">
|
|
<GitBranch className="w-12 h-12 mx-auto mb-3 opacity-50 text-[var(--dg-text-muted)]" />
|
|
<p className="text-sm text-[var(--dg-text-muted)] mb-4">暂无审批流程</p>
|
|
<button
|
|
onClick={() => setEditorWorkflow(null)}
|
|
className="px-4 py-2 bg-blue-500/15 text-blue-400 rounded-lg text-sm hover:bg-blue-500/25 transition-colors"
|
|
>
|
|
创建第一个流程
|
|
</button>
|
|
</div>
|
|
) : (
|
|
<>
|
|
{/* Stats */}
|
|
<div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
|
|
{[
|
|
{ label: '流程总数', value: items.length, icon: GitBranch, color: 'text-blue-400', bg: 'bg-blue-400/10' },
|
|
{ label: '已启用', value: items.filter((w) => w.is_active).length, icon: CheckCircle, color: 'text-green-400', bg: 'bg-green-400/10' },
|
|
{ label: '默认流程', value: items.filter((w) => w.is_default).length, icon: Star, color: 'text-yellow-400', bg: 'bg-yellow-400/10' },
|
|
{ label: '总步骤数', value: items.reduce((acc, w) => acc + (w.steps?.length || 0), 0), icon: Users, color: 'text-purple-400', bg: 'bg-purple-400/10' },
|
|
].map((s, i) => (
|
|
<Card key={i} className="dg-card">
|
|
<CardContent className="p-4 flex items-center gap-3">
|
|
<div className={`w-10 h-10 rounded-lg ${s.bg} flex items-center justify-center`}>
|
|
<s.icon className={`w-5 h-5 ${s.color}`} />
|
|
</div>
|
|
<div>
|
|
<div className="text-2xl font-bold">{s.value}</div>
|
|
<div className="text-xs text-[var(--dg-text-muted)]">{s.label}</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
))}
|
|
</div>
|
|
|
|
{/* Workflow list */}
|
|
<div className="space-y-4">
|
|
{items.map((wf) => {
|
|
const isExpanded = expandedId === wf.id;
|
|
return (
|
|
<Card key={wf.id} className={`dg-card overflow-hidden ${!wf.is_active ? 'opacity-50' : ''}`}>
|
|
<CardContent className="p-5">
|
|
<div className="flex items-start justify-between">
|
|
<div className="flex-1 min-w-0">
|
|
<div className="flex items-center gap-3 mb-2 flex-wrap">
|
|
<h3 className="text-lg font-semibold">{wf.name}</h3>
|
|
{wf.is_default && (
|
|
<span className="inline-flex items-center gap-1 px-2 py-0.5 bg-yellow-500/10 text-yellow-400 text-xs rounded">
|
|
<Star className="w-3 h-3" /> 默认
|
|
</span>
|
|
)}
|
|
<span className={`px-2 py-0.5 rounded text-xs font-medium ${wf.is_active ? 'bg-green-500/15 text-green-400' : 'bg-[var(--dg-bg-tertiary)] text-[var(--dg-text-muted)]'}`}>
|
|
{wf.is_active ? '已启用' : '已禁用'}
|
|
</span>
|
|
<span className="px-2 py-0.5 bg-[var(--dg-bg-tertiary)] text-[var(--dg-text-muted)] text-xs rounded">
|
|
{(wf.steps || []).length} 个阶段
|
|
</span>
|
|
</div>
|
|
|
|
{wf.description && <p className="text-sm text-[var(--dg-text-secondary)] mb-3">{wf.description}</p>}
|
|
|
|
{/* Flow visualization */}
|
|
<div className="flex items-center gap-1 mt-4 p-4 bg-[var(--dg-bg-tertiary)] rounded-lg overflow-x-auto">
|
|
{(wf.steps || []).map((step, i) => {
|
|
const StepIcon = STEP_TYPE_ICONS[step.step_type] || Shield;
|
|
let uids: number[] = [];
|
|
try { const parsed = JSON.parse(step.approver_ids); if (Array.isArray(parsed)) uids = parsed; } catch {}
|
|
const stepsArr = wf.steps || [];
|
|
return (
|
|
<div key={step.id || i} className="flex items-center gap-1 flex-shrink-0">
|
|
<div className={`px-3 py-2 rounded-lg border ${STEP_TYPE_COLORS[step.step_type] || STEP_TYPE_COLORS.serial} flex items-center gap-2`}>
|
|
<StepIcon className="w-4 h-4" />
|
|
<div>
|
|
<div className="text-xs font-medium whitespace-nowrap">{step.name}</div>
|
|
{uids.length > 0 && (
|
|
<div className="text-[10px] opacity-80 whitespace-nowrap">
|
|
{uids.map((uid) => getUserName(uid)).join('、')}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
{i < stepsArr.length - 1 && <ArrowRight className="w-4 h-4 text-[var(--dg-text-muted)] flex-shrink-0" />}
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
|
|
{/* Expanded details */}
|
|
{isExpanded && (
|
|
<div className="mt-4 space-y-3 pt-4 border-t border-[var(--dg-border)]">
|
|
<h4 className="text-sm font-semibold flex items-center gap-1.5">
|
|
<GitBranch className="w-4 h-4 text-[var(--dg-text-muted)]" />
|
|
流程步骤详情
|
|
</h4>
|
|
{(wf.steps || []).map((step, si) => {
|
|
const StepIcon = STEP_TYPE_ICONS[step.step_type] || Shield;
|
|
const colorClass = STEP_TYPE_COLORS[step.step_type] || STEP_TYPE_COLORS.serial;
|
|
const uids: number[] = step.approver_ids ? JSON.parse(step.approver_ids) : [];
|
|
return (
|
|
<div key={step.id || si} className="flex items-start gap-3 p-3 bg-[var(--dg-bg-primary)] rounded-lg border border-[var(--dg-border)]">
|
|
<div className={`w-8 h-8 rounded-lg flex items-center justify-center flex-shrink-0 ${colorClass.split(' ')[0]}`}>
|
|
<StepIcon className={`w-4 h-4 ${colorClass.split(' ')[1]}`} />
|
|
</div>
|
|
<div className="flex-1">
|
|
<div className="flex items-center gap-2 mb-1 flex-wrap">
|
|
<span className="text-sm font-medium">{step.name}</span>
|
|
<span className={`text-[11px] px-2 py-0.5 rounded ${colorClass}`}>
|
|
{STEP_TYPE_LABELS[step.step_type] || step.step_type}
|
|
</span>
|
|
</div>
|
|
{uids.length > 0 && (
|
|
<div className="flex items-center gap-1 mt-1 flex-wrap">
|
|
<span className="text-xs text-[var(--dg-text-muted)]">关联人员:</span>
|
|
{uids.map((uid) => (
|
|
<span key={uid} className="text-[11px] px-1.5 py-0.5 rounded bg-blue-500/10 text-blue-400">
|
|
{getUserName(uid)}
|
|
</span>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Actions */}
|
|
<div className="flex items-center gap-1 ml-4 shrink-0">
|
|
<button
|
|
onClick={() => setEditorWorkflow(wf)}
|
|
className="w-8 h-8 rounded-lg flex items-center justify-center text-[var(--dg-text-secondary)] hover:bg-blue-500/10 hover:text-blue-400 transition-colors"
|
|
title="编辑"
|
|
>
|
|
<Edit2 className="w-4 h-4" />
|
|
</button>
|
|
{!wf.is_default && (
|
|
<button onClick={() => setDefault(wf.id)} className="w-8 h-8 rounded-lg flex items-center justify-center text-[var(--dg-text-secondary)] hover:bg-yellow-500/10 hover:text-yellow-400 transition-colors" title="设为默认">
|
|
<Star className="w-4 h-4" />
|
|
</button>
|
|
)}
|
|
<button onClick={() => setPreviewWorkflow(wf)} className="w-8 h-8 rounded-lg flex items-center justify-center text-[var(--dg-text-secondary)] hover:bg-[var(--dg-bg-hover)] hover:text-[var(--dg-text-primary)] transition-colors" title="预览">
|
|
<Eye className="w-4 h-4" />
|
|
</button>
|
|
<button onClick={() => handleClone(wf.id)} className="w-8 h-8 rounded-lg flex items-center justify-center text-[var(--dg-text-secondary)] hover:bg-blue-500/10 hover:text-blue-400 transition-colors" title="克隆">
|
|
<Copy className="w-4 h-4" />
|
|
</button>
|
|
<button onClick={() => toggleWorkflow(wf)} className="w-8 h-8 rounded-lg flex items-center justify-center transition-colors" title={wf.is_active ? '禁用' : '启用'}>
|
|
{wf.is_active ? <ToggleRight className="w-5 h-5 text-green-400" /> : <ToggleLeft className="w-5 h-5 text-[var(--dg-text-muted)]" />}
|
|
</button>
|
|
<button onClick={() => handleDelete(wf.id)} className="w-8 h-8 rounded-lg flex items-center justify-center text-[var(--dg-text-secondary)] hover:bg-red-500/15 hover:text-red-400 transition-colors" title="删除">
|
|
<Trash2 className="w-4 h-4" />
|
|
</button>
|
|
<button onClick={() => setExpandedId(isExpanded ? null : wf.id)} className="w-8 h-8 rounded-lg flex items-center justify-center text-[var(--dg-text-secondary)] hover:bg-[var(--dg-bg-hover)] transition-colors" title="展开">
|
|
{isExpanded ? <ChevronUp className="w-4 h-4" /> : <ChevronDown className="w-4 h-4" />}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
})}
|
|
</div>
|
|
</>
|
|
)}
|
|
|
|
{/* Preview Modal */}
|
|
{previewWorkflow && (
|
|
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm" onClick={() => setPreviewWorkflow(null)}>
|
|
<div className="bg-[var(--dg-bg-secondary)] border border-[var(--dg-border)] rounded-xl p-6 max-w-2xl w-full mx-4 max-h-[85vh] overflow-y-auto" onClick={(e) => e.stopPropagation()}>
|
|
<div className="flex items-center justify-between mb-6">
|
|
<div className="flex items-center gap-2">
|
|
<h3 className="text-xl font-semibold">{previewWorkflow.name}</h3>
|
|
{previewWorkflow.is_default && (
|
|
<span className="inline-flex items-center gap-1 px-2 py-0.5 bg-yellow-500/10 text-yellow-400 text-xs rounded">
|
|
<Star className="w-3 h-3" /> 默认
|
|
</span>
|
|
)}
|
|
</div>
|
|
<button onClick={() => setPreviewWorkflow(null)} className="w-8 h-8 rounded-lg flex items-center justify-center hover:bg-[var(--dg-bg-hover)] transition-colors">
|
|
<X className="w-5 h-5" />
|
|
</button>
|
|
</div>
|
|
{previewWorkflow.description && <p className="text-sm text-[var(--dg-text-secondary)] mb-4">{previewWorkflow.description}</p>}
|
|
<div className="space-y-4">
|
|
{previewWorkflow.steps.map((step, i) => {
|
|
const StepIcon = STEP_TYPE_ICONS[step.step_type] || Shield;
|
|
const colorClass = STEP_TYPE_COLORS[step.step_type] || STEP_TYPE_COLORS.serial;
|
|
const uids: number[] = step.approver_ids ? JSON.parse(step.approver_ids) : [];
|
|
return (
|
|
<div key={step.id || i} className="flex items-start gap-4">
|
|
<div className={`w-10 h-10 rounded-full flex items-center justify-center flex-shrink-0 ${colorClass.split(' ')[0]}`}>
|
|
<StepIcon className={`w-5 h-5 ${colorClass.split(' ')[1]}`} />
|
|
</div>
|
|
<div className="flex-1">
|
|
<div className="flex items-center gap-2 mb-1">
|
|
<span className="font-medium">{step.name}</span>
|
|
<span className={`text-[11px] px-2 py-0.5 rounded ${colorClass}`}>
|
|
{STEP_TYPE_LABELS[step.step_type] || step.step_type}
|
|
</span>
|
|
</div>
|
|
{uids.length > 0 && (
|
|
<div className="flex items-center gap-1 mt-1 flex-wrap">
|
|
<span className="text-xs text-[var(--dg-text-muted)]">关联人员:</span>
|
|
{uids.map((uid) => (
|
|
<span key={uid} className="text-[11px] px-1.5 py-0.5 rounded bg-blue-500/10 text-blue-400">
|
|
{getUserName(uid)}
|
|
</span>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
{i < previewWorkflow.steps.length - 1 && <ArrowRight className="w-5 h-5 text-[var(--dg-text-muted)] mt-2" />}
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
<div className="flex justify-end mt-6">
|
|
<button onClick={() => setPreviewWorkflow(null)} className="px-5 py-2.5 bg-[var(--dg-bg-tertiary)] border border-[var(--dg-border)] rounded-lg text-sm hover:bg-[var(--dg-bg-hover)] transition-colors">
|
|
关闭
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Editor Modal */}
|
|
{editorWorkflow !== undefined && (
|
|
<WorkflowEditorModal
|
|
workflow={editorWorkflow}
|
|
users={users}
|
|
onClose={() => setEditorWorkflow(undefined)}
|
|
onSaved={() => { setEditorWorkflow(undefined); fetchWorkflows(); }}
|
|
/>
|
|
)}
|
|
<ConfirmDialog
|
|
open={!!deleteConfirm}
|
|
title={deleteConfirm?.msg || '确认操作'}
|
|
variant="danger"
|
|
confirmText="确定"
|
|
onConfirm={() => { deleteConfirm?.onConfirm(); }}
|
|
onCancel={() => setDeleteConfirm(null)}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|