一些参考:
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<IProps, IState> {
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) => (
<div>
<a onClick={() => this.onEditCLick(record)}>编辑</a>
<Divider type="vertical" />
{record.enable === 0 ?
<Popconfirm title="是否启用此设备?" onConfirm={() => this.onStartOrStop({id: record.id, enable: 1})}>
<a>启用</a>
</Popconfirm>
:
<Popconfirm title="是否禁用此设备?" onConfirm={() => this.onStartOrStop({id: record.id, enable: 0})}>
<a>禁用</a>
</Popconfirm>
}
</div>
),
},
];
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 (
<PageHeaderWrapper title="设备管理">
<WindowModal
width={1000}
dataSource={currentRecord}
visible={visible}
title={isCreate ? '添加设备' : '编辑'}
destroyOnClose
onCancel={onCancel}
onOk={this.saveOrAdd}
/>
<Card bordered={false}>
<TableHeaderWrapper>
<Row className="header-group" gutter={{ md: 8, lg: 24, xl: 48 }}>
<Col md={16} sm={24}>
<Button type="primary" onClick={() => this.onAddCLick({})}>
添加设备
</Button>
</Col>
</Row>
</TableHeaderWrapper>
<Table
rowKey="id"
loading={loading}
columns={this.columns}
dataSource={list}
pagination={pagination}
onChange={this.handlePagination}
/>
</Card>
</PageHeaderWrapper>
);
}
}
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');
}