Hotax/src/routes/Campus/CampusList.js

import React, { Component } from 'react';
import moment from 'moment';
import { connect } from 'dva';
import { routerRedux } from 'dva/router';
import { Card, Modal, Form, Button, message } from 'antd';
import { StandardTableList } from '../../components/RBList';
import RBRemoteSelect from '../../components/RBRemoteSelect';
import PageHeaderLayout from '../../layouts/PageHeaderLayout';
import { addRowKey } from '../../utils/utils';
import styles from './CampusList.less';

const Message = message;

const formItemLayout = {
  labelCol: {
    xs: { span: 24 },
    sm: { span: 7 },
  },
  wrapperCol: {
    xs: { span: 24 },
    sm: { span: 15 },
    md: { span: 13 },
  },
};
function merchantDataFormatter(data) {
  return data.map((item) => {
    return {
      text: item.name,
      value: item.id,
    };
  });
}

@Form.create()
@connect(({ loading, campus, merchant }) => ({
  campus,
  merchant,
  fetching: loading.models.merchant,
  loading: loading.models.campus,
}))
export default class CampusListPage extends Component {
  constructor(props) {
    super(props);
    const { state } = props.location;
    this.state = {
      UIParams: (state || {}).UIParams, // 组件的状态参数
      Queryers: (state || {}).Queryers, // 查询的条件参数
      filterModalDestroy: true,
    };
  }
  componentDidMount() {
    this.props.dispatch({
      type: 'campus/fetchCampusList',
      payload: { ...this.state.Queryers },
    });
  }
  handleCreateOperation = () => {
    this.props.dispatch(routerRedux.push({
      pathname: '/campus/create',
      state: this.state,
    }));
  }
  handleEditOperation = (item) => {
    this.props.dispatch(routerRedux.push({
      pathname: `/campus/edit/${item.id}`,
      state: this.state,
    }));
  }
  handleFilterOperation = (params, states) => {
    this.props.dispatch({
      type: 'campus/fetchCampusList',
      payload: params,
    });
    this.setState({
      UIParams: states,
      Queryers: params,
    });
  }
  handleModalFilterOperation = () => {
    const { getFieldValue } = this.props.form;
    const value = getFieldValue('merchantId');
    this.props.dispatch({
      type: 'campus/fetchCampusList',
      payload: {
        ...this.state.Queryers,
        merchantId: value[0],
      },
    });
    this.handleFilterModalDestroy();
  }
  handleBatchOperation = () => {
    Message.info('暂不支持批量操作!');
  }
  handleFilterModalShow = () => {
    this.setState({ filterModalDestroy: false });
  }
  handleFilterModalDestroy = () => {
    this.setState({ filterModalDestroy: true });
  }
  handleRemoteSelectSearch = (value) => {
    this.props.dispatch({
      type: 'merchant/fetchMerchantList',
      payload: {
        pageSize: 50,
        name: value,
      },
    });
  }

  render() {
    const { loading, fetching, form, campus, merchant } = this.props;
    const { list, totalSize, pageSize, pageNo } = campus;
    const { getFieldDecorator } = form;

    const renderOperation = (item) => {
      return (
        <div>
          <Button
            size="small"
            className={styles.editBtn}
            onClick={() => this.handleEditOperation(item)}
          >编辑
          </Button>
        </div>
      );
    };
    const batchActions = [{
      key: 'delete',
      name: '批量删除',
    }, {
      key: 'recovery',
      name: '批量恢复',
    }];
    const basicSearch = {
      keys: [{
        name: '校区编号',
        field: 'code',
      }, {
        name: '校区名称',
        field: 'name',
      }],
    };
    const pagination = {
      pageNo,
      pageSize,
      totalSize,
    };
    const columns = [{
      title: '校区编号',
      key: 1,
      dataIndex: 'code',
      render: (text, record) => (
        <a
          className={styles.link}
          onClick={() => this.handleEditOperation(record)}
        >
          {text}
        </a>
      ),
      width: '12%',
    }, {
      title: '校区名称',
      key: 2,
      dataIndex: 'name',
      render: (text, record) => (
        <a
          className={styles.link}
          onClick={() => this.handleEditOperation(record)}
        >
          {text}
        </a>
      ),
      width: '34%',
    }, {
      title: '所属渠道',
      key: 3,
      dataIndex: 'merchantName',
      width: '10%',
    }, {
      title: '校区联系人',
      key: 4,
      dataIndex: 'contactName',
      width: '10%',
    }, {
      title: '联系电话',
      key: 5,
      dataIndex: 'mobile',
      width: '12%',
    }, {
      title: '更新时间',
      key: 6,
      dataIndex: 'gmtModified',
      render: text => moment(text).format('YYYY-MM-DD HH:mm:ss'),
      width: '16%',
    }, {
      title: '操作',
      key: 7,
      dataIndex: 'operation',
      render: (_, record) => renderOperation(record),
      width: '6%',
    }];
    return (
      <PageHeaderLayout>
        <Card>
          <StandardTableList
            columns={columns}
            loading={loading}
            dataSource={addRowKey(list)}
            header={{
              basicSearch,
              onAdvanceFilterClick: this.handleFilterModalShow,
              onFilterClick: this.handleFilterOperation,
              onCreateClick: this.handleCreateOperation,
            }}
            footer={{
              pagination,
              batchActions,
              onBatchClick: this.handleBatchOperation,
            }}
            keepUIState={{ ...this.state.UIParams }}
            showStatusSelect={false}
          />
          {!this.state.filterModalDestroy && (
            <Modal
              width={600}
              visible
              title="高级筛选"
              okText="筛选"
              cancelText="取消"
              maskClosable={false}
              onCancel={this.handleFilterModalDestroy}
              onOk={this.handleModalFilterOperation}
            >
              <Form>
                <Form.Item label="所属商户" {...formItemLayout}>
                  {getFieldDecorator('merchantId', {
                      initialValue: [],
                    })(
                      <RBRemoteSelect
                        fetching={fetching}
                        dataSource={merchantDataFormatter(merchant.list)}
                        onSearch={this.handleRemoteSelectSearch}
                      />
                    )}
                </Form.Item>
              </Form>
            </Modal>
          )}
        </Card>
      </PageHeaderLayout>
    );
  }
}