上节实现了 Table 的物料组件，这节继续来实现 Form 组件。

创建 materails/Form/dev.tsx

import { Form as AntdForm, Input } from "antd";
import React, { useEffect, useMemo, useRef } from "react";
import { useMaterailDrop } from "../../hooks/useMaterailDrop";
import { CommonComponentProps } from "../../interface";
import { useDrag } from "react-dnd";

function Form({ id, name, children, onFinish }: CommonComponentProps) {
    const [form] = AntdForm.useForm();

    const { canDrop, drop } = useMaterailDrop(["FormItem"], id);

    const divRef = useRef<HTMLDivElement>(null);

    const [_, drag] = useDrag({
        type: name,
        item: {
            type: name,
            dragType: "move",
            id: id,
        },
    });

    useEffect(() => {
        drop(divRef);
        drag(divRef);
    }, []);

    const formItems = useMemo(() => {
        return React.Children.map(children, (item: any) => {
            return {
                label: item.props?.label,
                name: item.props?.name,
                type: item.props?.type,
                id: item.props?.id,
            };
        });
    }, [children]);

    return (
        <div
            className={`w-[100%] p-[20px] min-h-[100px] ${canDrop ? "border-[2px] border-[blue]" : "border-[1px] border-[#000]"}`}
            ref={divRef}
            data-component-id={id}>
            <AntdForm
                labelCol={{ span: 6 }}
                wrapperCol={{ span: 18 }}
                form={form}
                onFinish={(values) => {
                    onFinish && onFinish(values);
                }}>
                {formItems.map((item: any) => {
                    return (
                        <AntdForm.Item
                            key={item.name}
                            data-component-id={item.id}
                            name={item.name}
                            label={item.label}>
                            <Input style={{ pointerEvents: "none" }} />
                        </AntdForm.Item>
                    );
                })}
            </AntdForm>
        </div>
    );
}

export default Form;

和 Table 的实现方式差不多，可以拖拽 FormItem 进来，然后通过 React.Children.map 变成表单项配置，之后遍历渲染 Form.Item

注意要加上 pointerEvent:none，因为编辑时 Input 不需要输入内容

在 Page、Container、Modal 组件里支持 Form 组件的 drop：

在 componentConfig 里添加 Form 组件的配置：

Form: {
    name: 'Form',
    defaultProps: {},
    desc: '表单',
    setter: [
        {
            name: 'title',
            label: '标题',
            type: 'input',
        },
    ],
    events: [
        {
            name: 'onFinish',
            label: '提交事件',
        }
    ],
    dev: FormDev,
    prod: FormDev
},

测试下：

没啥问题。

然后我们实现 FormItem 组件：

materials/FormItem/dev.tsx

const FormItem = () => <></>;

export default FormItem;

materials/FormItem/prod.tsx

const FormItem = () => <></>;

export default FormItem;

和 TableColumn 一样，它只是用于配置的，不需要渲染啥。

在 componentConfig 里配置下：

FormItem: {
    name: 'FormItem',
    desc: '表单项',
    defaultProps: {
        name: new Date().getTime(),
        label: '姓名'
    },
    dev: FormItemDev,
    prod: FormItemProd,
    setter: [
      {
        name: 'type',
        label: '类型',
        type: 'select',
        options: [
          {
            label: '文本',
            value: 'input',
          },
          {
            label: '日期',
            value: 'date',
          },
        ],
      },
      {
        name: 'label',
        label: '标题',
        type: 'input',
      },
      {
        name: 'name',
        label: '字段',
        type: 'input',
      },
      {
        name: 'rules',
        label: '校验',
        type: 'select',
        options: [
          {
            label: '必填',
            value: 'required',
          },
        ],
      }
    ]
}

然后实现下 prod 的 Form 组件：

import { Form as AntdForm, DatePicker, Input } from "antd";
import React, {
    forwardRef,
    ForwardRefRenderFunction,
    useEffect,
    useImperativeHandle,
    useMemo,
} from "react";
import { CommonComponentProps } from "../../interface";
import dayjs from "dayjs";

export interface FormRef {
    submit: () => void;
}

const Form: ForwardRefRenderFunction<FormRef, CommonComponentProps> = (
    { children, onFinish },
    ref
) => {
    const [form] = AntdForm.useForm();

    useImperativeHandle(ref, () => {
        return {
            submit: () => {
                form.submit();
            },
        };
    }, [form]);

    const formItems = useMemo(() => {
        return React.Children.map(children, (item: any) => {
            return {
                label: item.props?.label,
                name: item.props?.name,
                type: item.props?.type,
                id: item.props?.id,
                rules: item.props?.rules,
            };
        });
    }, [children]);

    async function save(values: any) {
        Object.keys(values).forEach((key) => {
            if (dayjs.isDayjs(values[key])) {
                values[key] = values[key].format("YYYY-MM-DD");
            }
        });

        onFinish(values);
    }

    return (
        <AntdForm
            name="form"
            labelCol={{ span: 5 }}
            wrapperCol={{ span: 18 }}
            form={form}
            onFinish={save}>
            {formItems.map((item: any) => {
                return (
                    <AntdForm.Item
                        key={item.name}
                        name={item.name}
                        label={item.label}
                        rules={
                            item.rules === "required"
                                ? [
                                      {
                                          required: true,
                                          message: "不能为空",
                                      },
                                  ]
                                : []
                        }>
                        {item.type === "input" && <Input />}
                        {item.type === "date" && <DatePicker />}
                    </AntdForm.Item>
                );
            })}
        </AntdForm>
    );
};

export default forwardRef(Form);

用 React.Children.map 拿到要渲染的 formItems 信息，然后遍历渲染表单项 From.Item，根据类型渲染不同表单。

onFinish 的时候，需要对 DatePicker 的 value 做下处理，因为值是 dayjs 对象，需要 format 一下拿到字符串值。

我们还通过 forwardRef + useImperativeHandle 暴露了 submit 方法，需要在 componentConfig 里注册下：

methods: [
    {
        name: 'submit',
        label: '提交',
    }
],

并且修改 prod 为刚才写的组件。

测试下看看：

然后我们加一个按钮来触发表单提交。

我们应该能在事件处理函数里拿到传过来的 values：

在 Preview 绑定事件的时候加一下参数：

测试下：

const values = args[0];

alert(JSON.stringify(values));

点击按钮触发表单提交的动作。

表单提交触发脚本执行的动作。

我们可以再加一个发送请求的动作，根据传入的 values 来发送创建请求，之后调用 Table 的刷新方法就好了。

现在我们编辑完的画布，一刷新就没有了：

这样体验不好，我们最好做一下持久化。

这是 zustand 自带的功能，用 persist 中间件实现就行：

我们做拖拽版 todolist 那个案例的时候用过：

用了 ts + middleware 的时候，create 要换种写法。

文档的解释是为了更好的处理类型：

不影响功能。

我们加一下：

const creator: StateCreator<State & Action> = (set, get) => ({
    //...
});

export const useComponetsStore = create<State & Action>()(
    persist(creator, {
        name: "xxx",
    })
);

测试下：

这样刷新后依然保存着编辑的内容。

案例代码上传了小册仓库

总结

这节我们实现了 Form 组件，并做了 store 的持久化。

Form 组件和 Table 组件一样，通过 FormItem 来配置字段，FormItem 本身不渲染内容。

Form 暴露了 submit 方法，并且支持绑定 onFinish 事件。

我们可以通过 Button 的点击事件触发 Form 的 submit，然后给 Form 的 onFinish 事件绑定一个发请求的动作，这样就实现了提交表单保存到服务端。

至此，我们的低代码编辑器就比较完善了，物料、动作都可以根据需要自己添加。