1
This commit is contained in:
dengqichen
parent
678f6a1809
commit
a5e58d9e10
@ -12,6 +12,16 @@ import {
|
||||
import {Button} from "@/components/ui/button";
|
||||
import {Input} from "@/components/ui/input";
|
||||
import {Label} from "@/components/ui/label";
|
||||
import { convertJsonSchemaToColumns } from '@/utils/jsonSchemaUtils';
|
||||
import { Textarea } from "@/components/ui/textarea";
|
||||
import { Switch } from "@/components/ui/switch";
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from "@/components/ui/select";
|
||||
|
||||
interface NodeConfigDrawerProps {
|
||||
visible: boolean;
|
||||
@ -35,33 +45,44 @@ const NodeConfigDrawer: React.FC<NodeConfigDrawerProps> = ({
|
||||
const [panelValues, setPanelValues] = React.useState<Variables>({});
|
||||
const [localValues, setLocalValues] = React.useState<Variables>({});
|
||||
|
||||
// 初始化表单值，包括默认值
|
||||
const initializeFormValues = (schema: any) => {
|
||||
if (!schema?.properties) return {};
|
||||
|
||||
const initialValues: Variables = {};
|
||||
Object.entries(schema.properties).forEach(([key, property]: [string, any]) => {
|
||||
if (property.default !== undefined) {
|
||||
initialValues[key] = property.default;
|
||||
}
|
||||
});
|
||||
return initialValues;
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (nodeDefinition) {
|
||||
// 合并默认值和已有值
|
||||
const panelDefaults = initializeFormValues(nodeDefinition.panelVariablesSchema);
|
||||
const localDefaults = initializeFormValues(nodeDefinition.localVariablesSchema);
|
||||
|
||||
// 使用 convertJsonSchemaToColumns 获取字段配置
|
||||
const panelColumns = convertJsonSchemaToColumns(nodeDefinition.panelVariablesSchema || { type: 'object', properties: {} });
|
||||
const localColumns = convertJsonSchemaToColumns(nodeDefinition.localVariablesSchema || { type: 'object', properties: {} });
|
||||
|
||||
// 初始化表单值，包括默认值
|
||||
const initialPanelValues = panelColumns.reduce((acc, column) => {
|
||||
if (column.initialValue !== undefined) {
|
||||
acc[column.dataIndex] = column.initialValue;
|
||||
}
|
||||
return acc;
|
||||
}, {} as Variables);
|
||||
|
||||
const initialLocalValues = localColumns.reduce((acc, column) => {
|
||||
if (column.initialValue !== undefined) {
|
||||
acc[column.dataIndex] = column.initialValue;
|
||||
}
|
||||
return acc;
|
||||
}, {} as Variables);
|
||||
|
||||
// 设置初始值
|
||||
setPanelValues({
|
||||
...panelDefaults,
|
||||
...initialPanelValues,
|
||||
...(nodeDefinition.panelVariables || {})
|
||||
});
|
||||
setLocalValues({
|
||||
...localDefaults,
|
||||
...initialLocalValues,
|
||||
...(nodeDefinition.localVariables || {})
|
||||
});
|
||||
|
||||
// 打印调试信息
|
||||
console.log('Panel Columns:', panelColumns);
|
||||
console.log('Local Columns:', localColumns);
|
||||
console.log('Initial Panel Values:', initialPanelValues);
|
||||
console.log('Initial Local Values:', initialLocalValues);
|
||||
console.log('Node Definition Panel Variables:', nodeDefinition.panelVariables);
|
||||
console.log('Node Definition Local Variables:', nodeDefinition.localVariables);
|
||||
}
|
||||
}, [nodeDefinition]);
|
||||
|
||||
@ -74,19 +95,67 @@ const NodeConfigDrawer: React.FC<NodeConfigDrawerProps> = ({
|
||||
onOk(updatedNodeDefinition);
|
||||
};
|
||||
|
||||
const renderFormField = (column: any, value: any, onChange: (value: any) => void) => {
|
||||
const isReadOnly = column.readonly || column.fieldProps?.disabled;
|
||||
const props = {
|
||||
value: value || '',
|
||||
onChange: (e: any) => onChange(e.target?.value ?? e),
|
||||
placeholder: column.fieldProps?.placeholder,
|
||||
readOnly: isReadOnly,
|
||||
className: isReadOnly ? "bg-muted" : "",
|
||||
};
|
||||
|
||||
switch (column.valueType) {
|
||||
case 'select':
|
||||
return (
|
||||
<Select
|
||||
value={value}
|
||||
onValueChange={onChange}
|
||||
disabled={isReadOnly}
|
||||
>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder={column.fieldProps?.placeholder} />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{column.fieldProps?.options?.map((option: any) => (
|
||||
<SelectItem key={option.value} value={option.value}>
|
||||
{option.label}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
);
|
||||
case 'switch':
|
||||
return (
|
||||
<Switch
|
||||
checked={value}
|
||||
onCheckedChange={onChange}
|
||||
disabled={isReadOnly}
|
||||
/>
|
||||
);
|
||||
case 'textarea':
|
||||
case 'code':
|
||||
return <Textarea {...props} />;
|
||||
case 'digit':
|
||||
return <Input {...props} type="number" />;
|
||||
default:
|
||||
return <Input {...props} />;
|
||||
}
|
||||
};
|
||||
|
||||
const renderFormFields = (schema: any, values: Variables, onChange: (key: string, value: any) => void) => {
|
||||
if (!schema?.properties) return null;
|
||||
|
||||
return Object.entries(schema.properties).map(([key, property]: [string, any]) => (
|
||||
<div key={key} className="space-y-2">
|
||||
<Label>{property.title || key}</Label>
|
||||
<Input
|
||||
value={values[key] || ''}
|
||||
placeholder={property.description}
|
||||
onChange={(e) => onChange(key, e.target.value)}
|
||||
readOnly={property.readOnly}
|
||||
className={property.readOnly ? "bg-muted" : ""}
|
||||
/>
|
||||
const columns = convertJsonSchemaToColumns(schema);
|
||||
|
||||
return columns.map(column => (
|
||||
<div key={column.dataIndex} className="space-y-2">
|
||||
<Label>{column.title}</Label>
|
||||
{renderFormField(
|
||||
column,
|
||||
values[column.dataIndex],
|
||||
(value) => onChange(column.dataIndex, value)
|
||||
)}
|
||||
</div>
|
||||
));
|
||||
};
|
||||
|
||||
@ -31,6 +31,7 @@ interface JsonSchemaProperty {
|
||||
minLength?: number;
|
||||
maxLength?: number;
|
||||
pattern?: string;
|
||||
readOnly?: boolean;
|
||||
}
|
||||
|
||||
interface JsonSchema {
|
||||
@ -50,6 +51,7 @@ export const convertJsonSchemaToColumns = (schema: JsonSchema): ProFormColumnsTy
|
||||
required: schema.required?.includes(key),
|
||||
},
|
||||
initialValue: value.default,
|
||||
readonly: value.readOnly,
|
||||
};
|
||||
|
||||
// 根据类型处理不同的表单项
|
||||
@ -66,6 +68,7 @@ export const convertJsonSchemaToColumns = (schema: JsonSchema): ProFormColumnsTy
|
||||
value: item,
|
||||
})),
|
||||
placeholder: `请选择${value.title || key}`,
|
||||
disabled: value.readOnly,
|
||||
},
|
||||
};
|
||||
}
|
||||
@ -93,6 +96,7 @@ export const convertJsonSchemaToColumns = (schema: JsonSchema): ProFormColumnsTy
|
||||
formatOnType: true,
|
||||
suggestOnTriggerCharacters: editorConfig.autoComplete ?? true,
|
||||
renderWhitespace: 'boundary',
|
||||
readOnly: value.readOnly,
|
||||
}
|
||||
}
|
||||
};
|
||||
@ -103,6 +107,7 @@ export const convertJsonSchemaToColumns = (schema: JsonSchema): ProFormColumnsTy
|
||||
valueType: 'text',
|
||||
fieldProps: {
|
||||
placeholder: `请输入${value.title || key}`,
|
||||
disabled: value.readOnly,
|
||||
},
|
||||
};
|
||||
|
||||
@ -115,7 +120,8 @@ export const convertJsonSchemaToColumns = (schema: JsonSchema): ProFormColumnsTy
|
||||
min: value.minimum,
|
||||
max: value.maximum,
|
||||
placeholder: `请输入${value.title || key}`,
|
||||
style: { width: '100%' }
|
||||
style: { width: '100%' },
|
||||
disabled: value.readOnly,
|
||||
},
|
||||
};
|
||||
|
||||
@ -123,6 +129,9 @@ export const convertJsonSchemaToColumns = (schema: JsonSchema): ProFormColumnsTy
|
||||
return {
|
||||
...baseConfig,
|
||||
valueType: 'switch',
|
||||
fieldProps: {
|
||||
disabled: value.readOnly,
|
||||
},
|
||||
};
|
||||
|
||||
case 'array':
|
||||
@ -142,6 +151,7 @@ export const convertJsonSchemaToColumns = (schema: JsonSchema): ProFormColumnsTy
|
||||
value: item,
|
||||
})),
|
||||
placeholder: `请选择${value.title || key}`,
|
||||
disabled: value.readOnly,
|
||||
},
|
||||
};
|
||||
}
|
||||
@ -152,6 +162,7 @@ export const convertJsonSchemaToColumns = (schema: JsonSchema): ProFormColumnsTy
|
||||
fieldProps: {
|
||||
mode: 'tags',
|
||||
placeholder: `请输入${value.title || key}`,
|
||||
disabled: value.readOnly,
|
||||
},
|
||||
};
|
||||
|
||||
@ -161,6 +172,7 @@ export const convertJsonSchemaToColumns = (schema: JsonSchema): ProFormColumnsTy
|
||||
valueType: 'jsonCode',
|
||||
fieldProps: {
|
||||
placeholder: `请输入${value.title || key}`,
|
||||
disabled: value.readOnly,
|
||||
},
|
||||
};
|
||||
|
||||
@ -170,6 +182,7 @@ export const convertJsonSchemaToColumns = (schema: JsonSchema): ProFormColumnsTy
|
||||
valueType: 'text',
|
||||
fieldProps: {
|
||||
placeholder: `请输入${value.title || key}`,
|
||||
disabled: value.readOnly,
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user