feat(web): 增加任务和流程图CRUD

2025-07-03 22:21:31 +08:00
parent 8ebaf5de8e
commit abdbb5ed03
20 changed files with 71 additions and 105 deletions
--- a/service-web/client/src/components/flow/node/AmisNode.tsx
+++ b/service-web/client/src/components/flow/node/AmisNode.tsx
@@ -0,0 +1,199 @@
+import {DeleteFilled, EditFilled} from '@ant-design/icons'
+import {Handle, type HandleProps, type NodeProps, Position, useNodeConnections} from '@xyflow/react'
+import type {Schema} from 'amis'
+import {Card, Dropdown} from 'antd'
+import {isEmpty, isEqual, isNil} from 'licia'
+import {type JSX} from 'react'
+import {horizontalFormOptions} from '../../../util/amis.tsx'
+
+export type AmisNodeType = 'normal' | 'start' | 'end'
+
+export function inputsFormColumns(required: boolean = false, preload?: any): Schema[] {
+  return [
+    {
+      type: 'input-kvs',
+      name: 'inputs',
+      label: '输入变量',
+      value: preload,
+      addButtonText: '新增输入',
+      draggable: false,
+      keyItem: {
+        ...horizontalFormOptions(),
+        label: '参数名称',
+      },
+      required: required,
+      valueItems: [
+        {
+          ...horizontalFormOptions(),
+          type: 'select',
+          name: 'type',
+          label: '变量',
+          required: true,
+          options: [],
+        },
+      ],
+    },
+  ]
+}
+
+export function outputsFormColumns(editable: boolean = false, required: boolean = false, preload?: any): Schema[] {
+  return [
+    {
+      disabled: !editable,
+      type: 'input-kvs',
+      name: 'outputs',
+      label: '输出变量',
+      value: preload,
+      addButtonText: '新增输出',
+      draggable: false,
+      keyItem: {
+        ...horizontalFormOptions(),
+        label: '参数名称',
+      },
+      required: required,
+      valueItems: [
+        {
+          ...horizontalFormOptions(),
+          type: 'select',
+          name: 'type',
+          label: '参数',
+          required: true,
+          selectFirst: true,
+          options: [
+            {
+              label: '文本',
+              value: 'string',
+            },
+            {
+              label: '数字',
+              value: 'number',
+            },
+            {
+              label: '文本数组',
+              value: 'array-string',
+            },
+            {
+              label: '对象数组',
+              value: 'array-object',
+            },
+          ],
+        },
+      ],
+    },
+  ]
+}
+
+export const LimitHandler = (props: HandleProps & { limit: number }) => {
+  const connections = useNodeConnections({
+    handleType: props.type,
+  })
+  return (
+    <Handle
+      {...props}
+      isConnectable={connections.length < props.limit}
+    />
+  )
+}
+
+type AmisNodeProps = {
+  nodeProps: NodeProps
+  type: AmisNodeType
+  defaultNodeName: String
+  defaultNodeDescription?: String
+  extraNodeDescription?: (nodeData: any) => JSX.Element
+  handlers?: (nodeData: any) => JSX.Element
+  columnSchema?: Schema[]
+}
+
+const AmisNode: (props: AmisNodeProps) => JSX.Element = ({
+  nodeProps,
+  type,
+  defaultNodeName,
+  defaultNodeDescription,
+  extraNodeDescription,
+  handlers,
+  columnSchema,
+}) => {
+  const {id, data} = nodeProps
+  const {getDataById, removeNode, editNode} = data
+  // @ts-ignore
+  const nodeData = getDataById(id)
+  const nodeName = isEmpty(nodeData?.node?.name) ? defaultNodeName : nodeData.node.name
+  const nodeDescription = isEmpty(nodeData?.node?.description) ? defaultNodeDescription : nodeData.node?.description
+  return (
+    <div className="w-64">
+      <Dropdown
+        className="card-container"
+        trigger={['contextMenu']}
+        menu={{
+          items: [
+            {
+              key: 'edit',
+              label: '编辑',
+              icon: <EditFilled className="text-gray-600 hover:text-blue-500"/>,
+            },
+            {
+              key: 'remove',
+              label: '删除',
+              icon: <DeleteFilled className="text-red-500 hover:text-red-500"/>,
+            },
+          ],
+          onClick: menu => {
+            switch (menu.key) {
+              case 'edit':
+                // @ts-ignore
+                editNode(
+                  id,
+                  [
+                    {
+                      type: 'input-text',
+                      name: 'node.name',
+                      label: '节点名称',
+                      placeholder: nodeName,
+                    },
+                    {
+                      type: 'textarea',
+                      name: 'node.description',
+                      label: '节点描述',
+                      placeholder: nodeDescription,
+                    },
+                    {
+                      type: 'divider',
+                    },
+                    ...(columnSchema ?? []),
+                  ],
+                )
+                break
+              case 'remove':
+                // @ts-ignore
+                removeNode(id)
+                break
+            }
+          },
+        }}
+      >
+        <Card
+          className="node-card"
+          title={nodeName}
+          extra={<span className="text-gray-300 text-xs">{id}</span>}
+          size="small"
+        >
+          <div className="card-description p-2 text-secondary text-sm">
+            {nodeDescription}
+            {extraNodeDescription?.(nodeData)}
+          </div>
+        </Card>
+      </Dropdown>
+      {isNil(handlers)
+        ? <>
+          {isEqual(type, 'start') || isEqual(type, 'normal')
+            ? <Handle type="source" position={Position.Right} id="source"/> : undefined}
+          {isEqual(type, 'end') || isEqual(type, 'normal')
+            ? <Handle type="target" position={Position.Left} id="target"/> : undefined}
+        </>
+        : handlers?.(nodeData)}
+    </div>
+  )
+}
+
+export default AmisNode