Ant Design Pro 运用点滴

好像好长一段时间，都在ant design pro上来回折腾（z turn），原因就是对react不熟。估计还要很长一段时间不熟下去，再记下几点使用后的谈不上技巧的心得。

Table远程数据与thinkphp5的paginate

今天几乎都在弄这个了，幸好弄出来的大概。从运用点滴一，我知道了model的运用，我下手还是从model开始。

新建articlemodel

import { queryList } from '../services/api';
export default {
  namespace: 'article',
  state: {
    results: {
      total: '',
      per_page:'',
      current_page:'',
      last_page:'',
      data: [],
    },
  },
  effects: {
    *fetch({ payload }, { call, put }) {
      const response = yield call(queryList, payload);
      yield put({
        type: 'save',
        payload: response,
      });
    },
  },
  reducers: {
    save(state, action) {
      //将服务器的数据刷新到页面中
      return {
        ...state,
        results: action.payload,
      };
    },
  },
};

再到api里加上queryList

export async function queryList(params) {
  return request(`/api/article/getlist?${stringify(params)}`);
}

注意了，因为我要传后台传入参数，一定要加上（params）

再来看展示页面代码

import React, { PureComponent } from 'react';
import { connect } from 'dva';
import {
  Form,
  Input,
  DatePicker,
  Select,
  Button,
  Card,
  InputNumber,
  Radio,
  Icon,
  Tooltip,
  Table,
  Popconfirm,
  Divider
} from 'antd';
import PageHeaderLayout from '../../layouts/PageHeaderLayout';

import styles from './style.less';



@connect(({ article,loading }) => ({
  article,
  loading: loading.models.article,
}))

export default class BasicForms extends PureComponent {
  state = {
    modalVisible: false,
    expandForm: false,
    selectedRows: [],
    formValues: {},
  };

  componentDidMount() {
    this.fetch({currentPage:1});
  };

  fetch = (params = {}) => {
    const { article:{results},dispatch } = this.props;
    dispatch({
      type: 'article/fetch',
      payload: params,
    });
  };

  handleTableChange = (pagination, filtersArg, sorter) => {
    const { dispatch } = this.props;
    const { formValues } = this.state;
    const filters = Object.keys(filtersArg).reduce((obj, key) => {
      const newObj = { ...obj };
      newObj[key] = getValue(filtersArg[key]);
      return newObj;
    }, {});
    const params = {
      currentPage: pagination.current,
      pageSize: pagination.pageSize,
      ...formValues,
      ...filters,
    };
    if (sorter.field) {
      params.sorter = `${sorter.field}_${sorter.order}`;
    }
    this.fetch(params);
  };

  render() {

    const { article:{results},loading } = this.props;
    const {data,total,current_page}=results;
    const pagination = {
      total:total,
      currentPage:current_page,
    }
    const columns = [{title: 'id',dataIndex: 'id',}, {title: 'title',dataIndex: 'title',},{
      title: 'operation',
      dataIndex: 'operation',
      render: (text, record) => {
        return (
          data.length > 1
            ? (
              <div>
              <Icon type="edit" /> 编辑
              <Divider type="vertical" />
              <Popconfirm title="Sure to delete?" onConfirm={() => this.handleDelete(record.key)}>
                <a href="javascript:;"><Icon type="delete" /> 删除</a>
              </Popconfirm></div>
            ) : null
        );
      },}];

    return (
      <PageHeaderLayout
        title="列表"
        content="列表展示。"
      >
        <Card bordered={false}>
         <Table
        columns={columns}
       rowKey={record => record.id}
        dataSource={data}
        pagination={pagination}
        loading={loading}
        onChange={this.handleTableChange}
      />
        </Card>
      </PageHeaderLayout>
    );
  }
}

因为要和thinkphp5的paginte交互
一定要知道thinkphp5返回json的结构类似于

{
"total":200,
"per_page":"",
"current_page":"3",
"last_page":"",
"data":[{"id":381,"title":"Dasv Xmso Vfhpdsx Kmbuyndb Atbrircww Ihtnblt"},......]
}

我们用到的只有total和current_page
所以我们在render时，提取的相关值

const { article:{results},loading } = this.props;
const {data,total,current_page}=results;
const pagination = {
      total:total,
      currentPage:current_page,
    }

再将pagination绑定在table上面

<Table
        columns={columns}
       rowKey={record => record.id}
        dataSource={data}
        pagination={pagination}
        loading={loading}
        onChange={this.handleTableChange}
      />

php代码没有什么好看的

    public function getlist(Request $request)
    {
        $info['page']=input('?page')?input('page'):1;
        $info['results']=input('?results')?input('results'):10;

        $results = model('Article')->where('status',1)->paginate($info['results'],false,['page'=>$info['page']]);

        return json($results);
    }

附mock

import { parse } from 'url';
import mockjs from 'mockjs';

export function articleList(count) {
  const list = [];
  for (let i = 0; i < count; i += 1) {
    list.push({
      id: mockjs.mock('@increment'),
      title: mockjs.mock('@title'),//titles[i % 8],
    });
  }

  return list;
}

export function getArticleList(req, res, u) {
  let url = u;
  if (!url || Object.prototype.toString.call(url) !== '[object String]') {
    url = req.url; // eslint-disable-line
  }

  const params = parse(url, true).query;

  const count = params.count * 1 || 10;
  const currentPage = params.currentPage;

  const result = {
    total: 200,
    per_page:'',
    current_page:currentPage,
    last_page:'',
    data:articleList(count)
  };

  if (res && res.json) {
    res.json(result);
  } else {
    return result;
  }
}



export default {
  getArticleList,

};