sourcecode/front/src/containers/Page.js

import React, { Component } from 'react';
import * as querystring from 'querystring';

export default class extends Component {
  constructor(props) {
    super(props);
    const { config, core, match, size } = this.props;
    this.inited = false;
    this.loaded = 0;
    this.params = match.params;
    const state = {
      page: {
        current: core.query.page ? Number(core.query.page) : 1,
        pageSize: core.query.size ? Number(core.query.size) : size || 20,
        showQuickJumper: true,
        showSizeChanger: true,
        showTotal: total => `总数: ${total}`,
        total: 0,
      },
      search: Object.assign({ page: 1, size: size || 20 }, core.query),
      list: [],
      data: {},
      selectedKeys: [],
      selectedRows: [],
      tab: '',
    };
    this.state = Object.assign(state, this.initState());
    this.init();

    this.changePageInfo(config);
  }

  changePageInfo(config) {
    if (config.title) window.document.title = config.title;
    try {
      const metaList = document.documentElement.getElementsByTagName('meta');
      for (let i = 0; i < metaList.length; i += 1) {
        if (metaList[i].name === 'description' && config.description) {
          metaList[i].setAttribute('content', config.description);
        } else if (metaList[i].name === 'keyword' && config.keyword) {
          metaList[i].setAttribute('content', config.keyword);
        }
      }
    } catch (e) {
      console.log(e);
    }
  }

  componentWillMount() {
    if (!this.props.core.isCallBack || this.props.config.repeat) this.initData();
    this.inited = true;
    this.inPage();
  }

  componentWillUpdate() {
    if (this.inited) {
      this.updateData();
    } else {
      if (!this.props.core.isCallBack || this.props.config.repeat) this.initData();
      this.inited = true;
    }
  }

  componentWillUnmount() {
    this.outPage();
  }

  init() {}

  initState() {
    return {};
  }

  restart() {
    /**
     * 下次更新重新初始化页面数据
     */
    this.inited = false;
  }

  initData() {
    /**
     * 初始化数据
     */
  }

  updateData() {
    /**
     * 更新数据
     */
  }

  inPage() {
    /**
     * 进入页面
     */
  }

  outPage() {
    /**
     * 离开页面
     */
  }

  onAction(key) {
    if (this[`${key}Action`]) this[`${key}Action`]();
  }

  tabChange(key) {
    if (this[`${key}Tab`]) this[`${key}Tab`]();
    this.setState({ tab: key });
  }

  setTableData(list, total) {
    const { page } = this.state;
    page.total = total;
    this.setState({ list, page, selectedKeys: [] });
  }

  tableSelect(selectedKeys, selectedRows) {
    this.setState({ selectedKeys, selectedRows });
  }

  tableSort(columns) {
    const { order, direction } = this.state.search;
    return columns.map(row => {
      if (row.dataIndex === order) {
        row.sortOrder = direction === 'asc' ? 'ascend' : 'descend';
      }
      return row;
    });
  }

  tableChange(pagination, filters, sorter = {}) {
    this.search({
      page: pagination.current,
      number: pagination.pageSize,
      order: sorter.field,
      direction: sorter.order === 'ascend' ? 'asc' : 'desc',
    });
  }

  search(data, refresh = true) {
    const query = Object.assign(this.state.search, data);
    if (refresh) {
      this.refreshQuery(query);
    } else {
      this.changeQuery(query);
    }
  }

  refresh() {
    this.refreshQuery(this.state.search);
  }

  changeQuery(query) {
    changeParams(`?${querystring.stringify(query)}`);
  }

  refreshQuery(query) {
    replaceLink(`${this.props.location.pathname}?${querystring.stringify(query)}`);
  }

  render() {
    const { config } = this.props;
    return (
      <div id={config.key} className="page">
        {this.renderView()}
      </div>
    );
  }

  renderView() {
    return <div />;
  }

  open(item = {}, modal = 'detail') {
    this.setState({
      [modal]: item,
    });
  }

  close(refresh, modal = 'detail') {
    this.setState({
      [modal]: null,
    });
    if (refresh) this.refresh();
  }
}