antd 3.X OA组件库

基于Antd 3.x 版本抽出的组件，参数API可参考Antd 部分组件如: Select Form 做了一些改动，可参考下面例子

Button Select Dialog Form

Button

未做封装，参考Antd

实例

<Button>123</Button>

Select

增加options参数，用于渲染下拉框， 增加valueField参数, 控制value字段 增加labelField参数, 控制label字段 其他参数不受影响

实例

const options = [
  {
    value: 1,
    label: 1,
  },
  {
    value: "lucy",
    label: "lucy",
    children: "自定义一些文案"
  },
  {
    value: "disabled",
    label: "disabled",
    disabled: true
  }
]

<Select
  options={options}
  style={{width: 200}}
  defaultValue={1}
  optionLabelProp="label"
/>

Dialog

提示弹窗依旧使用原组件

<Button onClick={() => {Alert("12333")}}>Alert 默认成功提示</Button>
<Button onClick={() => {ShowErrorAlert("必填")}}>错误提示</Button>

若需要修改配置，参数可以传如对象

<Button onClick={() => {Alert({
    width: 310,
    content: "内容",
    onOk: () => {},
    okText: "已阅读"
  })}}>灵活配置</Button>

一般弹窗也是类似用法，需要说明: 内容组件用content传入，其他参数Antd

<Button onClick={this.onShowModal}>Modal</Button>

function onShowModal() {
  Modal.show({
    title: "标题",
    content: <div>Modal Node</div>,
    onOk: this.onOk
  })
}

Form

为了后续升级方便，封装后的用法，像4.0靠拢

1. 原const FormCom = Form.create()(Com)改为const FormCom = Form.useForm(Com);
2. Form需要传入form={this.props.form}
3. 支持initialValues参数，同意传入初始值，Form.Item传初始值优先
4. Form.Item 只需要传name label rules等即可

实例

class Com extends Component {
  <Form form={this.props.form} initialValues={{ name: "张三" }} {...ALL_LINE_LAYOUT} >
    <Form.Item name="name" label="姓名" rules={[{ required: true }]}>
      <Input type="hidden" />
      <span>张三</span>
    </Form.Item>
  </Form>
}

const FormCom = Form.useForm(Com);