@appthen/cli 1.2.11 → 1.2.12

package/tests/test-app/src/pages/WorkflowDesigner.tsx

@@ -0,0 +1,434 @@
+/**
+ * 流程设计器
+ * 业务流程设计和配置
+ *
+ * @type Page
+ * @route /workflow
+ * @screen 1920w
+ * @frames web
+ */
+import React from 'react';
+
+
+
+class IProps {
+  workflowId?: number;
+  templateId?: number;
+}
+
+/*
+ * 数据与接口请求定义
+ */
+class IState {
+  nodes?: {
+    /* @example 1 */id?: number,
+    /* @example start */type?: string,
+    /* @example 开始 */title?: string,
+    /* @example 100 */x?: number,
+    /* @example 100 */y?: number,
+    config?: {
+      /* @example 0 */timeout?: number,
+      /* @example manager */approver?: string,
+      /* @example 1 */level?: number,
+      /* @example amount > 10000 */expression?: string,
+      /* @example order */template?: string,
+    },
+  }[];
+  edges?: {
+    /* @example e1 */id?: string,
+    /* @example 1 */source?: number,
+    /* @example 2 */target?: number,
+    condition?: string,
+  }[];
+  loading?: boolean;
+  currentNode?: any;
+  showNodeDrawer?: boolean;
+  workflow?: {
+    /* @example 1 */id?: number,
+    /* @example 订单审批流程 */name?: string,
+    /* @example 1.0.0 */version?: string,
+    /* @example active */status?: string,
+  };
+  showPreview?: boolean;
+}
+
+class Document extends React.Component<IProps, IState> {
+  state = {
+    nodes: [
+      {
+        id: 1,
+        type: 'start',
+        title: '开始',
+        x: 100,
+        y: 100,
+        config: { timeout: 0 },
+      },
+      {
+        id: 2,
+        type: 'approval',
+        title: '审批',
+        x: 300,
+        y: 100,
+        config: { approver: 'manager', level: 1 },
+      },
+      {
+        id: 3,
+        type: 'condition',
+        title: '条件判断',
+        x: 500,
+        y: 100,
+        config: { expression: 'amount > 10000' },
+      },
+      {
+        id: 4,
+        type: 'action',
+        title: '生成订单',
+        x: 700,
+        y: 50,
+        config: { template: 'order' },
+      },
+      {
+        id: 5,
+        type: 'action',
+        title: '生成报告',
+        x: 700,
+        y: 150,
+        config: { template: 'report' },
+      },
+      { id: 6, type: 'end', title: '结束', x: 900, y: 100, config: {} },
+    ],
+    edges: [
+      { id: 'e1', source: 1, target: 2, condition: '' },
+      { id: 'e2', source: 2, target: 3, condition: '' },
+      { id: 'e3', source: 3, target: 4, condition: 'true' },
+      { id: 'e4', source: 3, target: 5, condition: 'false' },
+      { id: 'e5', source: 4, target: 6, condition: '' },
+      { id: 'e6', source: 5, target: 6, condition: '' },
+    ],
+    loading: false,
+    currentNode: null,
+    showNodeDrawer: false,
+    workflow: {
+      id: 1,
+      name: '订单审批流程',
+      version: '1.0.0',
+      status: 'active',
+    },
+    showPreview: false,
+  };
+
+  handleNodeClick(node) {
+    this.setState({
+      currentNode: node,
+      showNodeDrawer: true,
+    });
+  }
+
+  handleNodeConfigChange(field, value) {
+    this.setState({
+      currentNode: {
+        ...this.state.currentNode,
+        config: {
+          ...this.state.currentNode.config,
+          [field]: value,
+        },
+      },
+    });
+  }
+
+  handleSaveNode() {
+    this.setState({
+      nodes: this.state.nodes.map(n => {
+        if (n.id === this.state.currentNode.id) {
+          return this.state.currentNode;
+        }
+        return n;
+      }),
+      showNodeDrawer: false,
+    });
+  }
+
+  addNode(type, title) {
+    const newNode = {
+      id: Date.now(),
+      type,
+      title,
+      x: 100,
+      y: 100,
+      config: {},
+    };
+    this.setState({
+      nodes: [...this.state.nodes, newNode],
+    });
+  }
+
+  deleteNode(nodeId) {
+    this.setState({
+      nodes: this.state.nodes.filter(n => n.id !== nodeId),
+      edges: this.state.edges.filter(
+        e => e.source !== nodeId && e.target !== nodeId
+      ),
+    });
+  }
+
+  togglePreview() {
+    this.setState({
+      showPreview: !this.state.showPreview,
+    });
+  }
+
+  saveWorkflow() {
+    console.log(
+      '保存流程:',
+      this.state.workflow,
+      this.state.nodes,
+      this.state.edges
+    );
+  }
+
+  render() {
+    const nodes = this.state.nodes;
+    const edges = this.state.edges;
+    const loading = this.state.loading;
+    const currentNode = this.state.currentNode;
+    const showNodeDrawer = this.state.showNodeDrawer;
+    const workflow = this.state.workflow;
+    const showPreview = this.state.showPreview;
+    const nodeTypes = {
+      start: {
+        color: 'green',
+        icon: '⚡',
+      },
+      end: {
+        color: 'red',
+        icon: '🏁',
+      },
+      approval: {
+        color: 'blue',
+        icon: '✓',
+      },
+      condition: {
+        color: 'orange',
+        icon: '❓',
+      },
+      action: {
+        color: 'purple',
+        icon: '⚙️',
+      },
+    };
+    const selectedEdge = null;
+    const showEdgeConfig = false;
+    const flowSequence = nodes.map(node => {
+      const fromEdges = edges.filter(e => e.source === node.id);
+      const toEdges = edges.filter(e => e.target === node.id);
+      return {
+        node,
+        from: fromEdges.map(e => e.source),
+        to: toEdges.map(e => e.target),
+      };
+    });
+    const startNode = nodes.find(n => n.type === 'start');
+    const endNode = nodes.find(n => n.type === 'end');
+    const canPreview = startNode && endNode;
+    const nodeStats = {
+      total: nodes.length,
+      start: nodes.filter(n => n.type === 'start').length,
+      end: nodes.filter(n => n.type === 'end').length,
+      approval: nodes.filter(n => n.type === 'approval').length,
+      condition: nodes.filter(n => n.type === 'condition').length,
+    };
+    if (loading) {
+      return <View className="p-6">加载中...</View>;
+    }
+    const nodeCard = node => (
+      <Card
+        key={node.id}
+        className={`absolute cursor-pointer transition-all hover:shadow-lg`}
+        style={{
+          left: node.x + 'px',
+          top: node.y + 'px',
+          borderColor: nodeTypes[node.type]?.color,
+        }}
+        onClick={() => this.handleNodeClick(node)}
+      >
+        <View className="flex items-center gap-2">
+          <Text>{nodeTypes[node.type]?.icon}</Text>
+          <Text className="font-bold">{node.title}</Text>
+        </View>
+      </Card>
+    );
+    return (
+      <Page className="p-[24px] bg-[var(--gray-50)] min-h-screen">
+        <View className="mb-[24px]">
+          <Text className="text-2xl font-bold text-[#1f2937]">流程设计器</Text>
+          <Text className="text-[#6b7280] text-sm mt-[4px]">
+            业务流程设计和配置
+          </Text>
+        </View>
+        <Card className="mb-[24px]">
+          <View className="flex items-center justify-between">
+            <View>
+              <Text className="text-lg font-bold">{workflow.name}</Text>
+              <Text className="text-[#6b7280]">
+                版本:{workflow.version}| 状态:{workflow.status}
+              </Text>
+            </View>
+            <View className="gap-2 flex">
+              <Button onClick={() => this.togglePreview()}>预览</Button>
+              <Button type="primary" onClick={() => this.saveWorkflow()}>
+                保存
+              </Button>
+            </View>
+          </View>
+        </Card>
+        <Card className="mb-[24px]">
+          <View className="gap-4 grid grid-cols-5">
+            <View className="text-[var(--center)]">
+              <Text className="text-2xl font-bold">{nodeStats.total}</Text>
+              <Text className="block text-sm text-[#6b7280]">节点总数</Text>
+            </View>
+            <View className="text-[var(--center)]">
+              <Text className="text-2xl font-bold text-[var(--green-600)]">
+                {nodeStats.start}
+              </Text>
+              <Text className="block text-sm text-[#6b7280]">开始节点</Text>
+            </View>
+            <View className="text-[var(--center)]">
+              <Text className="text-2xl font-bold text-[var(--red-600)]">
+                {nodeStats.end}
+              </Text>
+              <Text className="block text-sm text-[#6b7280]">结束节点</Text>
+            </View>
+            <View className="text-[var(--center)]">
+              <Text className="text-2xl font-bold text-[var(--blue-600)]">
+                {nodeStats.approval}
+              </Text>
+              <Text className="block text-sm text-[#6b7280]">审批节点</Text>
+            </View>
+            <View className="text-[var(--center)]">
+              <Text className="text-2xl font-bold text-[var(--orange-600)]">
+                {nodeStats.condition}
+              </Text>
+              <Text className="block text-sm text-[#6b7280]">条件节点</Text>
+            </View>
+          </View>
+        </Card>
+        <Card className="mb-[24px]">
+          <View className="gap-2 flex items-center">
+            <Button onClick={() => this.addNode('approval', '新审批节点')}>
+              + 审批
+            </Button>
+            <Button onClick={() => this.addNode('condition', '新条件节点')}>
+              + 条件
+            </Button>
+            <Button onClick={() => this.addNode('action', '新动作节点')}>
+              + 动作
+            </Button>
+            <Button onClick={() => this.addNode('start', '新开始节点')}>
+              + 开始
+            </Button>
+            <Button onClick={() => this.addNode('end', '新结束节点')}>
+              + 结束
+            </Button>
+          </View>
+        </Card>
+        <Card className="mb-[24px] h-[600px] overflow-hidden relative bg-[#f3f4f6]">
+          {nodes.map((node, index) => (
+            <Text>{nodeCard(node)}</Text>
+          ))}
+        </Card>
+        {!!showPreview && (
+          <Card>
+            <Text className="block text-lg font-bold mb-[16px]">流程预览</Text>
+            <Steps
+              current={flowSequence.findIndex(function (item) {
+                return item.node.id === currentNode?.id;
+              })}
+              items={flowSequence.map(function (item, index) {
+                return {
+                  title: item.node.title,
+                  description: item.node.type,
+                  status: item.node.type === 'end' ? 'finish' : 'process',
+                };
+              })}
+            />
+          </Card>
+        )}
+        <Drawer
+          title="节点配置"
+          placement="right"
+          width={500}
+          visible={showNodeDrawer}
+          onClose={() =>
+            this.setState({
+              showNodeDrawer: false,
+            })
+          }
+        >
+          <View>
+            <View className="mb-[16px]">
+              <Text className="block mb-[8px] font-bold">节点名称</Text>
+              <Input
+                value={currentNode?.title}
+                onChange={e =>
+                  this.setState({
+                    currentNode: {
+                      ...currentNode,
+                      title: e.target.value,
+                    },
+                  })
+                }
+              />
+            </View>
+            <View className="mb-[16px]">
+              <Text className="block mb-[8px] font-bold">节点类型</Text>
+              <Text>{currentNode?.type}</Text>
+            </View>
+            <View className="mb-[16px]">
+              <Text className="block mb-[8px] font-bold">位置</Text>
+              <View className="gap-2 flex">
+                <InputNumber
+                  value={currentNode?.x}
+                  onChange={value =>
+                    this.setState({
+                      currentNode: {
+                        ...currentNode,
+                        x: value,
+                      },
+                    })
+                  }
+                  addonBefore="X"
+                />
+                <InputNumber
+                  value={currentNode?.y}
+                  onChange={value =>
+                    this.setState({
+                      currentNode: {
+                        ...currentNode,
+                        y: value,
+                      },
+                    })
+                  }
+                  addonBefore="Y"
+                />
+              </View>
+            </View>
+            <View className="gap-2 mt-[24px] flex justify-end">
+              <Button
+                danger={true}
+                onClick={() => this.deleteNode(currentNode?.id)}
+              >
+                删除节点
+              </Button>
+              <Button type="primary" onClick={() => this.handleSaveNode()}>
+                保存配置
+              </Button>
+            </View>
+          </View>
+        </Drawer>
+      </Page>
+    );
+  }
+}
+
+export default Document;