2BChannelCmsBrowser/src/routes/Frontend/index.js

import React, { PureComponent } from 'react';
import { connect } from 'dva';
import { routerRedux } from 'dva/router';

import PageHeaderLayout from '../../layouts/PageHeaderLayout';
import RecommendList from './recommend';
import { getLocalUser } from '../../utils/config';
import { pageSize } from '../../utils/config';

@connect(state => ({
  recommend: state.recommend,
  mproduct: state.mproduct,
}))
export default class FrontendConfiger extends PureComponent {
  state = { curTab: 'recommend' };

  handleTabChange = (key) => {
    this.setState({ curTab: key });
  }

  // 点击调整推荐位按钮 - 弹出模态框
  handleRecommendAdjustClick = () => {
    this.props.dispatch({ type: 'recommend/showModal' });
  }

  // 点击模态框的取消按钮 - 隐藏
  handleRecommendModalCancel = () => {
    this.props.dispatch({ type: 'recommend/hideModal' });
  }

  // 点击模态框的确定按钮 -> 更新recommend model state -> 隐藏
  handleRecommendModalOk = (data) => {
    this.props.dispatch({
      type: 'recommend/saveSortResult',
      payload: data,
    });
  }

  // 点击模态框的搜索按钮 -> 查询相关产品
  handleRecommendModalSearch = (data) => {
    const { merchantId } = getLocalUser();
    const newData = { ...data };
    if (newData.keyword) {
      newData[newData.field] = newData.keyword;
    }
    delete newData.field;
    delete newData.keyword;
    this.props.dispatch({
      type: 'mproduct/query',
      payload: {
        merchantId,
        pageNo: 1,
        pageSize,
      },
    });
  }

  // 模态框中表格翻页
  handleRecommendModalTableChange = (pagination, filterArgs, filters) => {
    const { merchantId } = getLocalUser();
    const newFilters = { ...filters };
    if (newFilters.keyword) {
      newFilters[newFilters.field] = newFilters.keyword;
    }
    delete newFilters.field;
    delete newFilters.keyword;

    const data = {
      ...newFilters,
      merchantId,
      pageNo: pagination.current,
      pageSize: pagination.pageSize,
    };

    Object.keys(data).map(key => (data[key] ? null : delete data[key]));
    dispatch({ type: 'mproduct/query', payload: data });
  }

  // 页面退出 - 跳首页
  handleRecommendPageCancel = () => {
    const { dispatch } = this.props;
    dispatch(routerRedux.push('/'));
  }

  // 页面提交[params: merchantId, idList] - 成功跳首页
  handleRecommendPageSubmit = () => {
    const { merchantId } = getLocalUser();
    const { dispatch, recommend } = this.props;
    const { item } = recommend;
    const idList = item.map(one => one.id);

    dispatch({
      type: 'recommend/updateMerchantRecommend',
      payload: { merchantId, idList },
      callback: () => {
        dispatch(routerRedux.push('/'));
      },
    });
  }

  render() {
    const { recommend, mproduct } = this.props;
    const { item, loading, modalShow } = recommend;

    const tabList = [{
      key: 'recommend',
      tab: '推荐位设置',
    }];

    const contentMap = {
      recommend:
  <RecommendList
    rowKeyName="id"
    loading={loading}
    selTableData={item}
    modalVisible={modalShow}
    fsTableDataSource={mproduct.list}
    fsTablePagination={mproduct.pagination}
    fsTableLoading={mproduct.listLoading}
    fsTableOnChange={this.handleRecommendModalTableChange}
    onOk={this.handleRecommendModalOk}
    onCancel={this.handleRecommendModalCancel}
    onSearch={this.handleRecommendModalSearch}
    modalShowController={this.handleRecommendAdjustClick}
    onPageCancel={this.handleRecommendPageCancel}
    onPageSubmit={this.handleRecommendPageSubmit}
  />,
    };

    return (
      <PageHeaderLayout
        tabList={tabList}
        onTabChange={this.handleTabChange}
      >
        {contentMap[this.state.curTab]}
      </PageHeaderLayout>
    );
  }
}