123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253 |
- 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>
- );
- }
- }
|