这几天写的react+ant design

总的流程就是从后端查出数据，然后在前端页面展示，其中列表包含查询，分页，以及table表格中通过点击在页面上悬浮一个框，显示与本行具有相关性的数据；

总的前端页面分为六个文件：路由router.js,页面index.js,页面相关List.js model下的监控.js,service下的.js以及最后一步的config.js

其中、基本操作一次的为config.js,就是service下的url的延伸或者说是便于管理url的中心;

service下的js为真正model调用的url,其中大概长这样：

里面的参数应该很好懂；

然后就是经常操作的index.js,model下的js,以及index的延伸页面；

明天总结。。。

接着来：

model下的js

import { get } from 'services/operation/privateLineService'//这里就是去获取service下的js，也就是获取自己需要的url
import modelExtend from 'dva-model-extend'
import {pageModel} from "../../common";
import pathToRegexp from "path-to-regexp";

export default modelExtend (pageModel,{

  namespace: 'customerDedicatedLineDetail',//命名空间

  state: {
    detail: {},
    visible: false,
  },

  subscriptions: {//对页面的监控，***代表的是页面路径，也就是router上匹配的路径
    setup ({ dispatch, history }) {
      history.listen(({ location}) => {if(location.pathname === '***') {
　　　　　　　　const query = location.query 
            　dispatch({
              　　type: 'query',
              　　query
            })
          }
        }
      })
    },
  },
　effects: {//进入页面触发所有的方法，在query中

　　* query({payload = {}}, {call, put}) {

  　　yield put({
   　　 type: '123',
    　　payload: {
     　　 ...payload,
      　　range: "2"
   　　 },
  　　}),
    　　//yield put({
      　//　type: '12345',
      　//　payload: {
       　//　 ...payload,
       　//　 range: "2"
      　　//},
    　　//}),
　　},
　　* 123({payload = {}}, {call, put,select}) {
  　　const { currentLineId } = yield select(_ => _.app)
  　　payload.currentLineId = currentLineId
  　　const { success, data } = yield call("url的值", payload)
  　　if (success) {
  　　  yield put({
    　　  type: 'updateState',
     　　 payload: {
      　　  weekCountLineData: data,
     　　 },
   　　 })
　　  }
　　},

　 }, 
reducers: {
 updateState(state, { payload }) {
 return { ...state, detail: payload.item, visible: true }
 } 
}, 
}
)

这大概是model中一个精简的过程，然后是index.js

这里主要是应该用ant design中的<Table/>进行数据展示，这里有一个自己觉得是亮点的就是传过来的数值能自动去匹配table的行，比如说table的columns是这样的：

const baseColumns = [
    {
      title: '序号',
      dataIndex: 'id',
      key: 'id',
    },
    {
      title: '名称',
      dataIndex: 'name',
      key: 'name',

    }, {
      title: '创建时间',
      dataIndex: 'createTime',
      key: 'createTime',
      render: text => moment(text)
        .format('YYYY-MM-DD HH:mm'),
    },
]

然后Table的dataSource为一个数组，然后数组中的对象也好，hashMap也好，只要他的key与colums中的dataIndex与key想匹配，就可以展示；

这是第一；

第二是对table中的指定cell做特别处理；

因为我们的需求是点击指定的cell后，要展示与本条数据相关的数据（这条数据是通过点击触发事件，然后获取的），当时是通过ant design 中的<Popover/>与<Button/>组合而成，这里遇到的一个问题就是通过点击button,popover展示的效果不正常，有兴趣的可以试一试是什么效果；然后通过点化，用到了<modol/>组件，他是通过visible来控制显示与否，类似于下面：

{
      title: 'ddss',
      dataIndex: 'serviceNum',
      key: 'serviceNum',
      render: (text, row, record) => (
        <div>
          <Button id="buttonId" onClick={e => getSecurityServiceList(row.id)}>{text}个服务</Button>
          <Modal visible={visible}
                 style={{ right: 20 }}
                 keyboard={true}
                 mask={false}
            //onOk={handleOk}
                 onCancel={handleOk}
                 footer={[]}
          >
            {content1()}
          </Modal>
        </div>
      ),
    },

具体的api可以取官网查询，但是吧，本人觉得官网的api很多，但是有好多不知道怎么使用，所以还是得拿上api去找百度。

这里面还遇到一个react的知识点，就是在做搜索的时候，遇到这个：

const ddss= () => {
    setTimeout(() => {
      validateFields((err) => {
        if (!err) {
          const data = {
            ...getFieldsValue(),
          }
          const keywords=data.keywords
          getFilter(keywords)
        }
      });
    }, 0);
  }

这里的getFiledDecorator识别失败，

就算在开头导入

还是失败了

这是为啥？？？

通过百度的值，在向外暴露的过程中，需要改成这样：

export default Form.create()(List)
原来应该是：

export default List