• 介绍

    routes - 存放所有界面组件.

    目录结构采用: src/routes/[功能模块]/具体组件

    新增功能模块文件

    1.在 src/routes 目录下新建一个新的功能文件夹 Client,用于存放 客户端 功能模块的所有页面组件文件及其样式文件

    2.在Client文件夹下新增 页面入口文件(index.js) ,页面样式文件( index.less),新增/编辑抽屉组件( Drawer.js ),角色选择弹窗组件( RoleModal.js ), 查询表单组件( FilterForm.js )

    新增功能模块文件

    多语言维护

    页面涉及到多语言的,首先要引入两个依赖,然后使用 @formatterCollections() 注解引入对应的code。

    注意:

    • hzero.common中的多语言不需要再页面引入
    • 对于一个功能模块,只需在入口页面中引入
    import intl from 'utils/intl';
    import prompt from 'utils/intl/prompt';
    
    @formatterCollections({ code: ['hiam.client'] })
    

    操作栏渲染

    若操作栏包含多个按钮,可以使用 operatorRender 方法渲染,会自动渲染多(超过3个,可自行配置)的按钮进下拉菜单,同时会限制单个操作按钮的宽度,防止出现在切换语言后,操作栏前面按钮长度变长可能会导致后面的按钮被挤出该列,导致无法操作的情况。

    操作栏 操作栏英语

    示例

    const columns = [
      ...
    
      {
            title: intl.get('hzero.common.button.action').d('操作'),
            width: 120,
            fixed: 'right',
            dataIndex: 'edit',
            render: (_, record) => {
              const operators = [
                {
                  key: 'edit', // key
                  ele: (
                    <a
                      onClick={() => {
                        this.handleEdit(record);
                      }}
                    >
                      {intl.get('hzero.common.button.edit').d('编辑')}
                    </a>
                  ), // 操作栏的按钮
                  len: 2, // 该按钮占相应中文数的宽度
                  title: intl.get('hzero.common.button.edit').d('编辑'), // 文字提示的显示文本
                },
              ];
              return operatorRender(operators, record, { limit: 4 }); // operatorRender接受三个参数,第一个是操作列数组,第二个是当前行数据,第三个是配置
            },
          },
    ]
    

    index.js

    入口js导出的组件名称为所在文件夹的名称.

    引入依赖的顺序建议,分块集中放置,即:第三方的放在最前面,本地绝对路径引入放在其后,本地相对路径引入放在最后

    import React from 'react';
    import { connect } from 'dva';
    import { Form, Table, Tag } from 'hzero-ui';
    import { Bind } from 'lodash-decorators';
    import { isEmpty } from 'lodash';
    
    import { Header, Content } from 'components/Page';
    import intl from 'utils/intl';
    import formatterCollections from 'utils/intl/formatterCollections';
    import notification from 'utils/notification';
    
    import FilterForm from './FilterForm';
    import Drawer from './Drawer';
    

    对于必须的但无实际意义的父标签,使用 React.Fragmen 标签

    此处为减小代码篇幅,以 展示客户端列表数据 为一个流程代表进行描述,其他功能实现流程类似

    /**
     * Client - 客户端
     * @date: 2018-12-24
     * @author: XXX <xxx@hand-china.com>
     * @version: 1.0.0
     * @copyright Copyright (c) 2018, Hand
     */
    import React from 'react';
    import { connect } from 'dva';
    import { Form, Table, Tag } from 'hzero-ui';
    import { Bind } from 'lodash-decorators';
    
    import intl from 'utils/intl';
    import formatterCollections from 'utils/intl/formatterCollections';
    import { Header, Content } from 'components/Page';
    
    import FilterForm from './FilterForm';
    
    
    @formatterCollections({ code: ['hiam.client'] })
    /**
     * Client - 业务组件 - 客户端
     * @extends {Component} - React.Component
     * @reactProps {arrary} clientList 列表数据
     * @reactProps {object} pagination 列表分页
     * @reactProps {boolean} fetchLoading 列表数据加载是否完成
     * @reactProps {Function} query 查询列表数据
     * @return React.element
     */
    // 将state和dispatch绑定到组件的props中
    @connect(mapStateToProps, mapDispatchToProps)
    export default class Client extends React.Component {
      constructor(props) {
        super(props);
        this.filterFormRef = React.createRef();
      }
    
      componentDidMount() {
        this.handleSearch();
      }
    
      /**
       * 客户端列表数据查询
       * @param {object} params - 查询参数
       */
      @Bind()
      handleSearch(params = {}) {
        const { form, query, pagination } = this.props;
          const fieldValues = this.filterFormRef.current.getFieldsValue();
            query({
              params: {
                page: pagination,
                ...fieldValues,
                ...params,
              },
            });
      }
      render() {
        const { clientList = [], pagination, fetchLoading } = this.props;
        const columns = [
          {
            title: intl.get('hiam.client.model.client.name').d('名称'),
            width: 400,
            dataIndex: 'name',
          },
          {
            title: intl.get('hiam.client.model.client.authorizedGrantTypes').d('授权类型'),
            dataIndex: 'authorizedGrantTypes',
            render: text => {
              const typeListT = text.split(',') || [];
              return typeListT.map(item => {
                return <Tag key={item}>{item}</Tag>;
              });
            },
          },
        ];
        return (
          <Content>
            <FilterForm
                onSearch={this.handleSearch}
                onRef={this.filterFormRef}
              />
            <Table
              bordered
              rowKey="id"
              loading={fetchLoading}
              dataSource={clientList}
              columns={columns}
              pagination={pagination}
              onChange={this.handleSearch}
            />
          </Content>
        )
      }
    }
    
    function mapStateToProps({client, loading}) {
      const {
        clientList = [],
        pagination = {},
      } = client;
      return {
      clientList: [],
      pagination: {},
      fetchLoading: loading.effects['client/fetchClientList'],
      };
    }
    
    function mapDispatchToProps(dispatch) {
      return {
        query(payload) {
          return dispatch({
            type: 'client/fetchClientList',
            payload,
          });
        },
      };
    }