# 🔨 预览组件 demo
```jsx
import React, { Component, useState, useEffect, useRef } from 'react';
import ReactDOM from 'react-dom';
import { Button, Space } from 'antd';
import { PreviewPlatform } from 'fx-form-widget';
const App = () => {
const [content, setContent] = useState({});
const [editValues, setEditValues] = useState([]);
const formRef = useRef();
const getValue = async () => {
// onSubmit为校验规则，成功后返回表单内所填值
const data = await formRef.current.onSubmit();
console.log('data', data);
};
const setValue = () =>
formRef.current.setDefaultValue({
addressCode: ['13_1090_1093'],
});
const resetValue = () => formRef.current.onReset();
const submit = async () => {
const data = await formRef.current.onSubmit();
console.log('data', data);
}
useEffect(() => {
const content = {
partitions: [
{
partitionType: 'advanceItem',
schemas: [
{
id: 1,
pid: 2,
widget: 'addressSelection',
text: '地址选择',
icon: 'icon-address',
wid: 'addressSelection_EM_axw_1632482898',
viewSchema: {
fieldName: 'addressCode',
title: '省市区',
isMust: true,
changeOnSelect: true,
isRequired: false,
required: false,
readonly: false,
allowClear: false,
data: '',
hasDetailAddress: true,
addressLevel: 4,
},
editSchema: {
fieldName: {
title: '唯一标识 (数据存储的字段名)',
type: 'string',
widget: 'input',
required: false,
advanced: true,
data: 'addressCode',
ui_options: {
defaultValue: null,
enterButton: null,
placeholder: '输入前请先与后端确定字段含义',
type: null,
addonAfter: null,
min: null,
max: null,
},
readonly: false,
},
isMust: {
title: '是否是必须的组件',
type: 'boolean',
widget: 'switch',
required: false,
advanced: true,
data: true,
},
pattern: {
title: '正则验证规则',
type: 'string',
widget: 'input',
required: false,
advanced: true,
data: '',
readonly: false,
},
patternErrMsg: {
title: '正则验证错误提示',
type: 'string',
widget: 'input',
required: false,
advanced: true,
data: '',
readonly: false,
},
isRequired: {
title: '是否是必填的组件',
type: 'boolean',
widget: 'switch',
required: false,
advanced: true,
data: true,
readonly: false,
},
title: {
title: '标题',
type: 'string',
widget: 'input',
required: true,
advanced: false,
data: '省市区',
},
readonly: {
title: '是否只读',
type: 'boolean',
widget: 'switch',
required: false,
advanced: false,
readonly: true,
},
required: {
title: '是否必填',
type: 'boolean',
widget: 'switch',
required: false,
advanced: false,
},
allowClear: {
title: '清除按钮',
type: 'boolean',
widget: 'switch',
required: false,
advanced: false,
readonly: true,
},
placeholder: {
title: '提示信息',
type: 'string',
widget: 'input',
required: false,
advanced: false,
},
description: {
title: '说明',
type: 'string',
widget: 'textarea',
required: false,
advanced: false,
},
hasDetailAddress: {
title: '是否填写详细地址',
type: 'boolean',
widget: 'switch',
required: false,
advanced: false,
data: true,
},
addressLevel: {
title: '控制地址级别',
type: 'string',
widget: 'select',
required: false,
advanced: false,
data: 3,
enumKeys: [4, 3, 2, 1],
enumNames: ['四级地址', '三级地址', '二级地址', '一级地址'],
ui_options: {
defaultValue: [4],
},
},
},
children: null,
},
],
},
{
partitionType: 'baseItem',
schemas: [
{
id: 1,
pid: 1,
widget: 'input',
text: '单行输入框',
icon: 'icon-single',
wid: 'input_FuueA2_1634202275',
viewSchema: {
fieldName: 'mobile',
title: ' 手机号',
isMust: true,
isRequired: false,
required: false,
readonly: false,
placeholder: '请输入',
allowClear: false,
pattern: '^1[3-9]\\d{9}$',
patternErrMsg: '手机号格式有误'
},
editSchema: {
fieldName: {
title: '唯一标识 (数据存储的字段名)',
type: 'string',
widget: 'input',
required: false,
advanced: true,
data: 'address',
ui_options: {
defaultValue: null,
enterButton: null,
placeholder: '输入前请先与后端确定字段含义',
type: null,
addonAfter: null,
min: null,
max: null,
},
},
isMust: {
title: '是否是必须的组件',
type: 'boolean',
widget: 'switch',
required: false,
advanced: true,
data: true,
},
isRequired: {
title: '是否是必填的组件',
type: 'boolean',
widget: 'switch',
required: false,
advanced: true,
},
title: {
title: '标题',
type: 'string',
widget: 'input',
required: true,
advanced: false,
data: '地址',
},
readonly: {
title: '是否只读',
type: 'boolean',
widget: 'switch',
required: false,
advanced: false,
},
required: {
title: '是否必填',
type: 'boolean',
widget: 'switch',
required: false,
advanced: false,
},
minLength: {
title: '最短字数',
type: 'number',
widget: 'inputNumber',
required: false,
advanced: false,
},
maxLength: {
title: '最长字数',
type: 'number',
widget: 'inputNumber',
required: false,
advanced: false,
data: 200,
},
allowClear: {
title: '清除按钮',
type: 'boolean',
widget: 'switch',
required: false,
advanced: false,
},
placeholder: {
title: '提示信息',
type: 'string',
widget: 'input',
required: false,
advanced: false,
data: '请输入',
},
addonBefore: {
title: '前tab',
type: 'string',
widget: 'input',
required: false,
advanced: false,
},
addonAfter: {
title: '后tab',
type: 'string',
widget: 'input',
required: false,
advanced: false,
},
description: {
title: '说明',
type: 'string',
widget: 'textarea',
required: false,
advanced: false,
},
},
children: null,
},
],
},
{
partitionType: 'baseItem',
schemas: [
{
id: 5,
pid: 1,
widget: 'select',
text: '下拉单选',
icon: 'icon-select',
wid: 'select_ZwZSrz_1634202302',
viewSchema: {
fieldName: 'principalId',
title: '负责人',
dataUrl: '/synergy/employee/name/list',
isMust: true,
isRequired: false,
required: false,
enumNames: [],
enumKeys: [],
readonly: false,
placeholder: '请选择',
allowClear: false,
},
editSchema: {
fieldName: {
title: '唯一标识 (数据存储的字段名)',
type: 'string',
widget: 'input',
required: false,
advanced: true,
data: 'principalId',
ui_options: {
defaultValue: null,
enterButton: null,
placeholder: '输入前请先与后端确定字段含义',
type: null,
addonAfter: null,
min: null,
max: null,
},
},
dataUrl: {
title: '接口地址',
type: 'string',
widget: 'inputSearch',
required: false,
advanced: true,
data: '/synergy/employee/name/list',
ui_options: {
defaultValue: null,
enterButton: '确定',
placeholder: '请输入接口地址',
type: null,
addonAfter: null,
min: null,
max: null,
},
},
isMust: {
title: '是否是必须的组件',
type: 'boolean',
widget: 'switch',
required: false,
advanced: true,
data: true,
},
isRequired: {
title: '是否是必填的组件',
type: 'boolean',
widget: 'switch',
required: false,
advanced: true,
data: true,
},
title: {
title: '标题',
type: 'string',
widget: 'input',
required: true,
advanced: false,
data: '负责人',
},
readonly: {
title: '是否只读',
type: 'boolean',
widget: 'switch',
required: false,
advanced: false,
},
required: {
title: '是否必填',
type: 'boolean',
widget: 'switch',
required: false,
advanced: false,
data: true,
},
enumNames: {
title: '选项名称',
type: 'array',
widget: 'optionsSet',
required: true,
advanced: false,
data: {
enumNames: [],
enumKeys: [],
},
enumKeys: ['fzeB_S', '8tHwR1', 'oNCoOZ'],
enumNames: ['选项一', '选项二', '选项三'],
},
enumKeys: {
title: '选项字段',
type: 'array',
required: true,
advanced: false,
data: [],
},
allowClear: {
title: '清除按钮',
type: 'boolean',
widget: 'switch',
required: false,
advanced: false,
},
placeholder: {
title: '提示信息',
type: 'string',
widget: 'input',
required: false,
advanced: false,
data: '请选择',
},
description: {
title: '说明',
type: 'string',
widget: 'textarea',
required: false,
advanced: false,
},
},
children: null,
},
],
},
{
partitionType: 'baseItem',
schemas: [
{
id: 6,
pid: 1,
widget: 'employeeSelection',
text: '下拉多选',
icon: 'icon-multiselect',
wid: 'multiSelect_13S5Ib_1634202319',
viewSchema: {
fieldName: 'associatesIds',
title: '协作人',
dataUrl: '/synergy/employee/name/list',
isMust: true,
isRequired: false,
required: false,
enumNames: [],
enumKeys: [],
readonly: true,
placeholder: '请选择',
allowClear: true,
employeeOptions: true,
},
editSchema: {
fieldName: {
title: '唯一标识 (数据存储的字段名)',
type: 'string',
widget: 'input',
required: false,
advanced: true,
data: 'associatesIds',
ui_options: {
defaultValue: null,
enterButton: null,
placeholder: '输入前请先与后端确定字段含义',
type: null,
addonAfter: null,
min: null,
max: null,
},
},
dataUrl: {
title: '接口地址',
type: 'string',
widget: 'inputSearch',
required: false,
advanced: true,
data: '/synergy/employee/name/list',
ui_options: {
defaultValue: null,
enterButton: '确定',
placeholder: '请输入接口地址',
type: null,
addonAfter: null,
min: null,
max: null,
},
},
isMust: {
title: '是否是必须的组件',
type: 'boolean',
widget: 'switch',
required: false,
advanced: true,
data: true,
},
isRequired: {
title: '是否是必填的组件',
type: 'boolean',
widget: 'switch',
required: false,
advanced: true,
},
title: {
title: '标题',
type: 'string',
widget: 'input',
required: true,
advanced: false,
data: '协作人',
},
readonly: {
title: '是否只读',
type: 'boolean',
widget: 'switch',
required: false,
advanced: false,
},
required: {
title: '是否必填',
type: 'boolean',
widget: 'switch',
required: false,
advanced: false,
},
enumNames: {
title: '选项名称',
type: 'array',
widget: 'optionsSet',
required: true,
advanced: false,
data: {
enumNames: [],
enumKeys: [],
},
enumKeys: ['fzeB_S', '8tHwR1', 'oNCoOZ'],
enumNames: ['选项一', '选项二', '选项三'],
},
enumKeys: {
title: '选项字段',
type: 'array',
required: true,
advanced: false,
data: [],
},
allowClear: {
title: '清除按钮',
type: 'boolean',
widget: 'switch',
required: false,
advanced: false,
},
placeholder: {
title: '提示信息',
type: 'string',
widget: 'input',
required: false,
advanced: false,
data: '请选择',
},
description: {
title: '说明',
type: 'string',
widget: 'textarea',
required: false,
advanced: false,
},
},
children: null,
},
],
},
],
globalLayout: {
displayType: 'row',
labelWidth: 110,
column: 2,
},
};
setContent(content);
setEditValues([{ datePicker_xldh7t_1634544489: '' }]);
}, []);
return (
<>
{
console.log('values', values);
}}
defaultValue={[{ fieldName: 'addressCode', value: ['13'] }]}
onChange={(values) => {
console.log('values', values);
}}
/>
);
};
ReactDOM.render(, mountNode);
```