• 编辑表单

    注意

    1. 当字段在当前条件下 disabled, 直接使用 显示值, 而不是使用输入组件
    2. 当字段是级联 disabled 时, 需要使用 输入组件的 disabled

    详情页面编辑表单-卡片-二级标题

    import React, { Component } from "react";
import { Card, Form, Row, Col, Input } from "hzero-ui";

import intl from "utils/intl";
import { enableRender } from "utils/renderer";

import {
  DETAIL_CARD_CLASSNAME,
  FORM_COL_2_3_LAYOUT,
  FORM_COL_3_LAYOUT,
  EDIT_FORM_ROW_LAYOUT,
  ROW_HALF_WRITE_ONLY_CLASSNAME,
  ROW_WRITE_ONLY_CLASSNAME,
  ROW_READ_ONLY_CLASSNAME,
} from "utils/constants";

const { TextArea } = Input;

@Form.create({ fieldNameProp: null })
export default class CardEditForm extends Component {
  render() {
    const { form, loading = false, isSite = false, record = {} } = this.props;
    const { infoType = "N" } = record;
    const infoDisabled = infoType === "N";
    return (
      <Card
        key="event-header"
        bordered={false}
        className={DETAIL_CARD_CLASSNAME}
        title={
          <h3>
            {intl.get("module.service.view.title.header").d("编辑头信息")}
          </h3>
        }
        loading={loading}
      >
        <Form layout="inline">
          <Row
            {...EDIT_FORM_ROW_LAYOUT}
            className={ROW_HALF_WRITE_ONLY_CLASSNAME}
          >
            {isSite && (
              <Col {...FORM_COL_2_3_LAYOUT}>
                <Form.Item
                  label={intl
                    .get("module.service.model.modelName.field1")
                    .d("字段1")}
                >
                  {form.getFieldDecorator("field1", {
                    initialValue: record.field1,
                  })(<TextArea />)}
                </Form.Item>
              </Col>
            )}
          </Row>
          <Row {...EDIT_FORM_ROW_LAYOUT} className={ROW_WRITE_ONLY_CLASSNAME}>
            <Col {...FORM_COL_3_LAYOUT}>
              <Form.Item
                label={intl
                  .get("module.service.model.modelName.field2")
                  .d("字段2")}
              >
                {form.getFieldDecorator("field2")(<Input />)}
              </Form.Item>
            </Col>
            <Col {...FORM_COL_3_LAYOUT}>
              <Form.Item
                label={intl
                  .get("module.service.model.modelName.field3")
                  .d("字段3")}
              >
                {form.getFieldDecorator("field3")(<Input />)}
              </Form.Item>
            </Col>
            <Col {...FORM_COL_3_LAYOUT}>
              <Form.Item
                label={intl
                  .get("module.service.model.modelName.field4")
                  .d("字段4")}
              >
                {form.getFieldDecorator("field4")(<Input />)}
              </Form.Item>
            </Col>
            <Col {...FORM_COL_3_LAYOUT}>
              <Form.Item
                label={intl
                  .get("module.service.model.modelName.field5")
                  .d("字段5")}
              >
                {enableRender(form.getFieldValue("field5"))}
              </Form.Item>
            </Col>
          </Row>
          <Row {...EDIT_FORM_ROW_LAYOUT} className={ROW_READ_ONLY_CLASSNAME}>
            <Col {...FORM_COL_3_LAYOUT}>
              <Form.Item
                label={intl
                  .get("module.service.model.modelName.field6")
                  .d("字段6")}
              >
                {form.getFieldDecorator("field6", {
                  initialValue: record.field6,
                })(
                  infoDisabled ? (
                    <React.Fragment>{record.field6}</React.Fragment>
                  ) : (
                    <Input />
                  )
                )}
              </Form.Item>
            </Col>
            <Col {...FORM_COL_3_LAYOUT}>
              <Form.Item
                label={intl
                  .get("module.service.model.modelName.field6")
                  .d("字段7")}
              >
                {form.getFieldDecorator("field7", {
                  initialValue: record.field7,
                })(
                  infoDisabled ? (
                    <React.Fragment>{record.field7}</React.Fragment>
                  ) : (
                    <Input />
                  )
                )}
              </Form.Item>
            </Col>
            <Col {...FORM_COL_3_LAYOUT}>
              <Form.Item
                label={intl
                  .get("module.service.model.modelName.field8")
                  .d("字段8")}
              >
                {form.getFieldDecorator("field8", {
                  initialValue: record.field8,
                })(
                  infoDisabled ? (
                    <React.Fragment>{record.field6}</React.Fragment>
                  ) : (
                    <Input />
                  )
                )}
              </Form.Item>
            </Col>
          </Row>
        </Form>
      </Card>
    );
  }
}

    详情页面编辑表单-模态框

    import React from 'react';
import { Modal, Input, Form, Button } from 'hzero-ui';
import { Bind } from 'lodash-decorators';

import intl from "utils/intl";

import { Header, Content } from "components/Page";


const FormItem = Form.Item;
const formLayout = {
  labelCol: { span: 5 },
  wrapperCol: { span: 17 },
};

@Form.create({ fieldNameProp: null })
export default class DrawerEditForm extends React.Component {
constructor(props) {
  super(props);
  this.state = {
    modalVisible: false,
    isCreate: false,
  };
}

  @Bind()
  showModal() {
    this.setState({
      modalVisible: true,
      isCreate: true,
    });
  }

  @Bind()
  onCancel() {
    this.setState({
      modalVisible: false,
    });
  }

  @Bind()
  handleEditModal() {
    this.setState({
      isCreate: false,
      modalVisible: true,
    });
  }

  render() {
    const { form, loading } = this.props;
    const { modalVisible, isCreate } = this.state;
    const { getFieldDecorator } = form;
    return (
      <React.Fragment>
        <Header title='模态框编辑表单'>
          <Button icon='plus' type='primary' onClick={this.showModal}>
            {intl.get('hzero.common.button.create').d('新建')}
          </Button>
        </Header>
        <Content>
          <a onClick={this.handleEditModal}>
            {intl.get('hzero.common.button.edit').d('编辑')}
          </a>
          <Modal
            destroyOnClose
            wrapClassName="ant-modal-sidebar-right"
            transitionName="move-right"
            title={isCreate ? '新建' : '编辑'}
            visible={modalVisible}
            confirmLoading={loading}
            onCancel={this.onCancel}
            onOk={this.handleOK}
          >
            <Form>
              <FormItem
                {...formLayout}
                label={intl.get('hpfm.message.model.message.code').d('消息编码')}
              >
                {getFieldDecorator('code', {
                  initialValue: isCreate ? undefined : 111,
                  rules: [
                    {
                      required: true,
                      message: intl.get('hzero.common.validation.notNull', {
                        name: intl.get('hpfm.message.model.message.code').d('消息编码'),
                      }),
                    },
                  ],
                })(
                  <Input
                    trim
                    typeCase="lower"
                    inputChinese={false}
                  />,
                )}
              </FormItem>
            </Form>
          </Modal>
        </Content>
      </React.Fragment>
    );
  }
}

    详情页面编辑表单-收缩框

    import React, { Fragment } from 'react';
import {
  Col,
  Collapse,
  Form,
  Icon,
  Input,
  InputNumber,
  Row,
  Spin,
} from 'hzero-ui';
import { Bind } from 'lodash-decorators';
import classnames from 'classnames';
import { PASSWORD } from 'utils/regExp';

import { Content, Header } from 'components/Page';

import {
  DETAIL_DEFAULT_CLASSNAME,
  EDIT_FORM_ITEM_LAYOUT,
  EDIT_FORM_ROW_LAYOUT,
  FORM_COL_3_LAYOUT,
} from 'utils/constants';
import intl from 'utils/intl';
import formatterCollections from 'utils/intl/formatterCollections';

const FormItem = Form.Item;
const { Panel } = Collapse;

@Form.create({ fieldNameProp: null })
@formatterCollections({ code: ['hiam.passwordPolicy'] })
export default class CollapseEditForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      collapseKeys: ['passwordPolicy'],
    };
  }


  /**
   * onCollapseChange - 折叠面板onChange
   * @param {Array<string>} collapseKeys - Panels key
   */
  @Bind()
  onCollapseChange(collapseKeys) {
    this.setState({
      collapseKeys,
    });
  }

  render() {
    const {
      form: {
        getFieldDecorator,
        getFieldValue,
      }} = this.props;
    const { collapseKeys = [] } = this.state;
    return (
      <React.Fragment>
        <Header title={intl.get('hiam.passwordPolicy.view.message.title').d('密码策略')} />
        <Content>
          <Spin
            spinning={false}
            wrapperClassName={classnames(DETAIL_DEFAULT_CLASSNAME)}
          >
            <Collapse
              className="form-collapse"
              defaultActiveKey={['passwordPolicy', 'loginPolicy']}
              onChange={this.onCollapseChange}
            >
              <Panel
                showArrow={false}
                header={
                  <Fragment>
                    <h3>
                      {intl
                        .get('hiam.passwordPolicy.view.message.subTitle.passwordPolicy')
                        .d('密码安全策略')}
                    </h3>
                    <a>
                      {collapseKeys.includes('passwordPolicy')
                        ? intl.get(`hzero.common.button.up`).d('收起')
                        : intl.get(`hzero.common.button.expand`).d('展开')}
                    </a>
                    <Icon type={collapseKeys.includes('passwordPolicy') ? 'up' : 'down'} />
                  </Fragment>
                }
                key="passwordPolicy"
              >
                <Form>
                  <Row {...EDIT_FORM_ROW_LAYOUT} className="writable-row">
                    <Col {...FORM_COL_3_LAYOUT}>
                      <FormItem
                        {...EDIT_FORM_ITEM_LAYOUT}
                        label={intl
                          .get('hiam.passwordPolicy.model.passwordPolicy.originalPassword')
                          .d('新用户默认密码')}
                      >
                        {getFieldDecorator('originalPassword', {
                          rules: [
                            {
                              required: true,
                              message: intl.get('hzero.common.validation.notNull', {
                                name: intl.get('hiam.subAccount.model.user.password').d('密码'),
                              }),
                            },
                            {
                              pattern: PASSWORD,
                              message: intl
                                .get('hzero.common.validation.password')
                                .d('至少包含数字/字母/字符2种组合,长度为6-30个字符'),
                            },
                          ],
                          initialValue: 'handhand',
                        })(<Input />)}
                      </FormItem>
                    </Col>
                    <Col {...FORM_COL_3_LAYOUT}>
                      <FormItem
                        {...EDIT_FORM_ITEM_LAYOUT}
                        label={intl
                          .get('hiam.passwordPolicy.model.passwordPolicy.passwordUpdateRate')
                          .d('密码更新频率')}
                      >
                        {getFieldDecorator('passwordUpdateRate', {
                          rules: [
                            {
                              required: true,
                              message: intl.get('hzero.common.validation.notNull', {
                                name: intl
                                  .get('hiam.passwordPolicy.model.passwordPolicy.passwordUpdateRate')
                                  .d('密码更新频率'),
                              }),
                            },
                          ],
                          initialValue: 22,
                        })(
                          <InputNumber
                            style={{ width: '100%' }}
                            min={0}
                            precision={0}
                            formatter={value => `${value}天`}
                          />
                        )}
                      </FormItem>
                    </Col>
                    <Col {...FORM_COL_3_LAYOUT}>
                      <FormItem
                        {...EDIT_FORM_ITEM_LAYOUT}
                        label={intl
                          .get('hiam.passwordPolicy.model.passwordPolicy.minLength')
                          .d('最小密码长度')}
                      >
                        {getFieldDecorator('minLength', {
                          initialValue: 11,
                          rules: [
                            {
                              required: true,
                              message: intl
                                .get('hiam.passwordPolicy.model.passwordPolicy.minLength')
                                .d('最小密码长度'),
                            },
                          ],
                        })(
                          <InputNumber
                            style={{ width: '100%' }}
                            min={6}
                            precision={0}
                            max={getFieldValue('maxLength')}
                          />
                        )}
                      </FormItem>
                    </Col>
                  </Row>
                </Form>
              </Panel>
            </Collapse>
          </Spin>
        </Content>
      </React.Fragment>
    );
  }
}

    详情页面编辑表单-无卡片

    import React from 'react';
import { Input, Form, Row, Col } from 'hzero-ui';

import intl from "utils/intl";

import { CODE_UPPER } from 'utils/regExp';
import { Header, Content } from "components/Page";

import {
  EDIT_FORM_ROW_LAYOUT,
  ROW_READ_WRITE_CLASSNAME,
  FORM_COL_3_LAYOUT,
  EDIT_FORM_ITEM_LAYOUT,
  DETAIL_EDIT_FORM_CLASSNAME,
} from 'utils/constants';

@Form.create({ fieldNameProp: null })
export default class DetailEditForm extends React.Component {

  render() {
    const { form }= this.props;
    return (
      <React.Fragment>
        <Header title='编辑表单-无卡片' />
        <Content>
          <Form className={DETAIL_EDIT_FORM_CLASSNAME}>
            <Row
              {...EDIT_FORM_ROW_LAYOUT}
              className={ROW_READ_WRITE_CLASSNAME}
            >
              <Col {...FORM_COL_3_LAYOUT}>
                <Form.Item
                  {...EDIT_FORM_ITEM_LAYOUT}
                  label={intl.get('hpfm.staticText.model.staticText.code').d('编码')}
                >
                  {form.getFieldDecorator('textCode', {
                    initialValue: 'CODE',
                    rules: [
                      {
                        required: true,
                        message: intl.get('hzero.common.validation.notNull', {
                          name: intl.get('module.service.model.service.code').
                            d('编码'),
                        }),
                      },
                      {
                        pattern: CODE_UPPER,
                        message: intl.get('hzero.common.validation.codeUpper').
                          d('全大写及数字，必须以字母、数字开头，可包含“-”、“_”、“.”、“/”'),
                      },
                    ],
                  })(<Input trim typeCase="upper" inputChinese={false} />)}
                </Form.Item>
              </Col>
              <Col {...FORM_COL_3_LAYOUT}>
                <Form.Item
                  {...EDIT_FORM_ITEM_LAYOUT}
                  label={intl.get('module.service.model.service.name').d('名称')}
                >
                  {form.getFieldDecorator('textCode', {
                    initialValue: 'NAME',
                    rules: [
                      {
                        pattern: CODE_UPPER,
                        message: intl.get('hzero.common.validation.codeUpper').
                          d('全大写及数字，必须以字母、数字开头，可包含“-”、“_”、“.”、“/”'),
                      },
                    ],
                  })(<Input trim typeCase="upper" inputChinese={false} />)}
                </Form.Item>
              </Col>
              <Col {...FORM_COL_3_LAYOUT}>
                <Form.Item
                  {...EDIT_FORM_ITEM_LAYOUT}
                  label={intl.get('hpfm.staticText.model.staticText.title').d('标题')}
                >
                  {form.getFieldDecorator('textCode', {
                    initialValue: 'TITLE',
                  })(<Input trim typeCase="upper" inputChinese={false} />)}
                </Form.Item>
              </Col>
            </Row>
          </Form>
        </Content>
      </React.Fragment>
    );
  }
}