import {
Modal,
Upload,
Badge,
Button,
Card,
Col,
DatePicker,
Divider,
Dropdown,
Form,
Icon,
Input,
InputNumber,
Menu,
Row,
Select,
message,
} from 'antd';
import React, { Component, Fragment } from 'react';
import StandardTable from '../../list/table-list/components/StandardTable';
import { connect } from 'dva';
//建立数据通信,MemberList model的namespace名称
@connect(({ MemberList, loading }) => ({
MemberList,
loading: loading.models.MemberList,
}))
//创建 Management 组件 ,并在最后导出
class Management extends Component {
state = {
selectedRows: [],
formValues: {},
};
//组件挂载完成后,加载数据
componentDidMount() {
const { dispatch } = this.props;
dispatch({
type: 'MemberList/fetch',
});
}
//表格数据改变时
handleStandardTableChange = (pagination, filtersArg, sorter) => {
const { dispatch } = this.props;
const { formValues } = this.state;
const filters = Object.keys(filtersArg).reduce((obj, key) => {
const newObj = { ...obj };
newObj[key] = getValue(filtersArg[key]);
return newObj;
}, {});
const params = {
currentPage: pagination.current,
pageSize: pagination.pageSize,
...formValues,
...filters,
};
if (sorter.field) {
params.sorter = `${sorter.field}_${sorter.order}`;
}
dispatch({
type: 'MemberList/fetch',
payload: params,
});
};
// 列名
columns = [
{
title: '设备编号',
dataIndex: 'deviceNo',
},
{
title: '设备类型',
dataIndex: 'deviceType',
},
{
title: '设备MAC' +
'地址',
dataIndex: 'deviceMac',
},
{
title: '设备二维码',
dataIndex: 'barCodePic',
//渲染图片
render: (val) => (
<Fragment>
<img width="100" src={val?val.replace("https://mingmai.hzyytech.com","http://localhost"):'data:image/jpeg;)} />
</Fragment>
),
},
{
title: '操作',
render: (text, record) => (
<Fragment>
<a onClick={() => this.handleUpdateModalVisible(true, record)}>配置</a>
<Divider type="vertical" />
<a href="">订阅警报</a>
</Fragment>
),
},
];
//渲染
render() {
const {
MemberList: { data },
loading,
} = this.props;
//复选框
const { selectedRows } = this.state;
return(
//输出到页面
<StandardTable
selectedRows={selectedRows}
loading={loading}
data={data}
columns={this.columns}
//表格改变时
onChange={this.handleStandardTableChange}
/>
);
}
}
//导出组件 Management
export default Form.create()(Management);
//从service.js中 queryMember 方法
import { addRule, queryRule, removeRule, updateRule,queryMember } from './service';
const Model = {
//命名空间
namespace: 'MemberList',
state: {
data: {
list: [],
pagination: {},
},
},
effects: {
*fetch({ payload }, { call, put }) {
const response = yield call(queryRule, payload);
yield put({
type: 'save',
payload: response,
});
},
*add({ payload, callback }, { call, put }) {
const response = yield call(addRule, payload);
yield put({
type: 'save',
payload: response,
});
if (callback) callback();
},
*remove({ payload, callback }, { call, put }) {
const response = yield call(removeRule, payload);
yield put({
type: 'save',
payload: response,
});
if (callback) callback();
},
*update({ payload, callback }, { call, put }) {
const response = yield call(updateRule, payload);
yield put({
type: 'save',
payload: response,
});
if (callback) callback();
},
},
reducers: {
save(state, action) {
return { ...state, data: action.payload };
},
},
};
export default Model;
import request from '@/utils/request';
// export async function queryRule(params) {
// return request('/api/rule', {
// params,
// });
// }
export async function queryRule(params) {
return request('http://localhost/find_all_device', {
params,
});
}
//查询用户方法
export async function queryMember(params) {
return request('http://localhost/find_all_device', {
params,
});
}
export async function removeRule(params) {
return request('/api/rule', {
method: 'POST',
data: { ...params, method: 'delete' },
});
}
export async function addRule(params) {
return request('http://localhost/add_device', {
method: 'POST',
data: { ...params, method: 'post' },
});
}
export async function updateRule(params) {
return request('/api/rule', {
method: 'POST',
data: { ...params, method: 'update' },
});
}