添加修改页面

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' },
  });
}