這幾天寫的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