iven/erp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: resolve remaining clippy warnings and improve workflow frontend

Browse Source 
- Collapse nested if-let in user_service.rs search filter
- Suppress dead_code warning on ApiDoc struct
- Refactor server routing: nest all routes under /api/v1 prefix
- Simplify health check route path
- Improve workflow ProcessDesigner with edit mode and loading states
- Update workflow pages with enhanced UX
- Add Phase 2 implementation plan document
This commit is contained in:
iven
2026-04-11 12:59:43 +08:00
parent 184034ff6b
commit 97d3c9026b
12 changed files with 832 additions and 274 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
apps/web/src/pages/Workflow.tsx
View File

@@ -9,7 +9,7 @@ export default function Workflow() {
const [activeKey, setActiveKey] = useState('definitions');
return (
<div style={{ padding: 24 }}>
<div>
<Tabs
activeKey={activeKey}
onChange={setActiveKey}

8
apps/web/src/pages/workflow/CompletedTasks.tsx
View File

@@ -1,4 +1,4 @@
import { useEffect, useState } from 'react';
import { useCallback, useEffect, useState } from 'react';
import { Table, Tag } from 'antd';
import type { ColumnsType } from 'antd/es/table';
import { listCompletedTasks, type TaskInfo } from '../../api/workflowTasks';
@@ -15,7 +15,7 @@ export default function CompletedTasks() {
const [page, setPage] = useState(1);
const [loading, setLoading] = useState(false);
const fetch = async () => {
const fetchData = useCallback(async () => {
setLoading(true);
try {
const res = await listCompletedTasks(page, 20);
@@ -24,9 +24,9 @@ export default function CompletedTasks() {
} finally {
setLoading(false);
}
};
}, [page]);
useEffect(() => { fetch(); }, [page]);
useEffect(() => { fetchData(); }, [fetchData]);
const columns: ColumnsType<TaskInfo> = [
{ title: '任务名称', dataIndex: 'node_name', key: 'node_name' },

33
apps/web/src/pages/workflow/InstanceMonitor.tsx
View File

@@ -1,5 +1,5 @@
import { useEffect, useState } from 'react';
import { Button, message, Space, Table, Tag } from 'antd';
import { useCallback, useEffect, useState } from 'react';
import { Button, message, Modal, Table, Tag } from 'antd';
import type { ColumnsType } from 'antd/es/table';
import {
listInstances,
@@ -20,7 +20,7 @@ export default function InstanceMonitor() {
const [page, setPage] = useState(1);
const [loading, setLoading] = useState(false);
const fetch = async () => {
const fetchData = useCallback(async () => {
setLoading(true);
try {
const res = await listInstances(page, 20);
@@ -29,18 +29,27 @@ export default function InstanceMonitor() {
} finally {
setLoading(false);
}
};
}, [page]);
useEffect(() => { fetch(); }, [page]);
useEffect(() => { fetchData(); }, [fetchData]);
const handleTerminate = async (id: string) => {
try {
await terminateInstance(id);
message.success('已终止');
fetch();
} catch {
message.error('操作失败');
}
Modal.confirm({
title: '确认终止',
content: '确定要终止该流程实例吗？此操作不可撤销。',
okText: '确定终止',
okType: 'danger',
cancelText: '取消',
onOk: async () => {
try {
await terminateInstance(id);
message.success('已终止');
fetchData();
} catch {
message.error('操作失败');
}
},
});
};
const columns: ColumnsType<ProcessInstanceInfo> = [

10
apps/web/src/pages/workflow/PendingTasks.tsx
View File

@@ -1,4 +1,4 @@
import { useEffect, useState } from 'react';
import { useCallback, useEffect, useState } from 'react';
import { Button, message, Modal, Space, Table, Tag } from 'antd';
import type { ColumnsType } from 'antd/es/table';
import {
@@ -19,7 +19,7 @@ export default function PendingTasks() {
const [completeModal, setCompleteModal] = useState<TaskInfo | null>(null);
const [outcome, setOutcome] = useState('approved');
const fetch = async () => {
const fetchData = useCallback(async () => {
setLoading(true);
try {
const res = await listPendingTasks(page, 20);
@@ -28,9 +28,9 @@ export default function PendingTasks() {
} finally {
setLoading(false);
}
};
}, [page]);
useEffect(() => { fetch(); }, [page]);
useEffect(() => { fetchData(); }, [fetchData]);
const handleComplete = async () => {
if (!completeModal) return;
@@ -38,7 +38,7 @@ export default function PendingTasks() {
await completeTask(completeModal.id, { outcome });
message.success('审批完成');
setCompleteModal(null);
fetch();
fetchData();
} catch {
message.error('审批失败');
}

14
apps/web/src/pages/workflow/ProcessDefinitions.tsx
View File

@@ -4,6 +4,7 @@ import type { ColumnsType } from 'antd/es/table';
import {
listProcessDefinitions,
createProcessDefinition,
updateProcessDefinition,
publishProcessDefinition,
type ProcessDefinitionInfo,
type CreateProcessDefinitionRequest,
@@ -57,14 +58,19 @@ export default function ProcessDefinitions() {
}
};
const handleSave = async (req: CreateProcessDefinitionRequest) => {
const handleSave = async (req: CreateProcessDefinitionRequest, id?: string) => {
try {
await createProcessDefinition(req);
message.success('创建成功');
if (id) {
await updateProcessDefinition(id, req);
message.success('更新成功');
} else {
await createProcessDefinition(req);
message.success('创建成功');
}
setDesignerOpen(false);
fetch();
} catch {
message.error('创建失败');
message.error(id ? '更新失败' : '创建失败');
}
};

99
apps/web/src/pages/workflow/ProcessDesigner.tsx
View File

@@ -1,5 +1,5 @@
import { useCallback, useMemo, useState } from 'react';
import { Button, Form, Input, message, Space } from 'antd';
import { useCallback, useEffect, useMemo, useState } from 'react';
import { Button, Form, Input, message, Spin } from 'antd';
import {
ReactFlow,
Controls,
@@ -18,6 +18,7 @@ import {
type CreateProcessDefinitionRequest,
type NodeDef,
type EdgeDef,
getProcessDefinition,
} from '../../api/workflowDefinitions';
const NODE_TYPES_MAP: Record<string, { label: string; color: string }> = {
@@ -35,9 +36,9 @@ const PALETTE_ITEMS = Object.entries(NODE_TYPES_MAP).map(([type, info]) => ({
color: info.color,
}));
function createFlowNode(type: string, label: string, position: { x: number; y: number }): Node {
function createFlowNode(type: string, label: string, position: { x: number; y: number }, id?: string): Node {
return {
id: `node_${Date.now()}_${Math.random().toString(36).slice(2, 6)}`,
id: id || `node_${Date.now()}_${Math.random().toString(36).slice(2, 6)}`,
type: 'default',
position,
data: { label: `${label}`, nodeType: type, name: label },
@@ -57,31 +58,57 @@ function createFlowNode(type: string, label: string, position: { x: number; y: n
interface ProcessDesignerProps {
definitionId: string | null;
onSave: (req: CreateProcessDefinitionRequest) => void;
onSave: (req: CreateProcessDefinitionRequest, id?: string) => void;
}
export default function ProcessDesigner({ onSave }: ProcessDesignerProps) {
export default function ProcessDesigner({ definitionId, onSave }: ProcessDesignerProps) {
const [form] = Form.useForm();
const [selectedNode, setSelectedNode] = useState<Node | null>(null);
const [nodes, setNodes, onNodesChange] = useNodesState([
createFlowNode('StartEvent', '开始', { x: 250, y: 50 }),
createFlowNode('UserTask', '审批', { x: 250, y: 200 }),
createFlowNode('EndEvent', '结束', { x: 250, y: 400 }),
]);
const [edges, setEdges, onEdgesChange] = useEdgesState([
{
id: 'e_start_approve',
source: nodes[0].id,
target: nodes[1].id,
markerEnd: { type: MarkerType.ArrowClosed },
},
{
id: 'e_approve_end',
source: nodes[1].id,
target: nodes[2].id,
markerEnd: { type: MarkerType.ArrowClosed },
},
]);
const [loading, setLoading] = useState(false);
const [nodes, setNodes, onNodesChange] = useNodesState<Node>([]);
const [edges, setEdges, onEdgesChange] = useEdgesState<Edge>([]);
const isEditing = definitionId !== null;
// 加载流程定义（编辑模式）或初始化默认节点（新建模式）
useEffect(() => {
if (!definitionId) {
const startNode = createFlowNode('StartEvent', '开始', { x: 250, y: 50 });
const userNode = createFlowNode('UserTask', '审批', { x: 250, y: 200 });
const endNode = createFlowNode('EndEvent', '结束', { x: 250, y: 400 });
setNodes([startNode, userNode, endNode]);
setEdges([
{ id: 'e_start_approve', source: startNode.id, target: userNode.id, markerEnd: { type: MarkerType.ArrowClosed } },
{ id: 'e_approve_end', source: userNode.id, target: endNode.id, markerEnd: { type: MarkerType.ArrowClosed } },
]);
return;
}
setLoading(true);
getProcessDefinition(definitionId)
.then((def) => {
form.setFieldsValue({
name: def.name,
key: def.key,
category: def.category,
description: def.description,
});
const flowNodes = def.nodes.map((n, i) =>
createFlowNode(n.type, n.name, n.position || { x: 200, y: i * 120 + 50 }, n.id)
);
const flowEdges: Edge[] = def.edges.map((e) => ({
id: e.id,
source: e.source,
target: e.target,
markerEnd: { type: MarkerType.ArrowClosed },
label: e.label || e.condition,
}));
setNodes(flowNodes);
setEdges(flowEdges);
})
.catch(() => message.error('加载流程定义失败'))
.finally(() => setLoading(false));
}, [definitionId]); // eslint-disable-line react-hooks/exhaustive-deps
const onConnect = useCallback(
(connection: Connection) => {
@@ -136,17 +163,18 @@ export default function ProcessDesigner({ onSave }: ProcessDesignerProps) {
id: n.id,
type: (n.data.nodeType as NodeDef['type']) || 'UserTask',
name: n.data.name || String(n.data.label),
position: { x: Math.round(n.position.x), y: Math.round(n.position.y) },
}));
const flowEdges: EdgeDef[] = edges.map((e) => ({
id: e.id,
source: e.source,
target: e.target,
label: e.label ? String(e.label) : undefined,
}));
onSave({
...values,
nodes: flowNodes,
edges: flowEdges,
});
onSave(
{ ...values, nodes: flowNodes, edges: flowEdges },
definitionId || undefined,
);
}).catch(() => {
message.error('请填写必要字段');
});
@@ -159,6 +187,10 @@ export default function ProcessDesigner({ onSave }: ProcessDesignerProps) {
[],
);
if (loading) {
return <div style={{ display: 'flex', justifyContent: 'center', padding: 100 }}><Spin /></div>;
}
return (
<div style={{ display: 'flex', gap: 16, height: 500 }}>
{/* 左侧工具面板 */}
@@ -224,7 +256,7 @@ export default function ProcessDesigner({ onSave }: ProcessDesignerProps) {
<Input placeholder="请假审批" />
</Form.Item>
<Form.Item name="key" label="流程编码" rules={[{ required: true, message: '请输入' }]}>
<Input placeholder="leave_approval" />
<Input placeholder="leave_approval" disabled={isEditing} />
</Form.Item>
<Form.Item name="category" label="分类">
<Input placeholder="leave" />
@@ -232,10 +264,7 @@ export default function ProcessDesigner({ onSave }: ProcessDesignerProps) {
<Form.Item name="description" label="描述">
<Input.TextArea rows={2} />
</Form.Item>
<Space>
<Button type="primary" onClick={handleSave}>保存</Button>
<Button onClick={() => form.resetFields()}>重置</Button>
</Space>
<Button type="primary" onClick={handleSave}>{isEditing ? '更新' : '保存'}</Button>
</Form>
</div>
</div>