总的流程就是从后端查出数据，然后在前端页面展示，其中列表包含查询，分页，以及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中的
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 中的
{ title: 'ddss', dataIndex: 'serviceNum', key: 'serviceNum', render: (text, row, record) => (), },{visible} style={{ right: 20 }} keyboard={true} mask={false} //onOk={handleOk} onCancel={handleOk} footer={[]} > {content1()}
具体的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