antd的请求数据流
一些参考：
https://blog.csdn.net/ws995339251/article/details/88089418
https://blog.csdn.net/zl1zl2zl3/article/details/81357146
antd+bus的请求数据流：（自上而下）
antd的请求数据流里的参数传递：
三个文件：
equipment/index.tsx
import React, { PureComponent } from 'react';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import TableHeaderWrapper from '@/components/TableHeaderWrapper';
import { connect } from 'dva';
import moment from 'moment';
import {
Card,
Form,
Input,
Divider,
Table,
Modal,
Row,
Col,
Button,
Popconfirm,
Checkbox,
Select,
} from 'antd';
import { FormComponentProps } from 'antd/lib/form';
import { PaginationConfig } from 'antd/lib/table';
import WindowModal from './modal/WindowModal';
const { Option } = Select;
interface IProps extends FormComponentProps {
list: any[];
roleList: any[];
loading: any;
dispatch: any;
pagination: PaginationConfig;
}
interface IState {
visible;
isCreate;
currentRecord;
}
@connect(({ equipment, loading }) => ({
...equipment, // 解析store所有值
loading: loading.models.equipment,
}))
@Form.create()
class BasicList extends PureComponent {
index = 0;
state = {
visible: false,
isCreate: true,
currentRecord: {},
routes: [],
};
columns = [
{
title: '设备编号',
dataIndex: 'deviceNo',
},
{
title: '设备型号',
dataIndex: 'model',
},
{
title: '添加日期',
dataIndex: 'creationTime',
render: (text, record) => {
return moment(text).format('YYYY-MM-DD HH:mm')
},
},
{
title: '操作',
render: (text, record) => (
this.onEditCLick(record)}>编辑
this.onStartOrStop({id: record.id, enable: 1})}>
启用
:
this.onStartOrStop({id: record.id, enable: 0})}>
禁用
}
),
},
];
componentDidMount() {
this.fetchList();
}
fetchList = (payload?) => {
const { dispatch } = this.props;
dispatch({
type: 'equipment/fetch',
payload,
});
};
handlePagination = ({ current = 1 }) => {
const queryParams = this.props.form.getFieldsValue();
this.fetchList({ page: current, ...queryParams });
};
// 新增
onAddCLick = (payload = {}) => {
this.setState({
currentRecord: {},
isCreate: true,
visible: true,
});
};
// 编辑
onEditCLick = record => {
this.setState({
currentRecord: record,
isCreate: false,
visible: true,
});
};
// 新增或编辑用户信息
saveOrAdd = (payload = {}) => {
console.log('payload', payload);
const { dispatch, pagination } = this.props;
const { isCreate } = this.state;
const callback = () => {
this.setState({
visible: false,
currentRecord: {},
});
this.handlePagination(pagination);
};
if (isCreate) {
dispatch({
type: 'equipment/add',
payload,
callback,
});
} else {
dispatch({
type: 'equipment/update',
payload,
callback,
});
}
};
// 启用或禁用
onStartOrStop = payload => {
const { dispatch, pagination } = this.props;
dispatch({
type: 'equipment/update',
payload,
callback: () => {
this.handlePagination(pagination);
},
});
};
render() {
const {
list = [],
pagination,
loading,
form: { getFieldDecorator },
form,
} = this.props;
const { visible, currentRecord, routes, isCreate } = this.state;
const onCancel = () => {
this.setState({ visible: false });
Modal.destroyAll();
};
return (
);
}
}
export default BasicList;
model.js
import { query, addEquipment, updateEquipment } from '@/services/equipment';
export default {
namespace: 'equipment',
state: {
list: [],
pagination: {},
},
effects: {
*fetch({ payload }, { call, put }) {
const response = yield call(query, payload);
console.log('response', response);
yield put({
type: 'save',
payload: response.data,
});
},
*add({ payload, callback }, { call, put }) {
const response = yield call(addEquipment, payload);
yield put({
type: 'save',
payload: response,
});
if (callback) callback();
},
// *remove({ payload, callback }, { call, put }) {
// const response = yield call(updateUser, payload);
// yield put({
// type: 'save',
// payload: response,
// });
// if (callback) callback();
// },
*update({ payload, callback }, { call, put }) {
const response = yield call(updateEquipment, payload.id, payload);
yield put({
type: 'save',
payload: response,
});
if (callback) callback();
},
},
reducers: {
save(state, action) {
const { items: list, totalCount: total } = action.payload;
const { pagination } = state;
console.log('action.payload', list, total);
return {
...state,
list,
pagination: {
...pagination,
total,
},
};
},
},
};
equipment.js
import request from '@/utils/request';
export async function query(params) {
return request('/devices',{ params });
}
export async function addEquipment(data) {
return request('/devices', {
method: 'POST',
data,
});
}
export async function updateEquipment(id, data) {
return request(`/devices/${id}`, {
method: 'PUT',
data,
});
}
export async function queryCurrent() {
return request('/currentDevices');
}