AntDesign 開發-1 （簡單列表頁面-sy）

開發步驟
1.添加菜單 router.config.js

      {
        path: '/testData',
        name: 'datatest',
        icon: 'form',
        routes: [
          {
            path: '/testData/getList',
            name: 'datatestList',
            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 onSubmit={this.datatestSearch} layout="inline">
          <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
            <Col md={8} sm={24}>
              <FormItem label="查詢字段1">
                {getFieldDecorator('field1')(<Input placeholder="請輸入查詢字段1" />)}
              </FormItem>
            </Col>
            <Col md={8} sm={24}>
              <FormItem label="查詢字段2">
                {getFieldDecorator('field2')(<Input placeholder="請輸入查詢字段2" />)}
              </FormItem>
            </Col>
            <Col md={8} sm={24}>
              <FormItem label="查詢字段3">
                {getFieldDecorator('field3')(<Input placeholder="請輸入查詢字段3" />)}
              </FormItem>
            </Col>
          </Row>
          <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
            <Col md={8} sm={24}>
              <FormItem label="查詢字段4">
                {getFieldDecorator('field4')(<Input placeholder="請輸入查詢字段4" />)}
              </FormItem>
            </Col>
            <Col md={8} sm={24}>
              <FormItem label="查詢字段5">
                {getFieldDecorator('field5')(
                  <Select placeholder="請選擇查詢字段5" style={{ width: '100%' }}>
                    <Option value="true">成功</Option>
                    <Option value="false">失敗</Option>
                  </Select>
                )}
              </FormItem>
            </Col>
            <Col md={8} sm={24}>
              <FormItem label="查詢字段6">
                {getFieldDecorator('field6')(
                  <Select placeholder="請選擇查詢字段6" style={{ width: '100%' }}>
                    <Option value="true">成功</Option>
                    <Option value="false">失敗</Option>
                  </Select>
                )}
              </FormItem>
            </Col>
          </Row>
          <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
            <Col md={8} sm={24}>
              <FormItem label="開始時間">
                {getFieldDecorator('beginDate')(<DatePicker placeholder="請選擇開始時間" />)}
              </FormItem>
            </Col>
            <Col md={8} sm={24}>
              <FormItem label="結束時間">
                {getFieldDecorator('endDate')(<DatePicker placeholder="請選擇結束時間" />)}
              </FormItem>
            </Col>
            <Col md={8} sm={24} className={styles.queryButtons}>
              <span className={styles.submitButtons}>
                <Button type="primary" htmlType="submit">
                  查詢
                </Button>
              </span>
            </Col>
          </Row>
        </Form>
    );
  }

  // 掃碼數據列表名字段
  columns = [
    {
      title: 'field1',
      dataIndex: 'field1',
    },
    {
      title: '時間',
      dataIndex: 'createTime',
      render(val) {
        if (val != null) {
          return <span>{moment(val).format('YYYY-MM-DD HH:mm:ss')}</span>;
        } else {
          return <span />;
        }
      },
    },
    {
      title: 'field2',
      dataIndex: 'field2',
    },
    {
      title: 'field3',
      dataIndex: 'field3',
    },
    {
      title: 'field4',
      dataIndex: 'field4',
    },
    {
      title: 'field5',
      dataIndex: 'field5',
    },
    {
      title: 'field6',
      dataIndex: 'field6',
    },
    {
      title: 'field7',
      dataIndex: 'field7',
    },
    // {
    //   title: '操作',
    //   render: record => (
    //     <Fragment>
    //       <span
    //         className={styles.operateSpan}
    //         onClick={() => this.handleSweepVisible(true, record.id, record.indexName)}
    //       >
    //         詳情
    //       </span>
    //       <Divider type="vertical" />
    //       <span
    //         className={styles.operateSpan}
    //         onClick={() => 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={[]}
              onChange={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.效果如下