fx-form-weidget v1.2.15

✅ 预览组件（PreviewPlatform）

🥢🍚 使用方式

import { PreviewPlatform } from 'fx-form-weidget';

const App = () => {
  const [content, setContent] = useState([]);
  const [editValues, setEditValues] = useState({});
  const formRef = useRef();

  let schema = {
    partitions: [
      {
        partition: null,
        partitionType: 'baseItem',
        schemas: [
          {
            id: 5,
            pid: 1,
            widget: 'select',
            text: '下拉单选',
            icon: 'icon-select',
            wid: 'select_tEyVM4_1632834829',
            viewSchema: {
              type: 'string',
              fieldName: '',
              dataUrl: '',
              isMust: false,
              isRequired: false,
              title: '下拉单选',
              placeholder: '',
              readonly: false,
              required: false,
              allowClear: false,
              enumKeys: ['t1nZKi', '6yyDkD', 'biS7Nt'],
              enumNames: ['选项一', '选项二', '选项三'],
              ui_options: {
                defaultValue: 'biS7Nt',
              },
            },
            editSchema: {
              fieldName: {
                title: '唯一标识 (数据存储的字段名)',
                type: 'string',
                widget: 'input',
                required: false,
                advanced: true,
                ui_options: {
                  placeholder: '输入前请先与后端确定字段含义',
                },
              },
              dataUrl: {
                title: '接口地址',
                type: 'string',
                widget: 'inputSearch',
                required: false,
                advanced: true,
                ui_options: {
                  placeholder: '请输入接口地址',
                  enterButton: '确定',
                },
              },
              isMust: {
                title: '是否是必须的组件',
                type: 'boolean',
                widget: 'switch',
                checkedText: '是',
                unCheckedText: '否',
                required: false,
                advanced: true,
              },
              isRequired: {
                title: '是否是必填的组件',
                type: 'boolean',
                widget: 'switch',
                checkedText: '是',
                unCheckedText: '否',
                required: false,
                advanced: true,
              },
              title: {
                title: '标题',
                type: 'string',
                widget: 'input',
                data: '下拉单选',
                required: true,
                advanced: false,
              },
              placeholder: {
                title: '提示信息',
                type: 'string',
                widget: 'input',
                required: false,
                advanced: false,
              },
              readonly: {
                title: '是否只读',
                type: 'boolean',
                widget: 'switch',
                checkedText: '是',
                unCheckedText: '否',
                required: false,
                advanced: false,
              },
              required: {
                title: '是否必填',
                type: 'boolean',
                widget: 'switch',
                checkedText: '是',
                unCheckedText: '否',
                required: false,
                advanced: false,
              },
              allowClear: {
                title: '清除按钮',
                type: 'boolean',
                widget: 'switch',
                checkedText: '显示',
                unCheckedText: '不显示',
                required: false,
                advanced: false,
              },
              enumKeys: {
                title: '选项字段',
                type: 'array',
                widget: null,
                data: ['t1nZKi', '6yyDkD', 'biS7Nt'],
                required: true,
                advanced: false,
              },
              enumNames: {
                title: '选项名称',
                type: 'array',
                widget: 'optionsSet',
                enumKeys: ['t1nZKi', '6yyDkD', 'biS7Nt'],
                enumNames: ['选项一', '选项二', '选项三'],
                data: {
                  enumKeys: ['t1nZKi', '6yyDkD', 'biS7Nt'],
                  enumNames: ['选项一', '选项二', '选项三'],
                },
                required: true,
                advanced: false,
              },
              description: {
                title: '说明',
                type: 'string',
                widget: 'textarea',
                required: false,
                advanced: false,
              },
            },
          },
        ],
      },
    ],
    globalLayout: {
      displayType: 'row',
      labelWidth: 110,
      column: 1,
    },
  };

  const getValue = () => {
    // onSubmit为校验规则，成功后返回表单内所填值
    const data = await formRef.current.onSubmit();
    console.log('data', data);
  };

  const setValue = () => setDefaultValue();

  const resetValue = () => formRef.current.onReset();

  useEffect(() => {
    setContent(schema);
    setEditValues({ input_0Zmfb1_1634007981: '1111' });
  }, []);

  return (
    <>
      <Button onClick={setValue}>填入默认值</Button>
      <Button onClick={getValue}>获取值</Button>
      <Button onClick={resetValue}>重置</Button>

      <PreviewPlatform
        ref={formRef}
        defaultValue={editValues}
        schema={content}
        loading={false}
        loading={false}
      />
    </>
  );
};

export default App;

⚙️ API

schema

必填，接收表单渲染对象

ref

可选，
  1. 校验方法onSubmit，返回promise，成功返回所需要的表单数据，错误则catch错误
  2. 重置方法onReset，重置表单数据

defaultValue

可选，接受表单默认值（对象）

loading

可选，表单loading状态

getAnchorInfo

可选，回调函数，返回对应分割线锚点信息
    (anchorInfo)=>{ console.log(anchorInfo) }

✅ 详情组件（DetailRender）

🥢🍚 使用方式

import { Button } from '@fle-ui/next';
import { DetailRender } from 'fx-form-weidget';

const App = () => {
  const [detailList, setDetailList] = useState([]);

  let detail = [
    {
      wid: 'input_sdsdwa_10001',
      fieldName: 'username',
      title: '姓名',
      value: ['张三', '张三', '张三'],
    },
    {
      wid: 'datePicker_sdsdwa_10001',
      fieldName: 'dispatchTime',
      title: '分配时间',
      value: ['2021-10-08', '2021-10-09'],
    },
    {
      wid: 'rate_sdsdwa_10001',
      fieldName: 'rateScore',
      title: '评级',
      value: 2,
    },
    {
      wid: 'uploadPic_sdsdwa_10001',
      fieldName: 'picUpload',
      title: '图片上传',
      value: [
        {
          uid: 'MyeV',
          name: 'IMG_0017.JPG',
          status: 'done',
          url: 'https://oss.elebuys.com/tmpdir/202110081403070008147049.JPG',
        },
        {
          uid: 'LJsU',
          name: 'IMG_0018.JPG',
          status: 'done',
          url: 'https://oss.elebuys.com/tmpdir/202110081403070008147049.JPG',
        },
      ],
    },
    {
      wid: 'uploadFile_sdsdwa_10001',
      fieldName: 'fileUpload',
      title: '附件上传',
      value: [
        {
          uid: 'wIEA',
          name: '行测答题技巧.pdf',
          status: 'done',
          url: 'https://oss.elebuys.com/tmpdir/202110091655580008147720.pdf',
        },
        {
          uid: 'LJsU',
          name: 'IMG_0018.JPG',
          status: 'done',
          url: 'https://oss.elebuys.com/tmpdir/202110081403070008147049.JPG',
        },
      ],
    },
  ];

  useEffect(() => {
    setDetailList(detail);
  }, []);

  return (
    <>
      <DetailRender
        dataList={detailList}
        column={2}
        showBorder
        getAnchorInfo={(anchorInfo) => {}}
      />
    </>
  );
};

export default App;

⚙️ API

dataList

必填，接收详情渲染数组

column

可选，详情显示列，不填默认两列

showBorder

可选，是否展示表格边框，默认不展示

getAnchorInfo

可选，回调函数，返回对应分割线锚点信息
    (anchorInfo)=>{ console.log(anchorInfo) }