feat(approval): Q10 ApprovalWorkflowPage 巨型组件拆分 (705L→167L, -76%)
提取 4 个独立文件到 approval-workflow/ 子目录: - types.ts (93L): 接口+常量+工具函数 - UserSelectInline.tsx (96L): 用户多选下拉组件 - WorkflowEditorModal.tsx (272L): 工作流编辑器弹窗 - WorkflowCard.tsx (134L): 工作流卡片组件 验证: tsc -b=0, npm build✓ (16.99s), ESLint errors=0, 17/17 测试通过
This commit is contained in:
attacker committed
1 parent
1f8abc0bbc
commit
6ba424a8bc
7 files changed
+650
-560
No files matched your search
@@ -1,461 +1,19 @@
|
||||
// 审批流程配置 — 参考 OpsxSQL WorkflowPage 工作流模式
|
||||
import { useState, useEffect, useCallback, useRef } from 'react';
|
||||
// Q10 组件拆分: 类型/常量/工具 → types.ts, 用户选择 → UserSelectInline.tsx,
|
||||
// 编辑器弹窗 → WorkflowEditorModal.tsx, 卡片 → WorkflowCard.tsx
|
||||
import { useState, useEffect, useCallback } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import {
|
||||
Plus, Edit2, Trash2, X, ChevronDown, ChevronUp, ArrowUp, ArrowDown,
|
||||
Play, Loader2, Star, CheckCircle, GitBranch, Users, Shield,
|
||||
} from 'lucide-react';
|
||||
import { Card, CardContent } from '@/components/ui/card';
|
||||
import { Plus, GitBranch } from 'lucide-react';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import {
|
||||
Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle,
|
||||
} from '@/components/ui/dialog';
|
||||
import { toast } from 'sonner';
|
||||
import { approvalWorkflowApi, userApi } from '@/api';
|
||||
import { useConfirm } from '@/components/ui/confirm-dialog';
|
||||
import { PageShell } from '@/components/layout/PageShell';
|
||||
import { PageEmpty } from '@/components/layout/PageEmpty';
|
||||
import type { JsonData } from '@/types/common';
|
||||
|
||||
/* ------------------------------------------------------------------ */
|
||||
/* Types */
|
||||
/* ------------------------------------------------------------------ */
|
||||
|
||||
interface WorkflowStep {
|
||||
id?: number;
|
||||
workflow_id?: number;
|
||||
step_number: number;
|
||||
name: string;
|
||||
step_type: string;
|
||||
approver_ids: string | null;
|
||||
is_required: boolean;
|
||||
timeout_hours: number;
|
||||
auto_approve_on_timeout: boolean;
|
||||
}
|
||||
|
||||
interface WorkflowItem {
|
||||
id: number;
|
||||
name: string;
|
||||
description: string | null;
|
||||
category: string;
|
||||
is_default: boolean;
|
||||
is_active: boolean;
|
||||
created_at: string;
|
||||
steps: WorkflowStep[];
|
||||
}
|
||||
|
||||
interface UserItem {
|
||||
id: number;
|
||||
username: string;
|
||||
display_name: string | null;
|
||||
role: string;
|
||||
is_active?: boolean;
|
||||
}
|
||||
|
||||
interface StepDraft {
|
||||
name: string;
|
||||
step_type: 'submit' | 'audit' | 'execute';
|
||||
approver_ids: number[];
|
||||
}
|
||||
|
||||
const STEP_TYPE_COLORS: Record<string, string> = {
|
||||
submit: 'bg-blue-500/15 dg-text-blue border-blue-500/30',
|
||||
audit: 'bg-purple-500/15 dg-text-purple border-purple-500/30',
|
||||
execute: 'bg-green-500/15 dg-text-green border-green-500/30',
|
||||
};
|
||||
|
||||
const STEP_TYPE_ICONS: Record<string, React.ElementType> = {
|
||||
submit: Users,
|
||||
audit: Shield,
|
||||
execute: Play,
|
||||
};
|
||||
|
||||
/** 解析审批人 ID 列表 // Logan.Li */
|
||||
function parseApproverIds(ids: string | null): number[] {
|
||||
if (!ids) return [];
|
||||
try {
|
||||
const p = JSON.parse(ids);
|
||||
return Array.isArray(p) ? p : [];
|
||||
} catch { return []; }
|
||||
}
|
||||
|
||||
/** 查找 admin 用户 ID，用于新建流程默认审批/执行人 // Logan.Li */
|
||||
function resolveAdminId(users: UserItem[]): number[] {
|
||||
const admin = users.find((u) => u.username === 'admin');
|
||||
return admin ? [admin.id] : [];
|
||||
}
|
||||
|
||||
/** 新建流程默认步骤：提交 → admin 审批 → admin 执行 // Logan.Li */
|
||||
function buildDefaultSteps(users: UserItem[], t: (key: string) => string): StepDraft[] {
|
||||
const adminIds = resolveAdminId(users);
|
||||
return [
|
||||
{ name: t('approval.detail.submitNode'), step_type: 'submit', approver_ids: [] },
|
||||
{ name: t('approval.step.auditShort'), step_type: 'audit', approver_ids: adminIds },
|
||||
{ name: t('approval.step.executeShort'), step_type: 'execute', approver_ids: adminIds },
|
||||
];
|
||||
}
|
||||
|
||||
/* ------------------------------------------------------------------ */
|
||||
/* UserSelectInline */
|
||||
/* ------------------------------------------------------------------ */
|
||||
|
||||
function UserSelectInline({
|
||||
users, selectedIds, label, onToggle, onToggleAll, onClear, getUserName,
|
||||
}: {
|
||||
users: UserItem[];
|
||||
selectedIds: number[];
|
||||
label: string;
|
||||
onToggle: (uid: number) => void;
|
||||
onToggleAll: () => void;
|
||||
onClear: () => void;
|
||||
getUserName: (uid: number) => string;
|
||||
}) {
|
||||
const { t } = useTranslation();
|
||||
const [open, setOpen] = useState(false);
|
||||
const triggerRef = useRef<HTMLButtonElement>(null);
|
||||
const [pos, setPos] = useState({ top: 0, left: 0, width: 0 });
|
||||
|
||||
const updatePos = () => {
|
||||
if (triggerRef.current) {
|
||||
const rect = triggerRef.current.getBoundingClientRect();
|
||||
setPos({ top: rect.bottom + 4, left: rect.left, width: rect.width });
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="relative">
|
||||
<button
|
||||
ref={triggerRef}
|
||||
type="button"
|
||||
onClick={() => { if (!open) updatePos(); 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">
|
||||
{selectedIds.length === 0 ? `${label} * ${t('approval.editor.pleaseSelect')}` : `${label} (${t('approval.editor.people', { count: selectedIds.length })})`}
|
||||
</span>
|
||||
<ChevronDown className={`w-4 h-4 text-[var(--dg-text-muted)] transition-transform ${open ? 'rotate-180' : ''}`} />
|
||||
</button>
|
||||
|
||||
{selectedIds.length > 1 && (
|
||||
<div className="flex flex-wrap gap-1 mt-1.5">
|
||||
{selectedIds.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 dg-text-blue">
|
||||
{getUserName(uid)}
|
||||
<button onClick={() => onToggle(uid)} className="hover:dg-text-red"><X className="w-3 h-3" /></button>
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{open && (
|
||||
<>
|
||||
<div className="fixed inset-0 z-40" onClick={() => setOpen(false)} />
|
||||
<div className="fixed z-50 bg-[var(--dg-bg-secondary)] border border-[var(--dg-border)] rounded-lg shadow-xl max-h-52 overflow-y-auto"
|
||||
style={{ top: pos.top, left: pos.left, width: pos.width }}>
|
||||
<div className="flex items-center justify-between px-3 py-2 border-b border-[var(--dg-border)]">
|
||||
<button onClick={onToggleAll} className="text-[11px] dg-text-blue hover:text-blue-300">
|
||||
{selectedIds.length === users.length && users.length > 0 ? t('approval.editor.deselectAll') : t('approval.editor.selectAll')}
|
||||
</button>
|
||||
{selectedIds.length > 0 && (
|
||||
<button onClick={onClear} className="text-[11px] dg-text-red hover:dg-text-red">{t('common.clear')}</button>
|
||||
)}
|
||||
</div>
|
||||
{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?: WorkflowItem | null;
|
||||
users: UserItem[];
|
||||
onClose: () => void;
|
||||
onSaved: () => void;
|
||||
}
|
||||
|
||||
function WorkflowEditorModal({ workflow, users, onClose, onSaved }: EditorProps) {
|
||||
const { t } = useTranslation();
|
||||
const isEdit = !!workflow;
|
||||
const [name, setName] = useState(workflow?.name || '');
|
||||
const [description, setDescription] = useState(workflow?.description || '');
|
||||
const [category, setCategory] = useState(workflow?.category || 'resource');
|
||||
const [steps, setSteps] = useState<StepDraft[]>([]);
|
||||
const [submitting, setSubmitting] = useState(false);
|
||||
const [error, setError] = useState('');
|
||||
|
||||
const stepTypeLabels: Record<string, string> = {
|
||||
submit: t('approval.step.submit'),
|
||||
audit: t('approval.step.audit'),
|
||||
execute: t('approval.step.execute'),
|
||||
};
|
||||
|
||||
const stepTypes = [
|
||||
{ value: 'submit' as const, label: t('approval.step.submit') },
|
||||
{ value: 'audit' as const, label: t('approval.step.audit') },
|
||||
{ value: 'execute' as const, label: t('approval.step.execute') },
|
||||
];
|
||||
|
||||
useEffect(() => {
|
||||
if (workflow?.steps?.length) {
|
||||
setSteps(
|
||||
workflow.steps.map((s) => ({
|
||||
name: s.name,
|
||||
step_type: (s.step_type === 'serial' || s.step_type === 'parallel')
|
||||
? ('audit' as const)
|
||||
: (s.step_type as 'submit' | 'audit' | 'execute'),
|
||||
approver_ids: parseApproverIds(s.approver_ids),
|
||||
}))
|
||||
);
|
||||
} else {
|
||||
setSteps(buildDefaultSteps(users, t));
|
||||
}
|
||||
}, [workflow, users, t]);
|
||||
|
||||
const addStep = (type: 'submit' | 'audit' | 'execute') => {
|
||||
const labels: Record<string, string> = {
|
||||
submit: t('approval.step.submitShort'),
|
||||
audit: t('approval.step.auditShort'),
|
||||
execute: t('approval.step.executeShort'),
|
||||
};
|
||||
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 getEligibleUsers = (stepType: string) => {
|
||||
const active = users.filter(u => u.is_active !== false);
|
||||
if (stepType === 'audit') return active;
|
||||
if (stepType === 'execute') return active.filter(u =>
|
||||
['super_admin', 'k8s_admin', 'release_admin', 'resource_admin'].includes(u.role)
|
||||
);
|
||||
return active;
|
||||
};
|
||||
|
||||
const toggleAllUsers = (idx: number) => {
|
||||
const step = steps[idx];
|
||||
const eligible = getEligibleUsers(step.step_type);
|
||||
const allSelected = step.approver_ids.length === eligible.length && eligible.length > 0;
|
||||
updateStep(idx, { approver_ids: allSelected ? [] : eligible.map((u) => u.id) });
|
||||
};
|
||||
|
||||
const handleSubmit = async () => {
|
||||
if (!name.trim()) { setError(t('approval.editor.nameRequired')); return; }
|
||||
if (steps.length === 0) { setError(t('approval.editor.addStepRequired')); return; }
|
||||
for (let i = 0; i < steps.length; i++) {
|
||||
if (steps[i].step_type !== 'submit' && steps[i].approver_ids.length === 0) {
|
||||
setError(t('approval.editor.stepNeedsApprover', { name: steps[i].name }));
|
||||
return;
|
||||
}
|
||||
}
|
||||
setSubmitting(true);
|
||||
setError('');
|
||||
try {
|
||||
const payload = {
|
||||
name: name.trim(),
|
||||
description: description.trim() || null,
|
||||
category,
|
||||
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 approvalWorkflowApi.update(workflow.id, payload);
|
||||
} else {
|
||||
await approvalWorkflowApi.create(payload);
|
||||
}
|
||||
onSaved();
|
||||
} catch (e: unknown) {
|
||||
const msg = (e as { response?: { data?: { detail?: string } } })?.response?.data?.detail || t('approval.editor.saveFailed');
|
||||
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 text-[var(--dg-text-primary)]';
|
||||
|
||||
return (
|
||||
<Dialog open onOpenChange={(open) => !open && onClose()}>
|
||||
<DialogContent className="dg-card sm:max-w-2xl max-h-[90vh] overflow-hidden flex flex-col p-0 gap-0">
|
||||
<DialogHeader className="px-5 py-4 border-b border-[var(--dg-border)] shrink-0">
|
||||
<DialogTitle className="text-base font-semibold text-[var(--dg-text-primary)]">
|
||||
{isEdit ? t('approval.editor.editTitle') : t('approval.editor.newTitle')}
|
||||
</DialogTitle>
|
||||
<DialogDescription className="sr-only">
|
||||
{isEdit ? t('approval.editor.editTitle') : t('approval.editor.newTitle')}
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
|
||||
<div className="px-5 pb-5 space-y-4 pt-4 overflow-y-auto flex-1 min-h-0">
|
||||
{error && <div className="px-3 py-2 text-sm dg-text-red bg-red-500/10 rounded-lg">{error}</div>}
|
||||
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label className="block text-xs font-medium text-[var(--dg-text-secondary)] mb-1">{t('approval.editor.workflowName')} *</label>
|
||||
<input className={inputCls} value={name} onChange={(e) => setName(e.target.value)} placeholder={t('approval.editor.enterName')} />
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-xs font-medium text-[var(--dg-text-secondary)] mb-1">{t('approval.editor.workflowCategory')}</label>
|
||||
<select className={inputCls} value={category} onChange={(e) => setCategory(e.target.value)}>
|
||||
<option value="resource">{t('approval.category.resource')}</option>
|
||||
<option value="app">{t('approval.category.app')}</option>
|
||||
<option value="permission">{t('approval.category.permission')}</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-xs font-medium text-[var(--dg-text-secondary)] mb-1">{t('approval.editor.workflowDesc')}</label>
|
||||
<input className={inputCls} value={description} onChange={(e) => setDescription(e.target.value)} placeholder={t('common.optional')} />
|
||||
</div>
|
||||
|
||||
{/* Steps */}
|
||||
<div>
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<label className="text-xs font-medium text-[var(--dg-text-secondary)]">{t('approval.editor.workflowSteps')}</label>
|
||||
<div className="flex items-center gap-1">
|
||||
{stepTypes.map((tp) => (
|
||||
<button key={tp.value} onClick={() => addStep(tp.value)}
|
||||
className="flex items-center gap-1 px-2 py-1 text-[11px] font-medium bg-blue-500/10 dg-text-blue hover:bg-blue-500/20 rounded transition-colors">
|
||||
<Plus className="w-3 h-3" />{tp.label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
{steps.map((step, idx) => {
|
||||
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)]">
|
||||
<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 text-[var(--dg-text-primary)]"
|
||||
value={step.name} onChange={(e) => updateStep(idx, { name: e.target.value })}
|
||||
placeholder={t('approval.step.name')}
|
||||
/>
|
||||
<span className={`text-[10px] px-1.5 py-0.5 rounded ${colorCls}`}>
|
||||
{stepTypeLabels[step.step_type]}
|
||||
</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">
|
||||
<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">
|
||||
<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:dg-text-red transition-colors">
|
||||
<Trash2 className="w-3.5 h-3.5" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{step.step_type !== 'submit' && (
|
||||
<div className="pl-9 mt-2">
|
||||
<UserSelectInline
|
||||
users={getEligibleUsers(step.step_type)}
|
||||
selectedIds={step.approver_ids}
|
||||
label={step.step_type === 'audit' ? t('approval.editor.auditUser') : t('approval.editor.executeUser')}
|
||||
onToggle={(uid) => toggleUser(idx, uid)}
|
||||
onToggleAll={() => toggleAllUsers(idx)}
|
||||
onClear={() => updateStep(idx, { approver_ids: [] })}
|
||||
getUserName={getUserName}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
|
||||
{steps.length === 0 && (
|
||||
<div className="text-center py-4 text-sm text-[var(--dg-text-muted)]">
|
||||
{t('approval.step.addHint')}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<DialogFooter className="px-5 py-4 border-t border-[var(--dg-border)] shrink-0">
|
||||
<Button variant="outline" className="dg-btn-secondary" onClick={onClose}>
|
||||
{t('common.cancel')}
|
||||
</Button>
|
||||
<Button className="dg-btn-primary" onClick={handleSubmit} disabled={submitting}>
|
||||
{submitting && <Loader2 className="w-4 h-4 animate-spin mr-1" />}
|
||||
{isEdit ? t('common.save') : t('common.create')}
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
|
||||
/* ------------------------------------------------------------------ */
|
||||
/* Main Page */
|
||||
/* ------------------------------------------------------------------ */
|
||||
import { WorkflowEditorModal } from './approval-workflow/WorkflowEditorModal';
|
||||
import { WorkflowCard } from './approval-workflow/WorkflowCard';
|
||||
import type { WorkflowItem, UserItem } from './approval-workflow/types';
|
||||
|
||||
export default function ApprovalWorkflowPage() {
|
||||
const { t } = useTranslation();
|
||||
@@ -467,18 +25,6 @@ export default function ApprovalWorkflowPage() {
|
||||
const [expandedId, setExpandedId] = useState<number | null>(null);
|
||||
const [editorWorkflow, setEditorWorkflow] = useState<WorkflowItem | null | undefined>(undefined);
|
||||
|
||||
const categoryLabels: Record<string, string> = {
|
||||
resource: t('approval.category.resource'),
|
||||
app: t('approval.category.app'),
|
||||
permission: t('approval.category.permission'),
|
||||
};
|
||||
|
||||
const stepTypeLabels: Record<string, string> = {
|
||||
submit: t('approval.step.submit'),
|
||||
audit: t('approval.step.audit'),
|
||||
execute: t('approval.step.execute'),
|
||||
};
|
||||
|
||||
const fetchWorkflows = useCallback(async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
@@ -581,7 +127,7 @@ export default function ApprovalWorkflowPage() {
|
||||
/>
|
||||
) : items.length === 0 ? (
|
||||
<PageEmpty
|
||||
icon={<GitBranch className="w-12 h-12" />}
|
||||
icon={<GitBranch className="h-12 w-12" />}
|
||||
title={t('approval.noWorkflows')}
|
||||
action={(
|
||||
<Button variant="outline" className="dg-btn-secondary" onClick={() => setEditorWorkflow(null)}>
|
||||
@@ -591,103 +137,19 @@ export default function ApprovalWorkflowPage() {
|
||||
/>
|
||||
) : (
|
||||
<div className="grid gap-4">
|
||||
{items.map((wf) => {
|
||||
const isExpanded = expandedId === wf.id;
|
||||
return (
|
||||
<Card key={wf.id} className={`dg-card overflow-hidden ${!wf.is_active ? 'opacity-60' : ''}`}>
|
||||
<CardContent className="p-4 sm:p-5">
|
||||
<div className="flex flex-col sm:flex-row sm:items-start sm:justify-between gap-3">
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center gap-3 mb-2 flex-wrap">
|
||||
<h3 className="text-lg font-semibold text-[var(--dg-text-primary)]">{wf.name}</h3>
|
||||
{wf.is_default && <span className="text-[10px] px-1.5 py-0.5 rounded bg-yellow-400/15 dg-text-yellow flex items-center gap-1"><Star className="w-3 h-3" />{t('approval.status.default')}</span>}
|
||||
<span className={`text-[10px] px-1.5 py-0.5 rounded ${wf.is_active ? 'bg-green-500/15 dg-text-green' : 'bg-red-500/15 dg-text-red'}`}>
|
||||
{wf.is_active ? t('approval.status.enabled') : t('approval.status.disabled')}
|
||||
</span>
|
||||
<span className="text-[10px] px-1.5 py-0.5 rounded bg-blue-500/15 dg-text-blue">
|
||||
{categoryLabels[wf.category] || wf.category}
|
||||
</span>
|
||||
</div>
|
||||
{wf.description && <p className="text-sm text-[var(--dg-text-secondary)] mb-1">{wf.description}</p>}
|
||||
<div className="flex items-center gap-1.5 mt-2 flex-wrap">
|
||||
{wf.steps?.map((s, i) => (
|
||||
<span key={i} className="flex items-center gap-1">
|
||||
<span className={`text-[10px] px-1.5 py-0.5 rounded ${STEP_TYPE_COLORS[s.step_type] || 'dg-badge-muted'}`}>
|
||||
{stepTypeLabels[s.step_type] || s.step_type}
|
||||
</span>
|
||||
{i < (wf.steps?.length || 0) - 1 && (
|
||||
<span className="text-[var(--dg-text-muted)] text-[10px]">→</span>
|
||||
)}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-1 flex-shrink-0 sm:ml-4 self-end sm:self-start">
|
||||
<button onClick={() => setExpandedId(isExpanded ? null : wf.id)}
|
||||
className="p-1.5 rounded hover:bg-[var(--dg-bg-hover)] text-[var(--dg-text-muted)] transition-colors">
|
||||
{isExpanded ? <ChevronUp className="w-4 h-4" /> : <ChevronDown className="w-4 h-4" />}
|
||||
</button>
|
||||
{!wf.is_default && (
|
||||
<button onClick={() => setDefault(wf.id)}
|
||||
className="p-1.5 rounded hover:bg-yellow-500/10 text-[var(--dg-text-muted)] hover:dg-text-yellow transition-colors" title={t('approval.msg.setDefaultSuccess')}>
|
||||
<Star className="w-4 h-4" />
|
||||
</button>
|
||||
)}
|
||||
<button onClick={() => toggleActive(wf)}
|
||||
className={`p-1.5 rounded transition-colors ${wf.is_active ? 'hover:bg-red-500/10 dg-text-green hover:dg-text-red' : 'hover:bg-green-500/10 dg-text-red hover:dg-text-green'}`}
|
||||
title={wf.is_active ? t('approval.status.disabled') : t('approval.status.enabled')}>
|
||||
<Play className={`w-4 h-4 ${!wf.is_active ? 'rotate-180' : ''}`} />
|
||||
</button>
|
||||
<button onClick={() => setEditorWorkflow(wf)}
|
||||
className="p-1.5 rounded hover:bg-[var(--dg-bg-hover)] text-[var(--dg-text-muted)] hover:dg-text-blue transition-colors" title={t('common.edit')}>
|
||||
<Edit2 className="w-4 h-4" />
|
||||
</button>
|
||||
<button onClick={() => handleDelete(wf.id, wf.name)}
|
||||
className="p-1.5 rounded hover:bg-red-500/10 text-[var(--dg-text-muted)] hover:dg-text-red transition-colors" title={t('common.delete')}>
|
||||
<Trash2 className="w-4 h-4" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{isExpanded && (
|
||||
<div className="mt-4 pt-4 border-t border-[var(--dg-border)] space-y-3">
|
||||
{wf.steps?.map((s, i) => {
|
||||
const ids = parseApproverIds(s.approver_ids);
|
||||
return (
|
||||
<div key={i} className="flex items-start gap-3 p-3 bg-[var(--dg-bg-primary)] rounded-lg">
|
||||
<div className="w-6 h-6 rounded-full bg-[var(--dg-bg-tertiary)] flex items-center justify-center text-xs font-medium text-[var(--dg-text-secondary)] flex-shrink-0 mt-0.5">
|
||||
{s.step_number}
|
||||
</div>
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center gap-2 mb-1">
|
||||
<span className="text-sm font-medium text-[var(--dg-text-primary)]">{s.name}</span>
|
||||
<span className={`text-[10px] px-1.5 py-0.5 rounded ${STEP_TYPE_COLORS[s.step_type] || 'dg-badge-muted'}`}>
|
||||
{stepTypeLabels[s.step_type] || s.step_type}
|
||||
</span>
|
||||
</div>
|
||||
{ids.length > 0 && (
|
||||
<div className="flex flex-wrap gap-1">
|
||||
{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 dg-text-blue">
|
||||
{getUserName(uid)}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
{ids.length === 0 && s.step_type !== 'submit' && (
|
||||
<span className="text-[11px] dg-text-red">{t('approval.detail.noApproverLinked')}</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
})}
|
||||
{items.map((wf) => (
|
||||
<WorkflowCard
|
||||
key={wf.id}
|
||||
wf={wf}
|
||||
isExpanded={expandedId === wf.id}
|
||||
getUserName={getUserName}
|
||||
onToggleExpand={() => setExpandedId(expandedId === wf.id ? null : wf.id)}
|
||||
onSetDefault={() => setDefault(wf.id)}
|
||||
onToggleActive={() => toggleActive(wf)}
|
||||
onEdit={() => setEditorWorkflow(wf)}
|
||||
onDelete={() => handleDelete(wf.id, wf.name)}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</PageShell>
|
||||
|
||||
@@ -0,0 +1,96 @@
|
||||
// 审批人内联多选下拉组件 — 从 ApprovalWorkflowPage.tsx 提取 (Q10 组件拆分)
|
||||
import { useState, useRef } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { ChevronDown, X, CheckCircle } from 'lucide-react';
|
||||
import type { UserItem } from './types';
|
||||
|
||||
export function UserSelectInline({
|
||||
users, selectedIds, label, onToggle, onToggleAll, onClear, getUserName,
|
||||
}: {
|
||||
users: UserItem[];
|
||||
selectedIds: number[];
|
||||
label: string;
|
||||
onToggle: (uid: number) => void;
|
||||
onToggleAll: () => void;
|
||||
onClear: () => void;
|
||||
getUserName: (uid: number) => string;
|
||||
}) {
|
||||
const { t } = useTranslation();
|
||||
const [open, setOpen] = useState(false);
|
||||
const triggerRef = useRef<HTMLButtonElement>(null);
|
||||
const [pos, setPos] = useState({ top: 0, left: 0, width: 0 });
|
||||
|
||||
const updatePos = () => {
|
||||
if (triggerRef.current) {
|
||||
const rect = triggerRef.current.getBoundingClientRect();
|
||||
setPos({ top: rect.bottom + 4, left: rect.left, width: rect.width });
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="relative">
|
||||
<button
|
||||
ref={triggerRef}
|
||||
type="button"
|
||||
onClick={() => { if (!open) updatePos(); 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">
|
||||
{selectedIds.length === 0 ? `${label} * ${t('approval.editor.pleaseSelect')}` : `${label} (${t('approval.editor.people', { count: selectedIds.length })})`}
|
||||
</span>
|
||||
<ChevronDown className={`w-4 h-4 text-[var(--dg-text-muted)] transition-transform ${open ? 'rotate-180' : ''}`} />
|
||||
</button>
|
||||
|
||||
{selectedIds.length > 1 && (
|
||||
<div className="flex flex-wrap gap-1 mt-1.5">
|
||||
{selectedIds.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 dg-text-blue">
|
||||
{getUserName(uid)}
|
||||
<button onClick={() => onToggle(uid)} className="hover:dg-text-red"><X className="w-3 h-3" /></button>
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{open && (
|
||||
<>
|
||||
<div className="fixed inset-0 z-40" onClick={() => setOpen(false)} />
|
||||
<div className="fixed z-50 bg-[var(--dg-bg-secondary)] border border-[var(--dg-border)] rounded-lg shadow-xl max-h-52 overflow-y-auto"
|
||||
style={{ top: pos.top, left: pos.left, width: pos.width }}>
|
||||
<div className="flex items-center justify-between px-3 py-2 border-b border-[var(--dg-border)]">
|
||||
<button onClick={onToggleAll} className="text-[11px] dg-text-blue hover:text-blue-300">
|
||||
{selectedIds.length === users.length && users.length > 0 ? t('approval.editor.deselectAll') : t('approval.editor.selectAll')}
|
||||
</button>
|
||||
{selectedIds.length > 0 && (
|
||||
<button onClick={onClear} className="text-[11px] dg-text-red hover:dg-text-red">{t('common.clear')}</button>
|
||||
)}
|
||||
</div>
|
||||
{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>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,134 @@
|
||||
// 工作流卡片组件 — 从 ApprovalWorkflowPage.tsx 提取 (Q10 组件拆分)
|
||||
// 渲染单个审批流程卡片：标题/徽章/步骤链/操作按钮/展开详情
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import {
|
||||
Star, Play, Edit2, Trash2, ChevronUp, ChevronDown,
|
||||
} from 'lucide-react';
|
||||
import { Card, CardContent } from '@/components/ui/card';
|
||||
import { STEP_TYPE_COLORS, parseApproverIds } from './types';
|
||||
import type { WorkflowItem } from './types';
|
||||
|
||||
export interface WorkflowCardProps {
|
||||
wf: WorkflowItem;
|
||||
isExpanded: boolean;
|
||||
getUserName: (uid: number) => string;
|
||||
onToggleExpand: () => void;
|
||||
onSetDefault: () => void;
|
||||
onToggleActive: () => void;
|
||||
onEdit: () => void;
|
||||
onDelete: () => void;
|
||||
}
|
||||
|
||||
export function WorkflowCard({
|
||||
wf, isExpanded, getUserName,
|
||||
onToggleExpand, onSetDefault, onToggleActive, onEdit, onDelete,
|
||||
}: WorkflowCardProps) {
|
||||
const { t } = useTranslation();
|
||||
|
||||
const categoryLabels: Record<string, string> = {
|
||||
resource: t('approval.category.resource'),
|
||||
app: t('approval.category.app'),
|
||||
permission: t('approval.category.permission'),
|
||||
};
|
||||
|
||||
const stepTypeLabels: Record<string, string> = {
|
||||
submit: t('approval.step.submit'),
|
||||
audit: t('approval.step.audit'),
|
||||
execute: t('approval.step.execute'),
|
||||
};
|
||||
|
||||
return (
|
||||
<Card className={`dg-card overflow-hidden ${!wf.is_active ? 'opacity-60' : ''}`}>
|
||||
<CardContent className="p-4 sm:p-5">
|
||||
<div className="flex flex-col sm:flex-row sm:items-start sm:justify-between gap-3">
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center gap-3 mb-2 flex-wrap">
|
||||
<h3 className="text-lg font-semibold text-[var(--dg-text-primary)]">{wf.name}</h3>
|
||||
{wf.is_default && <span className="text-[10px] px-1.5 py-0.5 rounded bg-yellow-400/15 dg-text-yellow flex items-center gap-1"><Star className="w-3 h-3" />{t('approval.status.default')}</span>}
|
||||
<span className={`text-[10px] px-1.5 py-0.5 rounded ${wf.is_active ? 'bg-green-500/15 dg-text-green' : 'bg-red-500/15 dg-text-red'}`}>
|
||||
{wf.is_active ? t('approval.status.enabled') : t('approval.status.disabled')}
|
||||
</span>
|
||||
<span className="text-[10px] px-1.5 py-0.5 rounded bg-blue-500/15 dg-text-blue">
|
||||
{categoryLabels[wf.category] || wf.category}
|
||||
</span>
|
||||
</div>
|
||||
{wf.description && <p className="text-sm text-[var(--dg-text-secondary)] mb-1">{wf.description}</p>}
|
||||
<div className="flex items-center gap-1.5 mt-2 flex-wrap">
|
||||
{wf.steps?.map((s, i) => (
|
||||
<span key={i} className="flex items-center gap-1">
|
||||
<span className={`text-[10px] px-1.5 py-0.5 rounded ${STEP_TYPE_COLORS[s.step_type] || 'dg-badge-muted'}`}>
|
||||
{stepTypeLabels[s.step_type] || s.step_type}
|
||||
</span>
|
||||
{i < (wf.steps?.length || 0) - 1 && (
|
||||
<span className="text-[var(--dg-text-muted)] text-[10px]">→</span>
|
||||
)}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-1 flex-shrink-0 sm:ml-4 self-end sm:self-start">
|
||||
<button onClick={onToggleExpand}
|
||||
className="p-1.5 rounded hover:bg-[var(--dg-bg-hover)] text-[var(--dg-text-muted)] transition-colors">
|
||||
{isExpanded ? <ChevronUp className="w-4 h-4" /> : <ChevronDown className="w-4 h-4" />}
|
||||
</button>
|
||||
{!wf.is_default && (
|
||||
<button onClick={onSetDefault}
|
||||
className="p-1.5 rounded hover:bg-yellow-500/10 text-[var(--dg-text-muted)] hover:dg-text-yellow transition-colors" title={t('approval.msg.setDefaultSuccess')}>
|
||||
<Star className="w-4 h-4" />
|
||||
</button>
|
||||
)}
|
||||
<button onClick={onToggleActive}
|
||||
className={`p-1.5 rounded transition-colors ${wf.is_active ? 'hover:bg-red-500/10 dg-text-green hover:dg-text-red' : 'hover:bg-green-500/10 dg-text-red hover:dg-text-green'}`}
|
||||
title={wf.is_active ? t('approval.status.disabled') : t('approval.status.enabled')}>
|
||||
<Play className={`w-4 h-4 ${!wf.is_active ? 'rotate-180' : ''}`} />
|
||||
</button>
|
||||
<button onClick={onEdit}
|
||||
className="p-1.5 rounded hover:bg-[var(--dg-bg-hover)] text-[var(--dg-text-muted)] hover:dg-text-blue transition-colors" title={t('common.edit')}>
|
||||
<Edit2 className="w-4 h-4" />
|
||||
</button>
|
||||
<button onClick={onDelete}
|
||||
className="p-1.5 rounded hover:bg-red-500/10 text-[var(--dg-text-muted)] hover:dg-text-red transition-colors" title={t('common.delete')}>
|
||||
<Trash2 className="w-4 h-4" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{isExpanded && (
|
||||
<div className="mt-4 pt-4 border-t border-[var(--dg-border)] space-y-3">
|
||||
{wf.steps?.map((s, i) => {
|
||||
const ids = parseApproverIds(s.approver_ids);
|
||||
return (
|
||||
<div key={i} className="flex items-start gap-3 p-3 bg-[var(--dg-bg-primary)] rounded-lg">
|
||||
<div className="w-6 h-6 rounded-full bg-[var(--dg-bg-tertiary)] flex items-center justify-center text-xs font-medium text-[var(--dg-text-secondary)] flex-shrink-0 mt-0.5">
|
||||
{s.step_number}
|
||||
</div>
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center gap-2 mb-1">
|
||||
<span className="text-sm font-medium text-[var(--dg-text-primary)]">{s.name}</span>
|
||||
<span className={`text-[10px] px-1.5 py-0.5 rounded ${STEP_TYPE_COLORS[s.step_type] || 'dg-badge-muted'}`}>
|
||||
{stepTypeLabels[s.step_type] || s.step_type}
|
||||
</span>
|
||||
</div>
|
||||
{ids.length > 0 && (
|
||||
<div className="flex flex-wrap gap-1">
|
||||
{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 dg-text-blue">
|
||||
{getUserName(uid)}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
{ids.length === 0 && s.step_type !== 'submit' && (
|
||||
<span className="text-[11px] dg-text-red">{t('approval.detail.noApproverLinked')}</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,272 @@
|
||||
// 工作流编辑器弹窗 — 从 ApprovalWorkflowPage.tsx 提取 (Q10 组件拆分)
|
||||
import { useState, useEffect } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { Plus, Trash2, ArrowUp, ArrowDown, Loader2, Shield } from 'lucide-react';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import {
|
||||
Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle,
|
||||
} from '@/components/ui/dialog';
|
||||
import { approvalWorkflowApi } from '@/api';
|
||||
import { UserSelectInline } from './UserSelectInline';
|
||||
import {
|
||||
STEP_TYPE_COLORS, STEP_TYPE_ICONS, EXECUTE_ELIGIBLE_ROLES,
|
||||
parseApproverIds, buildDefaultSteps,
|
||||
} from './types';
|
||||
import type { WorkflowItem, UserItem, StepDraft } from './types';
|
||||
|
||||
export interface EditorProps {
|
||||
workflow?: WorkflowItem | null;
|
||||
users: UserItem[];
|
||||
onClose: () => void;
|
||||
onSaved: () => void;
|
||||
}
|
||||
|
||||
export function WorkflowEditorModal({ workflow, users, onClose, onSaved }: EditorProps) {
|
||||
const { t } = useTranslation();
|
||||
const isEdit = !!workflow;
|
||||
const [name, setName] = useState(workflow?.name || '');
|
||||
const [description, setDescription] = useState(workflow?.description || '');
|
||||
const [category, setCategory] = useState(workflow?.category || 'resource');
|
||||
const [steps, setSteps] = useState<StepDraft[]>([]);
|
||||
const [submitting, setSubmitting] = useState(false);
|
||||
const [error, setError] = useState('');
|
||||
|
||||
const stepTypeLabels: Record<string, string> = {
|
||||
submit: t('approval.step.submit'),
|
||||
audit: t('approval.step.audit'),
|
||||
execute: t('approval.step.execute'),
|
||||
};
|
||||
|
||||
const stepTypes = [
|
||||
{ value: 'submit' as const, label: t('approval.step.submit') },
|
||||
{ value: 'audit' as const, label: t('approval.step.audit') },
|
||||
{ value: 'execute' as const, label: t('approval.step.execute') },
|
||||
];
|
||||
|
||||
useEffect(() => {
|
||||
if (workflow?.steps?.length) {
|
||||
setSteps(
|
||||
workflow.steps.map((s) => ({
|
||||
name: s.name,
|
||||
step_type: (s.step_type === 'serial' || s.step_type === 'parallel')
|
||||
? ('audit' as const)
|
||||
: (s.step_type as 'submit' | 'audit' | 'execute'),
|
||||
approver_ids: parseApproverIds(s.approver_ids),
|
||||
}))
|
||||
);
|
||||
} else {
|
||||
setSteps(buildDefaultSteps(users, t));
|
||||
}
|
||||
}, [workflow, users, t]);
|
||||
|
||||
const addStep = (type: 'submit' | 'audit' | 'execute') => {
|
||||
const labels: Record<string, string> = {
|
||||
submit: t('approval.step.submitShort'),
|
||||
audit: t('approval.step.auditShort'),
|
||||
execute: t('approval.step.executeShort'),
|
||||
};
|
||||
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 getEligibleUsers = (stepType: string) => {
|
||||
const active = users.filter(u => u.is_active !== false);
|
||||
if (stepType === 'audit') return active;
|
||||
if (stepType === 'execute') return active.filter(u => EXECUTE_ELIGIBLE_ROLES.includes(u.role));
|
||||
return active;
|
||||
};
|
||||
|
||||
const toggleAllUsers = (idx: number) => {
|
||||
const step = steps[idx];
|
||||
const eligible = getEligibleUsers(step.step_type);
|
||||
const allSelected = step.approver_ids.length === eligible.length && eligible.length > 0;
|
||||
updateStep(idx, { approver_ids: allSelected ? [] : eligible.map((u) => u.id) });
|
||||
};
|
||||
|
||||
const handleSubmit = async () => {
|
||||
if (!name.trim()) { setError(t('approval.editor.nameRequired')); return; }
|
||||
if (steps.length === 0) { setError(t('approval.editor.addStepRequired')); return; }
|
||||
for (let i = 0; i < steps.length; i++) {
|
||||
if (steps[i].step_type !== 'submit' && steps[i].approver_ids.length === 0) {
|
||||
setError(t('approval.editor.stepNeedsApprover', { name: steps[i].name }));
|
||||
return;
|
||||
}
|
||||
}
|
||||
setSubmitting(true);
|
||||
setError('');
|
||||
try {
|
||||
const payload = {
|
||||
name: name.trim(),
|
||||
description: description.trim() || null,
|
||||
category,
|
||||
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 approvalWorkflowApi.update(workflow.id, payload);
|
||||
} else {
|
||||
await approvalWorkflowApi.create(payload);
|
||||
}
|
||||
onSaved();
|
||||
} catch (e: unknown) {
|
||||
const msg = (e as { response?: { data?: { detail?: string } } })?.response?.data?.detail || t('approval.editor.saveFailed');
|
||||
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 text-[var(--dg-text-primary)]';
|
||||
|
||||
return (
|
||||
<Dialog open onOpenChange={(open) => !open && onClose()}>
|
||||
<DialogContent className="dg-card sm:max-w-2xl max-h-[90vh] overflow-hidden flex flex-col p-0 gap-0">
|
||||
<DialogHeader className="px-5 py-4 border-b border-[var(--dg-border)] shrink-0">
|
||||
<DialogTitle className="text-base font-semibold text-[var(--dg-text-primary)]">
|
||||
{isEdit ? t('approval.editor.editTitle') : t('approval.editor.newTitle')}
|
||||
</DialogTitle>
|
||||
<DialogDescription className="sr-only">
|
||||
{isEdit ? t('approval.editor.editTitle') : t('approval.editor.newTitle')}
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
|
||||
<div className="px-5 pb-5 space-y-4 pt-4 overflow-y-auto flex-1 min-h-0">
|
||||
{error && <div className="px-3 py-2 text-sm dg-text-red bg-red-500/10 rounded-lg">{error}</div>}
|
||||
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label className="block text-xs font-medium text-[var(--dg-text-secondary)] mb-1">{t('approval.editor.workflowName')} *</label>
|
||||
<input className={inputCls} value={name} onChange={(e) => setName(e.target.value)} placeholder={t('approval.editor.enterName')} />
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-xs font-medium text-[var(--dg-text-secondary)] mb-1">{t('approval.editor.workflowCategory')}</label>
|
||||
<select className={inputCls} value={category} onChange={(e) => setCategory(e.target.value)}>
|
||||
<option value="resource">{t('approval.category.resource')}</option>
|
||||
<option value="app">{t('approval.category.app')}</option>
|
||||
<option value="permission">{t('approval.category.permission')}</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-xs font-medium text-[var(--dg-text-secondary)] mb-1">{t('approval.editor.workflowDesc')}</label>
|
||||
<input className={inputCls} value={description} onChange={(e) => setDescription(e.target.value)} placeholder={t('common.optional')} />
|
||||
</div>
|
||||
|
||||
{/* Steps */}
|
||||
<div>
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<label className="text-xs font-medium text-[var(--dg-text-secondary)]">{t('approval.editor.workflowSteps')}</label>
|
||||
<div className="flex items-center gap-1">
|
||||
{stepTypes.map((tp) => (
|
||||
<button key={tp.value} onClick={() => addStep(tp.value)}
|
||||
className="flex items-center gap-1 px-2 py-1 text-[11px] font-medium bg-blue-500/10 dg-text-blue hover:bg-blue-500/20 rounded transition-colors">
|
||||
<Plus className="w-3 h-3" />{tp.label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
{steps.map((step, idx) => {
|
||||
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)]">
|
||||
<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 text-[var(--dg-text-primary)]"
|
||||
value={step.name} onChange={(e) => updateStep(idx, { name: e.target.value })}
|
||||
placeholder={t('approval.step.name')}
|
||||
/>
|
||||
<span className={`text-[10px] px-1.5 py-0.5 rounded ${colorCls}`}>
|
||||
{stepTypeLabels[step.step_type]}
|
||||
</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">
|
||||
<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">
|
||||
<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:dg-text-red transition-colors">
|
||||
<Trash2 className="w-3.5 h-3.5" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{step.step_type !== 'submit' && (
|
||||
<div className="pl-9 mt-2">
|
||||
<UserSelectInline
|
||||
users={getEligibleUsers(step.step_type)}
|
||||
selectedIds={step.approver_ids}
|
||||
label={step.step_type === 'audit' ? t('approval.editor.auditUser') : t('approval.editor.executeUser')}
|
||||
onToggle={(uid) => toggleUser(idx, uid)}
|
||||
onToggleAll={() => toggleAllUsers(idx)}
|
||||
onClear={() => updateStep(idx, { approver_ids: [] })}
|
||||
getUserName={getUserName}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
|
||||
{steps.length === 0 && (
|
||||
<div className="text-center py-4 text-sm text-[var(--dg-text-muted)]">
|
||||
{t('approval.step.addHint')}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<DialogFooter className="px-5 py-4 border-t border-[var(--dg-border)] shrink-0">
|
||||
<Button variant="outline" className="dg-btn-secondary" onClick={onClose}>
|
||||
{t('common.cancel')}
|
||||
</Button>
|
||||
<Button className="dg-btn-primary" onClick={handleSubmit} disabled={submitting}>
|
||||
{submitting && <Loader2 className="w-4 h-4 animate-spin mr-1" />}
|
||||
{isEdit ? t('common.save') : t('common.create')}
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,93 @@
|
||||
// 审批流程配置 — 共享类型 + 常量 + 工具函数
|
||||
// 从 ApprovalWorkflowPage.tsx 提取 (Q10 组件拆分)
|
||||
import type React from 'react';
|
||||
import { Users, Shield, Play } from 'lucide-react';
|
||||
|
||||
/* ------------------------------------------------------------------ */
|
||||
/* Types */
|
||||
/* ------------------------------------------------------------------ */
|
||||
|
||||
export interface WorkflowStep {
|
||||
id?: number;
|
||||
workflow_id?: number;
|
||||
step_number: number;
|
||||
name: string;
|
||||
step_type: string;
|
||||
approver_ids: string | null;
|
||||
is_required: boolean;
|
||||
timeout_hours: number;
|
||||
auto_approve_on_timeout: boolean;
|
||||
}
|
||||
|
||||
export interface WorkflowItem {
|
||||
id: number;
|
||||
name: string;
|
||||
description: string | null;
|
||||
category: string;
|
||||
is_default: boolean;
|
||||
is_active: boolean;
|
||||
created_at: string;
|
||||
steps: WorkflowStep[];
|
||||
}
|
||||
|
||||
export interface UserItem {
|
||||
id: number;
|
||||
username: string;
|
||||
display_name: string | null;
|
||||
role: string;
|
||||
is_active?: boolean;
|
||||
}
|
||||
|
||||
export interface StepDraft {
|
||||
name: string;
|
||||
step_type: 'submit' | 'audit' | 'execute';
|
||||
approver_ids: number[];
|
||||
}
|
||||
|
||||
/* ------------------------------------------------------------------ */
|
||||
/* Constants */
|
||||
/* ------------------------------------------------------------------ */
|
||||
|
||||
export const STEP_TYPE_COLORS: Record<string, string> = {
|
||||
submit: 'bg-blue-500/15 dg-text-blue border-blue-500/30',
|
||||
audit: 'bg-purple-500/15 dg-text-purple border-purple-500/30',
|
||||
execute: 'bg-green-500/15 dg-text-green border-green-500/30',
|
||||
};
|
||||
|
||||
export const STEP_TYPE_ICONS: Record<string, React.ElementType> = {
|
||||
submit: Users,
|
||||
audit: Shield,
|
||||
execute: Play,
|
||||
};
|
||||
|
||||
/** 执行步骤可分配的角色编码白名单 */
|
||||
export const EXECUTE_ELIGIBLE_ROLES = ['super_admin', 'k8s_admin', 'release_admin', 'resource_admin'];
|
||||
|
||||
/* ------------------------------------------------------------------ */
|
||||
/* Helpers */
|
||||
/* ------------------------------------------------------------------ */
|
||||
|
||||
/** 解析审批人 ID 列表 // Logan.Li */
|
||||
export function parseApproverIds(ids: string | null): number[] {
|
||||
if (!ids) return [];
|
||||
try {
|
||||
const p = JSON.parse(ids);
|
||||
return Array.isArray(p) ? p : [];
|
||||
} catch { return []; }
|
||||
}
|
||||
|
||||
/** 查找 admin 用户 ID，用于新建流程默认审批/执行人 // Logan.Li */
|
||||
export function resolveAdminId(users: UserItem[]): number[] {
|
||||
const admin = users.find((u) => u.username === 'admin');
|
||||
return admin ? [admin.id] : [];
|
||||
}
|
||||
|
||||
/** 新建流程默认步骤：提交 → admin 审批 → admin 执行 // Logan.Li */
|
||||
export function buildDefaultSteps(users: UserItem[], t: (key: string) => string): StepDraft[] {
|
||||
const adminIds = resolveAdminId(users);
|
||||
return [
|
||||
{ name: t('approval.detail.submitNode'), step_type: 'submit', approver_ids: [] },
|
||||
{ name: t('approval.step.auditShort'), step_type: 'audit', approver_ids: adminIds },
|
||||
{ name: t('approval.step.executeShort'), step_type: 'execute', approver_ids: adminIds },
|
||||
];
|
||||
}
|
||||
Reference in new issue
Block a user