• pub路由


    说明

    通过使用 /pub/xxx 路由来访问,页面相较于原始页面去除了菜单栏和顶部功能条。

    效果

    使用

    1.定义路由

    根据 hzero 路由定义方式定义路由,需要在path 上加入 /pub前缀,例如

      {
       authorized: true,
       path: "/pub/hiam/pub-demo",
       component: "PubDemo",
       key: '/pub/hiam/pub-demo',
       models: [
         "pubDemo"
       ]
     }
    

    2.开发页面

    该路由下的页面需自行开发,以下为示例。

    index.js

      import React from 'react';
      import { connect } from 'dva';
      import { Table } from 'hzero-ui';
      import { Bind } from 'lodash-decorators';
    
      import { Content, Header } from 'components/Page';
    
      import FilterForm from './FilterForm';
    
      @connect(({ loading, pubDemo }) => ({
        fetchLoading: loading.effects['pubDemo/fetchData'],
        pubDemo,
      }))
      export default class PubDemo extends React.Component {
        filterForm;
    
        componentDidMount() {
          this.fetchList();
        }
    
        fetchList(params = {}) {
          const {
            dispatch,
            pubDemo: { pagination = {} },
          } = this.props;
          const filterValue = this.filterForm === undefined ? {} : this.filterForm.getFieldsValue();
          dispatch({
            type: 'pubDemo/fetchData',
            payload: { page: pagination, ...filterValue, ...params },
          });
        }
    
        @Bind()
        handleSearch() {
          this.fetchList({ page: {} });
        }
    
        @Bind()
        handleBindRef(ref) {
          this.filterForm = (ref.props || {}).form;
        }
    
        @Bind()
        handleResetSearch() {
          this.filterForm.resetFields();
        }
    
        /**
      * handlePagination - 分页设置
      * @param {object} pagination - 分页对象
      */
        @Bind()
        handlePagination(pagination) {
          this.fetchList({ page: pagination });
        }
    
        render() {
          const { fetchLoading = false, pubDemo: { data = [] } = {}, pagination = {} } = this.props;
          const columns = [
            {
              title: 'ID',
              dataIndex: 'id',
              width: 100,
            },
            {
              title: '客户端名',
              dataIndex: 'name',
            },
          ];
          return (
            <React.Fragment>
              <Header title="前端pub示例" />
              <Content>
                <div className="table-list-search">
                  <FilterForm
                    onSearch={this.handleSearch}
                    onReset={this.handleResetSearch}
                    onRef={this.handleBindRef}
                  />
                </div>
                <Table
                  bordered
                  loading={fetchLoading}
                  rowKey="id"
                  columns={columns}
                  dataSource={data}
                  pagination={pagination}
                  onChange={this.handlePagination}
                />
              </Content>
            </React.Fragment>
          );
        }
      };
    

    FilterForm.js

    import React from 'react';
    import { Form, Button, Input } from 'hzero-ui';
    import { Bind } from 'lodash-decorators';
    
    import intl from 'utils/intl';
    
    const FormItem = Form.Item;
    
    @Form.create({ fieldNameProp: null })
    export default class FilterForm extends React.PureComponent {
    constructor(props) {
      super(props);
      // 调用父组件 props onRef 方法
      props.onRef(this);
    }
    
    /**
     * 查询操作
     */
    @Bind()
    handleSearch() {
      const { form, onSearch } = this.props;
      onSearch(form);
    }
    
    /**
     * 重置操作
     */
    @Bind()
    handleReset() {
      const { form, onReset } = this.props;
      onReset(form);
    }
    
    render() {
      const { form } = this.props;
      const { getFieldDecorator } = form;
      return (
        <Form layout="inline">
          <FormItem label="客户端名">
            {getFieldDecorator('param')(<Input />)}
          </FormItem>
          <FormItem>
            <Button style={{ marginRight: 8 }} onClick={this.handleReset}>
              {intl.get('hzero.common.button.reset').d('重置')}
            </Button>
            <Button type="primary" htmlType="submit" onClick={this.handleSearch}>
              {intl.get('hzero.common.button.search').d('查询')}
            </Button>
          </FormItem>
        </Form>
      );
    }
    }