• 编辑表单


    注意

    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>
        );
      }
    }