cjd-parkball/src/components/formBuilder/demo/modal.md

> 中后台业务组件库，中后台就像公园，进入需要买门票（登录），所以以 Parkball(公园球) 命名，公园内必定捕获！作为一个组件库，提供使用方法文档，方便开发者的调用

---
title: 弹窗中表单生成器的用法
title_en: usage for form builder in Modal
category: 2
order: 1
---
展示了一个弹窗中表单生成组件的用法
```jsx

import { FormBuilder, Button, Modal } from 'parkball'
const { Fields } = FormBuilder

class Demo extends React.Component {
  handleSubmit({ err, values }, form, e) {
    console.log(err)
  }

  state = {
    visible: false,
  }

  fields = [{
    type: 'select',
    name: 'companyName',
    label: '所属企业',
    url: '/api/company/list',
    valueKey: 'name',
    labelKey: 'name',
    hide: [{
      name: 'companyId',
      get: (option) => option.id
    }]
  }, {
    type: 'checkbox',
    label: '爱好',
    name: 'favorite',
    initialValue: ['reading'],
    options: [{
      value: 'chess',
      label: '下棋',
    }, {
      value: 'reading',
      label: '阅读',
    }, {
      value: 'sport',
      label: '运动健身',
    }, {
      value: 'travel',
      label: '旅游',
    }, {
      value: 'movie',
      label: '电影',
    }]
  }, {
    type: 'cascader',
    label: '省市区',
    url: '/api/address/${option.id}/children',
    labelKey: 'name',
    valueKey: 'id',
    name: 'city',
  }, {
    type: 'cascader',
    label: '省市区',
    options: [{
      value: 'zhejiang',
      label: 'Zhejiang',
      children: [{
        value: 'hangzhou',
        label: 'Hangzhou',
      }],
    }, {
      value: 'jiangsu',
      label: 'Jiangsu',
      children: [{
        value: 'nanjing',
        label: 'Nanjing',
      }],
    }],
    name: 'province',
  }, {
    type: 'upload',
    label: '头像',
    url: '/api/file',
    name: 'avatar',
    initialValue: [{
      uid: '-2',
      name: 'yyy.png',
      status: 'done',
      url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
      thumbUrl: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
    }],
  }, {
    type: 'upload',
    url: '/api/file',
    name: 'attachment',
    label: '附件',
    listType: 'text',
  }]

  render() {
    return (
      <div>
        <Button onClick={() => this.setState({visible: true})}>打开弹窗</Button>
        <Modal
        visible={this.state.visible}
        onCancel={()=> this.setState({visible: false})}
        >
          <FormBuilder
            onSubmit={({ err, values }, form, e) => console.log({ err, values }, form, e)}
          >
            <Fields fields={this.fields} />
            <Button type="secondary" htmlType="submit">保存</Button>
          </FormBuilder>
        </Modal>
      </div>
    )
  }
}

ReactDOM.render(
  <Demo/>,
  mountNode
)
```