kra/resource/package/web/pages/form.tsx.tpl

{{- $global := . }}
{{- if .IsAdd }}
// ============ 表单组件新增字段配置 ============

// 表单新增字段
{{- range .Fields}}
	{{- if .Form}}
{{ GenerateReactFormItem . }}
	{{- end }}
{{- end }}

{{- else }}
{{- if not .OnlyTemplate}}
/**
 * KRA - {{.Description}}表单组件
 * Auto-generated by KRA AutoCode
 */
import React, { useEffect, useState } from 'react';
import {
	Modal,
	Form,
	Input,
	message,
	{{- if .HasTimer }}
	DatePicker,
	{{- end }}
	{{- if or .DictTypes .HasDataSource }}
	Select,
	{{- end }}
	{{- if .HasBool }}
	Switch,
	{{- end }}
	{{- if .HasNumber }}
	InputNumber,
	{{- end }}
	{{- if .IsTree }}
	TreeSelect,
	{{- end }}
} from 'antd';
import type { FormInstance } from 'antd/es/form';
import {
	create{{.StructName}},
	update{{.StructName}},
	find{{.StructName}},
	{{- if .HasDataSource }}
	get{{.StructName}}DataSource,
	{{- end }}
} from '@/services/kratos/{{.PackageName}}';
import type { {{.StructName}} } from '@/services/kratos/{{.PackageName}}';
{{- if .DictTypes }}
import { useDictionary } from '@/hooks/useDictionary';
{{- end }}

interface {{.StructName}}FormProps {
	visible: boolean;
	type: 'create' | 'edit';
	record?: {{.StructName}} | null;
	onClose: () => void;
	onSuccess: () => void;
	{{- if .IsTree }}
	treeData?: {{.StructName}}[];
	{{- end }}
}

const {{.StructName}}Form: React.FC<{{.StructName}}FormProps> = ({
	visible,
	type,
	record,
	onClose,
	onSuccess,
	{{- if .IsTree }}
	treeData = [],
	{{- end }}
}) => {
	const [form] = Form.useForm<FormInstance>();
	const [loading, setLoading] = useState(false);
	const [detailLoading, setDetailLoading] = useState(false);
	{{- if .HasDataSource }}
	const [dataSource, setDataSource] = useState<Record<string, Array<{ label: string; value: any }>>>({});
	{{- end }}

	{{- if .DictTypes }}
	// 字典数据
	{{- range $index, $element := .DictTypes}}
	const { options: {{$element}}Options } = useDictionary('{{$element}}');
	{{- end }}
	{{- end }}

	{{- if .HasDataSource }}
	// 获取数据源
	const fetchDataSource = async () => {
		try {
			const res = await get{{.StructName}}DataSource();
			if (res.code === 0) {
				setDataSource(res.data || {});
			}
		} catch (error) {
			console.error('获取数据源失败:', error);
		}
	};
	{{- end }}

	// 获取详情数据
	const fetchDetail = async (id: {{ GenerateTSType .PrimaryField.FieldType }}) => {
		setDetailLoading(true);
		try {
			const res = await find{{.StructName}}({ {{.PrimaryField.FieldJson}}: id });
			if (res.code === 0 && res.data) {
				form.setFieldsValue(res.data);
			}
		} catch (error) {
			message.error('获取详情失败');
		} finally {
			setDetailLoading(false);
		}
	};

	useEffect(() => {
		if (visible) {
			{{- if .HasDataSource }}
			fetchDataSource();
			{{- end }}
			if (type === 'edit' && record?.{{.PrimaryField.FieldJson}}) {
				fetchDetail(record.{{.PrimaryField.FieldJson}});
			} else if (type === 'create') {
				form.resetFields();
				{{- if .IsTree }}
				if (record?.parentID) {
					form.setFieldsValue({ parentID: record.parentID });
				}
				{{- end }}
			}
		}
	}, [visible, type, record]);

	// 提交表单
	const handleSubmit = async () => {
		try {
			const values = await form.validateFields();
			setLoading(true);
			
			const submitData = type === 'edit' 
				? { ...record, ...values }
				: values;

			const res = type === 'create'
				? await create{{.StructName}}(submitData)
				: await update{{.StructName}}(submitData);

			if (res.code === 0) {
				message.success(type === 'create' ? '创建成功' : '更新成功');
				handleClose();
				onSuccess();
			} else {
				message.error(res.msg || (type === 'create' ? '创建失败' : '更新失败'));
			}
		} catch (error) {
			// 表单验证失败
		} finally {
			setLoading(false);
		}
	};

	// 关闭弹窗
	const handleClose = () => {
		form.resetFields();
		onClose();
	};

	return (
		<Modal
			title={type === 'create' ? '新增{{.Description}}' : '编辑{{.Description}}'}
			open={visible}
			onOk={handleSubmit}
			onCancel={handleClose}
			confirmLoading={loading}
			destroyOnClose
			width={600}
			maskClosable={false}
		>
			<Form
				form={form}
				layout="vertical"
				disabled={detailLoading}
			>
				{{- if .IsTree }}
				<Form.Item name="parentID" label="父节点">
					<TreeSelect
						placeholder="请选择父节点"
						allowClear
						treeData={[{ {{.PrimaryField.FieldJson}}: 0, {{.TreeJson}}: '根节点', children: treeData }]}
						fieldNames={{ "{{" }} label: '{{.TreeJson}}', value: '{{.PrimaryField.FieldJson}}', children: 'children' {{ "}}" }}
						treeDefaultExpandAll
					/>
				</Form.Item>
				{{- end }}
				{{- range .Fields}}
				{{- if .Form}}
				{{ GenerateReactFormItem . }}
				{{- end }}
				{{- end }}
			</Form>
		</Modal>
	);
};

export default {{.StructName}}Form;
{{- else}}
/**
 * KRA - {{.Description}}表单组件
 * Auto-generated by KRA AutoCode
 */
import React from 'react';
import { Modal, Form, Input } from 'antd';

interface {{.StructName}}FormProps {
	visible: boolean;
	type: 'create' | 'edit';
	record?: any;
	onClose: () => void;
	onSuccess: () => void;
}

const {{.StructName}}Form: React.FC<{{.StructName}}FormProps> = ({
	visible,
	type,
	onClose,
	onSuccess,
}) => {
	const [form] = Form.useForm();

	return (
		<Modal
			title={type === 'create' ? '新增{{.Description}}' : '编辑{{.Description}}'}
			open={visible}
			onOk={() => {
				form.validateFields().then(() => {
					onSuccess();
					onClose();
				});
			}}
			onCancel={onClose}
			destroyOnClose
		>
			<Form form={form} layout="vertical">
				{/* 表单字段 */}
			</Form>
		</Modal>
	);
};

export default {{.StructName}}Form;
{{- end }}
{{- end }}