表单设计器
This commit is contained in:
parent
46232db651
commit
f880c5f59d
File diff suppressed because it is too large
Load Diff
@ -72,6 +72,7 @@ const FieldRenderer: React.FC<FieldRendererProps> = ({
|
||||
selectedFieldId={selectedFieldId}
|
||||
onSelectField={onSelectField}
|
||||
onDeleteField={onDeleteField}
|
||||
labelAlign={labelAlign}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
@ -89,7 +89,11 @@ const GridColumn: React.FC<GridColumnProps> = ({
|
||||
<div>
|
||||
{fields.map((childField) => (
|
||||
<div key={childField.id} style={{ marginBottom: 8 }}>
|
||||
<FieldRenderer field={childField} isPreview={isPreview} />
|
||||
<FieldRenderer
|
||||
field={childField}
|
||||
isPreview={isPreview}
|
||||
labelAlign={labelAlign}
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
@ -23,10 +23,10 @@ const { Text } = Typography;
|
||||
const { TabPane } = Tabs;
|
||||
|
||||
interface PropertyPanelProps {
|
||||
selectedField?: FieldConfig;
|
||||
selectedField: FieldConfig | null;
|
||||
formConfig: FormConfig;
|
||||
onFieldChange: (field: FieldConfig) => void;
|
||||
onFormConfigChange: (config: FormConfig) => void;
|
||||
onFormConfigChange: (newConfig: Partial<FormConfig>) => void;
|
||||
}
|
||||
|
||||
const PropertyPanel: React.FC<PropertyPanelProps> = ({
|
||||
|
||||
@ -185,6 +185,11 @@ const FormDesigner: React.FC = () => {
|
||||
setFields(prev => updateFieldRecursive(prev));
|
||||
}, []);
|
||||
|
||||
// 更新表单配置
|
||||
const handleFormConfigChange = useCallback((newConfig: Partial<FormConfig>) => {
|
||||
setFormConfig(prev => ({ ...prev, ...newConfig }));
|
||||
}, []);
|
||||
|
||||
// 保存表单
|
||||
const handleSave = useCallback(() => {
|
||||
if (fields.length === 0) {
|
||||
@ -294,7 +299,7 @@ const FormDesigner: React.FC = () => {
|
||||
return undefined;
|
||||
};
|
||||
|
||||
const selectedField = findFieldById(fields, selectedFieldId);
|
||||
const selectedField = findFieldById(fields, selectedFieldId) || null;
|
||||
|
||||
return (
|
||||
<div style={{ height: '100vh', width: '100%', display: 'flex', flexDirection: 'column' }}>
|
||||
@ -354,7 +359,7 @@ const FormDesigner: React.FC = () => {
|
||||
selectedField={selectedField}
|
||||
formConfig={formConfig}
|
||||
onFieldChange={handleFieldChange}
|
||||
onFormConfigChange={setFormConfig}
|
||||
onFormConfigChange={handleFormConfigChange}
|
||||
/>
|
||||
</div>
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user