@hbtv/pro-form
    TypeScript icon, indicating that this package has built-in type declarations

    1.4.17 • Public • Published

    @hbtv/pro-form 组件

    ant-design 4.x 自定义Form套件

    • 支持数据分组
    • 支持图形化生成表单
    • 支持根据数据生成表单

    安装方法

    npm install @hbtv/pro-form --save

    更新记录

    查看更新记录

    使用方法

    ProForm 共有 5 个组件

    • ProForm, 根据配置的json, 生成表单
    • ProFormEditor 编辑器,图形化生成表单对应的json数据
    • ProFormRender 渲染器, 根据表单配置json和表单数据data,渲染表单数据
    • TemplateRender 渲染器, 根据表单配置json,表单数据data及模板来渲染页面
    • ProFormCodeView 查看表单配置json代码

    ProForm

    ProForm使用方法

    import React from 'react';
    import { ProForm } from '@hbtv/pro-form';
    import { Button } from 'antd';
    
    const ProFromTest = () => {
      const [form] = ProForm.useForm();
      const fields = [
          { dataIndex: 'userName', title: '用户名', componentType: 'text' },
          { dataIndex: 'user.trueName', title: '真实姓名', componentType: 'text' },
          { dataIndex: 'user.nickname', title: '昵称', componentType: 'text' },
          { dataIndex: 'startTime', title: '时间', componentType: 'time', displayRule: 'date(HH:mm)' },
      ];
      const handleFinish = (values:any) => {
        console.log('values',values)
      };
    
      return (
        <>
          <ProForm form={form} fields={fields} onFinish={handleFinish} />
          <Button onClick={()=>form.submit()}>提交表单</Button>
        </>
      );
    }
    export interface ProFormProps {
      uploadServices?: ServicesType; // MediaUploadProps 的 services
      form: FormInstance; // 通过 ProForm.useForm() 创建, 等同 antd Form.useForm()
      labelCol?: any; // 等同 antd labelCol
      wrapperCol?: any; // 等同 antd wrapperCol
      menuWidth?: number; // 如果是分组表单,分类菜单的宽度
      fields: ProFormFieldType[];  // 详见下方的 字段声明
      activeGroup?: string; // 当前分组的dataIndex
      initialValue?:any; // 1.1.23 新增 表单初始值
      onGroupChange?: (
        newGroupName: string,
        oldGroupName: string,
        oldValues?: any,
        isValidate?: boolean | any,
      ) => void; // 1.1.22 修改了参数
      onFinish?: (values: any, groupName?: string) => void; // form.submit() 后校验成功后触发
      valueEnum?: {  // 可供select作为枚举值使用的枚举
        [k: string]: ProFormEnumType[];
      };
    }

    字段配置文件的声明

    import { ListColumnType, ValueEnumType, TreeDataType } from '@hbtv/list-input';
    
    export interface ProFormFieldType extends ListColumnType {
      dependOn?: DependOnType[];
    }

    ProFormEditor

    辅助工具,可以生成ProFormFieldType对应的字段,详见src/ProFormTest.tsx

    ProFormEditor使用方法

    import React,{ useState } from 'react';
    import { ProFormFieldType } from '@hbtv/pro-form';
    import { ProFormEditor } from '@hbtv/pro-form/dist/ProFormEditor';
    
    const ProFormEditorTest = () => {
      const [fields , setFields] = useState<ProFormFieldType[]>([]);
    
      return <ProFormEditor value={fields} onChange={setFields} />
    }
    export interface ProFormEditorProps {
      value?: ProFormFieldType[];
      onChange?: (values: ProFormFieldType[]) => void;
      createGroupBtn?: boolean;
      previewBtn?: boolean;
      actions?: React.ReactNode[];
    }

    ProFormRender

    import React,{ useState } from 'react';
    import { ProFormFieldType } from '@hbtv/pro-form';
    import { ProFormRender } from '@hbtv/pro-form/dist/ProFormRender';
    
    const ProFormRenderTest = () => {
      const fields = [
          { dataIndex: 'userName', title: '用户名', componentType: 'text' },
          { dataIndex: 'detail.trueName', title: '真实姓名', componentType: 'text' },
          { dataIndex: 'detail.nickname', title: '昵称', componentType: 'text' },
          { dataIndex: 'startTime', title: '时间', componentType: 'time', displayRule: 'date(HH:mm)' },
      ];
    
      const data = {
        userName:'your name',
        detail:{
          trueName:'your trueName',
          nickname:'your nickname',
        },
        startTime:'2020-06-20 09:10:30',  // ProForm中所有的时间都保存为完整时间字符串,仅通过显示规则来显示不同
      }
    
      return <ProFormRender fields={fields} data={data} />
    }
    export interface ProFormRenderProps {
      fields: ProFormFieldType[];
      data?: any;
      valueEnum?: {
        [k: string]: ValueEnumType[] | TreeDataType[];
      };
    }

    TemplateRender

    import React,{ useState } from 'react';
    import { ProFormFieldType } from '@hbtv/pro-form';
    import { TemplateRender } from '@hbtv/pro-form/dist/TemplateRender';
    
    const TemplateRenderTest = () => {
      const fields = [
          { dataIndex: 'userName', title: '用户名', componentType: 'text' },
          { dataIndex: 'detail.trueName', title: '真实姓名', componentType: 'text' },
          { dataIndex: 'detail.nickname', title: '昵称', componentType: 'text' },
          { dataIndex: 'startTime', title: '时间', componentType: 'time', displayRule: 'date(HH:mm)' },
      ];
    
      const data = {
        userName:'your name',
        detail:{
          trueName:'your trueName',
          nickname:'your nickname',
        },
        startTime:'2020-06-20 09:10:30',  // ProForm中所有的时间都保存为完整时间字符串,仅通过显示规则来显示不同
      }
    
      const template = `<p>{{userName}}</p>
      <p>{{user.trueName}}</p>
      <p>{{user.nickname}}</p>
      <p>{{allowLogin}}</p>
      `;
    
      return <TemplateRender fields={fields} data={data} template={template} />
    }
    export interface TemplateRenderProps {
      fields: ProFormFieldType[];
      data: { [k: string]: any };
      template: string;
      valueEnum?: {
        [k: string]: ValueEnumType[] | TreeDataType[];
      };
    }

    显示规则配置displayRule

    • date 显示时间及日期,例如 date(YYYY-MM) date(HH:mm), 通moment.format使用的字符串
    • image 显示图片,image(宽,高), 缺省为auto,例如 image(128,128)图片尺寸为 128*128, image(,64)指定宽度auto,高度为64
    • video 显示视频,参数同image
    • audio 显示音频,无参数
    • bool 显示布尔值
    • url 显示为链接,url(显示的文本), 默认为当前值

    Keywords

    none

    Install

    npm i @hbtv/pro-form

    DownloadsWeekly Downloads

    3

    Version

    1.4.17

    License

    MIT

    Unpacked Size

    400 kB

    Total Files

    48

    Last publish

    Collaborators

    • gegang
    • zix2002
    • yugong
    • dokey
    • gogoing
    • xuezhidp
    • aa719032411