AntDesign 开发-1 （简单列表页面-sy）

开发步骤
1.添加菜单 router.config.js

          {
            path: \'/data_test\', //访问页面时 url 路径
            name: \'datatest\',   //名称
            icon: \'hdd\',        //图标
            routes: [
              {
                path: \'/data_test/getList\',
                name: \'datatest_getList\',
                component: \'./datatest/DataTestList\',//组件路径或页面路径
              },
            ],
          },
          

2.配置菜单显示的名称 zh-CN.js

  \'menu.datatest\': \'测试功能\',
  \'menu.datatest.datatest_getList\': \'测试功能-查询列表\',

3.新建服务 在包 /src/services 下 (datatestService.js)

import request from \'@/utils/request\';

export async function queryGetList(params) {
  return request(`/data/test/getList`, {
    method: \'POST\',
    body: {
      ...params,
    },
  });
}

4.新建 model(调用serivce) 在/src/pages/[模块文件夹]/models 下
  样例：新建文件   /src/pages/datatest/models/datatest.js
   

import { queryGetList} from \'@/services/datatestService\';

// 注意此处 interfaceData 未项目统一封装方法（统一格式）
import { interfaceData } from \'@/utils/interface\';

export default {
  namespace: \'datatest\',

  state: {
    data: {
      list: [],
      pagination: {},
    },
  },

  effects: {
    *datatestQueryList({ payload }, { call, put }) {
      const response = yield call(queryGetList, payload);
      yield put({
        type: \'datatestReduce\',
        // 注意此处 interfaceData 未项目统一封装方法（统一格式）
        payload: { data: interfaceData(response) },
      });
    },

  },
  // 处理所有的同步逻辑，将数据返回给页面
  // reducer 是一个函数，接受 state 和 action，返回老的或新的 state 。即：(state, action) => state
  reducers: {
    datatestReduce(state, { payload }) {
      return {
        ...state,
        ...payload,                                            // 将数据返回给页面
      };
    },
  },
};

5.新建 组件（渲染页面） 在/src/pages/[模块文件夹]/ 下
  创建以下两个文件
/src/pages/datatest/DataTestList.less（内容从其他地方Copy并修改即可）
/src/pages/datatest/DataTestList.js

import React, { PureComponent, Fragment } from \'react\';
import { connect } from \'dva\';
import moment from \'moment\';
import { formatMessage, FormattedMessage } from \'umi/locale\';
import {
  Row,
  Col,
  Card,
  Form,
  Input,
  Select,
  Button,
  Modal,
  message,
  Divider,
  DatePicker,
} from \'antd\';
import StandardTable from \'@/components/StandardTable\';
import PageHeaderWrapper from \'@/components/PageHeaderWrapper\';
import { jsonFormat } from \'@/utils/jsonUtils\';
import styles from \'./DataTestList.less\';

const FormItem = Form.Item;
const { Option } = Select;

@connect(({ datatest, loading }) => ({
  datatest,
  loading: loading.models.datatest,
}))
@Form.create()
class DataTestList extends PureComponent {
  // 初始化状态值
  state = {
    // formValues: {},
    // sweepVisible: false,
    // sweepDetailData: {},
  };
  // 页面渲染完成后初始化方法
  // dispatch中的参数就是一个Action。第一个type字段由两部分组成，前半部分是model的namespace（命名空间），
  // 后半部分是该Action的处理位置，对应model中的effects（处理异步逻辑）,或reducers（处理同步逻辑）。
  componentDidMount() {
    const { dispatch } = this.props;
    dispatch({
      type: \'datatest/datatestQueryList\',
    });
  }
  // 离开该页面时渲状态值初始化
  componentWillUnmount() {
    this.setState({
      // formValues: {},
      // sweepVisible: false,
      // sweepDetailData: {},
    });
  }
  // 扫码数据查询提交
  datatestSearch = e => {
    e.preventDefault();
    const { dispatch, form } = this.props;
    form.validateFields((err, fieldsValue) => {
      if (err) return;
      const values = {
        ...fieldsValue,
      };
      // let BeginTime = new Date(values.beginDate).getTime();
      // let EndTime = new Date(values.endDate).getTime();
      // if (BeginTime == 0) {
      //   BeginTime = null;
      // }
      // if (EndTime == 0) {
      //   EndTime = null;
      // }
      // values.beginDate = BeginTime; // 开始日期非空处理
      // values.endDate = EndTime; // 开始日期非空处理
      // this.setState({
      //   formValues: values,
      // });
      // values.pageNumber = 1; // 当前页码，默认1
      // values.pageSize = 10; // 每页数据条数，默认10
      dispatch({
        type: \'datatest/datatestQueryList\',
        payload: values,
      });
    });
  };
  // table列表发生变化时触发（分页，排序）
  tableChange = pagination => {
    const { dispatch } = this.props;
    const { formValues } = this.state;
    // let begintime = \'\'; // 开始时间为空时
    // let endtime = \'\'; // 结束时间为空时
    // if (formValues != undefined) {
    //   if (formValues.beginDate != undefined) {
    //     begintime = formValues.beginDate;
    //   }
    //   if (formValues.endDate != undefined) {
    //     endtime = formValues.endDate;
    //   }
    // }
    // formValues.beginDate = begintime; // 开始时间
    // formValues.endDate = endtime; // 结束时间
    // formValues.pageNumber = pagination.current; // 当前页码
    // formValues.pageSize = pagination.pageSize; // 每页条数
    dispatch({
      type: \'datatest/datatestQueryList\',
      payload: formValues,
    });
  };

  // 查询条件筛选表单
  renderSearchForm() {
    const {
      form: { getFieldDecorator },
    } = this.props;
    return (
      <Form  ={this.datatestSearch} layout=\"inline\">

      </Form>
    );
  }

  // 扫码数据列表名字段
  columns = [
    {
       : \'field1\',
      dataIndex: \'field1\',
    },
    {
       : \'时间\',
      dataIndex: \'createTime\',
      render(val) {
        if (val != null) {
          return <span>{moment(val).format(\'YYYY-MM-DD HH:mm:ss\')}</span>;
        } else {
          return <span />;
        }
      },
    },
    {
       : \'field2\',
      dataIndex: \'field2\',
    },
    {
       : \'field3\',
      dataIndex: \'field3\',
    },
    {
       : \'field4\',
      dataIndex: \'field4\',
    },
    {
       : \'field5\',
      dataIndex: \'field5\',
    },
    {
       : \'field6\',
      dataIndex: \'field6\',
    },
    {
       : \'field7\',
      dataIndex: \'field7\',
    },
    // {
    //    : \'操作\',
    //   render: record => (
    //     <Fragment>
    //       <span
    //         className={styles.operateSpan}
    //          ={() => this.handleSweepVisible(true, record.id, record.indexName)}
    //       >
    //         详情
    //       </span>
    //       <Divider type=\"vertical\" />
    //       <span
    //         className={styles.operateSpan}
    //          ={() => this.removeRecord(record.id, record.indexName)}
    //       >
    //         删除
    //       </span>
    //     </Fragment>
    //   ),
    // },
  ];
  // 渲染扫码数据列表界面
  render() {
    const {
      datatest: { data },
      loading,
    } = this.props;
    // const { sweepVisible, sweepDetailData } = this.state;
    // 扫码数据详情组件参数信息值
    // const parentMethods = {
    //   handleSweepVisible: this.handleSweepVisible,
    // };
    return (
      <PageHeaderWrapper>
        <Card bordered={false}>
          <div className={styles.tableList}>
            <div className={styles.tableListForm}>{this.renderSearchForm()}</div>
            <StandardTable
              loading={loading}
              data={data}
              columns={this.columns}
              selectedRows={[]}
               ={this.tableChange}
            />
            {/*{data.pagination.total > 0 ? (*/}
              {/*<div className={styles.dataListTotal}>*/}
                {/*总共*/}
                {/*<span className={styles.dataTotalColor}>*/}
                  {/*{numeral(data.pagination.total).format(\'0,0\')}*/}
                {/*</span>*/}
                {/*条数据*/}
              {/*</div>*/}
            {/*) : null}*/}
          </div>
        </Card>
        {/*<SweepDetail*/}
          {/*{...parentMethods}*/}
          {/*sweepVisible={sweepVisible}*/}
          {/*sweepDetailData={sweepDetailData}*/}
        {/*/>*/}
      </PageHeaderWrapper>
    );
  }
}

export default DataTestList;

6.如果需要RAP测试，请确保配置了代理 config.js

proxy: {
        \'/data\': {
          target: \'http://rap.**.com/mockjsdata/149/\',
          changeOrigin: true,
        },
        \'/template\': {
          target: \'http://rap.**.com/mockjsdata/151/\',
          changeOrigin: true,
        },
      },

7.效果如下