94 lines
3.1 KiB
TypeScript
94 lines
3.1 KiB
TypeScript
import React from 'react';
|
|
import { Modal, Form, Input, InputNumber, Radio } from 'antd';
|
|
import { Edge } from '@antv/x6';
|
|
import { EdgeCondition } from '../nodes/types';
|
|
|
|
interface ExpressionModalProps {
|
|
visible: boolean;
|
|
edge: Edge;
|
|
onOk: (condition: EdgeCondition) => void;
|
|
onCancel: () => void;
|
|
}
|
|
|
|
const ExpressionModal: React.FC<ExpressionModalProps> = ({
|
|
visible,
|
|
edge,
|
|
onOk,
|
|
onCancel
|
|
}) => {
|
|
const [form] = Form.useForm();
|
|
const currentCondition = edge.getProp('condition') as EdgeCondition;
|
|
|
|
const handleOk = async () => {
|
|
try {
|
|
const values = await form.validateFields();
|
|
onOk(values);
|
|
} catch (error) {
|
|
console.error('表单验证失败:', error);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<Modal
|
|
title="编辑条件"
|
|
open={visible}
|
|
onOk={handleOk}
|
|
onCancel={onCancel}
|
|
width={600}
|
|
>
|
|
<Form
|
|
form={form}
|
|
layout="vertical"
|
|
initialValues={{
|
|
type: currentCondition?.type || 'EXPRESSION',
|
|
expression: currentCondition?.expression || '',
|
|
priority: currentCondition?.priority || 10
|
|
}}
|
|
>
|
|
<Form.Item
|
|
name="type"
|
|
label="条件类型"
|
|
rules={[{ required: true }]}
|
|
>
|
|
<Radio.Group>
|
|
<Radio value="EXPRESSION">表达式</Radio>
|
|
<Radio value="DEFAULT">默认路径</Radio>
|
|
</Radio.Group>
|
|
</Form.Item>
|
|
|
|
<Form.Item
|
|
noStyle
|
|
shouldUpdate={(prevValues, currentValues) => prevValues.type !== currentValues.type}
|
|
>
|
|
{({ getFieldValue }) => {
|
|
const type = getFieldValue('type');
|
|
return type === 'EXPRESSION' ? (
|
|
<Form.Item
|
|
name="expression"
|
|
label="条件表达式"
|
|
rules={[{ required: true, message: '请输入条件表达式' }]}
|
|
extra="支持使用 ${变量名} 引用流程变量，例如：${amount} > 1000"
|
|
>
|
|
<Input.TextArea
|
|
placeholder="请输入条件表达式"
|
|
rows={4}
|
|
/>
|
|
</Form.Item>
|
|
) : null;
|
|
}}
|
|
</Form.Item>
|
|
|
|
<Form.Item
|
|
name="priority"
|
|
label="优先级"
|
|
rules={[{ required: true }]}
|
|
extra="数字越小优先级越高"
|
|
>
|
|
<InputNumber min={1} max={999} />
|
|
</Form.Item>
|
|
</Form>
|
|
</Modal>
|
|
);
|
|
};
|
|
|
|
export default ExpressionModal;
|